/* =========================================================
   E CARE CARDS — PATCH PACK (LATEST)
   Details + Deals Banner + Gap Fix + Buttons
   Single — ready to cut & paste
   ========================================================= */


/* =========================================================
   0) GAP FIX (Header -> Deals Banner)
   - removes any margin/padding between header and image box
   ========================================================= */
.ecare-cat-card .ecare-cat-head{ margin:0 !important; }
.ecare-cat-card .ecare-cat-imgbox{ margin:0 !important; border-top:0 !important; }
.ecare-cat-card .ecare-cat-card-link{ display:block; margin:0 !important; padding:0 !important; }
.ecare-cat-card .ecare-cat-imgbox .deals-banner{ margin:0 !important; }


/* =========================================================
   1) DETAILS BLOCK (fixed height + readable)
   - prevents cards from changing height
   - clamps long values (Name 2 lines, others 1 line)
   - comfortable spacing + readable weights
   - mobile stacks labels cleanly
   ========================================================= */
.ecare-cat-card .ecare-details{
  background:#fff;
  border-top:0;
  padding:12px 12px 14px;
  min-height:180px;                 /* tweak: 120-160 */
}

.ecare-cat-card .ecare-details-mid{
  min-width:0;
  line-height:1.35;
}

.ecare-cat-card .ecare-details-line{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-top:10px;
}
.ecare-cat-card .ecare-details-line:first-child{ margin-top:0; }

.ecare-cat-card .ecare-details-label{
  flex:0 0 90px;
  min-width:90px;
  color:#0b3a6a;
  font-weight:900;
  white-space:nowrap;
}

.ecare-cat-card .ecare-details-value{
  flex:1 1 auto;
  min-width:0;
  color:#111827;
  font-weight:650;
  line-height:1.65;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}

.ecare-cat-card .ecare-details-value-model-number {
 display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;   /* limit to 1 lines */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  max-height: calc(1.4em * 1); /* ensures stable height */
  word-break: break-word;
  min-width: 0; /* required if inside flex */
}

.ecare-cat-card .ecare-details-value-product-name {
  margin-top: 6px;
  font-size: 14px !important;
  font-weight: 950;
  line-height: 1.35 !important;
  text-transform: none;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

  overflow: hidden;
  text-overflow: ellipsis;

  height: calc(1.35em * 3);  /* ← LOCKED to exactly 2 lines */
  min-width: 0;              /* important if inside flex */
}


/* =========================================================
   Deals Callout – Clamp to 6 Lines + Equal Card Height
   ONLY affects the Deal Banner Content section
=============================== */
.ecare-cat-card .ecare-deal-line .ecare-deal-value {
  --lines: 5;      /* change number of lines anytime */
  --lh: 1.65;      /* must match your line-height */

  line-height: calc(var(--lh) * 1em);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines);
  overflow: hidden;
  word-break: break-word;

  /* reserves exact height for cards */
  min-height: calc(var(--lh) * var(--lines) * 1em);
}

/* =========================================================
   FIX: Allow tooltips to escape ONLY in Options row
   ========================================================= */
.ecare-details-line:has(.availability-tags) .ecare-details-value{
  overflow: visible !important;
  display:block !important; /* disables line clamp only here */
}

.ecare-cat-card .ecare-details-line:nth-child(1) .ecare-details-value{ -webkit-line-clamp:4; }
.ecare-cat-card .ecare-details-line:nth-child(2) .ecare-details-value,
.ecare-cat-card .ecare-details-line:nth-child(3) .ecare-details-value{ -webkit-line-clamp:1; }

.ecare-cat-card .ecare-details-chip{
  display:inline-flex;
  align-items:center;
  margin-left:8px;
  padding:4px 8px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  line-height:1;
  background:#eef6ff;
  color:#0b3a6a;
  border:1px solid rgba(185,221,255,.95);
  white-space:nowrap;
  flex:0 0 auto;
}

