/* =========================================================
   E Care Product List: Floating "Shop Item" pill (above title)
   + Sleek tooltip that MATCHES the pill (same blue theme)
   Uses data-tip with 
 line breaks (white-space:pre-line)
   No blur — crisp & readable (older adults)
   Position: TOP-RIGHT (Option B) to avoid covering image text
   ========================================================= */

.products .product-title-group{
  position:relative !important;
}

/* Floating pill (no layout shift) — TOP RIGHT */
.products .ecare-float-pill{
  position:absolute;
  right:5px;                 /* ✅ top-right */
  left:auto;
  top:-12px;
  transform:translateY(-100%);
  z-index:50;

  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;

  font-weight:950;
  font-size:13px;
  line-height:1;
  white-space:nowrap;

  /* Sleek E Care blue (crisp) */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)),
    linear-gradient(180deg, #0f4c8c 0%, #0b3a6a 100%);
  color:#ffffff;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 20px rgba(0,0,0,.18);
  text-shadow:0 1px 1px rgba(0,0,0,.28);

  text-transform:none !important;
  letter-spacing:0 !important;

  cursor:help;
  -webkit-tap-highlight-color: transparent;
}

/* Tooltip bubble — matches pill theme (blue) — RIGHT ALIGNED */
.products .ecare-float-pill::after{
  content: attr(data-tip);
  position:absolute;
  right:0;                   /* ✅ align to right edge of pill */
  left:auto;
  bottom:calc(100% + 10px);

  min-width:240px;
  max-width:320px;

  padding:12px 14px;
  border-radius:14px;

  font-weight:900;
  font-size:14px;           /* readable for older adults */
  line-height:1.35;

  background: linear-gradient(180deg, #0f4c8c 0%, #0b3a6a 100%);
  color:#ffffff;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 16px 34px rgba(0,0,0,.24);
  text-shadow:0 1px 1px rgba(0,0,0,.28);

  opacity:0;
  transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease;

  pointer-events:none;
  white-space:pre-line;     /* shows 
 line breaks */
  z-index:50;
}

/* Tooltip arrow — RIGHT ALIGNED */
.products .ecare-float-pill::before{
  content:"";
  position:absolute;
  right:18px;               /* ✅ arrow near right edge */
  left:auto;
  bottom:calc(100% + 4px);

  border:8px solid transparent;
  border-top-color:#0b3a6a;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.16));

  opacity:0;
  transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease;

  pointer-events:none;
  z-index:50;
}

/* Show tooltip on hover/focus/tap */
.products .ecare-float-pill:hover::after,
.products .ecare-float-pill:hover::before,
.products .ecare-float-pill:focus::after,
.products .ecare-float-pill:focus::before,
.products .ecare-float-pill:active::after,
.products .ecare-float-pill:active::before{
  opacity:1;
  transform:translateY(0);
}

/* Focus ring (helps older adults / keyboard / mobile) */
.products .ecare-float-pill:focus{
  outline:3px solid rgba(185,221,255,.55);
  outline-offset:2px;
}

.products .ecare-float-pill{
  user-select:none;
  touch-action:manipulation;
}

/* Mobile tweak */
@media (max-width: 420px){
  .products .ecare-float-pill{
    right:6px;
    top:-10px;
    font-size:14px;        /* bigger text */
    padding:10px 14px;     /* bigger tap target */
    border-radius:999px;
  }
  .products .ecare-float-pill::after{
    min-width:240px;
    max-width:320px;
    font-size:15px;        /* bigger tooltip text */
    padding:12px 14px;
  }
}

/* =========================================================
   E Care Rentals Cards (Table -> Fluid Grid)
   CLEAN + SIMPLE (single style block)
   - 3/2/1 responsive
   - compact
   - image not stretched (contain)
   - footer has subtle contrast (light gray)
   - no tooltip bubbles
   - title slot fixed height so card height never changes
   - footer: one-line when room, wraps/stack on small
   ========================================================= */

/* ====== LAYOUT ====== */
.ecare-category-template-table{
  width:100%;
  max-width:100%;
  border-collapse:separate;
  border-spacing:18px;
  table-layout:fixed;
}
.ecare-category-template-table tbody{ display:block; width:100%; }

.ecare-category-template-row{
  display:flex;
  flex-wrap:wrap;
  gap:36px 18px;   /* row-gap 34px, column-gap 18px */
  width:100%;
}

.ecare-category-template-cell{
  display:block;
  flex:0 0 calc(33.333% - 12px);
  width:calc(33.333% - 12px);
  padding:0;
  vertical-align:top;
  min-width:0;
}

/*@media (max-width: 980px){*/
@media (max-width: 1200px){
  .ecare-category-template-table{ border-spacing:16px; }
  .ecare-category-template-row{ gap:16px; }
  .ecare-category-template-cell{
    flex:0 0 calc(50% - 8px);
    width:calc(50% - 8px);
  }
}

@media (max-width: 640px){
  .ecare-category-template-table{ border-spacing:12px; }
  .ecare-category-template-row{ gap:12px; }
  .ecare-category-template-cell{
    flex:0 0 100%;
    width:100%;
  }
}

/* ====== CARD ====== */
.ecare-cat-card{
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 10px 22px rgba(0,0,0,.10);
  transform:translateZ(0);
  transition:transform .15s ease, box-shadow .15s ease;
}

.ecare-cat-card:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(0,0,0,.14);
}

/* ====== HEADER ====== */
.ecare-cat-head{
  padding:16px 14px 14px;
  background:#0b3a6a;
  color:#fff;
}

.ecare-cat-kicker{
  font-size:10px;
  font-weight:900;
  letter-spacing:.10em;
  opacity:.9;
  text-transform:uppercase;
}

/* ✅ FIXED 2-LINE TITLE SLOT (prevents card height changes) */
.ecare-cat-title{
  margin-top:6px;
  font-size:16px !important;
  font-weight:950;
  line-height:1.35 !important;;
  text-transform:none;
  
  /* Reserve EXACTLY 2 lines of space always */
  height:calc(1.35em * 2);

  /* Multi-line clamp + ellipsis */
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;

  word-break:break-word;
}

.ecare-cat-sub{
  margin-top:10px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:12px;
  font-weight:800;
  color:rgba(255,255,255,.88);
  line-height:1.2;
  
  /* Reserve EXACTLY 2 lines of space always */
  height:calc(1.15em * 2);
  
  /* Multi-line clamp + ellipsis */
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;

  word-break:break-word;
}

/* ====== IMAGE ====== */
.ecare-cat-imglink{
  display:block;
  text-decoration:none;
  color:inherit;
}

.ecare-cat-imgbox{
  position:relative;
  width:100%;
  height:150px;
  padding:32px 0px;   /* ↑ more top/bottom space */
  overflow:hidden;
  background:#fff;
  border-bottom:1px solid rgba(11,58,106,.08);
  display:flex;
  align-items:center;
  justify-content:center;
}

.ecare-cat-imgbox img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  max-width:100% !important;
  max-height:100% !important;
}

@media (max-width: 640px){
  .ecare-cat-imgbox{ height:140px; }
}

/* ====== EASY-FIND PILL (NO TOOLTIP) ====== */
.ecare-cat-pill{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:5;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:8px 12px;
  border-radius:999px;
  font-weight:950;
  font-size:16px;
  line-height:1;

  
   background:#0b3a6a; 
  color:rgba(255,255,255,.96);
  
  border:1px solid rgba(185,221,255,.95);
  box-shadow:0 10px 18px rgba(0,0,0,.16);
  cursor:default;
}

.ecare-cat-pill::before,
.ecare-cat-pill::after{
  content:none !important;
  display:none !important;
}

/* ====== FOOTER (one-line when room, wraps/stack when needed) ====== */
.ecare-cat-foot{
  padding:10px 12px;
  background:#f6f7f9;
  border-top:1px solid rgba(15,23,42,.10);

  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 12px;
}

.ecare-cat-foot-left{
  flex:0 0 auto;
  white-space:nowrap;
  font-weight:900;
  font-size:16px;
  color:#0b3a6a;
  letter-spacing:.02em;
}

.ecare-cat-foot-mid{
  flex:1 1 auto;
  min-width:140px;
  font-weight:950;
  font-size:14px;
  color:#111827;
  line-height:1.2;
}

.ecare-cat-foot-right{
  flex:0 0 auto;
  white-space:nowrap;
  margin-left:auto;
  font-weight:900;
  font-size:14px;
  color:#0b3a6a;
  opacity:.95;
}

/* keep bold consistent if inner tags appear */
.ecare-cat-foot-mid span,
.ecare-cat-foot-mid b,
.ecare-cat-foot-mid strong{
  font-weight:950;
}

/* Add this to your existing CSS */
.view-link {
  color: #0b3a6a !important; /* Adjust the color as needed (e.g., blue or whatever your brand color is) */
  text-decoration: none; /* Remove underline */
}

.view-link:hover {
  text-decoration: none; /* Optional: adds an underline when hovering */
  color: #007bff; /* Optional: change color on hover */
}

/* Mobile: stack cleanly */
@media (max-width: 640px){
  .ecare-cat-foot{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  .ecare-cat-foot-right{
    margin-left:0;
    align-self:flex-end;
  }
}

/* Empty pad cells (if you still output them) */
.ecare-category-template-cell--empty{ display:none; }

/* ==============================
   HOVER UPGRADE (stands out)
   - subtle “glow ring”
   - slightly stronger lift
   - header brightens a bit
   - image gets a tiny pop
   - pill becomes more “active”
   ============================== */

/* make transitions include border/filter */
.ecare-cat-card{
  position:relative;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    filter .18s ease;
}

/* soft blue ring using a pseudo-element (clean + premium) */
.ecare-cat-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
  box-shadow:0 0 0 3px rgba(11,58,106,.18);
  transform: none;
}

/* card hover */
/*.ecare-cat-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  border-color:rgba(11,58,106,.35);
  filter:saturate(1.03);
}*/

/* Prevents layout shift by removing translateY (no jump on hover) */
.ecare-cat-card:hover{
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  border-color:rgba(11,58,106,.35);
  filter:saturate(1.03);
}


.ecare-cat-card:hover::after{ opacity:1; }

/* header “lights up” slightly on hover */
.ecare-cat-card:hover .ecare-cat-head{
  filter:brightness(1.06);
}

/* image + pill pop */
.ecare-cat-card:hover .ecare-cat-imgbox img{
  transform:scale(1.02);
  transition:transform .18s ease;
}
.ecare-cat-imgbox img{ transition:transform .18s ease; }

.ecare-cat-card:hover .ecare-cat-pill{
  transform:translateY(-1px);
  box-shadow:0 12px 22px rgba(0,0,0,.20);
  border-color:rgba(11,58,106,.35);
}
.ecare-cat-pill{ transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }

/* keyboard accessibility */
.ecare-cat-card-link:focus-visible .ecare-cat-card{
  outline:none;
  box-shadow:0 0 0 4px rgba(11,58,106,.25), 0 18px 40px rgba(0,0,0,.18);
  transform:translateY(-3px);
}
@media (max-width: 640px) {
  .ecare-cat-card-link {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
  }
}


/* =========================================
   E Care Image Badges (Video + Rental HSA/FSA)
   ========================================= */

.ecare-cat-imgbox{
position:relative;
}

.ecare-hsa-fsa-badge{
position:absolute;
top:12px;
right:12px;
z-index:6;

display:inline-flex;
align-items:center;
justify-content:center;

font-size:11px;
font-weight:700;
line-height:1.2;
text-align:center;

text-decoration:none;
cursor:pointer;
-webkit-tap-highlight-color: transparent;
}

.ecare-hsa-fsa-badge span{
display:block;
text-transform:uppercase;
letter-spacing:.5px;

background:linear-gradient(
  180deg,
  rgba(255,180,90,.88) 0%,
  rgba(255,140,0,.98) 55%,
  rgba(255,120,0,.88) 100%
);

border:1px solid rgba(255,165,0,.70);
padding:6px 10px;
border-radius:999px;
color:#fff;

box-shadow:
  0 2px 6px rgba(0,0,0,.18),
  inset 0 1px 0 rgba(255,255,255,.35),
  inset 0 -1px 0 rgba(0,0,0,.18);
}

.ecare-hsa-fsa-badge:hover span{
transform:scale(1.05);
filter:brightness(0.95);
transition:all .18s ease;
}

/* Make HSA/FSA badge non-clickable on mobile (still visible) */
@media (max-width: 640px){
.ecare-category-template-cell .ecare-cat-card .ecare-cat-imgbox > a.ecare-hsa-fsa-badge{
pointer-events:none !important;
cursor:default !important;
}
}

