/* ==========================================
   1. GLOBAL RESET & BASE STYLES
   ========================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  color: #002157;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('fonts/montserrat-v31-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('fonts/montserrat-v31-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url('fonts/montserrat-v31-latin-800.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('fonts/montserrat-v31-latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url('fonts/montserrat-v31-latin-600.woff2') format('woff2');
}

body {
  font-family: 'Montserrat', sans-serif;
}

/* ==========================================
   2. CUSTOM HEADER (EXACT REPLICA + DROPDOWN SYSTEM)
   ========================================== */

.ma-header {
  width: 100%;
  background-color: #FFFFFF;
  padding: 28px 20px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(0, 33, 87, 0.08);
  
  /* Changed to relative to scroll away natively at first */
  position: relative;
  top: 0;
  
  /* FIXED: Z-index reduced to 1000 to act as Base Layer, below overlay and cart */
  z-index: 1000;
  
  /* Slower, ultra-luxurious 0.75s glide duration */
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), 
              opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  
  /* FIXED: Removed transform: translate3d(0, 0, 0) and will-change: transform to break 
     the CSS containing block trap. This allows position: fixed children to anchor to the viewport. */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  opacity: 1;

  /* PERF FIX: Sandboxes header layout from the main page body to prevent CPU re-renders during slide animations */
  contain: layout;
}

/* ADDED: Becomes sticky ONLY when triggered by JS after being fully bypassed */
.ma-header.is-sticky {
  position: sticky;
  top: 0;
}

/* Off-screen State: Hidden smoothly above the viewport when scrolling down */
.ma-header.is-hidden {
  /* PERF FIX: Strict hardware-accelerated Z-axis translation prevents paint invalidation */
  transform: translate3d(0, -100%, 0);
  will-change: transform, opacity;
  opacity: 0;
  pointer-events: none;
}

/* Utility to instantly disable transitions if needed */
.ma-header.no-transition {
  transition: none !important;
}

.ma-menu-toggle {
  display: none;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
  position: relative;
}

/* ==========================================
   UPDATED BASE TOGGLE SPAN STYLES
   ========================================== */
