/* ==========================================================================
   CrysMed — home page, mobile & tablet layer
   Loaded last on the home page only (templates/home.html), after layout-2-overrides.css.
   Pairs with js/mobile-home.js (phone search sheet).

   2026-10-09 — mobile/tablet redesign, card patterns modelled on 1mg.com's mobile web app, in
   CrysMed's own colors. DESKTOP (1024px and up) IS UNTOUCHED: every rule sits inside
   max-width: 1023.98px. Content, order and links are unchanged; only layout and sizing.
   2026-10-09 (later): touch tablets held in landscape (1024-1366px, hover:none + pointer:coarse,
   e.g. iPads) also get this mobile/tablet layer. PCs and laptops with a mouse never match that,
   so the desktop design stays exactly as approved at every width.
   ========================================================================== */

@media (max-width: 1023.98px), (min-width: 1024px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {

  /* ======================================================================
     Showcase rows: "Offers made for your wellbeing", "Meet trusted specialists",
     "Everyday health essentials".
     Each card was 256px wide with a full-bleed photo (one card per screen, up to 422px tall).
     Now 160px app-style cards, ~2.3 per screen: square photo inset in the card, tight type,
     button pinned to the bottom so buttons line up across the row — the 1mg product-card pattern.
     ====================================================================== */
  .showcase-cards:has(> .mini-offer-card, > .mini-doc-card, > .product-card) {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0 8px;
  }
  .showcase-cards:has(> .mini-offer-card, > .mini-doc-card, > .product-card)::-webkit-scrollbar { display: none; }

  .showcase-cards > :is(.mini-offer-card, .mini-doc-card, .product-card) {
    flex: 0 0 160px;
    min-width: 0;
    padding: 8px;
    border-radius: 12px;
    scroll-snap-align: start;
  }

  /* Photo: square, inset, rounded */
  :is(.mini-offer-card__media, .mini-doc-card__media, .product-card__media) {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
  }
  :is(.mini-offer-card__media, .mini-doc-card__media, .product-card__media) img {
    color: transparent; /* hide alt text when an image fails to load */
  }

  /* Small corner tags on the photo */
  .mini-offer-card .mini-offer-card__cat,
  .product-card .product-card__badge {
    top: 6px;
    left: 6px;
    max-width: calc(100% - 12px);
    padding: 2px 6px;
    font-size: 9px;
    line-height: 14px;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Body: tight, top-aligned, button at the bottom */
  :is(.mini-offer-card__body, .mini-doc-card__body, .product-card__body) {
    flex: 1;
    padding: 8px 2px 0;
    gap: 4px;
    justify-content: flex-start;
  }
  :is(.mini-offer-card, .mini-doc-card, .product-card) .btn-block,
  .product-card .btn-cta {
    width: 100%;
    margin-top: auto;
    min-height: 36px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 12px;
    justify-content: center;
  }

  /* Titles / names */
  .mini-offer-card .mini-offer-card__title-row,
  .product-card .product-card__title-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .mini-offer-card .mini-offer-card__title,
  .product-card .product-card__title {
    font-size: 13px;
    line-height: 17px;
    min-height: 34px; /* always 2 lines tall, so prices line up across cards */
  }
  .mini-doc-card .mini-doc-card__name {
    font-size: 14px;
    line-height: 19px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Discount badges */
  .mini-offer-card .mini-offer-card__off,
  .product-card .product-card__off {
    align-self: flex-start;
    margin-top: 0;
    padding: 1px 6px;
    font-size: 10px;
    line-height: 14px;
  }

  /* Meta lines: one line each, 11px minimum (some were 8.8px) */
  .mini-offer-card :is(.mini-offer-card__meta, .mini-offer-card__avail),
  .mini-doc-card :is(.mini-doc-card__spec, .mini-doc-card__rating),
  .product-card .product-card__rating {
    font-size: 11px;
    line-height: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mini-doc-card .mini-doc-card__spec { font-size: 12px; line-height: 16px; }

  /* "Earliest appointment" / "Delivery" label + value */
  .mini-doc-card .mini-doc-card__earliest,
  .product-card .product-card__delivery { font-size: 11px; line-height: 15px; margin-bottom: 8px; }
  .mini-doc-card .mini-doc-card__earliest b,
  .product-card .product-card__delivery b {
    font-size: 12px;
    line-height: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Prices */
  .mini-offer-card .mini-offer-card__price,
  .product-card .product-card__price {
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    row-gap: 2px;
    margin: 2px 0 8px;
  }
  .mini-offer-card .mini-offer-card__price .now,
  .product-card .product-card__price .now { font-size: 14px; line-height: 20px; }
  .mini-offer-card .mini-offer-card__price s,
  .product-card .product-card__price s { font-size: 11px; }
  .mini-offer-card .mini-offer-card__price .tag-selfpay { font-size: 9px; line-height: 13px; }
  /* product delivery sits above the price; the price row carries the bottom spacing */
  .product-card .product-card__delivery { margin-bottom: 0; }

  /* ======================================================================
     "Care from trusted providers": compact provider cards.
     Every card was 256x403 because the row stretched them all to the height of the portrait
     "UAE coverage" image card at the end (320x505 creative). Now 170px cards with an inset
     logo; the coverage card keeps its own proportions at the same width, so the row is ~270px.
     ====================================================================== */
  #providers .provider-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0 8px;
  }
  #providers .provider-grid::-webkit-scrollbar { display: none; }
  #providers .provider-grid > * {
    flex: 0 0 170px;
    min-width: 0;
    scroll-snap-align: start;
  }
  #providers .provider-card {
    display: flex;
    flex-direction: column;
    padding: 8px;
    border-radius: 12px;
  }
  #providers .provider-card__media { border-radius: 8px; overflow: hidden; }
  #providers .provider-card__img { height: 96px; color: transparent; }
  #providers .provider-card__badge {
    top: 6px;
    left: 6px;
    max-width: calc(100% - 12px);
    padding: 2px 6px;
    font-size: 9px;
    line-height: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #providers .provider-card__body { flex: 1; padding: 8px 2px 0; gap: 3px; }
  #providers .provider-card__verified { font-size: 11px; line-height: 15px; }
  #providers .provider-card__body b {
    font-size: 14px;
    line-height: 19px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #providers .provider-card__meta { font-size: 11px; line-height: 16px; }
  #providers .provider-card__body p {
    margin: 2px 0 6px;
    font-size: 11px;
    line-height: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #providers .provider-card__link {
    margin-top: auto;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
  }
  /* Category tabs above the cards: swipe without a visible desktop-style scrollbar */
  #providers .tab-row { scrollbar-width: none; }
  #providers .tab-row::-webkit-scrollbar { display: none; }

  /* The portrait coverage creative keeps its own shape instead of setting the row height */
  #providers .coverage-card--image {
    align-self: flex-start;
    min-height: 0;
    aspect-ratio: 320 / 505;
    border-radius: 12px;
    overflow: hidden;
  }

  /* ======================================================================
     Category sponsor strip: was a 3-column row squeezed onto a phone (tag | 173px text column |
     link wrapping underneath). Now a stacked card: tag, message, note, link.
     ====================================================================== */
  .sponsor-strip { padding-block: 8px; }
  .sponsor-strip .sponsor-strip__inner {
    width: auto;
    margin-inline: var(--m-gutter, 16px);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 16px 10px;
    border-radius: 12px;
  }
  .sponsor-strip .sponsor-strip__tag { padding: 4px 8px; font-size: 10px; line-height: 12px; }
  .sponsor-strip .sponsor-strip__inner p {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .sponsor-strip .sponsor-strip__inner p b { font-size: 14px; line-height: 20px; }
  .sponsor-strip .sponsor-strip__inner p span { font-size: 12px; line-height: 17px; }
  .sponsor-strip .sponsor-strip__inner > a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
  }

  /* ======================================================================
     "List your practice": the sponsor banner is a 2432x480 desktop creative inside a box with a
     240px minimum height, so on a phone it floated as a 64px strip in an empty frame with
     unreadable text. Now the box takes a phone-friendly 2:1 shape and shows the left part of
     the creative (where its headline and "Join CrysMed" button are), about 3x larger.
     ====================================================================== */
  #for-doctors .partnership-cta--image {
    position: relative;
    min-height: 0;
    aspect-ratio: 2 / 1;
    border-radius: 12px;
    overflow: hidden;
  }
  /* the image's height:100% can't resolve against a stretched flex item, so the link is pinned
     to the whole box (full tap area + visible focus ring) and the image fills the link */
  #for-doctors .partnership-cta--image > a { position: absolute; inset: 0; }
  #for-doctors .partnership-cta--image img {
    width: 100%;
    height: 100%;
    object-position: left center;
  }
}

