/* LASTO Contact mobile 390px — EXISTING STRUCTURE ONLY.
   CSS-only patch: does not replace contact.php or real Admin data bindings.
   Desktop/tablet remain untouched. */

@media (max-width: 599px) {
  .contact-page {
    --cm-gutter: 14px;
    --cm-gap: 14px;
    --cm-card: #101827;
    --cm-card-2: #0d1422;
    --cm-line: rgba(126, 105, 255, .24);
    --cm-text: #f8f7ff;
    --cm-muted: #aeb7cb;
    --cm-purple: #7a4dff;
  }

  .contact-page .contact-main {
    padding: 0 0 88px !important;
    overflow-x: clip !important;
    background: #070c16 !important;
    color: var(--cm-text) !important;
  }

  .contact-page .site-container {
    width: auto !important;
    max-width: none !important;
    margin-left: var(--cm-gutter) !important;
    margin-right: var(--cm-gutter) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* HERO — real existing copy/image/badge only */
  .contact-page .contact-hero {
    height: 238px !important;
    min-height: 238px !important;
    margin-top: 10px !important;
    border: 1px solid var(--cm-line) !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    background: #0c1321 !important;
    box-shadow: none !important;
  }

  .contact-page .contact-hero-inner {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 58%) minmax(0, 42%) !important;
    align-items: stretch !important;
    background: linear-gradient(110deg, #0a1120 0%, #0b1222 54%, #17133a 100%) !important;
  }

  .contact-page .contact-hero-copy {
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 20px 10px 18px 17px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .contact-page .contact-eyebrow {
    margin: 0 0 7px !important;
    color: #9a73ff !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
  }

  .contact-page .contact-hero-copy h1 {
    margin: 0 !important;
    max-width: 190px !important;
    color: #fff !important;
    font-size: 25px !important;
    line-height: 1.02 !important;
    letter-spacing: -.04em !important;
    font-weight: 900 !important;
  }

  .contact-page .contact-hero-copy > p:not(.contact-eyebrow) {
    margin: 10px 0 0 !important;
    max-width: 190px !important;
    color: #d7dbea !important;
    font-size: 9px !important;
    line-height: 1.48 !important;
  }

  .contact-page .contact-hero-meta {
    margin-top: 12px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .contact-page .contact-hero-meta span {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #eef0f8 !important;
    font-size: 8px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
  }

  .contact-page .contact-hero-meta .icon {
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
    color: #8a63ff !important;
  }

  .contact-page .contact-hero-visual {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .contact-page .contact-hero-visual::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(90deg, #0b1222 0%, rgba(11,18,34,.24) 31%, rgba(11,18,34,.02) 72%) !important;
    pointer-events: none !important;
  }

  .contact-page .contact-hero-visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: brightness(.78) saturate(.92) !important;
  }

  .contact-page .contact-hero-badge {
    position: absolute !important;
    z-index: 3 !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 9px !important;
    width: auto !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 8px 9px !important;
    display: grid !important;
    grid-template-columns: 24px minmax(0,1fr) !important;
    align-items: center !important;
    gap: 7px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 9px !important;
    background: rgba(8,13,25,.78) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: none !important;
  }

  .contact-page .contact-hero-badge > .icon {
    width: 21px !important;
    height: 21px !important;
    color: #9a73ff !important;
  }

  .contact-page .contact-hero-badge span {
    min-width: 0 !important;
    color: #aeb7cb !important;
    font-size: 6.8px !important;
    line-height: 1.25 !important;
  }

  .contact-page .contact-hero-badge strong {
    display: block !important;
    margin-bottom: 1px !important;
    color: #fff !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
  }

  /* CONNECT WITH US — actual visible channel items from PHP */
  .contact-page .contact-methods {
    padding-top: 25px !important;
  }

  .contact-page .contact-section-heading {
    margin: 0 0 12px !important;
    text-align: center !important;
  }

  .contact-page .contact-section-heading .contact-eyebrow {
    margin-bottom: 5px !important;
  }

  .contact-page .contact-section-heading h2 {
    margin: 0 !important;
    color: #fff !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    letter-spacing: -.025em !important;
  }

  .contact-page .contact-method-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    gap: 6px !important;
    align-items: stretch !important;
  }

  .contact-page .contact-method-card {
    width: 100% !important;
    min-width: 0 !important;
    height: 90px !important;
    min-height: 90px !important;
    padding: 9px 4px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    border: 1px solid var(--cm-line) !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #111a2b 0%, #0d1524 100%) !important;
    box-shadow: none !important;
    text-align: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .contact-page .contact-method-icon {
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 34px !important;
  }

  .contact-page .contact-method-icon .icon {
    width: 18px !important;
    height: 18px !important;
  }

  .contact-page .contact-method-card > div {
    width: 100% !important;
    min-width: 0 !important;
    display: contents !important;
  }

  .contact-page .contact-method-card h3 {
    width: 100% !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 7.4px !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .contact-page .contact-method-card p {
    display: none !important;
  }

  .contact-page .contact-method-card a {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #bba7ff !important;
    font-size: 6.6px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .contact-page .contact-method-card a .icon {
    display: none !important;
  }

  /* STORE LOCATIONS — use real foreach($branches), no fake tabs/labels */
  .contact-page .store-location-section {
    padding-top: 28px !important;
    padding-bottom: 0 !important;
  }

  .contact-page .store-location-heading {
    margin-bottom: 13px !important;
    text-align: center !important;
  }

  .contact-page .store-location-list {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  .contact-page .store-location-card,
  .contact-page .store-location-card.store-location-card-alt {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid var(--cm-line) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #101827 0%, #0b1321 100%) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .contact-page .store-location-photo {
    width: 100% !important;
    height: 106px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  .contact-page .store-location-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: brightness(.72) saturate(.9) !important;
  }

  .contact-page .store-location-photo::after {
    height: 82% !important;
    background: linear-gradient(180deg, rgba(7,11,21,.02) 0%, rgba(7,11,21,.20) 36%, rgba(7,11,21,.88) 100%) !important;
  }

  .contact-page .store-location-photo-overlay {
    padding: 0 11px 9px !important;
  }

  .contact-page .store-location-title-block {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .contact-page .store-location-tag {
    margin-bottom: 3px !important;
    padding: 3px 7px !important;
    font-size: 6.5px !important;
  }

  .contact-page .store-location-title-block h3 {
    margin: 0 !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1.12 !important;
    font-weight: 900 !important;
  }

  .contact-page .store-location-name {
    margin: 2px 0 0 !important;
    color: #d9deea !important;
    font-size: 7.5px !important;
    line-height: 1.2 !important;
  }

  .contact-page .store-location-body {
    width: 100% !important;
    padding: 9px 2px 2px !important;
    box-sizing: border-box !important;
  }

  .contact-page .store-location-info-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr) !important;
    gap: 9px !important;
    align-items: stretch !important;
  }

  .contact-page .store-contact-panel,
  .contact-page .store-location-right-column {
    min-width: 0 !important;
  }

  .contact-page .store-panel-heading,
  .contact-page .store-hours strong {
    margin: 0 0 5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #eeeaff !important;
    font-size: 7.5px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
  }

  .contact-page .store-panel-heading .icon,
  .contact-page .store-hours strong .icon {
    width: 10px !important;
    height: 10px !important;
    color: #8b64ff !important;
  }

  .contact-page .store-address {
    margin: 0 0 7px !important;
    color: #b9c1d1 !important;
    font-size: 7.5px !important;
    line-height: 1.38 !important;
  }

  .contact-page .store-contact-list {
    margin: 0 !important;
    display: grid !important;
    gap: 4px !important;
  }

  .contact-page .store-contact-list a {
    min-width: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 5px !important;
    color: #d9deea !important;
    font-size: 6.8px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }

  .contact-page .store-contact-list .icon {
    width: 9px !important;
    height: 9px !important;
    flex: 0 0 9px !important;
    color: #8b64ff !important;
  }

  .contact-page .store-location-actions {
    margin-top: 8px !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 6px !important;
  }

  .contact-page .store-direction-button,
  .contact-page .store-whatsapp-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 0 5px !important;
    border-radius: 7px !important;
    font-size: 6.8px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  .contact-page .store-direction-button .icon,
  .contact-page .store-whatsapp-button .icon {
    width: 9px !important;
    height: 9px !important;
  }

  .contact-page .store-location-right-column {
    display: grid !important;
    grid-template-rows: auto minmax(82px,1fr) !important;
    gap: 7px !important;
  }

  .contact-page .store-hours {
    min-width: 0 !important;
  }

  .contact-page .store-hours p {
    margin: 0 !important;
    color: #b9c1d1 !important;
    font-size: 6.8px !important;
    line-height: 1.35 !important;
  }

  .contact-page .store-map-wrap {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 82px !important;
    min-height: 82px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #dfe4ee !important;
  }

  .contact-page .store-map-wrap iframe {
    width: 100% !important;
    height: 100% !important;
  }

  .contact-page .map-pin {
    width: 26px !important;
    height: 26px !important;
  }

  .contact-page .map-pin .icon {
    width: 12px !important;
    height: 12px !important;
  }

  .contact-page .map-label {
    display: none !important;
  }

  /* SUPPORT — real existing support data */
  .contact-page .contact-support-strip {
    width: auto !important;
    min-height: 108px !important;
    margin-top: 16px !important;
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0,1fr) 112px !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid var(--cm-line) !important;
    border-radius: 13px !important;
    background: linear-gradient(110deg, #12182a 0%, #111729 52%, #1b1241 100%) !important;
    box-shadow: none !important;
  }

  .contact-page .contact-support-art {
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
  }

  .contact-page .contact-support-art img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .contact-page .contact-support-art span {
    transform: none !important;
  }

  .contact-page .contact-support-art .icon {
    width: 26px !important;
    height: 26px !important;
  }

  .contact-page .contact-support-copy {
    min-width: 0 !important;
  }

  .contact-page .contact-support-copy .contact-eyebrow {
    margin-bottom: 3px !important;
    font-size: 6.3px !important;
  }

  .contact-page .contact-support-copy h2 {
    margin: 0 !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1.12 !important;
    font-weight: 900 !important;
  }

  .contact-page .contact-support-copy > p:not(.contact-eyebrow) {
    margin: 5px 0 0 !important;
    color: #bac2d3 !important;
    font-size: 7px !important;
    line-height: 1.4 !important;
  }

  .contact-page .contact-support-actions {
    grid-column: auto !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    justify-content: stretch !important;
  }

  .contact-page .contact-primary-button,
  .contact-page .contact-secondary-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 0 7px !important;
    border-radius: 7px !important;
    font-size: 6.8px !important;
    box-sizing: border-box !important;
  }

  .contact-page .contact-primary-button {
    background: #7047ee !important;
    color: #fff !important;
  }

  .contact-page .contact-secondary-button {
    border-color: #7155c9 !important;
    background: #0e1625 !important;
    color: #d8ceff !important;
  }

  .contact-page .contact-primary-button .icon,
  .contact-page .contact-secondary-button .icon {
    width: 9px !important;
    height: 9px !important;
  }

  /* FAQ — real existing FAQ loop */
  .contact-page .contact-faq {
    padding-top: 27px !important;
  }

  .contact-page .contact-faq-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .contact-page .contact-faq-item {
    width: 100% !important;
    border: 1px solid rgba(126,105,255,.18) !important;
    border-radius: 8px !important;
    background: #101827 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .contact-page .contact-faq-item button {
    width: 100% !important;
    min-height: 39px !important;
    padding: 0 11px !important;
    border: 0 !important;
    background: #101827 !important;
    color: #eef0f7 !important;
    font-size: 8px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
  }

  .contact-page .contact-faq-plus {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    background: transparent !important;
    color: #9d75ff !important;
    font-size: 15px !important;
  }

  .contact-page .contact-faq-answer {
    padding: 0 11px 10px !important;
  }

  .contact-page .contact-faq-answer p {
    margin: 0 !important;
    padding-top: 9px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    color: #b9c1d1 !important;
    font-size: 7.5px !important;
    line-height: 1.45 !important;
  }

  .contact-page .contact-floating-whatsapp {
    width: 46px !important;
    height: 46px !important;
    right: 14px !important;
    bottom: 82px !important;
  }

  .contact-page .contact-floating-whatsapp .icon {
    width: 23px !important;
    height: 23px !important;
  }

  /* force stable box sizing on all direct mobile sections */
  .contact-page .contact-hero,
  .contact-page .contact-method-card,
  .contact-page .store-location-card,
  .contact-page .contact-support-strip,
  .contact-page .contact-faq-item {
    box-sizing: border-box !important;
  }
}

/* LIGHT MODE — same real structure/data, only palette changes */
@media (max-width: 599px) {
  html[data-site-theme="light"] .contact-page .contact-main {
    background: #f5f7fb !important;
    color: #111827 !important;
  }

  html[data-site-theme="light"] .contact-page .contact-hero,
  html[data-site-theme="light"] .contact-page .contact-hero-inner,
  html[data-site-theme="light"] .contact-page .contact-method-card,
  html[data-site-theme="light"] .contact-page .store-location-card,
  html[data-site-theme="light"] .contact-page .contact-faq-item,
  html[data-site-theme="light"] .contact-page .contact-faq-item button {
    background: #fff !important;
    border-color: rgba(91,70,220,.16) !important;
  }

  html[data-site-theme="light"] .contact-page .contact-hero-copy h1,
  html[data-site-theme="light"] .contact-page .contact-section-heading h2,
  html[data-site-theme="light"] .contact-page .contact-method-card h3,
  html[data-site-theme="light"] .contact-page .store-panel-heading,
  html[data-site-theme="light"] .contact-page .store-hours strong,
  html[data-site-theme="light"] .contact-page .contact-support-copy h2,
  html[data-site-theme="light"] .contact-page .contact-faq-item button {
    color: #111827 !important;
  }

  html[data-site-theme="light"] .contact-page .contact-hero-copy > p:not(.contact-eyebrow),
  html[data-site-theme="light"] .contact-page .contact-hero-meta span,
  html[data-site-theme="light"] .contact-page .store-address,
  html[data-site-theme="light"] .contact-page .store-contact-list a,
  html[data-site-theme="light"] .contact-page .store-hours p,
  html[data-site-theme="light"] .contact-page .contact-faq-answer p {
    color: #5f6b7a !important;
  }

  html[data-site-theme="light"] .contact-page .contact-hero-visual::before {
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.2) 34%, rgba(255,255,255,0) 72%) !important;
  }

  html[data-site-theme="light"] .contact-page .contact-hero-badge {
    border-color: rgba(91,70,220,.16) !important;
    background: rgba(255,255,255,.88) !important;
  }

  html[data-site-theme="light"] .contact-page .contact-hero-badge strong {
    color: #111827 !important;
  }

  html[data-site-theme="light"] .contact-page .contact-hero-badge span {
    color: #5f6b7a !important;
  }

  html[data-site-theme="light"] .contact-page .contact-support-strip {
    border-color: rgba(91,70,220,.16) !important;
    background: linear-gradient(110deg,#fff 0%,#f8f8ff 58%,#f0ecff 100%) !important;
  }

  html[data-site-theme="light"] .contact-page .contact-support-copy > p:not(.contact-eyebrow) {
    color: #5f6b7a !important;
  }

  html[data-site-theme="light"] .contact-page .contact-secondary-button {
    background: #fff !important;
    color: #5b46dc !important;
  }

  html[data-site-theme="light"] .contact-page .contact-faq-answer p {
    border-top-color: rgba(17,24,39,.08) !important;
  }
}

@media (max-width: 375px) {
  .contact-page { --cm-gutter: 12px; }
  .contact-page .contact-hero {
    height: 228px !important;
    min-height: 228px !important;
  }
  .contact-page .contact-hero-inner {
    grid-template-columns: minmax(0, 59%) minmax(0, 41%) !important;
  }
  .contact-page .contact-hero-copy {
    padding-left: 15px !important;
    padding-right: 8px !important;
  }
  .contact-page .contact-hero-copy h1 {
    font-size: 23px !important;
  }
  .contact-page .contact-method-grid {
    gap: 5px !important;
  }
  .contact-page .contact-method-card {
    height: 86px !important;
    min-height: 86px !important;
  }
  .contact-page .store-location-info-grid {
    grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr) !important;
  }
  .contact-page .contact-support-strip {
    grid-template-columns: 44px minmax(0,1fr) 104px !important;
    gap: 8px !important;
  }
}

/* V3 visual correction — keep original PHP/data bindings; 390px only */
@media (max-width:599px){
  /* Hero: match reference proportions and stop lower meta from clipping */
  .contact-page .contact-hero{
    height:252px!important;
    min-height:252px!important;
  }
  .contact-page .contact-hero-inner{
    grid-template-columns:minmax(0,56%) minmax(0,44%)!important;
  }
  .contact-page .contact-hero-copy{
    padding:15px 9px 14px 16px!important;
    justify-content:flex-start!important;
  }
  .contact-page .contact-eyebrow{
    font-size:7.6px!important;
  }
  .contact-page .contact-hero-copy h1{
    max-width:158px!important;
    font-size:22px!important;
    line-height:1.01!important;
  }
  .contact-page .contact-hero-copy>p:not(.contact-eyebrow){
    margin-top:9px!important;
    max-width:160px!important;
    font-size:8.1px!important;
    line-height:1.45!important;
  }
  .contact-page .contact-hero-meta{
    margin-top:10px!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .contact-page .contact-hero-meta span{
    align-items:flex-start!important;
    font-size:6.7px!important;
    line-height:1.25!important;
  }
  .contact-page .contact-hero-meta .icon{
    width:11px!important;
    height:11px!important;
    flex-basis:11px!important;
  }
  .contact-page .contact-hero-visual img{
    object-position:58% center!important;
    filter:brightness(.88) saturate(.98)!important;
  }
  .contact-page .contact-hero-badge{
    left:7px!important;
    right:7px!important;
    bottom:8px!important;
    min-height:42px!important;
    padding:7px 8px!important;
  }
  .contact-page .contact-hero-badge strong{
    font-size:7.7px!important;
  }
  .contact-page .contact-hero-badge span{
    font-size:6.4px!important;
  }

  /* Connect With Us: one clean label per card; whole real link remains clickable */
  .contact-page .contact-methods{
    padding-top:24px!important;
  }
  .contact-page .contact-section-heading{
    margin-bottom:10px!important;
  }
  .contact-page .contact-section-heading h2{
    font-size:17px!important;
  }
  .contact-page .contact-method-grid{
    gap:6px!important;
  }
  .contact-page .contact-method-card{
    position:relative!important;
    height:82px!important;
    min-height:82px!important;
    padding:9px 3px 8px!important;
    gap:5px!important;
    overflow:visible!important;
  }
  .contact-page .contact-method-icon{
    width:32px!important;
    height:32px!important;
    flex-basis:32px!important;
  }
  .contact-page .contact-method-icon .icon{
    width:17px!important;
    height:17px!important;
  }
  .contact-page .contact-method-card h3{
    display:block!important;
    width:100%!important;
    padding:0 2px!important;
    color:#fff!important;
    font-size:6.9px!important;
    line-height:1.15!important;
    font-weight:800!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    text-align:center!important;
  }
  .contact-page .contact-method-card a{
    position:absolute!important;
    inset:0!important;
    z-index:4!important;
    display:block!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    border-radius:10px!important;
    font-size:0!important;
    color:transparent!important;
    overflow:hidden!important;
    text-indent:-9999px!important;
  }
  .contact-page .contact-method-card a:focus-visible{
    outline:2px solid #9b7cff!important;
    outline-offset:2px!important;
  }

  /* Store section: smaller heading + one real branch card per swipe */
  .contact-page .store-location-section{
    padding-top:26px!important;
  }
  .contact-page .store-location-heading{
    margin-bottom:11px!important;
  }
  .contact-page .store-location-heading .contact-eyebrow{
    font-size:7px!important;
  }
  .contact-page .store-location-heading .contact-eyebrow .icon{
    width:10px!important;
    height:10px!important;
  }
  .contact-page .store-location-heading h2,
  .contact-page .store-location-heading .ui-standard-title{
    font-size:20px!important;
    line-height:1.08!important;
  }
  .contact-page .store-location-list{
    display:flex!important;
    grid-template-columns:none!important;
    gap:10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scrollbar-width:none!important;
    padding:0 1px 4px!important;
  }
  .contact-page .store-location-list::-webkit-scrollbar{display:none!important}
  .contact-page .store-location-card,
  .contact-page .store-location-card.store-location-card-alt{
    flex:0 0 calc(100% - 18px)!important;
    scroll-snap-align:start!important;
    padding:8px!important;
  }
  .contact-page .store-location-photo{
    height:94px!important;
  }
  .contact-page .store-location-photo-overlay{
    padding:0 10px 8px!important;
  }
  .contact-page .store-location-tag{
    margin-bottom:2px!important;
    padding:3px 6px!important;
    font-size:6px!important;
  }
  .contact-page .store-location-title-block h3{
    font-size:11.5px!important;
  }
  .contact-page .store-location-name{
    margin-top:1px!important;
    font-size:7px!important;
  }
  .contact-page .store-location-body{
    padding:8px 1px 1px!important;
  }
  .contact-page .store-location-info-grid{
    grid-template-columns:minmax(0,1.2fr) minmax(105px,.8fr)!important;
    gap:8px!important;
  }
  .contact-page .store-panel-heading,
  .contact-page .store-hours strong{
    margin-bottom:4px!important;
    font-size:6.8px!important;
  }
  .contact-page .store-address{
    margin-bottom:6px!important;
    font-size:6.7px!important;
    line-height:1.35!important;
  }
  .contact-page .store-contact-list{
    gap:3px!important;
  }
  .contact-page .store-contact-list a{
    font-size:6.4px!important;
    line-height:1.2!important;
  }
  .contact-page .store-location-actions{
    margin-top:7px!important;
    gap:5px!important;
  }
  .contact-page .store-direction-button,
  .contact-page .store-whatsapp-button{
    min-height:28px!important;
    padding:0 4px!important;
    font-size:6.4px!important;
  }
  .contact-page .store-location-right-column{
    grid-template-rows:auto 76px!important;
    gap:6px!important;
  }
  .contact-page .store-hours p{
    font-size:6.3px!important;
    line-height:1.3!important;
  }
  .contact-page .store-map-wrap{
    height:76px!important;
    min-height:76px!important;
  }

  /* keep following sections in same rhythm */
  .contact-page .contact-support-strip{
    margin-top:14px!important;
  }
  .contact-page .contact-faq{
    padding-top:24px!important;
  }
}

@media (max-width:375px){
  .contact-page .contact-hero{
    height:246px!important;
    min-height:246px!important;
  }
  .contact-page .contact-hero-copy h1{
    font-size:21px!important;
  }
  .contact-page .contact-method-card{
    height:79px!important;
    min-height:79px!important;
  }
  .contact-page .store-location-card,
  .contact-page .store-location-card.store-location-card-alt{
    flex-basis:calc(100% - 14px)!important;
  }
}

/* FINAL — Store Locations 390px. Consolidated; replaces old V4/V5/V6 override stack. */
@media (max-width:599px){
  /* Tighten Connect With Us -> Visit Us spacing */
  .contact-page .contact-methods{
    padding-bottom:0!important;
    margin-bottom:0!important;
  }
  .contact-page .store-location-section{
    padding-top:10px!important;
    margin-top:0!important;
  }
  .contact-page .store-location-heading{
    margin-top:0!important;
    margin-bottom:10px!important;
  }

  /* Carousel: show a small peek of the next real branch card */
  .contact-page .store-location-list{
    gap:10px!important;
    padding:0 10px 5px 0!important;
    scroll-padding-left:0!important;
  }
  .contact-page .store-location-card,
  .contact-page .store-location-card.store-location-card-alt{
    flex:0 0 calc(100% - 30px)!important;
    width:calc(100% - 30px)!important;
    max-width:calc(100% - 30px)!important;
    min-width:calc(100% - 30px)!important;
    box-sizing:border-box!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
    padding:8px!important;
  }

  .contact-page .store-location-photo{
    height:98px!important;
    border-radius:10px!important;
  }
  .contact-page .store-location-body{
    padding:9px 2px 2px!important;
  }
  .contact-page .store-location-title-block h3{
    font-size:12.5px!important;
    line-height:1.15!important;
  }
  .contact-page .store-location-name{
    font-size:7.7px!important;
    line-height:1.2!important;
  }
  .contact-page .store-location-tag{
    font-size:6.7px!important;
  }

  .contact-page .store-location-info-grid{
    grid-template-columns:minmax(0,1fr) 116px!important;
    gap:9px!important;
    align-items:stretch!important;
  }
  .contact-page .store-contact-panel,
  .contact-page .store-location-right-column{
    min-width:0!important;
  }
  .contact-page .store-panel-heading,
  .contact-page .store-hours strong{
    font-size:7.6px!important;
    line-height:1.15!important;
  }
  .contact-page .store-address{
    padding-left:16px!important;
    margin-bottom:6px!important;
    font-size:7.35px!important;
    line-height:1.42!important;
  }
  .contact-page .store-contact-list{
    gap:4px!important;
  }
  .contact-page .store-contact-list a{
    min-width:0!important;
    gap:5px!important;
    font-size:7.15px!important;
    line-height:1.25!important;
  }
  .contact-page .store-contact-list a span{
    min-width:0!important;
    overflow-wrap:anywhere!important;
  }

  /* Both CTAs intentionally share the same compact outline treatment. */
  .contact-page .store-location-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    margin-top:7px!important;
    width:100%!important;
  }
  .contact-page .store-direction-button,
  .contact-page .store-whatsapp-button,
  .contact-page .store-whatsapp-button.lasto-whatsapp-cta{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    width:100%!important;
    min-width:0!important;
    min-height:27px!important;
    height:27px!important;
    padding:0 6px!important;
    margin:0!important;
    border:1px solid #725de0!important;
    border-radius:7px!important;
    background:var(--theme-bg-soft,#111827)!important;
    color:#b7a8ff!important;
    box-shadow:none!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    font-size:7.3px!important;
    font-weight:700!important;
    line-height:1!important;
  }
  .contact-page .store-direction-button:hover,
  .contact-page .store-whatsapp-button:hover,
  .contact-page .store-whatsapp-button.lasto-whatsapp-cta:hover,
  .contact-page .store-direction-button:focus-visible,
  .contact-page .store-whatsapp-button:focus-visible,
  .contact-page .store-whatsapp-button.lasto-whatsapp-cta:focus-visible{
    border-color:#8c74ff!important;
    background:#2a2350!important;
    color:#d7ceff!important;
    box-shadow:none!important;
  }
  .contact-page .store-direction-button .icon,
  .contact-page .store-whatsapp-button .icon,
  .contact-page .store-whatsapp-button.lasto-whatsapp-cta .icon{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    width:11px!important;
    height:11px!important;
    min-width:11px!important;
    flex:0 0 11px!important;
    margin:0!important;
  }
  .contact-page .store-direction-button .icon{color:#8d70ff!important}
  .contact-page .store-whatsapp-button .icon,
  .contact-page .store-whatsapp-button.lasto-whatsapp-cta .icon{color:#18c964!important}

  .contact-page .store-location-right-column{
    grid-template-rows:auto 78px!important;
    gap:6px!important;
  }
  .contact-page .store-hours p{
    font-size:7px!important;
    line-height:1.35!important;
    white-space:normal!important;
  }
  .contact-page .store-map-wrap{
    width:100%!important;
    height:78px!important;
    min-height:78px!important;
    border-radius:9px!important;
    overflow:hidden!important;
  }
  .contact-page .store-map-wrap iframe{
    width:100%!important;
    height:100%!important;
  }
  .contact-page .map-pin{
    transform:translate(-50%,-50%) scale(.82)!important;
  }

  /* Light theme uses the same shape/size with a light surface. */
  html[data-site-theme="light"] .contact-page .store-direction-button,
  html[data-site-theme="light"] .contact-page .store-whatsapp-button,
  html[data-site-theme="light"] .contact-page .store-whatsapp-button.lasto-whatsapp-cta{
    background:#fff!important;
    border-color:#7b5cff!important;
    color:#5b46dc!important;
  }
  html[data-site-theme="light"] .contact-page .store-direction-button:hover,
  html[data-site-theme="light"] .contact-page .store-whatsapp-button:hover,
  html[data-site-theme="light"] .contact-page .store-whatsapp-button.lasto-whatsapp-cta:hover{
    background:#f4f1ff!important;
    border-color:#6c4ef0!important;
    color:#4f38cf!important;
  }
}

@media (max-width:375px){
  .contact-page .store-location-section{
    padding-top:8px!important;
  }
  .contact-page .store-location-card,
  .contact-page .store-location-card.store-location-card-alt{
    flex-basis:calc(100% - 25px)!important;
    width:calc(100% - 25px)!important;
    max-width:calc(100% - 25px)!important;
    min-width:calc(100% - 25px)!important;
  }
  .contact-page .store-location-info-grid{
    grid-template-columns:minmax(0,1fr) 108px!important;
    gap:8px!important;
  }
  .contact-page .store-direction-button,
  .contact-page .store-whatsapp-button,
  .contact-page .store-whatsapp-button.lasto-whatsapp-cta{
    font-size:7px!important;
    padding:0 5px!important;
  }
}

/* ================================================================
   CONTACT MOBILE V8 — ALL PRODUCTS HERO + SEAMLESS PAGE SECTIONS
   Scope: phone only. Desktop/tablet remain locked.
   ================================================================ */
@media (max-width:599px){
  /* Remove the large page-level footer gap. Global bottom-nav safe space remains. */
  .contact-page .contact-main{
    padding-bottom:12px!important;
  }

  /* Match the final All Products mobile hero: short and edge-to-edge. */
  .contact-page .contact-hero,
  html[data-site-theme="light"] .contact-page .contact-hero,
  html[data-site-theme="dark"] .contact-page .contact-hero{
    width:100%!important;
    max-width:none!important;
    height:176px!important;
    min-height:176px!important;
    margin:10px 0 0!important;
    border-left:0!important;
    border-right:0!important;
    border-radius:0!important;
    background:#080c18!important;
  }
  .contact-page .contact-hero-inner,
  html[data-site-theme="light"] .contact-page .contact-hero-inner,
  html[data-site-theme="dark"] .contact-page .contact-hero-inner{
    height:176px!important;
    min-height:176px!important;
    grid-template-columns:minmax(0,58%) minmax(0,42%)!important;
    background:linear-gradient(110deg,#080d19 0%,#0b1222 57%,#17133a 100%)!important;
  }
  .contact-page .contact-hero-copy{
    padding:12px 7px 10px 14px!important;
    justify-content:flex-start!important;
  }
  .contact-page .contact-hero-copy .contact-eyebrow{
    margin-bottom:4px!important;
    color:#b394ff!important;
    font-size:7.2px!important;
  }
  .contact-page .contact-hero-copy h1,
  html[data-site-theme="light"] .contact-page .contact-hero-copy h1{
    max-width:155px!important;
    color:#fff!important;
    font-size:22px!important;
    line-height:1.01!important;
  }
  .contact-page .contact-hero-copy>p:not(.contact-eyebrow),
  html[data-site-theme="light"] .contact-page .contact-hero-copy>p:not(.contact-eyebrow){
    max-width:156px!important;
    margin-top:6px!important;
    color:#e0e4ed!important;
    font-size:7.4px!important;
    line-height:1.38!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:3!important;
    overflow:hidden!important;
  }
  .contact-page .contact-hero-meta{
    margin-top:7px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:3px!important;
  }
  .contact-page .contact-hero-meta span,
  html[data-site-theme="light"] .contact-page .contact-hero-meta span{
    color:#eef0f8!important;
    font-size:6.1px!important;
    line-height:1.22!important;
    white-space:nowrap!important;
  }
  .contact-page .contact-hero-meta .icon{
    width:9px!important;
    height:9px!important;
    flex:0 0 9px!important;
  }
  .contact-page .contact-hero-visual::before,
  html[data-site-theme="light"] .contact-page .contact-hero-visual::before,
  html[data-site-theme="dark"] .contact-page .contact-hero-visual::before{
    background:linear-gradient(90deg,#0b1222 0%,rgba(11,18,34,.33) 32%,rgba(11,18,34,.02) 74%)!important;
  }
  .contact-page .contact-hero-visual img{
    object-position:58% center!important;
    filter:brightness(.79) saturate(.96)!important;
  }
  .contact-page .contact-hero-badge,
  html[data-site-theme="light"] .contact-page .contact-hero-badge{
    left:6px!important;
    right:6px!important;
    bottom:6px!important;
    min-height:36px!important;
    padding:6px 7px!important;
    grid-template-columns:18px minmax(0,1fr)!important;
    gap:5px!important;
    border-color:rgba(255,255,255,.14)!important;
    background:rgba(8,13,25,.80)!important;
  }
  .contact-page .contact-hero-badge>.icon{width:16px!important;height:16px!important}
  .contact-page .contact-hero-badge strong,
  html[data-site-theme="light"] .contact-page .contact-hero-badge strong{
    color:#fff!important;
    font-size:6.9px!important;
  }
  .contact-page .contact-hero-badge span,
  html[data-site-theme="light"] .contact-page .contact-hero-badge span{
    color:#b7c0d1!important;
    font-size:5.6px!important;
  }

  /* Section wrappers merge into the page; individual cards stay intact. */
  .contact-page .contact-methods,
  .contact-page .store-location-section,
  .contact-page .contact-faq,
  html[data-site-theme="light"] .contact-page .contact-methods,
  html[data-site-theme="light"] .contact-page .store-location-section,
  html[data-site-theme="light"] .contact-page .contact-faq,
  html[data-site-theme="dark"] .contact-page .contact-methods,
  html[data-site-theme="dark"] .contact-page .store-location-section,
  html[data-site-theme="dark"] .contact-page .contact-faq{
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  /* Keep the final FAQ close to the global footer. */
  .contact-page .contact-faq{
    margin-bottom:0!important;
    padding-bottom:4px!important;
  }
  .contact-page .contact-faq-grid{margin-bottom:0!important}
  .contact-page .footer{margin-top:0!important}
}

@media (max-width:375px){
  .contact-page .contact-hero,
  .contact-page .contact-hero-inner{height:168px!important;min-height:168px!important}
  .contact-page .contact-hero-copy h1{font-size:20px!important}
  .contact-page .contact-hero-copy>p:not(.contact-eyebrow){font-size:7px!important}
  .contact-page .contact-hero-badge{min-height:34px!important}
}