.ma-menu-toggle span {
  display: block;
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: #002157;
  
  transition: transform 0.3s ease, opacity 0.3s ease;
  
  /* Promotes layer to GPU to remove anti-aliasing blur mid-animation */
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Crisp integer bounds & hardware acceleration */
.ma-menu-toggle span:nth-child(1) { top: 8px; transform: translate3d(0, -8px, 0); }
.ma-menu-toggle span:nth-child(2) { top: 8px; transform: translate3d(0, 0, 0); }
.ma-menu-toggle span:nth-child(3) { top: 8px; transform: translate3d(0, 8px, 0); }

.ma-logo-container {
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width: 768px) {
  .ma-logo-container {
    transform: translateX(-12px);
  }
}

.logo-img {
  height: 190px;
  width: auto;
  display: block;
  max-width: 100%;
  object-fit: contain;
}

/* ==========================================
   CART STYLES (DESKTOP)
   ========================================== */
.ma-cart-link {
  position: absolute;
  right: 120px;
  top: 123px;
  transform: translateY(-50%);
  display: inline-block;
  text-decoration: none;
  z-index: 998; /* FIXED: Matched to header base layer */
  transition: opacity 0.3s ease;
}

.ma-cart-link:hover {
  opacity: 0.45;
}

.ma-cart-icon {
  width: 35px;
  height: 35px;
  display: block;
}

.ma-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.ma-nav-item {
  position: static;
  display: flex;
  align-items: center;
}

.ma-nav-link {
  display: inline-block; /* Forces identically exact vertical box dimensions */
  font-family: 'Montserrat', sans-serif;
  color: #002157;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding-bottom: 5px;
  transition: color 0.3s ease, border-color 0.3s ease;
  border-bottom: 2.5px solid transparent;
}

/* Hover dimming separated from Active Dropdown rules */
.ma-nav-link:not(.active):hover {
  color: rgba(0, 33, 87, 0.45);
}

.ma-nav-link.active {
  border-bottom: 2.5px solid #002157;
}

/* Active navigation link solid styling while dropdown menu is clicked open */
.ma-nav-item.active-dropdown .ma-nav-link {
  color: #002157;
  border-bottom: 2.5px solid #002157;
}

.ma-mobile-subhead {
  display: none;
}

/* DESKTOP FIX: Suppress the default active underline when a dropdown is open */
@media screen and (min-width: 768px) {
  .ma-nav.has-active-dropdown .ma-nav-link.active {
    border-bottom-color: transparent;
  }
  .ma-nav.has-active-dropdown .ma-nav-item.active-dropdown .ma-nav-link {
    border-bottom-color: #002157;
  }
}

/* --- BASE DROPDOWN ELEMENTS & MOBILE PREPARATION --- */
.ma-dropdown {
  /* Establishes safe base stacking context for mobile sliding panels */
  z-index: 1005;
}

.ma-mobile-back-btn {
  /* Initializes the mobile drill-down back control as strictly hidden on desktop */
  display: none;
}

.ma-dropdown-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ma-dropdown-heading {
  font-family: 'Montserrat', sans-serif;
  color: #002157;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: 0.5;
}

.ma-dropdown-divider {
  width: 100%;
  border: none;
  border-top: 1px solid rgba(0, 33, 87, 0.1);
  margin: 20px 0;
}

.ma-dropdown-link {
  font-family: 'Montserrat', sans-serif;
  color: #002157;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  padding: 10px 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: inline-block !important;
  white-space: normal !important;
  max-width: 200px !important;
}

.ma-dropdown-link:hover {
  opacity: 0.6;
  transform: translateX(4px);
}

.ma-promo-anchor {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  align-items: center;
  transition: filter 0.3s ease;
}

.ma-promo-anchor:hover {
  filter: brightness(0.70);
}

.ma-promo-text {
  font-family: 'Montserrat', sans-serif;
  color: #002157;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

@media screen and (min-width: 768px) {
  .ma-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vw;
    background-color: #FFFFFF;
    border-bottom: 1px solid rgba(0, 33, 87, 0.08);
    box-shadow: 0 10px 30px rgba(0, 33, 87, 0.05);
    z-index: 1005;
    min-height: 460px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .ma-nav-item.active-dropdown .ma-dropdown {
    opacity: 1;
    visibility: visible;
    z-index: 1006;
    transition: opacity 0.2s ease, visibility 0s;
  }

  /* SEAMLESS DROPDOWN SWITCHING FIX: Keeps the white background completely stable/opaque during menu switching */
  .ma-nav.is-switching .ma-nav-item.active-dropdown .ma-dropdown {
    transition: none;
  }

  .ma-dropdown-inner {
    display: grid;
    /* FIXED: Swapped max-content for 170px to lock Col 1 identically across all tabs */
    grid-template-columns: 170px 240px 240px;
    justify-content: center;
    align-items: flex-start;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 45px 20px;
    gap: 90px;
    opacity: 0;
    transform: translateX(-15px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .ma-nav-item.active-dropdown .ma-dropdown-inner {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
  }

  /* SEAMLESS DROPDOWN SWITCHING FIX: Removes horizontal slide (transform) and lag, leaving only a smooth cross-fade */
  .ma-nav.is-switching .ma-nav-item.active-dropdown .ma-dropdown-inner {
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0s;
  }

  .ma-promo-col {
    margin-left: 0;
  }

  .ma-promo-img {
    width: 240px;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    margin-bottom: 12px;
  }

  .ma-dropdown-close {
    position: absolute;
    top: 53.8px; /* FIXED: Y-Axis Precise Baseline Alignment */
    /* FIXED: X-Axis far right-hand side, pushed completely clear of the image column */
    right: max(20px, calc(50% - 500px));
    background: none;
    border: none;
    font-size: 35px;
    font-weight: 300;
    color: #A0AABF;
    cursor: pointer;
    transition: color 0.3s ease;
    /* FIXED: Stacking priority & pointer interception protection */
    z-index: 1010;
    pointer-events: auto;
  }

  .ma-dropdown-close:hover {
    color: #002157;
  }
}

/* ==========================================
   3. MAIN CONTENT CANVAS
   ========================================== */
.ma-main-content {
  flex: 1;
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.content-placeholder {
  text-align: center;
  padding: 100px 20px;
}

.content-placeholder h1 {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: 15px;
  text-transform: uppercase;
}

/* ==========================================
   4. FOOTER CODE STYLING
   ========================================== */
.ma-footer-wrapper {
  position: relative !important;
  width: 100% !important;
  background-color: #FFFFFF !important;
  padding: 70px 40px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border-top: 1px solid rgba(0, 33, 87, 0.1) !important;
}

.ma-footer-content {
  width: 100% !important;
  max-width: 1250px !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 40px !important;
}

.ma-footer-column {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 33.333% !important;
  text-align: center !important;
}

.ma-social-heading {
  font-family: 'Montserrat', sans-serif !important;
  color: #002157 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  margin: 0 0 16px 0 !important;
  text-transform: uppercase !important;
}

.ma-corporate-text {
  font-family: 'Montserrat', sans-serif !important;
  color: #002157 !important;
  font-size: 13px !important;
  letter-spacing: 0.15em !important;
  margin: 20px 0 0 0 !important;
  text-transform: uppercase !important;
  line-height: 1.6 !important;
  white-space: nowrap !important;
}

.ma-corporate-text strong {
  font-weight: 500 !important;
}

.ma-italic-bold {
  font-weight: 800 !important;
  font-style: italic !important;
}

.ma-navy-tint {
  filter: brightness(0) saturate(100%) invert(11%) sepia(35%) saturate(7351%) hue-rotate(214deg) brightness(95%) contrast(105%) !important;
}

.ma-social-icons-track {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}

.ma-social-target {
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: opacity 0.3s ease !important;
}

.ma-social-target:hover {
  opacity: 0.6 !important;
}

.ma-svg-icon {
  width: 32px !important;
  height: 32px !important;
  display: block !important;
  object-fit: contain !important;
}

.ma-corporate-logo {
  height: 60px !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
}

.ma-trust-column {
  gap: 24px !important;
}

.ma-icon-track {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
}

.ma-security-track {
  gap: 24px !important;
}

.ma-payment-track {
  gap: 20px !important;
  flex-wrap: wrap;
}

.ma-trust-banner {
  height: 48px !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
}

.ma-payment-card {
  width: 48px !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

.ma-footer-bottom-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1250px !important;
  gap: 40px !important;
  margin-top: 50px !important;
  flex-wrap: wrap !important;
}

.ma-bottom-row-link {
  font-family: 'Montserrat', sans-serif !important;
  color: #002157 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  transition: opacity 0.3s ease !important;
  text-align: center !important;
}

@media (hover: hover) and (pointer: fine) {
  .ma-bottom-row-link:hover {
    opacity: 0.4 !important;
  }
}

.ma-bottom-row-link:active {
  opacity: 0.6 !important;
}

/* ==========================================
   5. RESPONSIVE DESIGN FOR MOBILE VIEWS
   ========================================== */
@media screen and (max-width: 767px) {

  /* ======================================================
     REMOVE ALL MOBILE TAP HIGHLIGHTS & FLASHES (MOBILE ONLY)
     ====================================================== */
  *,
  *::before,
  *::after {
    -webkit-tap-highlight-color: transparent !important;
  }

  *:focus,
  *:focus-visible {
    outline: none !important;
  }

  /* --- HIDE NATIVE SCROLLBAR TRACK (TOUCH SCROLLING REMAINS ACTIVE) --- */
  html, body {
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE / Edge */
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    display: none;               /* Chrome, Safari, WebKit Emulators */
    width: 0;
    height: 0;
  }
  /* -------------------------------------------------------------------- */

  .ma-header {
    padding: 20px;
    min-height: 110px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .ma-logo-container {
    margin-bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .logo-img {
    height: 115px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  .ma-menu-toggle {
    display: block;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* --- ADDED: MOBILE CART POSITIONING (BALANCED WITH MENU TOGGLE) --- */
  .ma-cart-link {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 20px;
    top: 50%;
    /* Optical offset: Shifted up by 4px to align the solid visual mass of the bag with the hamburger menu */
    transform: translateY(calc(-50% - 3px));
  }

/* --- MOBILE CART ICON VISUAL RESIZE --- */
  .ma-cart-icon {
    width: 30px;  /* Adjust down from 35px (e.g., 26px - 28px) */
    height: 30px;
  }

/* ==========================================
   UPDATED MOBILE TOGGLE .OPEN STATES
   ========================================== */
.ma-menu-toggle.open span:nth-child(1) {
  transform-origin: 50% 50%;
  transform: translate3d(0, 0, 0) rotate(45deg);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.ma-menu-toggle.open span:nth-child(2) {
  opacity: 0;
}

.ma-menu-toggle.open span:nth-child(3) {
  transform-origin: 50% 50%;
  transform: translate3d(0, 0, 0) rotate(-45deg);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

  .ma-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    max-width: 85%;
    height: 100vh;
    height: 100dvh;
    background-color: #FFFFFF;
    box-shadow: 4px 0 25px rgba(0, 33, 87, 0.15);
    z-index: 1000;
    padding: 100px 30px 40px 30px;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.05, 1);
    gap: 0;
    overflow-y: auto;
    overflow-x: hidden; /* ADDED: Clips the horizontally sliding sub-panels */
  }

  /* --- ADDED: MOBILE MAIN CATEGORIES LIST --- */
  .ma-nav-item {
    width: 100%;
    border-bottom: 2px solid rgba(0, 33, 87, 0.1);
  }

  .ma-nav-link {
    display: block;
    width: 100%;
    padding: 18px 0;
    font-size: 18px;
    border-bottom: none !important; /* Suppress desktop active underlines */
  }

/* Mobile Sub-Drawer Structural Styles (Single-View Drill-Down) */
  .ma-dropdown {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    background-color: #FFFFFF;
    z-index: 1002;
    padding: 100px 30px 40px 30px;
    /* GPU-accelerated 3D transform */
    transform: translate3d(100%, 0, 0);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.05, 1);
    /* Prevent text blur & antialiasing snap mid-animation */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Override desktop dropdown properties for mobile */
    box-shadow: none;
  }

  .ma-nav-item.active-dropdown .ma-dropdown {
    transform: translate3d(0, 0, 0);
  }

  /* Prevent nested compound motion collision when the main drawer closes */
  .ma-nav:not(.open) .ma-dropdown {
    transition: none;
  }

  /* Layout & Indentation Overrides */
  .ma-dropdown-heading {
    display: none !important;
  }

  .ma-dropdown-inner,
  .ma-dropdown-col {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    opacity: 1;
    transform: none;
    gap: 0; /* Reset desktop grid gaps */
  }

  .ma-dropdown-link {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 0;
    font-size: 18px;
    font-weight: 500;
    border-bottom: 2px solid rgba(0, 33, 87, 0.1);
  }

  .ma-dropdown-col:last-child .ma-dropdown-link:last-child {
    border-bottom: none;
  }

/* --- REPLACE WITH SVG CHEVRON --- */

/* Hide the 3 hamburger/X spans when dropdown is active */
.ma-header:has(.ma-nav-item.active-dropdown) .ma-menu-toggle.open span {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show the SVG chevron */
.ma-header:has(.ma-nav-item.active-dropdown) .ma-menu-toggle.open {
  background-image: url('images/chevron.svg');
  background-repeat: no-repeat;
  background-position: calc(50% + 2px) center;
  background-size: 33px 33px; /* Increased size while staying centered */
  transition: background-image 0.3s ease;
}

  /* --- INVISIBLE CLICK INTERCEPTOR (BACK ACTION) --- */
  .ma-mobile-back-btn {
    display: none;
    position: fixed;
    top: 55px; /* Locked to EXACT same axis as toggle */
    left: 20px; /* Locked to EXACT same origin as toggle */
    transform: translateY(-50%); 
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 1015; /* Sits above the toggle lines */
    opacity: 0; /* Fully invisible */
  }

  .ma-nav-item.active-dropdown .ma-mobile-back-btn {
    display: block;
  }

  .ma-promo-col,
  .ma-dropdown-close {
    display: none !important;
  }
  /* ------------------------------------------ */

  .ma-nav.open {
    transform: translateX(0);
  }

  .ma-drawer-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background-color: rgba(0, 33, 87, 0.25);
    backdrop-filter: blur(2px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
  }

  .ma-drawer-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .ma-footer-wrapper {
    padding: 50px 20px !important;
  }

  .ma-footer-content {
    flex-direction: column !important;
    gap: 60px !important;
  }

  .ma-footer-column {
    width: 100% !important;
  }

  .ma-corporate-text {
    font-size: 12px !important;
    white-space: normal !important;
  }

  .ma-footer-bottom-row {
    flex-direction: column !important;
    gap: 20px !important;
    margin-top: 40px !important;
  }

  .ma-bottom-row-link {
    font-size: 14px !important;
  }

  /* --- MOBILE DROPDOWN HEADER TITLE ALIGNMENT --- */
  .ma-mobile-subhead {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 76px; /* Exact same vertical axis as the < back button */
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    pointer-events: none; /* Prevents title from blocking clicks */
    z-index: 1010;
  }

  .ma-mobile-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #002157;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
  }

  /* Target the 4th navigation item title (Bags & Accessories) */
.ma-nav-item:nth-child(5) .ma-mobile-title {
  font-size: 17px;
  letter-spacing: 0.05em;
}

/* ======================================================
   LOCK BACKGROUND PAGE SCROLL (SAFE - NO LAYOUT JUMPING)
   ====================================================== */
body:has(.ma-nav.open) {
  overflow: hidden !important;
  overscroll-behavior: contain;
}
}

/* ==========================================
   6. FULLSCREEN HERO SECTION 
   ========================================== */
.modamerica-fullscreen-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #000000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hero-video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000; 
  z-index: 1; 
}

.hero-vid {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block;
  border: none;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 70%);
  padding: 0 1.5rem;
}

.hero-text-content {
  text-align: center;
  text-transform: uppercase;
  max-width: 1100px;
}

.hero-main-text {
  color: #FFFFFF;
  font-weight: 800;
  font-size: clamp(1.6rem, 3.8vw, 3.2rem);
  line-height: 1.2;
  margin: 0 0 1rem 0;
  letter-spacing: 2px;
}

.hero-sub-text {
  color: #FFFFFF;
  font-weight: 300;
  font-size: clamp(0.75rem, 1.25vw, 1.1rem);
  line-height: 1.6;
  margin: 0;
  letter-spacing: 0.35em;
}

.hero-cta-btn {
  display: inline-block;
  margin-top: 2.5rem;
  background-color: #FFFFFF;
  color: #002157;
  font-weight: 800;
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 42px;
  border: 1px solid #FFFFFF;
  border-radius: 0px;
  transition: background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none !important;
}
video::-webkit-media-controls {
  display: none !important;
}

@media (min-width: 768px) {
  .hero-cta-btn:hover {
    background-color: transparent;
    color: #FFFFFF;
    border-color: #FFFFFF;
  }
}

@media (max-width: 767px) {
  .modamerica-fullscreen-hero {
    height: 80vh;
  }
  .hero-cta-btn {
    margin-top: 2rem;
    padding: 12px 32px;
  }
}

/* =========================================
   7. EDGE-TO-EDGE BRAND CAROUSEL
========================================= */
.custom-brand-carousel {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  padding: 52px 0; 
  background: transparent;
  box-sizing: border-box;
  position: relative;
  contain: layout paint;
}

.custom-brand-container {
  display: flex;
  width: max-content;
}

.custom-brand-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: simpleScrollLeft 50s linear infinite;
  will-change: transform; 
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.custom-brand-img {
  height: 150px;
  width: auto;
  margin: 0 90px;
  object-fit: contain;
  border: none;
  box-shadow: none;
  filter: none;
}

@keyframes simpleScrollLeft {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

.scale-md-desktop { transform: scale(1.2); }
.scale-lg-desktop { transform: scale(1.6); }
.scale-up-logo { transform: scale(1.5); }

@media (max-width: 768px) {
  .custom-brand-img {
    height: 100px;
    margin: 0 45px;
  }
  .scale-md-desktop,
  .scale-lg-desktop {
    transform: scale(1);
  }
  .scale-md-mobile { transform: scale(1.2); }
  .scale-lg-mobile { transform: scale(1.25); }
  .scale-xl-mobile { transform: scale(1.3); }
  .scale-up-logo { transform: scale(1.7); }
}

/* =========================================
   LEGAL DISCLAIMER LINK (CAROUSEL)
========================================= */
.legal-disclaimer-link {
  position: absolute;
  top: 15px;
  right: 20px;
  font-family: 'Montserrat', sans-serif;
  color: #002157;
  text-decoration: underline;
  font-size: 17px;
  font-weight: 600;
  z-index: 10;
  transition: opacity 0.2s ease;
}

/* Desktop: Dim on hover and click */
@media (hover: hover) and (pointer: fine) {
  .legal-disclaimer-link:hover,
  .legal-disclaimer-link:active {
    opacity: 0.5;
  }
}

/* Mobile: Switch to top right, dim on click only */
@media (max-width: 768px) {
  .legal-disclaimer-link {
    bottom: auto;
    top: 10px;
    right: 15px;
  }
  .legal-disclaimer-link:active {
    opacity: 0.5;
  }
}

/* ==========================================
   8. PRODUCT CATEGORY GRID & CARDS
   ========================================== */
.mod-category-fullscreen {
  display: block;
  visibility: visible;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  padding: 0 20px 60px 20px;
  background: transparent;
  scroll-margin-top: 90px; 
}

.mod-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
}

.mod-category-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.mod-category-card:hover {
  filter: brightness(0.70);
}

.mod-category-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  border: none;
  box-shadow: none;
  margin-bottom: 12px;
}

.mod-card-label {
  color: #002157;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  position: relative;
  align-self: flex-start; 
}

.mod-card-label::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2.5px; 
  bottom: -4px; 
  left: 0;
  background-color: currentColor;
  transition: width 0.3s ease-in-out;
}

.mod-category-card:hover .mod-card-label::after,
.mod-category-card:active .mod-card-label::after {
  width: 100%;
}

@media (max-width: 768px) {
  .mod-category-fullscreen {
    padding: 0 10px 40px 10px;
    scroll-margin-top: 70px; 
  }
 
  .mod-category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .mod-card-label {
    font-size: 1rem;
  }

  .mod-card-label::after {
    bottom: -3px; 
  }
}

/* ==========================================
   9. ABOUT US SECTION (LAZY LOADED)
   ========================================== */
.ma-about-section {
  width: 100%;
  display: flex;
  background-color: #FFFFFF;
}

.ma-about-content {
  flex: 1;
  padding: 80px 6%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.ma-about-headers {
  margin-bottom: 24px;
}

.ma-about-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: #002157;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.ma-about-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  font-weight: 500;
  color: #002157;
  letter-spacing: 0.1em;
  line-height: 1.5;
}

.ma-about-body {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #002157;
  margin-bottom: 40px;
  max-width: 95%;
}

.ma-about-btn {
  display: inline-block;
  background-color: #002157;
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 42px;
  border: 1px solid #002157;
  transition: background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

@media (min-width: 768px) {
  .ma-about-btn:hover {
    background-color: #FFFFFF;
    color: #002157;
    border-color: #002157;
  }
}

.ma-about-video-wrapper {
  flex: 1;
  display: flex;
  position: relative;
  background-color: #000000;
}

.ma-about-vid {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ma-about-mobile-shade {
  display: none;
}

@media (max-width: 767px) {
  .ma-about-section {
    display: grid;
    grid-template-columns: 100%;
  }
  
  .ma-about-content {
    display: contents;
  }

  .ma-about-video-wrapper {
    grid-row: 1;
    grid-column: 1;
    width: 100%;
    aspect-ratio: 4 / 5; 
    position: relative;
  }

  .ma-about-mobile-shade {
    display: block;
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45); 
    z-index: 1;
  }

  .ma-about-headers {
    grid-row: 1;
    grid-column: 1;
    z-index: 2;
    place-self: center; 
    text-align: center;
    padding: 0 20px;
    margin-bottom: 0;
  }

  .ma-about-title,
  .ma-about-subtitle {
    color: #FFFFFF; 
  }

  .ma-about-title {
    font-size: 2.3rem;
  }

  .ma-about-subtitle {
    font-size: 0.85rem;
  }

  .ma-about-body {
    grid-row: 2;
    grid-column: 1;
    padding: 40px 25px 30px 25px;
    text-align: center;
    font-size: 0.95rem;
    color: #002157;
  }

  .ma-about-btn {
    grid-row: 3;
    grid-column: 1;
    justify-self: center; 
    margin-bottom: 60px;
  }
}

/* ==========================================
   10. BRANDS PAGE HERO TEXT
   ========================================== */
.modamerica-hero-container {
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  min-height: auto; 
  padding: 20px 20px; 
  box-sizing: border-box;
}

.modamerica-text-wrap {
  width: 100%;
  max-width: 1000px; 
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px; 
}

.modamerica-punchline {
  color: #002157;
  font-weight: 800; 
  text-transform: uppercase;
  line-height: 1.2;
  letter-spacing: 2px;
  margin: 0;
  padding: 0;
  font-size: clamp(24px, 4.5vw, 46px); 
}

.modamerica-subtext {
  color: #002157;
  font-weight: 400; 
  line-height: 1.4;
  letter-spacing: 1px;
  margin: 0;
  padding: 0;
  font-size: clamp(14px, 2vw, 18px);
  max-width: 600px; 
}

@media (max-width: 480px) {
  .modamerica-hero-container {
    padding: 15px 15px; 
  }
}

/* ==========================================
   11. BRANDS COLLAGE SECTION (EDGE-TO-EDGE)
   ========================================== */
.ma-brands-collage-wrapper {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-bottom: 60px;
  padding: 0; 
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.ma-brands-collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  background-color: #000000;
  gap: 1px; 
}

.brand-collage-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  background-color: #FFFFFF; 
}

@media (max-width: 767px) {
  .ma-brands-collage-wrapper {
    margin-bottom: 40px;
    padding: 0; 
  }
  
  .ma-brands-collage {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================
   12. BRANDS PAGE SPECIFIC OVERRIDES
   ========================================== */
.brands-page .ma-brands-collage-wrapper {
  margin-bottom: 0;
}

.brands-page .custom-brand-carousel {
  padding: 62px 0; 
}

/* ==========================================
   13. EXPLORE THE BRANDS HEADING SYSTEM
   ========================================== */
.modamerica-explore-heading-container {
  width: 100%;
  text-align: center;
  padding: 55px 20px 0 20px;
  background-color: #ffffff;
}

.modamerica-explore-title {
  color: #002157;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(14px, 2.2vw, 18px);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.5;
  margin: 0;
}

/* ==========================================
   14. BRAND NAVIGATION & LUXURY THEATER STAGE
   ========================================== */
.modamerica-brands-nav {
  width: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 20px 45px 20px;
  box-sizing: border-box;
}

.modamerica-nav-container {
  width: 100%;
  max-width: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px 32px; 
  text-align: center;
}

.modamerica-nav-link {
  text-decoration: none !important; 
  border: none !important;
  background: none !important; 
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important; 
  margin: 0 !important;
  display: inline-block;
  cursor: pointer;
}

.modamerica-nav-link:hover,
.modamerica-nav-link:focus,
.modamerica-nav-link:active {
  text-decoration: none !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: 1 !important; 
  filter: none !important; 
}

.modamerica-nav-text {
  font-family: 'Montserrat', sans-serif;
  color: #002157 !important; 
  opacity: 1 !important; 
  font-size: clamp(13px, 1.7vw, 15px); 
  font-weight: 500; 
  text-transform: uppercase;
  letter-spacing: 2px;
  white-space: nowrap; 
  position: relative;
  padding: 6px 0; 
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.modamerica-nav-link:active .modamerica-nav-text {
  opacity: 0.5 !important;
}

.modamerica-nav-link.active .modamerica-nav-text {
  font-weight: 700;
}

.modamerica-nav-text::before {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #002157;
  transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.modamerica-nav-link:hover:not(.active) .modamerica-nav-text::before {
  width: 100%;
}

.modamerica-nav-text::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  background-color: #002157;
  transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), left 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.modamerica-nav-link.active .modamerica-nav-text::after {
  width: 100%;
  left: 0;
}

.ma-luxury-stage {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  background-color: #FBFBFB;
  transition: max-height 0.8s cubic-bezier(0.25, 1, 0.4, 1), opacity 0.5s ease-in-out;
}

.ma-luxury-stage.open {
  max-height: 2000px;
  opacity: 1;
  border-top: 1px solid rgba(0, 33, 87, 0.06);
  border-bottom: 1px solid rgba(0, 33, 87, 0.06);
}

.ma-stage-inner-wrapper {
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  padding: 75px 20px;
  box-sizing: border-box;
  position: relative; 
}

.ma-theater-close-btn {
  position: absolute;
  top: 11px;
  right: 25px;
  background: transparent;
  border: none;
  font-size: 36px;
  color: #888888;
  cursor: pointer;
  z-index: 10;
  transition: color 0.3s ease;
  padding: 10px;
  line-height: 1;
}

.ma-theater-close-btn:hover,
.ma-theater-close-btn:active {
  color: #002157;
}

.ma-editorial-canvas {
  width: 100%;
}

.ma-theater-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 65px;
  align-items: start;
}

.ma-theater-logo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #FFFFFF;
  padding: 45px 30px;
  border: 1px solid rgba(0, 33, 87, 0.06);
}

.ma-theater-brand-img {
  max-width: 100%;
  height: 187px; 
  object-fit: contain;
  margin-bottom: 35px;
  filter: grayscale(0%);
}

.ma-theater-brand-img[data-brand="gap"],
.ma-theater-brand-img[data-brand="uniqlo"],
.ma-theater-brand-img[data-brand="tommy-hilfiger"] {
  height: 143px; 
}

.ma-brand-meta {
  width: 100%;
  border-top: 1px solid rgba(0, 33, 87, 0.08);
  padding-top: 25px;
}

.ma-brand-meta p {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: #002157;
  margin-bottom: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.4;
}

.ma-brand-meta p strong {
  font-weight: 700;
}

.ma-theater-text-col {
  display: flex;
  flex-direction: column;
}

.ma-theater-brand-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  color: #002157;
  margin-bottom: 25px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.3;
}

.ma-theater-brand-history {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.85;
  color: #002157;
  text-align: justify;
}

@media screen and (max-width: 767px) {
  .modamerica-nav-container {
    gap: 16px 22px;
  }
  
  .ma-luxury-stage.open {
    border-top: 1px solid rgba(0, 33, 87, 0.08);
    border-bottom: 1px solid rgba(0, 33, 87, 0.08);
  }
  
  .ma-stage-inner-wrapper {
    padding: 45px 15px;
  }
  
  .ma-theater-close-btn {
    top: 3px;
    right: 15px;
    font-size: 28px;
    padding: 5px;
  }
  
  .ma-theater-grid {
    grid-template-columns: 100%;
    gap: 35px;
  }
  
  .ma-theater-logo-col {
    padding: 35px 20px;
  }
  
  .ma-theater-brand-img {
    height: 144.5px; 
    margin-bottom: 25px;
  }

  .ma-theater-brand-img[data-brand="gap"],
  .ma-theater-brand-img[data-brand="uniqlo"],
  .ma-theater-brand-img[data-brand="tommy-hilfiger"] {
    height: 110.5px;
  }
  
  .ma-theater-brand-history {
    text-align: left;
    font-size: 14px;
    line-height: 1.75;
  }
}

/* ==========================================
   PRODUCT PAGE LAYOUT & STYLES
   ========================================== */

/* Main Container */
.product-page-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 1300px; /* Adjust based on your master wrapper */
  margin: 0 auto;
  padding: 40px 20px;
  gap: 60px;
  background-color: #FFFFFF;
  align-items: flex-start;
}

/* Left Side: Gallery (Made slightly wider, ~55% of the space) */
.product-gallery {
  flex: 0 0 625px;
  position: relative;
  background-color: #FFFFFF;
}

/* Aspect Ratio Container & Zoom Mask */
.image-zoom-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: #F8F8F8; /* Light fallback while image loads */
}

/* The Main Product Image (Handles the 2.5x Zoom) */
.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  cursor: url('images/CURSOR3.svg') 32 32, url('images/CURSOR3.png') 32 32, zoom-in;
  transform-origin: center center;
  transition: transform 0.15s ease-out; /* Smooth transition in and out of zoom */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Active Zoomed State (Secondary Minus Cursor) */
.product-image.is-zoomed {
  cursor: url('images/CURSORM3.svg') 32 32, url('images/CURSORM3.png') 32 32, zoom-out;
}

/* Carousel Buttons */
.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #FFFFFF;
  color: #002157;
  border: 1px solid rgba(0, 33, 87, 0.1);
  width: 45px;
  height: 45px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.3s, color 0.2s;
}

@media (hover: hover) and (pointer: fine) {
  .carousel-control:hover {
    background-color: #002157;
    color: #FFFFFF;
  }
}

@media (hover: none) and (pointer: coarse) {
  .carousel-control:active,
  .carousel-control.is-tapped {
    background-color: #002157;
    color: #FFFFFF;
  }
}

.prev-btn { left: 0; }
.next-btn { right: 0; }

/* ==========================================================================
   Mobile-Only: Product Image Zoom Trigger Button
   Opens/closes the full-screen vertical image roll (mobile only, ≤767px)
   Desktop is untouched — button does not render above this breakpoint.
   ========================================================================== */

.zoom-trigger-btn {
  display: none; /* Hidden on desktop by default */
}

@media screen and (max-width: 767px) {
  .zoom-trigger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 12px;
    left: 12px;
    width: 45px;
    height: 45px;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 33, 87, 0.1);
    border-radius: 0px;
    padding: 0;
    cursor: pointer;
    z-index: 15;
    transition: background-color 0.3s;
  }

  .zoom-trigger-icon {
    width: 22px;
    height: 22px;
    display: block;
    pointer-events: none; /* Click always registers on the button, not the icon */
  }
}

