/* ============================================================
   JOURDANTON PHARMACY — MOBILE-FIRST PREMIUM SYSTEM
   2026-09-24
   Goals:
   - keep pharmacy photos full and natural
   - reduce overlay clutter
   - make phone experience the strongest version
   - preserve desktop layout above 900px
   ============================================================ */

/* ---------- Global image quality ---------- */
img{
  image-rendering:auto;
  -ms-interpolation-mode:bicubic;
}

picture img{
  display:block;
}

/* Do not force a global crop/aspect ratio onto local photography. */
.hx-page .hx-story-photo img,
.hx-page .hx-location-image img,
.hx-page .hx-feature img,
.page-hero-media img,
.rounded-media img,
.gallery-grid img{
  filter:saturate(1.015) contrast(1.018) brightness(1.01);
}

/* Make the large delivery/compounding images clearer without changing size. */
.hx-page .hx-feature-overlay{
  background:linear-gradient(
    90deg,
    rgba(5,31,52,.70) 0%,
    rgba(5,31,52,.43) 48%,
    rgba(5,31,52,.08) 100%
  );
}

/* Team photo: keep the full original wide composition on desktop. */
@media (min-width:901px){
  .hx-page .hx-story-grid{
    grid-template-columns:1fr 1.08fr;
    align-items:stretch;
  }

  .hx-page .hx-story-pharmacist{
    min-height:560px;
  }

  .hx-page .hx-story-copy{
    min-height:560px;
  }

  .hx-page .hx-story-team{
    grid-column:1 / -1;
    min-height:0;
    aspect-ratio:1600 / 750;
  }

  .hx-page .hx-story-team picture,
  .hx-page .hx-story-team img{
    width:100%;
    height:100%;
  }

  .hx-page .hx-story-team img{
    object-fit:contain;
    object-position:center;
    background:#f2f5f7;
  }

  /* Road sign should be readable in full. */
  .hx-page .hx-location-image{
    align-self:center;
    min-height:0;
    aspect-ratio:4 / 3;
    padding:10px;
    background:#eef3f6;
  }

  .hx-page .hx-location-image picture,
  .hx-page .hx-location-image img{
    width:100%;
    height:100%;
  }

  .hx-page .hx-location-image img{
    object-fit:contain;
    object-position:center;
    border-radius:16px;
  }
}