@media (max-width:640px){
  .ecare-cat-card .ecare-details{ min-height:160px; }
  .ecare-cat-card .ecare-details-line{ flex-direction:column; gap:4px; }
  .ecare-cat-card .ecare-details-label{ flex:0 0 auto; min-width:0; }
  .ecare-cat-card .ecare-details-line:nth-child(1) .ecare-details-value{ -webkit-line-clamp:3; }
}

/* =========================================================
   Fast delivery and store pick up pills
   =========================================================*/

/* Apply overflow visible only to the Delivery and Pick-up pills */
.delivery-pill,
.pick-up-pill,
.shipping-pill,
.rental-pill,
.purchase-pill,
.hsa-fsa-pill {
  position: relative;   /* To position the tooltip properly */
  z-index: 10;          /* Ensure pill is above other elements */
  white-space: normal;  /* Allow text to wrap */
  overflow: hidden;     /* Prevent content from overflowing */
  word-wrap: break-word;/* Ensure long words break */
}

/* Availability tag container for Delivery and Pick-up pills */
.availability-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;   /* Vertically center pills */
  column-gap: 0.35rem;   /* Horizontal space between pills */
  row-gap: 0.55rem;      /* Vertical space when pills wrap to next line */
  max-width: 100%;
  width: 100%;
  position: relative;
  min-height: 100px;      /* Adjust the height to fit 4 pills (increased for 4 pills) */
}

/* =========================
   Specific styles for pills - delivery, pickup, shipping,
========================== */
.delivery-pill,
.pick-up-pill,
.shipping-pill,
.rental-pill,
.purchase-pill,
.hsa-fsa-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;    /* Ensure the text is centered */
  padding: 6px 18px;          /* Equal padding for better spacing */
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #1f2937;
  white-space: normal;        /* Allow the text to wrap */
  text-align: center;        /* Make sure the text is centered */
  flex: 1 1 auto;            /* Allow pill to grow and shrink */
  min-width: 60px;           /* Minimum width */
  height: auto;              /* Allow height to grow based on content */
  box-sizing: border-box;    /* Include padding/border in width calculations */
  overflow: visible;         /* Prevent any overflow */
  margin: 0 !important;      /* Remove any extra margin here */
  position: relative;        /* For positioning the tooltip */
  z-index: 50;               /* Ensure the pill is above other content */
}

/* HSA/FSA Pill chip */
.hsa-fsa-pill{
	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 !important;

	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);
}


/* Fast Same Day Delivery chip */
.delivery-pill {
  background: #d1fae5;       /* Light green for fast delivery */
  color: #166534;
  border-color: #bbf7d0;
}

/* Store Pick-up chip */
.pick-up-pill {
  background: #fff3cd;       /* Light yellow for store pick-up */
  color: #856404;
  border-color: #ffeeba;
}

/* Shipping Available chip */
.shipping-pill {
    background: #cce5ff;      /* Light blue background for shipping */
    color: #004085;           /* Dark blue text */
    border-color: #b8daff;    /* Slightly darker blue border */
}

/* Rental Available chip */
/* Rental Available chip (dark badge) */
/* Rental Available chip (outline only) */
/* Rental Available chip (slate w/ white text) */
.rental-pill{
  background:#334155;     /* slate */
  color:#ffffff !important;          /* white letters */
  border-color:#334155;   /* match border */
}


/* Purchase chip */
.purchase-pill{
  background:#eaf2ff;   /* soft blue */
  color:#0b3a6a;        /* your brand navy */
  border-color:#b9ddff; /* light blue border */
}

