/* DR1 STORE V41 — product images & discoverability, no backend changes. */
/* Consistent storefront product grid; single items no longer float to far right. */
body[data-page="topups"] .topup-grid{
 display:flex!important;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:18px!important;
}
body[data-page="topups"] .topup-grid>.topup-group-heading{
 flex:0 0 100%;width:100%;margin:9px 0 1px!important;
}
body[data-page="topups"] .topup-grid>.topup-group-heading[hidden]{display:none!important}
body[data-page="topups"] .topup-grid>.topup-card.v25-card{
 flex:0 1 355px;width:min(100%,355px);min-width:0;max-width:100%;
 display:flex;flex-direction:column;
}
/* One large image layer plus a discreet type chip instead of a 58px illustration in a wide card. */
body[data-page="topups"] .topup-grid .topup-card.v25-card .topup-card-top{
 position:relative!important;display:block!important;min-height:0!important;height:265px!important;
 width:calc(100% + 44px)!important;margin:-22px -22px 6px!important;
 border-radius:17px 17px 0 0!important;overflow:hidden!important;
 background:linear-gradient(135deg,#1b3555,#091528)!important;
}
body[data-page="topups"] .topup-grid .topup-card.v25-card .topup-card-top .topup-emoji:has(img){
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;
 display:block!important;padding:0!important;margin:0!important;border:0!important;
 border-radius:0!important;background:transparent!important;overflow:hidden!important;
}
body[data-page="topups"] .topup-grid .topup-card.v25-card .topup-card-top .topup-emoji:has(img) > img.dr1-card-thumb{
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 min-width:100%!important;min-height:100%!important;max-width:none!important;max-height:none!important;
 margin:0!important;padding:0!important;display:block!important;
 object-fit:cover!important;object-position:center center!important;filter:none!important;
 transform:none!important;border:0!important;border-radius:0!important;
}
/* Only used as seamless background behind transparencies; avoid a second visible centered square. */
body[data-page="topups"] .topup-grid .topup-card.v25-card .topup-card-top .topup-emoji > img.v25-photo-backdrop{
 position:absolute!important;inset:-18px!important;width:calc(100% + 36px)!important;
 height:calc(100% + 36px)!important;max-width:none!important;max-height:none!important;
 object-fit:cover!important;filter:blur(18px) brightness(.6)!important;opacity:.65!important;
}
body[data-page="topups"] .topup-grid .topup-card.v25-card .topup-card-top .topup-kind{
 position:absolute!important;inset-inline-start:12px!important;inset-inline-end:auto!important;
 top:12px!important;bottom:auto!important;z-index:3!important;
 border-radius:999px;background:#081a2be6!important;border:1px solid #5da9d37c;
 padding:7px 12px;backdrop-filter:blur(7px);color:#d0f4ff;
}
/* Other product listing photos: true full-bleed without padding. */
body[data-page="services"] .v25-card.card .icon,
body[data-page="villages"] .v25-card .village-picture{
 height:245px!important;min-height:245px!important;padding:0!important;overflow:hidden!important;
}
body[data-page="services"] .v25-card.card .icon img,
body[data-page="villages"] .v25-card .village-picture img{
 width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
 padding:0!important;object-fit:cover!important;object-position:center!important;
}
/* A single item in the services or villages catalogue should not be stranded at the edge. */
body[data-page="services"] #cards:has(>.v25-card:only-child),
body[data-page="villages"] #villageGrid:has(>.v25-card:only-child){
 display:flex!important;justify-content:center!important;
}
body[data-page="services"] #cards>.v25-card:only-child,
body[data-page="villages"] #villageGrid>.v25-card:only-child{width:min(100%,355px)!important;flex:0 1 355px!important}
/* Make the village-offer option unmistakable on a phone: full-width fifth category. */
body[data-page="home"] .v26-category-grid [data-category-photo="sell"]{border-color:#edbd6c82;background:linear-gradient(135deg,#0d223b,#102b35)!important}
body[data-page="home"] .v26-category-grid [data-category-photo="sell"] .v26-photo img{object-fit:cover!important;padding:0!important;object-position:center 45%!important}
@media(max-width:700px){
 body[data-page="home"] .v26-category-grid [data-category-photo="sell"]{
  grid-column:1/-1;min-height:0!important;display:flex!important;flex-direction:row!important;align-items:center;
 }
 body[data-page="home"] .v26-category-grid [data-category-photo="sell"] .v26-photo{
  width:46%!important;flex:0 0 46%;height:135px!important;border:none!important;
 }
 body[data-page="home"] .v26-category-grid [data-category-photo="sell"]>strong{
  width:54%!important;flex:1;padding:12px 10px!important;font-size:clamp(.9rem,3.5vw,1.25rem)!important;text-align:center;
 }
}
@media(max-width:600px){
 body[data-page="topups"] .topup-grid>.topup-card.v25-card{flex-basis:100%;width:100%;max-width:440px}
 body[data-page="topups"] .topup-grid .topup-card.v25-card .topup-card-top{height:clamp(230px,81vw,345px)!important}
 body[data-page="services"] .v25-card.card .icon,
 body[data-page="villages"] .v25-card .village-picture{height:clamp(220px,72vw,325px)!important;min-height:0!important}
}
/* Final precedence: legacy V30 gives this selector 148px !important. Match its ID. */
body[data-page="topups"] #topupGrid .topup-card.v25-card .topup-card-top .topup-emoji:has(img){
 height:100%!important;min-height:100%!important;max-height:none!important;
}
body[data-page="topups"] #topupGrid .topup-card.v25-card .topup-card-top .topup-emoji:has(img)>img.dr1-card-thumb{
 width:100%!important;height:100%!important;object-fit:cover!important;
}
/* Match media aspect to the source (near-square passes show without text cropping). */
body[data-page="topups"] #topupGrid .topup-card.v25-card .topup-card-top{
 height:auto!important;aspect-ratio:var(--v41-photo-ratio,1.1)!important;
 min-height:0!important;
}