/* ----------------------- PRODUCT IMAGE GALLERY ----------------------- */
.product-gallery {
  position: relative;
  max-width: 900px; /* increased width for bigger view */
  margin: 10px auto 4px;
  text-align: center;
}

.product-gallery img {
  width: 100%;
  max-height: 600px;        /* height limit for tall images */
  object-fit: contain;       /* fit tall images without distortion */
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

/* overlay arrow buttons */
.product-gallery .swiper-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,91,172,0.9);
  color: #fff;
  border: none;
  font-size: 28px;
  padding: 14px 18px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: background 0.25s ease, transform 0.1s ease;
}
.product-gallery .swiper-button:hover { background: rgba(0,91,172,1); }
.product-gallery .prev-btn { left: 12px; }
.product-gallery .next-btn { right: 12px; }
.product-gallery .swiper-button:active { transform: translateY(-50%) scale(0.95); }

/* thumbnails */
.product-thumbs {
  max-width: 900px;
  margin: 4px auto 0;
  padding: 0;
}
.product-thumbs .swiper-slide { width: auto; }
.product-thumbs img {
  width: 100%;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.92;
  transition: opacity 0.2s, transform 0.15s, border 0.2s;
}
.product-thumbs img:hover { opacity: 1; transform: scale(1.03); }
.product-thumbs .swiper-slide-thumb-active img {
  border: 2px solid #005BAC;
  opacity: 1;
}

/* make buttons big enough for seniors */
.product-gallery .swiper-button { min-width: 48px; min-height: 48px; }

/* ----------------------- COLOR GALLERY ----------------------- */


/* ----------------------- ACCORDION ----------------------- */
.accordion-container {
    max-width: 100%;
    margin: 40px auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    font-family: 'Arial', sans-serif;
    overflow: hidden;
    padding: 10px 15px;
}

.accordion-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 12px;
    background: #f9f9f9;
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion-item[open] {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.accordion-header {
    cursor: pointer;
    padding: 14px 20px;
    font-size: 16px;
    color: #007bff;
    font-weight: bold;
    position: relative;
    user-select: none;
    transition: background 0.3s ease, color 0.3s ease;
}

.accordion-header:hover {
    color: #0056b3;
}

.accordion-header::after {
    content: "▼";
    position: absolute;
    right: 20px;
    transition: transform 0.3s ease;
}

.accordion-item[open] .accordion-header::after {
    transform: rotate(-180deg);
}

.accordion-content {
    padding: 15px 20px;
    font-size: 15px;
    color: #383838;
    line-height: 1.6;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* =========================================================
   E Care Product UI
   Tables + callouts + notes + resources + videos
   Older-friendly, high contrast, responsive
   ========================================================= */

:root{
  --ecare-blue:#0b3a6a;
  --ecare-blue-dark:#082e55;
  --ecare-border:#dbeafe;

  --ecare-text:#1f2937;
  --ecare-muted:#4b5563;

  --ecare-chip-bg:#e8f2ff;
  --ecare-chip-text:#062a4d;
  --ecare-chip-border:#bcd7ff;

  --ecare-gold:#f5b301;
  --ecare-gold-soft:#fffdf2;
  --ecare-gold-border:#fde7a0;

  --ecare-shadow:0 12px 26px rgba(0,0,0,.07);
  --ecare-shadow-soft:0 10px 22px rgba(0,0,0,.06);
}

/* Keep sizing predictable inside components */
.ecare-table-card,
.ecare-table-card *{
  box-sizing:border-box;
}

/* Card */
.ecare-table-card{
  border:1px solid var(--ecare-border);
  background:#ffffff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--ecare-shadow);
  margin:16px 0 20px 0;
}

/* Header (bigger + clear) */
.ecare-table-head{
  background:linear-gradient(180deg,var(--ecare-blue),var(--ecare-blue-dark));
  color:#fff;
  padding:16px 18px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}
.ecare-table-head .kicker{
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  font-size:16px;
  line-height:1.15;
  opacity:1;
}
.ecare-table-head .sub{
  font-size:14px;
  opacity:.95;
  text-align:right;
  line-height:1.25;
  max-width:52%;
}
.ecare-table-head .sub span{
  display:inline-block;
  margin-top:4px;
  font-size:13px;
  opacity:.92;
}

/* Body padding helper */
.ecare-card-body{
  padding:14px 16px;
  background:#ffffff;
  max-width:100%;
}

/* Vertical stacking */
.ecare-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
  max-width:100%;
}

/* Table scroll */
.ecare-table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Table */
.ecare-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:620px;
}
.ecare-table--wide{ min-width:760px; }