/* Tooltip bubble — matches pill theme (blue) — RIGHT ALIGNED */
.delivery-pill:hover::after,
.pick-up-pill:hover::after,
.shipping-pill:hover::after,
.rental-pill:hover::after,
.purchase-pill:hover::after,
.hsa-fsa-pill:hover::after {
  text-transform: none;
  content: attr(data-tip);
  position: absolute;
  right: 0;                   /* Align to right edge of pill */
  left: auto;
  bottom: calc(100% + 10px);   /* Position it just above the pill */
  min-width: 180px;
  max-width: 260px;
  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 with 
 */
  z-index: 10;              /* Ensure the tooltip is above other elements */
}

/* Tooltip arrow — RIGHT ALIGNED */
.delivery-pill:hover::before,
.pick-up-pill:hover::before,
.shipping-pill:hover::before,
.rental-pill:hover::before,
.purchase-pill:hover::before,
.hsa-fsa-pill:hover::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: 10;
}

/* Show tooltip on hover/focus/tap */
.delivery-pill:hover::after,
.delivery-pill:focus::after,
.pick-up-pill:hover::after,
.pick-up-pill:focus::after,
.shipping-pill:hover::after,
.shipping-pill:focus::after,
.rental-pill:hover::after,
.rental-pill:focus::after,
.purchase-pill:hover::after,
.purchase-pill:focus::after,
.hsa-fsa-pill:hover::after,
.hsa-fsa-pill:focus::after,
.delivery-pill:active::after,
.pick-up-pill:active::after,
.shipping-pill:active::after,
.rental-pill:active::after,
.purchase-pill:active::after,
.hsa-fsa-pill:active::after {
  opacity: 1;
  transform: translateY(0);
}

/* Focus ring (helps older adults / keyboard / mobile) */
.delivery-pill:focus,
.pick-up-pill:focus,
.shipping-pill:focus,
.rental-pill:focus,
.purchase-pill:focus,
.hsa-fsa-pill:focus {
  outline: 3px solid rgba(185, 221, 255, .55);
  outline-offset: 2px;
}

.delivery-pill,
.pick-up-pill,
.shipping-pill,
.rental-pill,
.purchase-pill,
.hsa-fsa-pill {
  user-select: none;
  touch-action: manipulation;
}

/* Mobile tweak */
@media (max-width: 420px) {
  .delivery-pill,
  .pick-up-pill,
  .shipping-pill,
  .rental-pill,
  .purchase-pill,
  .hsa-fsa-pill {
    font-size: 14px;        /* Bigger text */
    padding: 10px 14px;     /* Bigger tap target */
    border-radius: 999px;
  }

  .delivery-pill:hover::after,
  .pick-up-pill:hover::after,
  .shipping-pill:hover::after,
  .rental-pill:hover::after,
  .purchase-pill:hover::after,
  .hsa-fsa-pill:hover::after  {
    min-width: 240px;
    max-width: 320px;
    font-size: 15px;        /* Bigger tooltip text */
    padding: 12px 14px;
  }
}

/* Mobile tweak: Tooltip left-aligned and adjust width on small screens */
@media (max-width: 420px) {
  .availability-tag-fast-delivery:hover::after,
  .availability-tag-store-pickup:hover::after,
  .availability-tag-shipping:hover::after,
  .availability-tag-rental:hover::after ,
  .availability-tag-purchase:hover::after,
  .availability-tag-hsa-fsa:hover::after  {
    left: 0;                /* Align to the left edge of the pill */
    right: auto;            /* Ensure the tooltip stays left-aligned */
    bottom: calc(100% + 10px); /* Keep the tooltip just above the pill */
    
    min-width: 160px;        /* Adjust min-width for mobile */
    max-width: 240px;        /* Adjust max-width for mobile */
  }

  /* Adjust the tooltip arrow for left alignment */
  .availability-tag-fast-delivery:hover::before,
  .availability-tag-store-pickup:hover::before,
  .availability-tag-shipping:hover::before,
  .availability-tag-rental:hover::before,
  .availability-tag-purchase:hover::before,
  .availability-tag-hsa-fsa:hover::before  {
    left: 18px;              /* Position the arrow near the left edge */
    right: auto;             /* Ensure the arrow is on the left side */
  }
}