/* ======================================================================
   Hero search ("What care do you need? / Where? / When?")
   Was squeezed into 2 cramped columns on phones (a later 980px rule overrode the 640px
   one-column rule), with cut-off placeholders and an empty fourth cell.
   Phones: a 1mg-style search pill; tapping it slides the same form up as a bottom sheet.
   Tablets: the form stays in place as 3 clean fields with a full-width button underneath.
   ====================================================================== */
@media (max-width: 599.98px) {
  /* pill sits above the form's original spot (it's the last element in the markup) */
  .hero-search-zone .container { display: flex; flex-direction: column; }
  .hero-search-zone .m-search-pill { order: -1; }

  .m-search-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    margin: 16px 0 12px;
    padding: 0 18px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-full);
    background: var(--white);
    box-shadow: 0 2px 8px rgba(20, 24, 28, .06);
    color: var(--ink-500);
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
  }
  .m-search-pill svg { flex: none; color: var(--brand-700); }
  .m-search-pill__text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .m-search-pill__text b {
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
    display: inline-block;
    transition: opacity .18s var(--ease), transform .18s var(--ease);
  }
  .m-search-pill__text b.is-swapping { opacity: 0; transform: translateY(-6px); }
  .m-search-pill:active { transform: scale(.99); }

  /* The form becomes a bottom sheet */
  .hero-search-zone .search-panel--card {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 88vh;
    margin: 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--white);
    border: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(20, 24, 28, .18);
    transform: translateY(105%);
    visibility: hidden;
    transition: transform .3s var(--ease), visibility 0s linear .3s;
  }
  .hero-search-zone .search-panel--card.is-open {
    transform: none;
    visibility: visible;
    transition: transform .3s var(--ease);
  }
  .m-sheet-head {
    order: -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
  }
  .m-sheet-title { margin: 0; font-size: 18px; font-weight: var(--fw-bold); color: var(--ink-900); }
  .m-sheet-close {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    color: var(--ink-900);
  }
  .m-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 105;
    background: rgba(20, 24, 28, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility 0s linear .3s;
  }
  .m-sheet-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
}

