/* RED20-V13-CHECKOUT-SUBCATEGORY-20260902
   UI-only override. Keeps existing checkout IDs/radio values/cart calculations intact.
*/
:root{--r20:#ff5a00;--r20-ink:#20242a;--r20-muted:#6f7782;--r20-line:#e8ebef;--r20-soft:#f6f7f9;--r20-green:#16844a}

/* =========================
   SUBCATEGORY ARTWORK
   Use the original media file and let the artwork occupy the visual frame.
   ========================= */
html body .listing-page .red20-subcategory-grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:20px 14px!important;
  align-items:start!important;
}
html body .listing-page .red20-subcategory-grid>.red20-subcategory-cell{
  width:auto!important;max-width:none!important;flex:none!important;padding:0!important;margin:0!important;
}
html body .listing-page .red20-subcategory-card{
  display:block!important;width:100%!important;text-decoration:none!important;color:var(--r20-ink)!important;
}
html body .listing-page .red20-subcategory-media{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;height:190px!important;aspect-ratio:auto!important;
  background:#eff0f2!important;border:1px solid #e8eaed!important;border-radius:12px!important;
  overflow:hidden!important;padding:0!important;box-shadow:none!important;
}
html body .listing-page .red20-subcategory-media img{
  display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  object-fit:cover!important;object-position:center!important;padding:0!important;margin:0!important;transform:scale(1.02)!important;
}
html body .listing-page .red20-subcategory-card:hover .red20-subcategory-media img{transform:scale(1.055)!important;transition:transform .2s ease!important}
html body .listing-page .red20-subcategory-name{
  display:block!important;margin:8px 1px 0!important;padding:0!important;min-height:38px!important;
  font-size:14px!important;line-height:1.3!important;font-weight:650!important;color:var(--r20-ink)!important;text-align:left!important;
}

/* =========================
   CHECKOUT: SIMPLE VISUAL HIERARCHY
   ========================= */