/* ──  ── */
/* ── Footer Carousel — scoped to .footer-frame ── */
/* ──  ── */

.footer-frame {
  width: 100%;
  max-width: 980px;
  max-height: 438px;  /* ← shrink this (700 * 10/16 = 437.5) */
			
  margin: 0 auto;
  border-radius: 0.75rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}


.footer-frame .slider-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  min-height: 200px;        /* ← ADD */
  overflow: hidden;
}

.footer-frame .slider { position: relative; width: 100%; height: 100%; }

.footer-frame .slides {
  position: absolute;       /* ← CHANGE from relative */
  inset: 0;                 /* ← ADD */
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}


.footer-frame .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(5%);
  transition: transform 600ms ease, opacity 600ms ease;
  pointer-events: none;
  visibility: hidden;
  background: #000;
  overflow: hidden;
}

.footer-frame .slide.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
}

.footer-frame .slide .slide-bg {
  position: absolute;
  inset: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  object-fit: cover;
  filter: blur(18px) brightness(0.55) saturate(1.2);
  z-index: 0;
  pointer-events: none;
  display: block;
}

.footer-frame .slide img.slide-main {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.footer-frame .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  border: 3px solid rgba(255,255,255,0.85);
  background: rgba(13, 31, 60, 0.72);
  color: #fff;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  line-height: 1;
  transition: background 200ms ease, transform 200ms ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.footer-frame .nav:hover,
.footer-frame .nav:focus {
  background: rgba(13, 31, 60, 0.92);
  transform: translateY(-50%) scale(1.08);
}

.footer-frame .nav:active {
  transform: translateY(-50%) scale(0.96);
}

.footer-frame .nav.prev { left: 1rem; }
.footer-frame .nav.next { right: 1rem; }

.footer-frame .nav:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.footer-frame .nav.pause {
  position: absolute;
  top: auto;
  bottom: 0.75rem;
  right: 0.75rem;
  transform: none;
  width: 42px;
  height: 42px;
  font-size: 0.9rem;
  opacity: 0.75;
}

.footer-frame .nav.pause:hover,
.footer-frame .nav.pause:focus {
  transform: scale(1.08);
  opacity: 1;
}

.footer-frame .nav.pause[aria-pressed="true"] {
  background: rgba(180, 20, 20, 0.75);
  border-color: rgba(255,255,255,0.9);
  opacity: 1;
}

.footer-frame .dots { display: none !important; }

.footer-frame .caption-bar {
  width: 100%;
  min-height: 3rem;
  background: #0d1f3c;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.4;
  text-align: center;
  padding: 0.75rem 5rem;
  box-sizing: border-box;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-frame .caption-bar:empty { display: none; }

@media (max-width: 600px) {
  .footer-frame .nav {
    width: 52px;
    height: 52px;
    font-size: 1.8rem;
  }
  .footer-frame .nav.prev { left: 0.5rem; }
  .footer-frame .nav.next { right: 0.5rem; }
  .footer-frame .caption-bar {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    min-height: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-frame .slide { transition: none; }
  .footer-frame .nav   { transition: none; }
}








/* =========================================================
   E Care — Compact Category Cards: Aligned Row Layout
   Added to support index-contents.php compact card design
   ========================================================= */

/* ── 1. ROW WRAPPER ── */
.ecare-row-aligned {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0 18px;
  width: 100%;
}

.ecare-row-aligned .ecare-category-template-cell {
  display: flex !important;
  flex-direction: column;
  flex: 0 0 calc(33.333% - 12px) !important;
  width: calc(33.333% - 12px) !important;
  padding: 0 !important;
}

@media (max-width: 1200px) {
  .ecare-row-aligned .ecare-category-template-cell {
    flex: 0 0 calc(50% - 9px) !important;
    width: calc(50% - 9px) !important;
  }
}

@media (max-width: 640px) {
  .ecare-row-aligned .ecare-category-template-cell {
    flex: 0 0 100% !important;
    width: 100% !important;
  }
}

/* Card stretches full height */
.ecare-row-aligned .ecare-cat-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ── 2. HEADER — fixed min-height, no bottom gap ── */
.ecare-row-aligned .ecare-cat-head {
  display: flex;
  flex-direction: column;
  min-height: 100px;
}

/* ── 3. DELIVERY STRIP — own element, consistent single-line band ── */
.ecare-cat-delivery-strip {
  background: #0a3260;
  padding: 6px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.82) !important;
  height: 30px !important;
  line-height: 18px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  display: flex !important;
  align-items: center;
  gap: 4px;
  border-top: 1px solid rgba(255,255,255,.10);
  margin: 0 !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  max-height: none !important;
}

/* ── 4. IMAGE BOX — absorbs height difference between cards ── */
.ecare-row-aligned .ecare-cat-imgbox {
  flex-shrink: 0;
  flex: 1 0 auto;   /* grows to fill available space, pushing body to bottom */
}

/* ── 5. FOOTER PRICE ROW — no View link, tighter ── */
.ecare-row-aligned .ecare-cat-foot:not(.ecare-details) {
  min-height: 54px;
  align-items: center;
}

/* Hide empty right section when View link removed */
.ecare-cat-foot-right:empty {
  display: none;
}

/* ── 6. PRICE + TIMER BAND ── */
.ecare-price-timer-band {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 8px;
  overflow: hidden;
  margin: 6px 0;
  width: 100%;
}

.ecare-ptb-price {
  flex: 1;
  padding: 7px 10px;
  background: #f6f7f9;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ecare-ptb-label {
  font-size: 9px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 1px;
}

.ecare-ptb-amount {
  font-size: 20px;
  font-weight: 900;
  color: #9A0E11;
  line-height: 1;
}

.ecare-ptb-badge {
  display: inline-block;
  margin-top: 3px;
  background: #9A0E11;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: .04em;
  width: fit-content;
}

.ecare-ptb-timer {
  background: #0b3a6a;
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 82px;
}

.ecare-ptb-timer-label {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 3px;
  white-space: nowrap;
}

.ecare-ptb-countdown {
  font-size: 14px;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.ecare-ptb-live {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
}

.ecare-ptb-dot {
  width: 5px;
  height: 5px;
  background: #fbbf24;
  border-radius: 50%;
  animation: ecare-pulse 1s infinite;
}

.ecare-ptb-live-text {
  font-size: 9px;
  color: rgba(255,255,255,.55);
  font-weight: 700;
}

@keyframes ecare-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

/* ── 7. DETAILS TOGGLE BUTTON — large, prominent, elderly-friendly ── */
.ecare-details-toggle {
  width: 100%;
  background: #0b3a6a;
  border: none;
  border-top: 2px solid rgba(255,255,255,.15);
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: inherit;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .15s;
  min-height: 52px;
  flex-shrink: 0;
}

.ecare-details-toggle:hover { background: #0d4a8a; }
.ecare-details-toggle:active { background: #082d54; }

.ecare-toggle-arrow {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background-color: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.60);
  color: #fff;
  transition: transform .22s ease, background-color .15s, border-color .15s;
  flex-shrink: 0;
}

.ecare-details-toggle:hover .ecare-toggle-arrow {
  background-color: rgba(255,255,255,.30);
  border-color: #fff;
}

.ecare-details-toggle.is-open {
  background: #082d54;
}

.ecare-details-toggle.is-open .ecare-toggle-arrow {
  transform: rotate(180deg);
  background-color: rgba(255,255,255,.28);
  border-color: #fff;
}

/* NOTE: When a rental has an active exclusive promo, this toggle gets
   the .ecare-details-toggle--exclusive modifier class which recolors
   the bar (soft light-blue) and adds an inline navy "Exclusive" pill
   component. See the end of this file for that variant's styling. */

/* ── 8. COLLAPSIBLE DETAILS PANEL ── */
.ecare-details {
  overflow: hidden;
  transition: max-height 0.32s ease, padding 0.32s ease;
}

.ecare-details[data-collapsed="true"] {
  max-height: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

.ecare-details[data-collapsed="false"] {
  max-height: 1400px;
  height: auto;
}

.ecare-row-aligned .ecare-details[data-collapsed="true"] {
  padding: 0 !important;
  border: none !important;
}

/* ── 9. PRICE HIGHLIGHT ROW inside details ── */
.ecare-details-price-highlight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: #fdf2f2;
  border-bottom: 1px solid rgba(154,14,17,.12);
  margin-bottom: 2px;
}

.ecare-dph-msrp {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.4;
}

.ecare-dph-msrp del { font-size: 13px; color: #9ca3af; }
.ecare-dph-deal { text-align: right; }

.ecare-dph-deal-label {
  font-size: 10px;
  font-weight: 700;
  color: #9A0E11;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ecare-dph-deal-price {
  font-size: 18px;
  font-weight: 900;
  color: #9A0E11;
}

/* ── 10. SHIPPING TAGS — compact, tight ── */
.ecare-shipping-tags-row {
  padding: 6px 10px;
  border-top: 1px solid rgba(15,23,42,.07);
  background: #fff;
}

.ecare-shipping-tags-row .availability-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Override base availability-tag to be compact */
.ecare-shipping-tags-row .availability-tag {
  font-size: 10px !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  white-space: nowrap;
}

/* ── 11. ACTION BUTTONS — full-width stacked, large tap targets for elderly ── */
.ecare-actions-row {
  padding: 10px 10px 14px;
  border-top: 1px solid rgba(15,23,42,.07);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ecare-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 12px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .05em;
  text-decoration: none;
  cursor: pointer;
  border: none;
  box-sizing: border-box;
  text-transform: uppercase;
  font-family: inherit;
  min-height: 50px;
  line-height: 1.2;
  transition: filter .15s ease;
}

.ecare-btn:hover { filter: brightness(.9); }

.ecare-btn-cart {
  background: #2e7d32;
  color: #fff !important;
}
.ecare-btn-cart:hover { background: #1b5e20; color: #fff !important; }

.ecare-btn-details {
  background: #1a1a2e;
  color: #fff !important;
}
.ecare-btn-details:hover { background: #0d0d1a; color: #fff !important; }

.ecare-btn-hotdeal {
  background: #9A0E11;
  color: #fff !important;
}
.ecare-btn-hotdeal:hover { background: #7a0b0d; color: #fff !important; }

/* ── 12. FIX header bottom gap / thick border ── */
.ecare-row-aligned .ecare-cat-head {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 10px !important;
}

.ecare-cat-delivery-strip + .ecare-cat-imgbox {
  border-top: none !important;
}

@media (max-width: 640px) {
  .ecare-ptb-timer { min-width: 76px; }
  .ecare-ptb-countdown { font-size: 12px; }
  .ecare-cat-delivery-strip { font-size: 10px !important; }
  .ecare-btn { font-size: 14px; padding: 13px 10px; }
  .ecare-details-toggle { font-size: 14px; padding: 13px 16px; min-height: 50px; }
}

  display: flex !important;
  flex-wrap: wrap;
  gap: 0 18px;
  width: 100%;
}

.ecare-row-aligned .ecare-category-template-cell {
  display: flex !important;
  flex-direction: column;
  flex: 0 0 calc(33.333% - 12px) !important;
  width: calc(33.333% - 12px) !important;
  padding: 0 !important;
}

@media (max-width: 1200px) {
  .ecare-row-aligned .ecare-category-template-cell {
    flex: 0 0 calc(50% - 9px) !important;
    width: calc(50% - 9px) !important;
  }
}

@media (max-width: 640px) {
  .ecare-row-aligned .ecare-category-template-cell {
    flex: 0 0 100% !important;
    width: 100% !important;
  }
}

/* Card stretches full height */
.ecare-row-aligned .ecare-cat-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ── 2. HEADER — fixed height so all cards align regardless of title length ── */
.ecare-row-aligned .ecare-cat-head {
  display: flex;
  flex-direction: column;
  min-height: 100px;
  /* Title already clamped to 2 lines by base CSS — this holds the floor */
}

/* ── 3. DELIVERY STRIP — own element, consistent single-line band ── */
.ecare-cat-delivery-strip {
  background: #0a3260;
  padding: 7px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.82) !important;
  height: 32px !important;
  line-height: 18px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  display: flex !important;
  align-items: center;
  gap: 4px;
  border-top: 1px solid rgba(255,255,255,.10);
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  max-height: none !important;
}

/* ── 4. IMAGE BOX — consistent height ── */
.ecare-row-aligned .ecare-cat-imgbox {
  flex-shrink: 0;
}

/* ── 5. FOOTER PRICE ROW — consistent height ── */
.ecare-row-aligned .ecare-cat-foot:not(.ecare-details) {
  min-height: 54px;
  align-items: center;
}

/* Details panel inherits ecare-cat-foot padding — reset it when collapsed */
.ecare-row-aligned .ecare-details[data-collapsed="true"] {
  padding: 0 !important;
  border: none !important;
}

/* ── 6. PRICE + TIMER BAND ── */
.ecare-price-timer-band {
  display: flex;
  align-items: stretch;
  align-items: stretch;
  border-radius: 10px;
  overflow: hidden;
  margin: 6px 0;
  width: 100%;
}

.ecare-ptb-price {
  flex: 1;
  padding: 8px 12px;
  background: #f6f7f9;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ecare-ptb-label {
  font-size: 9px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 2px;
}

.ecare-ptb-amount {
  font-size: 20px;
  font-weight: 900;
  color: #9A0E11;
  line-height: 1;
}

.ecare-ptb-badge {
  display: inline-block;
  margin-top: 4px;
  background: #9A0E11;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: .04em;
  width: fit-content;
}

.ecare-ptb-timer {
  background: #0b3a6a;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 88px;
}

.ecare-ptb-timer-label {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
  white-space: nowrap;
}

.ecare-ptb-countdown {
  font-size: 15px;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.ecare-ptb-live {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.ecare-ptb-dot {
  width: 5px;
  height: 5px;
  background: #fbbf24;
  border-radius: 50%;
  animation: ecare-pulse 1s infinite;
}

.ecare-ptb-live-text {
  font-size: 9px;
  color: rgba(255,255,255,.55);
  font-weight: 700;
}

@keyframes ecare-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

/* ── 7. DETAILS TOGGLE BUTTON ── */
.ecare-details-toggle {
  width: 100%;
  background: #f0f2f5;
  border: none;
  border-top: 1px solid rgba(15,23,42,.10);
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #0b3a6a;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: inherit;
  letter-spacing: .02em;
  transition: background .12s;
  min-height: 36px;
  flex-shrink: 0;
}

.ecare-details-toggle:hover {
  background: #e4e8ef;
}

.ecare-toggle-arrow {
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #0b3a6a;
  color: #0b3a6a;
  transition: transform .22s ease, background-color .15s, border-color .15s;
  flex-shrink: 0;
}

.ecare-details-toggle:hover .ecare-toggle-arrow {
  background-color: #0b3a6a;
  color: #fff;
}

.ecare-details-toggle.is-open .ecare-toggle-arrow {
  transform: rotate(180deg);
  background-color: #0b3a6a;
  color: #fff;
}

/* ── 8. COLLAPSIBLE DETAILS PANEL ── */
.ecare-details {
  overflow: hidden;
  transition: max-height 0.32s ease, padding 0.32s ease;
}

.ecare-details[data-collapsed="true"] {
  max-height: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

.ecare-details[data-collapsed="false"] {
  max-height: 1400px;
  height: auto;
}

/* ── 9. PRICE HIGHLIGHT ROW inside details ── */
.ecare-details-price-highlight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #fdf2f2;
  border-bottom: 1px solid rgba(154,14,17,.12);
  margin-bottom: 4px;
}

.ecare-dph-msrp {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.4;
}

.ecare-dph-msrp del {
  font-size: 13px;
  color: #9ca3af;
}

.ecare-dph-deal {
  text-align: right;
}

.ecare-dph-deal-label {
  font-size: 10px;
  font-weight: 700;
  color: #9A0E11;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ecare-dph-deal-price {
  font-size: 18px;
  font-weight: 900;
  color: #9A0E11;
}

@media (max-width: 640px) {
  .ecare-ptb-timer { min-width: 76px; }
  .ecare-ptb-countdown { font-size: 13px; }
  .ecare-cat-delivery-strip { font-size: 10px !important; }
}

/* ── Shipping tags row (always visible, below toggle) ── */
.ecare-shipping-tags-row {
  padding: 8px 12px;
  border-top: 1px solid rgba(15,23,42,.07);
  background: var(--bg, #fff);
}

.ecare-shipping-tags-row .availability-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* ── Action buttons row — target style ── */
.ecare-actions-row {
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(15,23,42,.07);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ecare-btn {
  display: block;
  width: 100%;
  padding: 11px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: opacity .15s, filter .15s;
  font-family: inherit;
  box-sizing: border-box;
}

.ecare-btn:hover { opacity: .88; }

/* Add to cart — green full width */
.ecare-btn-cart {
  background: #4a7c2f;
  color: #fff;
  border-color: #4a7c2f;
}

/* Row 2 — see details + not deal side by side */
.ecare-btn-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.ecare-btn-row2 .ecare-btn {
  width: 100%;
}

/* See details — dark outlined */
.ecare-btn-details {
  background: #2a2a2a;
  color: #e0c060;
  border-color: #2a2a2a;
}

/* Not deal — red */
.ecare-btn-notdeal {
  background: #9A0E11;
  color: #fff;
  border-color: #9A0E11;
}

/* Info strip — allow two lines for longer sublines */
.ecare-cat-delivery-strip {
  background: #0a3260;
  padding: 6px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.82) !important;
  min-height: 32px !important;
  height: auto !important;
  line-height: 1.4 !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: unset !important;
  display: flex !important;
  align-items: center;
  gap: 4px;
  border-top: 1px solid rgba(255,255,255,.10);
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  max-height: none !important;
}


/* =========================================================
   E Care — Unified Seamless Card Body
   ========================================================= */

/* Card body wrapper — white, no borders between sections */
.ecare-card-body {
  background: #fff;
  padding: 0;
  margin-top: auto;  /* pushes body to bottom — image absorbs height differences */
}

/* Details table — clean label/value rows like target */
.ecare-body-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.ecare-body-table tr {
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.ecare-body-table tr:last-child {
  border-bottom: none;
}

.ecare-body-key {
  padding: 6px 8px 6px 14px;
  color: #0b3a6a;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: top;
  width: 90px;
  font-size: 15px !important;
}

.ecare-body-val {
  padding: 6px 14px 6px 6px;
  color: #222;
  font-size: 15px !important;
  vertical-align: top;
  font-weight: 900;
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT STATUS — per-status color scheme
   Each status gets its own visual identity. The status_name
   (DB code, lowercased) becomes the CSS class slug, so adding
   a new status to product_status only needs a corresponding
   .ecare-avail-{slug} rule here.

   COLOR LANGUAGE — encodes shopper meaning, not arbitrary
   distinction:
     Greens   = buy with confidence (in stock, ready to ship)
     Purple   = something new and fresh in the catalog
     Blue     = informational benefit (pickup option)
     Orange   = urgency, "hurry up" but not panic
     Rose     = peak urgency (last one)
     Ambers   = condition family, graded by darkness
                (Scratch & Dent → Open Box → Refurbished)
     Gray     = honest pre-owned (Used)
     Red      = temporarily not available
     Charcoal = permanently not available (discontinued)

   Each status defines THREE color tokens (background, text,
   border) used by the pill-shape rule below. Body-table value
   cells get a colored text + accent dot from the same class. */

/* ── Available: green ── */
.ecare-avail-in_stock {
  background: #EAF6E6;
  color: #2A6F1B;
  border-color: #2A6F1B;
}
.ecare-body-val.ecare-avail-in_stock { background: transparent; border: 0; color: #2A6F1B; font-weight: 600; }

/* ── Ready to Ship: teal (distinct from on-the-floor stock) ── */
.ecare-avail-shipping_available {
  background: #E1F5EE;
  color: #0F6E56;
  border-color: #0F6E56;
}
.ecare-body-val.ecare-avail-shipping_available { background: transparent; border: 0; color: #0F6E56; font-weight: 600; }

/* ── New Arrival: purple ── */
.ecare-avail-new_product {
  background: #EEEDFE;
  color: #3C3489;
  border-color: #3C3489;
}
.ecare-body-val.ecare-avail-new_product { background: transparent; border: 0; color: #3C3489; font-weight: 600; }

/* ── Free Pickup: brand blue, informational ── */
.ecare-avail-free_store_pickup {
  background: #E6F1FB;
  color: #0C447C;
  border-color: #0C447C;
}
.ecare-body-val.ecare-avail-free_store_pickup { background: transparent; border: 0; color: #0C447C; font-weight: 600; }

/* ── Low Stock: orange, attention without alarm ── */
.ecare-avail-low_quantity {
  background: #FBEAD7;
  color: #8A3C0E;
  border-color: #8A3C0E;
}
.ecare-body-val.ecare-avail-low_quantity { background: transparent; border: 0; color: #8A3C0E; font-weight: 600; }

/* ── Only One Left: rose, peak urgency without alarming ── */
.ecare-avail-one_left {
  background: #FBEAF0;
  color: #993556;
  border-color: #993556;
}
.ecare-body-val.ecare-avail-one_left { background: transparent; border: 0; color: #993556; font-weight: 700; }

/* ── Condition family: amber gradient (light → dark by "how
      far from new"), then gray for honest used. ── */

/* Scratch & Dent: lightest amber (still new, with flaw) */
.ecare-avail-scratch_and_dent {
  background: #FAEEDA;
  color: #854F0B;
  border-color: #BA7517;
}
.ecare-body-val.ecare-avail-scratch_and_dent { background: transparent; border: 0; color: #854F0B; font-weight: 600; }

/* Open Box: medium amber */
.ecare-avail-open_box {
  background: #F8E0B0;
  color: #6B3F08;
  border-color: #6B3F08;
}
.ecare-body-val.ecare-avail-open_box { background: transparent; border: 0; color: #6B3F08; font-weight: 600; }

/* Refurbished: deeper amber */
.ecare-avail-refurbished {
  background: #E8C572;
  color: #4A2B05;
  border-color: #5B3A06;
}
.ecare-body-val.ecare-avail-refurbished { background: transparent; border: 0; color: #4A2B05; font-weight: 600; }

/* Used: gray (honest pre-owned) */
.ecare-avail-used {
  background: #E5E3DA;
  color: #444441;
  border-color: #6E6D67;
}
.ecare-body-val.ecare-avail-used { background: transparent; border: 0; color: #444441; font-weight: 600; }

/* ── Out of Stock: red (temporary) ── */
.ecare-avail-out_of_stock {
  background: #FCEBEB;
  color: #791F1F;
  border-color: #791F1F;
}
.ecare-body-val.ecare-avail-out_of_stock { background: transparent; border: 0; color: #791F1F; font-weight: 600; }

/* ── Discontinued: charcoal (permanent) ── */
.ecare-avail-discontinued {
  background: #2C2C2A;
  color: #F1EFE8;
  border-color: #2C2C2A;
}
.ecare-body-val.ecare-avail-discontinued { background: transparent; border: 0; color: #2C2C2A; font-weight: 700; }

/* ── Internal / fallback (should never be shown to shoppers) ── */
.ecare-avail-unknown,
.ecare-avail-hidden {
  background: #D3D1C7;
  color: #2C2C2A;
  border-color: #888780;
}

/* Body-table value cell — colored text plus a small accent dot
   before the label, so the status reads at a glance even in the
   dense details panel. Dot uses currentColor so each status
   gets its right hue automatically. */
.ecare-body-val[class*='ecare-avail-']::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 6px;
  vertical-align: middle;
}

/* Regular price row */
.ecare-body-price {
  padding: 8px 14px 4px;
  font-size: 18px;
  font-weight: 800;
  color: #1a1a2e;
}
.ecare-body-msrp {
  padding: 0 14px 8px;
  font-size: 12px;
  color: #888;
}

/* Options pills — compact, inside table cell */
.ecare-body-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 0;
}

.ecare-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  cursor: default;
}

.ecare-pill--rental   { background: #fef9c3; color: #854d0e; }
.ecare-pill--delivery { background: #dcfce7; color: #166534; cursor: default; }
.ecare-pill--pickup   { background: #fef9c3; color: #854d0e; }
.ecare-pill--shipping { background: #dbeafe; color: #1e40af; }

/* Promotion text */
.ecare-body-promo {
  font-size: 12px;
  line-height: 1.5;
  color: #444;
}

/* Hot deal inline badge */
.ecare-hot-inline {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff !important;
  background: #9A0E11;
  border: 1px solid #AC1316;
  padding: 1px 7px;
  border-radius: 999px;
  text-decoration: none;
  margin-left: 4px;
  white-space: nowrap;
}

/* Buttons */
.ecare-body-buttons {
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(15,23,42,.07);
}

/* Override any old ecare-actions-row if still present */
.ecare-actions-row {
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(15,23,42,.07);
}

.ecare-btn {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 11px 12px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: none !important;
  box-sizing: border-box !important;
  text-transform: uppercase !important;
  font-family: inherit !important;
  min-height: 42px !important;
  line-height: 1.2 !important;
  transition: filter .15s ease !important;
}
.ecare-btn:hover { filter: brightness(.88) !important; }

.ecare-btn-cart    { background: #2e7d32 !important; color: #fff !important; }
.ecare-btn-details { background: #1a1a2e !important; color: #fff !important; }
.ecare-btn-hotdeal { background: #9A0E11 !important; color: #fff !important; }

@media (max-width: 640px) {
  .ecare-body-key  { width: 76px; font-size: 11px; padding-left: 10px; }
  .ecare-body-val  { font-size: 12px; padding-right: 10px; }
  .ecare-btn       { font-size: 13px !important; padding: 12px 10px !important; }
  .ecare-pill      { font-size: 10px; }
}

/* =========================================================
   E Care — Price Bar, Deal Bar, Collapsible Details v2
   ========================================================= */

/* ── Price bar: flat, flush to image, no border-radius, no margin ── */
.ecare-price-bar {
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid rgba(15,23,42,.10);
  min-height: 96px; /* matches deal bar height — regular bar gets extra whitespace instead of misalignment */
}

/* ── Regular price bar ── */
.ecare-regular-bar {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  background: #f6f7f9;
}
.ecare-regular-bar__label {
  font-size: 10px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.ecare-regular-bar__price {
  font-size: 20px;
  font-weight: 900;
  color: #1a1a2e;
}
.ecare-regular-bar__msrp {
  font-size: 12px;
  color: #9ca3af;
}

/* ── Deal bar: two-column, flat ── */
.ecare-deal-bar {
  display: flex;
  align-items: stretch;
  margin: 0;
}

.ecare-deal-bar__left {
  flex: 1;
  padding: 10px 14px;
  background: #fff7f7;
  border-right: 1px solid rgba(154,14,17,.12);
}

.ecare-deal-bar__label {
  font-size: 10px;
  font-weight: 800;
  color: #9A0E11;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 2px;
}

.ecare-deal-bar__price {
  font-size: 26px;
  font-weight: 900;
  color: #9A0E11;
  line-height: 1;
}

.ecare-deal-bar__was {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 2px;
}

.ecare-deal-bar__right {
  background: #0b3a6a;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 90px;
}

.ecare-deal-bar__timer-label {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,.60);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 3px;
  white-space: nowrap;
}

.ecare-deal-bar__clock {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* ── Details toggle: prominent navy, full-width ── */
.ecare-details-toggle {
  width: 100%;
  background: #0b3a6a;
  border: none;
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: inherit;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .12s;
  min-height: 46px;
  flex-shrink: 0;
  border-radius: 0;
}
.ecare-details-toggle:hover  { background: #0d4a8a; }
.ecare-details-toggle.is-open { background: #082d54; }

.ecare-toggle-arrow {
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  background-color: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.60);
  color: #fff;
  transition: transform .22s ease, background-color .15s, border-color .15s;
  flex-shrink: 0;
}

.ecare-details-toggle:hover .ecare-toggle-arrow {
  background-color: rgba(255,255,255,.30);
  border-color: #fff;
}

.ecare-details-toggle.is-open .ecare-toggle-arrow { 
  transform: rotate(180deg);
  background-color: rgba(255,255,255,.28);
  border-color: #fff;
}

/* ── Collapsible details panel ── */
.ecare-details-panel {
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.ecare-details-panel[data-collapsed="true"] {
  max-height: 0 !important;
  overflow: hidden !important;
}
.ecare-details-panel[data-collapsed="false"] {
  max-height: 1400px;
}

/* ── Card body: no extra padding ── */
.ecare-card-body {
  background: #fff;
  padding: 0;
  margin-top: auto;  /* pushes body to bottom — image absorbs height differences */
}

/* ── Image box: ensure no gap below ── */
.ecare-row-aligned .ecare-cat-imgbox {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

/* Remove any border-radius on price band */
.ecare-price-timer-band {
  border-radius: 0 !important;
  border: none !important;
  border-top: 1px solid rgba(15,23,42,.10) !important;
  margin: 0 !important;
}

@media (max-width: 640px) {
  .ecare-deal-bar__price { font-size: 22px; }
  .ecare-deal-bar__right { min-width: 78px; }
  .ecare-deal-bar__clock { font-size: 13px !important; }
  .ecare-details-toggle  { font-size: 13px; padding: 11px 14px; }
}

/* =========================================================
   E Care — Card spacing + blue button section
   ========================================================= */

/* Bottom spacing between cards */
.ecare-row-aligned .ecare-category-template-cell {
  margin-bottom: 28px !important;
}

/* Buttons section — navy blue background to flow from toggle */
.ecare-body-buttons {
  background: #0b3a6a !important;
  padding: 12px 12px 16px !important;
  border-top: none !important;
  gap: 7px !important;
  border-radius: 0 0 14px 14px;
}

/* Buttons inside blue section — adjust contrast */
.ecare-btn-cart {
  background: #2e7d32 !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.15) !important;
}

.ecare-btn-details {
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.30) !important;
}
.ecare-btn-details:hover { background: rgba(255,255,255,.20) !important; }

.ecare-btn-hotdeal {
  background: #9A0E11 !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.15) !important;
}

/* =========================================================
   E Care — Option B button footer
   ========================================================= */

/* Outer wrapper — navy, rounds card bottom */
.ecare-body-buttons {
  background: #0b3a6a !important;
  padding: 10px 10px 12px !important;
  border-top: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  border-radius: 0 0 14px 14px !important;
}

/* ADD TO CART — full width green, generous tap target */
.ecare-btn-cart {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 13px 12px !important;
  border-radius: 7px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: .05em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: none !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  margin-bottom: 0 !important;
  background: #15803d !important;
  color: #fff !important;
  transition: filter .15s !important;
}
.ecare-btn-cart:hover { filter: brightness(.9) !important; color: #fff !important; }

/* Split row — SEE DETAILS + HOT DEAL side by side */
.ecare-btn-split {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  margin-top: 8px !important;
  border-radius: 7px !important;
  overflow: hidden !important;
}

.ecare-btn-details {
  display: block !important;
  text-align: center !important;
  padding: 11px 8px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: none !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
  background: #082d54 !important;
  color: rgba(255,255,255,.88) !important;
  border-right: 1px solid rgba(255,255,255,.12) !important;
  transition: filter .15s !important;
}
.ecare-btn-details:hover { filter: brightness(1.2) !important; color: #fff !important; }

.ecare-btn-hotdeal {
  display: block !important;
  text-align: center !important;
  padding: 11px 8px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: none !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
  background: #7f0d0f !important;
  color: #fff !important;
  transition: filter .15s !important;
}
.ecare-btn-hotdeal:hover { filter: brightness(1.15) !important; color: #fff !important; }

/* When no deal active — SEE DETAILS spans full width */
.ecare-btn-split:has(.ecare-btn-details:only-child) {
  grid-template-columns: 1fr !important;
}
.ecare-btn-split .ecare-btn-details:only-child {
  border-right: none !important;
}

@media (max-width: 640px) {
  .ecare-btn-cart    { font-size: 13px !important; padding: 12px !important; }
  .ecare-btn-details,
  .ecare-btn-hotdeal { font-size: 11px !important; padding: 10px 6px !important; }
}

/* =========================================================
   E Care — Button footer border + alignment fixes
   ========================================================= */

/* Border belongs ABOVE the button section, not below cart */
.ecare-body-buttons {
  border-top: 2px solid rgba(255,255,255,.18) !important;
  padding-top: 10px !important;
}

/* Remove the gap/border that was appearing between cart and split row */
.ecare-btn-split {
  margin-top: 7px !important;
  border-top: none !important;
}

/* Alignment: lock price bar to consistent height */
.ecare-deal-bar,
.ecare-regular-bar {
  min-height: 72px;
}

/* Alignment: lock toggle button height */
.ecare-details-toggle {
  min-height: 46px !important;
  height: 46px !important;
}

/* Alignment: lock purchase price bar consistent with deal bar */
.ecare-regular-bar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px 14px !important;
}

/* SEE DETAILS full width when no deal active */
.ecare-btn-details--full {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 11px 8px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: none !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
  background: #082d54 !important;
  color: rgba(255,255,255,.88) !important;
  border-radius: 7px !important;
  margin-top: 7px !important;
  transition: filter .15s !important;
}
.ecare-btn-details--full:hover { filter: brightness(1.2) !important; color: #fff !important; }

/* =========================================================
   E Care — Alignment fix v2: lock all band heights
   ========================================================= */

/* Price bar — exact same height regardless of deal or not */
.ecare-price-bar {
  height: 96px !important;
  overflow: hidden !important;
}

.ecare-deal-bar,
.ecare-regular-bar {
  height: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;
}

.ecare-deal-bar__left,
.ecare-deal-bar__right {
  overflow: hidden;
}

/* Regular bar — vertically center its content in the fixed height */
.ecare-regular-bar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  padding: 0 14px !important;
}

/* Toggle — exact fixed height */
.ecare-details-toggle {
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  overflow: hidden !important;
}

/* Card uses flex column so bottom buttons always sit at bottom */
.ecare-row-aligned .ecare-cat-card {
  display: flex !important;
  flex-direction: column !important;
}

.ecare-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  margin-top: auto;  /* pushes body to bottom — image absorbs height differences */
}

/* Push buttons to bottom of card */
.ecare-body-buttons {
  margin-top: auto !important;
}
/* =========================================================
   E Care — Pricing Section: Concept D
   Minimal left accent border, clean typography
   ========================================================= */

/* Shared price bar container */
.ecare-price-bar {
  height: auto !important;
  overflow: visible !important;
  border-top: 1px solid rgba(15,23,42,.10);
}

/* ── Deal bar — red left accent ── */
.ecare-deal-bar {
  background: #fff !important;
  border-left: 4px solid #9A0E11 !important;
  padding: 11px 14px 11px 14px !important;
  border-bottom: 1px solid rgba(15,23,42,.07) !important;
  height: auto !important;
  min-height: 96px !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  /* override any old two-column layout */
  grid-template-columns: unset !important;
}

/* Row 1: label left, "Limited time" right */
.ecare-deal-bar__row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.ecare-deal-bar__label {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #9A0E11 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
}

.ecare-deal-bar__limited {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  font-style: italic;
}

/* Row 2: big price + strikethrough inline */
.ecare-deal-bar__price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 5px;
}

.ecare-deal-bar__price {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #9A0E11 !important;
  line-height: 1 !important;
}

.ecare-deal-bar__was {
  font-size: 12px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

.ecare-deal-bar__was del {
  text-decoration: line-through;
}

/* Row 3: clock + live dot inline */
.ecare-deal-bar__clock-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ecare-deal-bar__clock {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #0b3a6a !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: .02em !important;
}

.ecare-deal-bar__live {
  font-size: 10px;
  font-weight: 700;
  color: #16a34a;
  letter-spacing: .02em;
}

/* Override old deal bar children that no longer exist */
.ecare-deal-bar__left,
.ecare-deal-bar__right,
.ecare-deal-bar__timer-label {
  display: none !important;
}

/* ── Regular bar — navy left accent ── */
.ecare-regular-bar {
  background: #fff !important;
  border-left: 4px solid #0b3a6a !important;
  padding: 11px 14px !important;
  border-bottom: 1px solid rgba(15,23,42,.07) !important;
  height: auto !important;
  min-height: 96px !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

.ecare-regular-bar__label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #0b3a6a !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  margin-bottom: 2px !important;
  display: block !important;
  white-space: nowrap !important;
}

/* Row 1: "Purchase price" label left, availability badge right.
   Mirrors .ecare-deal-bar__row1 so both bars feel parallel.
   align-self:stretch overrides the parent's align-items:flex-start
   so this row spans the full width of the regular-bar. */
.ecare-regular-bar__row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  width: 100%;
  gap: 8px;
  margin-bottom: 2px;
}

/* Availability badge pill shape — applied to any pill carrying
   an .ecare-avail-{slug} class. The per-status block above
   overrides the three color tokens (background, color, border).
   Same rule covers the badge in both bars (regular + deal).

   Border is 1.5px to keep the pill crisp against varied card
   backgrounds. Padding sized to match .ecare-deal-bar__limited
   for visual consistency in the same slot. */
.ecare-regular-bar__avail,
.ecare-deal-bar__avail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1.5px solid;
  white-space: nowrap;
  line-height: 1.3;
}

.ecare-regular-bar__price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ecare-regular-bar__price {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #1a1a2e !important;
  line-height: 1 !important;
  display: inline !important;
}

.ecare-regular-bar__msrp {
  font-size: 12px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  display: inline !important;
}

/* Alignment: both bars same min-height */
.ecare-deal-bar,
.ecare-regular-bar {
  min-height: 96px !important;
}
/* =========================================================
   E Care — Collapse fix + button colours (appended)
   ========================================================= */

/* Panel collapse: JS drives via setProperty important */
.ecare-details-panel {
  transition: max-height 0.35s ease !important;
  display: block !important;
}
.ecare-details-panel[data-collapsed="true"] {
  max-height: 0px !important;
  height: 0 !important;
  overflow: hidden !important;
}
.ecare-details-panel[data-collapsed="false"] {
  max-height: 2000px !important;
  height: auto !important;
  overflow: visible !important;
}

/* Cards don't stretch to row height */
.ecare-row-aligned { align-items: start !important; }
.ecare-row-aligned .ecare-category-template-cell { align-self: start !important; }
.ecare-row-aligned .ecare-cat-card { height: auto !important; }
.ecare-card-body { flex: 0 0 auto !important; }

/* Remove stripes */
.ecare-footer-btn, .ecare-footer-btn--cart,
.ecare-footer-btn--details, .ecare-footer-btn--hot,
.ecare-btn, .ecare-btn-cart, .ecare-btn-details,
.ecare-btn-hotdeal, .ecare-btn-details--full {
  background-image: none !important;
}

/* Footer wrapper — white */
.ecare-card-footer {
  background: #fff !important;
  border-top: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 0 0 14px 14px !important;
  overflow: hidden !important;
}
.ecare-footer-primary {
  background: #fff !important;
  border-bottom: 1px solid rgba(15,23,42,.07) !important;
  padding: 10px 14px !important;
}
.ecare-footer-label { color: #0b3a6a !important; }
.ecare-footer-label--deal { color: #9A0E11 !important; }
.ecare-footer-view { color: #0b3a6a !important; }
.ecare-footer-actions {
  padding: 10px 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  background: #fff !important;
  min-height: 127px !important;  /* matches deal card height (cart btn + split row) */
  justify-content: flex-end !important;  /* buttons stick to bottom within the reserved space */
}

/* Shared button base */
.ecare-footer-btn--cart,
.ecare-footer-btn--details,
.ecare-footer-btn--hot {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 13px 12px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  border: none !important;
  cursor: pointer !important;
  font-family: inherit !important;
  text-decoration: none !important;
  background-image: none !important;
}

/* ADD TO CART — lime green */
.ecare-footer-btn--cart {
  background: #8dc63f !important;
  color: #fff !important;
}
.ecare-footer-btn--cart:hover { background: #7ab22e !important; color: #fff !important; filter: none !important; }

/* SEE DETAILS — charcoal + gold */
.ecare-footer-btn--details {
  background: #3a3a3a !important;
  color: #f5a623 !important;
}
.ecare-footer-btn--details:hover { background: #2a2a2a !important; color: #f5a623 !important; filter: none !important; }

/* HOT DEAL — red */
.ecare-footer-btn--hot {
  background: #9A0E11 !important;
  color: #fff !important;
}
.ecare-footer-btn--hot:hover { background: #a93226 !important; color: #fff !important; filter: none !important; }

/* Split row */
.ecare-btn-split {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 7px !important;
}

/* Old btn classes — same colours */
.ecare-btn-cart    { background: #8dc63f !important; background-image: none !important; color: #fff !important; }
.ecare-btn-details { background: #3a3a3a !important; background-image: none !important; color: #f5a623 !important; }
.ecare-btn-hotdeal { background: #9A0E11 !important; background-image: none !important; color: #fff !important; }
.ecare-btn-details--full { background: #3a3a3a !important; background-image: none !important; color: #f5a623 !important; }
/* =========================================================
   E Care — Pills: full-width stacked, dynamic, with tooltips
   ========================================================= */

/* Container */
.ecare-body-pills {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 2px 0 !important;
  overflow: visible !important;
}

/* Base pill — full width, wraps text, never clips */
.ecare-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-size: clamp(11px, 1.4vw, 14px) !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: normal !important;
  word-break: break-word !important;
  box-sizing: border-box !important;
  position: relative !important;
  cursor: pointer !important;
  line-height: 1.3 !important;
  overflow: visible !important;
}

/* Available to Rent — dark navy */
.ecare-pill--rental {
  background: #0b3a6a !important;
  color: #fff !important;
  font-weight: 800 !important;
}
.ecare-pill--rental:hover,
.ecare-pill--rental:focus { filter: brightness(1.2) !important; color: #fff !important; }

/* Same Day Delivery — green */
.ecare-pill--delivery {
  background: #dcfce7 !important;
  color: #166534 !important;
}

/* Quick Store Pick-up — yellow */
.ecare-pill--pickup {
  background: #fef9c3 !important;
  color: #854d0e !important;
}

/* Fast Shipping — blue */
.ecare-pill--shipping {
  background: #dbeafe !important;
  color: #1e40af !important;
}

/* Allow tooltips to escape panel */
.ecare-details-panel,
.ecare-body-val,
.ecare-body-table,
.ecare-body-table tr,
.ecare-body-table td,
.ecare-card-body { overflow: visible !important; }

/* Tooltip bubble */
.ecare-pill--rental:hover::after,
.ecare-pill--rental:focus::after,
.ecare-pill--delivery:hover::after,
.ecare-pill--delivery:focus::after,
.ecare-pill--pickup:hover::after,
.ecare-pill--pickup:focus::after,
.ecare-pill--shipping:hover::after,
.ecare-pill--shipping:focus::after {
  content: attr(data-tip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  min-width: 180px;
  max-width: 260px;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  background: linear-gradient(180deg, #0f4c8c 0%, #0b3a6a 100%);
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  white-space: pre-line;
  z-index: 9999;
  pointer-events: none;
  text-transform: none;
  word-break: normal;
  opacity: 1;
}

/* Tooltip arrow */
.ecare-pill--rental:hover::before,
.ecare-pill--rental:focus::before,
.ecare-pill--delivery:hover::before,
.ecare-pill--delivery:focus::before,
.ecare-pill--pickup:hover::before,
.ecare-pill--pickup:focus::before,
.ecare-pill--shipping:hover::before,
.ecare-pill--shipping:focus::before {
  content: "";
  position: absolute;
  right: 18px;
  bottom: calc(100% + 2px);
  border: 7px solid transparent;
  border-top-color: #0f4c8c;
  z-index: 10000;
  pointer-events: none;
}

/* Collapse fix */
.ecare-details-panel[data-collapsed="true"] {
  max-height: 0px !important; height: 0 !important; overflow: hidden !important;
}
.ecare-details-panel[data-collapsed="false"] {
  max-height: 2000px !important; height: auto !important; overflow: visible !important;
}

/* Row alignment — cards don't stretch */
.ecare-row-aligned { align-items: start !important; }
.ecare-row-aligned .ecare-category-template-cell { align-self: start !important; }
.ecare-row-aligned .ecare-cat-card { height: auto !important; }
.ecare-card-body { flex: 0 0 auto !important; }

/* Buttons */
.ecare-footer-btn, .ecare-footer-btn--cart,
.ecare-footer-btn--details, .ecare-footer-btn--hot {
  background-image: none !important;
}
.ecare-card-footer { background: #fff !important; border-radius: 0 0 14px 14px !important; overflow: hidden !important; }
.ecare-footer-actions { padding: 10px !important; display: flex !important; flex-direction: column !important; gap: 7px !important; background: #fff !important; min-height: 127px !important; justify-content: flex-end !important; }
.ecare-footer-btn--cart { background: #8dc63f !important; color: #fff !important; display: block !important; width: 100% !important; text-align: center !important; padding: 13px 12px !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 900 !important; letter-spacing: .06em !important; text-transform: uppercase !important; border: none !important; text-decoration: none !important; }
.ecare-footer-btn--details { background: #3a3a3a !important; color: #f5a623 !important; display: block !important; width: 100% !important; text-align: center !important; padding: 12px 8px !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 900 !important; text-transform: uppercase !important; border: none !important; text-decoration: none !important; }
.ecare-footer-btn--hot { background: #c0392b !important; color: #fff !important; display: block !important; width: 100% !important; text-align: center !important; padding: 12px 8px !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 900 !important; text-transform: uppercase !important; border: none !important; text-decoration: none !important; }
.ecare-btn-split { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 7px !important; }

/* =========================================================
   E Care — Restore imgbox for old-style pages
   products.php and products-template.php use plain ecare-cat-imgbox
   without ecare-cat-card--new or ecare-card-body
   ========================================================= */

/* Restore original fixed-height imgbox for old-style cards */
.ecare-cat-card:not(.ecare-cat-card--new) .ecare-cat-imgbox {
  height: 150px !important;
  padding: 32px 0px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ecare-cat-card:not(.ecare-cat-card--new) .ecare-cat-imgbox img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  padding: 0 !important;
}

/* =========================================================
   E Care — PILL COMPLETE FIX
   Adds missing HSA + purchase pill styles
   Fixes tooltip for ALL pill types in new-style cards
   ========================================================= */

/* HSA/FSA pill — amber */
.ecare-pill--hsa {
  background: #fef3c7 !important;
  color: #92400e !important;
  font-weight: 800 !important;
}

/* Available to Purchase — light green */
.ecare-pill--purchase {
  background: #f0fdf4 !important;
  color: #166534 !important;
  font-weight: 700 !important;
  border: 1px solid #bbf7d0 !important;
}

/* All pills in new cards: full width, stacked, overflow visible for tooltip */
.ecare-cat-card--new .ecare-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  position: relative !important;
  cursor: pointer !important;
  overflow: visible !important;
  white-space: normal !important;
}

/* Allow tooltip to escape all parent containers */
.ecare-cat-card--new .ecare-details-panel,
.ecare-cat-card--new .ecare-body-val,
.ecare-cat-card--new .ecare-body-table,
.ecare-cat-card--new .ecare-body-table tr,
.ecare-cat-card--new .ecare-body-table td,
.ecare-cat-card--new .ecare-body-pills {
  overflow: visible !important;
}

/* Tooltip bubble — all pill types */
.ecare-cat-card--new .ecare-pill--rental:hover::after,
.ecare-cat-card--new .ecare-pill--rental:focus::after,
.ecare-cat-card--new .ecare-pill--delivery:hover::after,
.ecare-cat-card--new .ecare-pill--delivery:focus::after,
.ecare-cat-card--new .ecare-pill--pickup:hover::after,
.ecare-cat-card--new .ecare-pill--pickup:focus::after,
.ecare-cat-card--new .ecare-pill--shipping:hover::after,
.ecare-cat-card--new .ecare-pill--shipping:focus::after,
.ecare-cat-card--new .ecare-pill--hsa:hover::after,
.ecare-cat-card--new .ecare-pill--hsa:focus::after,
.ecare-cat-card--new .ecare-pill--purchase:hover::after,
.ecare-cat-card--new .ecare-pill--purchase:focus::after {
  content: attr(data-tip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  min-width: 200px;
  max-width: 280px;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  background: linear-gradient(180deg, #0f4c8c 0%, #0b3a6a 100%);
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  white-space: pre-line;
  z-index: 9999;
  pointer-events: none;
  opacity: 1;
  text-transform: none;
}

/* Tooltip arrow — all pill types */
.ecare-cat-card--new .ecare-pill--rental:hover::before,
.ecare-cat-card--new .ecare-pill--rental:focus::before,
.ecare-cat-card--new .ecare-pill--delivery:hover::before,
.ecare-cat-card--new .ecare-pill--delivery:focus::before,
.ecare-cat-card--new .ecare-pill--pickup:hover::before,
.ecare-cat-card--new .ecare-pill--pickup:focus::before,
.ecare-cat-card--new .ecare-pill--shipping:hover::before,
.ecare-cat-card--new .ecare-pill--shipping:focus::before,
.ecare-cat-card--new .ecare-pill--hsa:hover::before,
.ecare-cat-card--new .ecare-pill--hsa:focus::before,
.ecare-cat-card--new .ecare-pill--purchase:hover::before,
.ecare-cat-card--new .ecare-pill--purchase:focus::before {
  content: "";
  position: absolute;
  right: 18px;
  bottom: calc(100% + 2px);
  border: 7px solid transparent;
  border-top-color: #0f4c8c;
  z-index: 10000;
  pointer-events: none;
}



/* =========================================================
   E CARE — MOBILE PRODUCT CAROUSEL
   Replaces the vertical scroll grid with a full-screen
   swipeable card carousel on phones (≤ 640 px).

   HOW IT WORKS
   ─────────────────────────────────────────────────────────
   Desktop: unchanged — grid layout, all cards visible.
   Mobile:  the row becomes a carousel track; each cell is
            a full-width slide; JS (ecare-mobile-carousel.js)
            drives swipe + button navigation.

   PASTE THIS BLOCK at the bottom of ecaremedicalsupplies.css
   after the existing @media (max-width: 640px) grid block.
   ========================================================= */

@media (max-width: 640px) {

  /* ── 1. GRID → CAROUSEL TRACK ─────────────────────────
     The tbody/row become a single-axis scroll container.
     overflow:hidden clips everything outside the viewport;
     JS sets translateX to slide between cards.

     NOTE: scoped to html.ecare-carousel-on — these rules apply ONLY
     while the carousel JS is actually running (it adds that class to
     <html> on activate). When the carousel is disabled via config, the
     class is absent, this block is skipped, and the base @media
     (max-width:640px) rule above stacks every card full-width.       */

  .ectb-wrap {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  #ecareSearchWrap {
    padding: 0 !important;
    margin: 0 !important;
  }

  html.ecare-carousel-on .ecare-category-template-table,
  html.ecare-carousel-on .ecare-category-template-table tbody {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html.ecare-carousel-on .ecare-category-template-row {
    display: flex !important;
    flex-wrap: nowrap !important;       /* single row, no wrapping */
    gap: 0 !important;
    width: 100% !important;
    will-change: transform;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* ── 2. EACH CELL = ONE SLIDE ─────────────────────────
     Full width — swipe hint animation teaches interaction. */

  .ecare-category-template-cell {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    padding: 0 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    align-self: start !important;
    vertical-align: top !important;
  }

  /* ── 3. CARD SIZES TO CONTENT ─────────────────────────
     height:auto + no box-shadow eliminates all gaps.      */

  .ecare-category-template-cell .ecare-cat-card {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: 1px solid rgba(15,23,42,.12) !important;
  }

  /* Card body grows to push footer to bottom */
  .ecare-category-template-cell .ecare-card-body {
    flex: 1 1 auto !important;
  }

  /* Footer always pinned at bottom */
  .ecare-category-template-cell .ecare-card-footer {
    margin-top: auto !important;
  }

  /* ── 4. COMPACT CARD SECTIONS ────────────────────────
     Trim padding/height across every section so the full
     card fits in one viewport without scrolling.         */

  /* ── HEADER — tight padding, no gap between title & strip */
  .ecare-category-template-cell .ecare-cat-card .ecare-cat-head {
    padding: 8px 12px 8px !important;  /* restore bottom padding */
    min-height: 0 !important;
    background: #0b3a6a !important;    /* force blue in case anything overrides */
  }

  .ecare-category-template-cell .ecare-cat-card .ecare-cat-kicker {
    font-size: 11px !important;
    padding-top: 4px !important;
  }

  .ecare-category-template-cell .ecare-cat-card .ecare-cat-title {
    font-size: 15px !important;
    line-height: 1.3 !important;
    margin-top: 3px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    -webkit-line-clamp: 2 !important;
    height: auto !important;
    max-height: calc(1.3em * 2) !important;
    overflow: hidden !important;
  }

  /* ── DELIVERY STRIP — flush against header, no extra space */
  .ecare-category-template-cell .ecare-cat-card .ecare-cat-sub.ecare-cat-delivery-strip {
    min-height: 0 !important;
    height: auto !important;
    padding: 3px 12px !important;      /* uniform tight padding all sides */
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    border-top: none !important;       /* remove separator line if present */
  }

  /* ── IMAGE BOX — larger, centered ────────────────────── */
  .ecare-category-template-cell .ecare-cat-card .ecare-cat-imgbox {
    min-height: 0 !important;
    height: auto !important;
  }

  .ecare-category-template-cell .ecare-cat-card .ecare-cat-imgbox > a {
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
    flex: 0 0 160px !important;
    padding: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .ecare-category-template-cell .ecare-cat-card .ecare-cat-imgbox img {
    max-height: 138px !important;
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
    padding: 0 !important;
    display: block !important;
    margin: 0 auto !important;         /* horizontal centering fallback */
    object-fit: contain !important;
    object-position: center !important;
  }

  /* ── PRICE BAR — compact padding ─────────────────────── */
  .ecare-category-template-cell .ecare-cat-card .ecare-price-bar {
    padding: 3px 12px !important;
    gap: 5px !important;
  }

  .ecare-category-template-cell .ecare-cat-card .ecare-price-bar .ecare-price-msrp {
    font-size: 10px !important;
  }

  .ecare-category-template-cell .ecare-cat-card .ecare-price-bar .ecare-price-save,
  .ecare-category-template-cell .ecare-cat-card .ecare-price-bar .ecare-ptb-save {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }

  /* ── PILLS — smaller, tighter ─────────────────────────── */
  .ecare-category-template-cell .ecare-cat-card .ecare-pill {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }

  .ecare-category-template-cell .ecare-cat-card .ecare-body-pills {
    gap: 4px !important;
    padding: 6px 12px !important;
  }

  /* ── FOOTER BUTTONS — tighter ─────────────────────────── */
  .ecare-category-template-cell .ecare-cat-card .ecare-footer-actions {
    padding: 7px 8px !important;
    gap: 5px !important;
  }

  .ecare-category-template-cell .ecare-cat-card .ecare-footer-btn--cart {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }

  .ecare-category-template-cell .ecare-cat-card .ecare-footer-btn--details,
  .ecare-category-template-cell .ecare-cat-card .ecare-footer-btn--hot,
  .ecare-category-template-cell .ecare-cat-card .ecare-footer-btn--callus {
    padding: 8px 6px !important;
    font-size: 11px !important;
  }

  /* ── OLD-STYLE CARDS (rentals.php — no --new modifier) ───
     These cards wrap ecare-cat-card inside an <a class="ecare-cat-card-link">
     which breaks the .cell .card chain. Both selector forms are covered below. */

  /* Force blue header background — with and without the link wrapper.
     Also override the 100px min-height from .ecare-row-aligned .ecare-cat-head
     which forces white space below short titles.                         */
  .ecare-category-template-cell .ecare-cat-card .ecare-cat-head,
  .ecare-category-template-cell .ecare-cat-card-link .ecare-cat-card .ecare-cat-head,
  .ecare-row-aligned .ecare-category-template-cell .ecare-cat-head {
    background: #0b3a6a !important;
    min-height: 0 !important;
  }

  /* Old-style image box — constrain height same as new cards */
  .ecare-category-template-cell .ecare-cat-card:not(.ecare-cat-card--new) .ecare-cat-imgbox,
  .ecare-category-template-cell .ecare-cat-card-link .ecare-cat-card:not(.ecare-cat-card--new) .ecare-cat-imgbox {
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .ecare-category-template-cell .ecare-cat-card:not(.ecare-cat-card--new) .ecare-cat-imgbox img,
  .ecare-category-template-cell .ecare-cat-card-link .ecare-cat-card:not(.ecare-cat-card--new) .ecare-cat-imgbox img {
    max-height: 138px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 0 !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Old-style footer — compact */
  .ecare-category-template-cell .ecare-cat-card:not(.ecare-cat-card--new) .ecare-cat-foot,
  .ecare-category-template-cell .ecare-cat-card-link .ecare-cat-card:not(.ecare-cat-card--new) .ecare-cat-foot {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  .ecare-category-template-cell .ecare-cat-card:not(.ecare-cat-card--new) .ecare-cat-foot-mid,
  .ecare-category-template-cell .ecare-cat-card-link .ecare-cat-card:not(.ecare-cat-card--new) .ecare-cat-foot-mid {
    font-size: 13px !important;
  }

  /* Old-style sub inside head — tight */
  .ecare-category-template-cell .ecare-cat-card:not(.ecare-cat-card--new) .ecare-cat-head .ecare-cat-sub,
  .ecare-category-template-cell .ecare-cat-card-link .ecare-cat-card:not(.ecare-cat-card--new) .ecare-cat-head .ecare-cat-sub {
    padding: 3px 0 0 !important;
    margin: 0 !important;
    font-size: 10px !important;
    border-top: 1px solid rgba(255,255,255,.15) !important;
    margin-top: 4px !important;
  }

  /* ── 5. CAROUSEL UI CHROME ────────────────────────────
     Counter, dot strip, and prev/next buttons injected
     by ecare-mobile-carousel.js into #ecare-carousel-ui.  */

  #ecare-carousel-ui {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background: #f2f2f7;
    padding: 6px 0 4px;
  }

  /* Counter: "Product 2 of 9" — larger, prominent */
  .ecare-carousel-counter {
    font-size: 15px;
    font-weight: 800;
    color: #0b3a6a;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
  }

  /* Progress bar — replaces dot strip */
  .ecare-carousel-dots {
    width: calc(100% - 24px);
    height: 4px;
    background: rgba(11, 58, 106, 0.15);
    border-radius: 999px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
  }

  /* Hide individual dots — progress bar uses a single fill div */
  .ecare-carousel-dot {
    display: none;
  }

  /* Filled segment — width set by JS via --progress custom property */
  .ecare-carousel-dots::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: var(--progress, 0%);
    background: #0b3a6a;
    border-radius: 999px;
    transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Prev / Next row */
  .ecare-carousel-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 12px 10px;
    box-sizing: border-box;
    gap: 12px;
  }

  .ecare-carousel-btn {
    background: #0b3a6a;
    border: none;
    border-radius: 12px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, transform 0.1s;
    flex: 1;                           /* both buttons share equal width */
    text-align: center;
  }

  .ecare-carousel-btn:active {
    background: #0f4c8c;
    transform: scale(0.97);
  }

  .ecare-carousel-btn:disabled {
    opacity: 0.25;
    cursor: default;
  }

  .ecare-carousel-swipe-hint {
    font-size: 12px;
    color: #0b3a6a;
    font-weight: 700;
    text-align: center;
    flex: 0 0 auto;
    opacity: 0.7;
  }

} /* end @media (max-width: 640px) */

/* ── AUTO-ADVANCE TIMER BAR ──────────────────────────────────────── */
.ecare-carousel-counter-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.ecare-carousel-timer-track {
  width: 160px;
  height: 4px;
  background: rgba(11, 58, 106, 0.15);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}

.ecare-carousel-timer-bar {
  height: 100%;
  width: 100%;
  background: #0b3a6a;
  border-radius: 2px;
  will-change: width;
}

/* ── BIGGER PREV / NEXT BUTTONS ──────────────────────────────────── */
/* Overrides the existing .ecare-carousel-btn rules above             */
@media (max-width: 640px) {
  .ecare-carousel-btn {
    min-height: 52px;
    font-size: 18px;
    border-radius: 26px;
    padding: 0 20px;
  }

  /* ── ANIMATED SWIPE HINT (replaces static emoji text) ──────────── */
  .ecare-carousel-arrow-hint {
    font-size: 18px;
    font-weight: 800;
    color: #0b3a6a;
    flex: 0 0 auto;
    white-space: nowrap;
    animation: ecare-arrow-bounce 1.2s ease-in-out infinite;
    display: inline-block;
  }
}

@keyframes ecare-arrow-bounce {
  0%, 100% { transform: translateX(0);     opacity: 1;   }
  30%       { transform: translateX(-6px);  opacity: 0.6; }
  70%       { transform: translateX( 6px);  opacity: 0.6; }
}

/* =========================================================
   END E CARE — MOBILE PRODUCT CAROUSEL
    ========================================================= */

/* =========================================================
   GLOBAL CARD ALIGNMENT FIX
   Footer always pinned at bottom across all views.
   Root cause: margin-top:auto was only inside @media 640px.
   ========================================================= */

/* Imgbox absorbs height differences between cards */
.ecare-row-aligned .ecare-cat-imgbox,
.ecare-row-aligned .ecare-cat-card .ecare-cat-imgbox {
  flex: 1 0 auto !important;
}

/* Card body must NOT grow — footer should be pushed to bottom by imgbox */
.ecare-row-aligned .ecare-card-body,
.ecare-cat-card .ecare-card-body {
  flex: 0 0 auto !important;
}

/* Footer always pinned at bottom in all views (grid, list, carousel) */
.ecare-row-aligned .ecare-card-footer,
.ecare-cat-card .ecare-card-footer {
  margin-top: auto !important;
}
/* =========================================================
   E CARE — DEALS PAGE CAROUSEL  (≤ 640px)
   deals-and-steals.php — per-group carousels
   ========================================================= */

@media (max-width: 640px) {

  /* Grid becomes a clipping container — no side padding,
     slides handle their own padding consistently.         */
  .ecare-card-grid.ecare-deals-carousel-active {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 10px 0 !important;
    min-height: 0 !important;
  }

  /* Every slide — same padding so active card is centered */
  .ecare-card-grid.ecare-deals-carousel-active .ecare-deals-slide {
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
    align-self: start !important;
  }

  /* Non-first slides stacked at full width — padding on
     the slide itself provides the side spacing.           */
  .ecare-card-grid.ecare-deals-carousel-active .ecare-deals-slide:not(:first-child) {
    position: absolute !important;
    top: 10px !important;
    left: 0 !important;
    right: 0 !important;
  }

  .ecare-card-grid.ecare-deals-carousel-active .ecare-deals-slide .ecare-cat-card {
    height: auto !important;
    box-shadow: none !important;
    border: 1px solid rgba(15,23,42,.12) !important;
  }

  .ecare-deals-carousel-ui {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f2f2f7;
    padding: 10px 0 6px;
  }

  .ecare-deals-counter {
    font-size: 13px;
    font-weight: 800;
    color: #0b3a6a;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
  }

  .ecare-deals-progress {
    width: calc(100% - 24px);
    height: 4px;
    background: rgba(11, 58, 106, 0.15);
    border-radius: 999px;
    margin-bottom: 8px;
    overflow: hidden;
  }

  .ecare-deals-progress-fill {
    height: 100%;
    background: #0b3a6a;
    border-radius: 999px;
    transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0%;
  }

  .ecare-deals-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 12px 6px;
    box-sizing: border-box;
    gap: 10px;
  }

  .ecare-deals-btn {
    background: #0b3a6a;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 9px 0;
    font-size: 13px;
    font-weight: 800;
    flex: 1;
    cursor: pointer;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
  }

  .ecare-deals-btn:active { background: #0f4c8c; }
  .ecare-deals-btn:disabled { opacity: 0.25; cursor: default; }

  .ecare-deals-hint {
    font-size: 11px;
    font-weight: 700;
    color: #0b3a6a;
    opacity: 0.7;
    flex: 0 0 auto;
    text-align: center;
  }

} /* end deals carousel */

/* ════════════════════════════════════════════════════════════
   PRODUCT CARD CALLOUTS + SHARED CATALOG MODAL
   Moved here from product-template.php so both the listing
   cards (product-template.php) and the homepage cards
   (index-contents.php) share one source of truth. Covers the
   gold View Catalog pill, the Limited-Time Offer + Product
   Highlight bars, and the shared catalog lightbox modal.
   ════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   PRODUCT CARD — Details panel callouts (catalog + promo bars)

   Three pieces of content render at the bottom of the collapsed
   details panel when their conditions are met:

   1. Inline "View Catalog" row inside the details table — a
      regular table row alongside Brand / Price / Availability.
      Quiet, consistent with the rest of the table. Links to the
      product detail page with #catalog so the Catalog tab is
      pre-opened on landing.

   2. Limited-Time Offer bar — full-width amber strip with a
      pill tag on the left. Mirrors the product-page hero
      treatment so the visual language is consistent between
      the listing card and the product page. Only renders when
      the deal is actually active (start ≤ now < end and a
      price is set), so the "limited" framing is honest.

   3. Product Highlight bar — full-width blue strip with a
      pill tag on the left. For always-true selling points
      (height capacity, signature features). Calmer than the
      offer bar so shoppers don't read a feature as a promo.

   The bars deliberately sit BELOW the details table — they
   are callouts, not table data, and giving them a full-width
   strip is what makes them readable. The same treatment is
   used in product-purchase-details-tabs.php (footer strip).
   ═══════════════════════════════════════════════════════════════ */
.ecare-card-catalog-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 10px;
  background: linear-gradient(180deg, #FFF8DE 0%, #FFEEB0 100%);
  border: 1.5px solid #F5B301;
  border-radius: 999px;
  color: #6B4708;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  box-shadow: 0 1px 3px rgba(245, 179, 1, 0.18);
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  line-height: 1.2;
}
.ecare-card-catalog-pill:hover {
  background: linear-gradient(180deg, #FFEEB0 0%, #FBD980 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(245, 179, 1, 0.32);
}
.ecare-card-catalog-pill:active { transform: translateY(0); }
.ecare-card-catalog-pill-icon { font-size: 14px; line-height: 1; flex-shrink: 0; }
.ecare-card-catalog-pill-label { color: #6B4708; }
.ecare-card-catalog-pill-arrow {
  font-size: 13px;
  line-height: 1;
  color: #BA7517;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.ecare-card-catalog-pill:hover .ecare-card-catalog-pill-arrow { transform: translateX(3px); }

/* ═══════════════════════════════════════════════════════════════
   PRODUCT CARD — Shared catalog lightbox modal
   Single modal element injected ONCE per listing page (when any
   card on the page has a matching catalog). Every card's "View
   Catalog" pill opens this same modal — the JS reads the pill's
   data-catalog-url + data-catalog-title and loads the flipbook
   in the modal's iframe. One DOM tree, N triggers.

   Visual language mirrors product-purchase-page-hero.php's
   .ecare-pgh__cmodal exactly — navy header gradient, gold
   accents, footer specialist strip — so the in-page catalog
   experience is consistent between listing and detail pages.
   ═══════════════════════════════════════════════════════════════ */
.ecare-cardcat__cmodal {
  --cc-navy: #0b3a6a;
  --cc-navy-2: #082e55;
  --cc-gold: #f5b301;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 3vh 3vw;
}
.ecare-cardcat__cmodal[hidden] { display: none; }
.ecare-cardcat__cmodal-backdrop {
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(43,124,211,0.30), transparent 60%),
    rgba(6, 16, 30, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: zoom-out;
}
.ecare-cardcat__cmodal-inner {
  position: relative; width: 100%; height: 94vh; max-width: 1400px;
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 30px 80px rgba(0,0,0,0.55);
  display: flex; flex-direction: column;
  animation: ecareCardCatIn 0.22s ease-out;
}
@keyframes ecareCardCatIn {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ecare-cardcat__cmodal-inner { animation: none; } }
.ecare-cardcat__cmodal-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
  background: linear-gradient(180deg, var(--cc-navy) 0%, var(--cc-navy-2) 100%);
  color: #fff; padding: 14px 18px;
  border-bottom: 2px solid rgba(255,255,255,0.06);
}
.ecare-cardcat__cmodal-titlewrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ecare-cardcat__cmodal-kicker { font-size: 17px; font-weight: 900; letter-spacing: 0.6px; text-transform: uppercase; line-height: 1.1; color: #fff; }
.ecare-cardcat__cmodal-title { font-size: 13px; font-weight: 600; opacity: 0.88; letter-spacing: 0.2px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecare-cardcat__cmodal-headright { flex: 0 1 auto; min-width: 0; text-align: right; line-height: 1.35; font-size: 13px; font-weight: 700; opacity: 0.95; }
.ecare-cardcat__cmodal-headright span { display: block; }
.ecare-cardcat__cmodal-headright .ecare-cardcat__cmodal-headright-2 { font-weight: 600; opacity: 0.82; font-size: 12px; }
.ecare-cardcat__cmodal-close-btn {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.15s, border-color 0.15s;
}
.ecare-cardcat__cmodal-close-btn:hover {
  background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.45);
  transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) { .ecare-cardcat__cmodal-close-btn:hover { transform: none; } }
.ecare-cardcat__cmodal-stage { flex: 1 1 auto; min-height: 0; background: #eef2f7; }
.ecare-cardcat__cmodal-stage iframe { width: 100%; height: 100%; border: 0; display: block; margin: 0; background: #eef2f7; }
.ecare-cardcat__cmodal-strip {
  flex: 0 0 auto; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--cc-navy) 0%, var(--cc-navy-2) 100%);
  color: #fff; padding: 16px 22px;
  border-top: 3px solid var(--cc-gold);
}
.ecare-cardcat__cmodal-portrait {
  flex: 0 0 72px; width: 72px; height: 72px; border-radius: 999px;
  overflow: hidden; border: 3px solid #fff; background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25), 0 0 0 2px rgba(245,179,1,0.45);
}
.ecare-cardcat__cmodal-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 10%; display: block; }
.ecare-cardcat__cmodal-striptext { flex: 1 1 240px; min-width: 0; }
.ecare-cardcat__cmodal-strip-headline { font-size: 17px; font-weight: 800; margin-bottom: 3px; color: #fff; }
.ecare-cardcat__cmodal-strip-sub { font-size: 13px; color: rgba(255,255,255,0.88); font-weight: 500; line-height: 1.45; }
.ecare-cardcat__cmodal-strip-hours { margin-top: 7px; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; color: #a6d95e; }
.ecare-cardcat__cmodal-strip-hours::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #8dc63f; box-shadow: 0 0 0 3px rgba(141,198,63,0.22); }
.ecare-cardcat__cmodal-strip-btn {
  display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto;
  background: #fff; color: var(--cc-navy) !important;
  text-decoration: none !important; font-weight: 900; font-size: 16px; letter-spacing: 0.3px;
  padding: 13px 22px; border-radius: 12px;
  border: 2px solid var(--cc-gold); box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.ecare-cardcat__cmodal-strip-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(245,179,1,0.35); background: #fffdf2; }
.ecare-cardcat__cmodal-strip-btn svg { width: 19px; height: 19px; flex-shrink: 0; color: #9A0E11; }
body.ecare-cardcat__cmodal-open { overflow: hidden; }
@media (max-width: 600px) {
  .ecare-cardcat__cmodal {
    padding: calc(8px + env(safe-area-inset-top, 0px))
             calc(10px + env(safe-area-inset-right, 0px))
             calc(8px + env(safe-area-inset-bottom, 0px))
             calc(10px + env(safe-area-inset-left, 0px));
  }
  .ecare-cardcat__cmodal-inner { width: 100%; max-width: 480px; height: auto; max-height: calc(100vh - 16px); }
  .ecare-cardcat__cmodal-headright { display: none; }
  .ecare-cardcat__cmodal-bar { padding: 12px 14px; }
  .ecare-cardcat__cmodal-kicker { font-size: 14px; }
  .ecare-cardcat__cmodal-title { font-size: 11.5px; }
  .ecare-cardcat__cmodal-strip { padding: 12px 14px; gap: 12px; }
  .ecare-cardcat__cmodal-portrait { flex-basis: 56px; width: 56px; height: 56px; }
  .ecare-cardcat__cmodal-strip-btn { padding: 10px 14px; font-size: 14px; }
}

/* ── Limited-Time Offer bar (mirrors .ecare-ppd__close-offer) ── */
.ecare-card-offer {
  --offer-accent: #f5b301;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px 9px 11px;
  margin: 10px 0 12px;
  background: linear-gradient(180deg, #fffdf2 0%, #fff5d6 100%);
  border: 1px solid #f0e3b8;
  border-left: 4px solid var(--offer-accent);
  border-radius: 8px;
  color: #3a3a3a;
}
.ecare-card-offer-tag {
  font-size: 10px; font-weight: 800; letter-spacing: 0.9px;
  text-transform: uppercase;
  background: rgba(245, 179, 1, 0.12);
  color: #8a5a00;
  border: 1px solid rgba(245, 179, 1, 0.3);
  padding: 3px 8px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
}
.ecare-card-offer-text {
  font-size: 12.5px; font-weight: 600; color: #3a3a3a;
  flex: 1 1 auto; min-width: 0; line-height: 1.4;
}
.ecare-card-offer-text strong { color: #0b3a6a; }
.ecare-card-offer-text del { color: #999; font-weight: 500; }

/* Product/category SPECIAL offer — a bonus that stacks ON TOP of the
   baseline limited-time offer. Distinct teal/green accent so it reads
   as "extra value here," visually separate from the standing gold
   baseline. Used by the rental cards (and any future per-item
   specials). The base .ecare-card-offer provides layout; this just
   re-skins the colors. */
.ecare-card-offer--special {
  --offer-accent: #0F6E56;
  background: linear-gradient(180deg, #f1faf6 0%, #e0f4ec 100%);
  border-color: #b9e3d4;
}
.ecare-card-offer--special .ecare-card-offer-tag {
  background: rgba(15, 110, 86, 0.10);
  color: #0F6E56;
  border-color: rgba(15, 110, 86, 0.30);
}
.ecare-card-offer--special .ecare-card-offer-text strong { color: #0F6E56; }

/* Fine print line inside an offer bar — smaller, muted, sits under
   the body copy. Shared by baseline and special bars. */
.ecare-card-offer-terms {
  display: inline-block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 500;
  color: #7a6a4a;
  opacity: 0.9;
  line-height: 1.35;
}
.ecare-card-offer--special .ecare-card-offer-terms { color: #4a6a5e; }

/* Exclusive offer — "cannot be combined with other offers." When
   present, this is the ONLY promo bar on the rental (the lookup
   suppresses the baseline + any other specials). Deep navy + gold
   palette communicates "this is THE offer for this item" rather
   than a stackable bonus. Different enough from both baseline (gold)
   and special (teal) that shoppers immediately understand the
   different status.

   VISUAL INTENSITY (Variant 3): heavier left stripe, soft shadow
   lift, and a solid-fill pill (vs. the light-tint pills the other
   variants use). The combined effect makes the exclusive bar carry
   more weight than other bars on the card, so when a shopper scans
   a grid the exclusive-offer cards stand out at a glance without
   needing extra chrome like a corner ribbon. */
.ecare-card-offer--exclusive {
  --offer-accent: #0b3a6a;
  background: linear-gradient(180deg, #f7faff 0%, #e9efff 100%);
  border-color: #cdd9f0;
  border-left-width: 6px;
  box-shadow: 0 2px 8px rgba(11, 58, 106, 0.15);
}
.ecare-card-offer--exclusive .ecare-card-offer-tag {
  background: #0b3a6a;
  color: #fff;
  border-color: #0b3a6a;
  font-size: 11px;
  padding: 3px 10px;
}
.ecare-card-offer--exclusive .ecare-card-offer-text strong { color: #0b3a6a; }
.ecare-card-offer--exclusive .ecare-card-offer-terms { color: #4a5b73; }

/* ── Product Highlight bar (mirrors .ecare-ppd__close-highlight) ── */
.ecare-card-highlight {
  --hl-accent: #2b7cd3;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px 9px 11px;
  margin: 8px 0 12px;
  background: linear-gradient(180deg, #f4f8fd 0%, #e8f0fa 100%);
  border: 1px solid #cfe0f5;
  border-left: 4px solid var(--hl-accent);
  border-radius: 8px;
  color: #1f2937;
}
.ecare-card-highlight-tag {
  font-size: 10px; font-weight: 800; letter-spacing: 0.9px;
  text-transform: uppercase;
  background: rgba(11, 58, 106, 0.08);
  color: #0b3a6a;
  border: 1px solid rgba(11, 58, 106, 0.18);
  padding: 3px 8px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
}
.ecare-card-highlight-text {
  font-size: 12.5px; font-weight: 600; color: #1f2937;
  flex: 1 1 auto; min-width: 0; line-height: 1.4;
}
.ecare-card-highlight-text strong { color: #0b3a6a; }
.ecare-card-highlight-text del { color: #999; font-weight: 500; }


/* ════════════════════════════════════════════════════════════════
   EXCLUSIVE-OFFER VISUAL TREATMENTS
   Placed at the end of the file to win the cascade. The stylesheet
   has multiple .ecare-details-toggle and .ecare-card-offer redeclar-
   ations from various legacy card layouts; declaring exclusive-promo
   variants anywhere above them caused later same-specificity rules
   to silently override the styling.

   Two pieces work together:
     1. .ecare-details-toggle--exclusive — recolored details toggle.
        When a rental has an active exclusive promo, the toggle bar
        repaints to a soft light-blue palette and gains an inline
        navy "🔒 Exclusive" pill component, with a short "tap to see"
        teaser as the label. The shopper sees an obvious signal
        without learning the specific offer; the click reveals it.
        No added card height, no row alignment impact.
     2. .ecare-card-offer--exclusive — the offer bar inside the
        expanded details panel: navy palette with bumped intensity
        (heavier left border, lift shadow, solid navy tag pill).

   !important on key paint properties is belt-and-suspenders against
   later same-name redeclarations that may shadow these rules.
   ════════════════════════════════════════════════════════════════ */

/* Recolored details toggle bar. Soft light-blue background; navy
   text + arrow circle. Pairs with the navy pill component below. */
.ecare-details-toggle.ecare-details-toggle--exclusive {
  background: linear-gradient(180deg, #f7faff 0%, #e3ecfa 100%) !important;
  color: #0b3a6a !important;
  border-top-color: rgba(11, 58, 106, 0.12) !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}
.ecare-details-toggle.ecare-details-toggle--exclusive:hover {
  background: linear-gradient(180deg, #eef3fc 0%, #d6e1f3 100%) !important;
}
.ecare-details-toggle.ecare-details-toggle--exclusive:active,
.ecare-details-toggle.ecare-details-toggle--exclusive.is-open {
  background: linear-gradient(180deg, #d6e1f3 0%, #c1d0ea 100%) !important;
}
.ecare-details-toggle.ecare-details-toggle--exclusive .ecare-toggle-label {
  color: #0b3a6a !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}
.ecare-details-toggle.ecare-details-toggle--exclusive .ecare-toggle-arrow {
  background-color: rgba(11, 58, 106, 0.10) !important;
  border-color: rgba(11, 58, 106, 0.40) !important;
  color: #0b3a6a !important;
}
.ecare-details-toggle.ecare-details-toggle--exclusive:hover .ecare-toggle-arrow,
.ecare-details-toggle.ecare-details-toggle--exclusive.is-open .ecare-toggle-arrow {
  background-color: rgba(11, 58, 106, 0.20) !important;
  border-color: #0b3a6a !important;
}

/* Group wrapping the pill + label so they share a flex row with a gap. */
.ecare-details-toggle__label-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Navy "Exclusive" pill component inside the toggle. Real pill (not
   text styled to look like one); solid navy fill, white text. */
.ecare-details-toggle__pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #0b3a6a !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* In-panel exclusive offer bar (navy, heavier than baseline/special). */
.ecare-card-offer.ecare-card-offer--exclusive {
  --offer-accent: #0b3a6a !important;
  display: flex !important;
  background: linear-gradient(180deg, #f7faff 0%, #e9efff 100%) !important;
  border: 1px solid #cdd9f0 !important;
  border-left: 6px solid #0b3a6a !important;
  box-shadow: 0 2px 8px rgba(11, 58, 106, 0.15) !important;
  border-radius: 8px !important;
  color: #1f2937 !important;
}
.ecare-card-offer.ecare-card-offer--exclusive .ecare-card-offer-tag {
  background: #0b3a6a !important;
  color: #fff !important;
  border-color: #0b3a6a !important;
  font-size: 11px !important;
  padding: 3px 10px !important;
}
.ecare-card-offer.ecare-card-offer--exclusive .ecare-card-offer-text strong {
  color: #0b3a6a !important;
}
.ecare-card-offer.ecare-card-offer--exclusive .ecare-card-offer-terms {
  color: #4a5b73 !important;
}


/* ════════════════════════════════════════════════════════════════
   SPECIAL OFFER — parallel treatment to the EXCLUSIVE block above
   ════════════════════════════════════════════════════════════════
   Mirrors the exclusive pattern but in TEAL so the two tiers stay
   visually distinct in a grid:

     EXCLUSIVE = soft light-blue toggle + navy 🔒 pill (one offer,
                 replaces baseline)
     SPECIAL   = soft light-teal toggle + dark-teal ⭐ pill (a bonus
                 alongside the baseline)
     DEFAULT   = standard navy "Details & specs" toggle

   Both variants use the same .ecare-details-toggle__label-group
   wrapper + .ecare-details-toggle__pill scaffold defined in the
   exclusive block above; this block just re-paints those elements
   with the teal palette via the --special modifier.

   Cascade trap reminder: there are three .ecare-details-toggle
   declarations earlier in this file (~lines 943, 1370, 1990) from
   legacy card layouts. Doubled-class specificity + !important on
   paint properties prevents them from shadowing these rules.
   ════════════════════════════════════════════════════════════════ */

/* Recolored details toggle bar. Soft light-teal background; dark-
   teal text + arrow circle. Pairs with the dark-teal pill below. */
.ecare-details-toggle.ecare-details-toggle--special {
  background: linear-gradient(180deg, #f1faf6 0%, #d6efe3 100%) !important;
  color: #04342C !important;
  border-top-color: rgba(15, 110, 86, 0.15) !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}
.ecare-details-toggle.ecare-details-toggle--special:hover {
  background: linear-gradient(180deg, #e6f4ed 0%, #c8e5d6 100%) !important;
}
.ecare-details-toggle.ecare-details-toggle--special:active,
.ecare-details-toggle.ecare-details-toggle--special.is-open {
  background: linear-gradient(180deg, #c8e5d6 0%, #b1d8c4 100%) !important;
}
.ecare-details-toggle.ecare-details-toggle--special .ecare-toggle-label {
  color: #04342C !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}
.ecare-details-toggle.ecare-details-toggle--special .ecare-toggle-arrow {
  background-color: rgba(15, 110, 86, 0.10) !important;
  border-color: rgba(15, 110, 86, 0.42) !important;
  color: #04342C !important;
}
.ecare-details-toggle.ecare-details-toggle--special:hover .ecare-toggle-arrow,
.ecare-details-toggle.ecare-details-toggle--special.is-open .ecare-toggle-arrow {
  background-color: rgba(15, 110, 86, 0.20) !important;
  border-color: #0F6E56 !important;
}

/* Dark-teal "Special" pill modifier. Same scaffold as the navy
   exclusive pill, repainted for the teal tier. */
.ecare-details-toggle__pill.ecare-details-toggle__pill--special {
  background: #0F6E56 !important;
  color: #fff !important;
}


/* ════════════════════════════════════════════════════════════════
   PROMO URGENCY CUE
   Short factual phrase ("Ends in 5 days." / "Ends tomorrow." /
   "Ends today.") that surfaces a promo's approaching end_date.
   See getRentalPromoUrgency() for the bucket thresholds — note
   that promos more than 7 days out render no cue at all, so this
   only appears when time is genuinely short.

   Two variants — card bar (.ecare-card-offer-urgency) and hero bar
   (.ecare-pgh__offer-urgency) — because they sit in different
   contexts. Both render as their own block-level line below the
   terms so they read as a distinct callout rather than appended
   tail text.

   Tone is calm by design: deeper amber color, bolder weight, no
   animation, no pulsing. The phrase + position do the work.

   Special-cases: inside an EXCLUSIVE bar the amber would clash
   with navy, so we swap. Inside the teal SPECIAL hero variant we
   swap to a darker teal.
   ════════════════════════════════════════════════════════════════ */
.ecare-card-offer-urgency {
  display: block !important;
  margin-top: 6px !important;
  padding-top: 6px !important;
  border-top: 1px dashed rgba(138, 90, 0, 0.25) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #8a5a00 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em !important;
}

/* Inside exclusive bars, swap amber for navy so colors stay in family. */
.ecare-card-offer--exclusive .ecare-card-offer-urgency {
  color: #0b3a6a !important;
  border-top-color: rgba(11, 58, 106, 0.2) !important;
}

/* Inside teal (tier-1 special) bars, swap amber for darker teal. */
.ecare-card-offer--special .ecare-card-offer-urgency {
  color: #0F6E56 !important;
  border-top-color: rgba(15, 110, 86, 0.25) !important;
}

/* Hero variant. The parent .ecare-pgh__offer-foot is a flex
   container with justify-content: space-between and flex-wrap: wrap.
   On a normal child, display:block doesn't force a new line inside
   flex — flex items lay out by the parent's flow rules, not their
   own display. To make this span claim its own row, we need
   flex-basis: 100% which (combined with the parent's flex-wrap)
   wraps it onto the next line below the terms span. */
.ecare-pgh__offer-urgency {
  display: block !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  margin-top: 6px !important;
  padding-top: 6px !important;
  border-top: 1px dashed rgba(138, 90, 0, 0.25) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #8a5a00 !important;
  letter-spacing: 0.01em !important;
}
.ecare-pgh__offer--exclusive .ecare-pgh__offer-urgency {
  color: #0b3a6a !important;
  border-top-color: rgba(11, 58, 106, 0.2) !important;
}
.ecare-pgh__offer--special .ecare-pgh__offer-urgency {
  color: #0F6E56 !important;
  border-top-color: rgba(15, 110, 86, 0.25) !important;
}