/* Field styling shared by the phone sheet and the tablet inline form */
@media (max-width: 1023.98px), (min-width: 1024px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  .hero-search-zone .search-panel--card .search-field {
    padding: 10px 14px;
    gap: 2px;
    background: var(--white);
    border: 1px solid var(--line-strong);
    border-radius: 12px;
  }
  .hero-search-zone .search-panel--card .search-field:focus-within {
    border-color: var(--brand-700);
    box-shadow: 0 0 0 3px var(--brand-tint);
  }
  .hero-search-zone .search-panel--card .search-field label { font-size: 11px; line-height: 15px; }
  .hero-search-zone .search-panel--card .search-field input {
    font-size: 16px; /* 16px stops iOS Safari zooming in on focus */
    line-height: 24px;
    min-height: 24px;
    text-overflow: ellipsis;
  }
  .hero-search-zone .search-panel--card .btn-primary {
    width: 100%;
    min-height: 48px;
    margin: 4px 0 0;
    border-radius: 12px;
    font-size: 15px;
  }
}

/* Tablets: inline form, 3 fields in a row, button underneath */
@media (min-width: 600px) and (max-width: 1023.98px), (min-width: 1024px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  .m-search-pill, .m-sheet-head, .m-sheet-backdrop { display: none; }
  .hero-search-zone .search-panel--card {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(8, 13, 51, .10);
  }
  .hero-search-zone .search-panel--card .btn-primary { grid-column: 1 / -1; }
}

/* ======================================================================
   Trust strip under the search ("Provider information reviewed", "Clear inclusions", …)
   Was a 229px grey box listing all four one under another on phones. Now a swipeable row of
   compact tiles (icon + title + note), each as wide as its own text — ~70px tall in total.
   Tablets: all four in one row.
   ====================================================================== */
