/* Home page bands (HomePage.jsx): shortcuts, hero, concerns, deal, packs, help. */
.dr-shortcuts { display: flex; gap: 14px; overflow-x: auto; padding: 12px 0 4px; margin-inline: calc(-1 * var(--dr-gutter)); padding-inline: var(--dr-gutter); }
.dr-shortcut { flex: none; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.dr-shortcut__pic { width: 64px; border-radius: 50%; box-shadow: 0 0 0 2px var(--dr-white), 0 0 0 4px var(--dr-gold); }
.dr-shortcut__name { font-size: 11.5px; font-weight: 700; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 1200px) { .dr-shortcuts { display: none; } }

.dr-hero { position: relative; margin-top: 12px; }
.dr-hero--editorial { display: flex; flex-direction: column; gap: 24px; padding: 28px 20px; background: var(--dr-hero-wash); border: 1px solid var(--dr-gold); border-radius: var(--dr-r-card); min-height: 340px; }
.dr-hero--editorial .dr-hero__card { max-width: 560px; }
.dr-hero__title { font-size: 30px; line-height: 1.08; letter-spacing: .06em; color: var(--dr-gold-ink); animation: drRise .6s ease both; }
[dir="rtl"] .dr-hero__title { letter-spacing: 0; }
.dr-hero__sub { margin: 16px 0 24px; font-size: 15px; line-height: 1.55; max-width: 460px; animation: drRise .6s ease .12s both; }
.dr-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; animation: drRise .6s ease .24s both; }
.dr-hero__tiles { position: relative; height: 210px; }
.dr-hero__tile { position: absolute; display: block; background: var(--dr-white); padding: 6px; border-radius: 4px; box-shadow: 0 0 0 1px var(--dr-hairline), 0 14px 28px -14px rgba(0,0,0,.35); transition: transform .2s ease; }
.dr-hero__tile--0 { inset-inline-start: 4%; top: 6%; width: 42%; z-index: 2; }
.dr-hero__tile--1 { inset-inline-start: 40%; top: 0; width: 36%; z-index: 1; }
.dr-hero__tile--2 { inset-inline-start: 62%; top: 24%; width: 34%; z-index: 3; }
@media (hover: hover) { .dr-hero__tile:hover { transform: translateY(-4px); } }
.dr-hero--image { border-radius: var(--dr-r-card); overflow: hidden; }
.dr-hero--image .dr-hero__media { margin-inline: calc(-1 * var(--dr-gutter)); }
[dir="rtl"] .dr-hero--image .dr-hero__pic img { transform: scaleX(-1); }
.dr-hero--image .dr-hero__card { margin: -32px var(--dr-gutter) 0; position: relative; padding: 20px; background: var(--dr-white); border-radius: var(--dr-r-card); box-shadow: var(--dr-shadow-lift); }
.dr-hero--image .dr-hero__title { font-size: 22px; letter-spacing: .04em; }
.dr-hero--image .dr-hero__sub { font-size: 14px; margin: 10px 0 14px; }
@media (min-width: 600px) { .dr-hero__title { font-size: 34px; } }
@media (min-width: 900px) {
  .dr-hero--editorial { flex-direction: row; align-items: center; justify-content: space-between; padding: 48px; min-height: 420px; }
  .dr-hero--editorial .dr-hero__tiles { flex: 0 0 46%; height: 340px; }
  .dr-hero__title { font-size: clamp(40px, 4.6vw, 64px); letter-spacing: clamp(.06em, .9vw, .08em); }
  .dr-hero__sub { font-size: 17px; }
  .dr-hero--image { display: grid; grid-template-columns: 1fr; }
  .dr-hero--image .dr-hero__media { margin: 0; }
  .dr-hero--image .dr-hero__card { position: absolute; inset-inline-end: 48px; top: 50%; transform: translateY(-50%); width: 380px; margin: 0; }
}

.dr-routine-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; }
.dr-routine-banner__title { font-size: 20px; color: var(--dr-gold-ink); }
.dr-routine-banner__body { margin-top: 6px; font-size: 14px; color: var(--dr-ink-muted); }

.dr-concerns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .dr-concerns { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.dr-concern { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--dr-cream); border-radius: var(--dr-r-card); }
.dr-concern__pic { border-radius: 4px; overflow: hidden; }
@media (hover: hover) { .dr-concern__pic img { transition: transform .3s ease; } .dr-concern:hover .dr-concern__pic img { transform: scale(1.04); } }
.dr-concern__name { font-size: 14.5px; font-weight: 700; }
.dr-concern__count { font-size: 12px; color: var(--dr-ink-muted); }
@media (min-width: 900px) { .dr-concern__name { font-size: 16px; } }

.dr-deal { display: grid; grid-template-columns: 1fr; gap: 20px; padding: 20px; border: 1px solid var(--dr-gold); border-radius: var(--dr-r-card); background: var(--dr-brand-tint); }
.dr-deal__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.dr-deal__title { font-size: 20px; color: var(--dr-gold-ink); }
.dr-deal__name { font-size: 17px; font-weight: 700; }
@media (min-width: 900px) { .dr-deal { grid-template-columns: 2fr 3fr; align-items: center; padding: 32px; } .dr-deal__title { font-size: 26px; } }

.dr-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .dr-packs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1200px) { .dr-packs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dr-pack { position: relative; display: flex; flex-direction: column; padding: 10px; border: 1px solid var(--dr-hairline); border-radius: var(--dr-r-card); }
.dr-pack__badge { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 1; background: var(--dr-gold); color: var(--dr-ink); }
.dr-pack__pic { margin-bottom: 10px; }
.dr-pack__name { font-size: 15px; font-weight: 700; }
.dr-pack__items { margin: 6px 0 0; padding-inline-start: 16px; font-size: 12.5px; color: var(--dr-ink-muted); }
.dr-pack__price { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.dr-pack__saving { width: 100%; font-size: 12px; color: var(--dr-success); font-weight: 700; }

.dr-help { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .dr-help { grid-template-columns: 1fr 1fr; } }
.dr-help__card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; }
.dr-help__title { font-size: 19px; }
.dr-help__body { font-size: 14px; color: var(--dr-ink-muted); }