.ecare-table th{
  background:#f7fbff;
  color:var(--ecare-blue);
  text-align:left;
  padding:14px 16px;
  font-weight:900;
  font-size:16px;
  line-height:1.25;
  border-bottom:1px solid var(--ecare-border);
  white-space:nowrap;
}
.ecare-table td{
  padding:14px 16px;
  border-bottom:1px solid #eef2f7;
  color:var(--ecare-text);
  vertical-align:top;
  font-size:16px;
  line-height:1.35;
}
.ecare-table tr:nth-child(even) td{ background:#fbfdff; }
.ecare-table tr:hover td{ background:#eef6ff; }

/* Chips (bigger for seniors) */
.ecare-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:var(--ecare-chip-bg);
  color:var(--ecare-chip-text);
  border:2px solid var(--ecare-chip-border);
  border-radius:999px;

  padding:6px 12px;
  font-size:15px;
  font-weight:900;
  line-height:1.1;
  letter-spacing:.2px;
  white-space:nowrap;
  margin:4px 8px 4px 0;

  box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.ecare-muted{
  color:var(--ecare-muted);
  font-size:14px;
  line-height:1.35;
}
.ecare-strong{ font-weight:900; }

/* Feature line items */
.ecare-feature{ display:flex; align-items:flex-start; gap:0; }
.ecare-icon{
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--ecare-blue);
  color:#fff;
  border-radius:10px;
  margin-right:10px;
  font-size:15px;
  flex:0 0 auto;
}

/* Compare tints */
.ecare-col-typical{ background:#fff7f7 !important; }
.ecare-col-aerofly{ background:#f0f7ff !important; }

/* Gold note */
.ecare-note{
  background:var(--ecare-gold-soft);
  border:2px solid var(--ecare-gold-border);
  border-left:8px solid var(--ecare-gold);
  border-radius:16px;
  padding:14px 16px;

  color:#2a2a2a;
  font-size:16px;
  line-height:1.65;
  font-weight:500;

  box-shadow:var(--ecare-shadow-soft);
  max-width:100%;
}
.ecare-note .ecare-note-title{
  display:block;
  font-size:18px;
  font-weight:800;
  color:var(--ecare-blue);
  margin-top:6px;
}
.ecare-note b{
  color:var(--ecare-blue);
  font-weight:700;
}
.ecare-note .ecare-note-label{
  display:inline-block;
  background:var(--ecare-gold);
  color:#1f2937;
  font-weight:900;
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:8px;
}

/* Blue callout (Quick note blocks) */
.ecare-callout{
  background:#f7fbff;
  border:1px solid var(--ecare-border);
  border-left:6px solid var(--ecare-blue);
  border-radius:14px;
  padding:12px 14px;
  color:#2a2a2a;
  font-size:16px;
  line-height:1.55;
}
.ecare-callout--dashed{
  border-style:dashed;
  border-color:#cfe3ff;
  border-left-style:solid;
  border-left-color:var(--ecare-blue);
}
.ecare-callout-title{
  font-weight:800;
  color:var(--ecare-blue);
}

/* Spec strip (light blue bar inside cards) */
.ecare-strip{
  background:#f7fbff;
  border-bottom:1px solid var(--ecare-border);
  padding:10px 14px;
}
.ecare-strip-hint{
  display:inline-block;
  margin-left:6px;
  color:var(--ecare-muted);
  font-size:14px;
}

/* Resource button */
.ecare-resource-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

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

  background:var(--ecare-gold-soft);
  border:2px solid var(--ecare-gold-border);
  color:#2a2a2a;
  text-decoration:none;
  font-weight:900;

  box-shadow:var(--ecare-shadow-soft);
  max-width:100%;
}
.ecare-resource-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.ecare-resource-ico{
  width:42px;
  height:42px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--ecare-gold);
  color:#1f2937;
  font-size:18px;
  flex:0 0 auto;
}
.ecare-resource-text{
  display:flex;
  flex-direction:column;
  line-height:1.25;
  min-width:0;
}
.ecare-resource-title{
  font-size:17px;
  white-space:normal;
}
.ecare-resource-sub{
  font-size:14px;
  font-weight:600;
  color:var(--ecare-muted);
  white-space:normal;
}
.ecare-resource-cta{
  background:var(--ecare-blue);
  color:#fff;
  font-weight:900;
  padding:8px 14px;
  border-radius:999px;
  font-size:14px;
  white-space:nowrap;
  flex:0 0 auto;
}

/* Video blocks */
.ecare-video-frame{
  border:1px solid var(--ecare-border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--ecare-shadow-soft);
}
.ecare-video-title{
  background:#f7fbff;
  border-bottom:1px solid var(--ecare-border);
  padding:10px 12px;
  font-weight:900;
  color:var(--ecare-blue);
}
.ecare-yt{
  width:100%;
  height:420px;
  border:0;
  display:block;
}

/* Hover / tap feedback */
.ecare-linkbtn{ transition:transform .12s ease, box-shadow .12s ease; }
.ecare-linkbtn:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(0,0,0,.10); }
.ecare-linkbtn:active{ transform:translateY(0); box-shadow:var(--ecare-shadow-soft); }