@media (max-width: 1023.98px), (min-width: 1024px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  .hero-search-zone .hero__trustrow {
    background: none;
    border-radius: 0;
    padding: 2px 0 6px;
    gap: 8px;
  }
  .hero-search-zone .trust-item {
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 10px;
    background: var(--surface);
    border-radius: 12px;
  }
  .hero-search-zone .trust-item > .trust-item__icon { flex: none; width: 30px; height: 30px; }
  .hero-search-zone .trust-item b { font-size: 13px; line-height: 18px; }
  .hero-search-zone .trust-item div > span { font-size: 11px; line-height: 15px; }
}
@media (max-width: 599.98px) {
  .hero-search-zone .hero__trustrow {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }
  .hero-search-zone .hero__trustrow::-webkit-scrollbar { display: none; }
  .hero-search-zone .trust-item { flex: 0 0 auto; scroll-snap-align: start; }
  .hero-search-zone .trust-item div { white-space: nowrap; }
}
@media (min-width: 600px) and (max-width: 1023.98px), (min-width: 1024px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  .hero-search-zone .hero__trustrow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-search-zone .trust-item { align-items: flex-start; flex-direction: column; gap: 8px; padding: 12px; }
}

/* ======================================================================
   "New this week"
   Phones were 1,139px tall: the 4 small cards, then the "Partner spotlight" creative (396px)
   and the "Gift voucher" creative (397px) each full width, one under the other.
   Now: the 4 cards match the other app-style card rows, and the two portrait creatives sit
   side by side (~192px tall each; both keep their own fixed aspect ratio, so nothing crops).
   ====================================================================== */
@media (max-width: 1023.98px), (min-width: 1024px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  /* Small cards: same look as the other rows (inset photo, 12px corners) */
  #new-this-week .new-week-grid--2col > .mini-card {
    padding: 8px;
    border-radius: 12px;
  }
  #new-this-week .mini-card__img,
  #new-this-week .mini-card .placeholder-img--sm {
    height: 104px;
    border-radius: 8px;
    color: transparent; /* hide alt text when an image fails to load */
  }
  #new-this-week .mini-card__body { padding: 8px 2px 2px; gap: 3px; }
  #new-this-week .mini-card__body b { font-size: 13px; line-height: 17px; }
  #new-this-week .mini-card__body span { font-size: 11px; line-height: 15px; }
  #new-this-week .mini-card__body .mini-card__discount { font-size: 10px; line-height: 14px; padding: 1px 6px; }
  #new-this-week .mini-card__price { font-size: 14px !important; line-height: 20px; }
  #new-this-week .mini-card__price-row s { font-size: 11px; }

  /* Creatives: rounded like every other card */
  #new-this-week .mini-card--sponsored-image,
  #new-this-week .voucher-card--image { border-radius: 12px; overflow: hidden; }
}

@media (max-width: 1023.98px), (min-width: 1024px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  /* One grid for the whole section: heading and card row span both columns, the two
     creatives share the row below. The two wrapper divs step aside (display: contents)
     so their children can join this grid; they have no meaning of their own. */
  #new-this-week .new-week-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
    align-items: start;
  }
  #new-this-week .new-week-col,
  #new-this-week .new-week-row { display: contents; }
  #new-this-week .new-week-col > .section__head,
  #new-this-week .new-week-grid--2col { grid-column: 1 / -1; }
  #new-this-week .new-week-col > .section__head { margin-bottom: 0; }
  #new-this-week .mini-card--sponsored-image,
  #new-this-week .voucher-card--image {
    width: 100%;
    min-height: 0;
    margin: 0;
  }
}

/* Tablets: the 4 small cards fit in one row, no scrolling */
@media (min-width: 600px) and (max-width: 1023.98px), (min-width: 1024px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  #new-this-week .new-week-grid--2col {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
  }
}

/* Phones: the card row runs edge to edge */
@media (max-width: 599.98px) {
  #new-this-week .new-week-grid--2col {
    gap: 10px;
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }
  #new-this-week .new-week-grid--2col > .mini-card { flex: 0 0 160px; min-width: 0; }
}

/* 981–1040px (approved by the client 2026-10-09): the gift-voucher creative overflowed its
   column by up to 32px here, causing page-level horizontal scroll at 1024px. Same cause and
   same fix as the 2026-10-08 rule in layout-2-overrides.css, which only went up to 980px. */
@media (min-width: 980.02px) and (max-width: 1040px) {
  .voucher-card--image { min-height: 0; }
}

