/* Direction A homepage, ported from A/home.html and A/css/{base,theme}.css.
 * The existing SEO H1 and fleet copy are retained. Illustrated discs come from C. */
.home-page main { padding-block-start: 0; animation: none; }
.da-home { font-family: Inter, Vazirmatn, sans-serif; color: var(--c-text); padding-block-end: 40px; }
.da-home h1, .da-home h2, .da-home h3 { font-family: inherit; color: var(--c-text-strong); letter-spacing: -.01em; }
.da-home a { text-decoration: none; }
.da-hero { position: relative; overflow: hidden; padding-block: 24px 16px; background: linear-gradient(180deg, var(--c-hero-from), var(--c-hero-to)); }
.da-hero::after { content: ''; position: absolute; width: 320px; height: 320px; inset-inline-start: -120px; inset-block-start: -80px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--c-accent-rgb), .14), transparent); pointer-events: none; }
.da-hero-grid { position: relative; z-index: 1; padding-inline: 16px; margin-inline: auto; max-width: 1280px; }
.da-eyebrow { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding-inline: 12px; border-radius: 999px; background: var(--c-accent-subtle); color: var(--c-accent-text); font-size: 13px; font-weight: 700; }
.da-hero h1 { font-size: 28px; font-weight: 800; line-height: 1.35; margin-block: 16px 0; }
.da-hero h1 span { line-height: inherit; }
.da-lead { margin-block: 8px 0; color: var(--c-text-2); font-size: 15px; line-height: 1.85; }
.da-hero-search { display: flex; align-items: center; gap: 8px; height: 60px; margin-block-start: 24px; padding: 6px; padding-inline-start: 16px; border: 1px solid var(--c-surface); border-radius: var(--r-search); background: var(--c-surface); color: var(--c-text-3); box-shadow: var(--c-search-shadow); }
.da-hero-search:focus-within { border-color: var(--c-brand); outline: 3px solid var(--c-focus-ring); }
.da-hero-search input { min-width: 0; flex: 1; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; color: var(--c-text); font: inherit; font-size: 15px; outline: none; }
.da-hero-search input::placeholder { color: var(--c-text-3); }
.da-hero-search button { height: 48px; border: 0; border-radius: 14px; padding-inline: 24px; color: var(--c-on-brand); background: var(--c-brand); box-shadow: var(--c-cta-shadow); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.da-hero-search button:hover { background: var(--c-brand-hover); }
.da-home .hero-popular { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto; margin-block-start: 16px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
.hero-popular::-webkit-scrollbar, .da-cats::-webkit-scrollbar, .da-products::-webkit-scrollbar, .da-hero-trust::-webkit-scrollbar { display: none; }
.da-pop-label { flex: none; font-size: 13px; color: var(--c-text-3); font-weight: 600; }
.da-home .hero-pop { flex: none; display: inline-flex; align-items: center; height: 32px; padding-inline: 14px; border-radius: 999px; border: 1px solid var(--c-border); background: rgba(255,255,255,.7); color: var(--c-text-2); font-size: 13px; font-weight: 600; }
.da-hero-trust { display: flex; gap: 16px; justify-content: flex-start; overflow-x: auto; margin: 24px -16px 0; padding: 16px 16px 0; border-block-start: 1px solid var(--c-border); list-style: none; scrollbar-width: none; }
.da-hero-trust li { display: flex; align-items: center; gap: 6px; flex: none; color: var(--c-text-2); font-size: 11px; font-weight: 600; white-space: nowrap; }
.da-hero-trust:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 4px; border-radius: var(--r-xs); }
.da-hero-trust .da-icon { color: var(--c-brand-text); }
.da-hero-trust .da-trust-destination { order: 1; }
.da-hero-vis { display: none; }
.da-section { max-width: 1280px; padding: 32px 16px; margin-inline: auto; }
.da-categories { padding-block-start: 24px; }
.da-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-block-end: 16px; }
.da-section-head h2 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.4; }
.da-section-head > a { display: inline-flex; align-items: center; gap: 4px; color: var(--c-brand-text); font-size: 14px; font-weight: 700; white-space: nowrap; }
html[dir="ltr"] .da-section-head > a .da-icon { transform: scaleX(-1); }
.da-cats { display: flex; gap: 8px; overflow-x: auto; margin-block: 0; margin-inline: -16px; padding-inline: 16px; padding-block-end: 4px; list-style: none; scrollbar-width: none; }
.da-cats > li { flex: none; }
.da-cat { flex: none; display: flex; align-items: center; gap: 8px; height: 48px; padding-inline: 6px 16px; border-radius: 999px; background: var(--c-surface); box-shadow: var(--c-shadow-1); color: var(--c-text); font-size: 14px; font-weight: 600; white-space: nowrap; }
.da-cat-count { font-size: 12px; color: var(--c-text-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.da-cat .cat-ill { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border-radius: 50%; --il-bg: var(--c-brand-subtle); --il-a: var(--c-brand-text); --il-b: var(--c-brand); background: var(--il-bg); }
.da-cat .cat-ill .ill { width: 28px; height: 28px; }
.da-cat .cat-ill.t1, .da-cat .cat-ill.t3 { --il-bg: var(--c-accent-subtle); --il-a: var(--c-accent-text); --il-b: var(--c-accent); }
.da-products { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; overflow-x: auto; margin-inline: -16px; padding: 0 16px 16px; scrollbar-width: none; scroll-snap-type: x proximity; }
.da-product-card { position: relative; display: flex; flex-direction: column; padding: 8px; background: var(--c-surface); border: 1px solid transparent; border-radius: var(--r-card); box-shadow: var(--c-card-shadow); overflow: hidden; scroll-snap-align: start; }
.da-card-media { display: block; aspect-ratio: 1; background: var(--c-photo-well); border-radius: var(--r-well); overflow: hidden; }
.da-card-media img { width: 100%; height: 100%; display: block; object-fit: contain; mix-blend-mode: multiply; padding: 10%; }
.da-home .da-card-media img, .da-home .da-hv-well img { animation: none; background: transparent; opacity: 1; }
.da-fit-cover img { object-fit: cover; mix-blend-mode: normal; padding: 0; }
.da-favorite { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--c-fav-bg); color: var(--c-fav-c); cursor: pointer; backdrop-filter: blur(8px); }
.da-favorite[aria-pressed="true"] { color: var(--c-brand-text); }
.da-favorite[aria-pressed="true"] svg { fill: var(--c-brand-subtle); }
.da-card-body { display: flex; flex-direction: column; flex: 1; padding: 12px 4px 4px; min-width: 0; }
.da-card-meta { display: flex; align-items: center; gap: 6px; min-height: 24px; }
.da-strength { display: inline-flex; align-items: center; height: 24px; padding-inline: 10px; border-radius: var(--r-chip); background: var(--c-accent-subtle); color: var(--c-accent-text); font-size: 12px; font-weight: 700; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.da-card-title bdi[dir="ltr"],
.da-hv-cap bdi[dir="ltr"] { unicode-bidi: isolate; }
.da-form { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text-3); font-size: 12px; }
.da-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 700; line-height: 1.55; margin-block: 8px 0; }
.da-card-title a { color: var(--c-text-strong); }
.da-generic { font-size: 12.5px; color: var(--c-text-3); line-height: 1.6; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0; }
.da-product-card .product-rating { display: flex; align-items: center; gap: 6px; margin-block-start: 6px; font-size: 12px; }
.da-product-card .stars { display: inline-flex; gap: 1px; color: var(--c-star); }
.da-product-card .stars i { font-size: 12px; }
.da-product-card .stars i:not(.far) { color: var(--c-star); }
.da-product-card .rating-text { direction: ltr; font-family: Inter, Vazirmatn, sans-serif; font-size: 12px; font-weight: 700; color: var(--c-text-2); }
.da-product-card .rating-count { font-weight: 500; color: var(--c-text-3); }
.da-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-start: auto; padding-block-start: 12px; }
.da-card-foot form { margin: 0; }
.da-quick-add { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--r-qadd); background: var(--c-qadd-bg); color: var(--c-qadd-c); cursor: pointer; }
.da-quick-add:hover { background: var(--c-brand-hover); }
.da-quick-add-label { display: none; }
.da-details { font-size: 12px; color: var(--c-brand-text); }
/* Existing below-the-fold information stays server rendered on A surfaces. */
.da-home > .features-section, .da-home > .home-app-cta-section, .da-home > .cta-section, .da-home > .seo-content-section, .da-home > .seo-extended-content { max-width: 1200px; margin: 32px auto; padding: 24px 16px; color: var(--c-text); border-radius: var(--r-xl); }
.da-home .section-title, .da-home .cta-title { font-size: 24px; font-weight: 800; }
.da-home .feature-card { padding: 24px; }
.da-home .feature-title { font-size: 18px; font-weight: 700; margin-block: 16px 8px; }
.da-home .feature-description, .da-home .section-subtitle, .da-home .cta-subtitle { color: var(--c-text-2); }
.da-home .cta-section { background: linear-gradient(135deg, var(--c-brand-subtle), var(--c-accent-subtle)); }
.da-home .cta-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.da-home .cta-btn, .da-home .home-app-cta-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 24px; border-radius: var(--r-btn); background: var(--c-brand); color: var(--c-on-brand); }
.da-home .seo-drug-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.da-home .seo-links, .da-seo-searches { display: flex; gap: 8px; flex-wrap: wrap; }
.da-home .seo-links a, .da-seo-searches a { color: var(--c-brand-text); }
.da-home .seo-sub-title { font-size: 20px; margin-block: 24px 16px; }
.da-home .seo-faq-item { padding-block: 16px; border-block-end: 1px solid var(--c-border); }
.da-home .seo-faq-item summary { cursor: pointer; font-weight: 700; }
html[data-theme="dark"] .da-hero-search { background: var(--c-surface-pop); border-color: var(--c-border); }
html[data-theme="dark"] .da-home .hero-pop { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .da-cat, html[data-theme="dark"] .da-product-card { border: 1px solid var(--c-border); }
/* Multiply on a light photo-well muddies packaging in dark mode. */
html[data-theme="dark"] .da-card-media img,
html[data-theme="dark"] .da-hv-well img { mix-blend-mode: normal; }
/* Secondary CTA on mint gradient — brand outline, not white glass. */
.da-home .cta-btn-secondary {
  background: transparent;
  color: var(--c-brand-text);
  border: 1.5px solid var(--c-brand);
  box-shadow: none;
}
.da-home .cta-btn-secondary:hover {
  background: var(--c-brand-subtle);
  color: var(--c-brand-text);
}
/* Tighter card type for Persian/Arabic line boxes */
html[dir="rtl"] .da-card-title { line-height: 1.65; }
html[dir="rtl"] .da-generic { line-height: 1.75; }
.da-product-card:focus-within { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.da-quick-add:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
@media (min-width: 1024px) {
  .da-hero { padding-block: 32px 16px; background: transparent; }
  .da-hero::after { display: none; }
  .da-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; min-height: 540px; padding: 48px 64px; border-radius: 40px; overflow: hidden; background: radial-gradient(500px 400px at 15% 60%, rgba(var(--c-accent-rgb), .1), transparent 70%), linear-gradient(160deg, var(--c-hero-from), var(--c-surface-2) 70%); }
  .da-hero h1 { font-size: 50px; line-height: 1.3; }
  .da-lead { margin-block-start: 16px; font-size: 17px; max-width: 520px; }
  .da-hero-search { margin-block-start: 32px; height: 68px; }
  .da-hero-search button { height: 56px; padding-inline: 32px; font-size: 16px; }
  .da-home .hero-popular { flex-wrap: wrap; margin-inline: 0; padding: 0; overflow: visible; }
  .da-hero-trust { margin: 16px 0 0; padding: 12px 0 0; gap: 8px; justify-content: space-between; overflow: visible; }
  .da-hero-vis { display: block; position: relative; height: 500px; }
  .da-orb { position: absolute; inset: 20px 40px; border-radius: 50%; background: radial-gradient(closest-side, var(--c-orb), transparent 72%); }
  .da-hero-vis .hv-card { position: absolute; background: var(--c-surface); border-radius: 28px; box-shadow: var(--c-shadow-2); padding: 12px; color: var(--c-text-strong); }
  /* Shift main toward inline-start so the mini can peek at inline-end without covering the price. */
  .da-hv-main { width: 300px; inset-inline-start: 38%; margin-inline-start: -150px; inset-block-start: 8px; z-index: 2; }
  .da-hv-well { height: 260px; border-radius: 20px; overflow: hidden; background: var(--c-photo-well); }
  .da-hv-well img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 10%; }
  .da-hv-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 8px 6px; line-height: 1.5; position: relative; z-index: 1; background: var(--c-surface); border-radius: 0 0 16px 16px; }
  .da-hv-cap > div { display: flex; flex-direction: column; min-width: 0; }
  .da-hv-cap b { font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .da-hv-cap small { font-size: 13px; color: var(--c-text-3); }
  .da-hv-cap .da-price { font-size: 22px; flex: none; position: relative; z-index: 1; }
  /* Beside the photo well (not the caption); main z-index keeps price on top if boxes still touch. */
  .da-hero-vis .da-hv-mini { display: flex; align-items: center; gap: 12px; width: 220px; inset-inline-end: 12px; inset-block-end: auto; inset-block-start: 188px; border-radius: 20px; padding: 10px; z-index: 1; }
  .da-hv-mini .da-hv-well { width: 64px; height: 64px; border-radius: 14px; flex: none; }
  .da-hv-mini img { padding: 6px; }
  .da-hv-mini b { display: block; font-size: 14px; line-height: 1.4; max-height: 2.8em; overflow: hidden; }
  .da-hv-mini .da-price { flex: none; }
  .da-hv-pill { position: absolute; display: flex; align-items: center; gap: 8px; height: 44px; padding-inline: 16px; border-radius: 999px; background: var(--c-surface); box-shadow: var(--c-shadow-2); font-size: 13px; font-weight: 700; z-index: 3; }
  .da-hv-pill svg { color: var(--c-brand-text); }
  .da-hv-p1 { inset-inline-start: 0; inset-block-start: 64px; }
  .da-hv-p2 { inset-inline-end: 8px; inset-block-start: 56px; color: var(--c-accent-text); }
  .da-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }
  .da-section { padding: 48px 40px; }
  .da-categories { padding-block-start: 40px; }
  .da-section-head { margin-block-end: 24px; }
  .da-section-head h2 { font-size: 28px; }
  .da-cats { flex-wrap: wrap; justify-content: flex-start; margin: 0; padding: 0; gap: 12px; overflow: visible; }
  .da-cat { height: 56px; padding-inline: 8px 20px; font-size: 15px; }
  .da-cat .cat-ill { width: 40px; height: 40px; }
  .da-cat .cat-ill .ill { width: 30px; height: 30px; }
  .da-products { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; overflow: visible; }
  .da-card-title { font-size: 16px; }
  .da-card-foot .da-price { font-size: 20px; }
  .da-quick-add { width: auto; min-width: 40px; gap: 4px; padding-inline: 14px; font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; }
  .da-quick-add-label { display: inline; }
  html[data-theme="dark"] .da-hero-grid { border: 1px solid var(--c-border); background: radial-gradient(500px 400px at 15% 60%, rgba(var(--c-accent-rgb), .1), transparent 70%), linear-gradient(160deg, var(--c-hero-from), var(--c-surface) 75%); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .da-hero-grid { margin-inline: 24px; padding-inline: 32px; gap: 32px; }
  .da-hero h1 { font-size: 40px; }
  .da-hv-main { width: 260px; inset-inline-start: 36%; margin-inline-start: -130px; }
  .da-hv-well { height: 220px; }
  .da-hero-vis .da-hv-mini { width: 190px; inset-block-start: 160px; inset-inline-end: 8px; }
}
/* Mobile / tablet: one card only — no absolute mini stack, price fully visible. */
@media (max-width: 1023px) {
  .da-hero { overflow: visible; }
  .da-hero-vis {
    display: block;
    position: relative;
    height: auto;
    margin-block-start: 20px;
    max-width: 320px;
    margin-inline: auto;
    overflow: hidden;
  }
  .da-orb,
  .da-hv-pill,
  .da-hero-vis .da-hv-mini {
    display: none !important;
  }
  .da-hv-main {
    position: relative;
    inset: auto;
    width: 100%;
    margin-inline: 0;
    z-index: auto;
    background: var(--c-surface);
    border-radius: 28px;
    box-shadow: var(--c-shadow-2);
    padding: 12px;
    color: var(--c-text-strong);
  }
  .da-hv-well { height: 200px; border-radius: 20px; overflow: hidden; background: var(--c-photo-well); }
  .da-hv-well img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 10%; }
  .da-hv-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 4px 4px;
    line-height: 1.5;
  }
  .da-hv-cap > div { display: flex; flex-direction: column; min-width: 0; }
  .da-hv-cap b { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .da-hv-cap small { font-size: 12px; color: var(--c-text-3); }
  .da-hv-cap .da-price { font-size: 20px; flex: none; }
}
@media (prefers-reduced-motion: no-preference) { .da-product-card { transition: transform .2s; } .da-product-card:hover { transform: translateY(-4px); } }