.ecare-details-line--options,
.ecare-details-line--options .ecare-details-value,
.ecare-details-line--options .options-purchase-section,
.ecare-details-line--options .availability-tags{
  overflow: visible !important;
}

/* =========================================================
   2) DEALS BANNER + IMAGE (roomy, not shrunk)
   - banner is a real row (no jumping/cropping)
   - image area keeps a minimum height
   - overall box grows naturally if banner is long
   ========================================================= */
.ecare-cat-card .ecare-cat-imgbox{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;

  height:auto !important;
  min-height:170px !important;      /* tweak: 160-190 */
  background:#fff;
  border-bottom:1px solid rgba(11,58,106,.08);

  overflow:hidden;
}

/* Banner row (fixed height slot so cards don't change) */
.ecare-cat-card .ecare-cat-imgbox .deals-banner{
  position:static !important;
  width:100% !important;
  margin:0 !important;
  border-radius:0 !important;

  padding:12px 14px !important;
  box-shadow:none !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  /* ✅ reserve space for up to 3 lines ALWAYS */
  --deal-lh: 1.25em;                 /* must match .deals-callout line-height */
  --deal-lines: 4;
  min-height: calc((var(--deal-lh) * var(--deal-lines)) + 24px) !important;
  /* 24px = 12px top + 12px bottom padding */

  overflow:hidden !important;        /* keep slot fixed */
  pointer-events:none !important;
  box-sizing:border-box !important;
}

/* Callout: readable + centered + wraps (clamped to 3 lines) */
.ecare-cat-card .ecare-cat-imgbox .deals-callout{
  width:100% !important;
  text-align:center !important;

  color:#fff !important;
  font-weight:950 !important;
  font-size:13px !important;

  line-height:1.25em !important;     /* ✅ must match --deal-lh above */

  white-space:normal !important;
  word-break:break-word !important;

  margin:0 !important;
  padding:0 !important;

  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:4 !important;
  overflow:hidden !important;
}

/* Image area: fixed visual box */
.ecare-cat-card .ecare-cat-imgbox > a{
  flex:1 1 auto !important;
  height:360px !important;   /* 🔥 controls all visual consistency */
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:100% !important;
  padding:12px !important;   /* slightly better than 10px 0 */
  box-sizing:border-box !important;

  position:relative !important;
  z-index:1 !important;
}

/* Image scales inside box */
.ecare-cat-card .ecare-cat-imgbox img{
  width:auto;
  height:auto;
  max-width:105% !important;
  max-height:105% !important;
  object-fit:contain;
  object-position:center;
}


@media (max-width:640px){
  .ecare-cat-card .ecare-cat-imgbox{ min-height:165px !important; }
  .ecare-cat-card .ecare-cat-imgbox .deals-banner{ padding:10px 12px !important; }
  .ecare-cat-card .ecare-cat-imgbox .deals-callout{ font-size:12px !important; line-height:1.22 !important; }
  .ecare-cat-card .ecare-cat-imgbox > a{ min-height:105px !important; padding:16px 0 !important; }
}

/* =========================================================
   FIX: remove gap above deals banner
   (old CSS was centering contents)
   ========================================================= */
.ecare-cat-card .ecare-cat-imgbox{
  justify-content:flex-start !important;  /* ✅ no vertical centering */
  align-items:stretch !important;         /* ✅ banner full width */
  padding-top:0 !important;              /* just in case */
}



/* =========================================================
   3) BUTTONS (stacked, one per line, no cropping)
   - full-width rows
   - beats global fixed-height/overflow styles
   - UPDATED: premium typography + smoother rendering
   ========================================================= */
.ecare-cat-card .product-buy-group{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;

  padding:10px 12px 14px !important;
  margin:0 !important;

  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
  position:relative !important;
}