/* Right Side: Details */
.product-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
}

.product-title {
  font-family: 'Montserrat', sans-serif;
  color: #002157;
  font-size: 32px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 28px;
  line-height: 1.2;
}

.product-price {
  font-family: 'Montserrat', sans-serif;
  color: #002157;
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 28px;
}

/* Size Pills */
.product-sizes {
  display: flex;
  gap: 12px;
  margin-bottom: 36px;
  flex-wrap: wrap;
  min-height: 40px;
}

.product-size-section {
  display: block;
}

.product-size-section .size-row {
  display: flex;
  align-items: baseline;
  margin-bottom: 8px;
}

.size-label {
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #667;
  text-transform: uppercase;
}

/* SIZE WARNING STYLES */
.size-warning-text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #B22234;
  margin-left: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.product-size-section.is-invalid .size-warning-text {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}

.size-pill {
  position: relative;
  min-width: 60px;
  height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #FFFFFF;
  color: #002157;
  border: 2px solid #002157;
  
  /* Default Unselected State */
  background-color: #FFFFFF;
  color: #002157;
  border: 2px solid #002157;
}

/* Unselected Hover State (Desktop Only) */
@media (hover: hover) and (pointer: fine) {
  .size-pill:hover:not(.active):not(.sold-out) {
    background-color: rgba(0, 33, 87, 0.08);
  }
}

/* Selected State */
.size-pill.active {
  background-color: #002157;
  color: #FFFFFF;
  border: 2px solid #002157;
}

.product-size-section.is-invalid .size-pill:not(.sold-out) {
  border-color: #B22234;
  color: #B22234;
}

/* Sold-Out / Disabled State */
.size-pill.sold-out {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none; /* Completely blocks click interactions */
  border-color: #002157;
  color: #002157;
}

/* Diagonal Slash Line across Sold-Out Pill */
.size-pill.sold-out::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 12%;
  width: 76%;
  height: 2px;
  background-color: #002157;
  transform: translateY(-50%) rotate(-45deg);
  pointer-events: none;
}

/* Action Buttons Container */
.product-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 26px;
}

.action-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  width: 100%;
  min-height: 58px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* ADD TO CART Logic */
.btn-add-to-cart {
  /* Default: Solid Red, White Text */
  background-color: #B22234;
  color: #FFFFFF;
  border: 2px solid #B22234;
}

.btn-add-to-cart:hover,
.btn-add-to-cart:active {
  /* Hover/Click: Red Borders, Red Text, White Bg */
  background-color: #FFFFFF;
  color: #B22234;
}

.btn-add-to-cart:disabled {
  background-color: #D18E97;
  border-color: #D18E97;
  cursor: not-allowed;
}

.btn-add-to-cart:disabled:hover,
.btn-add-to-cart:disabled:active {
  background-color: #D18E97; /* re-assert dimmed bg over the hover/active rule */
  border-color: #D18E97; /* re-assert dimmed border over the hover/active rule */
  color: #FFFFFF;            /* re-assert white text over the hover/active rule */
  cursor: not-allowed;
}

/* BUY NOW Logic */
.btn-buy-now {
  /* Default: Navy Borders, White Bg, Navy Text */
  background-color: #FFFFFF;
  color: #002157;
  border: 2px solid #002157;
}

.btn-buy-now:hover,
.btn-buy-now:active {
  /* Hover/Click: Solid Navy, White Text */
  background-color: #002157;
  color: #FFFFFF;
}

/* Description Text */
.product-description p {
  font-family: 'Montserrat', sans-serif;
  color: #4A4A4A; /* Dark Grayscale as requested */
  font-size: 20px;
  line-height: 1.6;
}

