/* City Academy savings module */
.ca-savings{box-sizing:border-box;max-width:1240px;width:100%;margin:0 auto;background:var(--sav-bg,#f8f8f8);padding:18px 22px;border-radius:20px;font-family:inherit;color:var(--sav-text);box-shadow:none}
.ca-savings *{box-sizing:border-box}
.ca-savings__heading{margin:0 0 18px!important;font-size:20px!important;font-weight:800!important;color:var(--sav-title)!important;display:flex;align-items:center;gap:10px}
.ca-savings__gift{font-size:20px;line-height:1}
.ca-savings__grid{display:grid;grid-template-columns:repeat(var(--sav-cols),minmax(0,1fr));gap:16px}
.ca-savings__card{display:grid;grid-template-columns:252px minmax(0,1fr);gap:18px;min-width:0;background:var(--sav-cardbg);border-radius:16px;padding:14px;align-items:center;min-height:172px}
.ca-savings__visual{min-height:152px;height:100%;position:relative;overflow:hidden;border-radius:14px;background:linear-gradient(125deg,#f9efbc,#fbf3cf)}
.ca-savings__visual>img,.ca-savings__visual>picture,.ca-savings__visual>picture>img{display:block;width:100%;height:100%;object-fit:cover}
.ca-savings__fallback{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);align-items:center;height:100%;min-height:152px;padding:16px 18px;color:#0f2344;font-weight:900;column-gap:18px}
.ca-savings__promo-left{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ca-savings__promo-count{font-size:34px;line-height:.9;font-weight:900;letter-spacing:-.04em}
.ca-savings__promo-more{margin-top:6px;font-size:16px;line-height:1;font-weight:900;letter-spacing:.01em}
.ca-savings__promo-note{margin-top:12px;font-size:9px;line-height:1.25;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.ca-savings__promo-divider{width:1px;height:88px;background:#1e3554;opacity:.45;justify-self:center}
.ca-savings__promo-right{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ca-savings__promo-discount{font-size:34px;line-height:.92;font-weight:900;letter-spacing:-.04em;white-space:nowrap}
.ca-savings__promo-discount span{font-size:.62em;vertical-align:top;line-height:1;position:relative;top:.08em;margin-left:2px}
.ca-savings__promo-off{margin-top:6px;font-size:18px;line-height:1;font-weight:900;letter-spacing:-.02em}
.ca-savings__content{min-width:0}
.ca-savings__content h3{font-size:18px!important;font-weight:800!important;line-height:1.25!important;color:var(--sav-title)!important;margin:0 0 4px!important}
.ca-savings__subtitle{font-size:14px!important;line-height:1.4!important;margin:0 0 14px!important;color:#64748b!important}
.ca-savings__progress-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;line-height:1.45;color:#64748b}
.ca-savings__counter{background:#ffeadf;color:#f06a24;border-radius:20px;padding:4px 10px;flex:none;font-size:12px;font-weight:700}
.ca-savings__track{background:#e5e7eb;height:8px;border-radius:20px;overflow:hidden;margin:10px 0 14px}
.ca-savings__track>span{display:block;height:100%;background:var(--sav-progress);border-radius:20px;transition:width .2s}
.ca-savings__footer{border-top:1px dashed #cbd5e1;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px}
.ca-savings__code{font-size:13px;overflow-wrap:anywhere;color:#334155}
.ca-savings__code strong{font-weight:800;color:var(--sav-title)}
.ca-savings__copy{font:700 13px inherit;cursor:pointer;border:1px solid #cbd5e1;border-radius:12px;padding:10px 16px;background:#fff;color:#0f172a;white-space:nowrap;min-width:78px}
.ca-savings__copy:focus-visible{outline:2px solid var(--sav-accent);outline-offset:2px}
.ca-savings__pending{font-size:13px;color:#64748b}
@media(max-width:1180px){.ca-savings__grid{grid-template-columns:1fr}.ca-savings__card{grid-template-columns:300px minmax(0,1fr)}}
@media(max-width:760px){.ca-savings{padding:16px}.ca-savings__card{grid-template-columns:1fr;gap:14px;padding:12px}.ca-savings__visual{height:150px}.ca-savings__fallback{min-height:150px}.ca-savings__content h3{font-size:17px!important}.ca-savings__subtitle{font-size:13px!important}}
@media(max-width:520px){.ca-savings{padding:14px}.ca-savings__heading{font-size:18px!important}.ca-savings__visual,.ca-savings__fallback{min-height:128px}.ca-savings__fallback{padding:12px;column-gap:12px}.ca-savings__promo-count{font-size:46px}.ca-savings__promo-more{font-size:12px}.ca-savings__promo-note{font-size:7px}.ca-savings__promo-divider{height:72px}.ca-savings__promo-discount{font-size:40px}.ca-savings__promo-off{font-size:18px}.ca-savings__progress-head{font-size:12px}.ca-savings__footer{flex-wrap:wrap;justify-content:flex-start}}

/* Per-offer promotional artwork background; separate from the outer offer card. */
.ca-savings .ca-savings__visual{background:var(--sav-artwork-bg,#fff1bb)}
.ca-savings .ca-savings__fallback{background:transparent}

/* Mobile only: compact, horizontal savings offers.
   Desktop retains the original two-part promotional artwork. */
@media (max-width: 767px) {
  .ca-savings {
    width: 100%;
    min-width: 0;
    max-width: 1240px;
    padding: 14px;
    background: var(--sav-bg, #ffffff);
  }
  .ca-savings .ca-savings__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
  }
  .ca-savings .ca-savings__card {
    display: block;
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 14px 13px 12px;
    overflow: hidden;
    border-radius: 12px;
  }
  /* On mobile the fallback graphic becomes the discount label on the right. */
  .ca-savings .ca-savings__visual {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 90px;
    height: 76px;
    min-height: 0;
    max-height: 76px;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
    pointer-events: none;
  }
  .ca-savings .ca-savings__visual > img,
  .ca-savings .ca-savings__visual > picture,
  .ca-savings .ca-savings__visual > picture > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .ca-savings .ca-savings__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    background: transparent;
  }
  .ca-savings .ca-savings__promo-left,
  .ca-savings .ca-savings__promo-divider { display: none; }
  .ca-savings .ca-savings__promo-right { width: 100%; }
  .ca-savings .ca-savings__promo-discount { font-size: 39px; line-height: .98; }
  .ca-savings .ca-savings__promo-off { font-size: 18px; line-height: 1; margin-top: 3px; }
  .ca-savings .ca-savings__content { width: 100%; min-width: 0; overflow-wrap: normal; }
  .ca-savings .ca-savings__content h3 {
    margin: 10px 100px 5px 0 !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    overflow-wrap: break-word;
  }
  .ca-savings .ca-savings__subtitle {
    margin: 0 98px 19px 0 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    overflow-wrap: break-word;
  }
  .ca-savings .ca-savings__progress-head {
    font-size: 13px;
    line-height: 1.4;
    gap: 8px;
  }
  .ca-savings .ca-savings__counter { font-size: 12px; padding: 4px 9px; }
  .ca-savings .ca-savings__track { height: 8px; margin: 8px 0 11px; }
  .ca-savings .ca-savings__footer {
    min-height: 40px;
    padding-top: 9px;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .ca-savings .ca-savings__code,
  .ca-savings .ca-savings__pending {
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: break-word;
    min-width: 0;
  }
  .ca-savings .ca-savings__copy {
    font-size: 12px;
    padding: 8px 10px;
    min-width: 0;
    border-radius: 9px;
    flex: 0 0 auto;
  }
}
@media (max-width: 400px) {
  .ca-savings .ca-savings__heading { font-size: 16px !important; margin-bottom: 10px !important; }
  .ca-savings .ca-savings__card { padding: 12px 10px 10px; }
  .ca-savings .ca-savings__visual { width: 75px; right: 8px; top: 10px; height: 70px; }
  .ca-savings .ca-savings__promo-discount { font-size: 31px; }
  .ca-savings .ca-savings__promo-off { font-size: 15px; }
  .ca-savings .ca-savings__content h3 { margin: 8px 80px 4px 0 !important; font-size: 15px !important; }
  .ca-savings .ca-savings__subtitle { margin: 0 78px 15px 0 !important; font-size: 12px !important; }
  .ca-savings .ca-savings__progress-head { font-size: 12px; }
  .ca-savings .ca-savings__code,
  .ca-savings .ca-savings__pending { font-size: 12px; }
  .ca-savings .ca-savings__copy { font-size: 11px; padding: 7px 8px; }
}
@media (max-width: 300px) {
  .ca-savings .ca-savings__visual { width: 66px; }
  .ca-savings .ca-savings__content h3 { margin-right: 69px !important; font-size: 14px !important; }
  .ca-savings .ca-savings__subtitle { margin-right: 65px !important; font-size: 11px !important; }
  .ca-savings .ca-savings__promo-discount { font-size: 27px; }
}

/* Compact slots use the mobile-style card layout at ANY viewport width.
   Standard modules keep desktop artwork layout above 767px. */

  .ca-savings-compact-slot .ca-savings {
    width: 100%;
    min-width: 0;
    max-width: 1240px;
    padding: 14px;
    background: var(--sav-bg, #ffffff);
  }
  .ca-savings-compact-slot .ca-savings .ca-savings__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
  }
  .ca-savings-compact-slot .ca-savings .ca-savings__card {
    display: block;
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 14px 13px 12px;
    overflow: hidden;
    border-radius: 12px;
  }
  /* On mobile the fallback graphic becomes the discount label on the right. */
  .ca-savings-compact-slot .ca-savings .ca-savings__visual {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 90px;
    height: 76px;
    min-height: 0;
    max-height: 76px;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
    pointer-events: none;
  }
  .ca-savings-compact-slot .ca-savings .ca-savings__visual > img,
  .ca-savings-compact-slot .ca-savings .ca-savings__visual > picture,
  .ca-savings-compact-slot .ca-savings .ca-savings__visual > picture > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .ca-savings-compact-slot .ca-savings .ca-savings__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    background: transparent;
  }
  .ca-savings-compact-slot .ca-savings .ca-savings__promo-left,
  .ca-savings-compact-slot .ca-savings .ca-savings__promo-divider { display: none; }
  .ca-savings-compact-slot .ca-savings .ca-savings__promo-right { width: 100%; }
  .ca-savings-compact-slot .ca-savings .ca-savings__promo-discount { font-size: 19px; line-height: .98; }
  .ca-savings-compact-slot .ca-savings .ca-savings__promo-off { font-size: 12px; line-height: 1; margin-top: 3px; }
  .ca-savings-compact-slot .ca-savings .ca-savings__content { width: 100%; min-width: 0; overflow-wrap: normal; }
  .ca-savings-compact-slot .ca-savings .ca-savings__content h3 {
    margin: 10px 100px 5px 0 !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    overflow-wrap: break-word;
  }
  .ca-savings-compact-slot .ca-savings .ca-savings__subtitle {
    margin: 0 98px 19px 0 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    overflow-wrap: break-word;
  }
  .ca-savings-compact-slot .ca-savings .ca-savings__progress-head {
    font-size: 13px;
    line-height: 1.4;
    gap: 8px;
  }
  .ca-savings-compact-slot .ca-savings .ca-savings__counter { font-size: 12px; padding: 4px 9px; }
  .ca-savings-compact-slot .ca-savings .ca-savings__track { height: 8px; margin: 8px 0 11px; }
  .ca-savings-compact-slot .ca-savings .ca-savings__footer {
    min-height: 40px;
    padding-top: 9px;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .ca-savings-compact-slot .ca-savings .ca-savings__code,
  .ca-savings-compact-slot .ca-savings .ca-savings__pending {
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: break-word;
    min-width: 0;
  }
  .ca-savings-compact-slot .ca-savings .ca-savings__copy {
    font-size: 12px;
    padding: 8px 10px;
    min-width: 0;
    border-radius: 9px;
    flex: 0 0 auto;
  }


.ca-savings-compact-slot,
.ca-savings-compact-slot .ca-savings { width:100%;max-width:100%;min-width:0; }
.ca-savings-compact-slot .ca-savings {padding:12px;border-radius:12px;}
.ca-savings-compact-slot .ca-savings__card {min-width:0;}
.ca-savings-compact-slot .ca-savings__heading {font-size:16px!important;}
.ca-savings-compact-slot .ca-savings__content h3 {font-size:15px!important;}
.ca-savings-compact-slot .ca-savings__subtitle {font-size:13px!important;}
.ca-savings-compact-slot .ca-savings__visual {width:76px;height:66px;max-height:66px;top:10px;right:8px;}
.ca-savings-compact-slot .ca-savings__promo-discount {font-size:32px;}
.ca-savings-compact-slot .ca-savings__promo-off {font-size:15px;}
.ca-savings-compact-slot .ca-savings__content h3 {margin-right:78px!important;}
.ca-savings-compact-slot .ca-savings__subtitle {margin-right:78px!important;margin-bottom:15px!important;}
.ca-savings-compact-slot .ca-savings__footer {flex-wrap:wrap;}
.ca-savings-compact-slot .ca-savings__code {overflow-wrap:break-word;word-break:normal;}

/* Clear two-sheet copy icon, aligned with button label at every size. */
.ca-savings .ca-savings__copy{display:inline-flex;align-items:center;justify-content:center;gap:6px;vertical-align:middle}
.ca-savings .ca-savings__copy-icon{display:block;width:15px;height:15px;flex:none;stroke:currentColor}

/* Editable savings note stays with the offer module, not recommendations. */
.ca-savings .ca-savings__note{font-size:11px;line-height:1.5;color:#687281;margin:12px 2px 0;}