.ecare-cat-card .product-buy-group .product-button{
  width:100% !important;
  display:block !important;
  box-sizing:border-box !important;

  height:auto !important;
  min-height:44px !important;

  /* ✅ typography upgrade */
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
  font-weight:900 !important;
  font-size:13px !important;          /* was 12px */
  letter-spacing:.02em !important;
  text-transform:none !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;

  line-height:1.1 !important;         /* tighter + cleaner */
  padding:12px 12px !important;
  text-align:center !important;

  border-radius:12px !important;

  white-space:normal !important;
  overflow:visible !important;
}

/* Optional: make the first button slightly calmer */
.ecare-cat-card .product-buy-group .product-button:first-child{
  font-weight:850 !important;
  letter-spacing:.01em !important;
}

/* Optional: make the second button feel more “primary” */
.ecare-cat-card .product-buy-group .product-button:last-child{
  font-weight:950 !important;
  letter-spacing:.03em !important;
  box-shadow:0 10px 18px rgba(0,0,0,.14);
}

/* Deal Price Style */
.ecare-deal-price {
    font-size: 20px;              /* Larger font size for emphasis */
    font-weight: bold;            /* Make the price bold */
    color: #d9534f;               /* Red color for the deal price */
    margin-bottom: 8px;           /* Space below the deal price */
    text-align: left;             /* Align to the left for consistency */
}

/* Crossed out MSRP Style */
.ecare-price-msrp {
    font-size: 14px;              /* Smaller font size */
    color: #888;                  /* Light gray color */
    text-decoration: line-through; /* Cross out the MSRP */
    margin-top: 8px;              /* Space above the MSRP */
    display: block;               /* Ensure it's displayed as a block */
}

/* Regular Price Style */
.ecare-regular-price {
    font-size: 18px;              /* Larger font size for prominence */
    font-weight: bold;            /* Make the price bold */
    color: #333;                  /* Dark gray color for the regular price */
    margin-bottom: 8px;           /* Space below the regular price */
    text-align: left;             /* Align to the left */
}

/* Optional highlighting for Regular Price */
.ecare-regular-price.highlight {
    background-color: #f9f9f9;   /* Light background for highlighting */
    border-radius: 4px;           /* Slight rounding of the edges */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  /* Subtle shadow for elevation */
    padding: 10px;                /* Padding for more emphasis */
}

/* Adding responsive styling for mobile devices */
@media (max-width: 640px) {
    .ecare-deal-price {
        font-size: 18px;           /* Slightly smaller font on mobile */
    }

    .ecare-price-msrp {
        font-size: 12px;           /* Slightly smaller font for crossed-out MSRP */
    }

    .ecare-regular-price {
        font-size: 16px;           /* Slightly smaller font on mobile */
    }
}



/* =========================
   View Link at pricing (footer)
========================== */
/* Styling for Footer Section */


/* Styling for the 'View More Details' link */
.view-link {
    font-size: 16px;
    color: #007bff; /* Blue color for the link */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.view-link:hover {
    color: #0056b3; /* Darker blue on hover */
}
		
/* =========================================================
   DEALS BANNER – structured layout (title / desc / timer)
   ========================================================= */
.ecare-cat-card .ecare-cat-imgbox .deals-banner{
  position:static !important;
  width:100% !important;
  margin:0 !important;
  border-radius:0 !important;
  font-size:12px;
	
  padding:12px 14px !important;
  box-shadow:none !important;

  display:flex !important;
  flex-direction:column !important;      /* 🔥 stack vertically */
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;

  /* Fixed height slot */
  --deal-lh: 1.25em;
  --deal-lines: 8;

  min-height: calc((var(--deal-lh) * var(--deal-lines)) + 24px) !important;

  box-sizing:border-box !important;
  overflow:hidden !important;
}

/* Title */
.deals-title{
  font-weight:950;
  font-size:12px;
  line-height:1.25em;
  margin-bottom:4px;
  color:#fff;
}