/* Mobile Responsiveness */
@media screen and (max-width: 900px) {
  .product-page-container {
    flex-direction: column;
    padding: 20px 15px;
    gap: 30px;
  }
  
  .product-gallery, .product-details {
    flex: none;
    width: 100%;
  }
}

/* ==========================================================================
   Legal Disclaimer Section Styles
   ========================================================================== */

.ma-legal-section {
  padding: 80px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #002157;
  max-width: 900px;
  margin: 0 auto;
  min-height: 60vh;
  box-sizing: border-box;
}

.ma-legal-title {
  color: #002157;
  font-size: 28px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 32px;
  letter-spacing: 1px;
  text-align: center;
}

.ma-legal-content {
  color: #002157;
  font-size: 20px;
  line-height: 1.8;
  text-align: center;
}

.ma-legal-paragraph {
  margin-top: 0;
  margin-bottom: 24px;
  text-align: center;
}

.ma-legal-paragraph-last {
  margin: 0;
  text-align: center;
}

/* ==========================================================================
   Privacy Policy Section Styles (Sterile Modifier)
   ========================================================================== */

.ma-privacy-section {
  padding: 80px 24px;
  display: block; 
  background-color: #FFFFFF;
  color: #002157;
  font-family: 'Montserrat', sans-serif;
  max-width: 900px;
  margin: 0 auto;
  min-height: 60vh;
  box-sizing: border-box;
}

.ma-privacy-title {
  color: #002157;
  font-size: 28px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 32px;
  letter-spacing: 1px;
  text-align: center;
}

.ma-privacy-subtitle {
  color: #002157;
  font-size: 24px;
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 16px;
  text-align: left;
}

.ma-privacy-sub-subtitle {
  color: #002157;
  font-size: 20px;
  font-weight: 700;
  margin-top: 24px;
  margin-bottom: 16px;
  text-align: left;
}

.ma-privacy-paragraph {
  color: #002157;
  font-size: 20px;
  line-height: 1.8;
  margin-top: 0;
  margin-bottom: 24px;
  text-align: left;
}

.ma-privacy-list {
  color: #002157;
  margin-top: 0;
  margin-bottom: 24px;
  padding-left: 24px;
  text-align: left;
}

.ma-privacy-list-item {
  font-size: 20px;
  line-height: 1.8;
  margin-bottom: 12px;
  text-align: left;
}

.ma-privacy-list-item:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Terms & Conditions Section Styles (Sterile Modifier)
   ========================================================================== */

.ma-terms-section {
  padding: 80px 24px;
  display: block; 
  background-color: #FFFFFF;
  color: #002157;
  font-family: 'Montserrat', sans-serif;
  max-width: 900px;
  margin: 0 auto;
  min-height: 60vh;
  box-sizing: border-box;
}

.ma-terms-title {
  color: #002157;
  font-size: 28px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 32px;
  letter-spacing: 1px;
  text-align: center;
}

.ma-terms-subtitle {
  color: #002157;
  font-size: 24px;
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 16px;
  text-align: left;
}

.ma-terms-sub-subtitle {
  color: #002157;
  font-size: 20px;
  font-weight: 700;
  margin-top: 24px;
  margin-bottom: 16px;
  text-align: left;
}

.ma-terms-paragraph {
  color: #002157;
  font-size: 20px;
  line-height: 1.8;
  margin-top: 0;
  margin-bottom: 24px;
  text-align: left;
}

.ma-terms-list {
  color: #002157;
  margin-top: 0;
  margin-bottom: 24px;
  padding-left: 24px;
  text-align: left;
}

.ma-terms-list-item {
  font-size: 20px;
  line-height: 1.8;
  margin-bottom: 12px;
  text-align: left;
}

.ma-terms-list-item:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Returns & Refunds Policy Section Styles (Sterile Modifier)
   ========================================================================== */

.ma-refunds-section {
  padding: 80px 24px;
  display: block; 
  background-color: #FFFFFF;
  color: #002157;
  font-family: 'Montserrat', sans-serif;
  max-width: 900px;
  margin: 0 auto;
  min-height: 60vh;
  box-sizing: border-box;
}

.ma-refunds-title {
  color: #002157;
  font-size: 28px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 32px;
  letter-spacing: 1px;
  text-align: center;
}

.ma-refunds-subtitle {
  color: #002157;
  font-size: 24px;
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 16px;
  text-align: left;
}

.ma-refunds-sub-subtitle {
  color: #002157;
  font-size: 20px;
  font-weight: 700;
  margin-top: 24px;
  margin-bottom: 16px;
  text-align: left;
}

.ma-refunds-paragraph {
  color: #002157;
  font-size: 20px;
  line-height: 1.8;
  margin-top: 0;
  margin-bottom: 24px;
  text-align: left;
}

.ma-refunds-list {
  color: #002157;
  margin-top: 0;
  margin-bottom: 24px;
  padding-left: 24px;
  text-align: left;
}

.ma-refunds-list-item {
  font-size: 20px;
  line-height: 1.8;
  margin-bottom: 12px;
  text-align: left;
}

.ma-refunds-list-item:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Company Information Section Styles (Sterile Modifier)
   ========================================================================== */

.ma-company-section {
  padding: 80px 24px;
  display: block; 
  background-color: #FFFFFF;
  color: #002157;
  font-family: 'Montserrat', sans-serif;
  max-width: 900px;
  margin: 0 auto;
  min-height: 60vh;
  box-sizing: border-box;
}

.ma-company-title {
  color: #002157;
  font-size: 28px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 32px;
  letter-spacing: 1px;
  text-align: center;
}

.ma-company-list {
  color: #002157;
  margin-top: 0;
  margin-bottom: 24px;
  padding-left: 24px;
  text-align: left;
}

.ma-company-list-item {
  font-size: 20px;
  line-height: 1.8;
  margin-bottom: 12px;
  text-align: left;
}

.ma-company-list-item:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   SECTION 15: CART & DRAWER
   ========================================================================== */
/* --- 15.0 Header Cart Badge Indicator --- */
.ma-cart-count {
  position: absolute;
  top: -2px;
  right: -3px;
  background-color: #B22234;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  box-sizing: border-box;
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  line-height: 1;
  padding-top: 0.1px;
  padding-left: 0.3px;

  /* Alignment engine */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

@media screen and (max-width: 767px) {
  .ma-cart-count {
    padding-top: 0px;   /* tune this value while viewing on mobile */
    padding-left: 1px;  /* tune this value while viewing on mobile */
    padding-bottom: 1px;
    padding-right: 1px;
  }
}

/* Force-reset any hidden child elements (e.g. <span>0</span>) inside the badge */
.ma-cart-count * {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: inline !important;
}

/* 15.1 Desktop Cart Overlay & Backdrop */
.ma-cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.05, 1);
}

.ma-cart-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* 15.2 Desktop Cart Sliding Panel */
.ma-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 450px;
    height: 100vh;
    height: 100dvh;
    background-color: #ffffff;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.05);
    /* GPU Hardware Acceleration */
    transform: translate3d(100%, 0, 0);
      transition: transform 0.4s cubic-bezier(0.25, 1, 0.05, 1);
      will-change: transform;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
}

.ma-cart-drawer.open {
    transform: translate3d(0, 0, 0);
}

/* 15.3 Drawer Header Zone */
.ma-cart-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    flex-shrink: 0; /* Prevents shrinking when body gets full */
}

.ma-cart-title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1; /* Locks vertical box tightly to uppercase height */
    display: flex;
    align-items: center;
    transform: translate(-3px, 0px);
}

.ma-cart-close-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0; /* Removes extra padding offset */
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: opacity 0.2s ease;
}

.ma-cart-close-btn:hover {
    opacity: 0.5;
}

.ma-cart-close-btn img,
.ma-cart-close-btn svg {
    width: 17px;
    height: 17px;
    display: block;
    object-fit: contain;
    transform: translate(3px, -1px);
}

/* 15.4 Scrollable Cart Item Body */
.ma-cart-body {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
}

/* Custom Scrollbar for sleek UI */
.ma-cart-body::-webkit-scrollbar {
    width: 4px;
}
.ma-cart-body::-webkit-scrollbar-thumb {
    background: #e0e0e0;
    border-radius: 0;
}

/* Cart Item Card Structure */
.ma-cart-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 32px;
}

.ma-cart-item.is-removing {
    opacity: 0;
    transition: opacity 0.12s ease-out;
}

.ma-cart-item:last-child {
    margin-bottom: 0;
}

.ma-cart-item-top {
    display: flex;
    gap: 20px;
    position: relative;
}

.ma-cart-remove-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #B22234;
    color: #FFFFFF;
    border: 2px solid transparent;
    padding: 4px 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    font-size: 0.50rem;
}

@media (hover: hover) and (pointer: fine) {
    .ma-cart-remove-btn:hover,
    .ma-cart-remove-btn:active {
        background-color: #FFFFFF;
        color: #B22234;
        border-color: #B22234;
    }
}

.ma-cart-item-image {
    width: 90px;
    height: 120px;
    background-color: #f7f7f7;
    flex-shrink: 0;
    overflow: hidden;
}

.ma-cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ma-cart-item-details {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ma-cart-item-title {
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 4px 0;
    line-height: 1.4;
    padding-right: 0px; /* Space for absolute remove button */
}

.ma-cart-item-variant {
    font-size: 0.85rem;
    color: #000000;
    margin: 0 0 4px 0;
}

.ma-cart-stock-note {
    font-size: 0.73rem;
    color: #B22234;
    margin-left: 10px;
}

.ma-cart-item-price {
    font-size: 1rem;
    font-weight: 600;
    margin-top: auto;
    margin-bottom: 0;
}

.ma-cart-qty-controls {
    display: flex;
    align-items: center;
    border: none;
    width: max-content;
    margin-top: 0;
}

.ma-cart-qty-btn {
    background: #F2F2F3;
    border: none;
    width: 27px;
    height: 27px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #002157;
    transition: background 0.2s ease;
}

.ma-cart-qty-btn:hover {
    background: #D8DCE6;
}

.ma-cart-qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #F2F2F3;
}

.ma-cart-qty-input {
    width: 27px;
    border: none;
    text-align: center;
    font-size: 0.9rem;
    appearance: none;
    -moz-appearance: textfield;
    color: #000000;
    pointer-events: none;
    cursor: default;
    caret-color: transparent;
    background: #F2F2F3;
    height: 27px;
}

/* Empty Cart State */
.ma-cart-empty-state {
    display: none; /* Toggled to flex via JS if cart is empty */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: #667;
}

/* 15.5 Sticky Summary & Checkout Footer */
.ma-cart-footer {
    position: relative;
    padding: 24px 32px;
    background-color: #ffffff;
    flex-shrink: 0; /* Keeps footer pinned to bottom */
}

.ma-cart-subtotal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.ma-cart-subtotal-label {
    font-size: 1.3rem;
    font-weight: 500;
}

.ma-cart-subtotal-value {
    font-size: 1.2rem;
    font-weight: 600;
}

.ma-cart-taxes-note {
    font-size: 0.8rem;
    color: #667;
    margin-bottom: 24px;
    display: block;
}

.ma-cart-checkout-btn {
    width: 100%;
    background-color: #B22234;
    color: #FFFFFF;
    border: 2px solid #B22234;
    padding: 16px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none; /* Removes underline */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.ma-cart-checkout-btn:hover,
.ma-cart-checkout-btn:active,
.ma-cart-checkout-btn:focus {
    background-color: #FFFFFF;
    color: #B22234;
    border-color: #B22234;
    transform: none; /* Keeps position strictly locked */
}

/* 15.6 Body Lock Class */
body.ma-cart-open {
    overflow: hidden; /* Prevents background scrolling */
}

/* 0. Reserve scrollbar track globally to prevent page jump on lock */
html {
  scrollbar-gutter: stable;
}

/* ======================================================
   LOCK BACKGROUND SCROLLING WHEN CART IS OPEN
   ====================================================== */

/* 1. Prevent background page from sliding/scrolling */
body.cart-open {
  overflow: hidden !important;
  overscroll-behavior: contain;
}

/* 2. Ensure the Cart Drawer layout supports vertical overflow */
.ma-cart-drawer {
  display: flex;
  flex-direction: column;
}

/* 3. STRICTLY keep scrolling active ONLY inside the cart body */
.ma-cart-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch; /* Smooth inertia scroll for iOS Safari */
  overscroll-behavior: contain;     /* Prevents scroll chaining to background */
}

/* ==========================================================================
   LUXURY CART STYLING
   ========================================================================== */

/* Ensure all cart drawer text, buttons, and inputs use Montserrat */
.ma-cart-drawer,
.ma-cart-drawer button,
.ma-cart-drawer input {
    font-family: 'Montserrat', sans-serif;
}

