/* Pharmayo mobile homepage adjustments (2026-10-08).
   - Mom, Baby & Fertility story: pinned copy and products in separate columns,
     visible prices, labelled add-to-cart button.
   - Hero: compact app preview (phone reel + lifestyle clip).
   - Bottom bar / chat button placement around the hero. */
@media (max-width: 767px) {
  /* Kept from the previous story stylesheet. */
  .preview-home-mobile-hero-section {
    margin-bottom: 0 !important;
  }

  .preview-home-stack--mobile {
    background: #fff !important;
  }

  .preview-home-mobile-editorial--poster {
    border-top: 0 !important;
  }

  /* Search bar on the homepage too (the shell hides it on home by default). */
  html .shell.shell--home[data-storefront-shell] .shell-search.shell-search--mobile[data-astro-cid-eqxwoc7i] {
    display: block !important;
  }

  /* ---------- Mom, Baby & Fertility story ---------- */
  /* Same pinned-copy story as before. Products keep their own column on the
     left (both languages) and the pinned copy keeps its own column on the
     right, so the two never overlap. Prices come from the storefront's own
     price block (visitor currency + secondary currency). */
  .preview-home-mobile-section--category.pharmayo-aoi-mom-story {
    --pharmayo-mom-col: clamp(8.4rem, 37vw, 9.25rem);
    --pharmayo-mom-gutter: 1rem;
    --pharmayo-mom-gap: 0.85rem;
  }

  /* Short fades only: the tall fade used to wash out products under the copy. */
  .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__top-fade {
    height: 3rem;
    margin-bottom: -3rem;
  }

  .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__bottom-fade {
    height: 6.5rem;
    margin-top: -6.5rem;
  }

  .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__stream {
    direction: ltr;
    gap: 2.1rem;
    padding: 2.2rem 0 3.5rem var(--pharmayo-mom-gutter);
  }

  .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__product {
    direction: ltr;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    height: auto;
    min-height: 0;
    width: var(--pharmayo-mom-col);
  }

  .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__product-copy {
    display: contents;
  }

  .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__product-copy h3 {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    font-size: 0.8rem;
    line-height: 1.3;
    margin: 0;
    order: 1;
    overflow: hidden;
  }

  html[dir='rtl'] .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__product-copy h3,
  html[dir='rtl'] .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__price {
    direction: rtl;
    text-align: right;
  }

  /* Product photo on its own: no white frame, padding or shadow around it. */
  .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__media {
    align-self: stretch;
    background: transparent;
    border-radius: 0.5rem;
    box-shadow: none;
    height: auto;
    order: 2;
    width: 100%;
  }

  /* Full-width photo; a tiny scale hides the edge during the few-px parallax. */
  .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__media img {
    height: auto;
    object-fit: cover;
    position: static;
    scale: 1.06;
    width: 100%;
  }

  .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__desc {
    display: none;
  }

  .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__price {
    align-items: baseline;
    column-gap: 0.4rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0.1rem 0 0;
    order: 3;
    row-gap: 0.05rem;
  }

  .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__price strong {
    color: #022c22 !important;
    font-family: Cairo, 'Noto Sans Arabic', sans-serif;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    order: 1;
  }

  .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__price .preview-home-mobile-product__compare {
    color: #8a7f76 !important;
    display: inline !important;
    font-size: 0.72rem !important;
    order: 2;
    text-decoration: line-through;
  }

  .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__price .preview-price-secondary {
    color: rgba(47, 41, 37, 0.7) !important;
    flex-basis: 100%;
    font-size: 0.72rem !important;
    order: 3;
  }

  .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__actions {
    align-items: center;
    align-self: stretch;
    direction: ltr;
    flex-direction: row;
    gap: 0.25rem;
    justify-content: flex-start;
    margin-top: 0.15rem;
    order: 4;
  }

  .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__action {
    box-shadow: 0 4px 10px rgba(47, 41, 37, 0.08);
    height: 1.95rem;
    width: 1.95rem;
  }

  .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__action svg {
    height: 0.95rem;
    width: 0.95rem;
  }

  .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__action--bag {
    background: #0f766e;
    border: 0;
    box-shadow: 0 6px 14px rgba(15, 118, 110, 0.24);
    color: #fff;
    flex: 1 1 auto;
    font-family: Cairo, 'Noto Sans Arabic', sans-serif;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    min-width: 0;
    overflow: hidden;
    padding: 0 0.4rem;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    width: auto;
  }

  /* Pinned copy: its own column to the right of the products. */
  .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__sticky-copy {
    box-sizing: border-box;
    margin-left: calc(var(--pharmayo-mom-gutter) + var(--pharmayo-mom-col) + var(--pharmayo-mom-gap));
    margin-right: 0;
    max-width: none;
    padding: 1.4rem 1rem 1.2rem 0;
    width: auto;
  }

  .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__sticky-copy h2 {
    font-size: clamp(1.4rem, 6.4vw, 1.9rem);
    margin-bottom: 0.75rem;
    max-width: none;
  }

  .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__sticky-copy p {
    font-size: 0.86rem;
    line-height: 1.5;
    margin-bottom: 1.1rem;
  }

  .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__cta {
    font-size: 0.66rem;
    letter-spacing: 0.05em;
    min-height: 2.75rem;
    min-width: 0;
    padding-inline: 0.8rem;
    text-align: center;
    width: 100%;
  }

  @media (max-height: 700px) {
    .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__sticky-copy {
      padding-top: 0.8rem;
    }

    .preview-home-mobile-section--category.pharmayo-aoi-mom-story .pharmayo-aoi-mom-story__sticky-copy p {
      font-size: 0.8rem;
      line-height: 1.45;
    }
  }

  /* Footer trust badges: title above its description (they ran together). */
  .shell-mobile-footer__trust article > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.1rem !important;
  }

  .shell-mobile-footer__trust article > div > strong,
  .shell-mobile-footer__trust article > div > span {
    display: block !important;
  }

  /* ---------- Hero: compact app preview + download button ---------- */
  .pharmayo-hero-app {
    align-items: center;
    animation: pharmayo-hero-app-in 0.6s ease both;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    left: 50%;
    position: absolute;
    top: clamp(7.5rem, 19svh, 10.5rem);
    transform: translateX(-50%);
    width: min(19rem, calc(100% - 2rem));
    z-index: 3;
  }

  @keyframes pharmayo-hero-app-in {
    from {
      opacity: 0;
      transform: translate(-50%, 0.6rem);
    }

    to {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }

  /* The download button now lives under the preview. */
  .preview-home-vero-intro:has(.pharmayo-hero-app) .preview-home-vero-intro__app-cta {
    display: none !important;
  }

  .pharmayo-hero-app__media {
    align-items: center;
    direction: ltr;
    display: flex;
    gap: 0.6rem;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .pharmayo-hero-app__phone {
    aspect-ratio: 9 / 20;
    background: #151515;
    border-radius: 1.05rem;
    box-shadow: 0 18px 36px rgba(70, 38, 26, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    display: block;
    padding: 0.2rem;
    width: clamp(4.6rem, 21vw, 5.6rem);
  }

  .pharmayo-hero-app__screen {
    background: #1d1d1d;
    border-radius: 0.86rem;
    display: block;
    height: 100%;
    overflow: hidden;
    width: 100%;
  }

  .pharmayo-hero-app__clip {
    aspect-ratio: 3 / 4;
    background: #3a2a22;
    border: 2px solid rgba(255, 255, 255, 0.78);
    border-radius: 0.95rem;
    box-shadow: 0 14px 30px rgba(70, 38, 26, 0.28);
    display: block;
    overflow: hidden;
    transform: translateY(0.85rem);
    width: clamp(4.4rem, 20vw, 5.3rem);
  }

  .pharmayo-hero-app video {
    display: block;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    width: 100%;
  }

  /* Download button: espresso glass pill with the Pharmayo app icon. */
  .pharmayo-hero-app__cta {
    -webkit-backdrop-filter: blur(14px);
    align-items: center;
    backdrop-filter: blur(14px);
    background: linear-gradient(135deg, rgba(40, 27, 21, 0.9) 0%, rgba(78, 55, 44, 0.86) 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1.15rem;
    box-shadow: 0 16px 34px rgba(46, 26, 18, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    color: #fff;
    display: flex;
    gap: 0.7rem;
    padding: 0.5rem 0.55rem;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s ease;
    width: 100%;
  }

  .pharmayo-hero-app__cta:active {
    transform: scale(0.97);
  }

  .pharmayo-hero-app__cta-icon {
    background: #fff;
    border-radius: 0.8rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    display: block;
    flex: 0 0 auto;
    height: 2.7rem;
    overflow: hidden;
    width: 2.7rem;
  }

  .pharmayo-hero-app__cta-icon img {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
  }

  .pharmayo-hero-app__cta-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.12rem;
    line-height: 1.15;
    min-width: 0;
  }

  .pharmayo-hero-app__cta-copy strong {
    color: #fff;
    font-family: Cairo, 'Noto Sans Arabic', sans-serif;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0;
  }

  .pharmayo-hero-app__cta-copy small {
    color: rgba(255, 255, 255, 0.72);
    font-family: Cairo, 'Noto Sans Arabic', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
  }

  .pharmayo-hero-app__cta-badge {
    align-items: center;
    background: linear-gradient(145deg, #f7d6da 0%, #e9aeb7 100%);
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(233, 174, 183, 0.35);
    color: #3b241d;
    display: flex;
    flex: 0 0 auto;
    height: 2.2rem;
    justify-content: center;
    width: 2.2rem;
  }

  .pharmayo-hero-app__cta-badge svg {
    fill: none;
    height: 1.1rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 1.1rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .pharmayo-hero-app {
      animation: none;
    }
  }

  /* ---------- Chat button / rating badge / back-to-top around the hero and bottom bar ---------- */
  /* The tab bar now shows on its own once the hero scrolls away. */
  .shell--home .shell-bottom-nav-toggle {
    display: none !important;
  }

  /* The hero has its own WhatsApp and categories buttons; keep floating badges off it. */
  html.pharmayo-home-hero-active #google-merchantwidget-iframe-wrapper,
  html.pharmayo-home-hero-active #ai-toggle-btn {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  html.pharmayo-home-dock-visible #ai-toggle-btn,
  html.pharmayo-home-dock-visible .shell-back-to-top {
    bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Full-screen category stories: keep their caption above the tab bar. */
  html.pharmayo-home-dock-visible .preview-home-vero-story__overlay {
    bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}