/* -------------------------------
   Cards (pricing + add-ons)
--------------------------------- */
.pricing-card{
  background:var(--cb-section);
  transition:transform 120ms ease;
}
.pricing-card:hover{ transform:translateY(-1px); }

.addon-card{
  background:var(--cb-section);
  transition:transform 120ms ease;
  position:relative;
}
.addon-card:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}

.addon-card .addon-toggle{
  background:var(--cb-section);
  cursor:pointer;
}
.addon-card .addon-toggle:hover{ background:rgba(0,0,0,.03); }
.addon-card .addon-toggle:focus{ outline:none; }

.addon-detail{ background:var(--cb-surface); }

.addon-detail-wrapper{ max-width:420px; }
.addon-detail-wrapper p{ text-align:left; }

/* Gold side accent on hover + keep on expanded (modern browsers) */
.addon-card::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:2px;
  background:transparent;
  border-radius:2px;
  transition:background 120ms ease;
}
.addon-card:hover::before{ background:rgba(156,135,82,.7); }
.addon-card:has(.collapse.show)::before{ background:rgba(156,135,82,.9); }

/* -------------------------------
   Premium card treatment
--------------------------------- */
.cb-premium{
  border-color:rgba(156,135,82,.55) !important;
  box-shadow:0 10px 28px rgba(156,135,82,.10);
}
.cb-premium .addon-toggle{ background:rgba(156,135,82,.06); }
.cb-premium:hover{ box-shadow:0 14px 34px rgba(156,135,82,.14); }

/* Gold side accent always visible on premium */
.cb-premium::before{ background:rgba(156,135,82,.85) !important; }

.cb-premium-badge{
  display:inline-block;
  font-size:.66rem;
  letter-spacing:.6px;
  text-transform:uppercase;
  padding:.12rem .42rem;
  border-radius:999px;
  border:1px solid rgba(156,135,82,.55);
  background:rgba(156,135,82,.12);
  color:var(--cb-accent);
}

@media (max-width: 1199.98px){
  .cb-leather-card .cb-premium-badge.ms-2{ margin-left:0 !important; }
}

/* Premium active swatch feels more "gold" */
.cb-premium .cb-swatches .cb-swatch.active{
  border-color:rgba(156,135,82,1);
  box-shadow:0 0 0 .22rem rgba(156,135,82,.18);
}

/* ---------------------------------
   Leather + Liner cards (responsive)
--------------------------------- */

/* Default (mobile/tablet): natural height, NO internal scrolling */
.cb-leather-card{
  height: auto;          /* <-- removes desktop dead-space too */
  display:flex;
  flex-direction:column;
}

.cb-leather-top{
  flex: 0 0 auto;        /* <-- don't grow to fill empty space */
  overflow: visible;     /* <-- nothing gets "trapped" in a scroll area */
  padding-right: 0;
}

.cb-leather-footer{
  margin-top: 1rem;      /* nice spacing before swatches */
}

/* Desktop+: optional capped height + internal scroll (only when needed) */
@media (min-width: 992px){
  .cb-leather-card{
    max-height: 1050px;  /* tune this number */
  }

  .cb-leather-content{
    min-height: 0;       /* important so flex children can shrink */
  }

  .cb-leather-top{
    flex: 1 1 auto;      /* top can take remaining space */
    overflow: auto;      /* only desktop gets scroll */
    padding-right: .25rem;
  }

  .cb-leather-footer{
    margin-top: auto;    /* pushes footer down ONLY when there is extra space */
  }
}

/* Liner cards: same idea, just a different cap */
@media (min-width: 992px){
  .cb-leather-card.cb-liner-card{
    max-height: 850px;   /* tune this number */
  }
}

/* Mobile/tablet: natural height, no internal scrolling */
.cb-leather-card{
  height:auto;
  display:flex;
  flex-direction:column;
}

.cb-leather-top{
  flex:0 0 auto;
  overflow:visible;
  padding-right:0;
}

.cb-leather-footer{
  margin-top:1rem;
}

/* Desktop+: equal-height columns + card fills column */
@media (min-width: 992px){
  /* Ensure the two columns stretch to the same height */
  #leatherTypes .row{ align-items:stretch; }

  /* Fill the (equal-height) column */
  .cb-leather-card{ height:100%; }

  /* Keep footer at bottom, let top take remaining space */
  .cb-leather-content{ flex:1 1 auto; min-height:0; }
  .cb-leather-top{
    flex:1 1 auto;
    overflow:auto;       /* only desktop gets internal scroll if needed */
    padding-right:.25rem;
  }
  .cb-leather-footer{
    margin-top:auto;     /* pushes footer down ONLY on desktop */
  }
}



/* -------------------------------
   Leather color swatches
--------------------------------- */
.cb-swatches .cb-swatch{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .65rem;
  border:1px solid var(--cb-border);
  border-radius:999px;
  background:var(--cb-surface);
  color:var(--cb-text);
  font-size:.95rem;
}
.cb-swatches .cb-swatch:hover{ border-color:rgba(156,135,82,.55); }
.cb-swatches .cb-swatch.active{
  border-color:rgba(156,135,82,.9);
  box-shadow:0 0 0 .2rem rgba(156,135,82,.14);
}

.cb-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  display:inline-block;
}
.cb-dot-black{ background:#111; }
.cb-dot-tan{ background:#b38a63; }
.cb-dot-red{ background:#8a2d2d; }
.cb-dot-blue{ background:#234a78; }
.cb-dot-mocha{ background:#5e412d; }