/** Shopify CDN: Minification failed

Line 6210:0 Expected "}" to go with "{"

**/
/* ============================================
   MJS MOBILE RESPONSIVE CSS - CLEAN BUILD
   Rebuilt from scratch to eliminate conflicting
   wildcard selectors from v2-v8 patches
   Date: April 2, 2026
   ============================================ */

/* ============================================
   MJS MOBILE RESPONSIVE CSS v2.0
   Cartier / Michael Hill / Cullens-inspired
   Premium luxury mobile experience
   ============================================ */

/* ---- GLOBAL MOBILE RESETS ---- */
@media (max-width: 768px) {
  .mjs-container,
  .mjs-section-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  /* Exclude PDP/reviews headings so product titles stay compact */
  h1:not(.mjs-pdp__title),
  .mjs-hero__title {
    font-size: clamp(1.625rem, 5vw, 1.875rem) !important;
    line-height: 1.15 !important;
  }

  h2:not(.mjs-pdp__reviews-title),
  .mjs-section-title {
    font-size: clamp(1.375rem, 4.2vw, 1.625rem) !important;
    line-height: 1.2 !important;
  }
  
  h3:not(.mjs-footer__col-title) {
    font-size: 20px !important;
  }
  .mjs-footer h3,
  .mjs-footer .mjs-footer__col-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 10px !important;
  }
}

/* ---- MEGA MENU HEADER (MOBILE) ---- */
@media (max-width: 768px) {
  /* Hide desktop nav, show hamburger */
  .mjs-mega-nav {
    display: none !important;
  }
  
  .mjs-header__top-bar {
    padding: 6px 12px !important;
    font-size: 11px !important;
  }
  
  .mjs-header__top-bar .mjs-top-bar__left,
  .mjs-header__top-bar .mjs-top-bar__right {
    display: none !important;
  }
  
  /* === MOBILE HEADER LAYOUT: Hamburger (left) | Logo (center) | Icons (right) === */
  .mjs-header-top {
    display: grid !important;
    grid-template-columns: 48px 1fr auto !important;
    align-items: center !important;
    padding: 8px 12px !important;
    min-height: 60px !important;
    gap: 0 !important;
  }
  
  /* Hide the desktop left section (Book Appointment | Phone) */
  .mjs-header-left {
    display: none !important;
  }
  
  /* Hamburger: first column (left) */
  .mjs-mobile-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 44px !important;
    height: 44px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
    order: 0 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  
  .mjs-mobile-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #1a1a1a;
    position: relative;
    transition: all 0.3s ease;
  }
  
  .mjs-mobile-toggle span::before,
  .mjs-mobile-toggle span::after {
    content: '';
    display: block;
    width: 22px;
    height: 2px;
    background: #1a1a1a;
    position: absolute;
    transition: all 0.3s ease;
  }
  
  .mjs-mobile-toggle span::before { top: -7px; }
  .mjs-mobile-toggle span::after { top: 7px; }
  
  /* Logo: center column */
  .mjs-header-logo {
    grid-column: 2 !important;
    grid-row: 1 !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex: unset !important;
  }
  
  .mjs-header-logo a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .mjs-logo-img {
    max-height: 44px !important;
    width: auto !important;
  }
  
  .mjs-header-logo .mjs-logo-name {
    font-size: 16px !important;
    letter-spacing: 3px !important;
  }
  
  .mjs-header-logo .mjs-logo-tagline {
    font-size: 7px !important;
    letter-spacing: 1.5px !important;
  }
  
  /* Utils: right column (search, account, wishlist, cart) */
  .mjs-header-utils {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 2px !important;
    min-width: auto !important;
  }
  
  /* Keep search + account visible: header search opens #mjs-search-overlay; hiding broke mobile search entirely */
  .mjs-util-btn {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .mjs-util-btn svg {
    width: 18px !important;
    height: 18px !important;
  }
  
  /* Cart count badge */
  .mjs-cart-count {
    font-size: 9px !important;
  }
  
  .mjs-wishlist-count {
    font-size: 8px !important;
    width: 14px !important;
    height: 14px !important;
  }
  
  /* Mobile slide-out menu */
  .mjs-mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 380px;
    height: 100vh;
    height: 100dvh;
    background: #fff;
    z-index: 10000;
    overflow-y: auto;
    transition: left 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  
  .mjs-mobile-menu.is-open {
    left: 0;
  }
  
  .mjs-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s ease;
  }
  
  .mjs-mobile-overlay.is-visible {
    opacity: 1;
    visibility: visible;
  }
  
  .mjs-mobile-menu__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
  }
  
  .mjs-mobile-menu__close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #1a1a1a;
  }
  
  .mjs-mobile-menu__nav {
    padding: 0;
    list-style: none;
    margin: 0;
    flex: 1;
    overflow-y: auto;
  }
  
  .mjs-mobile-menu__nav > li {
    border-bottom: 1px solid #f5f5f5;
  }
  
  .mjs-mobile-menu__nav > li > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #1a1a1a;
    text-decoration: none;
    transition: background 0.2s ease;
  }
  
  .mjs-mobile-menu__nav > li > a:active {
    background: #faf9f7;
  }
  
  .mjs-mobile-menu__nav a.sale-link {
    color: #C9A86A;
    font-weight: 600;
  }
  
  .mjs-mobile-menu__sub {
    display: none;
    padding: 0 20px 16px;
    list-style: none;
    margin: 0;
    background: #faf9f7;
  }
  
  .mjs-mobile-menu__sub.is-open {
    display: block;
  }
  
  .mjs-mobile-menu__sub li a {
    display: block;
    padding: 10px 0;
    font-size: 12px;
    letter-spacing: 0.5px;
    font-weight: 400;
    text-transform: none;
    color: #555;
    text-decoration: none;
  }
  
  .mjs-mobile-menu__sub-title {
    font-size: 10px;
    font-weight: 600;
    color: #C9A86A;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 12px 0 6px;
    margin: 0;
  }
  
  .mjs-mobile-menu__footer {
    padding: 20px;
    border-top: 1px solid #f0f0f0;
    margin-top: auto;
    flex-shrink: 0;
  }
  
  .mjs-mobile-menu__footer a {
    display: block;
    padding: 10px 0;
    font-size: 13px;
    color: #1a1a1a;
    text-decoration: none;
  }
  
  .mjs-mobile-menu__cta {
    display: block;
    width: 100%;
    padding: 14px 28px;
    background: linear-gradient(180deg, #D6B97B, #C9A86A);
    color: #fff !important;
    text-align: center;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none !important;
    margin-top: 16px;
    border: none;
    cursor: pointer;
  }
  
  /* Add search + account links to mobile menu footer */
  .mjs-mobile-menu__footer .mjs-mobile-search-link,
  .mjs-mobile-menu__footer .mjs-mobile-account-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    font-size: 13px;
    color: #1a1a1a;
    text-decoration: none;
    border-bottom: 1px solid #f5f5f5;
  }
}

@media (min-width: 769px) {
  .mjs-mobile-toggle,
  .mjs-mobile-menu,
  .mjs-mobile-overlay {
    display: none !important;
  }
}


/* ---- ANNOUNCEMENT BAR (MOBILE) ---- */
@media (max-width: 768px) {
  .mjs-announcement-bar {
    font-size: 11px !important;
    padding: 8px 0 !important;
  }
  
  .mjs-announcement-bar__track {
    animation-duration: 20s !important;
  }
}

/* ---- COLLECTION PAGE (MOBILE) ---- */
@media (max-width: 768px) {
  .mjs-collection__header {
    padding: 16px !important;
  }
  
  .mjs-collection__title {
    font-size: 22px !important;
  }
  
  .mjs-collection__description {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
  
  .mjs-collection__toolbar {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 16px !important;
  }
  
  .mjs-collection__filters {
    width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  
  .mjs-collection__filters::-webkit-scrollbar {
    display: none !important;
  }
  
  .mjs-collection__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 0 12px !important;
  }
}

/* ---- PRODUCT PAGE (MOBILE) ---- */
@media (max-width: 768px) {
  .mjs-product__layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 !important;
  }
  
  .mjs-product__gallery {
    max-height: 400px !important;
    width: 100% !important;
  }
  
  .mjs-product__thumbnails {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 8px 16px !important;
    scrollbar-width: none !important;
  }
  
  .mjs-product__thumbnails::-webkit-scrollbar {
    display: none !important;
  }
  
  .mjs-product__thumbnail {
    width: 56px !important;
    height: 56px !important;
    flex-shrink: 0 !important;
    border-radius: 4px !important;
  }
  
  .mjs-product__info {
    padding: 0 20px 24px !important;
  }
  
  .mjs-product__title {
    font-size: 22px !important;
  }
  
  .mjs-product__price {
    font-size: 24px !important;
  }
  
  .mjs-product__add-to-cart {
    width: 100% !important;
    padding: 16px !important;
    font-size: 13px !important;
  }
  
  .mjs-product__details-accordion {
    margin-top: 20px !important;
    padding: 0 20px !important;
  }
}

/* ---- BREADCRUMBS (MOBILE) ---- */
@media (max-width: 768px) {
  .mjs-breadcrumbs {
    font-size: 11px !important;
    padding: 16px 16px 12px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
  }
  
  .mjs-breadcrumbs::-webkit-scrollbar {
    display: none !important;
  }
}


/* ---- QUICK VIEW MODAL (MOBILE) ---- */
@media (max-width: 768px) {
  .mjs-qv__modal {
    width: 95% !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    margin: 5vh auto !important;
    border-radius: 12px !important;
  }
  
  .mjs-qv__layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .mjs-qv__image-col {
    max-height: 280px !important;
  }
  
  .mjs-qv__image-col img {
    max-height: 260px !important;
    object-fit: contain !important;
  }
  
  .mjs-qv__info {
    padding: 16px !important;
  }
  
  .mjs-qv__title {
    font-size: 18px !important;
  }
  
  .mjs-qv__price {
    font-size: 20px !important;
  }
  
  .mjs-qv__add-btn {
    padding: 14px !important;
    font-size: 12px !important;
    width: 100% !important;
  }
  
  .mjs-qv__payment-options {
    flex-direction: column !important;
    gap: 6px !important;
  }
  
  .mjs-qv__close {
    top: 8px !important;
    right: 8px !important;
    width: 32px !important;
    height: 32px !important;
  }
}


/* ---- COMPARE BAR (MOBILE) ---- */
@media (max-width: 768px) {
  .mjs-compare-bar,
  [class*="compare-bar"] {
    padding: 0 !important;
    font-size: 12px !important;
  }
  
  .mjs-compare-bar__items {
    display: none !important;
  }
}

/* ---- BACK TO TOP (MOBILE) ---- */
@media (max-width: 768px) {
  .mjs-back-to-top {
    bottom: 16px !important;
    right: 16px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
    border-radius: 50% !important;
  }
}

/* ---- BOOKING POPUP (MOBILE) ---- */
@media (max-width: 768px) {
  .mjs-booking-popup__content {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    margin: 5vh auto !important;
    border-radius: 12px !important;
  }
  
  .mjs-booking-popup__grid {
    grid-template-columns: 1fr !important;
  }
  
  .mjs-booking-popup__left {
    display: none !important;
  }
  
  .mjs-booking-popup__form {
    padding: 20px !important;
  }
  
  .mjs-booking-popup__name-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ---- CONTACT / SPEAK TO EXPERT PAGE (MOBILE) ---- */
@media (max-width: 768px) {
  .mjs-contact-showroom__grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  
  .mjs-booking-form {
    padding: 20px !important;
  }
  
  .mjs-booking-form .mjs-form-name-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ---- SMOOTH SCROLL & TOUCH ---- */
@media (max-width: 768px) {
  html {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  
  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden !important;
  }
  
  /* Better tap targets */
  a, button {
    min-height: 44px;
  }
  
  /* Prevent image overflow */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Smooth section transitions */
  section,
  [class*="mjs-"] {
    box-sizing: border-box !important;
  }
}


/* ---- SAFE AREA INSETS (iPhone Notch) ---- */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 768px) {
    .mjs-header-top {
      padding-top: max(8px, env(safe-area-inset-top)) !important;
    }
    .mjs-footer__bottom {
      padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
    }
    .mjs-mobile-menu {
      padding-top: env(safe-area-inset-top) !important;
    }
  }
}