/* ---------- Mobile + small tablet ---------- */
@media (max-width:900px){
  :root{
    --mobile-gutter:16px;
  }

  html{
    scroll-padding-top:68px;
  }

  body{
    overflow-x:hidden;
    padding-bottom:72px;
  }

  .container,
  .hx-page .container{
    width:calc(100% - (var(--mobile-gutter) * 2)) !important;
    max-width:none !important;
  }

  /* Utility bar: all requested info stays visible, but in two compact rows. */
  .utility-bar,
  .hx-utility{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .utility-inner,
  .hx-utility .utility-inner{
    min-height:0 !important;
    padding:6px 0 7px !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-areas:
      "phone hours"
      "address address" !important;
    gap:4px 8px !important;
    align-items:center !important;
    font-size:.64rem !important;
    line-height:1.25 !important;
  }

  .utility-inner > a:first-child{
    grid-area:phone;
    justify-self:start !important;
  }

  .utility-hours{
    grid-area:hours;
    justify-self:end !important;
  }

  .utility-address{
    grid-area:address;
    justify-self:center !important;
  }

  .utility-inner > a,
  .utility-hours,
  .utility-address{
    display:flex !important;
    width:auto !important;
    max-width:100% !important;
    white-space:normal !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
  }

  .utility-inner .icon-sm{
    width:12px !important;
    height:12px !important;
    flex:0 0 12px !important;
  }

  /* Header */
  .site-header,
  .hx-header{
    position:sticky !important;
    top:0 !important;
    z-index:120 !important;
    padding:0 !important;
    border-bottom:1px solid var(--line) !important;
    background:rgba(255,255,255,.985) !important;
    box-shadow:0 6px 20px rgba(7,37,61,.06) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
  }

  .header-inner,
  .hx-header .header-inner{
    min-height:60px !important;
    padding:7px 0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .desktop-nav,
  .header-actions > .btn{
    display:none !important;
  }

  .brand{
    min-width:0 !important;
    max-width:calc(100% - 54px) !important;
    gap:8px !important;
  }

  .brand-mark{
    width:36px !important;
    height:36px !important;
    flex:0 0 36px !important;
    border-radius:10px !important;
  }

  .brand-text{
    font-size:.72rem !important;
    line-height:.92 !important;
  }

  .brand-text strong{
    white-space:nowrap !important;
  }

  .brand-text strong:last-child{
    font-size:.80rem !important;
  }

  .menu-toggle{
    display:grid !important;
    width:42px !important;
    height:42px !important;
    flex:0 0 42px !important;
    margin-left:auto !important;
    padding:8px !important;
    border:1px solid var(--line) !important;
    border-radius:12px !important;
    background:#fff !important;
    box-shadow:0 4px 14px rgba(7,37,61,.07) !important;
  }

  .mobile-menu{
    padding:8px var(--mobile-gutter) 18px !important;
    background:#fff !important;
    border-top:1px solid var(--line) !important;
    box-shadow:0 18px 36px rgba(7,37,61,.12) !important;
  }

  .mobile-nav .nav-link{
    min-height:48px !important;
    display:flex !important;
    align-items:center !important;
    padding:9px 2px !important;
    font-size:.95rem !important;
  }

  /* ---------- HOME HERO: photo first, clean and uncluttered ---------- */
  .hx-page .hx-hero-wrap{
    padding:10px 0 32px !important;
  }

  .hx-page .hx-hero{
    min-height:0 !important;
    overflow:visible !important;
    display:flex !important;
    flex-direction:column !important;
    border-radius:22px !important;
    background:#fff !important;
    box-shadow:0 14px 36px rgba(7,37,61,.10) !important;
  }

  .hx-page .hx-hero-media{
    position:relative !important;
    inset:auto !important;
    order:0 !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:4 / 3 !important;
    overflow:hidden !important;
    border-radius:22px 22px 0 0 !important;
    background:#edf2f5 !important;
  }

  .hx-page .hx-hero-media img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:64% center !important;
    transform:none !important;
    animation:none !important;
    filter:none !important;
  }

  .hx-page .hx-hero-wash{
    display:none !important;
  }

  .hx-page .hx-hero-chips,
  .hx-page .hx-handnote,
  .hx-page .hx-service-glass,
  .hx-page .hx-service-menu{
    display:none !important;
  }

  .hx-page .hx-hero-copy{
    position:relative !important;
    order:1 !important;
    width:100% !important;
    max-width:none !important;
    padding:22px 17px 24px !important;
    background:#fff !important;
    border-radius:0 0 22px 22px !important;
  }

  .hx-page .hx-kicker{
    margin-bottom:8px !important;
    font-size:.66rem !important;
    letter-spacing:.13em !important;
  }

  .hx-page .hx-hero-copy h1{
    font-size:clamp(2.55rem,12.6vw,3.45rem) !important;
    line-height:.91 !important;
    letter-spacing:-.052em !important;
  }

  .hx-page .hx-hero-copy > p:not(.hx-kicker){
    margin-top:14px !important;
    font-size:.91rem !important;
    line-height:1.55 !important;
  }

  .hx-page .hx-hero-buttons{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin-top:18px !important;
  }

  .hx-page .hx-btn{
    min-height:48px !important;
    padding:11px 10px !important;
    font-size:.74rem !important;
  }

  /* App-style quick actions */
  .hx-page .hx-action-dock{
    width:calc(100% + var(--mobile-gutter)) !important;
    margin:13px calc(var(--mobile-gutter) * -1) 0 0 !important;
    display:grid !important;
    grid-template-columns:none !important;
    grid-auto-flow:column !important;
    grid-auto-columns:min(76vw,250px) !important;
    gap:10px !important;
    overflow-x:auto !important;
    overscroll-behavior-inline:contain !important;
    scroll-snap-type:x mandatory !important;
    scrollbar-width:none !important;
    padding:2px var(--mobile-gutter) 12px 0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
  }

  .hx-page .hx-action-dock::-webkit-scrollbar{
    display:none !important;
  }

  .hx-page .hx-action-dock a{
    min-height:86px !important;
    padding:13px !important;
    grid-template-columns:42px 1fr 26px !important;
    border:1px solid var(--hx-line) !important;
    border-radius:17px !important;
    background:#fff !important;
    box-shadow:0 9px 24px rgba(7,37,61,.075) !important;
    scroll-snap-align:start !important;
  }

  /* Sections / typography */
  .hx-page .hx-section,
  .section{
    padding:48px 0 !important;
  }

  .hx-page .hx-section-head,
  .hx-page .hx-heading,
  .section-heading,
  .section-heading.split{
    grid-template-columns:1fr !important;
    gap:14px !important;
    margin-bottom:22px !important;
    text-align:left !important;
  }

  .hx-page .hx-section-head h2,
  .hx-page .hx-wellness-copy h2,
  .hx-page .hx-story-copy h2,
  .hx-page .hx-location-copy h2,
  .hx-page .hx-feature-copy h2,
  .section-heading h2{
    font-size:clamp(2.35rem,10.7vw,3.15rem) !important;
    line-height:.95 !important;
  }

  /* Services: compact two-column cards */
  .hx-page .hx-bento{
    grid-template-columns:1fr 1fr !important;
    grid-auto-rows:auto !important;
    gap:9px !important;
  }

  .hx-page .hx-bento-feature{
    grid-column:1 / -1 !important;
    grid-row:auto !important;
    min-height:0 !important;
    aspect-ratio:4 / 3 !important;
  }

  .hx-page .hx-bento-card{
    min-height:142px !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    padding:13px !important;
  }

  /* ---------- Wellness: mobile becomes swipe-native, not overlapping 3D ---------- */
  .hx-page .hx-wellness-layout{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }

  .hx-page .hx-coverflow-wrap{
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 calc(var(--mobile-gutter) * -1) 0 0 !important;
    display:block !important;
    overflow:visible !important;
  }

  .hx-page .hx-coverflow{
    position:relative !important;
    width:auto !important;
    height:auto !important;
    display:grid !important;
    grid-template-columns:none !important;
    grid-auto-flow:column !important;
    grid-auto-columns:min(78vw,270px) !important;
    gap:12px !important;
    overflow-x:auto !important;
    overscroll-behavior-inline:contain !important;
    scroll-snap-type:x mandatory !important;
    scrollbar-width:none !important;
    perspective:none !important;
    transform:none !important;
    padding:8px var(--mobile-gutter) 15px 0 !important;
  }

  .hx-page .hx-coverflow::-webkit-scrollbar{
    display:none !important;
  }

  .hx-page .hx-product{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    width:auto !important;
    height:304px !important;
    min-height:304px !important;
    opacity:1 !important;
    filter:none !important;
    transform:none !important;
    pointer-events:auto !important;
    scroll-snap-align:start !important;
    border-radius:20px !important;
  }

  .hx-page .hx-product-art.otc-photo-collage{
    height:218px !important;
    max-height:218px !important;
  }

  .hx-page .hx-coverflow-arrow,
  .hx-page .hx-coverflow-dots{
    display:none !important;
  }

  .hx-page .hx-coverflow-wrap::after{
    content:"Swipe to browse →";
    display:block;
    margin:2px 0 0;
    color:var(--hx-muted);
    font-size:.72rem;
    font-weight:750;
    letter-spacing:.01em;
  }

  /* ---------- Story section: show photos at their real proportions ---------- */
  .hx-page .hx-story-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .hx-page .hx-story-photo{
    min-height:0 !important;
    height:auto !important;
    overflow:hidden !important;
    border-radius:20px !important;
    background:#eef2f5 !important;
  }

  .hx-page .hx-story-pharmacist{
    aspect-ratio:3 / 4 !important;
  }

  .hx-page .hx-story-team{
    aspect-ratio:1600 / 750 !important;
  }

  .hx-page .hx-story-photo picture,
  .hx-page .hx-story-photo img{
    width:100% !important;
    height:100% !important;
  }

  .hx-page .hx-story-pharmacist img{
    object-fit:cover !important;
    object-position:center 30% !important;
  }

  .hx-page .hx-story-team img{
    object-fit:contain !important;
    object-position:center !important;
    background:#f4f6f7 !important;
  }

  /* Remove overlay badges on photos on phone to keep images clean. */
  .hx-page .hx-story-chip{
    display:none !important;
  }

  .hx-page .hx-story-copy{
    padding:8px 2px 22px !important;
  }

  .hx-page .hx-story-copy ul{
    grid-template-columns:1fr 1fr !important;
    gap:8px 10px !important;
  }

  /* ---------- Feature cards: image first, copy below — no text covering photo ---------- */
  .hx-page .hx-duo{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .hx-page .hx-feature{
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    border-radius:20px !important;
    background:var(--hx-navy) !important;
  }

  .hx-page .hx-feature picture{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:4 / 3 !important;
    background:#eef2f5 !important;
  }

  .hx-page .hx-feature picture img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    transform:none !important;
    filter:none !important;
  }

  .hx-page .hx-feature-overlay{
    display:none !important;
  }

  .hx-page .hx-feature-badge{
    top:14px !important;
    right:14px !important;
  }

  .hx-page .hx-feature-copy{
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    padding:24px 19px 25px !important;
    background:var(--hx-navy) !important;
  }

  .hx-page .hx-feature-copy h2{
    font-size:clamp(2.45rem,11vw,3.2rem) !important;
  }

  /* ---------- Location: full sign, then details, then map ---------- */
  .hx-page .hx-location-shell{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
    overflow:hidden !important;
    border-radius:20px !important;
  }

  .hx-page .hx-location-image{
    order:0 !important;
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:4 / 3 !important;
    padding:10px !important;
    display:grid !important;
    place-items:center !important;
    background:#edf2f5 !important;
  }

  .hx-page .hx-location-image picture,
  .hx-page .hx-location-image img{
    width:100% !important;
    height:100% !important;
  }

  .hx-page .hx-location-image img{
    object-fit:contain !important;
    object-position:center !important;
    border-radius:15px !important;
  }

  .hx-page .hx-location-copy{
    order:1 !important;
    padding:24px 18px !important;
  }

  .hx-page .hx-map{
    order:2 !important;
    min-height:280px !important;
  }

  .hx-page .hx-map iframe{
    min-height:280px !important;
  }

  /* ---------- INNER PAGES: natural image presentation ---------- */
  .page-hero{
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    padding:0 !important;
    background:#fff !important;
  }

  .page-hero-media{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:4 / 3 !important;
    overflow:hidden !important;
    background:#eef2f5 !important;
  }

  .page-hero-media img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }

  .page-hero-overlay{
    display:none !important;
  }

  .page-hero-content{
    position:relative !important;
    padding:28px 0 30px !important;
    background:#fff !important;
  }

  .page-hero h1{
    font-size:clamp(2.2rem,10.5vw,2.9rem) !important;
    line-height:1.02 !important;
  }

  .rounded-media{
    min-height:0 !important;
    height:auto !important;
    overflow:hidden !important;
    border-radius:18px !important;
    background:#eef2f5 !important;
  }

  .rounded-media img{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
  }

  .gallery-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .gallery-grid picture{
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
  }

  .gallery-grid img{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
  }

  /* Contact / forms */
  .contact-grid,
  .two-col,
  .service-detail-grid,
  .value-grid,
  .form-row{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .contact-form-wrap,
  .safe-card,
  .info-panel{
    padding:21px 17px !important;
  }

  /* Footer */
  .footer-grid{
    grid-template-columns:1fr 1fr !important;
    gap:26px 18px !important;
  }

  .footer-brand{
    grid-column:1 / -1 !important;
  }

  .footer-grid > div:last-child{
    grid-column:1 / -1 !important;
  }

  .footer-bottom{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
  }

  .site-footer{
    padding-bottom:86px !important;
  }

  /* Fixed mobile bar */
  .mobile-action-bar{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:150 !important;
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    padding-bottom:max(env(safe-area-inset-bottom),4px) !important;
    border-top:1px solid var(--line) !important;
    background:rgba(255,255,255,.97) !important;
    box-shadow:0 -7px 24px rgba(7,37,61,.11) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
  }

  .mobile-action-bar a{
    min-height:60px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    font-size:.68rem !important;
    font-weight:900 !important;
  }

  .mobile-action-bar a:nth-child(2){
    background:var(--red) !important;
    color:#fff !important;
  }
}

/* ---------- Small phones ---------- */
@media (max-width:430px){
  :root{
    --mobile-gutter:14px;
  }

  .utility-inner,
  .hx-utility .utility-inner{
    font-size:.59rem !important;
    gap:3px 6px !important;
  }

  .hx-page .hx-hero-buttons{
    grid-template-columns:1fr !important;
  }

  .hx-page .hx-bento{
    gap:8px !important;
  }

  .hx-page .hx-bento-card{
    min-height:132px !important;
    padding:12px !important;
  }

  .hx-page .hx-coverflow{
    grid-auto-columns:min(82vw,255px) !important;
  }

  .hx-page .hx-product{
    height:292px !important;
    min-height:292px !important;
  }

  .hx-page .hx-product-art.otc-photo-collage{
    height:207px !important;
    max-height:207px !important;
  }

  .hx-page .hx-story-copy ul{
    grid-template-columns:1fr !important;
  }

  .footer-grid{
    grid-template-columns:1fr !important;
  }

  .footer-brand,
  .footer-grid > div:last-child{
    grid-column:auto !important;
  }
}

/* Very narrow devices */
@media (max-width:360px){
  .utility-inner,
  .hx-utility .utility-inner{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "phone"
      "hours"
      "address" !important;
    justify-items:center !important;
  }

  .utility-inner > a:first-child,
  .utility-hours,
  .utility-address{
    justify-self:center !important;
  }

  .hx-page .hx-bento{
    grid-template-columns:1fr !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .hx-page .hx-product,
  .hx-page .hx-action-dock a{
    transition:none !important;
  }
}


/* ============================================================
   MOBILE IMAGE-USAGE CORRECTION
   - no repeated interior photo
   - entrance photo is a natural portrait
   - roadside sign uses a full portrait crop with the whole board intact
   ============================================================ */
@media (max-width:900px){
  .hx-page .hx-story-entrance{
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:3 / 4 !important;
    overflow:hidden !important;
    border-radius:20px !important;
    background:#edf2f5 !important;
  }

  .hx-page .hx-story-entrance picture,
  .hx-page .hx-story-entrance img{
    width:100% !important;
    height:100% !important;
  }

  .hx-page .hx-story-entrance img{
    object-fit:cover !important;
    object-position:center 36% !important;
  }

  .hx-page .hx-location-image{
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:500 / 848 !important;
    padding:0 !important;
    background:#edf2f5 !important;
    overflow:hidden !important;
  }

  .hx-page .hx-location-image picture,
  .hx-page .hx-location-image img{
    width:100% !important;
    height:100% !important;
  }

  .hx-page .hx-location-image img{
    object-fit:cover !important;
    object-position:center !important;
    border-radius:0 !important;
  }
}


/* ============================================================
   ENHANCED PHOTOS — MOBILE PRESENTATION
   ============================================================ */
@media (max-width:900px){
  /* Clean storefront portrait should read like a premium mobile photo card. */
  .hx-page .hx-story-entrance{
    aspect-ratio:1122 / 1402 !important;
  }

  .hx-page .hx-story-entrance img{
    object-fit:cover !important;
    object-position:center 42% !important;
  }

  /* Roadside sign should show the full clean board. */
  .hx-page .hx-location-image{
    aspect-ratio:1122 / 1402 !important;
  }

  .hx-page .hx-location-image img{
    object-fit:cover !important;
    object-position:center !important;
  }

  /* Inner page enhanced storefront/interior hero images keep a useful focal area. */
  .page-hero-media img[src*="enhanced-storefront"],
  .page-hero-media img[src*="enhanced-interior"]{
    object-position:center 38% !important;
  }
}


/* ============================================================
   MOBILE RED BANNER ALIGNMENT — PHONE / HOURS / ADDRESS
   ============================================================ */
@media (max-width:900px){
  .hx-utility .utility-inner,
  .utility-bar .utility-inner{
    width:min(100% - 28px, 390px) !important;
    min-height:0 !important;
    margin:0 auto !important;
    padding:7px 0 8px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-areas:
      "phone"
      "hours"
      "address" !important;
    gap:4px !important;
    align-items:center !important;
    justify-items:stretch !important;
    font-size:.66rem !important;
    line-height:1.22 !important;
  }

  .hx-utility .utility-inner > a:first-child,
  .utility-bar .utility-inner > a:first-child{
    grid-area:phone !important;
  }

  .hx-utility .utility-hours,
  .utility-bar .utility-hours{
    grid-area:hours !important;
  }

  .hx-utility .utility-address,
  .utility-bar .utility-address{
    grid-area:address !important;
  }

  .hx-utility .utility-inner > a,
  .hx-utility .utility-hours,
  .utility-bar .utility-inner > a,
  .utility-bar .utility-hours{
    width:100% !important;
    display:grid !important;
    grid-template-columns:16px minmax(0,1fr) !important;
    align-items:center !important;
    justify-content:start !important;
    gap:7px !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
    white-space:normal !important;
  }

  .hx-utility .utility-inner .icon-sm,
  .utility-bar .utility-inner .icon-sm{
    width:13px !important;
    height:13px !important;
    justify-self:center !important;
    flex:none !important;
  }
}

@media (max-width:430px){
  .hx-utility .utility-inner,
  .utility-bar .utility-inner{
    width:min(100% - 24px, 355px) !important;
    font-size:.63rem !important;
  }
}

@media (max-width:360px){
  .hx-utility .utility-inner,
  .utility-bar .utility-inner{
    width:min(100% - 20px, 330px) !important;
    font-size:.60rem !important;
  }
}


/* ============================================================
   MOBILE WELLNESS CAROUSEL CONTROLS
   Swipe remains enabled, but visible arrows replace instructional text.
   ============================================================ */
@media (max-width:900px){
  .hx-page .hx-coverflow-wrap{
    position:relative !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 0 58px !important;
    margin:0 calc(var(--mobile-gutter) * -1) 0 0 !important;
    overflow:visible !important;
  }

  .hx-page .hx-coverflow-wrap::after{
    content:none !important;
    display:none !important;
  }

  .hx-page .hx-coverflow-dots{
    display:none !important;
  }

  .hx-page .hx-coverflow-arrow{
    position:absolute !important;
    z-index:30 !important;
    top:auto !important;
    bottom:4px !important;
    width:42px !important;
    height:42px !important;
    display:grid !important;
    place-items:center !important;
    padding:0 !important;
    border:1px solid #d5e1e9 !important;
    border-radius:50% !important;
    background:#fff !important;
    color:var(--hx-navy) !important;
    box-shadow:0 8px 20px rgba(7,37,61,.10) !important;
    transform:none !important;
  }

  .hx-page .hx-coverflow-arrow:active{
    background:var(--hx-red) !important;
    color:#fff !important;
    border-color:var(--hx-red) !important;
    transform:scale(.96) !important;
  }

  .hx-page .hx-coverflow-arrow svg{
    width:20px !important;
    height:20px !important;
  }

  .hx-page .hx-prev{
    left:calc(50% - 50px) !important;
    right:auto !important;
  }

  .hx-page .hx-next{
    right:calc(50% - 50px) !important;
    left:auto !important;
  }
}


/* ============================================================
   MOBILE COMPACT CONTACT BAR + SIDE CAROUSEL ARROWS
   ============================================================ */

/* Desktop keeps the existing full contact information. */
.mobile-utility-text{
  display:none;
}

@media (max-width:900px){

  /* Compact one-row mobile contact/status strip.
     Three equal tap targets: Call / Hours / Location. */
  .hx-utility,
  .utility-bar{
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .hx-utility .utility-inner,
  .utility-bar .utility-inner{
    width:100% !important;
    max-width:none !important;
    min-height:48px !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-template-areas:"phone hours address" !important;
    gap:0 !important;
    align-items:stretch !important;
    justify-items:stretch !important;
    font-size:inherit !important;
  }

  .hx-utility .utility-inner > a:first-child,
  .utility-bar .utility-inner > a:first-child{
    grid-area:phone !important;
  }

  .hx-utility .utility-hours,
  .utility-bar .utility-hours{
    grid-area:hours !important;
  }

  .hx-utility .utility-address,
  .utility-bar .utility-address{
    grid-area:address !important;
  }

  .hx-utility .utility-inner > a,
  .hx-utility .utility-hours,
  .utility-bar .utility-inner > a,
  .utility-bar .utility-hours{
    width:100% !important;
    min-width:0 !important;
    min-height:48px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    margin:0 !important;
    padding:5px 6px !important;
    text-align:left !important;
    white-space:normal !important;
    border-right:1px solid rgba(255,255,255,.20) !important;
  }

  .hx-utility .utility-address,
  .utility-bar .utility-address{
    border-right:0 !important;
  }

  .hx-utility .utility-inner .icon-sm,
  .utility-bar .utility-inner .icon-sm{
    width:14px !important;
    height:14px !important;
    flex:0 0 14px !important;
    margin:0 !important;
  }

  .desktop-utility-text{
    display:none !important;
  }

  .mobile-utility-text{
    min-width:0;
    display:flex !important;
    flex-direction:column;
    justify-content:center;
    gap:1px;
    line-height:1.05;
  }

  .mobile-utility-text small{
    display:block;
    color:rgba(255,255,255,.78);
    font-size:.52rem;
    font-weight:800;
    letter-spacing:.045em;
    text-transform:uppercase;
  }

  .mobile-utility-text strong{
    display:block;
    overflow:hidden;
    color:#fff;
    font-size:.62rem;
    font-weight:900;
    line-height:1.12;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* Wellness cards remain finger-swipeable. Remove bottom controls. */
  .hx-page .hx-coverflow-wrap{
    position:relative !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 calc(var(--mobile-gutter) * -1) 0 0 !important;
    padding:0 !important;
    overflow:visible !important;
  }

  .hx-page .hx-coverflow-wrap::after,
  .hx-page .hx-coverflow-dots{
    display:none !important;
    content:none !important;
  }

  /* Same visual language as the desktop/main carousel:
     glassy circular arrows on the left and right sides. */
  .hx-page .hx-coverflow-arrow{
    position:absolute !important;
    z-index:40 !important;
    top:50% !important;
    bottom:auto !important;
    width:46px !important;
    height:46px !important;
    display:grid !important;
    place-items:center !important;
    padding:0 !important;
    border:1px solid rgba(206,220,230,.92) !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.90) !important;
    color:var(--hx-navy) !important;
    box-shadow:0 10px 26px rgba(7,37,61,.13) !important;
    backdrop-filter:blur(12px) saturate(1.08) !important;
    -webkit-backdrop-filter:blur(12px) saturate(1.08) !important;
    transform:translateY(-50%) !important;
    transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease !important;
  }

  .hx-page .hx-coverflow-arrow svg{
    width:22px !important;
    height:22px !important;
  }

  .hx-page .hx-prev{
    left:5px !important;
    right:auto !important;
  }

  .hx-page .hx-next{
    right:5px !important;
    left:auto !important;
  }

  .hx-page .hx-coverflow-arrow:active{
    background:var(--hx-red) !important;
    color:#fff !important;
    border-color:var(--hx-red) !important;
    transform:translateY(-50%) scale(.95) !important;
  }
}

@media (max-width:430px){
  .hx-utility .utility-inner,
  .utility-bar .utility-inner{
    min-height:46px !important;
  }

  .hx-utility .utility-inner > a,
  .hx-utility .utility-hours,
  .utility-bar .utility-inner > a,
  .utility-bar .utility-hours{
    min-height:46px !important;
    padding:4px 4px !important;
    gap:4px !important;
  }

  .mobile-utility-text small{
    font-size:.49rem;
  }

  .mobile-utility-text strong{
    font-size:.57rem;
  }

  .hx-utility .utility-inner .icon-sm,
  .utility-bar .utility-inner .icon-sm{
    width:13px !important;
    height:13px !important;
    flex-basis:13px !important;
  }

  .hx-page .hx-coverflow-arrow{
    width:43px !important;
    height:43px !important;
  }

  .hx-page .hx-prev{
    left:3px !important;
  }

  .hx-page .hx-next{
    right:3px !important;
  }
}

@media (max-width:360px){
  .mobile-utility-text strong{
    font-size:.53rem;
  }

  .mobile-utility-text small{
    font-size:.46rem;
  }

  .hx-utility .utility-inner > a,
  .hx-utility .utility-hours,
  .utility-bar .utility-inner > a,
  .utility-bar .utility-hours{
    padding-inline:3px !important;
  }
}