/* Utility spacing (keeps HTML clean) */
.ecare-mb-12{ margin-bottom:12px; }
.ecare-mb-14{ margin-bottom:14px; }
.ecare-my-12{ margin:12px 0; }

/* Mobile */
@media (max-width:768px){
  .ecare-table{ min-width:720px; }
  .ecare-table-head{
    padding:14px 14px;
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  .ecare-table-head .sub{
    text-align:left;
    max-width:100%;
  }
  .ecare-table th{ font-size:15px; }
  .ecare-table td{ font-size:15px; }
  .ecare-chip{ font-size:14px; padding:6px 10px; }
  .ecare-yt{ height:260px; }
}

/* =========================================================
   Final polish: overflow safety + mobile strip readability + focus
   Append at the bottom of ecare-product-details.css
   ========================================================= */

/* Prevent long values from pushing layout */
.ecare-table td,
.ecare-table th,
.ecare-callout,
.ecare-note,
.ecare-strip-hint,
.ecare-resource-title,
.ecare-resource-sub{
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Spec strip: wraps nicely instead of stretching wide */
.ecare-strip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

/* Hint in strip: give it its own line when needed */
.ecare-strip-hint{
  margin-left:0;            /* margin handled by flex gap */
  flex:1 1 260px;           /* allows it to drop below chips */
  min-width:240px;
}

/* Table scroll area: make sure it never exceeds container */
.ecare-table-scroll{
  max-width:100%;
}

/* Slightly calmer hover effect for older audience */
.ecare-linkbtn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(0,0,0,.10);
}

/* Keyboard accessibility: visible focus ring on clickable items */
.ecare-resource-btn:focus-visible,
.ecare-linkbtn:focus-visible,
.ecare-table-card a:focus-visible{
  outline:3px solid var(--ecare-gold);
  outline-offset:3px;
  border-radius:16px;
}

/* =========================================================
   FIX: Lists breaking inside callouts (global UL/LI overrides)
   Put this at the VERY BOTTOM of the CSS file
   ========================================================= */

.ecare-callout .ecare-listwrap{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
}

.ecare-callout ul.ecare-ul{
  /* force normal list layout even if a global rule sets UL to flex/grid */
  display:block !important;
  width:100% !important;
  max-width:100% !important;

  list-style-type:disc !important;
  list-style-position:outside !important;

  margin:10px 0 0 0 !important;
  padding:0 0 0 24px !important;

  /* neutralize “weird” global list behaviors */
  column-count:initial !important;
  column-gap:initial !important;
}

.ecare-callout ul.ecare-ul > li{
  display:list-item !important;   /* restores bullets if global li is flex/inline */
  width:auto !important;
  float:none !important;
  clear:both !important;

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

  white-space:normal !important;
  line-height:1.65 !important;
}

.ecare-callout ul.ecare-ul > li::marker{
  color:var(--ecare-blue) !important;
  font-weight:900 !important;
}

.ecare-mini-table{
  margin-top:10px;
  border:1px solid var(--ecare-border);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}

.ecare-mini-row{
  display:flex;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid #eef2f7;
  line-height:1.6;
}

.ecare-mini-row:last-child{ border-bottom:0; }

.ecare-mini-row b{
  min-width:210px;
  color:var(--ecare-blue);
  font-weight:900;
}

.ecare-mini-row span{ color:var(--ecare-text); }
@media (max-width:768px){
  .ecare-mini-row{ flex-direction:column; gap:4px; }
  .ecare-mini-row b{ min-width:unset; }
}

/* Warm (less-blue) callout variant */
.ecare-callout--warm{
  background: var(--ecare-gold-soft);
  border: 1px solid var(--ecare-gold-border);
  border-left: 6px solid var(--ecare-gold);
}
.ecare-callout--warm .ecare-callout-title{
  color: var(--ecare-blue); /* keep readable */
}


/* ----------------------- E CARE MEDIA HELPERS ----------------------- */
.ecare-img{
  width:min(95%, 980px);
  display:block;
  margin:10px auto;
  border-radius:14px;
}

/* ----------------------- E CARE TABLE GROUP ROWS ----------------------- */
.ecare-table .ecare-group td{
  background:#f7fbff;
  color:var(--ecare-blue);
  font-weight:900;
  border-bottom:1px solid var(--ecare-border);
  padding:12px 16px;
}


/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  .ecare-linkbtn,
  .ecare-linkbtn:hover{
    transition:none !important;
    transform:none !important;
  }
}