/* ---- LOGO CLOUD (MOBILE ENHANCEMENTS) ---- */
@media (max-width: 768px) {
  .mjs-logo-cloud {
    padding: 28px 0 !important;
  }
  .mjs-logo-cloud__header {
    padding: 0 16px !important;
    margin-bottom: 16px !important;
  }
  .mjs-logo-cloud__title {
    font-size: 9px !important;
    letter-spacing: 2px !important;
  }
  .mjs-logo-cloud__heading {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
  .mjs-logo-cloud__group {
    gap: 32px !important;
    padding: 0 16px !important;
  }
  .mjs-logo-cloud__item img {
    max-height: 40px !important;
    max-width: 120px !important;
  }
  .mjs-logo-cloud__fade {
    width: 40px !important;
  }
  .mjs-logo-cloud__divider {
    margin: 0 16px !important;
  }
}

@media (max-width: 480px) {
  .mjs-logo-cloud__item img {
    max-height: 32px !important;
    max-width: 100px !important;
  }
  .mjs-logo-cloud__group {
    gap: 24px !important;
  }
}


/* ---- ABOUT PAGE (MOBILE) ---- */
@media (max-width: 768px) {
  /* Hero */
  .mjs-about__hero {
    min-height: 50vh !important;
  }
  .mjs-about__hero-content {
    padding: 0 20px !important;
  }
  .mjs-about__hero-content h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
  .mjs-about__label {
    font-size: 10px !important;
    letter-spacing: 2.5px !important;
  }
  .mjs-about__scroll-indicator {
    display: none !important;
  }

  /* Brand Story Section */
  .mjs-about__section {
    padding: 40px 0 !important;
  }
  .mjs-about__brand-story {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 20px !important;
  }
  .mjs-about__brand-image {
    order: -1 !important;
    max-height: 280px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }
  .mjs-about__brand-image img {
    width: 100% !important;
    height: 280px !important;
    object-fit: cover !important;
  }
  .mjs-about__brand-text {
    padding: 0 !important;
  }
  .mjs-about__brand-text h2 {
    font-size: 24px !important;
    margin-bottom: 16px !important;
  }
  .mjs-about__story-body {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
  .mjs-about__highlight {
    font-size: 14px !important;
    padding: 16px !important;
    margin: 16px 0 !important;
  }
  .mjs-about__gold-line {
    width: 40px !important;
    margin-bottom: 16px !important;
  }

  /* Stats Bar */
  .mjs-about__stats-bar {
    padding: 32px 16px !important;
  }
  .mjs-about__stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .mjs-about__stat-number {
    font-size: 28px !important;
  }
  .mjs-about__stat-label {
    font-size: 10px !important;
    letter-spacing: 1px !important;
  }

  /* Timeline */
  .mjs-about__timeline-section {
    padding: 40px 0 !important;
  }
  .mjs-about__timeline-header {
    padding: 0 20px !important;
    margin-bottom: 32px !important;
  }
  .mjs-about__timeline-header h2 {
    font-size: 24px !important;
  }
  .mjs-about__subtitle {
    font-size: 10px !important;
    letter-spacing: 2px !important;
  }
  .mjs-about__timeline {
    padding: 0 20px !important;
  }
  .mjs-about__timeline::before {
    left: 20px !important;
  }
  .mjs-about__timeline-item {
    padding-left: 48px !important;
    margin-bottom: 32px !important;
  }
  .mjs-about__timeline-dot {
    left: 14px !important;
    width: 12px !important;
    height: 12px !important;
  }
  .mjs-about__timeline-year {
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
  }
  .mjs-about__timeline-title {
    font-size: 16px !important;
    margin-bottom: 4px !important;
  }
  .mjs-about__timeline-desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  /* Craftsmanship / Team */
  .mjs-about__craftsmanship {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 40px 20px !important;
  }
  .mjs-about__craft-image {
    order: -1 !important;
    max-height: 260px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }
  .mjs-about__craft-image img {
    width: 100% !important;
    height: 260px !important;
    object-fit: cover !important;
  }
  .mjs-about__craft-content h2 {
    font-size: 24px !important;
  }
  .mjs-about__craft-content p {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
}


/* ---- CONTACT PAGE (MOBILE ENHANCEMENTS) ---- */
@media (max-width: 768px) {
  /* Hero */
  .mjs-contact__hero {
    min-height: 40vh !important;
  }
  .mjs-contact__hero-content {
    padding: 0 20px !important;
  }
  .mjs-contact__hero-content h1 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  .mjs-contact__label {
    font-size: 10px !important;
    letter-spacing: 2.5px !important;
  }

  /* Methods Section */
  .mjs-contact__methods {
    padding: 40px 0 !important;
  }
  .mjs-contact__container {
    padding: 0 20px !important;
  }
  .mjs-contact__title {
    font-size: 24px !important;
  }
  .mjs-contact__subtitle {
    font-size: 10px !important;
  }
  .mjs-contact__methods-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .mjs-contact__method-card {
    padding: 20px !important;
    border-radius: 8px !important;
  }
  .mjs-contact__method-icon {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 12px !important;
  }

  /* Showroom Section */
  .mjs-contact__showroom {
    padding: 40px 0 !important;
  }
  .mjs-contact__showroom-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 20px !important;
  }
  .mjs-contact__showroom-info {
    padding: 0 !important;
  }
  .mjs-contact__address {
    font-size: 14px !important;
  }
  .mjs-contact__details-list {
    gap: 12px !important;
  }
  .mjs-contact__detail-item {
    font-size: 13px !important;
    gap: 10px !important;
  }
  .mjs-contact__detail-icon {
    width: 20px !important;
    flex-shrink: 0 !important;
  }
  .mjs-contact__hours {
    margin-top: 20px !important;
  }
  .mjs-contact__hours-table {
    font-size: 13px !important;
  }
  .mjs-contact__hours-table td {
    padding: 6px 0 !important;
  }

  /* Booking Form */
  .mjs-contact__form-section {
    padding: 40px 0 !important;
  }
  .mjs-booking-form {
    padding: 24px 20px !important;
    border-radius: 8px !important;
  }
  .mjs-booking-form h3 {
    font-size: 20px !important;
    margin-bottom: 16px !important;
  }
  .mjs-booking-form .mjs-form-name-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .mjs-booking-form input,
  .mjs-booking-form select,
  .mjs-booking-form textarea {
    font-size: 16px !important;
    padding: 14px 16px !important;
    border-radius: 6px !important;
  }
  .mjs-booking-form .mjs-form-group {
    margin-bottom: 16px !important;
  }
  .mjs-booking-form label {
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }
  .mjs-booking-form .mjs-form-submit {
    width: 100% !important;
    padding: 16px !important;
    font-size: 13px !important;
    margin-top: 8px !important;
  }

  /* Toggle switches (Is this a surprise? / Special date?) */
  .mjs-toggle-group {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .mjs-toggle-option {
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
  }
}


/* ---- FORM INPUT FOCUS STATES (MOBILE) ---- */
@media (max-width: 768px) {
  input:focus,
  select:focus,
  textarea:focus {
    outline: 2px solid #C9A86A !important;
    outline-offset: -1px !important;
    border-color: #C9A86A !important;
  }
  
  /* Prevent iOS zoom on input focus */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }
}


/* ---- STICKY ADD TO CART BAR (MOBILE) ---- */
@media (max-width: 768px) {
  .mjs-sticky-atc {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    background: #fff !important;
    padding: 12px 16px !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .mjs-sticky-atc__price {
    font-size: 18px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }
  .mjs-sticky-atc__btn {
    flex: 1 !important;
    padding: 14px !important;
    font-size: 12px !important;
    text-align: center !important;
  }
}


/* ---- CART DRAWER (MOBILE) ---- */
@media (max-width: 768px) {
  .mjs-cart-drawer,
  [class*="cart-drawer"],
  .cart-drawer {
    width: 100% !important;
    max-width: 100vw !important;
  }
  .mjs-cart-drawer__header {
    padding: 16px 20px !important;
  }
  .mjs-cart-drawer__items {
    padding: 0 16px !important;
  }
  .mjs-cart-drawer__item {
    padding: 12px 0 !important;
    gap: 12px !important;
  }
  .mjs-cart-drawer__item-image {
    width: 72px !important;
    height: 72px !important;
    border-radius: 6px !important;
  }
  .mjs-cart-drawer__item-title {
    font-size: 13px !important;
  }
  .mjs-cart-drawer__item-price {
    font-size: 14px !important;
  }
  .mjs-cart-drawer__footer {
    padding: 16px 20px !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
  .mjs-cart-drawer__checkout-btn {
    width: 100% !important;
    padding: 16px !important;
    font-size: 13px !important;
  }
}


/* ---- SEARCH OVERLAY (MOBILE) ---- */
@media (max-width: 768px) {
  .mjs-search-overlay,
  [class*="search-overlay"] {
    padding: 16px !important;
  }
  .mjs-search-overlay__input {
    font-size: 16px !important;
    padding: 14px 16px !important;
  }
  .mjs-search-results__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* ---- GLOBAL MOBILE POLISH ---- */
@media (max-width: 768px) {
  /* Consistent section spacing */
  .shopify-section + .shopify-section {
    margin-top: 0 !important;
  }
  
  /* Font smoothing */
  body {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
  }
  
  /* Prevent text size adjustment on orientation change */
  html {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }
  
  /* Better button styles */
  .mjs-btn,
  [class*="__btn"],
  [class*="__cta"] {
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }
  
  /* Ensure all gold CTA buttons are consistent */
  .mjs-btn-primary,
  [class*="btn-gold"],
  [class*="btn-primary"] {
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Image loading placeholder */
  img[loading="lazy"] {
    background: #f8f7f5 !important;
  }
  
  /* Prevent content shift from scrollbars */
  .mjs-collections-grid,
  .mjs-testimonials__grid,
  .mjs-blog__grid,
  .mjs-rv__scroll {
    -ms-overflow-style: none !important;
  }
  
  /* Ensure proper stacking context */
  .mjs-header-top {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: #fff !important;
  }
  
  /* Hide announcement bar on scroll for more screen space */
  .mjs-header__top-bar {
    transition: transform 0.3s ease !important;
  }
  
  /* Ensure all sections have proper box-sizing */
  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }
  
  /* Consistent eyebrow/label styles across all sections */
  .mjs-about__label,
  .mjs-contact__label,
  [class*="__eyebrow"],
  [class*="__subtitle"] {
    font-size: 10px !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
  }
  
  /* Consistent section headings */
  .mjs-about__section h2,
  .mjs-contact__title,
  [class*="__heading"] {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
  }
}


/* ============================================
   HEADER PATCHES (from v6+)
   ============================================ */


/* ============================================
   HEADER GAP FIX - Remove padding from header section
   The wildcard [class*="mjs-"][class*="section"] was
   applying padding-top/bottom: 48px to .mjs-mega-header-section
   ============================================ */
@media (max-width: 768px) {
  .mjs-mega-header-section,
  .shopify-section-group-header-group.mjs-mega-header-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Also ensure the announcement bar section wrapper has no extra padding */
  .shopify-section-group-header-group:first-child {
    padding: 0 !important;
    margin: 0 !important;
  }
}



/* ============================================
   HEADER FINAL FIX - Hamburger 3 lines + Announcement text
   ============================================ */
@media (max-width: 768px) {
  /* Fix hamburger: 3 clean lines only */
  .mjs-mobile-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 44px !important;
    height: 44px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
  }

  /* Each span is one line */
  .mjs-mobile-toggle span {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    background: #1a1a1a !important;
    position: static !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
  }

  /* Remove pseudo-elements that create extra lines */
  .mjs-mobile-toggle span::before,
  .mjs-mobile-toggle span::after {
    display: none !important;
    content: none !important;
  }

  /* Announcement bar text - tighter letter spacing */
  .mjs-announcement__text,
  .mjs-announcement-bar__text,
  .mjs-announcement__item,
  .mjs-announcement-bar__item {
    letter-spacing: 0.3px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
  }

  /* Announcement bar icons - slightly smaller */
  .mjs-announcement__icon svg,
  .mjs-announcement-bar__icon svg {
    width: 13px !important;
    height: 13px !important;
  }
}


/* ============================================
   SIDEBAR LOGO FIX - Smaller, left-aligned
   ============================================ */
@media (max-width: 768px) {
  .mjs-mobile-menu__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  }

  .mjs-mobile-menu__header a {
    display: flex !important;
    align-items: center !important;
  }

  .mjs-mobile-menu__header img {
    height: 28px !important;
    width: auto !important;
    max-width: 120px !important;
    object-fit: contain !important;
  }

  .mjs-mobile-menu__close {
    font-size: 24px !important;
    line-height: 1 !important;
    padding: 4px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: #1a1a1a !important;
  }
}


/* ============================================
   HERO SECTION (from v6+)
   ============================================ */
/* ============================================
   MOBILE HERO - Image swap, dark overlay, zoom effect, text visibility
   ============================================ */
@media (max-width: 749px) {
  /* Hero section: auto height, no forced vh */
  .mjs-hero.mjs-hero--fullwidth {
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Media container: fixed aspect ratio for mobile */
  .mjs-hero__media {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    overflow: hidden !important;
  }

  /* Hero image: fill container, zoom-in animation */
  .mjs-hero__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    animation: mjs-hero-zoom 20s ease-out forwards !important;
  }

  @keyframes mjs-hero-zoom {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.08);
    }
  }

  /* Dark overlay for text readability */
  .mjs-hero__overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.15) 60%,
      rgba(0, 0, 0, 0.35) 80%,
      rgba(0, 0, 0, 0.5) 100%
    ) !important;
    opacity: 1 !important;
    z-index: 1 !important;
  }

  /* Content: positioned below image, not overlaid */
  .mjs-hero__content {
    position: relative !important;
    min-height: auto !important;
    padding: 28px 24px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    background: linear-gradient(to bottom, #f5f0eb 0%, #faf7f4 100%) !important;
  }

  .mjs-hero__content-inner {
    width: 100% !important;
    max-width: 400px !important;
  }

  /* Subtitle */
  .mjs-hero__subtitle {
    font-size: 10px !important;
    letter-spacing: 0.15em !important;
    color: #8a7a6a !important;
    margin-bottom: 12px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
  }

  /* Heading */
  .mjs-hero__heading {
    font-size: 28px !important;
    line-height: 1.2 !important;
    color: #1a1a1a !important;
    margin-bottom: 14px !important;
    font-weight: 400 !important;
    font-family: var(--mjs-font-heading, 'Cormorant Garamond', Georgia, serif) !important;
  }

  /* Description */
  .mjs-hero__description {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #5a5a5a !important;
    margin-bottom: 24px !important;
    padding: 0 8px !important;
  }

  /* CTA buttons: stacked, full width */
  .mjs-hero__actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }

  .mjs-hero__btn {
    display: block !important;
    width: 100% !important;
    padding: 14px 24px !important;
    text-align: center !important;
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    transition: all 0.3s ease !important;
  }

  .mjs-hero__btn--primary {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #1a1a1a !important;
  }

  .mjs-hero__btn--secondary {
    background: #C9A86A !important;
    color: #ffffff !important;
    border: 1px solid #C9A86A !important;
  }

  /* Hide explore arrow on mobile - it overlaps with buttons */
  .mjs-hero__explore {
    display: none !important;
  }
}


/* ============================================
   FINAL FIX: Announcement bar marquee on mobile
   This MUST be at the very end to override all previous rules
   ============================================ */
@media (max-width: 749px) {
  /* HIDE the static track on mobile - override all previous !important rules */
  .mjs-announcement--static .mjs-announcement__static-track,
  .mjs-announcement .mjs-announcement__static-track,
  .mjs-announcement__static-track {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* SHOW the marquee track on mobile */
  .mjs-announcement__marquee-track {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
    animation: mjs-marquee 22s linear infinite !important;
    width: max-content !important;
    padding: 8px 0 !important;
  }

  .mjs-announcement__marquee-set {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    padding: 0 4px !important;
  }

  .mjs-announcement__marquee-track .mjs-announcement__item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    padding: 0 !important;
  }

  .mjs-announcement__marquee-track .mjs-announcement__divider {
    margin: 0 14px !important;
    color: rgba(255, 255, 255, 0.25) !important;
    font-size: 12px !important;
    font-weight: 300 !important;
  }

  .mjs-announcement__marquee-track .mjs-announcement__icon svg {
    width: 14px !important;
    height: 14px !important;
    stroke: white !important;
  }

  .mjs-announcement--static {
    padding: 0 !important;
    overflow: hidden !important;
  }

  @keyframes mjs-marquee {
    0% {
      transform: translateX(0);
    }
    100% {

      transform: translateX(-50%);
    }
  }
}


/* ============================================
   HERO MOCKUP OVERRIDE - Matches Jay's exact mockup
   Image on top, content below on white, buttons side by side,
   EXPLORE visible with chevron
   ============================================ */