/* ======================================================================
   Membership
   Phones were 1,241px tall: intro, then Essential / Plus / Family stacked full width.
   Now the three plans are a swipeable row of cards, centred on "Most popular" (Plus) when the
   page loads (mobile-home.js), with Essential and Family peeking in at the sides.
   The plan cards have no wrapper element of their own (they sit directly in
   .membership__layout next to the intro), so the layout grid itself becomes the horizontal
   scroller and the intro is pinned (sticky) to the left edge so it never slides away.
   ====================================================================== */
@media (max-width: 599.98px) {
  /* cqw = 1% of the section's real width (excludes any scrollbar, unlike vw) */
  .membership { container-type: inline-size; }
  .membership .membership__layout {
    /* --edge: extra room before the first / after the last card so those can centre too */
    --card: 240px;
    --edge: calc(50cqw - var(--card) / 2 - 16px);
    grid-template-columns: calc(var(--card) + var(--edge)) var(--card) calc(var(--card) + var(--edge));
    gap: 18px 12px; /* row gap leaves room for the "Most popular" tag above the cards */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .membership .membership__layout::-webkit-scrollbar { display: none; }
  /* The intro spans all three columns but stays pinned while the cards slide underneath */
  .membership .membership__intro {
    grid-column: 1 / -1;
    position: sticky;
    left: 0; /* measured from inside the row's own 16px padding */
    width: calc(100cqw - 32px);
    justify-self: start;
  }
  /* Every card is exactly one card wide. The first card sits at the end of its (wider) column
     and the others at the start, which leaves the extra room before the first card and after
     the last one, so both can still be centred. */
  .membership .pricing-card {
    width: var(--card);
    justify-self: start;
    scroll-snap-align: center;
    padding: 16px;
    border-radius: 14px;
  }
  .membership .membership__intro + .pricing-card { justify-self: end; }
  .membership .pricing-card li { font-size: 13px; line-height: 22px; }
  .membership .pricing-card__desc { font-size: 12px; }
  .membership .pricing-card__price span { font-size: 12px; }
  .membership .pricing-card .btn { min-height: 44px; }
  .membership .membership__intro .btn { min-height: 44px; }
  .membership .membership__fineprint { font-size: 11px; line-height: 16px; }
}

/* Tablets: the three plans side by side under the intro (main.css only does this from 641px) */
@media (min-width: 600px) and (max-width: 1023.98px), (min-width: 1024px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  .membership .membership__layout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .membership .membership__intro { grid-column: 1 / -1; }
}

/* ======================================================================
   "Find the right care, your way" — category carousel
   Cards were up to 263x367 (a 237px illustration each, 4 per screen on an iPad). Now compact
   app-style category tiles (1mg's service-tile pattern): small rounded illustration, name,
   offer count, "From AED", "Explore" — all content kept. Swipe instead of arrows on touch.
   Phones ~112px (3+ visible), portrait tablets 140px (5+), landscape tablets 150px (7).
   ====================================================================== */
@media (max-width: 1023.98px), (min-width: 1024px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  #categories { padding-block: 24px; }
  #categories .cat-carousel__arrow { display: none; }
  #categories .cat-track {
    gap: 10px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding: 2px 0 6px;
  }
  #categories .cat-track .cat-card {
    flex: 0 0 140px;
    min-width: 0;
    padding: 8px 8px 10px;
    border-radius: 14px;
  }
  #categories .cat-card__media {
    border-radius: 12px; /* the arched shape reads oddly this small */
    margin-bottom: 8px;
  }
  #categories .cat-card__name {
    min-height: 34px;
    margin-bottom: 2px;
    font-size: 13px;
    line-height: 17px;
  }
  #categories .cat-card__count,
  #categories .cat-card__price { font-size: 11px; line-height: 15px; }
  #categories .cat-card__price { margin-bottom: 6px; }
  #categories .cat-card__explore { font-size: 12px; line-height: 16px; }
}
@media (max-width: 599.98px) {
  #categories .cat-track .cat-card { flex-basis: 112px; padding: 6px 6px 8px; }
  #categories .cat-carousel__viewport { margin-inline: -16px; }
  #categories .cat-track { padding-inline: 16px; scroll-padding-inline: 16px; }
}
@media (min-width: 1024px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  #categories .cat-track .cat-card { flex-basis: 150px; }
}