/* --- DROPDOWN HEADER --- */
.ma-cart-header {
    background-color: #FFFFFF;
}

.ma-cart-title {
    color: #002157; 
}

/* --- DROPDOWN BODY & PRODUCTS --- */
.ma-cart-body {
    background-color: #FFFFFF;
}

.ma-cart-item-title,
.ma-cart-item-price {
    color: #002157;
}

/* --- DROPDOWN FOOTER --- */
.ma-cart-footer {
    background-color: #FFFFFF;
}

/* --- CTA BUTTON --- */
.ma-cart-checkout-btn {
    background-color: #B22234;
    color: #FFFFFF;
    border: 2px solid #B22234;
    text-decoration: none;
}

.ma-cart-checkout-btn:hover,
.ma-cart-checkout-btn:active,
.ma-cart-checkout-btn:focus {
    background-color: #FFFFFF;
    color: #B22234;
    border-color: #B22234;
}

/* ==========================================================================
   FLOATING INSET CART BORDERS & FADE ENGINE
   ========================================================================== */

/* Base Floating Lines Setup */
.ma-cart-header::after,
.ma-cart-footer::before {
  content: '';
  position: absolute;
  left: 32px;
  right: 32px;
  height: 1px;
  background-color: #002157;
  opacity: 0;
  transition: opacity 0.4s ease 0.05s; /* Smooth fade-in delayed until drawer slides open */
  pointer-events: none;
}

.ma-cart-header::after {
  bottom: 0;
}

.ma-cart-footer::before {
  top: 0;
}

/* Active State: Fades lines in when drawer is active */
body.cart-open .ma-cart-header::after,
body.cart-open .ma-cart-footer::before {
  opacity: 1;
}

/* ==========================================================================
   SECTION 16: CART MOBILE VIEW
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* Restrict drawer width while maintaining full viewport height */
  .ma-cart-drawer {
    width: 320px;
    max-width: 85%;
  }

  /* Reduces the padding for mobile screens & establishes relative context */
 .ma-cart-header {
    padding: 20px;
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .ma-cart-footer {
    padding: 20px;
  }

  .ma-cart-body {
    padding: 20px;
  }

  /* Matches the exact mobile header cart button coordinates */
 .ma-cart-close-btn {
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
  }

  /* Adjusts the floating inset lines to match the new 20px mobile padding */
  .ma-cart-header::after,
  .ma-cart-footer::before {
    left: 20px;
    right: 20px;
  }

/* Move ONLY the header divider line lower */
  .ma-cart-header::after {
    left: 20px;
    right: 20px;
    transform: translateY(47px) !important; /* Increase number to push it lower (e.g., 25px, 30px) */
  }

/* Make the BAG button lower on mobile */
.ma-cart-title {
    margin: 0 !important;
    transform: none !important;
  }

.ma-cart-header::after {
    left: 20px;
    right: 20px;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
  }
}

/* CART NEW ADDED PRODUCT MOBILE OPTIMIZATION */
@media screen and (max-width: 767px) {
    .ma-cart-item-image {
        width: 70px;
        height: 95px;
    }

    .ma-cart-item-title {
        font-size: 0.85rem;
        line-height: 1.3;
    }

    .ma-cart-item-variant {
        font-size: 0.75rem;
    }

    .ma-cart-qty-btn {
        width: 22px;
        height: 22px;
    }

    .ma-cart-qty-input {
        width: 22px;
        height: 22px;
    }

    .ma-cart-stock-note {
        font-size: 0.62rem;
        margin-left: 6px;
    }

    .ma-cart-item-price {
        font-size: 0.9rem;
    }

    .ma-cart-remove-btn {
        font-size: 0.42rem;
        padding: 3px 6px;
    }
}

/* ==========================================================================
   SECTION 17: MOBILE FULLSCREEN VERTICAL ZOOM SLIDESHOW
   ========================================================================== */

/* Strictly hidden on Desktop */
.ma-image-roll-overlay {
  display: none;
}

@media screen and (max-width: 767px) {
  
  /* Fullscreen Slideshow Container */
  .ma-image-roll-overlay {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background-color: #FFFFFF;
    z-index: 2000; /* Ensures it completely covers header (1000) and cart (1050) */
    
    /* Vertical Scroll & Snap Mechanics */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    
    /* Hidden state ready for JS toggle */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  /* Active state triggered by JS */
  .ma-image-roll-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Individual Slideshow Images */
  .mobile-zoom-image {
    width: 100vw;
    height: auto;
    display: block;
  }

  /* Close button — pinned in place regardless of scroll position inside the roll */
  .mobile-zoom-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 15px;
    left: 15px;
    width: 45px;
    height: 45px;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 33, 87, 0.1);
    border-radius: 0px;
    padding: 0;
    cursor: pointer;
    z-index: 2010;
    transition: background-color 0.3s;
  }

  .mobile-zoom-close-icon {
    width: 22px;
    height: 22px;
    display: block;
    pointer-events: none;
  }

  /* Helper class to lock background body scroll when the gallery is open */
  body.mobile-zoom-active {
    overflow: hidden !important;
    overscroll-behavior: contain;
  }
}

/* ====================================================================
   SECTION 18: CHECKOUT PAGE HEADER (FULLY ISOLATED)
   ==================================================================== */

.ma-checkout-header {
  width: 100%;
  background-color: #FFFFFF;
  padding: 20px 20px 20px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #B22234;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ma-checkout-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .ma-checkout-logo-container {
    transform: translateX(-12px);
  }
}

.ma-checkout-logo-img {
  height: 190px;
  width: auto;
  display: block;
  max-width: 100%;
  object-fit: contain;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

@media screen and (max-width: 767px) {
  .ma-checkout-header {
    padding: 16px 20px 16px 20px;
  }

  .ma-checkout-logo-img {
    height: 115px;
  }

  .ma-checkout-footer {
    min-height: 147px;
  }
}

/* ====================================================================
   SECTION 19: CHECKOUT - BASE CANVAS
   ==================================================================== */

.ma-checkout-canvas {
  width: 100%;
  flex-shrink: 0;
  background-color: #FFFFFF;
  border: 6px solid #002157;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.ma-checkout-canvas-panel {
  display: contents;
}

.ma-checkout-canvas-divider {
  grid-column: 2;
  grid-row: 1 / -1;
  width: 6px;
  height: 100%;
  background-color: #002157;
}

/* ====================================================================
   SECTION 19B: CHECKOUT - LEFT PANEL (ORDER SUMMARY)
   ==================================================================== */

.ma-order-summary {
  display: contents;
}

.ma-order-summary-header {
  grid-column: 1;
  grid-row: 1;
  padding: 18px 20px;
  border-bottom: 1px solid #B22234;
  text-align: center;
}

.ma-order-summary-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #002157;
  margin: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.ma-order-summary-items {
  grid-column: 1;
  grid-row: 2;
  min-height: 380px;
  max-height: 380px;
  overflow-y: auto;
  padding: 18px 20px 20px 20px;
  display: flex;
  flex-direction: column;
}

/* Custom scrollbar — matches the cart drawer's sleek scrollbar */
.ma-order-summary-items::-webkit-scrollbar {
  width: 4px;
}
.ma-order-summary-items::-webkit-scrollbar-thumb {
  background: #e0e0e0;
  border-radius: 0;
}

.ma-order-summary-items:has(.ma-order-summary-empty) {
  justify-content: center;
}

.ma-order-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed rgba(0, 33, 87, 0.15);
}

.ma-order-item:last-child {
  border-bottom: none;
}

.ma-order-item-image {
  flex: 0 0 60px;
  width: 60px;
  height: 80px;
  background-color: #f7f7f7;
  overflow: hidden;
}

.ma-order-item-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ma-order-item-details {
  flex: 1 1 auto;
  min-width: 0;
}

.ma-order-item-name {
  font-size: 14px;
  font-weight: 600;
  color: #002157;
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ma-order-item-meta {
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 33, 87, 0.6);
  margin: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ma-order-item-price {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  color: #002157;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ma-order-summary-empty {
  text-align: center;
  font-size: 13px;
  color: rgba(0, 33, 87, 0.5);
}

.ma-order-summary-footer {
  grid-column: 1;
  grid-row: 3;
  padding: 16px 20px 16px 20px;
  border-top: 1px solid #B22234;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #FFFFFF;
}

.ma-order-summary-subtotal-row {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 10px;
}

.ma-order-summary-subtotal-label {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #002157;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.ma-order-summary-subtotal-value {
  font-size: 20px;
  font-weight: 800;
  color: #002157;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.ma-order-summary-shipping-note {
  margin: 4px 0 0 0;
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 33, 87, 0.6);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* ====================================================================
   SECTION 19C: CHECKOUT - RIGHT PANEL (SHIPPING DETAILS)
   ==================================================================== */

.ma-shipping-details {
  display: contents;
}

.ma-shipping-details-header {
  grid-column: 3;
  grid-row: 1;
  padding: 18px 20px;
  border-bottom: 1px solid #B22234;
  text-align: center;
}

.ma-shipping-details-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #002157;
  margin: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.ma-shipping-details-body {
  grid-column: 3;
  grid-row: 2;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 20px 20px;
}

.ma-shipping-details-footer {
  grid-column: 3;
  grid-row: 3;
  padding: 16px 20px 16px 20px;
  border-top: 1px solid #B22234;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  background-color: #FFFFFF;
}

.ma-shipping-details-notice-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: #002157;
  margin: 0;
  text-align: justify;
  text-align-last: left;
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.ma-shipping-details-notice-text strong {
  font-weight: 700;
}

/* ====================================================================
   SECTION 19C-2: CHECKOUT - MOBILE "PROCEED TO DETAILS" CTA
   Hidden unconditionally by default so it can never appear on desktop,
   even though it lives inside .ma-order-summary (a display:contents
   ancestor on ALL breakpoints, not just mobile). Only the
   max-width:767px query below turns it on.
   ==================================================================== */

.ma-order-summary-cta-row {
  display: none;
}

/* ====================================================================
   SECTION 19C-3: CHECKOUT - DESKTOP STEP 3 PLACEHOLDER
   Hidden at every width by default. Desktop-only rules below control
   when it actually shows. Mobile has no rule referencing it at all.
   ==================================================================== */

.ma-checkout-canvas-payment-panel {
  display: none;
}

.ma-cash-confirm {
  display: none;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  --ma-payment-bar-height: 61px;
}

/* Blank placeholder panel for the card payment step. Same shell as
   .ma-cash-confirm above; the body below is intentionally empty of
   content rules for now — just enough layout so it doesn't collapse
   to 0 height while blank. */
.ma-card-confirm {
  display: none;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  --ma-payment-bar-height: 61px;
}

.ma-card-confirm-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.ma-card-order-summary {
  flex: 0 0 30%;
  max-width: 30%;
  box-sizing: border-box;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 2px solid rgba(0, 33, 87, 0.25);
}

/* Desktop only. .ma-card-order-summary is stretched tall by its sibling
   .ma-card-form-area (which centers the form vertically within itself),
   but its own ORDER→POSTAL content stayed pinned to the top by default
   (justify-content: flex-start), leaving a dead gap below POSTAL. Centering
   it here equalizes the padding above ORDER and below POSTAL automatically,
   whatever the content's actual height turns out to be — no hardcoded
   padding number to keep in sync. Scoped to min-width:768px, the same
   desktop-only breakpoint already used elsewhere in this file, so it has
   zero effect on the mobile layout, which has its own separate override
   further down and is not touched by this rule at all. */
@media screen and (min-width: 768px) {
  .ma-card-order-summary {
    justify-content: center;
  }
}

.ma-card-order-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.ma-card-order-summary-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #002157;
  flex: 0 0 auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ma-card-order-summary-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #002157;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ma-card-order-summary-divider {
  width: 100%;
  height: 1px;
  background-color: rgba(0, 33, 87, 0.15);
  margin: 4px 0;
}

.ma-card-order-summary-row-total .ma-card-order-summary-label,
.ma-card-order-summary-row-total .ma-card-order-summary-value {
  font-size: 18px;
  font-weight: 800;
}

/* Delivery Details recap — pulled live from the shipping form's own
   DOM values the moment the card panel opens (checkout-javascript.js),
   never re-requested from the customer and never a new backend call.
   Deliberately smaller/quieter than the order totals above it. */
.ma-card-delivery-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ma-card-delivery-details-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #002157;
  opacity: 0.6;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  margin-bottom: 2px;
}

