/* Bank debit-card lists only; product pages and recommendation blocks are unchanged. */
#crapp.debit-bank-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}
#crapp.debit-bank-grid > .order {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}
#crapp.debit-bank-grid > .order-show { display: none; }
#crapp.debit-bank-grid > :not(.order) { grid-column: 1 / -1; }
#crapp.debit-bank-grid > .order > .order__header {
    width: 100%;
    min-height: 2.8em;
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 1.4;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}
#crapp.debit-bank-grid > .order > .order__left {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    grid-template-rows: minmax(90px, auto) auto;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}
#crapp.debit-bank-grid .order__left > .order__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 90px;
    min-width: 0;
    margin: 0;
    padding: 0;
}
#crapp.debit-bank-grid .order__left > .order__logo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0 !important; /* Legacy image has an inline 7px top margin. */
    object-fit: contain;
}
#crapp.debit-bank-grid .order__left > .rating_div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    margin: 0;
    padding: 0;
}
#crapp.debit-bank-grid .rating_div > .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0 !important; /* Overrides inline max-content. */
    width: 100%;
    max-width: 110px;
    min-height: 42px;
    margin: 0;
    padding: 10px 12px !important;
    box-sizing: border-box;
    line-height: 1.3;
    text-align: center;
}
#crapp.debit-bank-grid .order__left > div:last-child:not(.rating_div) {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}
#crapp.debit-bank-grid .order__left .order__profit {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 0 14px;
    box-sizing: border-box;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
#crapp.debit-bank-grid > .order > .order__right {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    justify-content: flex-end;
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 4px 0 0;
    padding: 0;
}
#crapp.debit-bank-grid .order__right > .order__buttons {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    margin: 12px 0 0;
    padding: 0;
}
#crapp.debit-bank-grid .order__buttons > .button,
#crapp.debit-bank-grid .order_dop_ads > .button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    box-sizing: border-box;
    text-align: center;
}
#crapp.debit-bank-grid .order_dop_ads:empty { display: none; }
#crapp.debit-bank-grid .order_dop_ads { width: 100%; margin: 0; }
/* Let long titles share their natural height within each row where supported. */
@supports (grid-template-rows: subgrid) {
    #crapp.debit-bank-grid > .order {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        row-gap: 0;
    }
    #crapp.debit-bank-grid > .order-show { display: none; }
    /* Archive notices are an extra item; keep their normal flow. */
    #crapp.debit-bank-grid > .order:has(> p) {
        display: flex;
    }
    #crapp.debit-bank-grid > .order-show:has(> p) { display: none; }
}
@media (max-width: 1050px) and (min-width: 701px) {
    #crapp.debit-bank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    #crapp.debit-bank-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    #crapp.debit-bank-grid > .order { padding: 16px; }
    #crapp.debit-bank-grid > .order > .order__header { min-height: 0; }
}
@media (max-width: 360px) {
    #crapp.debit-bank-grid > .order > .order__left { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
    #crapp.debit-bank-grid .order__left > .order__logo { width: 120px; height: 78px; }
}
/* credits.js reveals archived items with inline display:block/flex. */
#crapp.debit-bank-grid > .order.order-show[style*="display: block"],
#crapp.debit-bank-grid > .order.order-show[style*="display: flex"] {
    display: flex !important;
}

/* Reset horizontal-layout bases before stacking actions vertically.
   The legacy stylesheet gives every child flex-basis:250px. */
#crapp.debit-bank-grid .order__right > .order__buttons > * {
    flex: 0 0 auto;
    height: auto;
    order: 0;
}
#crapp.debit-bank-grid .order__right > .order__buttons > .button,
#crapp.debit-bank-grid .order_dop_ads > .button {
    flex: 0 0 auto;
    height: auto;
    min-height: 44px;
    padding: 12px 16px;
    line-height: 20px;
}
/* PHP leaves whitespace inside the empty advertising container. */
#crapp.debit-bank-grid .order__buttons > .order_dop_ads:not(:has(*)) {
    display: none;
}
#crapp.debit-bank-grid .order__buttons > .order_dop_ads {
    min-height: 0;
    padding: 0;
}