/* ===== O10 Bang t2800u / t2810 reconfirm 2026-11-06 =====
   Canonical: one white rounded .zo-sheet, stacked FULL-WIDTH horizontal rows.
   Each .zo-cp row: price+title LEFT | benefits CENTER | SAVE seal RIGHT.
   Applies to every offer section (#offers and /specials/ OFID variants).
   Mobile (<=600) keeps stacked vertical cards. Angles/headlines/copy untouched.
*/
@media (min-width: 601px) {
  /* sheet = single column of full-width rows */
  html body section.zo.zo7 .zo-sheet,
  html body section.zo .zo-sheet {
    grid-template-columns: 1fr !important;
  }
  /* separators become horizontal between rows */
  html body section.zo .zo-cp + .zo-cp {
    border-left: 0 !important;
    border-top: 2px dashed var(--line) !important;
  }
  html body section.zo .zo-cp + .zo-cp::before {
    top: -13px !important;
    left: -12px !important;
  }
  html body section.zo .zo-cp + .zo-cp::after {
    top: -13px !important;
    bottom: auto !important;
    left: auto !important;
    right: -12px !important;
  }
  /* each coupon = horizontal row */
  html body section.zo .zo-cp {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "tr li seal"
      "nm li seal"
      "big li seal"
      "was li seal" !important;
    grid-template-rows: auto auto auto 1fr !important;
    column-gap: 32px !important;
    row-gap: 6px !important;
    align-items: start !important;
    padding: 28px 32px !important;
  }
  html body section.zo .zo-pr { display: contents !important; }
  html body section.zo .zo-tr { grid-area: tr !important; }
  html body section.zo .zo-nm {
    grid-area: nm !important;
    min-height: 0 !important;
  }
  html body section.zo .zo-big {
    grid-area: big !important;
    justify-self: start !important;
    margin-top: 4px !important;
  }
  html body section.zo .zo-was {
    grid-area: was !important;
    padding: 0 !important;
  }
  html body section.zo .zo-was br { display: none !important; }
  html body section.zo .zo-was s { margin-left: 0.3em !important; }
  html body section.zo .zo-li {
    grid-area: li !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 0 0 28px !important;
    border-top: 0 !important;
    border-left: 1px solid var(--line) !important;
  }
  html body section.zo .zo-seal {
    grid-area: seal !important;
    align-self: center !important;
    margin: 0 !important;
  }
  html body section.zo .zo-cp .smp {
    top: 10px !important;
    right: 14px !important;
  }
}
/* narrower tablet band keeps tighter left column */
@media (min-width: 601px) and (max-width: 767px) {
  html body section.zo .zo-cp {
    grid-template-columns: 200px minmax(0, 1fr) auto !important;
    column-gap: 20px !important;
    padding: 24px !important;
  }
  html body section.zo .zo-li { padding-left: 20px !important; }
  html body section.zo .zo-li li { font-size: 13.5px !important; }
  html body section.zo .zo-seal { width: 64px !important; height: 64px !important; font-size: 10px !important; }
  html body section.zo .zo-seal b { font-size: 16px !important; }
  html body section.zo .zo-big { font-size: 54px !important; }
  html body section.zo .zo-nm { font-size: 18px !important; }
}

/* O10: cancel prior desktop single-card ~1/3 centering so 1-offer sheets are full-width rows too */
@media (min-width: 1024px) {
  html body section.zo .zo-sheet:has(> .zo-cp:only-of-type) {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}