/* ==========================================================================
   OIC Inspired — lote P1 (Pharmacy page only, /pharmacy/)
   Extra components not covered by interior.css. Loaded after interior.css.
   Everything is prefixed oic26-p1- and hangs off .oic26-root like the rest
   of the design system. Does not touch interior.css / site.css.
   ========================================================================== */

/* Readability cap for plain paragraph blocks inside the full-width layout */
.oic26-p1-lede { max-width: 720px; }

/* Small real pharmacy logo badge, used once, kept intentionally small */
.oic26-p1-logo-row { display: flex; align-items: center; gap: 12px; margin-bottom: -4px; }
.oic26-p1-logo-row img { display: block; width: 148px; height: auto; }
.oic26-p1-logo-row span { font-size: 13px; color: var(--oic26-text-soft); }

/* ---- "The pharmacy offers" icon grid (5 items) -------------------------- */
.oic26-p1-offer-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px;
}
.oic26-p1-offer-card {
  background: #fff; border: 1px solid var(--oic26-border); border-radius: 12px;
  padding: 22px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  text-align: left;
}
.oic26-p1-offer-card p { font-size: 14px; line-height: 1.4; font-weight: 700; color: var(--oic26-navy); margin: 0; }

@media (max-width: 1024px) {
  .oic26-p1-offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .oic26-p1-offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Refills vs Transfers compact comparison ----------------------------- */
.oic26-p1-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.oic26-p1-compare-card {
  border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 12px;
}
.oic26-p1-compare-card--green { background: var(--oic26-green-tint); }
.oic26-p1-compare-card--blue { background: var(--oic26-blue-tint); }
.oic26-p1-compare-card h3 { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 17px; color: var(--oic26-navy); margin: 0; }
.oic26-p1-compare-card ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.oic26-p1-compare-card li {
  font-size: 14px; font-weight: 700; color: var(--oic26-navy);
  background: rgba(255,255,255,0.65); border-radius: 999px; padding: 7px 14px;
}

@media (max-width: 600px) {
  .oic26-p1-compare { grid-template-columns: 1fr; }
}

/* ---- "How to refill" tab panels ------------------------------------------ */
.oic26-p1-tabpanel { display: flex; gap: 18px; align-items: flex-start; }
.oic26-p1-tabpanel .oic26-icon { margin-top: 2px; }
.oic26-p1-tabpanel-body { display: flex; flex-direction: column; gap: 6px; }
.oic26-p1-tabpanel-body h4 { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 16px; color: var(--oic26-navy); margin: 0; }
.oic26-p1-tabpanel-body p { font-size: 16px; line-height: 1.6; color: var(--oic26-text-soft); margin: 0; }
.oic26-p1-tabpanel-body a { color: var(--oic26-green-dark); text-decoration: underline; text-underline-offset: 3px; }
.oic26-p1-tabpanel-body a:hover { color: var(--oic26-navy); }

@media (max-width: 600px) {
  .oic26-p1-tabpanel { gap: 14px; }
}

/* ---- "Pharmacy Portal" highlight card ------------------------------------ */
.oic26-p1-portal {
  background: var(--oic26-green-tint); border-radius: 14px; padding: 28px 30px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.oic26-p1-portal-body { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; }
.oic26-p1-portal-body h3 { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 18px; color: var(--oic26-navy); margin: 0; }
.oic26-p1-portal-body p { font-size: 15px; color: var(--oic26-text-soft); margin: 0; }
.oic26-p1-portal .oic26-btn { flex-shrink: 0; }

@media (max-width: 600px) {
  .oic26-p1-portal { padding: 22px; }
  .oic26-p1-portal .oic26-btn { width: 100%; }
}

/* ---- Wide variant of the photo-proposal placeholder ----------------------- */
.oic26-photo-proposal--wide { aspect-ratio: 21 / 8; min-height: 0; padding: 24px; }
@media (max-width: 768px) { .oic26-photo-proposal--wide { aspect-ratio: 16 / 9; } }

/* ---- Single contact + hours block (one source of truth for all numbers) -- */
.oic26-p1-contact {
  background: var(--oic26-bg-grey); border: 1px solid var(--oic26-border); border-radius: 14px;
  padding: 32px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px;
}
.oic26-p1-contact-item { display: flex; flex-direction: column; gap: 10px; }
.oic26-p1-contact-item strong {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--oic26-green-dark);
}
.oic26-p1-contact-item a, .oic26-p1-contact-item span { font-size: 16px; line-height: 1.5; color: var(--oic26-text-soft); }
.oic26-p1-contact-item a { font-weight: 700; color: var(--oic26-navy); text-decoration: none; }
.oic26-p1-contact-item a:hover { color: var(--oic26-green-dark); }
.oic26-p1-contact-item .oic26-p1-hours-line { display: block; }

@media (max-width: 1024px) {
  .oic26-p1-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .oic26-p1-contact { grid-template-columns: 1fr; padding: 24px; gap: 22px; }
}

/* Hours & contact as an edge-to-edge band */
.oic26-p1-contact-band { background: var(--oic26-blue-tint); }
.oic26-p1-contact-band-inner { max-width: var(--oic26-container); margin: 0 auto; padding: 56px var(--oic26-gutter) 60px; display: flex; flex-direction: column; gap: 26px; }
.oic26-p1-contact-band-inner h2 { font-size: 34px; line-height: 1.1; color: var(--oic26-navy); }
.oic26-p1-contact-band .oic26-p1-contact { background: transparent; border: 0; border-radius: 0; padding: 0; gap: 18px; }
.oic26-p1-contact-band .oic26-p1-contact-item { background: #fff; border: 1px solid rgba(31,59,87,0.10); border-radius: 12px; padding: 22px 22px 24px; }
.oic26-p1-contact-band .oic26-p1-contact-item a, .oic26-p1-contact-band .oic26-p1-contact-item span { color: var(--oic26-navy); }
.oic26-ihero-logo-title { margin: 0; line-height: 0; }
@media (max-width: 768px) { .oic26-p1-contact-band-inner { padding: 40px var(--oic26-gutter) 44px; } .oic26-p1-contact-band-inner h2 { font-size: 28px; } }

/* Refill options as home-style tiles: big icon, title, text; hover tints the icon only */
.oic26-tiles.oic26-p1-refill { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.oic26-p1-refill .oic26-tile { aspect-ratio: auto; min-height: 250px; text-decoration: none; }
.oic26-p1-refill .oic26-tile p { font-size: 15px; line-height: 1.5; }
.oic26-p1-refill .oic26-tile p a { color: inherit; font-weight: 700; text-decoration: underline; }
.oic26-p1-refill .oic26-tile--navy p a { color: #fff; }
@media (max-width: 1024px) { .oic26-tiles.oic26-p1-refill { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) { .oic26-tiles.oic26-p1-refill { grid-template-columns: 1fr; } }

/* Pharmacy Portal band: pharmacy green gradient, the pick-up window photo on
   the right dissolving into it (mask, so the gradient shows through), rings. */
.oic26-p1-portal-band { position: relative; overflow: hidden; background: linear-gradient(115deg, #bfeaa9 0%, #cff5bb 50%, #e6f8d9 100%); min-height: 520px; display: flex; align-items: center; }
.oic26-p1-portal-photo { position: absolute; top: 0; bottom: 0; right: 0; width: 56%; max-width: 860px; z-index: 1; pointer-events: none; }
.oic26-p1-portal-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 100% 30%; display: block;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 26%, #000 48%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 26%, #000 48%);
}
.oic26-p1-ring { position: absolute; border-radius: 50%; border: 60px solid rgba(255,255,255,0.38); pointer-events: none; z-index: 0; }
.oic26-p1-ring--a { width: 620px; height: 620px; left: -230px; bottom: -300px; }
.oic26-p1-ring--b { width: 320px; height: 320px; left: 30%; top: -150px; border-width: 44px; border-color: rgba(255,255,255,0.3); }
.oic26-p1-ring--c { width: 180px; height: 180px; left: 42%; bottom: 40px; border-width: 26px; border-color: rgba(255,255,255,0.28); }
.oic26-p1-portal-inner { position: relative; z-index: 2; width: 100%; max-width: var(--oic26-container); margin: 0 auto; padding: 64px var(--oic26-gutter); }
.oic26-p1-portal-copy { max-width: 440px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.oic26-p1-portal-icon { display: flex; color: var(--oic26-navy); }
.oic26-p1-portal-icon svg { width: 84px; height: 84px; }
.oic26-p1-portal-copy h2 { font-size: 40px; line-height: 1.1; color: var(--oic26-navy); }
.oic26-p1-portal-copy p { font-size: 17px; line-height: 1.55; color: #2f3f4c; }
.oic26-p1-portal-copy .oic26-btn { margin-top: 8px; }
@media (max-width: 1024px) { .oic26-p1-portal-photo { width: 52%; } .oic26-p1-portal-copy h2 { font-size: 34px; } }
@media (max-width: 768px) {
  .oic26-p1-portal-band { min-height: 0; display: flex; flex-direction: column; }
  .oic26-p1-portal-inner { order: 1; padding: 44px var(--oic26-gutter) 28px; }
  .oic26-p1-portal-copy { max-width: none; }
  .oic26-p1-portal-photo { order: 2; position: relative; width: 100%; max-width: none; height: 300px; }
  .oic26-p1-portal-photo img { object-position: 50% 0%; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 14%); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 14%); }
  .oic26-p1-ring--b, .oic26-p1-ring--c { display: none; }
}

/* Pharmacy hero: wider photo so the PICK UP sign, the pharmacist and the counter all fit */
.oic26-ihero--pharmacy .oic26-ihero-bg { width: 60%; }
@media (max-width: 768px) { .oic26-ihero--pharmacy .oic26-ihero-bg { width: 100%; aspect-ratio: 3 / 2; } }