@media (max-width: 749px) {
  /* Hero wrapper: stacked column, auto height */
  .mjs-hero.mjs-hero--fullwidth {
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
  }

  /* Media: relative position, 3:4 aspect ratio */
  .mjs-hero__media {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    overflow: hidden !important;
    inset: auto !important;
  }

  /* Image: fill, center top, zoom animation */
  .mjs-hero__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* HIDE overlay - the image has its own soft white fade at bottom */
  .mjs-hero__overlay {
    display: none !important;
  }

  /* Content below image on white background */
  .mjs-hero__content {
    position: relative !important;
    min-height: auto !important;
    padding: 24px 28px 16px !important;
    padding-left: 28px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    background: #ffffff !important;
  }

  .mjs-hero__content-inner {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Subtitle: gold, small caps */
  .mjs-hero__subtitle {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    color: var(--mjs-color-gold, #C9A86A) !important;
    margin-bottom: 14px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
  }

  /* Heading: elegant serif */
  .mjs-hero__heading {
    font-size: 28px !important;
    line-height: 1.2 !important;
    color: #1a1a1a !important;
    margin-bottom: 14px !important;
    font-weight: 400 !important;
  }

  /* Description */
  .mjs-hero__description {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #666666 !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* BUTTONS: Side by side, not stacked */
  .mjs-hero__actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
  }

  .mjs-hero__btn {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 13px 16px !important;
    text-align: center !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    flex: 1 !important;
    max-width: 180px !important;
    white-space: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 28px !important;
  }

  /* Primary: outlined black with rounded corners */
  .mjs-hero__btn--primary {
    background: transparent !important;
    color: #1a1a1a !important;
    border: 1.5px solid #1a1a1a !important;
  }

  /* Secondary: gold filled with rounded corners */
  .mjs-hero__btn--secondary {
    background: var(--mjs-color-gold, #C9A86A) !important;
    color: #ffffff !important;
    border: 1.5px solid var(--mjs-color-gold, #C9A86A) !important;
  }

  /* SHOW explore arrow */
  .mjs-hero__explore {
    display: flex !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin-top: 20px !important;
    margin-bottom: 8px !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    animation: mjs-hero-bounce-mockup 2s ease-in-out infinite !important;
  }

  .mjs-hero__explore-text {
    font-size: 10px !important;
    letter-spacing: 0.2em !important;
    color: rgba(26, 26, 26, 0.35) !important;
  }

  .mjs-hero__explore-arrow {
    color: rgba(26, 26, 26, 0.35) !important;
    width: 16px !important;
    height: 10px !important;
  }

  @keyframes mjs-hero-bounce-mockup {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
  }
}


/* ============================================
   HERO POLISH: Fix white space, button sizing, EXPLORE bounce
   ============================================ */
@media (max-width: 749px) {

  /* Pull content up - reduce the massive white gap below image */
  .mjs-hero__content {
    padding-top: 8px !important;

/* ============================================
   PRODUCT CARDS - Show Quick View, Wishlist, Compare
   ============================================ */

/* ============================================
   MJS MOBILE COMPREHENSIVE FIX v6
   Covers: product cards, PDP, collection pages,
   family legacy, bespoke, footer, EXPLORE, spacing
   ============================================ */

/* ============================================
   1. PRODUCT CARDS - Show Quick View, Wishlist, Compare on mobile
   (No hover on touch devices, so make them always visible)
   ============================================ */
@media (max-width: 749px) {

  /* Wishlist heart: always visible on mobile */
  .mjs-card-wishlist {
    opacity: 1 !important;
    transform: translateY(0) !important;
    width: 32px !important;
    height: 32px !important;
    top: 8px !important;
    right: 8px !important;
    background: rgba(255, 255, 255, 0.92) !important;
  }

  .mjs-card-wishlist svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Compare button: always visible on mobile */
  .mjs-compare-btn,
  .mjs-compare-btn--inline {
    opacity: 1 !important;
    transform: translateY(0) !important;
    font-size: 10px !important;
  }

  .mjs-compare-btn__label {
    font-size: 10px !important;
  }

  /* Quick View: always visible at bottom of image on mobile */
  .mjs-card-quickview {
    transform: translateY(0) !important;
    pointer-events: auto !important;
    padding: 10px !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
  }

  /* Product card grid: proper spacing */
  .mjs-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 16px !important;
  }

  /* Product card: clean borders, proper radius */
  .mjs-product-card {
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
  }

  /* Card image: proper aspect ratio */
  .mjs-card-image-wrap {
    border-radius: 8px 8px 0 0 !important;
    overflow: hidden !important;
  }

  .mjs-card-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }

  .mjs-card-img-primary,
  .mjs-card-img-hover {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Card info: proper spacing */
  .mjs-card-info {
    padding: 10px 12px 14px !important;
  }

  .mjs-card-category {
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 4px !important;
  }

  .mjs-card-title {
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
  }

  .mjs-card-subtitle {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
  }

  .mjs-card-price {
    font-size: 14px !important;
  }

  .mjs-price-current {
    font-size: 14px !important;
  }

  .mjs-price-compare {
    font-size: 12px !important;
  }

  .mjs-price-save {
    font-size: 10px !important;
  }

  /* Card rating stars */
  .mjs-card-rating {
    margin-top: 4px !important;
  }

  .mjs-card-stars {
    font-size: 12px !important;
  }

  .mjs-card-review-count {
    font-size: 10px !important;
  }

  /* Swatches */
  .mjs-card-swatches {
    margin-top: 6px !important;
    gap: 4px !important;
  }

  .mjs-swatch {
    width: 16px !important;
    height: 16px !important;
  }

  /* Badges */
  .mjs-card-badges {
    top: 8px !important;
    left: 8px !important;
    gap: 4px !important;
  }

  .mjs-badge {
    font-size: 9px !important;
    padding: 3px 8px !important;
  }

/* ============================================
   PDP FIXES (from v6+)
   ============================================ */

/* ============================================
   2. PRODUCT PAGE (PDP) - Mobile layout fix
   ============================================ */
@media (max-width: 749px) {

  /* PDP layout: single column, proper padding */
  .mjs-pdp__layout {
    grid-template-columns: 1fr !important;
    padding: 0 16px 32px !important;
    gap: 20px !important;
  }

  /* Breadcrumbs */
  .mjs-pdp__breadcrumbs {
    /* Override global theme.liquid 24px padding-top */
    padding: 8px 0 !important;
    font-size: 11px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  /* Gallery: full width */
  .mjs-pdp__gallery {
    position: static !important;
    width: 100% !important;
  }

  .mjs-pdp__gallery-main {
    width: 100% !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  .mjs-pdp__gallery-main img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* Thumbnails: horizontal scroll */
  .mjs-pdp__thumbs {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 8px 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .mjs-pdp__thumb {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }

  .mjs-pdp__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Image tabs */
  .mjs-pdp__image-tabs {
    display: flex !important;
    gap: 0 !important;
    overflow-x: auto !important;
    margin-top: 8px !important;
  }

  .mjs-pdp__image-tab {
    font-size: 10px !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
  }

  /* PDP Details */
  .mjs-pdp__details {
    padding: 0 !important;
  }

  .mjs-pdp__category {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
  }

  .mjs-pdp__title {
    font-size: clamp(1.2rem, 4.8vw, 1.5rem) !important;
    line-height: 1.28 !important;
    margin-bottom: 8px !important;
  }

  .mjs-pdp__sku {
    font-size: 11px !important;
    color: #999 !important;
  }

  .mjs-pdp__subtitle {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
  }

  /* Price */
  .mjs-pdp__price-current {
    font-size: 22px !important;
  }

  .mjs-pdp__price-compare {
    font-size: 14px !important;
  }

  /* Wishlist and Compare on PDP */
  .mjs-pdp__wishlist {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .mjs-pdp__compare {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* Variant selectors */
  .mjs-pdp__variant-label {
    font-size: 12px !important;
  }

  .mjs-pdp__variant-swatches {
    gap: 8px !important;
  }

  .mjs-pdp__variant-swatch {
    width: 32px !important;
    height: 32px !important;
  }

  /* Add to cart button */
  .mjs-pdp__add-btn {
    width: 100% !important;
    padding: 16px !important;
    font-size: 14px !important;
    border-radius: 0 !important;
  }

  /* BNPL badges */
  .mjs-pdp__bnpl-badges {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .mjs-pdp__bnpl-badge {
    font-size: 12px !important;
  }

  /* Benefits slider */
  .mjs-pdp__benefits-slider {
    gap: 4px !important;
  }

  .mjs-pdp__benefit-slide {
    padding: 8px 10px !important;
    gap: 8px !important;
    font-size: 11px !important;
  }

  /* Cross-sell grid */
  .mjs-pdp__cross-sell-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .mjs-pdp__cross-sell {
    padding: 32px 16px !important;
  }

  .mjs-pdp__cross-sell-title {
    font-size: 20px !important;
    margin-bottom: 16px !important;
  }

  /* Product description / details accordion */
  .mjs-pdp__accordion-title {
    font-size: 13px !important;
    padding: 14px 0 !important;
  }

  .mjs-pdp__accordion-content {
    font-size: 13px !important;
    line-height: 1.6 !important;
    padding: 0 0 14px !important;
  }

  /* Metal tag */
  .mjs-pdp__metal-tag {
    font-size: 10px !important;
    padding: 4px 10px !important;
  }

  /* Badge */
  .mjs-pdp__badge {
    font-size: 10px !important;
    padding: 4px 10px !important;
  }
}



/* ============================================
   3. COLLECTION PAGE - Mobile grid and filters
   ============================================ */
@media (max-width: 749px) {

  /* Collection hero */
  .mjs-collection__hero {
    padding: 24px 16px !important;
    min-height: auto !important;
  }

  .mjs-collection__hero-title {
    font-size: 24px !important;
    margin-bottom: 8px !important;
  }

  .mjs-collection__hero-desc {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Collection toolbar: filter/sort */
  .mjs-collection__toolbar {
    padding: 12px 16px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .mjs-collection__filter-btn,
  .mjs-collection__sort-btn {
    font-size: 11px !important;
    padding: 8px 14px !important;
  }

  .mjs-collection__count {
    font-size: 11px !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* Collection grid */
  .mjs-collection__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 16px !important;
  }

  /* Compare bar at bottom */
  .mjs-collection__compare-bar {
    padding: 10px 16px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }

  .mjs-collection__compare-btn {
    font-size: 11px !important;
    padding: 8px 16px !important;
  }

  .mjs-collection__compare-count {
    font-size: 11px !important;
  }

  /* Collection page copy: read more */
  .mjs-collection__copy {
    padding: 16px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  /* FAQ section */
  .mjs-collection__faq {
    padding: 24px 16px !important;
  }

  .mjs-collection__faq-title {
    font-size: 20px !important;
    margin-bottom: 16px !important;
  }



  .page-width,
  .container,
  [class*="page-width"] {
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

}


/* =============================================
   MJS MOBILE - PDP TARGETED FIX
   Using exact class names from DOM inspection
   ============================================= */

@media (max-width: 749px) {

  /* Fix the 48px padding-top on the product page section wrapper */
  .mjs-product-page-section,
  .shopify-section.mjs-product-page-section {
    padding-top: 0 !important;
  }

  /* Fix the recently viewed section padding */
  .mjs-recently-viewed-section,
  .shopify-section.mjs-recently-viewed-section {
    padding-top: 24px !important;
  }

  /* Fix PDP title - ensure full display */
  .mjs-pdp__title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    -webkit-line-clamp: unset !important;
    display: block !important;
    font-size: clamp(1.05rem, 4.2vw, 1.25rem) !important;
    line-height: 1.28 !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
  }

  /* Fix PDP breadcrumbs spacing */
  .mjs-pdp__breadcrumbs {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin-top: 0 !important;
  }

  /* PDP subtitle */
  .mjs-pdp__subtitle {
    font-size: 14px !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
  }

  /* Fix back-to-top and other section padding */
  .mjs-back-to-top-section,
  .mjs-appointment-popup-section,
  .mjs-compare-section {
    padding-top: 16px !important;
  }

  /* Fix all sections with the wildcard padding issue */
  .shopify-section[class*="mjs-"][class*="-section"] {
    padding-top: 0 !important;
  }

  /* But keep some sections with appropriate padding */
  .shopify-section.mjs-recently-viewed-section {
    padding-top: 24px !important;
  }
  
  .shopify-section-group-footer-group {
    padding-top: 32px !important;
  }
}


/* =============================================
   MJS MOBILE - PDP LAYOUT FIX
   Fix title truncation caused by grid overflow
   ============================================= */

@media (max-width: 749px) {

  /* Fix the grid layout - remove overflow hidden that clips content */
  .mjs-pdp__layout,
  .mjs-pdp__layout.page-width {
    overflow: visible !important;
    max-width: 100% !important;
    padding: 0 16px 32px !important;
    box-sizing: border-box !important;
  }

  /* Force details to respect grid column width */
  .mjs-pdp__details {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Fix title to wrap properly within container */
  .mjs-pdp__title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    font-size: clamp(1.05rem, 4.2vw, 1.25rem) !important;
    line-height: 1.28 !important;
  }

  /* Fix gallery to not overflow either */
  .mjs-pdp__gallery {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .mjs-pdp__gallery img,
  .mjs-pdp__main-image img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Fix breadcrumbs */
  .mjs-pdp__breadcrumbs {
    padding: 8px 0 !important;
    max-width: 100% !important;
  }

  /* Ensure page-width doesn't cause horizontal overflow on PDP */
  .mjs-pdp .page-width {
    max-width: 100% !important;
    /* Keep PDP tidy, but don't clip fixed UI like compare bar buttons */
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Compare bar: don't let .page-width padding/clipping break buttons */
  .mjs-pdp .mjs-compare-bar__inner.page-width {
    overflow: visible !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* PDP: force compare bar to behave like other pages */
  .mjs-pdp .mjs-compare-bar {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
  .mjs-pdp .mjs-compare-bar__inner {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: space-between !important;
  }
}



/* ============================================
   v10 COMPREHENSIVE MOBILE OVERHAUL
   ============================================ */
/* ============================================
   MJS MOBILE v10 — COMPLETE OVERHAUL
   Fixes all issues from Jay's 11 screenshots
   + showroom mockup + footer optimization
   Target: max-width 749px
   ============================================ */

@media (max-width: 749px) {

/* ============================================
   1. HERO — Remove Explore arrow, fix whitespace
   ============================================ */
  /* Hide the Explore text + bouncing arrow */
  .mjs-hero__explore {
    display: none !important;
  }
  /* Remove whitespace above announcement bar */
  .mjs-announcement--static {
    margin-top: 0 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  /* Tighten hero bottom spacing */
  .mjs-hero__content {
    padding-bottom: 8px !important;
  }
  /* Move brand marquee up - reduce gap between hero and marquee */
  .mjs-trust-marquee,
  .mjs-marquee-dark,
  section[class*="trust-marquee"],
  section[class*="marquee"] {
    margin-top: 0 !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

/* ============================================
   2. GLOBAL SECTION SPACING — Tight & Clean
   ============================================ */
  .shopify-section {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .shopify-section + .shopify-section {
    margin-top: 0 !important;
  }

/* ============================================
   3. PRODUCT CARDS — Compare button fix
   ============================================ */
  /* Price row: stack vertically so compare doesn't overlap */
  .mjs-card-price-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 4px 8px 8px !important;
  }
  .mjs-card-price {
    display: flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  .mjs-price-current {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
  }
  .mjs-price-compare {
    font-size: 11px !important;
    text-decoration: line-through !important;
    color: #999 !important;
  }
  .mjs-price-save {
    font-size: 9px !important;
    color: #c0392b !important;
    font-weight: 600 !important;
  }
  /* Compare button: clean pill style */
  .mjs-compare-btn--inline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 5px 12px !important;
    font-size: 10px !important;
    border: 1px solid #ddd !important;
    border-radius: 20px !important;
    color: #666 !important;
    background: #fafafa !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    min-height: 28px !important;
    min-width: auto !important;
    cursor: pointer !important;
    position: static !important;
  }
  .mjs-compare-btn--inline .mjs-compare-icon {
    width: 11px !important;
    height: 11px !important;
    flex-shrink: 0 !important;
  }
  .mjs-compare-btn__label {
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  /* Wishlist heart - always visible */
  .mjs-card-wishlist {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  /* Quick View - always visible */
  .mjs-card-quickview,
  .mjs-card__quick-view {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    font-size: 10px !important;
    padding: 7px 0 !important;
  }
  /* Disable hover image swap on mobile */
  .mjs-card-img-hover {
    display: none !important;
  }
  /* Card info tighter */
  .mjs-card-info,
  .mjs-product-card__info {
    padding: 6px 8px 4px !important;
  }
  .mjs-card-title,
  .mjs-product-card__title {
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-bottom: 2px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .mjs-card-category {
    font-size: 8px !important;
    margin-bottom: 1px !important;
  }

/* ============================================
   4. QUICK VIEW MODAL — Mobile optimized
   Text smaller, image contained, proper layout
   ============================================ */
  .mjs-qv-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .mjs-qv-modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
    overflow-y: auto !important;
  }
  .mjs-qv-body {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .mjs-qv-media {
    min-height: 220px !important;
    max-height: 260px !important;
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
  }
  .mjs-qv-image {
    max-height: 240px !important;
    width: 100% !important;
    object-fit: contain !important;
    padding: 12px !important;
  }
  .mjs-qv-close {
    top: 10px !important;
    right: 10px !important;
    width: 32px !important;
    height: 32px !important;
    z-index: 20 !important;
    background: rgba(255,255,255,0.9) !important;
  }
  .mjs-qv-details {
    padding: 14px 16px 20px !important;
  }
  .mjs-qv-category {
    font-size: 9px !important;
    margin-bottom: 4px !important;
  }
  .mjs-qv-title {
    font-size: 16px !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
  }
  .mjs-qv-specs {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }
  .mjs-qv-rating {
    margin-bottom: 8px !important;
  }
  .mjs-qv-stars {
    font-size: 13px !important;
  }
  .mjs-qv-rating-text {
    font-size: 11px !important;
  }
  .mjs-qv-price-wrap {
    margin-bottom: 2px !important;
  }
  .mjs-qv-price {
    font-size: 18px !important;
  }
  .mjs-qv-compare-price {
    font-size: 13px !important;
  }
  .mjs-qv-afterpay-line {
    font-size: 11px !important;
    margin-bottom: 12px !important;
  }
  /* Options */
  .mjs-qv-option-group {
    margin-bottom: 10px !important;
  }
  .mjs-qv-option-label {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }
  .mjs-qv-swatch {
    width: 28px !important;
    height: 28px !important;
  }
  .mjs-qv-size-btn {
    min-width: 36px !important;
    height: 36px !important;
    font-size: 12px !important;
    padding: 0 8px !important;
  }
  /* Actions */
  .mjs-qv-actions {
    flex-direction: row !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  .mjs-qv-quantity {
    flex-shrink: 0 !important;
  }
  .mjs-qv-qty-btn {
    width: 34px !important;
    height: 38px !important;
    font-size: 16px !important;
  }
  .mjs-qv-qty-input {
    width: 36px !important;
    height: 38px !important;
    font-size: 13px !important;
  }
  .mjs-qv-add-to-cart {
    height: 42px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }
  /* Action row (wishlist, compare, hint) */
  .mjs-qv-action-row {
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .mjs-qv-action-btn {
    font-size: 10px !important;
    padding: 6px 12px !important;
  }
  /* Payments */
  .mjs-qv-payments {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
  }
  .mjs-qv-payment-box {
    padding: 8px 4px !important;
    font-size: 9px !important;
  }
  .mjs-qv-payment-box strong {
    font-size: 10px !important;
  }
  /* Trust */
  .mjs-qv-trust {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 0 !important;
    margin-bottom: 8px !important;
  }
  .mjs-qv-trust-item {
    font-size: 10px !important;
  }
  /* Full details link */
  .mjs-qv-full-details,
  .mjs-qv-full-link {
    font-size: 11px !important;
    padding: 6px 0 !important;
  }
  /* Badges */
  .mjs-qv-badge {
    font-size: 9px !important;
    padding: 3px 8px !important;
  }

/* ============================================
   5. COLLECTIONS / SHOP BY CATEGORY
   Background WHITE not pink
   ============================================ */
  .mjs-collections {
    background: #ffffff !important;
    padding: 20px 0 !important;
  }

/* ============================================
   6. VALUE PROPS — single column on mobile (section CSS is source of truth)
   ============================================ */
  section.mjs-value-props,
  .mjs-value-props,
  section[class*="mjs-value-props"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

/* ============================================
   7. BESPOKE CTA — Mobile: image first
   Order: image -> eyebrow -> heading -> body -> buttons
   ============================================ */
  .mjs-bespoke {
    padding: 20px 20px !important;
  }
  .mjs-bespoke__container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  /* Image first */
  .mjs-bespoke__image-col {
    order: 1 !important;
    width: 100% !important;
    padding: 0 !important;
  }
  .mjs-bespoke__img {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    display: block !important;
  }

  /* Content after image */
  .mjs-bespoke__content {
    order: 2 !important;
    text-align: center !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .mjs-bespoke__eyebrow {
    margin-bottom: 0 !important;
  }
  .mjs-bespoke__heading {
    font-size: clamp(1.125rem, 4.5vw, 1.375rem) !important;
    line-height: 1.22 !important;
    margin-bottom: 0 !important;
  }
  /* Divider hidden */
  .mjs-bespoke__divider {
    display: none !important;
  }
  /* Body text after image */
  .mjs-bespoke__body {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #555 !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Buttons */
  .mjs-bespoke__buttons {
    order: 3 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
    margin-top: 4px !important;
    justify-content: center !important;
  }
  .mjs-bespoke__btn {
    flex: 1 !important;
    text-align: center !important;
    padding: 12px 6px !important;
    font-size: 9px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    min-height: 44px !important;
  }
  .mjs-bespoke__btn--primary {
    background: #C9A86A !important;
    color: #fff !important;
    border: none !important;
  }
  .mjs-bespoke__btn--secondary {
    background: #fff !important;
    color: #1a1a1a !important;
    border: 1.5px solid #1a1a1a !important;
  }
  .mjs-bespoke__btn svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
  }

/* ============================================
   8. FAMILY LEGACY — Proper mobile layout
   Order: eyebrow -> heading -> body -> image -> quote -> body2 -> stats
   ============================================ */
  .mjs-family-legacy {
    padding: 20px 0 0 !important;
  }
  .mjs-family-legacy__container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
    padding: 0 16px !important;
  }
  /* Content first */
  .mjs-family-legacy__content-col {
    order: 1 !important;
    padding: 0 !important;
    text-align: center !important;
  }
  .mjs-family-legacy__eyebrow {
    text-align: center !important;
    margin-bottom: 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    color: #C9A86A !important;
    font-weight: 600 !important;
  }
  .mjs-family-legacy__heading {
    text-align: center !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
  }
  .mjs-family-legacy__divider {
    display: none !important;
  }
  .mjs-family-legacy__body {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #555 !important;
    text-align: center !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
  }
  /* Image after first body text */
  .mjs-family-legacy__image-col {
    order: 2 !important;
    width: 100% !important;
    padding: 0 !important;
  }
  .mjs-family-legacy__img {
    width: 75% !important;
    max-width: 280px !important;
    height: auto !important;
    border-radius: 16px !important;
    display: block !important;
    margin: 0 auto !important;
  }
  /* Blockquote with gold left border */
  .mjs-family-legacy__quote {
    border-left: 3px solid #C9A86A !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    padding: 10px 16px !important;
    margin: 8px 16px !important;
    font-style: italic !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #444 !important;
    text-align: left !important;
    background: transparent !important;
  }
  .mjs-family-legacy__body--second {
    margin-top: 4px !important;
  }
  /* Stats bar - full width */
  .mjs-family-legacy__stats {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    background: #f8f6f3 !important;
    padding: 16px 12px !important;
    margin-top: 12px !important;
    border-radius: 0 !important;
    width: 100vw !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
  }
  .mjs-family-legacy__stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 2px !important;
  }
  .mjs-family-legacy__stat-number {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    line-height: 1.2 !important;
  }
  .mjs-family-legacy__stat-label {
    font-size: 7px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #888 !important;
    line-height: 1.3 !important;
    margin-top: 2px !important;
  }

/* ============================================
   9. BRAND STORY / FAMILY TRADITION
   Full-width image, centered text, checkmarks
   ============================================ */
  .mjs-brand-story-v2 {
    padding: 20px 0 !important;
  }
  .mjs-brand-story-v2__container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .mjs-brand-story-v2__image-col {
    order: 1 !important;
    width: 100% !important;
    padding: 0 !important;
  }
  .mjs-brand-story-v2__img {
    width: 100% !important;
    height: auto !important;
    border-radius: 0 0 12px 12px !important;
    display: block !important;
  }
  .mjs-brand-story-v2__content-col {
    order: 2 !important;
    padding: 0 20px !important;
    text-align: center !important;
  }
  .mjs-brand-story-v2__eyebrow {
    text-align: center !important;
    margin-bottom: 6px !important;
  }
  .mjs-brand-story-v2__heading {
    text-align: center !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }
  .mjs-brand-story-v2__divider {
    display: none !important;
  }
  .mjs-brand-story-v2__body {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #555 !important;
    text-align: center !important;
    margin-bottom: 8px !important;
  }
  .mjs-brand-story-v2__year-highlight {
    display: none !important;
  }
  /* Values with checkmarks */
  .mjs-brand-story-v2__values {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    text-align: left !important;
    padding: 0 8px !important;
    margin-top: 12px !important;
  }
  .mjs-brand-story-v2__value {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
  }
  .mjs-brand-story-v2__value-icon,
  .mjs-brand-story-v2__value svg {
    color: #C9A86A !important;
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: 2px !important;
  }
  .mjs-brand-story-v2__value-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 2px !important;
  }
  .mjs-brand-story-v2__value-desc {
    font-size: 12px !important;
    color: #666 !important;
    line-height: 1.4 !important;
  }
  .mjs-brand-story-v2__btn {
    display: inline-block !important;
    margin-top: 12px !important;
    font-size: 13px !important;
    color: #C9A86A !important;
    text-decoration: none !important;
    font-weight: 600 !important;
  }

/* ============================================
   10. TESTIMONIALS — Horizontal swipe cards
   Stop vertical auto-scroll, make horizontal
   ============================================ */
  .mjs-testimonials {
    padding: 20px 0 !important;
    overflow: hidden !important;
  }
  .mjs-testimonials__container {
    padding: 0 !important;
  }
  .mjs-testimonials__header {
    text-align: center !important;
    padding: 0 20px 12px !important;
  }
  .mjs-testimonials__heading {
    font-size: 22px !important;
    margin-bottom: 4px !important;
  }
  .mjs-testimonials__subheading {
    font-size: 12px !important;
    color: #666 !important;
    margin-bottom: 8px !important;
  }
  /* Stats row */
  .mjs-testimonials__stats {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
    padding: 0 16px !important;
    flex-wrap: nowrap !important;
  }
  .mjs-testimonials__stat {
    text-align: center !important;
  }
  .mjs-testimonials__stat-value {
    font-size: 16px !important;
    font-weight: 700 !important;
  }
  .mjs-testimonials__stat-label {
    font-size: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #888 !important;
  }
  .mjs-testimonials__stat-divider {
    width: 1px !important;
    height: 24px !important;
    background: #ddd !important;
    align-self: center !important;
  }
  /* Convert 3-column vertical scroll to horizontal swipe */
  .mjs-testimonials__columns {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 12px !important;
    padding: 0 16px 8px !important;
    grid-template-columns: unset !important;
  }
  .mjs-testimonials__columns::-webkit-scrollbar {
    display: none !important;
  }
  /* Each column becomes a swipe card */
  .mjs-testimonials__column {
    flex: 0 0 82% !important;
    min-width: 82% !important;
    max-width: 82% !important;
    scroll-snap-align: center !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
  /* Stop auto-scrolling animation */
  .mjs-testimonials__scroll-wrapper {
    animation: none !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .mjs-testimonials__scroll-wrapper[data-direction="up"],
  .mjs-testimonials__scroll-wrapper[data-direction="down"] {
    animation: none !important;
    transform: none !important;
  }
  /* Hide duplicated cards (infinite scroll effect) */
  .mjs-testimonials__column-inner:nth-child(2) {
    display: none !important;
  }
  .mjs-testimonials__column-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  /* Show only first 2 cards per column */
  .mjs-testimonials__card:nth-child(n+3) {
    display: none !important;
  }
  /* Card styling */
  .mjs-testimonials__card {
    background: #fff !important;
    border-radius: 10px !important;
    padding: 14px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
  }
  .mjs-testimonials__card-stars {
    margin-bottom: 6px !important;
    font-size: 13px !important;
  }
  .mjs-testimonials__card-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
  }
  .mjs-testimonials__card-text {
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: #555 !important;
    margin-bottom: 8px !important;
  }
  .mjs-testimonials__card-author {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .mjs-testimonials__card-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    font-size: 11px !important;
  }
  .mjs-testimonials__card-name {
    font-size: 11px !important;
    font-weight: 600 !important;
  }
  .mjs-testimonials__card-verified {
    font-size: 9px !important;
  }
  /* Read more reviews button */
  .mjs-testimonials__btn {
    display: inline-flex !important;
    margin: 12px auto 0 !important;
    font-size: 11px !important;
    padding: 10px 24px !important;
  }

/* ============================================
   11. VISIT GOLD COAST SHOWROOM
   Layout: eyebrow -> heading -> description -> 
   image -> contacts -> hours -> trust -> buttons -> map
   Background: WHITE not pink
   ============================================ */
  .mjs-showroom {
    padding: 20px 0 0 !important;
    background: #ffffff !important;
  }
  .mjs-showroom-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 0 20px !important;
    grid-template-columns: 1fr !important;
  }
  /* Content first on mobile */
  .mjs-showroom-content {
    order: 1 !important;
  }
  .mjs-showroom-eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    color: #C9A86A !important;
    margin-bottom: 8px !important;
    text-align: left !important;
  }
  .mjs-showroom-heading {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
    text-align: left !important;
  }
  .mjs-showroom-desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #555 !important;
    margin-bottom: 16px !important;
    text-align: left !important;
  }
  /* Image after description */
  .mjs-showroom-image {
    order: 2 !important;
    min-height: 250px !important;
    max-height: 300px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  .mjs-showroom-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  /* Contact details */
  .mjs-showroom-contacts {
    order: 3 !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }
  .mjs-showroom-contact {
    font-size: 12px !important;
    gap: 10px !important;
  }
  .mjs-showroom-contact-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 8px !important;
  }
  /* Opening hours */
  .mjs-showroom-hours {
    order: 4 !important;
    padding: 12px 16px !important;
    margin-bottom: 12px !important;
    border-radius: 8px !important;
  }
  .mjs-showroom-hours-title {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }
  .mjs-showroom-hours-grid {
    font-size: 12px !important;
    gap: 4px 12px !important;
  }
  /* Trust points */
  .mjs-showroom-trust {
    order: 5 !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  .mjs-showroom-trust-item {
    font-size: 12px !important;
    gap: 6px !important;
  }
  /* Buttons side by side */
  .mjs-showroom-ctas {
    order: 6 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  .mjs-showroom-btn-primary {
    flex: 1 !important;
    text-align: center !important;
    padding: 12px 8px !important;
    font-size: 9px !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
  }
  .mjs-showroom-btn-secondary {
    flex: 1 !important;
    text-align: center !important;
    padding: 12px 8px !important;
    font-size: 9px !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
  }
  /* Google Maps */
  .mjs-showroom-map {
    padding: 16px 20px 20px !important;
    margin-top: 0 !important;
  }
  .mjs-showroom-map iframe {
    border-radius: 10px !important;
    height: 200px !important;
  }

/* ============================================
   12. FOOTER — Full mobile optimization
   Accordion-style columns, clean layout
   ============================================ */
  .mjs-footer__trust {
    padding: 16px 0 !important;
  }
  .mjs-footer__trust-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 16px !important;
  }
  .mjs-footer__trust-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }
  .mjs-footer__trust-icon--svg svg {
    width: 22px !important;
    height: 22px !important;
  }
  .mjs-footer__trust-title {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  .mjs-footer__trust-subtitle {
    font-size: 9px !important;
  }
  /* Main footer */
  .mjs-footer__main {
    padding: 28px 0 20px !important;
  }
  .mjs-footer__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 20px !important;
    grid-template-columns: 1fr !important;
  }
  /* First column: logo + about */
  .mjs-footer__col:first-child {
    text-align: center !important;
    padding-bottom: 20px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  .mjs-footer__logo {
    max-width: 140px !important;
    margin: 0 auto 12px !important;
    display: block !important;
  }
  .mjs-footer__about-text {
    font-size: 12px !important;
    line-height: 1.6 !important;
    text-align: center !important;
    margin-bottom: 12px !important;
    color: #999 !important;
  }
  .mjs-footer__address,
  .mjs-footer__contact-item {
    justify-content: center !important;
    font-size: 12px !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
  }
  /* Link columns */
  .mjs-footer__col {
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }
  .mjs-footer__col:last-child {
    border-bottom: none !important;
  }
  .mjs-footer__col-title {
    font-size: 12px !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 10px !important;
    text-align: center !important;
  }
  .mjs-footer__links {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  .mjs-footer__links li {
    text-align: center !important;
  }
  .mjs-footer__links a {
    font-size: 12px !important;
    color: #999 !important;
    text-decoration: none !important;
    padding: 4px 0 !important;
    display: inline-block !important;
  }
  /* Newsletter column */
  .mjs-footer__col--newsletter {
    text-align: center !important;
    padding-top: 16px !important;
  }
  .mjs-footer__newsletter-text {
    font-size: 12px !important;
    text-align: center !important;
    margin-bottom: 10px !important;
  }
  .mjs-footer__newsletter-form {
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }
  .mjs-footer__newsletter-input {
    flex: 1 !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    border-radius: 6px 0 0 6px !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-right: none !important;
    background: rgba(255,255,255,0.06) !important;
    color: #fff !important;
  }
  .mjs-footer__newsletter-btn {
    padding: 10px 16px !important;
    font-size: 11px !important;
    border-radius: 0 6px 6px 0 !important;
    white-space: nowrap !important;
    background: #C9A86A !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600 !important;
    cursor: pointer !important;
  }
  /* Social links */
  .mjs-footer__social {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 12px !important;
  }
  .mjs-footer__social-link {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .mjs-footer__social-link svg {
    width: 18px !important;
    height: 18px !important;
  }
  /* Payment icons */
  .mjs-footer__payment {
    text-align: center !important;
    margin-top: 12px !important;
  }
  .mjs-footer__payment-label {
    font-size: 10px !important;
    display: block !important;
    margin-bottom: 6px !important;
    color: #888 !important;
  }
  .mjs-footer__payment-icons {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  /* Bottom bar */
  .mjs-footer__bottom {
    padding: 12px 20px !important;
  }
  .mjs-footer__bottom-inner {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
  .mjs-footer__copyright {
    font-size: 10px !important;
    color: #888 !important;
  }
  .mjs-footer__bottom-links {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
  }
  .mjs-footer__bottom-links a {
    font-size: 10px !important;
    color: #888 !important;
  }

/* ============================================
   13. BEST SELLERS — Slider cleanup
   ============================================ */
  .mjs-best-sellers {
    padding: 20px 0 !important;
    overflow: hidden !important;
  }
  .mjs-bs-header {
    text-align: center !important;
    padding: 0 20px 12px !important;
  }
  .mjs-bs-heading {
    font-size: 22px !important;
    margin-bottom: 4px !important;
  }
  .mjs-bs-subheading {
    font-size: 12px !important;
    color: #666 !important;
  }

/* ============================================
   14. SHOP BY CATEGORY — Slider cleanup
   ============================================ */
  .mjs-col-header {
    text-align: center !important;
    padding: 0 20px 12px !important;
  }
  .mjs-col-heading {
    font-size: 22px !important;
    margin-bottom: 4px !important;
  }

/* ============================================
   15. NEWSLETTER — Clean mobile
   ============================================ */
  .mjs-newsletter {
    padding: 20px 20px !important;
  }
  .mjs-newsletter__form {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .mjs-newsletter__input {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
  }
  .mjs-newsletter__btn {
    width: 100% !important;
    padding: 12px !important;
    font-size: 13px !important;
  }

/* ============================================
   16. INSTAGRAM — Horizontal scroll
   ============================================ */
  .mjs-instagram {
    padding: 20px 0 !important;
  }
  .mjs-instagram__grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    padding: 0 16px !important;
  }
  .mjs-instagram__grid::-webkit-scrollbar {
    display: none !important;
  }
  .mjs-instagram__item {
    flex: 0 0 40% !important;
    min-width: 40% !important;
    scroll-snap-align: start !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

/* ============================================
   17. BLOG SECTION — Horizontal scroll
   ============================================ */
  .mjs-blog__grid,
  .mjs-blog-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 12px !important;
    padding: 0 16px !important;
    flex-wrap: nowrap !important;
  }
  .mjs-blog__grid::-webkit-scrollbar,
  .mjs-blog-grid::-webkit-scrollbar {
    display: none !important;
  }
  .mjs-blog__card,
  .mjs-blog-card {
    flex: 0 0 75% !important;
    min-width: 75% !important;
    scroll-snap-align: start !important;
  }

/* ============================================
   18. PRODUCT GRID (Collection Pages)
   ============================================ */
  .mjs-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 12px !important;
  }

/* ============================================
   19. COMPARE BAR — Fixed bottom
   ============================================ */
  .mjs-compare-bar {
    padding: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    font-size: 12px !important;
  }
  .mjs-compare-bar__inner {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    min-height: 56px !important;
  }
  .mjs-compare-bar__items {
    display: none !important;
  }
  .mjs-compare-bar__actions {
    margin-left: auto !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
  }
  .mjs-compare-bar__btn {
    font-size: 12px !important;
    padding: 10px 12px !important;
    min-height: 40px !important;
    border-radius: 10px !important;
  }

/* ============================================
   20. RECENTLY VIEWED — Horizontal scroll
   ============================================ */
  .mjs-recently-viewed .mjs-slider-track {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 10px !important;
    padding: 0 16px !important;
  }
  .mjs-recently-viewed .mjs-slider-track::-webkit-scrollbar {
    display: none !important;
  }
  .mjs-recently-viewed .mjs-slider-slide {
    flex: 0 0 44% !important;
    min-width: 44% !important;
    scroll-snap-align: start !important;
  }

/* ============================================
   21. GLOBAL EYEBROW LABELS
   ============================================ */
  .mjs-bs-eyebrow,
  .mjs-col-eyebrow,
  .mjs-value-props__label,
  .mjs-bespoke__eyebrow,
  .mjs-family-legacy__eyebrow,
  .mjs-brand-story-v2__eyebrow,
  .mjs-testimonials__label,
  .mjs-about__label {
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #C9A86A !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
  }

/* ============================================
   22. GLOBAL SECTION HEADINGS
   ============================================ */
  .mjs-bs-heading,
  .mjs-col-heading,
  .mjs-value-props__heading,
  .mjs-bespoke__heading,
  .mjs-family-legacy__heading,
  .mjs-brand-story-v2__heading,
  .mjs-testimonials__heading {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
    text-align: center !important;
  }

/* ============================================
   23. TOUCH-FRIENDLY TAP TARGETS (44px min)
   ============================================ */
  .mjs-bespoke__btn,
  .mjs-bs-view-all-btn,
  .mjs-col-view-all-btn,
  .mjs-brand-story-v2__btn,
  .mjs-showroom-btn-primary,
  .mjs-showroom-btn-secondary,
  .mjs-card-quickview,
  .mjs-card-wishlist {
    min-height: 44px !important;
  }

/* ============================================
   24. ABOUT US — Team Bio Cards
   Wider containers, gold left border, reduced text height
   ============================================ */
  .mjs-about__team-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 20px !important;
  }
  .mjs-about__team-card {
    display: flex !important;
    flex-direction: row !important;
    min-height: auto !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #FAFAF8 !important;
  }
  /* Gold accent bar on LEFT — per Jay's mockup */
  .mjs-about__team-card-accent {
    width: 4px !important;
    min-height: 100% !important;
    background: linear-gradient(180deg, #C9A86A 0%, #B4935E 100%) !important;
    flex-shrink: 0 !important;
    display: block !important;
    border-radius: 10px 0 0 10px !important;
  }
  .mjs-about__team-card-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    padding: 16px !important;
    gap: 14px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  .mjs-about__team-photo {
    width: 90px !important;
    height: 100px !important;
    min-width: 90px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }
  .mjs-about__team-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 10px !important;
  }
  .mjs-about__team-info {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .mjs-about__team-card h4 {
    font-size: 15px !important;
    margin: 0 0 2px !important;
    line-height: 1.2 !important;
  }
  .mjs-about__team-role {
    font-size: 10px !important;
    margin-bottom: 6px !important;
    display: block !important;
  }
  .mjs-about__team-card p {
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: #666 !important;
    margin: 0 !important;
  }
  /* About page section spacing */
  .mjs-about__section {
    padding: 28px 16px !important;
  }
  .mjs-about__section h2 {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }
  .mjs-about__subtitle {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
  }

  /* About: "Where Arts Meets Precision" — prevent tall grey filler under image */
  .mjs-about__craftsmanship {
    padding: 28px 16px !important;
    gap: 16px !important;
  }
  .mjs-about__craft-image {
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    background: transparent !important;
  }
  .mjs-about__craft-image img {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

/* ============================================
   25. DROP A HINT MODAL — Mobile optimized
   Slides up from bottom, compact layout
   ============================================ */
  .mjs-hint-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .mjs-hint-modal-inner {
    max-height: 92vh !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
  }
  .mjs-hint-layout {
    grid-template-columns: 1fr !important;
  }
  .mjs-hint-left {
    padding: 20px 16px 12px !important;
  }
  .mjs-hint-title {
    font-size: 18px !important;
    margin-bottom: 4px !important;
  }
  .mjs-hint-subtitle {
    font-size: 12px !important;
  }
  .mjs-hint-benefits {
    display: none !important;
  }
  .mjs-hint-right {
    padding: 12px 16px 24px !important;
  }
  .mjs-hint-form-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .mjs-hint-input,
  .mjs-hint-textarea {
    font-size: 14px !important;
    padding: 10px 12px !important;
  }
  .mjs-hint-submit-btn {
    font-size: 12px !important;
    padding: 12px !important;
    min-height: 44px !important;
  }
  .mjs-hint-product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .mjs-hint-product-card {
    padding: 8px !important;
  }
  .mjs-hint-product-img {
    width: 60px !important;
    height: 60px !important;
  }
  .mjs-hint-product-name {
    font-size: 10px !important;
  }
  .mjs-hint-product-price {
    font-size: 11px !important;
  }
  .mjs-hint-close {
    top: 10px !important;
    right: 10px !important;
    width: 32px !important;
    height: 32px !important;
  }
  /* Success state */
  .mjs-hint-success-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .mjs-hint-btn-secondary,
  .mjs-hint-btn-primary {
    width: 100% !important;
    text-align: center !important;
    min-height: 44px !important;
    font-size: 12px !important;
  }

/* ============================================
   26. APPOINTMENT / POPUP FORMS — Mobile
   ============================================ */
  .mjs-appt-overlay,
  .mjs-popup-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .mjs-appt-modal,
  .mjs-popup-modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 16px 16px 0 0 !important;
    overflow-y: auto !important;
  }
  .mjs-appt-close,
  .mjs-popup-close {
    top: 10px !important;
    right: 10px !important;
    width: 32px !important;
    height: 32px !important;
  }
  /* Sesami booking widget */
  .sesami-booking-widget,
  .sesami-widget-container {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  .sesami-booking-widget iframe {
    max-width: 100% !important;
    width: 100% !important;
  }

/* ============================================
   27. PRODUCT PAGE — Mobile optimizations
   ============================================ */
  .mjs-product-main {
    padding: 0 16px !important;
  }
  .mjs-product-gallery {
    margin-bottom: 12px !important;
  }
  .mjs-product-title {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
  .mjs-product-price {
    font-size: 22px !important;
  }
  /* Hint button on product page */
  .mjs-hint-trigger,
  .mjs-hint-btn,
  button[data-mjs-hint] {
    font-size: 11px !important;
    padding: 8px 14px !important;
    min-height: 36px !important;
    white-space: nowrap !important;
  }

/* ============================================
   28. SHOWROOM SECTION — Background white override
   ============================================ */
  .mjs-showroom,
  section[class*="showroom"] {
    background: #ffffff !important;
  }

/* ============================================
   29. ABOUT HERITAGE PAGE — Other sections
   ============================================ */
  .mjs-about__craftsmanship {
    grid-template-columns: 1fr !important;
  }
  .mjs-about__craft-inner {
    padding: 28px 16px !important;
  }
  .mjs-about__craft-features {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .mjs-about__values-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 16px !important;
  }
  .mjs-about__value-card {
    padding: 16px !important;
  }
  .mjs-about__testimonial-banner {
    padding: 28px 16px !important;
  }
  .mjs-about__testimonial-quote {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  .mjs-about__stats-bar {
    padding: 28px 16px !important;
  }
  .mjs-about__cta {
    padding: 28px 16px !important;
  }
  .mjs-about__timeline-content {
    width: 100% !important;
  }

/* ============================================
   30. COLLECTION PAGE — White background
   ============================================ */
  .collection-page,
  .template-collection,
  .mjs-collection-page {
    background: #ffffff !important;
  }

/* ============================================
   END OF v10 PATCH
   ============================================ */
}


/* ============================================
   v10.1 FIXES — Addressing issues from v10 testing
   Applied: Apr 2, 2026
   ============================================ */
@media (max-width: 768px) {

/* ============================================
   FIX 1: Best Sellers — Reduce whitespace above
   The section uses CSS var --mjs-bs-pt for padding.
   Override to reduce on mobile.
   ============================================ */
  .mjs-best-sellers {
    padding-top: 16px !important;
    padding-bottom: 24px !important;
    background: #ffffff !important;
  }
  .mjs-bs-header {
    margin-bottom: 16px !important;
  }

/* ============================================
   FIX 2: Value Props — Reduce excessive whitespace
   The section's own CSS has padding: 40px 0.
   Override with tighter padding.
   Also ensure icons are circular.
   ============================================ */
  section.mjs-value-props,
  .mjs-value-props {
    padding: 20px 0 !important;
  }
  .mjs-value-props__header {
    margin-bottom: 12px !important;
    padding: 0 16px !important;
  }
  .mjs-value-props__heading {
    font-size: 20px !important;
    margin-bottom: 4px !important;
  }
  .mjs-value-props__grid {
    gap: 6px !important;
  }
  /* Force circular icons */
  section.mjs-value-props .mjs-value-props__icon,
  section.mjs-value-props .mjs-value-props__icon--svg,
  .mjs-value-props .mjs-value-props__icon,
  .mjs-value-props .mjs-value-props__icon--svg {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    border-radius: 50% !important;
    background: rgba(201, 168, 106, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  section.mjs-value-props .mjs-value-props__icon--svg svg,
  .mjs-value-props .mjs-value-props__icon--svg svg {
    width: 22px !important;
    height: 22px !important;
  }
  section.mjs-value-props .mjs-value-props__icon img,
  .mjs-value-props .mjs-value-props__icon img {
    width: 24px !important;
    height: 24px !important;
  }
  /* Value props items: horizontal layout */
  section.mjs-value-props .mjs-value-props__item,
  .mjs-value-props .mjs-value-props__item {
    padding: 10px 14px !important;
    gap: 12px !important;
    border: none !important;
    background: transparent !important;
  }

/* ============================================
   FIX 3: Family Legacy — Reduce excessive padding
   Base has padding: 100px 0 0, mobile had 60px 0 0.
   Reduce further.
   ============================================ */
  .mjs-family-legacy {
    padding: 20px 0 0 !important;
  }
  .mjs-family-legacy__container {
    gap: 20px !important;
    padding: 0 16px !important;
  }
  .mjs-family-legacy__heading {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
  .mjs-family-legacy__eyebrow {
    margin-bottom: 4px !important;
  }

/* ============================================
   FIX 4: Stats Bar — Fix first item cut off
   The stats bar overflows on left. Add padding
   and make it 2x2 grid properly.
   ============================================ */
  .mjs-family-legacy__stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    padding: 24px 16px !important;
    margin-top: 20px !important;
    overflow: hidden !important;
  }
  .mjs-family-legacy__stat {
    text-align: center !important;
    padding: 0 !important;
  }
  .mjs-family-legacy__stat-number {
    font-size: 28px !important;
  }
  .mjs-family-legacy__stat-label {
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
  }

/* ============================================
   FIX 5: Testimonials CTA Button — Style properly
   The READ MORE REVIEWS button is unstyled.
   ============================================ */
  .mjs-testimonials__cta {
    text-align: center !important;
    padding: 16px 20px 8px !important;
  }
  .mjs-testimonials__cta-btn {
    display: inline-block !important;
    padding: 12px 28px !important;
    border: 1.5px solid #C9A86A !important;
    color: #C9A86A !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    min-height: 44px !important;
    line-height: 1 !important;
  }
  .mjs-testimonials__btn {
    padding: 12px 24px !important;
    font-size: 11px !important;
    min-height: 44px !important;
  }

/* ============================================
   FIX 6: Testimonials section — Reduce padding
   ============================================ */
  .mjs-testimonials {
    padding: 20px 0 !important;
  }
  .mjs-testimonials__header {
    margin-bottom: 12px !important;
    padding: 0 16px !important;
  }
  .mjs-testimonials__heading {
    font-size: 20px !important;
  }

/* ============================================
   FIX 7: Brand Story / Family Tradition — Spacing
   ============================================ */
  .mjs-brand-story-v2 {
    padding: 20px 0 !important;
  }
  .mjs-brand-story-v2__container {
    padding: 0 16px !important;
    gap: 16px !important;
  }

/* ============================================
   FIX 8: Bespoke Section — Image below headline
   Content first, then image below
   ============================================ */
  .mjs-bespoke {
    padding: 20px 0 !important;
  }
  .mjs-bespoke__container {
    padding: 0 16px !important;
  }
  .mjs-bespoke__content {
    order: 1 !important;
    padding: 0 !important;
  }
  .mjs-bespoke__image {
    order: 2 !important;
    margin-top: 12px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  .mjs-bespoke__image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
  }
  .mjs-bespoke__heading {
    font-size: 22px !important;
    margin-bottom: 8px !important;
  }
  .mjs-bespoke__text {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
  }

/* ============================================
   FIX 9: Pink/off-white background removal
   Force white on all homepage sections
   ============================================ */
  .mjs-best-sellers,
  .mjs-featured-collections,
  section[class*="featured-collection"],
  .mjs-collection-list {
    background: #ffffff !important;
    background-image: none !important;
  }

/* ============================================
   FIX 10: Quick View Modal — Mobile optimization
   Ensure text sizes are appropriate and layout
   doesn't overflow
   ============================================ */
  .mjs-qv-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .mjs-qv-modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 90vh !important;
    border-radius: 16px 16px 0 0 !important;
    overflow-y: auto !important;
  }
  .mjs-qv-layout {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .mjs-qv-gallery {
    width: 100% !important;
    max-height: 280px !important;
  }
  .mjs-qv-gallery img {
    max-height: 280px !important;
    object-fit: contain !important;
  }
  .mjs-qv-info {
    padding: 16px !important;
    width: 100% !important;
  }
  .mjs-qv-title {
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
  }
  .mjs-qv-price {
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }
  .mjs-qv-desc {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
    max-height: 80px !important;
    overflow: hidden !important;
  }
  .mjs-qv-actions {
    gap: 8px !important;
  }
  .mjs-qv-actions .mjs-qv-btn,
  .mjs-qv-actions button,
  .mjs-qv-actions a {
    font-size: 11px !important;
    padding: 10px 16px !important;
    min-height: 44px !important;
  }
  .mjs-qv-close {
    top: 8px !important;
    right: 8px !important;
    width: 32px !important;
    height: 32px !important;
    z-index: 10 !important;
  }
  /* Variant selectors */
  .mjs-qv-variants {
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  .mjs-qv-variant-label {
    font-size: 11px !important;
  }
  .mjs-qv-variant-options {
    gap: 6px !important;
  }
  .mjs-qv-variant-option {
    font-size: 11px !important;
    padding: 6px 10px !important;
    min-height: 32px !important;
  }

/* ============================================
   FIX 11: Showroom section — Follow mockup layout
   Headline -> Image -> Description -> Button
   ============================================ */
  .mjs-showroom {
    padding: 20px 0 !important;
    background: #ffffff !important;
  }
  .mjs-showroom-header {
    padding: 0 16px !important;
    margin-bottom: 12px !important;
  }
  .mjs-showroom-heading {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  .mjs-showroom-desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
    padding: 0 16px !important;
    margin-bottom: 12px !important;
  }

/* ============================================
   FIX 12: Shop by Category — Reduce whitespace
   ============================================ */
  .mjs-collections-slider,
  section[class*="collection-list"] {
    padding: 16px 0 !important;
  }

/* ============================================
   FIX 13: Announcement bar — Remove whitespace above
   ============================================ */
  .mjs-announcement-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .shopify-section-group-header-group {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

/* ============================================
   FIX 14: Brand Marquee — Move up, reduce gap
   ============================================ */
  .mjs-trust-marquee,
  .mjs-brand-marquee {
    padding: 8px 0 !important;
    margin: 0 !important;
  }

/* ============================================
   END OF v10.1 FIXES
   ============================================ */
}


/* ============================================
   v10.2 FINAL FIXES — Strongest selectors
   Applied: Apr 2, 2026
   ============================================ */

/* FIX A: EXPLORE arrow — HIDE on mobile */
@media (max-width: 768px) {
  .mjs-hero__explore,
  .mjs-hero__explore-text,
  .mjs-hero__explore-arrow,
  div.mjs-hero__explore,
  section .mjs-hero__explore {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/* FIX B: Value Props — 3-column grid, circular icons, centered text */
@media (max-width: 768px) {
  .mjs-value-props {
    padding: 24px 0 !important;
  }
  .mjs-value-props__header {
    margin-bottom: 16px !important;
    padding: 0 16px !important;
  }
  .mjs-value-props__heading {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
  .mjs-value-props__subheading {
    font-size: 12px !important;
    display: block !important;
    opacity: 1 !important;
  }
  .mjs-value-props__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    flex-direction: unset !important;
    gap: 12px 8px !important;
    padding: 0 12px !important;
    overflow: visible !important;
  }
  .mjs-value-props__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
    padding: 8px 4px !important;
    width: auto !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
  }
  .mjs-value-props__icon,
  .mjs-value-props__icon--svg {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(201, 168, 106, 0.08) !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
  }
  .mjs-value-props__icon img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
  }
  .mjs-value-props__icon--svg svg {
    width: 22px !important;
    height: 22px !important;
    color: #C9A86A !important;
  }
  .mjs-value-props__content {
    flex: unset !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
  }
  .mjs-value-props__title {
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }
  .mjs-value-props__desc {
    font-size: 10px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    max-width: none !important;
    margin: 0 !important;
    opacity: 1 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }
}

/* FIX C: Stats bar — proper 2x2 grid, numbers above labels */
@media (max-width: 768px) {
  .mjs-family-legacy__stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    padding: 24px 16px !important;
    margin-top: 20px !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .mjs-family-legacy__stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 !important;
    gap: 4px !important;
  }
  .mjs-family-legacy__stat-number {
    font-size: 28px !important;
    order: 1 !important;
  }
  .mjs-family-legacy__stat-label {
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
    order: 2 !important;
  }
}

/* FIX D: Trust/Certification section — reduce bottom padding */
@media (max-width: 768px) {
  .mjs-trust-badges,
  section[class*="trust-badges"],
  .mjs-certifications {
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
  }
}

/* FIX E: Bespoke section — ensure image shows below content */
@media (max-width: 768px) {
  .mjs-bespoke__container {
    display: flex !important;
    flex-direction: column !important;
  }
  .mjs-bespoke__content {
    order: 1 !important;
  }
  .mjs-bespoke__image,
  .mjs-bespoke__media {
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    margin-top: 12px !important;
  }
  .mjs-bespoke__image img,
  .mjs-bespoke__media img {
    width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
  }
}

/* FIX F: Family Legacy — tighter padding */
@media (max-width: 768px) {
  .mjs-family-legacy {
    padding: 24px 0 0 !important;
  }
  .mjs-family-legacy__container {
    gap: 16px !important;
    padding: 0 16px !important;
  }
  .mjs-family-legacy__eyebrow {
    margin-bottom: 4px !important;
    font-size: 10px !important;
  }
  .mjs-family-legacy__heading {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }
  .mjs-family-legacy__text {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
  .mjs-family-legacy__quote {
    margin: 12px 0 !important;
    padding: 12px 0 12px 16px !important;
  }
  .mjs-family-legacy__quote p {
    font-size: 14px !important;
  }
}

/* FIX G: Testimonials — tighter spacing */
@media (max-width: 768px) {
  .mjs-testimonials {
    padding: 24px 0 !important;
  }
  .mjs-testimonials__header {
    margin-bottom: 12px !important;
    padding: 0 16px !important;
  }
  .mjs-testimonials__heading {
    font-size: 20px !important;
  }
  .mjs-testimonials__cta {
    text-align: center !important;
    padding: 16px 20px 8px !important;
  }
  .mjs-testimonials__cta-btn {
    display: inline-block !important;
    padding: 12px 28px !important;
    border: 1.5px solid #C9A86A !important;
    color: #C9A86A !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    min-height: 44px !important;
  }
}

/* FIX H: Best Sellers — reduce top padding */
@media (max-width: 768px) {
  .mjs-best-sellers {
    padding-top: 12px !important;
    padding-bottom: 20px !important;
    background: #ffffff !important;
  }
  .mjs-bs-header {
    margin-bottom: 12px !important;
  }
}

/* FIX I: Brand marquee — tighter */
@media (max-width: 768px) {
  .mjs-trust-marquee,
  .mjs-brand-marquee {
    padding: 6px 0 !important;
    margin: 0 !important;
  }
}

/* FIX J: Pink background removal */
@media (max-width: 768px) {
  .mjs-best-sellers,
  .mjs-featured-collections,
  section[class*="featured-collection"],
  .mjs-collection-list {
    background: #ffffff !important;
    background-image: none !important;
  }
}


/* ============================================
   v10.3 DEFINITIVE FIXES
   Root cause: section CSS files have their own
   @media (max-width: 768px) blocks that override
   our responsive CSS. We need to either:
   1. Use higher specificity selectors
   2. Or modify the section CSS files directly
   
   Since we can only add to our responsive CSS,
   we use body-prefixed selectors for higher specificity.
   ============================================ */

/* FIX A: Value Props Icons - FORCE circular
   Root cause: The SVGs are 48x48 viewBox but the icon
   container is being stretched by flex. The icon div
   has class "mjs-value-props__icon mjs-value-props__icon--svg"
   and contains an SVG with width="48" height="48".
   The container needs to NOT stretch in the flex layout.
   Using body prefix for higher specificity than section CSS.
*/
@media (max-width: 768px) {
  body .mjs-value-props__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px 8px !important;
    padding: 0 12px !important;
    overflow: visible !important;
  }
  body .mjs-value-props__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
    padding: 8px 4px !important;
    width: auto !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }
  body .mjs-value-props__icon,
  body .mjs-value-props__icon.mjs-value-props__icon--svg {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 auto 4px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(201, 168, 106, 0.08) !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
  }
  /* Force the SVGs inside to be smaller than container */
  body .mjs-value-props__icon svg,
  body .mjs-value-props__icon--svg svg {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    color: #C9A86A !important;
  }
  body .mjs-value-props__icon img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
  }
  body .mjs-value-props__content {
    flex: unset !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
  }
  body .mjs-value-props__title {
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    text-align: center !important;
  }
  body .mjs-value-props__desc {
    font-size: 10px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    margin: 0 !important;
    opacity: 1 !important;
  }
}

/* FIX B: Stats Bar - proper layout
   Root cause: The HTML has number FIRST, label SECOND.
   But the screenshot shows labels on top. This means
   the section CSS or our CSS has column-reverse.
   The section CSS uses flex-direction: column with
   gap: 8px. Number should be on top, label below.
   The issue is actually the MASSIVE padding and margin.
   Section CSS: margin-top: 48px, padding: 32px 16px, gap: 24px
   We need to override with body prefix.
*/
@media (max-width: 768px) {
  body .mjs-family-legacy__stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 12px !important;
    padding: 20px 16px !important;
    margin-top: 16px !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  body .mjs-family-legacy__stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 8px 0 !important;
    gap: 4px !important;
  }
  body .mjs-family-legacy__stat-number {
    font-size: 28px !important;
    line-height: 1 !important;
    color: #C9A86A !important;
    order: -1 !important;
  }
  body .mjs-family-legacy__stat-label {
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
    line-height: 1.3 !important;
    order: 1 !important;
  }
}

/* FIX C: Hero whitespace after Explore removal
   The space where Explore was is now empty.
   Reduce the gap between hero and next section.
*/
@media (max-width: 768px) {
  body .mjs-hero__explore {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  /* Reduce hero bottom padding */
  body .mjs-hero,
  body .mjs-hero__slide {
    padding-bottom: 0 !important;
  }
  body .mjs-hero__content {
    padding-bottom: 16px !important;
  }
}

/* FIX D: Whitespace between hero/trust and best sellers */
@media (max-width: 768px) {
  body .mjs-trust-badges,
  body [class*="trust-badges"],
  body .mjs-certifications,
  body .mjs-brand-marquee,
  body .mjs-trust-marquee {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin: 0 !important;
  }
}

/* FIX E: Family Legacy section tighter */
@media (max-width: 768px) {
  body .mjs-family-legacy {
    padding: 20px 0 0 !important;
  }
  body .mjs-family-legacy__container {
    gap: 12px !important;
    padding: 0 16px !important;
  }
}

/* FIX F: About team bios - wider container, gold left border */
@media (max-width: 768px) {
  body .mjs-about-heritage__team-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    border-left: 4px solid #C9A86A !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    margin-bottom: 16px !important;
  }
  body .mjs-about-heritage__team-card .team-card__image {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin-bottom: 8px !important;
  }
  body .mjs-about-heritage__team-card .team-card__name {
    font-size: 16px !important;
    font-weight: 700 !important;
  }
  body .mjs-about-heritage__team-card .team-card__role {
    font-size: 12px !important;
    color: #888 !important;
  }
  body .mjs-about-heritage__team-card .team-card__bio {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
}


/* ============================================
   v10.4 - DEFINITIVE icon fix
   The icons appear oval because the SVG elements
   have width="48" height="48" HTML attributes that
   may be expanding the flex container. 
   Fix: Force the icon container to be a fixed-size
   block element with overflow hidden, and force
   the SVG to be absolutely positioned inside.
   ============================================ */

@media (max-width: 768px) {
  /* Force icon containers to perfect circles */
  body .mjs-value-props__icon,
  body .mjs-value-props__icon.mjs-value-props__icon--svg,
  body .mjs-value-props .mjs-value-props__icon,
  body .mjs-value-props .mjs-value-props__icon--svg {
    display: block !important;
    position: relative !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 auto 6px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    background: rgba(201, 168, 106, 0.08) !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    line-height: 52px !important;
    text-align: center !important;
  }
  /* Force SVGs inside to be centered and smaller */
  body .mjs-value-props__icon svg,
  body .mjs-value-props__icon--svg svg,
  body .mjs-value-props .mjs-value-props__icon svg,
  body .mjs-value-props .mjs-value-props__icon--svg svg {
    display: inline-block !important;
    vertical-align: middle !important;
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    color: #C9A86A !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  /* Force images inside to be centered and smaller */
  body .mjs-value-props__icon img,
  body .mjs-value-props .mjs-value-props__icon img {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    object-fit: contain !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}


/* ============================================
   SMALL PHONES (375px and below)
   ============================================ */
@media (max-width: 375px) {
  .mjs-hero__heading {
    font-size: 24px !important;
  }
  h2, .mjs-section-title,
  [class*="__heading"] {
    font-size: 20px !important;
  }
  .mjs-product-card__title,
  .mjs-card-title {
    font-size: 13px !important;
    line-height: 1.35 !important;
    -webkit-line-clamp: 3 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .mjs-card-price,
  .mjs-price-current {
    font-size: 12px !important;
  }
}

/* ============================================
   LANDSCAPE MOBILE
   ============================================ */
@media (max-width: 768px) and (orientation: landscape) {
  .mjs-hero {
    min-height: 100vh !important;
  }
  .mjs-best-sellers__grid,
  .mjs-product-grid,
  .mjs-card-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ============================================
   TABLET (769px - 1024px)
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .mjs-best-sellers__grid,
  .mjs-product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
  .mjs-collection__grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
}

/* ============================================
   END OF CLEAN BUILD
   ============================================ */
/* ============================================
   v10.5 FINAL FIXES — All remaining issues
   Applied: Apr 2, 2026
   
   Fixes:
   1. Newsletter subscribe button spacing
   2. Compare sticky bar too tall
   3. Footer headings too big, link spacing too wide
   4. Pink background on featured collections
   5. Consistent section padding
   6. Bespoke image order (content first, image below)
   ============================================ */

@media (max-width: 768px) {

/* ============================================
   FIX 1: Newsletter Section — Subscribe button spacing
   The button sits directly against the email input.
   Add gap between input-wrap and subscribe button.
   ============================================ */
  body .mjs-newsletter__input-wrap {
    flex-direction: column !important;
    gap: 0 !important;
    margin-bottom: 10px !important;
  }
  body .mjs-newsletter__btn {
    margin-top: 8px !important;
    justify-content: center !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    font-size: 12px !important;
  }
  body .mjs-newsletter__form {
    margin-bottom: 10px !important;
  }
  body .mjs-newsletter {
    padding: 28px 20px !important;
  }
  body .mjs-newsletter__heading {
    font-size: 22px !important;
    margin-bottom: 6px !important;
  }
  body .mjs-newsletter__subheading {
    font-size: 12px !important;
    margin-bottom: 16px !important;
  }

/* ============================================
   FIX 2: Compare Sticky Bar — Too tall
   Make it compact: single row, smaller padding,
   less vertical space.
   ============================================ */
  body .mjs-compare-bar,
  body .compare-bar,
  body [class*="compare-bar"],
  body .mjs-compare-dock,
  body .compare-dock {
    padding: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    font-size: 11px !important;
    box-sizing: border-box !important;
  }
  body .mjs-compare-bar__inner,
  body .compare-bar__inner,
  body [class*="compare-bar"] > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    padding: 10px 14px !important;
    min-height: 56px !important;
  }
  body .mjs-compare-bar__items,
  body .compare-bar__items {
    display: none !important;
  }
  body .mjs-compare-bar__count,
  body .compare-bar__count,
  body [class*="compare-bar"] span {
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  body .mjs-compare-bar__actions,
  body .compare-bar__actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    align-items: center !important;
    margin-left: auto !important;
  }
  body .mjs-compare-bar__btn,
  body .compare-bar__btn,
  body [class*="compare-bar"] .btn,
  body [class*="compare-bar"] button,
  body [class*="compare-bar"] a.btn {
    font-size: 10px !important;
    padding: 6px 12px !important;
    min-height: 32px !important;
    white-space: nowrap !important;
  }
  /* Also handle the wishlist-compare dock from the app */
  body .wk-compare-dock,
  body .wk-compare-bar,
  body [data-wk-compare],
  body .wk-compare-floating {
    padding: 6px 12px !important;
    max-height: 50px !important;
  }
  body .wk-compare-dock .wk-compare-items {
    display: none !important;
  }
  body .wk-compare-dock .wk-compare-btn {
    font-size: 10px !important;
    padding: 6px 12px !important;
    min-height: 32px !important;
  }

/* ============================================
   FIX 3: Footer — Headings too big, links too spaced
   Reduce heading font size and link spacing.
   ============================================ */
  body .mjs-footer__col-title {
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 8px !important;
    text-align: left !important;
  }
  body .mjs-footer__links li {
    margin-bottom: 4px !important;
    padding: 0 !important;
  }
  body .mjs-footer__links a {
    font-size: 12px !important;
    padding: 3px 0 !important;
    line-height: 1.4 !important;
  }
  body .mjs-footer__col {
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    text-align: left !important;
  }
  body .mjs-footer__col:first-child {
    text-align: center !important;
    padding-bottom: 16px !important;
    margin-bottom: 8px !important;
  }
  body .mjs-footer__links {
    align-items: flex-start !important;
    gap: 2px !important;
  }
  body .mjs-footer__main {
    padding: 20px 0 16px !important;
  }
  body .mjs-footer__grid {
    gap: 0 !important;
    padding: 0 16px !important;
  }
  /* Footer newsletter section */
  body .mjs-footer__col--newsletter .mjs-footer__col-title {
    font-size: 11px !important;
    text-align: left !important;
  }
  body .mjs-footer__newsletter-text {
    font-size: 11px !important;
    text-align: left !important;
    margin-bottom: 8px !important;
  }
  /* Social icons in footer */
  body .mjs-footer__social {
    justify-content: flex-start !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }
  body .mjs-footer__social-link {
    width: 32px !important;
    height: 32px !important;
  }
  body .mjs-footer__social-link svg {
    width: 16px !important;
    height: 16px !important;
  }
  /* Payment section */
  body .mjs-footer__payment {
    text-align: left !important;
    margin-top: 8px !important;
  }
  body .mjs-footer__payment-label {
    font-size: 9px !important;
    text-align: left !important;
  }
  body .mjs-footer__payment-icons {
    justify-content: flex-start !important;
    gap: 4px !important;
  }
  /* Bottom bar */
  body .mjs-footer__bottom {
    padding: 10px 16px !important;
  }
  body .mjs-footer__copyright {
    font-size: 9px !important;
  }
  body .mjs-footer__bottom-links a {
    font-size: 9px !important;
  }

/* ============================================
   FIX 4: Pink/Blush Background — Force white
   The featured collections section has an inline
   style with background: #FFF8F8. We need to
   override with !important.
   Also target the Shopify section wrapper.
   ============================================ */
  body .mjs-featured-collections,
  body section.mjs-featured-collections,
  body [class*="featured-collection"],
  body .mjs-collection-list,
  body section[class*="collection-list"],
  body .shopify-section .mjs-featured-collections,
  body .mjs-best-sellers,
  body .shopify-section .mjs-best-sellers {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
  }
  /* Also override the Shopify section wrapper itself */
  body .shopify-section:has(.mjs-featured-collections),
  body .shopify-section:has(.mjs-collection-list) {
    background: #ffffff !important;
  }
  /* Target inline style override - use attribute selector */
  body [style*="FFF8F8"],
  body [style*="fff8f8"],
  body [style*="rgb(255, 248, 248)"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }

/* ============================================
   FIX 5: Consistent Section Padding
   Apply 24px top/bottom padding to ALL homepage
   sections for clean, consistent spacing.
   ============================================ */
  body .shopify-section > section,
  body .shopify-section > div[class*="mjs-"] {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  /* Exceptions: hero, announcement, trust bar, footer */
  body .shopify-section > .mjs-hero,
  body .shopify-section > .mjs-announcement-bar,
  body .shopify-section > .mjs-trust-marquee,
  body .shopify-section > .mjs-brand-marquee,
  body .shopify-section > .mjs-footer {
    padding-top: unset !important;
    padding-bottom: unset !important;
  }

/* ============================================
   FIX 6: Bespoke Section — enforce image-first on mobile
   (Some older rules referenced .mjs-bespoke__image which isn't used)
   ============================================ */
  body .mjs-bespoke__container {
    display: flex !important;
    flex-direction: column !important;
  }
  body .mjs-bespoke__content {
    order: 2 !important;
  }
  body .mjs-bespoke__image-col {
    order: 1 !important;
    width: 100% !important;
    margin: 0 0 12px !important;
  }
  body .mjs-bespoke__image-col img {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
  }

/* ============================================
   FIX 7: Family Legacy — Reduce image area whitespace
   The image sits in a large padded container.
   ============================================ */
  body .mjs-family-legacy__image-wrap,
  body .mjs-family-legacy__media {
    padding: 0 !important;
    margin: 0 0 12px !important;
  }
  body .mjs-family-legacy__image-wrap img,
  body .mjs-family-legacy__media img {
    width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
  }
  /* Reduce the quote area padding */
  body .mjs-family-legacy__quote {
    margin: 8px 0 !important;
    padding: 8px 0 8px 14px !important;
  }
  body .mjs-family-legacy__quote p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  /* Reduce the body text spacing */
  body .mjs-family-legacy__body,
  body .mjs-family-legacy__text {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 8px !important;
  }
  /* Divider */
  body .mjs-family-legacy__divider {
    margin: 8px 0 !important;
    height: 1px !important;
  }

/* ============================================
   FIX 8: Showroom Section — Follow mockup layout
   Headline -> Image -> Description -> Buttons
   ============================================ */
  body .mjs-showroom__container,
  body .mjs-showroom-container {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 16px !important;
  }
  body .mjs-showroom__heading,
  body .mjs-showroom-heading {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
    text-align: left !important;
  }
  body .mjs-showroom__image,
  body .mjs-showroom-image {
    width: 100% !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
  }
  body .mjs-showroom__image img,
  body .mjs-showroom-image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
  }
  body .mjs-showroom__desc,
  body .mjs-showroom-desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
  }
  /* Contact info */
  body .mjs-showroom__info,
  body .mjs-showroom-info {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
  }
  /* Opening hours */
  body .mjs-showroom__hours,
  body .mjs-showroom-hours {
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }
  body .mjs-showroom__hours table,
  body .mjs-showroom-hours table {
    width: 100% !important;
    font-size: 12px !important;
  }
  /* Buttons side by side */
  body .mjs-showroom__actions,
  body .mjs-showroom-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  body .mjs-showroom-btn-primary,
  body .mjs-showroom-btn-secondary {
    flex: 1 !important;
    font-size: 10px !important;
    padding: 10px 12px !important;
    min-height: 44px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  /* Map */
  body .mjs-showroom__map,
  body .mjs-showroom-map {
    width: 100% !important;
    height: 200px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  body .mjs-showroom__map iframe,
  body .mjs-showroom-map iframe {
    width: 100% !important;
    height: 200px !important;
  }

/* ============================================
   FIX 9: Testimonials — Ensure horizontal scroll
   ============================================ */
  body .mjs-testimonials__grid,
  body .mjs-testimonials__track {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 12px !important;
    padding: 0 16px !important;
    flex-wrap: nowrap !important;
  }
  body .mjs-testimonials__grid::-webkit-scrollbar,
  body .mjs-testimonials__track::-webkit-scrollbar {
    display: none !important;
  }
  body .mjs-testimonials__card {
    flex: 0 0 85% !important;
    min-width: 85% !important;
    scroll-snap-align: start !important;
    padding: 16px !important;
    border-radius: 8px !important;
  }
  body .mjs-testimonials__card-text,
  body .mjs-testimonials__card p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  body .mjs-testimonials__card-author {
    font-size: 12px !important;
  }

/* ============================================
   FIX 10: Recently Viewed — Compact
   ============================================ */
  body .mjs-recently-viewed {
    padding: 16px 0 !important;
  }
  body .mjs-recently-viewed h2,
  body .mjs-recently-viewed [class*="heading"] {
    font-size: 18px !important;
    margin-bottom: 8px !important;
    padding: 0 16px !important;
  }

/* ============================================
   END OF v10.5 FINAL FIXES
   ============================================ */
}
/* ============================================
   v10.6 FINAL MOBILE FIXES
   Applied: Apr 2, 2026
   
   Fixes:
   1. Compare sticky bar - compact single row
   2. Newsletter subscribe button spacing
   3. Footer headings/links font size + spacing
   4. Section padding consistency
   5. Quick View modal mobile optimization
   6. Drop a Hint modal mobile optimization
   7. Product page mobile fixes
   ============================================ */

@media (max-width: 768px) {

/* ============================================
   1. COMPARE STICKY BAR — Compact single row
   Class: .mjs-compare-bar (fixed bottom)
   ============================================ */
  .mjs-compare-bar {
    padding: 8px 0 !important;
  }
  .mjs-compare-bar__inner {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 0 12px !important;
  }
  .mjs-compare-bar__items {
    display: none !important;
  }
  .mjs-compare-bar__label {
    font-size: 12px !important;
    gap: 4px !important;
  }
  .mjs-compare-bar__label svg,
  .mjs-compare-bar__label img {
    width: 16px !important;
    height: 16px !important;
  }
  .mjs-compare-bar__right {
    gap: 6px !important;
    margin-left: auto !important;
  }
  .mjs-compare-bar__right .mjs-btn,
  .mjs-compare-bar__right button {
    font-size: 10px !important;
    padding: 6px 12px !important;
    min-height: 32px !important;
    border-radius: 6px !important;
  }

/* ============================================
   2. NEWSLETTER SECTION — Subscribe spacing
   ============================================ */
  .mjs-newsletter__input-wrap {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .mjs-newsletter__input-wrap input[type="email"] {
    width: 100% !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    margin-bottom: 10px !important;
  }
  .mjs-newsletter__btn,
  .mjs-newsletter__input-wrap button {
    width: 100% !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    font-size: 13px !important;
    margin-top: 0 !important;
  }
  .mjs-newsletter {
    padding: 28px 20px !important;
  }
  .mjs-newsletter__heading {
    font-size: 22px !important;
    margin-bottom: 6px !important;
  }
  .mjs-newsletter__subheading,
  .mjs-newsletter__eyebrow {
    font-size: 11px !important;
    margin-bottom: 4px !important;
  }
  .mjs-newsletter__body {
    font-size: 13px !important;
    margin-bottom: 16px !important;
  }

/* ============================================
   3. FOOTER — Smaller headings, tighter links
   ============================================ */
  .mjs-footer__col-title {
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
  }
  .mjs-footer__links li {
    margin-bottom: 2px !important;
    padding: 0 !important;
  }
  .mjs-footer__links a {
    font-size: 12px !important;
    padding: 4px 0 !important;
    line-height: 1.4 !important;
  }
  .mjs-footer__col {
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }
  .mjs-footer__grid {
    gap: 0 !important;
    padding: 0 16px !important;
  }
  .mjs-footer__main {
    padding: 20px 0 16px !important;
  }
  /* Footer newsletter */
  .mjs-footer__col--newsletter .mjs-footer__col-title {
    font-size: 12px !important;
  }
  .mjs-footer__newsletter-text {
    font-size: 11px !important;
    margin-bottom: 8px !important;
  }
  /* Social icons */
  .mjs-footer__social {
    gap: 10px !important;
    margin-top: 10px !important;
  }
  .mjs-footer__social-link {
    width: 32px !important;
    height: 32px !important;
  }
  .mjs-footer__social-link svg {
    width: 16px !important;
    height: 16px !important;
  }
  /* Payment */
  .mjs-footer__payment-label {
    font-size: 9px !important;
  }
  .mjs-footer__payment-icons {
    gap: 4px !important;
  }
  /* Bottom bar */
  .mjs-footer__bottom {
    padding: 10px 16px !important;
  }
  .mjs-footer__copyright,
  .mjs-footer__bottom-links a {
    font-size: 9px !important;
  }

/* ============================================
   4. SECTION PADDING — Consistent 24px
   ============================================ */
  .shopify-section > section,
  .shopify-section > div[class*="mjs-"] {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  /* Exceptions */
  .shopify-section > .mjs-hero,
  .shopify-section > .mjs-announcement-bar,
  .shopify-section > .mjs-trust-marquee,
  .shopify-section > .mjs-brand-marquee,
  .shopify-section > .mjs-footer {
    padding-top: unset !important;
    padding-bottom: unset !important;
  }
  /* Tighter section inner padding */
  .mjs-bespoke,
  .mjs-family-legacy,
  .mjs-testimonials,
  .mjs-showroom,
  .mjs-collections,
  .mjs-value-props,
  .mjs-best-sellers,
  .mjs-newsletter {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

/* ============================================
   5. QUICK VIEW MODAL — Mobile optimized
   ============================================ */
  .mjs-quickview__modal,
  .mjs-quick-view-modal {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    margin: 5vh auto !important;
    border-radius: 12px !important;
    overflow-y: auto !important;
  }
  .mjs-quickview__grid,
  .mjs-quick-view-modal__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .mjs-quickview__image-col,
  .mjs-quick-view-modal__image {
    width: 100% !important;
    max-height: 280px !important;
  }
  .mjs-quickview__image-col img,
  .mjs-quick-view-modal__image img {
    width: 100% !important;
    height: auto !important;
    max-height: 280px !important;
    object-fit: contain !important;
  }
  .mjs-quickview__info,
  .mjs-quick-view-modal__info {
    padding: 12px 16px !important;
  }
  .mjs-quickview__title,
  .mjs-quick-view-modal__title {
    font-size: 16px !important;
    margin-bottom: 4px !important;
  }
  .mjs-quickview__price,
  .mjs-quick-view-modal__price {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }
  .mjs-quickview__desc,
  .mjs-quick-view-modal__desc {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin-bottom: 8px !important;
    max-height: 80px !important;
    overflow-y: auto !important;
  }
  .mjs-quickview__actions,
  .mjs-quick-view-modal__actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  .mjs-quickview__actions .mjs-btn,
  .mjs-quick-view-modal__actions .mjs-btn,
  .mjs-quickview__actions button,
  .mjs-quick-view-modal__actions button {
    width: 100% !important;
    font-size: 12px !important;
    padding: 10px 16px !important;
    min-height: 40px !important;
  }
  .mjs-quickview__close,
  .mjs-quick-view-modal__close {
    top: 8px !important;
    right: 8px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
  }

/* ============================================
   6. DROP A HINT MODAL — Mobile optimized
   ============================================ */
  .mjs-hint-modal__content {
    width: 92vw !important;
    max-width: 92vw !important;
    max-height: 85vh !important;
    padding: 20px 16px !important;
    border-radius: 12px !important;
    overflow-y: auto !important;
  }
  .mjs-hint-modal__title {
    font-size: 18px !important;
    margin-bottom: 4px !important;
  }
  .mjs-hint-modal__subtitle {
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }
  .mjs-hint-modal__product {
    gap: 10px !important;
    margin-bottom: 12px !important;
  }
  .mjs-hint-product-image {
    width: 60px !important;
    height: 60px !important;
  }
  .mjs-hint-product-title {
    font-size: 13px !important;
  }
  .mjs-hint-form__row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .mjs-hint-form__field label {
    font-size: 11px !important;
  }
  .mjs-hint-form__field input,
  .mjs-hint-form__field textarea {
    font-size: 13px !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
  }
  .mjs-hint-form__field textarea {
    min-height: 80px !important;
  }
  .mjs-hint-form button[type="submit"] {
    width: 100% !important;
    padding: 12px 20px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    min-height: 44px !important;
  }
  .mjs-hint-modal__close {
    top: 8px !important;
    right: 8px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 20px !important;
  }

/* ============================================
   7. PINK BACKGROUND OVERRIDE (backup)
   In case the Liquid file change doesn't apply
   ============================================ */
  .mjs-collections {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }
  [style*="FFF8F8"],
  [style*="fff8f8"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }

/* ============================================
   8. PRODUCT PAGE — Mobile adjustments
   ============================================ */
  .mjs-pdp__gallery {
    max-height: 400px !important;
  }
  .mjs-pdp__info {
    padding: 16px !important;
  }
  .mjs-pdp__title {
    font-size: clamp(1.2rem, 4.8vw, 1.5rem) !important;
    line-height: 1.28 !important;
  }
  .mjs-pdp__price {
    font-size: 18px !important;
  }
  .mjs-pdp__meta {
    font-size: 12px !important;
  }
  .mjs-pdp__desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
  .mjs-pdp__actions {
    gap: 8px !important;
  }
  .mjs-pdp__actions .mjs-btn {
    font-size: 13px !important;
    padding: 12px 20px !important;
    min-height: 44px !important;
  }
  /* PDP tabs */
  .mjs-pdp__tabs-nav {
    gap: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .mjs-pdp__tabs-nav button {
    font-size: 11px !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
  }
  .mjs-pdp__tab-content {
    font-size: 13px !important;
    padding: 12px 0 !important;
  }

/* ============================================
   9. RECENTLY VIEWED — Compact
   ============================================ */
  .mjs-recently-viewed,
  [class*="recently-viewed"] {
    padding: 16px 0 !important;
  }
  .mjs-recently-viewed h2,
  [class*="recently-viewed"] h2 {
    font-size: 18px !important;
    margin-bottom: 8px !important;
    padding: 0 16px !important;
  }

/* ============================================
   10. GLOBAL MOBILE BEST PRACTICES
   ============================================ */
  /* Minimum tap target 44px */
  a, button, input[type="submit"], .mjs-btn {
    min-height: 44px;
  }
  /* Prevent horizontal overflow */
  body {
    overflow-x: hidden !important;
  }
  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }
  /* Image max-width safety */
  img {
    max-width: 100%;
    height: auto;
  }

/* ============================================
   END v10.6 FINAL
   ============================================ */
}


/* ============================================
   v10.7 MOBILE HOTFIX - High Specificity Overrides
   Applied: Apr 2, 2026
   
   Root cause: v10.6 selectors were being overridden
   by theme CSS and inline CSS variables.
   Fix: Use ID selectors and doubled class selectors
   for maximum specificity.
   ============================================ */
@media (max-width: 768px) {

  /* --- FOOTER HEADINGS: 20px -> 13px --- */
  .mjs-footer h3.mjs-footer__col-title,
  footer.mjs-footer .mjs-footer__col-title,
  .mjs-footer .mjs-footer__col-title,
  .mjs-footer h3 {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
    text-transform: uppercase !important;
  }

  /* --- FOOTER LINKS: 14px -> 12px, tighter spacing --- */
  .mjs-footer li {
    margin-bottom: 4px !important;
    padding: 0 !important;
  }
  .mjs-footer li a,
  .mjs-footer .mjs-footer__col a {
    font-size: 12px !important;
    line-height: 1.4 !important;
    padding: 3px 0 !important;
    display: inline-block !important;
  }
  .mjs-footer .mjs-footer__col {
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }
  .mjs-footer .mjs-footer__grid {
    gap: 0 !important;
    padding: 0 16px !important;
  }
  .mjs-footer .mjs-footer__main {
    padding: 20px 0 16px !important;
  }
  .mjs-footer .mjs-footer__bottom {
    padding: 10px 16px !important;
  }
  .mjs-footer .mjs-footer__copyright,
  .mjs-footer .mjs-footer__bottom a {
    font-size: 10px !important;
  }
  .mjs-footer .mjs-footer__newsletter-text,
  .mjs-footer .mjs-footer__col p {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }
  .mjs-footer .mjs-footer__social {
    gap: 10px !important;
    margin-top: 10px !important;
  }
  .mjs-footer .mjs-footer__social-link,
  .mjs-footer .mjs-footer__social a {
    width: 36px !important;
    height: 36px !important;
  }
  .mjs-footer .mjs-footer__payment-label {
    font-size: 9px !important;
  }

  /* --- NEWSLETTER: Input/button gap + radius --- */
  #mjs-hp-email,
  .mjs-newsletter .mjs-newsletter__input {
    margin-bottom: 10px !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #mjs-hp-btn,
  .mjs-newsletter .mjs-newsletter__btn {
    border-radius: 8px !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    width: 100% !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
  }
  .mjs-newsletter .mjs-newsletter__input-wrap {
    flex-direction: column !important;
    gap: 0 !important;
  }
  section.mjs-newsletter,
  .mjs-newsletter {
    padding: 28px 20px !important;
  }
  .mjs-newsletter .mjs-newsletter__heading {
    font-size: 22px !important;
    margin-bottom: 6px !important;
  }
  .mjs-newsletter .mjs-newsletter__eyebrow {
    font-size: 11px !important;
    margin-bottom: 4px !important;
  }
  .mjs-newsletter .mjs-newsletter__body,
  .mjs-newsletter .mjs-newsletter__inner > p {
    font-size: 13px !important;
    margin-bottom: 16px !important;
  }
  #mjs-footer-email {
    margin-bottom: 8px !important;
    border-radius: 6px !important;
  }

  /* --- COMPARE BAR — mobile: comfortable height + safe-area --- */
  .mjs-compare-bar {
    padding: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  .mjs-compare-bar .mjs-compare-bar__inner {
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    min-height: 56px !important;
    max-height: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
  }

  /* Hide thumbnails on small screens (keep the bar clean) */
  .mjs-compare-bar .mjs-compare-bar__items {
    display: none !important;
  }

  .mjs-compare-bar .mjs-compare-bar__label {
    font-size: 13px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mjs-compare-bar .mjs-compare-bar__right {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    margin-left: auto !important;
  }

  .mjs-compare-bar .mjs-compare-bar__right button,
  .mjs-compare-bar .mjs-compare-bar__right .mjs-btn {
    font-size: 12px !important;
    padding: 10px 12px !important;
    min-height: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  /* --- SECTION PADDING: Override CSS variables --- */
  section.mjs-best-sellers,
  .mjs-best-sellers {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  section.mjs-collections,
  .mjs-collections {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  section.mjs-testimonials,
  .mjs-testimonials[class] {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  section.mjs-brand-story-v2,
  .mjs-brand-story-v2 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  section.mjs-showroom,
  .mjs-showroom {
    padding-top: 24px !important;
    padding-bottom: 0 !important;
  }
  section.mjs-blog-home,
  .mjs-blog-home {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  section.mjs-newsletter {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  section.mjs-rv,
  .mjs-rv {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  section.mjs-instagram,
  .mjs-instagram {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  section.mjs-logo-cloud,
  .mjs-logo-cloud {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .mjs-footer__trust {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

/* ============================================
   END v10.7 HOTFIX
   ============================================ */

/* ============================================
   GLOBAL MOBILE GUTTER CONSISTENCY (v10.8)
   Keep consistent side padding on mobile pages
   ============================================ */
@media (max-width: 749px) {
  :root { --mjs-mobile-gutter: 16px; }

  main#MainContent .page-width {
    padding-left: var(--mjs-mobile-gutter) !important;
    padding-right: var(--mjs-mobile-gutter) !important;
    box-sizing: border-box !important;
  }
}


/* ============================================
   FINAL NUCLEAR OVERRIDES (v11)
   Uses #id selectors to beat ALL class-based rules
   in mjs-wishlist-compare.css and other files.
   This block must stay at the very bottom.
   ============================================ */
@media (max-width: 749px) {

  /* ---- 1. BREADCRUMBS: Kill whitespace above on mobile ---- */
  [class*="breadcrumb"] {
    padding-top: 6px !important;
  }
  .mjs-pdp__breadcrumbs {
    padding: 6px 16px !important;
    margin: 0 !important;
  }

  /* ---- 2. COMPARE STICKY BAR: full-width, no clipping ---- */
  #mjs-compare-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    padding: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  #mjs-compare-bar .mjs-compare-bar__inner,
  #mjs-compare-bar .mjs-compare-bar__inner.page-width {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    margin: 0 !important;
    min-height: 52px !important;
  }
  #mjs-compare-bar .mjs-compare-bar__items {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  #mjs-compare-bar .mjs-compare-bar__left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  #mjs-compare-bar .mjs-compare-bar__label {
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  #mjs-compare-bar .mjs-compare-bar__right {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }
  #mjs-compare-bar .mjs-compare-bar__right button,
  #mjs-compare-bar .mjs-compare-bar__right .mjs-btn {
    font-size: 11px !important;
    padding: 9px 12px !important;
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  /* ---- 3. ABOUT: craftsmanship image — kill grey filler ---- */
  .mjs-about__craft-image {
    max-height: none !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    background: transparent !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }
  .mjs-about__craft-image img {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* ---- 4. ABOUT: team cards side padding ---- */
  .mjs-about__team-grid {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .mjs-about__team-card-inner {
    padding: 16px !important;
  }
}