/* Description */
.deals-description{
  font-weight:800;
  font-size:12px;
  line-height:1.25em;
  margin-bottom:4px;
  color:#fff;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:5;   /* clamp description */
  overflow:hidden;
}

/* =========================================
   HIGH-CONVERSION DEAL TIMER – ANIMATED
   ========================================= */

/* Ensure deals-banner and stretch full width */
.deals-banner {
    display: flex;
    flex-direction: column;
    align-items: stretch;    
    justify-content: center;
    padding: 0 !important;  
    margin: 0 !important;   
    width: 100%;
    box-sizing: border-box;
}

.deals-banner > a {
    display: block;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

/* Timer container */
.day-deals-contents-timer {
    width: 100%;
    margin-top: auto;

    display: flex;
    justify-content: space-between;
    align-items: center;

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

    /* Sleek gradient background */
background: linear-gradient(
    90deg,
    #1f2933,
    #2e3a46,
    #1f2933
);
    background-size: 200% 100%;
    animation: gradientMove 4s linear infinite;

    backdrop-filter: blur(3px);
    border-top: 1px solid rgba(255,255,255,0.25);
    box-sizing: border-box;
}

/* Label inline */
.day-deals-contents-timer::before {
    content: "ENDS IN";
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    opacity: 0.85;
    color: #fff;
    margin-right: 6px;
    flex-shrink: 0;
}

/* Countdown digits */
.day-deal-banner-timer {
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    font-feature-settings: "tnum";
    text-align: right;
    font-size: 14px;
    font-weight: 1000;
    letter-spacing: 1px;
    color: #fff;
	
    text-shadow:
        0 0 6px rgba(255,255,255,0.25),
        0 0 12px rgba(255,255,255,0.15);
		
    font-variant-numeric: tabular-nums;
    flex-grow: 1;

    /* prevent jump by reserving space for max width (HH:MM:SS) */
    display: inline-block;
    min-width: 85px;  /* adjust if your format is HH:MM:SS */
}

/* Gradient animation */
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}


/* =========================================================
   Price Section Specific Styling (Fixed Height)
   ========================================================= */
.price-section {
  min-height: 100px;   /* Adjust the height to accommodate 1, 2, or 3 prices */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align content to the top */
  padding: 0px 0;      /* Adjust padding to ensure spacing inside */
}

/* If you want to ensure the section is always the same height, you can use height instead of min-height */
.price-section {
  height: 100px;        /* Fixed height for Price Section */
}

@media (max-width: 640px) {
  .price-section 
    height: auto;        /* Remove fixed height on mobile */
    min-height: 0;       /* Reset min-height */
    padding: 10px 0;     /* Adjust padding on mobile */
  }

/* =========================================================
   Fixed Height for the Options Section (Delivery, Pick-up, Shipping)
   ========================================================= */
.options-purchase-section {
  min-height: 190px;   /* Adjust the height to fit 3 or more pills */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align content to the top */
  padding: 0px 0;      /* Adjust padding to ensure spacing inside */
  gap: 0.35rem;         /* Space between the pills */
    
}

@media (max-width: 640px) {
  .options-purchase-section {
    height: auto;        /* Remove fixed height on mobile */
    min-height: 0;       /* Reset min-height on mobile */
    padding: 10px 0;     /* Adjust padding for mobile */
  }
}

/* =========================================================
   Fixed Height for Deals Banner Section (Active Deal or Callout)
   ========================================================= */
.ecare-deal-value {
  min-height: 100px;   /* Set a fixed minimum height to accommodate both the deal title and description */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align content to the top */
  padding: 0px 0;      /* Adjust padding to ensure spacing inside */
  gap: 0.35rem;         /* Space between the lines (title, description, etc.) */
}

/* If you want a fixed height instead of min-height, use height */
.ecare-deal-value {
  height: 100px;        /* Fixed height for the Deals Section */ 
 
}