html body .red20-checkout-page .red20-checkout-main{
  background:transparent!important;padding-top:0!important;
}
html body .red20-checkout-page .red20-checkout-main>.checkout-form-title{
  margin:0 0 12px!important;font-size:20px!important;font-weight:850!important;color:var(--r20-ink)!important;
}
html body .red20-checkout-page .ship-details-wrapper,
html body .red20-checkout-page .red20-checkout-card,
html body .red20-checkout-page .payment-methods{
  background:#fff!important;border:1px solid var(--r20-line)!important;border-radius:16px!important;box-shadow:0 3px 14px rgba(26,31,38,.035)!important;
}
html body .red20-checkout-page .ship-details-wrapper{padding:16px!important}
html body .red20-checkout-page .shipped-details{
  background:var(--r20-soft)!important;border:0!important;border-radius:12px!important;padding:13px 14px!important;margin-top:10px!important;
}
html body .red20-checkout-page .shipped-details p{margin:2px 0!important;font-size:12px!important;line-height:1.45!important}
html body .red20-change-address{
  display:inline-flex!important;align-items:center!important;gap:6px!important;border:1px solid #ffd6bf!important;background:#fff7f2!important;
  color:var(--r20)!important;border-radius:10px!important;padding:8px 11px!important;font-size:11px!important;font-weight:850!important;text-decoration:none!important;
}
html body .red20-change-address:hover{background:#fff0e7!important;color:#e84f00!important}

/* Generic icon/header block used by delivery, wallet, payment and bank details. */
html body .red20-checkout-card{padding:15px!important;margin:12px 0!important}
html body .red20-checkout-card-head,
html body .red20-payment-heading,
html body .red20-bank-title{
  display:flex!important;align-items:center!important;gap:10px!important;margin-bottom:11px!important;
}
html body .red20-checkout-card-icon{
  flex:0 0 38px!important;width:38px!important;height:38px!important;border-radius:11px!important;background:#fff1e8!important;color:var(--r20)!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;
}
html body .red20-checkout-card-head h4,
html body .red20-payment-heading h5,
html body .red20-bank-title strong{
  display:block!important;margin:0!important;color:var(--r20-ink)!important;font-size:14px!important;line-height:1.25!important;font-weight:850!important;
}
html body .red20-checkout-card-head p,
html body .red20-payment-heading p,
html body .red20-bank-title small{
  display:block!important;margin:2px 0 0!important;color:var(--r20-muted)!important;font-size:10.5px!important;line-height:1.35!important;font-weight:500!important;
}

/* Delivery date */
html body .red20-delivery-card{margin-top:14px!important}
html body .red20-delivery-date{max-width:390px!important;height:46px!important}
html body .red20-delivery-date .input-group-text{height:46px!important;border:1px solid var(--r20-line)!important;border-right:0!important;background:#fafafa!important;color:var(--r20)!important;border-radius:11px 0 0 11px!important}
html body .red20-delivery-date .form-control{height:46px!important;border:1px solid var(--r20-line)!important;border-left:0!important;background:#fafafa!important;border-radius:0 11px 11px 0!important;font-size:12px!important;color:var(--r20-ink)!important}
html body .red20-delivery-date .form-control:focus{box-shadow:none!important;border-color:#ffd1b7!important;background:#fff!important}

/* Delivery time slots: clear tap cards, not old radio text rows. */
html body .red20-time-slot-grid{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important;margin-top:12px!important;
}
html body .red20-time-slot{
  position:relative!important;min-height:58px!important;margin:0!important;padding:0!important;
}
html body .red20-time-slot .custom-control-input{
  position:absolute!important;opacity:0!important;pointer-events:none!important;
}
html body .red20-time-slot .custom-control-label{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;width:100%!important;height:100%!important;min-height:58px!important;
  margin:0!important;padding:10px 12px!important;border:1px solid var(--r20-line)!important;border-radius:12px!important;background:#fafbfc!important;
  color:#404650!important;font-size:11px!important;line-height:1.3!important;font-weight:750!important;cursor:pointer!important;
}
html body .red20-time-slot .custom-control-label:before,
html body .red20-time-slot .custom-control-label:after{display:none!important}
html body .red20-time-slot .custom-control-label i{color:var(--r20)!important;font-size:15px!important}
html body .red20-time-slot .custom-control-input:checked+.custom-control-label{
  border-color:var(--r20)!important;background:#fff6f0!important;box-shadow:0 0 0 2px rgba(255,90,0,.08)!important;color:var(--r20-ink)!important;
}
html body .red20-time-slot .custom-control-input:checked+.custom-control-label:after{content:'✓'!important;display:inline-flex!important;margin-left:auto!important;position:static!important;width:20px!important;height:20px!important;border-radius:50%!important;background:var(--r20)!important;color:#fff!important;align-items:center!important;justify-content:center!important;font-size:10px!important}

/* Wallet: one simple toggle card. */
html body .red20-wallet-card{padding:0!important;overflow:hidden!important}
html body .red20-wallet-label{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;width:100%!important;margin:0!important;padding:13px 14px!important;cursor:pointer!important;
}
html body .red20-wallet-left{display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important}
html body .red20-wallet-left strong{display:block!important;font-size:13px!important;color:var(--r20-ink)!important;font-weight:850!important}
html body .red20-wallet-left small{display:block!important;margin-top:2px!important;font-size:10.5px!important;color:var(--r20-muted)!important;white-space:normal!important}
html body .red20-wallet-card #wallet_balance{
  appearance:none!important;-webkit-appearance:none!important;position:relative!important;flex:0 0 44px!important;width:44px!important;height:25px!important;
  margin:0!important;border:0!important;border-radius:30px!important;background:#d8dce1!important;cursor:pointer!important;outline:0!important;
}
html body .red20-wallet-card #wallet_balance:before{
  content:''!important;position:absolute!important;width:19px!important;height:19px!important;left:3px!important;top:3px!important;border-radius:50%!important;background:#fff!important;box-shadow:0 1px 4px rgba(0,0,0,.18)!important;transition:.18s ease!important;
}
html body .red20-wallet-card #wallet_balance:checked{background:var(--r20)!important}
html body .red20-wallet-card #wallet_balance:checked:before{transform:translateX(19px)!important}

/* Payment methods */
html body .red20-checkout-page .payment-methods{padding:15px!important;margin-top:12px!important}
html body .red20-checkout-page .payment-methods>.shipped-details{background:transparent!important;padding:0!important;margin:0!important;max-width:none!important;width:100%!important}
html body .red20-checkout-page .payment-methods table,html body .red20-checkout-page .payment-methods tbody{display:block!important;width:100%!important;margin:0!important}
html body .red20-checkout-page .payment-methods tbody{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
html body .red20-checkout-page .payment-methods tr{
  display:grid!important;grid-template-columns:24px 46px minmax(0,1fr)!important;align-items:center!important;gap:8px!important;min-height:66px!important;
  margin:0!important;padding:9px 11px!important;border:1px solid var(--r20-line)!important;border-radius:12px!important;background:#fff!important;cursor:pointer!important;
}
html body .red20-checkout-page .payment-methods tr:hover{border-color:#ffc6a5!important;background:#fffaf7!important}
html body .red20-checkout-page .payment-methods tr:has(input:checked){border-color:var(--r20)!important;background:#fff7f2!important;box-shadow:0 0 0 2px rgba(255,90,0,.075)!important}
html body .red20-checkout-page .payment-methods td{display:flex!important;align-items:center!important;border:0!important;padding:0!important;min-width:0!important}
html body .red20-checkout-page .payment-methods label{display:flex!important;align-items:center!important;width:100%!important;margin:0!important;cursor:pointer!important;color:var(--r20-ink)!important;font-size:12px!important;font-weight:750!important}
html body .red20-checkout-page .payment-methods input[type=radio]{width:18px!important;height:18px!important;accent-color:var(--r20)!important}
html body .red20-checkout-page .payment-gateway-images{width:42px!important;height:34px!important;max-width:42px!important;max-height:34px!important;object-fit:contain!important;border-radius:7px!important;background:#fff!important}

/* Bank transfer details: replace old yellow/blue alert wall with two simple cards. */
html body #bank_transfer_slide.red20-bank-transfer{margin-top:11px!important}
html body .red20-bank-grid{display:grid!important;grid-template-columns:1.1fr .9fr!important;gap:10px!important}
html body .red20-bank-account-card,html body .red20-bank-help-card{
  border:1px solid var(--r20-line)!important;border-radius:14px!important;background:#fff!important;padding:14px!important;min-width:0!important;
}
html body .red20-bank-account-card dl{margin:8px 0 0!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
html body .red20-bank-account-card dl>div{background:var(--r20-soft)!important;border-radius:9px!important;padding:9px 10px!important;min-width:0!important}
html body .red20-bank-account-card dt{font-size:9.5px!important;text-transform:uppercase!important;letter-spacing:.03em!important;color:#848b95!important;font-weight:750!important}
html body .red20-bank-account-card dd{margin:3px 0 0!important;font-size:12px!important;line-height:1.3!important;color:var(--r20-ink)!important;font-weight:800!important;overflow-wrap:anywhere!important}
html body .red20-bank-help-card{background:#fffaf6!important;border-color:#ffe1cf!important}
html body .red20-bank-help-card p{margin:7px 0 0!important;font-size:11px!important;line-height:1.55!important;color:#555d67!important}

/* Keep order summary obvious but visually quiet. */
html body .red20-checkout-page .checkout-order-wrapper{border:1px solid var(--r20-line)!important;border-radius:16px!important;box-shadow:0 3px 14px rgba(26,31,38,.035)!important}
html body .red20-checkout-page #place_order_btn{background:var(--r20)!important;border-color:var(--r20)!important;border-radius:12px!important;font-weight:850!important;min-height:52px!important}

@media(max-width:991.98px){
  html body .listing-page .red20-subcategory-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  html body .listing-page .red20-subcategory-media{height:170px!important}
  html body .red20-time-slot-grid{grid-template-columns:1fr 1fr!important}
  html body .red20-bank-grid{grid-template-columns:1fr!important}
}

@media(max-width:767.98px){
  /* The user's reference is a 2-column visual catalog with artwork filling the frame. */
  html body .listing-page .red20-subcategory-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px 9px!important;padding:0 7px!important;
  }
  html body .listing-page .red20-subcategory-media{
    width:100%!important;height:auto!important;aspect-ratio:1/1!important;border-radius:8px!important;background:#eff0f2!important;
  }
  html body .listing-page .red20-subcategory-media img{
    width:100%!important;height:100%!important;object-fit:cover!important;transform:scale(1.025)!important;
  }
  html body .listing-page .red20-subcategory-name{
    margin-top:6px!important;min-height:32px!important;font-size:12.5px!important;line-height:1.28!important;font-weight:650!important;text-align:left!important;
  }

  html body .red20-checkout-page .red20-checkout-main{padding-left:0!important;padding-right:0!important}
  html body .red20-checkout-page .ship-details-wrapper,
  html body .red20-checkout-page .red20-checkout-card,
  html body .red20-checkout-page .payment-methods{border-radius:13px!important;padding:12px!important}
  html body .red20-checkout-page .red20-checkout-main>.checkout-form-title{font-size:18px!important}
  html body .red20-checkout-card-head,html body .red20-payment-heading,html body .red20-bank-title{gap:8px!important;margin-bottom:9px!important}
  html body .red20-checkout-card-icon{width:34px!important;height:34px!important;flex-basis:34px!important;border-radius:10px!important;font-size:14px!important}
  html body .red20-checkout-card-head h4,html body .red20-payment-heading h5,html body .red20-bank-title strong{font-size:13px!important}
  html body .red20-checkout-card-head p,html body .red20-payment-heading p,html body .red20-bank-title small{font-size:9.8px!important}
  html body .red20-delivery-date{max-width:none!important;width:100%!important}
  html body .red20-time-slot-grid{grid-template-columns:1fr!important;gap:7px!important}
  html body .red20-time-slot .custom-control-label{min-height:54px!important;font-size:11px!important;padding:9px 11px!important}
  html body .red20-wallet-label{padding:11px!important}
  html body .red20-wallet-left strong{font-size:12px!important}
  html body .red20-wallet-left small{font-size:9.8px!important}
  html body .red20-checkout-page .payment-methods tbody{grid-template-columns:1fr!important;gap:7px!important}
  html body .red20-checkout-page .payment-methods tr{min-height:59px!important;grid-template-columns:22px 42px minmax(0,1fr)!important;padding:8px 9px!important}
  html body .red20-checkout-page .payment-gateway-images{width:38px!important;height:30px!important}
  html body .red20-bank-account-card,html body .red20-bank-help-card{padding:11px!important;border-radius:12px!important}
  html body .red20-bank-account-card dl{grid-template-columns:1fr!important;gap:6px!important}
  html body .red20-bank-account-card dl>div{display:grid!important;grid-template-columns:105px minmax(0,1fr)!important;gap:7px!important;align-items:center!important;padding:8px 9px!important}
  html body .red20-bank-account-card dd{margin:0!important;text-align:right!important;font-size:11px!important}
  html body .red20-bank-help-card p{font-size:10.5px!important;line-height:1.5!important}
}