/* === Accordion: match luggage site look & feel === */
.pricing-scope .units-accordion{display:grid;gap:1rem}
.pricing-scope details.unit-item{border:0}
.pricing-scope details.unit-item > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:1.0rem 1.25rem;border:3px solid #cbd5e1;border-radius:1rem;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.12);
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pricing-scope details.unit-item > summary::-webkit-details-marker{display:none}
.pricing-scope .unit-title{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-weight:800}
.pricing-scope .unit-title .pill{display:inline-flex;align-items:center;padding:.45rem .75rem;border-radius:999px;border:1px solid #e2e8f0;background:#f8fafc}
.pricing-scope .badge--loc{display:inline-flex;align-items:center;padding:.35rem .6rem;border-radius:999px;background:#eef2ff;border:1px solid #e0e7ff;color:#3730a3;font-weight:700}
.pricing-scope .chev{width:18px;height:18px;transform:rotate(0);transition:transform .2s ease}
.pricing-scope details.unit-item[open] .chev{transform:rotate(180deg)}
.pricing-scope details.unit-item .unit-body{margin-top:.75rem;padding:1rem 1.25rem;border:3px solid #cbd5e1;border-radius:1rem;background:rgba(255,255,255,.8);box-shadow:0 10px 30px rgba(0,0,0,.08);display:grid;grid-template-columns:1.6fr .9fr;gap:1rem}
@media (max-width: 960px){.pricing-scope details.unit-item .unit-body{grid-template-columns:1fr}}
.pricing-scope .unit-specs{border:1px solid #e2e8f0;border-radius:.9rem;padding:.9rem;background:#f8fafc}
.pricing-scope .specs-list{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1rem}
@media (max-width:560px){.pricing-scope .specs-list{grid-template-columns:1fr}}
.pricing-scope .specs-list dt{font-weight:800;color:#0f172a}
.pricing-scope .specs-list dd{margin:0;color:#475569}
.pricing-scope .price-card{margin-top:.5rem;border:1px solid #e2e8f0;border-radius:.9rem;background:#fff;display:grid}
.pricing-scope .price-line{display:flex;justify-content:space-between;gap:.75rem;padding:.6rem .8rem;border-bottom:1px dashed #e2e8f0}
.pricing-scope .price-line:last-child{border-bottom:none}
.pricing-scope .price-line .label{font-weight:800;color:#0f172a}
.pricing-scope .price-line .value{font-variant-numeric:tabular-nums;font-weight:900;color:#0b4c7a}
.pricing-scope .unit-notes{margin-top:.5rem;color:#475569}
.pricing-scope .unit-gallery.small{display:grid;grid-template-columns:1fr;gap:.6rem;align-content:start}
.pricing-scope .unit-gallery.small img{max-width:360px;aspect-ratio:4/3;object-fit:cover;border-radius:.75rem;border:1px solid #e2e8f0;background:#f8fafc}
/* ===========================================
   PRICING PAGES — drop-in accordion styling
   No HTML changes needed.
   =========================================== */

.pricing-scope .units-accordion {
  --green: #10b981; /* emerald-500 */
  --blue:  #0ea5e9; /* sky-500 */
  --red:   #f43f5e; /* rose-500 */
  display: grid;
  gap: 1rem;
}

/* Kill any borders on the <details> wrapper itself (avoids double lines) */
.pricing-scope details.unit-item {
  border: 0 !important;
  /* default theme (will be overridden by nth-of-type below) */
  --c: var(--green);
}

/* Color cycle: 1=green, 2=blue, 3=red, then repeat */
.pricing-scope .units-accordion details.unit-item:nth-of-type(3n + 1) { --c: var(--green); }
.pricing-scope .units-accordion details.unit-item:nth-of-type(3n + 2) { --c: var(--blue); }
.pricing-scope .units-accordion details.unit-item:nth-of-type(3n)     { --c: var(--red); }

/* Header (summary) */
.pricing-scope details.unit-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 2px solid var(--c) !important;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pricing-scope details.unit-item > summary::-webkit-details-marker { display: none; }
.pricing-scope .unit-title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-weight: 800; }

/* Icon rotation stays the same */
.pricing-scope .chev { width: 18px; height: 18px; transform: rotate(0); transition: transform .2s ease; }
.pricing-scope details.unit-item[open] .chev { transform: rotate(180deg); }

/* Body (unit-body): SEAMLESS with header when open */
.pricing-scope details.unit-item .unit-body {
  margin-top: 0; /* critical: no gap */
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  display: grid; grid-template-columns: 1.6fr .9fr; gap: 1rem;

  /* Draw only LEFT/RIGHT/BOTTOM borders in the theme color */
  border-left: 2px solid var(--c) !important;
  border-right: 2px solid var(--c) !important;
  border-bottom: 2px solid var(--c) !important;
  border-top: 0 !important;

  /* Rounded only at the bottom — top fuses to summary */
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  overflow: hidden;
}
@media (max-width: 960px) {
  .pricing-scope details.unit-item .unit-body { grid-template-columns: 1fr; }
}

/* Make the header hand-off clean when open */
.pricing-scope details.unit-item[open] > summary {
  /* Remove ONLY bottom border so the body can attach flush */
  border-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* --- Keep your original card internals (optional tidy) --- */
.pricing-scope .unit-specs      { border:1px solid #e2e8f0; border-radius:.9rem; padding:.9rem; background:#f8fafc; }
.pricing-scope .specs-list      { display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1rem; }
@media (max-width:560px) {
  .pricing-scope .specs-list    { grid-template-columns:1fr; }
}
.pricing-scope .specs-list dt   { font-weight:800; color:#0f172a; }
.pricing-scope .specs-list dd   { margin:0; color:#475569; }
.pricing-scope .price-card      { margin-top:.5rem; border:1px solid #e2e8f0; border-radius:.9rem; background:#fff; display:grid; }
.pricing-scope .price-line      { display:flex; justify-content:space-between; gap:.75rem; padding:.6rem .8rem; border-bottom:1px dashed #e2e8f0; }
.pricing-scope .price-line:last-child { border-bottom:none; }
.pricing-scope .price-line .label { font-weight:800; color:#0f172a; }
.pricing-scope .price-line .value { font-variant-numeric: tabular-nums; font-weight:900; color:#0b4c7a; }
.pricing-scope .unit-notes      { margin-top:.5rem; color:#475569; }
.pricing-scope .unit-gallery.small { display:grid; grid-template-columns:1fr; gap:.6rem; align-content:start; }
.pricing-scope .unit-gallery.small img { max-width:360px; aspect-ratio:4/3; object-fit:cover; border-radius:.75rem; border:1px solid #e2e8f0; background:#f8fafc; }

/* (Optional) hover polish on headers */
.pricing-scope details.unit-item > summary:hover {
  box-shadow: 0 12px 36px rgba(0,0,0,.14);
}
/* === FINAL FIX: remove body top rounding for seamless merge === */

/* When accordion is OPEN, the body connects flush to the header */
.pricing-scope details.unit-item[open] .unit-body {
  border-top: 0 !important;            /* no top border */
  border-top-left-radius: 0 !important;  /* no top rounding */
  border-top-right-radius: 0 !important; /* no top rounding */
}

/* Header keeps top radius, but loses bottom radius when open */
.pricing-scope details.unit-item[open] > summary {
  border-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
/* === Optional polish: unified shadow for header + body === */

/* When closed, header shadow only */
.pricing-scope details.unit-item > summary {
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* When open, give the WHOLE card one unified shadow */
.pricing-scope details.unit-item[open] > summary {
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.pricing-scope details.unit-item[open] .unit-body {
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
/* ============================================================
   T4mpat — Pricing Pages Accordion (scoped, conflict-free)
   Drop-in CSS — preserves your current perfect look
   ============================================================ */

.pricing-scope .units-accordion {
  --green: #10b981; /* emerald-500 */
  --blue:  #0ea5e9; /* sky-500 */
  --red:   #f43f5e; /* rose-500 */
  display: grid;
  gap: 1rem;
}

/* Remove any legacy borders on <details> wrappers */
.pricing-scope details.unit-item { border: 0 !important; }

/* Color cycle per card: 1=green, 2=blue, 3=red, repeat */
.pricing-scope .units-accordion details.unit-item:nth-of-type(3n + 1) { --c: var(--green); }
.pricing-scope .units-accordion details.unit-item:nth-of-type(3n + 2) { --c: var(--blue);  }
.pricing-scope .units-accordion details.unit-item:nth-of-type(3n)     { --c: var(--red);   }

/* =======================
   Header (summary)
   ======================= */
.pricing-scope details.unit-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 2px solid var(--c) !important;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pricing-scope details.unit-item > summary::-webkit-details-marker { display: none; }

.pricing-scope .unit-title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-weight: 800; }
.pricing-scope .chev { width: 18px; height: 18px; transform: rotate(0); transition: transform .2s ease; }
.pricing-scope details.unit-item[open] .chev { transform: rotate(180deg); }

/* Open state: let the body attach seamlessly */
.pricing-scope details.unit-item[open] > summary {
  border-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* Optional hover polish */
.pricing-scope details.unit-item > summary:hover {
  box-shadow: 0 12px 36px rgba(0,0,0,.14);
}

/* =======================
   Body (unit-body)
   ======================= */
.pricing-scope details.unit-item .unit-body {
  margin-top: 0; /* no gap under header */
  background: #fff;
  display: grid; grid-template-columns: 1.6fr .9fr; gap: 1rem;

  /* Seamless borders: only L/R/B; no top border so it fuses to header */
  border-left: 2px solid var(--c) !important;
  border-right: 2px solid var(--c) !important;
  border-bottom: 2px solid var(--c) !important;
  border-top: 0 !important;

  /* Rounded on bottom only */
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;

  /* Unified open shadow to match header */
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  overflow: hidden;
}

@media (max-width: 960px) {
  .pricing-scope details.unit-item .unit-body { grid-template-columns: 1fr; }
}

/* =======================
   Inner cards (exactly as before)
   ======================= */
.pricing-scope .unit-specs {
  border: 1px solid #e2e8f0; border-radius: .9rem; padding: .9rem; background: #f8fafc;
}
.pricing-scope .specs-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem;
}
@media (max-width:560px) {
  .pricing-scope .specs-list { grid-template-columns: 1fr; }
}
.pricing-scope .specs-list dt { font-weight: 800; color: #0f172a; }
.pricing-scope .specs-list dd { margin: 0; color: #475569; }

.pricing-scope .price-card {
  margin-top: .5rem; border: 1px solid #e2e8f0; border-radius: .9rem; background: #fff; display: grid;
}
.pricing-scope .price-line {
  display: flex; justify-content: space-between; gap: .75rem; padding: .6rem .8rem; border-bottom: 1px dashed #e2e8f0;
}
.pricing-scope .price-line:last-child { border-bottom: none; }
.pricing-scope .price-line .label { font-weight: 800; color: #0f172a; }
.pricing-scope .price-line .value { font-variant-numeric: tabular-nums; font-weight: 900; color: #0b4c7a; }

.pricing-scope .unit-notes { margin-top: .5rem; color: #475569; }
.pricing-scope .unit-gallery.small {
  display: grid; grid-template-columns: 1fr; gap: .6rem; align-content: start;
}
.pricing-scope .unit-gallery.small img {
  max-width: 360px; aspect-ratio: 4/3; object-fit: cover; border-radius: .75rem; border: 1px solid #e2e8f0; background: #f8fafc;
}

/* =======================
   Tiny accessibility niceties
   ======================= */
.pricing-scope details.unit-item > summary:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 3px;
  border-radius: 12px;
}
/* ===========================================
   ENLARGE UNIT NAME + REMOVE PILL EFFECT
   =========================================== */

/* 1) Enlarge unit name font size */
.pricing-scope .unit-title {
  font-size: 1.25rem;    /* ≈ 20px */
  font-weight: 800;
  line-height: 1.3;
}

/* Optional: make it even bolder on larger screens */
@media (min-width: 768px) {
  .pricing-scope .unit-title {
    font-size: 1.4rem;   /* ≈ 22px */
  }
}

/* 2) Remove pill styling */
.pricing-scope .unit-title .pill {
  padding: 0;                /* remove inner spacing */
  border: none;              /* remove pill border */
  background: none;          /* remove pill background */
  border-radius: 0;          /* remove rounded shape */
  font-weight: 800;
  color: #0f172a;            /* matches other headings */
}
/* ===========================================
   ACCORDION BODY: uniform typography + alignment
   (keeps the bigger unit name in the header)
   =========================================== */

/* Base typography for everything inside the expanded body */
.pricing-scope details.unit-item .unit-body,
.pricing-scope details.unit-item .unit-body * {
  font-size: 18px !important;       /* consistent size */
  font-weight: 800 !important;       /* all bold as requested */
  color: #0f172a !important;         /* same color for all text */
  line-height: 1.45;
  letter-spacing: 0;
}

/* Measurements table: fixed “tab” width for labels */
.pricing-scope .specs-list {
  display: grid !important;
  grid-template-columns: 140px 1fr !important;  /* label column width */
  column-gap: 16px !important;
  row-gap: 8px !important;
}

/* Align labels right, values left for perfect columns */
.pricing-scope .specs-list dt {
  justify-self: end !important;
  text-align: right !important;
  margin: 0 !important;
}
.pricing-scope .specs-list dd {
  justify-self: start !important;
  text-align: left !important;
  margin: 0 !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important; /* tidy number columns */
}

/* Pricing card: same tab width as specs */
.pricing-scope .price-card {
  display: grid !important;
  gap: 0 !important;
}
.pricing-scope .price-line {
  display: grid !important;
  grid-template-columns: 140px 1fr !important;  /* label column width matches specs */
  align-items: baseline !important;
  padding: .6rem .8rem !important;
  border-bottom: 1px dashed #e2e8f0 !important;
}
.pricing-scope .price-line:last-child { border-bottom: none !important; }

/* Align price labels right, values left; keep numbers aligned */
.pricing-scope .price-line .label {
  justify-self: end !important;
  text-align: right !important;
  margin: 0 !important;
}
.pricing-scope .price-line .value {
  justify-self: start !important;
  text-align: left !important;
  margin: 0 !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
}

/* Notes block inherits the same uniform style */
.pricing-scope .unit-notes { margin-top: .5rem !important; }

/* Mobile: narrower tab column so it fits nicely */
@media (max-width: 560px) {
  .pricing-scope .specs-list { grid-template-columns: 120px 1fr !important; }
  .pricing-scope .price-line { grid-template-columns: 120px 1fr !important; }
}
/* ===========================================
   PRICE CARD — match Measurements Box styling
   =========================================== */

/* Price box container matches measurements box */
.pricing-scope .price-card {
  background: #f8fafc !important;          /* same light gray */
  border: 1px solid #e2e8f0 !important;    /* same subtle border */
  border-radius: .9rem !important;         /* same rounded corners */
  padding: .9rem !important;               /* match measurements padding */
  display: grid !important;
  gap: .5rem !important;
  box-shadow: none !important;             /* remove any shadows */
}

/* Each price line looks like a simple row — no dashed borders */
.pricing-scope .price-line {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: .35rem 0 !important;
  border-bottom: none !important;          /* remove dividers */
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;               /* match body text color */
}

/* Labels and values stay consistent */
.pricing-scope .price-line .label {
  color: #0f172a !important;
}
.pricing-scope .price-line .value {
  color: #0b4c7a !important;               /* slightly blue tone for pricing */
  font-variant-numeric: tabular-nums !important;
}

/* Keep measurements and pricing visually identical */
.pricing-scope .unit-specs {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: .9rem !important;
  padding: .9rem !important;
  box-shadow: none !important;
}
/* =====================================================
   ALIGNMENT FIX — Measurements, Pricing & Notes boxes
   ===================================================== */

/* Container alignment fix */
.pricing-scope details.unit-item .unit-body {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important; /* two columns aligned */
  gap: 1rem !important;
}

/* Make measurements box, price box, and notes box consistent */
.pricing-scope .unit-specs,
.pricing-scope .price-card,
.pricing-scope .unit-notes {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: .9rem !important;
  padding: .9rem !important;
  box-shadow: none !important;
  display: block !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  width: 100% !important; /* ensures full alignment */
  box-sizing: border-box;
}

/* Pricing box styling — no inner borders or dashed lines */
.pricing-scope .price-line {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: .35rem 0 !important;
  border: none !important;
  background: transparent !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

/* Pricing labels + values consistent */
.pricing-scope .price-line .label {
  color: #0f172a !important;
}
.pricing-scope .price-line .value {
  color: #0b4c7a !important;
  font-variant-numeric: tabular-nums !important;
}

/* Notes box matches style perfectly */
.pricing-scope .unit-notes {
  margin-top: 0 !important;
  font-weight: 700 !important;
  color: #475569 !important; /* slightly softer grey */
  line-height: 1.5;
}

/* Mobile-friendly stacking */
@media (max-width: 960px) {
  .pricing-scope details.unit-item .unit-body {
    grid-template-columns: 1fr !important;
  }
}
/* =====================================================
   FINAL ALIGNMENT — Measurements, Pricing & Notes boxes
   ===================================================== */

/* 1) Ensure all boxes line up perfectly in the unit-body grid */
.pricing-scope details.unit-item .unit-body {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important; /* two equal columns */
  gap: 1rem !important;
  align-items: start !important;
  box-sizing: border-box;
}

/* 2) Make all three sections visually identical */
.pricing-scope .unit-specs,
.pricing-scope .price-card,
.pricing-scope .unit-notes {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: .9rem !important;
  padding: .9rem !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

/* 3) Price lines simplified to match measurements style */
.pricing-scope .price-line {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: .35rem 0 !important;
  border: none !important;
  background: transparent !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

/* Labels + values inside pricing */
.pricing-scope .price-line .label {
  color: #0f172a !important;
}
.pricing-scope .price-line .value {
  color: #0b4c7a !important;
  font-variant-numeric: tabular-nums !important;
}

/* 4) Notes box refinement for alignment + style */
.pricing-scope .unit-notes {
  margin-top: .5rem !important;
  width: 100% !important;
  text-align: left !important;
  font-weight: 700 !important;
  color: #475569 !important; /* slightly softer grey for distinction */
  line-height: 1.5;
  display: block !important;
  box-sizing: border-box;
}

/* 5) Mobile: stack columns perfectly */
@media (max-width: 960px) {
  .pricing-scope details.unit-item .unit-body {
    grid-template-columns: 1fr !important;
  }
}
/* ===========================================
   FINAL PRICE ALIGNMENT — shared tab width
   =========================================== */

/* One source of truth for label column width */
.pricing-scope { --tabw: 140px; }
@media (max-width: 560px) { .pricing-scope { --tabw: 120px; } }

/* Measurements use the same tab width */
.pricing-scope .specs-list {
  display: grid !important;
  grid-template-columns: var(--tabw) 1fr !important;
  column-gap: 16px !important;
  row-gap: 8px !important;
}
.pricing-scope .specs-list dt {
  justify-self: end !important;
  text-align: right !important;
  margin: 0 !important;
}
.pricing-scope .specs-list dd {
  justify-self: start !important;
  text-align: left !important;
  margin: 0 !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
}

/* Force pricing lines to use the SAME grid as measurements */
.pricing-scope .price-card { display: grid !important; gap: .25rem !important; }
.pricing-scope .price-line {
  display: grid !important;                      /* override any lingering flex */
  grid-template-columns: var(--tabw) 1fr !important;
  align-items: baseline !important;
  padding: .35rem 0 !important;
  border: none !important;
  background: transparent !important;
  width: 100% !important;
  box-sizing: border-box;
}
.pricing-scope .price-line .label {
  justify-self: end !important;
  text-align: right !important;
  margin: 0 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}
.pricing-scope .price-line .value {
  justify-self: start !important;
  text-align: left !important;
  margin: 0 !important;
  color: #0b4c7a !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
}

/* Notes box stays visually identical and aligned */
.pricing-scope .unit-notes {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
  margin-top: .5rem !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: .9rem !important;
  padding: .9rem !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  line-height: 1.5;
}
/* Denpasar: omit location label in headers */
.pricing-scope .badge--loc { display: none !important; }