.ma-card-delivery-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.ma-card-delivery-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #002157;
  opacity: 0.6;
  flex: 0 0 auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ma-card-delivery-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #002157;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ma-card-form-area {
  flex: 1 1 70%;
  min-width: 0;
  box-sizing: border-box;
  padding: 28px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ====================================================================
   SECTION 19F: CHECKOUT - CARD PAYMENT FIELDS
   Deliberately isolated from SECTION 19E (shipping form fields) —
   no selectors are shared with .ma-form-row / .ma-form-field /
   .ma-form-input / .ma-form-label. Values currently match those for
   visual consistency, but the rule sets are fully independent, so a
   future change to one can never unintentionally affect the other.
   ==================================================================== */

.ma-card-payment-form {
  display: flex;
  flex-direction: column;
  gap: 26px;
  width: 480px;
  max-width: 100%;
  flex-shrink: 0;
}

.ma-card-row {
  display: flex;
  gap: 16px;
}

/* Month / Year / CVV share one row, split into three equal thirds.
   flex:1 1 0 (not a hardcoded px width) so the split stays exactly
   even regardless of the row's actual width — desktop's 480px form
   or a narrower mobile one. Replaces the old two-way
   .ma-card-row-split-card-cvv (Card Number + CVV) and
   .ma-card-row-split-month-year (Month + Year) splits, which no
   longer exist now that Card Number has its own full-width row. */
.ma-card-row-split-month-year-cvv > .ma-card-field {
  flex: 1 1 0;
  min-width: 0;
}

.ma-card-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.ma-card-field-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #002157;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ma-card-input {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #002157;
  background-color: #FFFFFF;
  border: 1.5px solid #002157;
  border-radius: 0;
  padding: 10px 12px;
  box-sizing: border-box;
  width: 100%;
  outline: none;
  text-transform: uppercase;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ma-card-input::placeholder {
  color: rgba(0, 33, 87, 0.4);
}

.ma-card-input:focus {
  border-color: #002157;
}

.ma-card-input--invalid,
.ma-card-input--invalid:focus {
  border-color: #B22234;
  background-color: rgba(178, 34, 52, 0.04);
  color: #B22234;
}

/* Hosts for the two Allsecure payment.js iframes (card number, CVV).
   Sized/bordered to visually match .ma-card-input above; the iframe's
   own internal styling is set separately, at init time, via
   payment.js's setNumberStyle()/setCvvStyle() — deliberately limited
   to border color/width, text color, and font size only. No
   focus-glow or placeholder styling is attempted on these two boxes:
   that would require hooking payment.js's own focus/blur callbacks
   for a purely cosmetic effect, which is unnecessary added fragility
   on a PCI-scoped element outside our control. */
.ma-card-iframe-box {
  border: 1.5px solid #002157;
  border-radius: 0;
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  background-color: #FFFFFF;
}

.ma-card-pay-btn {
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  padding: 10px 12px;
  border: 1.5px solid #D18E97;
  border-radius: 0;
  box-sizing: border-box;
  background-color: #D18E97;
  color: #FFFFFF;
  cursor: not-allowed;
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ma-card-pay-btn:not(:disabled) {
  border-color: #B22234;
  background-color: #B22234;
  cursor: pointer;
}

.ma-card-pay-btn:not(:disabled):hover,
.ma-card-pay-btn:not(:disabled):active {
  background-color: #FFFFFF;
  border-color: #B22234;
  color: #B22234;
}

/* Small, quiet security indicator in the card-confirm footer — serves
   Allsecure's own compliance guidance that a security/SSL-style
   indicator be visible on the payment page itself. Placeholder-simple
   generic lock glyph for now; sized/positioned so a real AllSecure or
   3D-Secure compliance badge can drop in later without a layout
   change. */
.ma-card-secure-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ma-card-secure-badge-icon {
  display: block;
  flex-shrink: 0;
}

.ma-card-secure-badge-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #002157;
  opacity: 0.7;
}

.ma-cash-confirm-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 28px 24px 48px;
  text-align: center;
}

.ma-cash-confirm-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #002157;
  margin: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ma-cash-confirm-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #002157;
    max-width: 480px;
    margin: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* Wraps the default icon/title/text as ONE flex child of
   .ma-cash-confirm-body, recreating the same 20px-gap column layout
   the body used to apply directly to these three elements — so this
   wrapper is invisible to the existing look. */
.ma-cash-confirm-default-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Without this, the [hidden] attribute does nothing on this element —
   any CSS that sets `display` here (the rule right above) overrides
   the browser's own hidden-attribute behavior, regardless of
   specificity. This is what actually makes hiding it work. */
.ma-cash-confirm-default-content[hidden] {
    display: none;
}

/* Sold-out / failure message — plain text only, no icon, no imagery.
   Hidden by default, shown only when create-order returns a real
   failure. */
.ma-cash-confirm-sold-out-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #B22234;
    max-width: 400px;
    margin: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.ma-cash-confirm-sold-out-text[hidden] {
    display: none;
}

/* Crossfade for swapping .ma-cash-confirm-body's content only — the
   header and footer/button are never part of this transition. Mirrors
   the same 200ms fade timing used everywhere else in checkout. */
.ma-cash-confirm-body {
    transition: opacity 0.2s ease;
}

.ma-cash-confirm-body-fading {
    opacity: 0;
}

/* Order success panel — blank placeholder, desktop-only for now */
.ma-order-success {
    display: none;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    background-color: #FFFFFF;
}

.ma-checkout-canvas.ma-checkout-order-success .ma-order-success {
    display: flex;
}

.ma-order-success {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 48px 24px;
    text-align: center;
}

@media (max-width: 767px) {
  .ma-order-success {
    padding: 32px 20px 40px;
    gap: 16px;
  }
}

.ma-order-success-mobile-content {
    display: none;
}

.ma-order-success-desktop-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

@media (max-width: 767px) {
  .ma-order-success-desktop-content {
    display: none;
  }
}

@media (max-width: 767px) {

  .ma-order-success-mobile-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .ma-order-success-mobile-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: block;
  }

  .ma-order-success-mobile-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #B22234;
    margin: 0;
    text-align: center;
  }

  .ma-order-success-mobile-you {
    color: #002157;
  }

  .ma-order-success-mobile-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #002157;
    margin: 0;
    text-align: center;
  }

  .ma-order-success-mobile-btn {
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    padding: 10px 12px;
    border: 1.5px solid #002157;
    border-radius: 0;
    box-sizing: border-box;
    background-color: #002157;
    color: #FFFFFF;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    display: inline-block;
  }

  .ma-order-success-mobile-btn:hover,
  .ma-order-success-mobile-btn:active {
    background-color: #FFFFFF;
    border-color: #002157;
    color: #002157;
  }
}

.ma-order-success-icon {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    display: block;
}

.ma-order-success-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #002157;
    max-width: 420px;
    margin: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.ma-order-success-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #B22234;
    margin: 0;
    max-width: 560px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.ma-order-success-you {
    color: #002157;
}

.ma-order-success-continue-btn {
    width: 400px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    padding: 10px 12px;
    border: 1.5px solid #002157;
    border-radius: 0;
    box-sizing: border-box;
    background-color: #002157;
    color: #FFFFFF;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.ma-order-success-continue-btn:hover,
.ma-order-success-continue-btn:active {
    background-color: #FFFFFF;
    border-color: #002157;
    color: #002157;
}

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

  .ma-checkout-canvas {
    position: relative;
  }

  .ma-order-summary-header,
  .ma-order-summary-items,
  .ma-order-summary-footer,
  .ma-shipping-details-header,
  .ma-shipping-details-body,
  .ma-shipping-details-footer,
  .ma-checkout-canvas-divider,
  .ma-checkout-canvas-payment-panel {
    transition: opacity 0.2s ease;
  }

  .ma-checkout-canvas.ma-checkout-canvas-fading .ma-order-summary-header,
  .ma-checkout-canvas.ma-checkout-canvas-fading .ma-order-summary-items,
  .ma-checkout-canvas.ma-checkout-canvas-fading .ma-order-summary-footer,
  .ma-checkout-canvas.ma-checkout-canvas-fading .ma-shipping-details-header,
  .ma-checkout-canvas.ma-checkout-canvas-fading .ma-shipping-details-body,
  .ma-checkout-canvas.ma-checkout-canvas-fading .ma-shipping-details-footer,
  .ma-checkout-canvas.ma-checkout-canvas-fading .ma-checkout-canvas-divider,
  .ma-checkout-canvas.ma-checkout-canvas-fading .ma-checkout-canvas-payment-panel {
    opacity: 0;
  }

  .ma-checkout-canvas.ma-checkout-step-payment .ma-checkout-canvas-panel {
    visibility: hidden;
  }

  .ma-checkout-canvas.ma-checkout-step-payment .ma-checkout-canvas-divider {
    display: none;
  }

  .ma-checkout-canvas.ma-checkout-step-payment .ma-checkout-canvas-payment-panel {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .ma-checkout-canvas.ma-checkout-cash-confirm .ma-payment-options {
    display: none;
  }

  .ma-checkout-canvas.ma-checkout-cash-confirm .ma-cash-confirm {
    display: flex;
  }

  .ma-checkout-canvas.ma-checkout-card-confirm .ma-payment-options {
    display: none;
  }

  .ma-checkout-canvas.ma-checkout-card-confirm .ma-card-confirm {
    display: flex;
  }

  .ma-checkout-canvas.ma-checkout-order-success .ma-payment-options {
    display: none;
  }

  .ma-checkout-canvas.ma-checkout-order-success .ma-cash-confirm {
    display: none;
  }

  .ma-checkout-canvas.ma-checkout-order-success .ma-card-confirm {
    display: none;
  }

  .ma-order-success-body-mobile-spacing {
    padding: 32px 20px 40px;
  }

  .ma-checkout-canvas.ma-checkout-order-success .ma-payment-options {
    display: none;
  }

  .ma-checkout-canvas.ma-checkout-order-success .ma-cash-confirm {
    display: none;
  }

}

/* ====================================================================
   SECTION 19C-3b: CHECKOUT - DESKTOP STEP 3 GAP FIX (767–768px)
   Duplicates only the panel-switch rules from 19C-3 above, scoped to
   the sliver of widths (767.02–767.98px) that neither the mobile
   max-width:767px query nor the desktop min-width:768px query catches.
   Without this, that sliver falls back to base styles and shows the
   Summary/Details panels instead of the Payment panel. Desktop only —
   does not touch or duplicate the mobile block in Section 19D-3.
   ==================================================================== */

@media screen and (min-width: 767.02px) and (max-width: 767.98px) {

  .ma-checkout-canvas {
    position: relative;
  }

  .ma-checkout-canvas.ma-checkout-step-payment .ma-checkout-canvas-panel {
    visibility: hidden;
  }

  .ma-checkout-canvas.ma-checkout-step-payment .ma-checkout-canvas-divider {
    display: none;
  }

  .ma-checkout-canvas.ma-checkout-step-payment .ma-checkout-canvas-payment-panel {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

}

/* ====================================================================
   SECTION 19C-4: CHECKOUT - DESKTOP STEP 3 PAYMENT OPTION CARDS
   Lives inside .ma-checkout-canvas-payment-panel, which is display:none
   except on desktop after Details validates (SECTION 19C-3). No media
   query needed here — visibility is already gated by the parent.
   ==================================================================== */

.ma-payment-options {
  --ma-payment-bar-height: 61px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ma-payment-options-header {
  height: var(--ma-payment-bar-height);
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0 20px;
  border-bottom: 1px solid #B22234;
  text-align: center;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 16px;
}

.ma-payment-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  margin: 0;
  padding: 0 8px;
  cursor: pointer;
  justify-self: start;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transition: opacity 0.3s ease;
}

.ma-payment-back-spacer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  visibility: hidden;
  pointer-events: none;
}

.ma-payment-back-btn:hover,
.ma-payment-back-btn:focus-visible {
  opacity: 0.5;
}

.ma-payment-back-btn:focus-visible {
  outline: 2px solid #002157;
  outline-offset: 2px;
}

.ma-payment-back-chevron {
  height: 14px;
  width: auto;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

.ma-payment-back-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #002157;
}

.ma-payment-options-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #002157;
  line-height: 24px;
  margin: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.ma-payment-options-body {
  padding: 28px 24px 48px;
  text-align: center;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ma-payment-options-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 1 0 auto;
}

.ma-payment-options-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background-color: rgba(0, 33, 87, 0.15);
  pointer-events: none;
}