/* "Why PharmaWeb" features: match the other home cards (surface, border,
   radius) and give titles/body a readable size instead of loose floating text. */
.da-home .features-section .row { --bs-gutter-y: 12px; }
body.home-page .da-home .feature-card {
  height: 100% !important; display: grid !important; grid-template-columns: 44px 1fr !important; column-gap: 14px !important; row-gap: 2px !important; align-items: start !important; align-content: start !important; grid-template-rows: auto auto !important;
  padding: 18px !important; border: 1px solid var(--c-border) !important; border-radius: var(--r-lg, 20px) !important;
  background: var(--c-surface) !important; box-shadow: none !important; text-align: start !important;
}
body.home-page .da-home .feature-card .feature-icon {
  grid-row: span 2 !important; width: 44px !important; height: 44px !important; margin: 0 !important; display: grid !important; place-items: center !important;
  border-radius: 12px !important; background: var(--c-brand-subtle) !important;
}
body.home-page .da-home .feature-card .feature-icon :is(svg, img, i) { width: 22px !important; height: 22px !important; font-size: 20px !important; }
body.home-page .da-home .feature-card .feature-title { margin: 0 0 4px !important; font-size: 16px !important; font-weight: 800 !important; color: var(--c-text-strong) !important; line-height: 1.5 !important; }
body.home-page .da-home .feature-card .feature-description { margin: 0 !important; font-size: 14px !important; line-height: 1.75 !important; }