/* Alfasan Uganda product directory and medicine detail pages. */ .alfa-products,.alfa-product-detail{ --alfa-blue: #0088CC; --alfa-blue-dark: #19296E; --alfa-red: #19296E; --alfa-ink: #17344b; --alfa-muted: #607486; --alfa-line: #dce5ec; --alfa-surface: #E9F3FC; color: var(--alfa-ink); }
.alfa-product-detail__content{ width: min(100%, 1200px); margin-inline: auto; }
.alfa-products__content{ width: min(100%, 1520px); margin-inline: auto; }
.alfa-products__eyebrow{ margin: 0 0 .65rem; color: var(--alfa-red); font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.alfa-products__content,.alfa-product-detail__content{ padding: clamp(2.5rem, 6vw, 5rem) 1.25rem; }
.alfa-products__finder{ display: grid; gap: 1.5rem; align-items: end; max-width: 1020px; margin-inline: auto; margin-bottom: clamp(3rem, 6vw, 5rem); padding: clamp(1.25rem, 3vw, 2.25rem); border: 1px solid var(--alfa-line); border-radius: 14px; background: #fff; box-shadow: 0 16px 38px rgba(18, 49, 74, .08); }
.alfa-products__finder-copy h2,.alfa-products__results-heading h2{ margin: 0 0 .55rem; color: var(--alfa-blue-dark); font-size: clamp(1.55rem, 3vw, 2rem); }
.alfa-products__finder-copy > p:last-child{ margin: 0; color: var(--alfa-muted); }
.alfa-products__filters{ display: grid; gap: .85rem; }
.alfa-products__filters label{ display: grid; gap: .4rem; color: var(--alfa-ink); font-size: .85rem; font-weight: 700; }
.alfa-products__filters input,.alfa-products__filters select{ width: 100%; min-height: 48px; padding: .7rem .85rem; border: 1px solid #cbd8e1; border-radius: 7px; background: #fff; color: var(--alfa-ink); }
.alfa-products__filters .alfa-products__field{ position:relative; }
.alfa-products__filters .alfa-products__select{ min-height:52px; padding:.75rem 2.8rem .75rem 1rem; appearance:none; -webkit-appearance:none; border:1px solid var(--alfa-line); border-radius:14px; background:#fff; color:#19296E; font-size:.94rem; font-weight:700; line-height:1.35; cursor:pointer; box-shadow:0 3px 10px rgba(25,41,110,.05); transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.alfa-products__filters .alfa-products__field::after{ position:absolute; top:2.75rem; right:1.05rem; width:.55rem; height:.55rem; border-right:2px solid #0088CC; border-bottom:2px solid #0088CC; content:""; pointer-events:none; transform:rotate(45deg); transition:transform .2s ease,border-color .2s ease; }
.alfa-products__filters .alfa-products__field:focus-within::after{ border-color:#19296E; transform:translateY(3px) rotate(225deg); }
.alfa-products__filters .alfa-products__select:hover{ border-color:var(--alfa-line); background:#fff; }
.alfa-products__filters .alfa-products__select:focus-visible{ border-color:var(--alfa-line); outline:3px solid rgba(0,136,204,.18); outline-offset:2px; box-shadow:0 5px 16px rgba(0,136,204,.1); }
.alfa-products__filters .alfa-products__select option{ background:#E9F3FC; color:#19296E; font-weight:600; }
.alfa-products__filters input:focus{ border-color:var(--alfa-blue); outline:3px solid rgba(0,136,204,.18); }
.alfa-products__filter-actions{ display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; margin-top: .25rem; }
.alfa-products__filter-actions button{ display: inline-flex; min-height: 48px; gap: .8rem; align-items: center; justify-content: center; padding: .7rem 1.2rem; border-radius: 6px 0 6px 6px; background: var(--alfa-blue); color: #fff; font-weight: 800; transition: background .2s ease, transform .2s ease; }
.alfa-products__filter-actions button:hover{ transform: translateY(-2px); background: var(--alfa-blue-dark); }
.alfa-products__filter-actions a,.alfa-product-detail__back{ color: var(--alfa-blue-dark); font-size: .9rem; font-weight: 700; }
.alfa-products__results-heading{ display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; justify-content: space-between; margin-bottom: 1.35rem; }
.alfa-products__results-heading .alfa-products__eyebrow{ margin-bottom: .35rem; }
.alfa-products__active-filter{ margin: 0; color: var(--alfa-muted); font-size: .9rem; }
.alfa-products__grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.alfa-product-card{ display: flex; min-width: 0; overflow: hidden; flex-direction: column; border: 1px solid #d4e0e8; border-radius: 12px; background: #fff; box-shadow: 0 5px 16px rgba(18, 49, 74, .07); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.alfa-product-card:hover,.alfa-product-card:focus-within{ transform: translateY(-7px); border-color: var(--alfa-blue); box-shadow: 0 18px 34px rgba(18, 49, 74, .16); }
.alfa-product-card__link{ display: flex; height: 100%; flex-direction: column; color: inherit; text-decoration: none; }
.alfa-product-card__link:hover{ color: inherit; text-decoration: none; }
.alfa-product-card__media{ position: relative; display: grid; height:250px; min-height:250px; place-items: center; overflow: hidden; padding: 1rem; background:radial-gradient(ellipse at center,#fff 0%,#fff 42%,#E9F3FC 100%); }
.alfa-product-card__media .field,.alfa-product-card__media .field__item{ display: grid; width: 100%; height: 100%; min-height:0; place-items: center; }
.alfa-product-card__media img{ display:block; box-sizing:border-box; width:100%; height:100%; max-height:none; padding:.35rem; object-fit:contain; object-position:center; transition:transform .3s ease; }
.alfa-product-card:hover .alfa-product-card__media img{ transform: scale(1.04); }
.alfa-product-card__placeholder{ display: grid; width: 100%; min-height: 220px; place-items: center; color: rgba(1, 113, 185, .18); font-size: 6rem; font-weight: 800; }
.alfa-product-card__body{ display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 1rem 1.05rem 1.1rem; border-top: 1px solid #edf1f4; }
.alfa-product-card__species{ margin: 0 0 .3rem; color: var(--alfa-red); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.alfa-product-card__body h3{ margin: 0 0 .55rem; color: var(--alfa-blue-dark); font-size: 1.08rem; line-height: 1.3; }
.alfa-product-card__action{ display: inline-flex; gap: .6rem; align-items: center; margin-top: auto; color: var(--alfa-blue); font-size: .84rem; font-weight: 800; }
.alfa-products__pager{ margin-top: 2rem; }
.alfa-products__slider-controls{ display: none; }
.alfa-products__empty{ padding: clamp(2rem, 5vw, 4rem) 1rem; border: 1px dashed #b8cbd8; border-radius: 12px; background: var(--alfa-surface); text-align: center; }
.alfa-products__empty-mark{ display: grid; width: 54px; height: 54px; place-items: center; margin: 0 auto 1rem; border-radius: 50%; background: var(--alfa-blue); color: #fff; font-size: 1.5rem; font-weight: 800; }
.alfa-products__empty h2{ margin: .3rem 0 .6rem; color: var(--alfa-blue-dark); }
.alfa-products__empty > p:not(.alfa-products__eyebrow){ color: var(--alfa-muted); }
.alfa-products__empty > a{ display: inline-flex; margin-top: .4rem; padding: .7rem 1rem; border-radius: 6px; background: var(--alfa-blue); color: #fff; font-weight: 800; }
.alfa-products__disclaimer{ max-width: 900px; margin: 2.5rem auto 0; color: var(--alfa-muted); font-size: .78rem; line-height: 1.6; text-align: center; }
.alfa-product-detail__breadcrumb{ display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 2rem; color: rgba(255, 255, 255, .75); font-size: .82rem; }
.alfa-product-detail__breadcrumb a{ color: #fff; }
.alfa-product-detail__species{ display: flex; flex-wrap: wrap; gap: .55rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.alfa-product-detail__species li{ padding: .4rem .75rem; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; color: #fff; font-size: .85rem; font-weight: 700; }
.alfa-product-detail__image{ display: grid; width: min(100%, 640px); min-height: 240px; margin: 0 auto 2rem; padding: .75rem; place-items: center; overflow: hidden; border: 1px solid var(--alfa-line); border-radius: 12px; background: var(--alfa-surface); }
.alfa-product-detail__image .field,.alfa-product-detail__image .field__item{ display: grid; width: 100%; height: 100%; min-width: 0; min-height: 0; place-items: center; }
.alfa-product-detail__image img{ display: block; width: 100%; height: clamp(260px, 32vw, 360px); max-width: 100%; object-fit: contain; object-position: center; }
.alfa-product-detail__panel-content ul{ display: grid; gap: .35rem; margin: 0; padding-left: 1.2rem; }
.alfa-product-detail__accordions{ display: grid; gap: .8rem; }
.alfa-product-detail__panel{ overflow: hidden; border: 1px solid var(--alfa-line); border-radius: 8px; background: #fff; }
.alfa-product-detail__panel summary{ display: flex; min-height: 66px; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; color: #154a91; cursor: pointer; font-size: 1.1rem; font-weight: 800; list-style: none; }
.alfa-product-detail__panel summary::-webkit-details-marker{ display: none; }
.alfa-product-detail__panel summary::after{ display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #eef1f3; color: var(--alfa-blue); content: "+"; font-size: 1.2rem; line-height: 1; }
.alfa-product-detail__panel[open] summary::after{ content: "−"; }
.alfa-product-detail__panel-content{ padding: 1.2rem 1.25rem; border-top: 1px solid #e5ebef; color: var(--alfa-muted); line-height: 1.75; }
.alfa-product-detail__panel-content > :last-child{ margin-bottom: 0; }
.alfa-product-detail__ifu{ display: block; margin-top: 1.2rem; padding: 1.25rem; border: 1px solid var(--alfa-line); border-radius: 8px; background: var(--alfa-surface); }
.alfa-product-detail__ifu h2{ margin: 0 0 .3rem; color: var(--alfa-blue-dark); font-size: 1.2rem; }
.alfa-product-detail__ifu p:last-child{ margin: 0; color: var(--alfa-muted); font-size: .9rem; }
.alfa-product-detail__ifu-actions{ display: flex; flex-wrap: wrap; gap: .65rem; align-items: flex-start; justify-content: center; margin-top: 1rem; }
.alfa-product-detail__ifu-actions a{ display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: .65rem 1rem; border: 1px solid var(--alfa-blue); border-radius: 6px 0 6px 6px; background: var(--alfa-blue); color: #fff; font-weight: 800; text-decoration: none; }
.alfa-product-detail__ifu-actions a:first-child{ background: #fff; color: var(--alfa-blue-dark); }
.alfa-product-detail__ifu-actions a:hover{ background: var(--alfa-blue-dark); color: #fff; }
.alfa-product-detail__ifu-viewer{ min-width: 0; }
.alfa-product-detail__ifu-viewer[open]{ order: 2; flex: 1 0 100%; width: 100%; }
.alfa-product-detail__ifu-viewer summary{ display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: .65rem 1rem; border: 1px solid var(--alfa-blue); border-radius: 6px 0 6px 6px; background: #fff; color: var(--alfa-blue-dark); cursor: pointer; font-weight: 800; list-style: none; }
.alfa-product-detail__ifu-viewer summary::-webkit-details-marker{ display: none; }
.alfa-product-detail__ifu-viewer summary:hover{ background: var(--alfa-blue-dark); color: #fff; }
.alfa-product-detail__ifu-viewer iframe{ display: block; width: min(100%, 1100px); height: clamp(480px, 72vh, 900px); margin: 1rem auto 0; border: 1px solid var(--alfa-line); border-radius: 6px; background: #fff; }
.alfa-product-detail__back{ display: inline-flex; margin-top: 1.5rem; }
@media (min-width: 760px) {.alfa-products__finder{ grid-template-columns: minmax(220px, .75fr) minmax(0, 1.5fr); } .alfa-products__filters{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .alfa-products__search{ grid-column: 1 / -1; } .alfa-products__filter-actions{ grid-column: 1 / -1; } }
@media (min-width: 681px) and (max-width: 1050px) {.alfa-products__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) {.alfa-products__grid:not(.is-slider){ grid-template-columns: repeat(2, minmax(0, 1fr)); } .alfa-products__grid.is-slider{ display: flex; gap: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .alfa-products__grid.is-slider::-webkit-scrollbar{ display: none; } .alfa-products__slide{ display: grid; min-width: 100%; flex: 0 0 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: .8rem; padding: .2rem .15rem .75rem; scroll-snap-align: start; scroll-snap-stop: always; } .alfa-products__slide .alfa-product-card{ min-height: 100%; border-radius: 10px; } .alfa-products__slide .alfa-product-card__media{ min-height: 112px; padding: .6rem; } .alfa-products__slide .alfa-product-card__media img{ max-height: 96px; } .alfa-products__slide .alfa-product-card__placeholder{ min-height: 96px; font-size: 3.5rem; } .alfa-products__slide .alfa-product-card__body{ padding: .7rem; } .alfa-products__slide .alfa-product-card__species{ font-size: .61rem; } .alfa-products__slide .alfa-product-card__body h3{ font-size: .88rem; } .alfa-products__slide .alfa-product-card__action{ font-size: .76rem; } .alfa-products__slider-controls{ display: flex; gap: .8rem; align-items: center; justify-content: center; margin-top: .7rem; } .alfa-products__slider-controls button{ min-height: 40px; padding: .5rem .8rem; border: 1px solid var(--alfa-blue); border-radius: 6px; background: #fff; color: var(--alfa-blue-dark); font-size: .82rem; font-weight: 800; } .alfa-products__slider-controls button:disabled{ border-color: var(--alfa-line); color: #8a9aa6; cursor: not-allowed; } .alfa-products__slider-status{ min-width: 3.5rem; color: var(--alfa-muted); font-size: .82rem; font-weight: 700; text-align: center; } }
@media (max-width: 680px) {.alfa-product-detail__image{ min-height: 240px; padding: .5rem; } .alfa-product-detail__image img{ height: clamp(240px, 72vw, 320px); } }
@media (prefers-reduced-motion: reduce) {.alfa-products *,.alfa-product-detail *{ scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* Keep product pack shots fully visible in the compact mobile catalogue cards. */
@media (max-width: 680px) {
  .alfa-products__grid:not(.is-slider) .alfa-product-card__media,
  .alfa-products__slide .alfa-product-card__media{height:142px;min-height:142px;padding:.55rem;}
  .alfa-products__grid:not(.is-slider) .alfa-product-card__media img,
  .alfa-products__slide .alfa-product-card__media img{height:100%;max-height:none;}
}