.ma-payment-option {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.ma-payment-option-btn {
  width: 184px;
  height: 254px;
  background-color: #FFFFFF;
  border: 2px solid #002157;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  padding: 41px 18px 23px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ma-payment-option-btn:hover,
.ma-payment-option-btn:focus-visible {
  border-color: #B22234;
  box-shadow: 0 0 0 1px #B22234;
  outline: none;
}

.ma-payment-option-desc {
  width: 100%;
  box-sizing: border-box;
  padding: 0 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1 1 auto;
}

.ma-payment-option-desc-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: #002157;
  margin: 0 0 10px 0;
  text-align: justify;
  text-align-last: left;
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ma-payment-option-desc-text:last-child {
  margin-bottom: 0;
}

.ma-payment-options-footer {
  height: var(--ma-payment-bar-height);
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0 20px;
  border-top: 1px solid #B22234;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ma-payment-confirm-btn {
  width: 400px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  padding: 10px 12px;
  border: 1.5px solid #D18E97;
  border-radius: 0;
  box-sizing: border-box;
  background-color: #D18E97;
  color: #FFFFFF;
  cursor: not-allowed;
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ma-payment-confirm-btn:not(:disabled) {
  border-color: #B22234;
  background-color: #B22234;
  cursor: pointer;
}

.ma-payment-confirm-btn:not(:disabled):hover,
.ma-payment-confirm-btn:not(:disabled):active {
  background-color: #FFFFFF;
  border-color: #B22234;
  color: #B22234;
}

.ma-payment-confirm-btn:disabled:hover {
  background-color: #D18E97;
  border-color: #D18E97;
  color: #FFFFFF;
  cursor: not-allowed;
}

.ma-payment-option-btn.is-selected {
  border-color: #B22234;
  box-shadow: 0 0 0 1px #B22234;
}

.ma-payment-option-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 103px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ma-payment-option-icon {
  max-width: 103px;
  max-height: 103px;
  object-fit: contain;
  pointer-events: none;
}

.ma-payment-option-label-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 16px;
}

.ma-payment-option-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #002157;
  margin: 0;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* ====================================================================
   SECTION 19D: MOBILE OPTIMIZATION 
   ==================================================================== */

@media screen and (max-width: 767px) {
  .ma-checkout-canvas {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto auto auto auto;
  }

  .ma-order-summary-header  { grid-column: 1; grid-row: 1; }
  .ma-order-summary-items   { grid-column: 1; grid-row: 2; min-height: 0; max-height: 260px; overflow-y: auto; }
  .ma-order-summary-footer  { grid-column: 1; grid-row: 3; }

  .ma-order-summary-cta-row {
    display: block;
    grid-column: 1;
    grid-row: 4;
    padding: 4px 20px 20px 20px;
  }

  /* Summary and Details are now separate mobile pages shown one at a
     time, not two stacked blocks — the divider between them no longer
     applies and would just render as a stray bar. */
  .ma-checkout-canvas-divider {
    display: none;
  }

  .ma-shipping-details-header { grid-column: 1; grid-row: 5; }
  .ma-shipping-details-body   { grid-column: 1; grid-row: 6; overflow-y: visible; }
  .ma-shipping-details-footer { grid-column: 1; grid-row: 7; padding: 16px 20px 18px 20px; }

  .ma-shipping-details-notice-text {
    font-size: 13px;
    line-height: 1.5;
  }

  /* Two-page toggle — ALLOWLIST model, not a denylist.
     Shipping Details is unconditionally display:none by default here,
     with no dependency on JS having run yet. It can ONLY become visible
     via the .ma-mobile-page-shown class, which JS adds when (and only
     when) the customer clicks "Proceed to Details". This guarantees it
     can never flash/appear on the Summary step, regardless of script
     timing, load order, or reload/bfcache edge cases. */
  .ma-shipping-details {
    display: none;
  }

  .ma-order-summary.ma-mobile-page-hidden {
    display: none;
  }

  .ma-shipping-details.ma-mobile-page-shown {
    display: contents;
  }
}

/* ====================================================================
   SECTION 19D-2: MOBILE CHECKOUT STEP TRACKER
   Mobile-only. Base rule below is display:none unconditionally, so this
   can never render on desktop even if a breakpoint changes elsewhere.
   It only turns on inside the max-width:767px query, same pattern as
   every other mobile block in this file.
   ==================================================================== */

.ma-checkout-tracker {
  display: none;
}

@media screen and (max-width: 767px) {
  .ma-checkout-tracker {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 18px 20px 16px 20px;
    background-color: #FFFFFF;
    border-bottom: 1px solid rgba(0, 33, 87, 0.12);
  }

  .ma-checkout-tracker-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    width: 100%;
    max-width: 364px;
    margin: 0 auto;
  }

  .ma-checkout-tracker-step {
    position: relative;
  }

  .ma-checkout-tracker-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 14.5px;
    left: calc(50% + 22px);
    right: calc(-50% + 22px);
    height: 2.2px;
    background-color: rgba(0, 33, 87, 0.15);
    transition: background-color 0.3s ease;
    z-index: 0;
  }

  .ma-checkout-tracker-step.is-done::after {
    background-color: #002157;
  }

  .ma-checkout-tracker-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 1;
  }

  .ma-checkout-tracker-label {
    width: 68px;
    margin: 0 auto;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.25;
    box-sizing: border-box;
  }

  .ma-checkout-tracker-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1.5px solid rgba(0, 33, 87, 0.35);
    background-color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: rgba(0, 33, 87, 0.35);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  }

  .ma-checkout-tracker-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(0, 33, 87, 0.45);
    transition: color 0.3s ease;
  }

  .ma-checkout-tracker-step.is-active .ma-checkout-tracker-circle {
    background-color: #002157;
    border-color: #002157;
    color: #FFFFFF;
  }

  .ma-checkout-tracker-step.is-active .ma-checkout-tracker-label,
  .ma-checkout-tracker-step.is-done .ma-checkout-tracker-label {
    color: #002157;
  }

  .ma-checkout-tracker-step.is-done .ma-checkout-tracker-circle {
    background-color: #002157;
    border-color: #002157;
    color: #FFFFFF;
  }
}

/* ====================================================================
   SECTION 19D-3: MOBILE CHECKOUT STEP 3 — PAYMENT SELECTION
   Mobile-only. Reuses the exact same markup/ids/JS as the desktop
   Payment panel (Section 19C-4) — only geometry changes here, never
   color logic, ids, or the confirm-button text-swap behavior.
   Shown via .ma-mobile-page-shown, the same toggle class Details uses.
   Not a carousel/slider — plain display swap, no swipe/touch handlers.
   ==================================================================== */

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

  .ma-checkout-canvas-payment-panel.ma-mobile-page-shown {
    display: block;
    grid-column: 1;
    grid-row: 8;
  }

  .ma-payment-options-header {
    height: auto;
    display: block;
    padding: 18px 20px;
  }

  .ma-payment-back-btn,
  .ma-payment-back-spacer {
    display: none;
  }

  .ma-payment-options-body {
    padding: 20px;
  }

  .ma-payment-options-row {
    flex-direction: column;
    gap: 14px;
  }

  .ma-payment-options-divider {
    display: none;
  }

  .ma-payment-option {
    width: 100%;
    flex: 0 0 auto;
    align-items: stretch;
    gap: 0;
  }

  .ma-payment-option-desc {
    display: none;
  }

  .ma-payment-option-btn {
    width: 100%;
    height: auto;
    flex-direction: row;
    padding: 14px 16px;
    gap: 14px;
    border-radius: 0;
  }

  .ma-payment-option-icon-wrap {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
  }

  .ma-payment-option-icon {
    max-width: 52px;
    max-height: 52px;
  }

  .ma-payment-option-label-wrap {
    width: auto;
    margin-top: 0;
    justify-content: flex-start;
    flex: 1 1 auto;
  }

  .ma-payment-option-label {
    font-size: 16px;
    letter-spacing: 0.05em;
    text-align: left;
  }

  .ma-payment-options-footer {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 20px 20px 20px 20px;
  }

  .ma-payment-confirm-btn {
    width: 100%;
    white-space: normal;
    line-height: 1.3;
  }

  .ma-checkout-canvas.ma-checkout-cash-confirm .ma-payment-options {
    display: none;
  }

  .ma-checkout-canvas.ma-checkout-cash-confirm .ma-cash-confirm {
    display: flex;
  }

  .ma-checkout-canvas.ma-checkout-card-confirm .ma-payment-options {
    display: none;
  }

  .ma-checkout-canvas.ma-checkout-card-confirm .ma-card-confirm {
    display: flex;
  }

  .ma-checkout-canvas.ma-checkout-order-success .ma-payment-options {
    display: none;
  }

  .ma-checkout-canvas.ma-checkout-order-success .ma-cash-confirm {
    display: none;
  }

  .ma-checkout-canvas.ma-checkout-order-success .ma-card-confirm {
    display: none;
  }

  /* The 30/70 side-by-side split only makes sense at desktop width.
     On mobile, stack the order summary above the form instead of
     squeezing both into a narrow column. */
  .ma-card-confirm-body {
    flex-direction: column;
    min-width: 0;
  }

  .ma-card-order-summary {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-right: none;
    border-bottom: 2px solid rgba(0, 33, 87, 0.25);
    padding: 20px;
  }

  /* Space-saving recap, mobile only. Desktop keeps SUBTOTAL, SHIPPING,
     both dividers and the "DELIVERY DETAILS:" heading exactly as-is —
     nothing here touches the desktop ruleset above. On mobile the form
     itself needs the room, so the recap is cut to: ORDER, then the
     delivery fields right underneath it, one thin divider, then TOTAL
     at the very bottom. SUBTOTAL/SHIPPING/first divider/heading are
     hidden via display:none (not removed — JS still writes into them
     harmlessly); the three survivors are repositioned with flex
     `order` so no HTML or JS change was needed. nth-child positions are
     fixed by checkout.html's DOM order: 1=ORDER, 2=SUBTOTAL, 3=SHIPPING,
     4=divider, 5=TOTAL, 6=divider, 7=delivery-details. */
  .ma-card-order-summary > .ma-card-order-summary-row:nth-child(2),
  .ma-card-order-summary > .ma-card-order-summary-row:nth-child(3),
  .ma-card-order-summary > .ma-card-order-summary-divider:nth-child(4) {
    display: none;
  }

  .ma-card-delivery-details-heading {
    display: none;
  }

  .ma-card-order-summary > .ma-card-delivery-details {
    order: 2;
  }

  .ma-card-order-summary > .ma-card-order-summary-divider:nth-child(6) {
    order: 3;
  }

  .ma-card-order-summary-row-total {
    order: 4;
  }

  .ma-card-form-area {
    flex: 1 1 auto;
    min-width: 0;
    padding: 20px;
  }

  .ma-card-payment-form {
    width: 100%;
  }

  #ma-card-confirm-back-mobile {
    margin-top: 0;
  }

  .ma-card-secure-badge {
    margin-top: 14px;
  }

  .ma-cash-confirm-body {
    padding: 32px 20px 40px;
    gap: 16px;
  }

  .ma-cash-confirm .ma-payment-option-icon {
    max-width: 76px;
    max-height: 76px;
  }

  .ma-cash-confirm-title {
    font-size: 17px;
    letter-spacing: 1.5px;
  }

  .ma-cash-confirm-text {
    font-size: 14px;
    max-width: 320px;
  }

}

/* ====================================================================
   SECTION 19D-4: MOBILE STEP TRANSITIONS
   Mobile-only crossfade between the 4 mobile pages (Summary, Details,
   Payment). Only opacity + transform are animated (compositor-only,
   no layout/reflow cost). Everything below is scoped inside
   max-width:767px, so it is structurally impossible for this to apply
   on desktop. Driven by .ma-mobile-step-fading, toggled briefly on
   #ma-checkout-canvas by checkout-javascript.js around each page swap.
   ==================================================================== */

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

  .ma-order-summary-header,
  .ma-order-summary-items,
  .ma-order-summary-footer,
  .ma-order-summary-cta-row,
  .ma-shipping-details-header,
  .ma-shipping-details-body,
  .ma-shipping-details-footer,
  .ma-checkout-canvas-payment-panel {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
    /* Promotes layer to GPU to remove anti-aliasing blur mid-animation
       — same fix already used on .ma-menu-toggle span elsewhere in
       this file. */
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .ma-checkout-canvas.ma-mobile-order-success-fading .ma-checkout-canvas-payment-panel {
    opacity: 0;
  }

  .ma-checkout-canvas.ma-mobile-step-fading .ma-order-summary-header,
  .ma-checkout-canvas.ma-mobile-step-fading .ma-order-summary-items,
  .ma-checkout-canvas.ma-mobile-step-fading .ma-order-summary-footer,
  .ma-checkout-canvas.ma-mobile-step-fading .ma-order-summary-cta-row,
  .ma-checkout-canvas.ma-mobile-step-fading .ma-shipping-details-header,
  .ma-checkout-canvas.ma-mobile-step-fading .ma-shipping-details-body,
  .ma-checkout-canvas.ma-mobile-step-fading .ma-shipping-details-footer,
  .ma-checkout-canvas.ma-mobile-step-fading .ma-checkout-canvas-payment-panel {
    opacity: 0;
    transform: translateY(8px);
  }

}