/* ======================================================================
   Tablets (portrait 600–1023px and touch landscape 1024–1366px): sponsor strip + membership
   use the extra width instead of the stacked phone layout (which left them mostly empty).
   ====================================================================== */
@media (min-width: 600px) and (max-width: 1023.98px), (min-width: 1024px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  /* Category sponsor: one slim strip — tag | message + note | link */
  .sponsor-strip .sponsor-strip__inner {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
  }
  .sponsor-strip .sponsor-strip__tag { flex: none; }
  .sponsor-strip .sponsor-strip__inner p { flex: 1; min-width: 0; gap: 2px; }
  .sponsor-strip .sponsor-strip__inner > a { flex: none; margin-left: auto; white-space: nowrap; }

  /* Membership: tighter section and cards */
  .membership { padding-block: 32px; }
  .membership .membership__layout { gap: 16px; align-items: stretch; }
  .membership .pricing-card { padding: 16px; border-radius: 14px; }
  .membership .pricing-card ul { margin-bottom: 10px; }
  .membership .pricing-card li { font-size: 13px; line-height: 22px; }
  .membership .pricing-card__desc { font-size: 12px; margin-bottom: 12px; }
  .membership .pricing-card .btn { min-height: 44px; }

  /* Intro (full width above the plans): two columns — headline left, description + button right */
  .membership .membership__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
    padding-block: 0;
  }
  .membership .membership__intro > .eyebrow { grid-column: 1; grid-row: 1; }
  .membership .membership__intro > .membership__headline { grid-column: 1; grid-row: 2; }
  .membership .membership__intro > .membership__tagline { grid-column: 1; grid-row: 3; }
  .membership .membership__intro > .membership__body { grid-column: 2; grid-row: 1 / 3; margin-top: 4px; }
  .membership .membership__intro > .btn { grid-column: 2; grid-row: 3; justify-self: start; min-height: 44px; }
  .membership .membership__intro > .membership__fineprint { grid-column: 2; grid-row: 4; margin-top: 8px; }
}

/* ======================================================================
   Touch tablets in landscape (iPad / Android tablets held sideways, 1024–1366px).
   These get the same tablet layout as portrait tablets (via the combined media queries above);
   the rules here only adjust the few sections that need the extra width used differently.
   PCs and laptops with a mouse never match this (hover: none / pointer: coarse).
   ====================================================================== */
@media (min-width: 1024px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  /* "New this week": 4 small cards as a 2x2 block on the left, the two portrait creatives
     side by side on the right — instead of two half-width creatives ~660px tall each. */
  #new-this-week .new-week-layout { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #new-this-week .new-week-grid--2col {
    grid-column: 1 / 3;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #new-this-week .mini-card--sponsored-image { grid-column: 3; grid-row: 2; }
  #new-this-week .voucher-card--image { grid-column: 4; grid-row: 2; }

  /* Membership: the desktop arrangement (intro column + 3 plans side by side) instead of the
     intro stacked full width above the plans */
  .membership .membership__layout.membership__layout { grid-template-columns: 1.15fr repeat(3, minmax(0, .8fr)); }
  .membership .membership__intro.membership__intro { display: flex; flex-direction: column; grid-column: 1; }
  .membership .membership__media { display: none; } /* desktop-only 5th column above 1180px */
  .membership .membership__intro > .membership__headline { font-size: 28px; line-height: 1.12; }
  .membership .membership__intro > .membership__body { margin-top: 0; }

  /* "List your practice": wide enough here to show the whole sponsor creative uncropped */
  #for-doctors .partnership-cta.partnership-cta--image { aspect-ratio: 2432 / 480; }
}

/* Phones: rows run edge to edge (cards slide out from under the screen edge, like 1mg) */
@media (max-width: 599.98px) {
  .showcase-cards:has(> .mini-offer-card, > .mini-doc-card, > .product-card),
  #providers .provider-grid {
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }
}

/* Tablets: slightly larger cards, ~4 per screen */
@media (min-width: 600px) and (max-width: 1023.98px), (min-width: 1024px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  .showcase-cards > :is(.mini-offer-card, .mini-doc-card, .product-card) { flex-basis: 180px; }
  #providers .provider-grid > * { flex-basis: 190px; }
  /* wider screen: a flatter banner still keeps the creative's headline + button in view */
  #for-doctors .partnership-cta--image { aspect-ratio: 3 / 1; }
}