@media (max-width: 640px) {
  .ecare-deal-value {
    height: auto;        /* Remove fixed height on mobile */
    min-height: 0;       /* Reset min-height on mobile */
    padding: 10px 0;     /* Adjust padding for mobile */
  }
}

/* Image Styling */
.ecare-cat-imgbox {
    position: relative;
    z-index: 1;  /* Ensure the image is below the deal banner */
}

/* =========================================================
   HOT DEAL BUTTON STYLE (Buttons section only)
   Targets: .product-buy-group .ecare-hotdeal-btn
   ========================================================= */
.product-buy-group .ecare-hotdeal-btn{
  background:#9A0E11 !important;
  color:#fff !important;
  border:1px solid #AC1316 !important;
  font-weight:900;
  box-shadow:0 8px 18px rgba(154,14,17,.18);
}

.product-buy-group .ecare-hotdeal-btn:hover{
  filter:brightness(.98);
  transform:translateY(-1px);
}

.product-buy-group .ecare-hotdeal-btn:active{
  transform:translateY(0);
  box-shadow:0 6px 14px rgba(154,14,17,.14);
}

.product-buy-group .ecare-hotdeal-btn{
  background:linear-gradient(180deg,#b01216 0%, #8c0c0f 100%) !important;
}
/* ======================= END HOT DEAL BUTTON STYLE ======================= */
/* =========================================================
   E Care product-template — button section layout fix
   Match target: padded, rounded, spaced buttons
   ========================================================= */

/* Card footer wrapper — white with padding */
.ecare-card-footer {
  background: #0b3a6a  !important;
  padding: 10px !important;
  border-top: none !important;
  border-radius: 0 0 14px 14px !important;
  overflow: hidden !important;
}

/* Actions stack */
.ecare-footer-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ADD TO CART — lime green, full width, rounded */
.ecare-footer-btn--cart {
  background: #8dc63f !important;
  background-image: none !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: .05em !important;
  text-transform: uppercase !important;
  border: none !important;
  cursor: pointer !important;
  font-family: inherit !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}
.ecare-footer-btn--cart:hover { background: #7ab22e !important; color: #fff !important; filter: none !important; }

/* Split row — SEE DETAILS + HOT DEAL side by side */
.ecare-btn-split {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 7px !important;
  width: 100% !important;
}

/* SEE DETAILS — charcoal + gold */
.ecare-footer-btn--details {
  background: #3a3a3a !important;
  background-image: none !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;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  border: none !important;
  cursor: pointer !important;
  font-family: inherit !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}
.ecare-footer-btn--details:hover { background: #2a2a2a !important; color: #f5a623 !important; filter: none !important; }

/* HOT DEAL — solid red */
.ecare-footer-btn--hot {
  background: #c0392b !important;
  background-image: none !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;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  border: none !important;
  cursor: pointer !important;
  font-family: inherit !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}
.ecare-footer-btn--hot:hover { background: #a93226 !important; color: #fff !important; filter: none !important; }

/* SEE DETAILS full width when no deal (only child of actions) */
.ecare-footer-actions > .ecare-footer-btn--details {
  border-radius: 8px !important;
  width: 100% !important;
  padding: 12px 12px !important;
}
/* =========================================================
   E Care — Pills v2: dynamic sizing + rental tooltip fix
   ========================================================= */

/* Container — column stack, no overflow clipping */
.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 — dynamic, 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 12px !important;
  border-radius: 999px !important;
  font-size: clamp(11px, 1.5vw, 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;
  transition: filter .15s !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;
}
.ecare-pill--delivery:hover,
.ecare-pill--delivery:focus { filter: brightness(.95) !important; }

/* Quick Store Pick-up — yellow */
.ecare-pill--pickup {
  background: #fef9c3 !important;
  color: #854d0e !important;
}
.ecare-pill--pickup:hover,
.ecare-pill--pickup:focus { filter: brightness(.95) !important; }

/* Fast Shipping — blue */
.ecare-pill--shipping {
  background: #dbeafe !important;
  color: #1e40af !important;
}
.ecare-pill--shipping:hover,
.ecare-pill--shipping:focus { filter: brightness(.95) !important; }

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

/* Tooltip bubble — all pill classes */
.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;
  left: auto;
  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;
  opacity: 1;
  text-transform: none;
  word-break: normal;
}

/* 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;
  left: auto;
  bottom: calc(100% + 2px);
  border: 7px solid transparent;
  border-top-color: #0f4c8c;
  z-index: 10000;
  pointer-events: none;
}
/* =========================================================
   E Care — FINAL WIDTH FIX based on debug v2
   Card is content-box 352px, children are 324px (28px short)
   Root cause: children inherit a 14px side constraint
   Fix: force card to border-box, all children width:100%
   ========================================================= */

/* Card: border-box so border is included, children fill properly */
.ecare-cat-card {
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Every direct child of card must be border-box + full width */
.ecare-cat-card > *,
.ecare-cat-card .ecare-cat-head,
.ecare-cat-card .ecare-cat-sub,
.ecare-cat-card .ecare-cat-delivery-strip,
.ecare-cat-card--new .ecare-cat-imgbox,
.ecare-cat-card--new .ecare-card-body,
.ecare-cat-card--new .ecare-price-bar,
.ecare-cat-card--new .ecare-regular-bar,
.ecare-cat-card .ecare-deal-bar,
.ecare-cat-card .ecare-details-toggle,
.ecare-cat-card .ecare-details-panel,
.ecare-cat-card .ecare-card-footer {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* imgbox specifically — kill any inherited padding */
.ecare-cat-card--new .ecare-cat-imgbox {
  padding: 0 !important;
  margin: 0 !important;
}

.ecare-cat-card .ecare-cat-imgbox > a {
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 0 !important;
  display: block !important;
}

.ecare-cat-card .ecare-cat-imgbox img {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 280px !important;
  object-fit: contain !important;
  display: block !important;
  padding: 10px !important;
}
/* Old-style cards (no --new class) restore original imgbox */
.ecare-cat-card:not(.ecare-cat-card--new) .ecare-cat-imgbox {
  height: 150px !important;
  padding: 32px 0 !important;
  overflow: hidden !important;
  width: 100% !important;
}
.ecare-cat-card:not(.ecare-cat-card--new) .ecare-cat-imgbox > a {
  height: 100% !important;
  padding: 0 !important;
}
.ecare-cat-card:not(.ecare-cat-card--new) .ecare-cat-imgbox img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
/* =============================================================
   CARD ALIGNMENT & DISCONTINUED FIXES
   ============================================================= */

/* Card flex column so footer pins to bottom */
.ecare-cat-card {
  display: flex !important;
  flex-direction: column !important;
}

/* Card body grows to push footer down */
.ecare-card-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

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

/* Reserve space for 2 lines in the delivery strip */
.ecare-cat-sub.ecare-cat-delivery-strip {
  height: auto !important;
  min-height: 44px !important;
  white-space: normal !important;
  text-overflow: unset !important;
  overflow: visible !important;
  align-items: center !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}

/* Discontinued strip — red, same reserved height */
.ecare-cat-delivery-strip--discontinued {
  background: #9A0E11 !important;
  color: #fff !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
}

/* Bottom border on Details & Specs toggle */
.ecare-details-toggle {
  border-bottom: 2px solid rgba(255,255,255,.25) !important;
}

/* Call Us button — identical sizing to Add to Cart */
.ecare-footer-btn--callus {
  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: .05em !important;
  text-transform: uppercase !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  cursor: pointer !important;
  background: #1a6fc4 !important;
  color: #fff !important;
  border: none !important;
  transition: background .15s !important;
}
.ecare-footer-btn--callus:hover {
  background: #155da0 !important;
  color: #fff !important;
}