@media screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .ma-order-summary-header,
  .ma-order-summary-items,
  .ma-order-summary-footer,
  .ma-order-summary-cta-row,
  .ma-shipping-details-header,
  .ma-shipping-details-body,
  .ma-shipping-details-footer,
  .ma-checkout-canvas-payment-panel {
    transition: none !important;
  }
}

/* ====================================================================
   SECTION 19E: CHECKOUT - SHIPPING FORM FIELDS (STRUCTURE ONLY)
   ==================================================================== */

.ma-shipping-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ma-form-row {
  display: flex;
  gap: 16px;
}

.ma-form-row-split-50 > .ma-form-field {
  flex: 1 1 0;
  min-width: 0;
}

.ma-form-row-split-60-40 > .ma-form-field:first-child {
  flex: 0 0 60%;
  min-width: 0;
}

.ma-form-row-split-60-40 > .ma-form-field:last-child {
  flex: 0 0 calc(40% - 16px);
  min-width: 0;
}

.ma-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.ma-form-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #002157;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transition: color 0.2s ease;
}

.ma-form-field--invalid .ma-form-label {
  color: #B22234;
}

.ma-form-input,
.ma-phone-country-trigger {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #002157;
  background-color: #FFFFFF;
  border: 1.5px solid #002157;
  border-radius: 0;
  padding: 10px 12px;
  box-sizing: border-box;
  width: 100%;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ma-form-input::placeholder {
  color: rgba(0, 33, 87, 0.4);
}

.ma-form-input:focus,
.ma-phone-country-trigger:focus {
  border-color: #002157;
}

.ma-form-input:focus {
  box-shadow: 0 0 0 2px rgba(0, 33, 87, 0.15);
}

.ma-form-input--invalid,
.ma-form-input--invalid:focus {
  border-color: #B22234;
  background-color: rgba(178, 34, 52, 0.04);
  color: #B22234;
}

.ma-phone-input-group {
  display: flex;
  gap: 0;
  transition: box-shadow 0.2s ease;
}

.ma-phone-input-group {
  display: flex;
  gap: 0;
}

.ma-phone-input-group:focus-within {
  box-shadow: 0 0 0 2px rgba(0, 33, 87, 0.15);
}

.ma-phone-country-picker {
  position: relative;
  flex: 0 0 100px;
}

.ma-phone-country-trigger {
  padding: 10px 6px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.ma-phone-country-chevron {
  flex-shrink: 0;
  fill: none;
  overflow: visible;
  transition: transform 0.25s ease;
}

.ma-phone-country-chevron path {
  stroke: #002157;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ma-phone-country-trigger[aria-expanded="true"] .ma-phone-country-chevron {
  transform: rotate(180deg);
}

.ma-phone-country-listbox {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #002157;
  background-color: #FFFFFF;
  box-sizing: border-box;
  border: 1.5px solid #002157;
  border-top: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1), display 0.22s allow-discrete;
}

.ma-phone-country-listbox:not([hidden]) {
  opacity: 1;
}

@starting-style {
  .ma-phone-country-listbox:not([hidden]) {
    opacity: 0;
  }
}

.ma-phone-country-option {
  padding: 8px 10px;
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 33, 87, 0.12);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ma-phone-country-option:last-child {
  border-bottom: none;
}

.ma-phone-country-option:hover,
.ma-phone-country-option[aria-selected="true"] {
  background-color: rgba(178, 34, 52, 0.08);
}

.ma-phone-number-input {
  flex: 1 1 0;
  min-width: 0;
  border-left: none;
}

.ma-phone-input-group .ma-phone-number-input:focus {
  box-shadow: none;
}

.ma-checkout-cta {
  width: 100%;
  margin-top: 19.5px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 12px;
  border: 1.5px solid #B22234;
  border-radius: 0;
  box-sizing: border-box;
  background-color: #B22234;
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ma-checkout-cta:hover,
.ma-checkout-cta:active {
  background-color: #FFFFFF;
  border-color: #B22234;
  color: #B22234;
}

/* ====================================================================
   SECTION 19E-0: CHECKOUT - MOBILE-ONLY "BACK" BUTTON (SHIPPING STEP)
   Reuses .ma-checkout-cta's sizing/spacing/font via the shared class on
   the element itself — only the color scheme is overridden here.
   Hidden on desktop below; the desktop back action is the Payment
   step's own separate back button (Section 19C-4).
   ==================================================================== */

.ma-checkout-cta-back {
  border-color: #002157;
  background-color: #FFFFFF;
  color: #002157;
  -webkit-tap-highlight-color: transparent;
}

.ma-checkout-cta-back:hover,
.ma-checkout-cta-back:active {
  background-color: #002157;
  border-color: #002157;
  color: #FFFFFF;
}

.ma-shipping-form .ma-checkout-cta-back {
  margin-top: 1.5px;
}

/* ====================================================================
   SECTION 19E-1: CHECKOUT - CONSENT ROW (DESKTOP ONLY)
   Hidden by default (mobile-safe with no JS/media-query dependency).
   Only enabled inside the min-width:768px query below, same pattern
   as other desktop/mobile split rules in this file.
   ==================================================================== */

.ma-form-row-consent {
  display: none;
}

@media screen and (min-width: 768px) {
  .ma-shipping-form {
    gap: 11px;
  }

  #ma-checkout-submit {
    margin-top: 16px;
  }

  .ma-checkout-cta-back {
    display: none;
  }

  .ma-form-row-consent {
    display: flex;
    align-items: flex-start;
    margin-top: 8px;
    margin-bottom: -8px;
  }

  .ma-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  .ma-consent-checkbox {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin: 2px 0 0 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #FFFFFF;
    border: 1.5px solid #002157;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .ma-consent-checkbox:hover {
    border-color: #234B8C;
  }

  .ma-consent-checkbox:checked {
    background-color: #002157;
    border-color: #002157;
  }

  .ma-consent-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 0px;
    width: 4px;
    height: 8px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .ma-consent-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    color: #002157;
    transition: color 0.2s ease;
  }

  .ma-consent-text .ma-checkout-legal-link {
    font-family: 'Montserrat', sans-serif;
    font-size: inherit;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: #002157;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .ma-form-row-consent.ma-consent-invalid .ma-consent-checkbox {
    border-color: #B22234;
    accent-color: #B22234;
  }

  .ma-form-row-consent.ma-consent-invalid .ma-consent-text {
    color: #B22234;
  }
}

@media screen and (max-width: 767.98px) {
  .ma-form-row-consent {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 19.5px;
  }

  .ma-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  .ma-consent-checkbox {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin: 2px 0 0 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #FFFFFF;
    border: 1.5px solid #002157;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .ma-consent-checkbox:checked {
    background-color: #002157;
    border-color: #002157;
  }

  .ma-consent-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 0px;
    width: 4px;
    height: 8px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .ma-consent-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    color: #002157;
    transition: color 0.2s ease;
  }

  .ma-consent-text .ma-checkout-legal-link {
    font-family: 'Montserrat', sans-serif;
    font-size: inherit;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: #002157;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .ma-form-row-consent.ma-consent-invalid .ma-consent-checkbox {
    border-color: #B22234;
  }

  .ma-form-row-consent.ma-consent-invalid .ma-consent-text {
    color: #B22234;
  }
}

@media screen and (max-width: 480px) {
  .ma-form-row-split-50,
  .ma-form-row-split-60-40 {
    flex-direction: column;
  }

  .ma-form-row-split-50 > .ma-form-field,
  .ma-form-row-split-60-40 > .ma-form-field:first-child,
  .ma-form-row-split-60-40 > .ma-form-field:last-child {
    flex: 1 1 auto;
  }
}

/* ====================================================================
   SECTION 20: CHECKOUT FOOTER
   ==================================================================== */

.ma-checkout-footer {
  width: 100%;
  flex-shrink: 0;
  background-color: #FFFFFF;
  min-height: 230px;
  border-top: 1px solid #B22234;
}

.ma-checkout-badges-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 20px 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  margin-top: 15px;
}

.ma-checkout-badge {
  height: 45px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  .ma-checkout-badges-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
    gap: 18px;
    padding: 14px 8px;
  }

  .ma-checkout-badge {
    height: 50px;
  }
}

/* MANUAL FOOTER BADGE CONTROL */
.ma-checkout-badge[alt="SSL Secure"] {
  height: 50px;
}

.ma-checkout-badge[alt="PCI Compliant"] {
  height: 60px;
}

.ma-checkout-badge[alt="EMV Certified"] {
  height: 48px;
}

.ma-checkout-badge[alt="Visa"] {
  height: 50px;
}

.ma-checkout-badge[alt="Mastercard"] {
  height: 41px;
}

.ma-checkout-badge[alt="Maestro"] {
  height: 41px;
}


/* ====================================================================
   SECTION 21: CHECKOUT LEGAL MODAL
   ==================================================================== */

.ma-checkout-legal-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 12px 20px 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ma-checkout-legal-link {
  font-family: 'Montserrat', sans-serif;
  color: #002157;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .ma-checkout-legal-link:hover {
    opacity: 0.5;
  }
}

.ma-checkout-legal-link:active {
  opacity: 0.6;
}

.ma-checkout-copyright-row {
  width: 100%;
  padding: 0 12px 20px 12px;
  text-align: center;
}

.ma-checkout-copyright-text {
  font-family: 'Montserrat', sans-serif;
  color: #002157;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.ma-checkout-legal-dialog {
  margin: auto;
  padding: 0;
  border: none;
  max-width: 640px;
  width: 90vw;
  max-height: 80vh;
  box-sizing: border-box;
  background-color: #FFFFFF;
  border-radius: 2px;
  flex-direction: column;
  opacity: 0;
  transform: scale(0.96) translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  transition: opacity 0.2s ease, transform 0.2s ease, display 0.2s allow-discrete, overlay 0.2s allow-discrete;
}

.ma-checkout-legal-dialog[open] {
  display: flex;
  opacity: 1;
  transform: scale(1) translateY(0);
}

@starting-style {
  .ma-checkout-legal-dialog[open] {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
}

.ma-checkout-legal-dialog::backdrop {
  background-color: rgba(0, 33, 87, 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
  transition: opacity 0.2s ease, display 0.2s allow-discrete, overlay 0.2s allow-discrete;
}

.ma-checkout-legal-dialog[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .ma-checkout-legal-dialog[open]::backdrop {
    opacity: 0;
  }
}

body.ma-checkout-legal-open {
  overflow: hidden;
  overscroll-behavior: contain;
}

.ma-checkout-legal-close {
  align-self: flex-end;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 10px 10px 0 0;
  border: none;
  background: transparent;
  color: #002157;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.ma-checkout-legal-close:hover {
  opacity: 0.5;
}

.ma-checkout-legal-body {
  padding: 0 40px 40px 40px;
  overflow-y: auto;
}

.ma-checkout-legal-title {
  font-family: 'Montserrat', sans-serif;
  color: #002157;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.ma-checkout-legal-body p,
.ma-checkout-legal-body li {
  font-family: 'Montserrat', sans-serif;
  color: #002157;
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 14px;
}

.ma-checkout-legal-body h2,
.ma-checkout-legal-body h3 {
  font-family: 'Montserrat', sans-serif;
  color: #002157;
  font-weight: 700;
  margin: 20px 0 10px 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ma-checkout-legal-error {
  font-family: 'Montserrat', sans-serif;
  color: #B22234;
  font-size: 14px;
}

@media screen and (max-width: 767px) {
  .ma-checkout-legal-row {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: 15px
  }

  .ma-checkout-legal-link {
    font-size: 15px;
  }

  .ma-checkout-legal-dialog {
    width: 92vw;
    max-height: 85vh;
  }

  .ma-checkout-legal-body {
    padding: 0 20px 28px 20px;
  }
}

  .ma-checkout-copyright-row {
    padding: 9px 12px 20px 12px;
  }

/* ====================================================================
   SECTION 22: CART DISABLED CHECKOUT BUTTON STATE
   ==================================================================== */
  .ma-cart-checkout-btn.is-disabled {
  background-color: #D18E97;
  border-color: #D18E97;
  color: #FFFFFF;
  cursor: not-allowed;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ma-cart-checkout-btn.is-disabled:hover,
.ma-cart-checkout-btn.is-disabled:active {
  background-color: #D18E97;
  border-color: #D18E97;
  color: #FFFFFF;
  cursor: not-allowed;
}