/* v3.3.0 – Special-offer cards: always 2 per row (phone, tablet, desktop). Loaded last, scoped to .mop-offers so nothing else is touched. */

/* grid (offers PAGE) – two columns everywhere, rows go downward */
.mop-offers{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px;align-items:start;overflow:visible!important}
.mop-offers>.mop-offer{width:auto;max-width:none;flex:none!important;min-width:0}

/* phones: each card becomes a compact "product tile" (image on top, details below) so two fit side by side */
@media (max-width:600px){
  .mop-offers{gap:10px!important}
  .mop-offers>.mop-offer{display:flex!important;flex-direction:column;background:#fff;border:1px solid #dcebe2;border-radius:16px;box-shadow:0 6px 16px rgba(10,58,40,.08)}
  .mop-offers>.mop-offer:hover{transform:none}
  .mop-offers>.mop-offer .im{padding-top:56.25%!important;border-radius:0}
  .mop-offers>.mop-offer .side{position:static!important;inset:auto!important;width:auto!important;height:auto!important;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:10px 10px 12px;background:none!important}
  .mop-offers>.mop-offer .mop-badge{position:absolute!important;top:8px;right:8px;left:auto;z-index:3;min-width:0;padding:4px 7px;border-radius:10px;align-self:auto}
  .mop-offers>.mop-offer .mop-badge b{font-size:13px}
  .mop-offers>.mop-offer .mop-badge small{font-size:8px}
  body .mop-offers>.mop-offer .t,body .mop-offers>.mop-offer .t a{color:#0d2a1f!important;text-shadow:none;font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
  .mop-offers>.mop-offer .p{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:2px 8px;text-align:left}
  body .mop-offers>.mop-offer .p b{order:1;font-size:18px;color:#0e6b43!important}
  body .mop-offers>.mop-offer .p s{order:2;font-size:12px;color:#8a9a91!important}
  body .mop-offers>.mop-offer .go{margin-top:2px;padding:9px 6px;font-size:12.5px;color:#fff!important}
  .mop-offers>.mop-offer .go svg{display:none}
}
/* very small phones */
@media (max-width:360px){
  body .mop-offers>.mop-offer .t,body .mop-offers>.mop-offer .t a{font-size:12px}
  body .mop-offers>.mop-offer .p b{font-size:16px}
}