/* Option 7: photo first. Scoped exclusively to deal cards. */
.deal.featured,.deal.compact{padding:0;display:flex;flex-direction:column;border:1px solid #e9eaf0;border-radius:22px;background:#fff;box-shadow:0 5px 22px #293b6f08;min-height:0;color:#304c8d}
.deal.featured .deal-art,.deal.compact .deal-art{position:relative;inset:auto;width:100%;height:280px;margin:0;border-radius:0;flex-shrink:0;background:#faf8f5;overflow:hidden}
.deal .deal-art{background:transparent!important;padding:0!important}
.deal .deal-art img{object-fit:cover!important;object-position:center top!important;background:transparent!important}.deal .deal-art picture{height:100%;width:100%}
/* Every photo keeps its card type's shared height, including at mobile sizes.
   Crop the real photo inside that frame; never resize a single brand's frame. */
/* Crop only the verified transparent side padding in this Liewood source. */
.deal .deal-art>img[src*="liewood-sale-foto"]{position:absolute;top:0;left:-25%;right:auto;width:150%!important;height:100%!important;max-width:none!important;flex:none}
.deal.featured .deal-copy,.deal.compact .deal-copy{position:static;width:100%;height:auto;margin:0;padding:23px;display:flex;flex:1;flex-direction:column;align-items:stretch;gap:22px;min-width:0}
.deal .deal-identity{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;min-height:38px}
.deal .deal-identity .brand{display:flex;align-items:center;margin:0!important;height:38px;min-height:38px;max-width:150px;min-width:0;flex:0 1 auto;letter-spacing:0}
.deal .deal-identity .brand img{display:block;max-width:100%;max-height:32px;width:auto;object-fit:contain}.deal .deal-identity .brand-0{padding:0 9px;font-size:20px}
.deal .deal-identity .badge{position:static;inset:auto;flex:none;margin:0;padding:7px 12px;font-size:17px;font-weight:700;line-height:1.35;background:#ff354c;border-radius:99px;width:auto;height:auto;pointer-events:none}
.deal.featured h3,.deal.compact h3{display:block;min-height:0;width:100%;margin:0;padding:0;font-size:21px;font-weight:600;line-height:1.4;letter-spacing:-.2px;text-align:left}
.deal h3 strong,.deal h3 b,.deal h3 .deal-description{display:inline;min-height:0;white-space:normal;font-weight:inherit}.deal h3 strong::after{content:' '}
.deal.featured .deal-button,.deal.compact .deal-button{position:static;inset:auto;align-self:stretch;display:flex;justify-content:space-between;gap:10px;margin-top:auto;width:100%;height:auto;min-height:47px;padding:13px 18px;border-radius:99px;background:#5db779;font-size:16px;font-weight:600;line-height:1.3;color:#fff}.deal .deal-button span{font-size:22px}.deal .deal-button:hover{background:#469d64}
.deal.compact .deal-art{height:215px}.deal.compact .deal-copy{padding:17px;gap:19px}.deal.compact .deal-identity{gap:8px}.deal.compact .deal-identity .brand{max-width:112px!important}.deal.compact .deal-identity .badge{font-size:14px;padding:6px 9px}.deal.compact h3{font-size:18px}.deal.compact .deal-button{justify-content:flex-end}
@media(min-width:721px) and (max-width:1000px){.deal.featured .deal-copy{padding:16px;gap:18px}.deal.featured .deal-art{height:235px}.deal.featured h3{font-size:18px}.deal.featured .deal-identity{gap:8px}.deal.featured .deal-identity .brand{max-width:110px!important}.deal.featured .deal-identity .badge{font-size:14px;padding:6px 9px}.deal.featured .deal-button{font-size:15px;padding:12px 14px}}
@media(max-width:720px){.deal.featured .deal-art{height:300px}.deal.featured .deal-copy{padding:23px}.deal.compact .deal-art{height:190px}.deal.compact .deal-copy{padding:13px;gap:16px}.deal.compact .deal-identity{flex-wrap:wrap;align-content:flex-start;min-height:72px;gap:6px}.deal.compact .deal-identity .brand{max-width:100%!important}.deal.compact h3{font-size:17px}.deal.compact .deal-button{padding:10px 14px}}
@media(max-width:390px){.deal.featured .deal-identity .brand{max-width:140px!important}.deal.featured .deal-identity .badge{font-size:16px}.deal.compact .deal-art{height:170px}.deal.compact h3{font-size:16px}}
/* Preserve the existing arrow-only action on the smaller cards. */
.deal.compact .deal-button{width:47px;height:47px;min-height:47px;padding:0;align-self:flex-end;justify-content:center}

/* Example: emphasize discount only. */
.deal.featured h3,.deal.compact h3{font-weight:400}.deal h3 strong{font-weight:700}.deal h3 b,.deal h3 .deal-description{font-weight:400}.deal .deal-identity .badge{font-size:20px;padding:8px 14px}.deal .deal-identity .brand{max-width:140px}
@media(min-width:721px) and (max-width:1000px){.deal.featured .deal-identity .badge{font-size:17px;padding:7px 10px}.deal.featured .deal-identity .brand{max-width:100px!important}}
@media(max-width:390px){.deal.featured .deal-identity .badge{font-size:19px;padding:8px 12px}.deal.featured .deal-identity .brand{max-width:130px!important}}

.deal.compact .deal-identity .badge{font-size:16px;padding:7px 10px}
@media(min-width:1001px){.deal.compact .deal-identity .brand{max-width:102px!important}}

/* Keep the whole approved Kleertjes wordmark visible in every card size. */
.deal .deal-identity .brand.brand-kleertjes{background:none!important;padding:0!important;width:145px;max-width:100%!important;min-width:0;flex:0 1 145px;overflow:visible}
.deal .deal-identity .brand.brand-kleertjes img{display:block;width:100%;height:auto;max-height:28px;object-fit:contain;object-position:center}
@media(max-width:720px){.deal.compact .deal-identity .brand.brand-kleertjes{flex-basis:100%;width:125px}}