/* Mobile: make the strip hint always read clean */
@media (max-width:768px){
  .ecare-strip-hint{
    flex:1 1 100%;
    min-width:0;
  }
}

/* =========================================================
   FINAL: Table swipe hint (Option A ONLY)
   - JS inserts: <div class="ecare-strip" data-ecare-scroll-hint="1" hidden>...</div>
     right BEFORE: <div class="ecare-table-scroll">...</div>
   - JS toggles: .is-scrollable on .ecare-table-scroll
   - This CSS:
       1) shows the strip only when scrollable
       2) adds a right-edge fade cue
   ========================================================= */

/* Keep the wrapper scrollable and overlay-capable */
.ecare-table-scroll{
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Show only on small screens (mobile + responsive emulator) */
@media (max-width: 900px){

  /* Show the hint strip only if the NEXT wrapper is scrollable */
  .ecare-strip[data-ecare-scroll-hint="1"]{
    display: none;              /* hidden by default */
    margin: 0 0 10px 0;
    border-radius: 12px;
  }

  .ecare-table-scroll.is-scrollable + .ecare-strip[data-ecare-scroll-hint="1"]{
    display: none; /* safety (shouldn't happen) */
  }

  /* IMPORTANT: hint strip is BEFORE the wrapper */
  .ecare-strip[data-ecare-scroll-hint="1"] + .ecare-table-scroll.is-scrollable{
    /* no layout changes here (no CLS) */
  }

  .ecare-strip[data-ecare-scroll-hint="1"] + .ecare-table-scroll.is-scrollable{
    /* keep for clarity */
  }

  /* Make the strip visible only when its following wrapper is scrollable */
  .ecare-strip[data-ecare-scroll-hint="1"] + .ecare-table-scroll.is-scrollable{
    /* nothing needed */
  }

  .ecare-strip[data-ecare-scroll-hint="1"]{
    /* if you want it slightly less blue on mobile */
    background: var(--ecare-gold-soft);
    border-bottom: 1px solid var(--ecare-gold-border);
  }

  /* This is the key selector:
     strip immediately followed by scroll wrapper that is scrollable */
  .ecare-strip[data-ecare-scroll-hint="1"] + .ecare-table-scroll.is-scrollable{
    /* show the strip above (JS also unhides, but this covers edge cases) */
  }

  /* If JS uses hidden=true/false, honor it, but also force visibility */
  .ecare-strip[data-ecare-scroll-hint="1"][hidden]{
    display: none !important;
  }
  .ecare-table-scroll.is-scrollable:not([data-ecare-nohint]){ }

  /* When JS sets hint.hidden=false, it will render.
     Add a slightly stronger “swipe” look */
  .ecare-strip[data-ecare-scroll-hint="1"] .ecare-chip{
    background: rgba(245,179,1,.18);
    border-color: var(--ecare-gold-border);
    color: #1f2937;
  }

}


/* =========================================================
   CLS-safe table swipe cue (no DOM insertion)
   Requires JS to add .is-scrollable on .ecare-table-scroll
   ========================================================= */

.ecare-table-scroll{
  position:relative;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
}

/* =========================================================
   Table swipe hint (FINAL) — badge only, NO fade, CLS-safe
   Shows only when JS adds .is-scrollable on .ecare-table-scroll
   ========================================================= */

.ecare-table-scroll{
  position:relative;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
}

/* Show on small screens OR touch devices */
@media (max-width: 992px), (hover:none) and (pointer:coarse){

  .ecare-table-scroll.is-scrollable::before{
    content:"Swipe ↔ to View More"; /* Change this text */
    position:absolute;
    right:10px;
    bottom:10px;
    z-index:5;

    background:rgba(245,179,1,.96);
    color:#1f2937;
    border:1px solid var(--ecare-gold-border);
    border-radius:999px;
    padding:7px 10px;

    font-weight:900;
    font-size:13px;
    line-height:1;
    letter-spacing:.2px;

    pointer-events:none; /* never blocks scrolling */
    box-shadow:0 10px 22px rgba(0,0,0,.12);

    opacity:1;
    transition:opacity .2s ease;
  }

  /* Optional: fade out after user swipes once (JS adds .has-swiped) */
  .ecare-table-scroll.has-swiped::before{
    opacity:0;
  }
}

/* Smooth anchor scrolling (modern browsers) */
html { scroll-behavior: smooth; }

/* Optional: if you have a sticky header, offset anchor landing */
:target { scroll-margin-top: 90px; } /* adjust 90px to your header height */