/*
 * iDrugstore PWA Home v18.0
 * Complete mobile-home composition: balanced gutters, explicit surfaces,
 * centered icon/card geometry and deterministic text contrast.
 */
@media (max-width:1024px) {
  body.id-pwa-native.id-pwa-page-index {
    --home-gutter:clamp(16px,4.5vw,28px);
    --home-content:760px;
  }

  body.id-pwa-native.id-pwa-page-index #main-content {
    background:#f4f6f8!important;
  }

  body.id-pwa-native.id-pwa-page-index :where(
    .id-trust-bar,
    .id-pharma-cats,
    .id-stats-section,
    .section-how-it-works,
    .section-feature-resto,
    .section-cuisine,
    .id-testimonials,
    #mobile-app-sections,
    .id-plans,
    .id-merchant-cta,
    .id-faq
  ) {
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:32px 0!important;
  }

  body.id-pwa-native.id-pwa-page-index :where(
    .id-trust-bar,
    .id-pharma-cats,
    .id-stats-section,
    .section-how-it-works,
    .section-feature-resto,
    .section-cuisine,
    .id-testimonials,
    #mobile-app-sections,
    .id-plans,
    .id-merchant-cta,
    .id-faq
  ) > .container {
    width:min(100%,var(--home-content))!important;
    min-width:0!important;
    max-width:var(--home-content)!important;
    margin:0 auto!important;
    padding-right:var(--home-gutter)!important;
    padding-left:var(--home-gutter)!important;
  }

  /* Hero: the only dark signature surface. */
  body.id-pwa-native.id-pwa-page-index .parallax-container.parallax-home {
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:30px var(--home-gutter) 32px!important;
    border:0!important;
    background:linear-gradient(145deg,#17212b 0%,#25313d 72%,#65171e 155%)!important;
    color:#fff!important;
  }

  body.id-pwa-native.id-pwa-page-index .parallax-home > .parallax-search.search-wraps {
    display:flex!important;
    width:min(100%,var(--home-content))!important;
    min-width:0!important;
    max-width:var(--home-content)!important;
    margin:0 auto!important;
    padding:0!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;
    text-align:left!important;
  }

  body.id-pwa-native.id-pwa-page-index .parallax-home > .parallax-search > :where(h1,.search-text,.id-hero-badge,.id-hero-ctas,.advance-search) {
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin-right:0!important;
    margin-left:0!important;
  }

  body.id-pwa-native.id-pwa-page-index .parallax-home > .parallax-search > h1 {
    margin:0!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    font-size:clamp(29px,9vw,40px)!important;
    line-height:1.04!important;
    letter-spacing:-.045em!important;
    text-align:left!important;
  }

  body.id-pwa-native.id-pwa-page-index .parallax-home > .parallax-search > .search-text {
    margin:12px 0 20px!important;
    color:#d9e0e7!important;
    -webkit-text-fill-color:#d9e0e7!important;
    font-size:14px!important;
    line-height:1.55!important;
    text-align:left!important;
  }

  body.id-pwa-native.id-pwa-page-index .id-hero-badge {
    align-self:flex-start!important;
    width:auto!important;
    margin:0 0 12px!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
  }

  body.id-pwa-native.id-pwa-page-index .advance-search {
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  body.id-pwa-native.id-pwa-page-index .search-input-wraps,
  body.id-pwa-native.id-pwa-page-index .search-input-wraps > .row {
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  body.id-pwa-native.id-pwa-page-index .parallax-home > .parallax-search > div:last-child {
    display:grid!important;
    width:100%!important;
    margin:12px 0 0!important;
    padding:0!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }

  body.id-pwa-native.id-pwa-page-index .parallax-home > .parallax-search > div:last-child > span {
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    min-height:38px!important;
    padding:7px 8px!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid rgba(255,255,255,.14)!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.08)!important;
    color:#eef2f6!important;
    -webkit-text-fill-color:#eef2f6!important;
    font-size:10px!important;
    line-height:1.3!important;
    text-align:center!important;
    white-space:normal!important;
  }

  /* Every light surface receives explicit dark typography. */
  body.id-pwa-native.id-pwa-page-index :where(
    .id-trust-bar,
    .id-pharma-cats,
    .section-how-it-works,
    .section-feature-resto,
    .section-cuisine,
    .id-testimonials,
    #mobile-app-sections,
    .id-plans,
    .id-faq
  ) {
    background:#f4f6f8!important;
    color:#17212b!important;
  }

  body.id-pwa-native.id-pwa-page-index :where(
    .id-trust-bar,
    .id-pharma-cats,
    .section-how-it-works,
    .section-feature-resto,
    .section-cuisine,
    .id-testimonials,
    #mobile-app-sections,
    .id-plans,
    .id-faq
  ) :where(h1,h2,h3,h4,p,span,strong,small,a) {
    color:#17212b;
    -webkit-text-fill-color:currentColor;
  }

  /* Section headings occupy and visually center the available width. */
  body.id-pwa-native.id-pwa-page-index .id-section-heading {
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0 0 20px!important;
    padding:0!important;
    text-align:center!important;
  }

  body.id-pwa-native.id-pwa-page-index .id-section-heading > :where(span,h2,p) {
    width:100%!important;
    min-width:0!important;
    max-width:620px!important;
    margin-right:auto!important;
    margin-left:auto!important;
    text-align:center!important;
  }

  body.id-pwa-native.id-pwa-page-index .id-section-heading > span {
    color:#b8121d!important;
    -webkit-text-fill-color:#b8121d!important;
  }

  body.id-pwa-native.id-pwa-page-index .id-section-heading > h2 {
    margin-top:5px!important;
    color:#17212b!important;
    -webkit-text-fill-color:#17212b!important;
  }

  body.id-pwa-native.id-pwa-page-index .id-section-heading > p {
    display:block!important;
    margin-top:9px!important;
    color:#5f6c7a!important;
    -webkit-text-fill-color:#5f6c7a!important;
  }

  /* Trust cards: icon and label share a balanced centered cell. */
  body.id-pwa-native.id-pwa-page-index .id-trust-bar {
    padding:16px 0!important;
    border:0!important;
    background:#fff!important;
  }

  body.id-pwa-native.id-pwa-page-index .id-trust-bar .trust-items {
    display:grid!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  body.id-pwa-native.id-pwa-page-index .id-trust-item {
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:66px!important;
    margin:0!important;
    padding:10px 8px!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    border:1px solid #e2e7ec!important;
    border-radius:12px!important;
    background:#fff!important;
    color:#34414d!important;
    -webkit-text-fill-color:#34414d!important;
    font-size:10px!important;
    line-height:1.3!important;
    text-align:center!important;
    white-space:normal!important;
  }

  body.id-pwa-native.id-pwa-page-index .id-trust-item > i {
    display:grid!important;
    width:24px!important;
    height:24px!important;
    margin:0 auto!important;
    place-items:center!important;
    color:#d41421!important;
    -webkit-text-fill-color:#d41421!important;
    font-size:18px!important;
  }

  /* Category cards: equal columns and truly centered icons. */
  body.id-pwa-native.id-pwa-page-index .cats-grid {
    display:grid!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  body.id-pwa-native.id-pwa-page-index .cat-item {
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:118px!important;
    margin:0!important;
    padding:14px 10px!important;
    flex:none!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    border:1px solid #e2e7ec!important;
    border-radius:14px!important;
    background:#fff!important;
    color:#17212b!important;
    -webkit-text-fill-color:#17212b!important;
    text-align:center!important;
    box-shadow:none!important;
  }

  body.id-pwa-native.id-pwa-page-index .cat-icon {
    display:grid!important;
    width:58px!important;
    min-width:58px!important;
    height:58px!important;
    min-height:58px!important;
    margin:0 auto!important;
    padding:0!important;
    place-items:center!important;
    border-radius:15px!important;
    transform:none!important;
  }

  body.id-pwa-native.id-pwa-page-index .cat-icon :where(svg,img,i) {
    display:block!important;
    max-width:30px!important;
    max-height:30px!important;
    margin:auto!important;
  }

  body.id-pwa-native.id-pwa-page-index .cat-label {
    display:block!important;
    width:100%!important;
    margin:0!important;
    color:#273440!important;
    -webkit-text-fill-color:#273440!important;
    font-size:12px!important;
    font-weight:750!important;
    line-height:1.3!important;
    text-align:center!important;
  }

  /* Statistics explicitly retain their dark surface and white hierarchy. */
  body.id-pwa-native.id-pwa-page-index .id-stats-section {
    padding:30px 0!important;
    background:#17212b!important;
    color:#fff!important;
  }

  body.id-pwa-native.id-pwa-page-index .id-stats-grid {
    display:grid!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  body.id-pwa-native.id-pwa-page-index .id-stats-grid > div {
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:112px!important;
    margin:0!important;
    padding:16px 10px!important;
    flex:none!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid rgba(255,255,255,.13)!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.07)!important;
    text-align:center!important;
  }

  body.id-pwa-native.id-pwa-page-index .id-stat-num {
    display:block!important;
    width:100%!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    font-size:clamp(26px,8vw,36px)!important;
    line-height:1!important;
    text-align:center!important;
  }

  body.id-pwa-native.id-pwa-page-index .id-stat-label {
    display:block!important;
    width:100%!important;
    margin-top:7px!important;
    color:#d4dce4!important;
    -webkit-text-fill-color:#d4dce4!important;
    font-size:11px!important;
    line-height:1.35!important;
    text-align:center!important;
  }

  /* Steps: centered icon, then copy. No left-heavy two-column card. */
  body.id-pwa-native.id-pwa-page-index .id-how-grid {
    display:grid!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  body.id-pwa-native.id-pwa-page-index .id-how-card {
    position:relative!important;
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:20px 18px!important;
    flex:none!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    border:1px solid #e2e7ec!important;
    border-radius:15px!important;
    background:#fff!important;
    text-align:center!important;
    box-shadow:none!important;
  }

  body.id-pwa-native.id-pwa-page-index .id-how-card .id-how-icon {
    display:grid!important;
    width:60px!important;
    height:60px!important;
    margin:0 auto 4px!important;
    place-items:center!important;
    grid-column:auto!important;
    grid-row:auto!important;
    border-radius:16px!important;
  }

  body.id-pwa-native.id-pwa-page-index .id-how-card .id-how-num {
    position:absolute!important;
    top:12px!important;
    right:12px!important;
    left:auto!important;
    color:#5f6c7a!important;
    -webkit-text-fill-color:#5f6c7a!important;
  }

  body.id-pwa-native.id-pwa-page-index .id-how-card :where(h3,p) {
    width:100%!important;
    max-width:520px!important;
    margin-right:auto!important;
    margin-left:auto!important;
    grid-column:auto!important;
    text-align:center!important;
  }

  body.id-pwa-native.id-pwa-page-index .id-how-card h3 {
    margin-top:0!important;
    margin-bottom:0!important;
    color:#17212b!important;
    -webkit-text-fill-color:#17212b!important;
  }

  body.id-pwa-native.id-pwa-page-index .id-how-card p {
    margin-top:0!important;
    margin-bottom:0!important;
    color:#5f6c7a!important;
    -webkit-text-fill-color:#5f6c7a!important;
  }

  /* Testimonials and FAQ use full symmetric cards. */
  body.id-pwa-native.id-pwa-page-index :where(.id-testimonials-grid,.id-faq-grid) {
    display:grid!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  body.id-pwa-native.id-pwa-page-index :where(.id-testimonial-card,.id-faq-item) {
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:18px!important;
    flex:none!important;
    border:1px solid #e2e7ec!important;
    border-radius:14px!important;
    background:#fff!important;
    color:#17212b!important;
    -webkit-text-fill-color:#17212b!important;
    box-shadow:none!important;
  }

  body.id-pwa-native.id-pwa-page-index .id-testimonial-card :where(.id-testimonial-text,.id-testimonial-name,.id-testimonial-role) {
    color:#34414d!important;
    -webkit-text-fill-color:#34414d!important;
  }

  body.id-pwa-native.id-pwa-page-index .id-testimonial-author {
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  body.id-pwa-native.id-pwa-page-index .id-faq-q {
    color:#17212b!important;
    -webkit-text-fill-color:#17212b!important;
  }

  body.id-pwa-native.id-pwa-page-index .id-faq-a {
    margin:8px 0 0!important;
    padding:0!important;
    color:#5f6c7a!important;
    -webkit-text-fill-color:#5f6c7a!important;
  }
}

@media (max-width:359px) {
  body.id-pwa-native.id-pwa-page-index {
    --home-gutter:12px;
  }

  body.id-pwa-native.id-pwa-page-index .parallax-home > .parallax-search > div:last-child,
  body.id-pwa-native.id-pwa-page-index .id-trust-bar .trust-items {
    grid-template-columns:1fr!important;
  }
}

@media (min-width:600px) and (max-width:1024px) {
  body.id-pwa-native.id-pwa-page-index .cats-grid {
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }

  body.id-pwa-native.id-pwa-page-index .id-how-grid,
  body.id-pwa-native.id-pwa-page-index .id-testimonials-grid,
  body.id-pwa-native.id-pwa-page-index .id-faq-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}