/* ============================================================
   CTR Imports — Customisation Tool Styles
   Bramble Custom Express configurator
   ============================================================ */

/* ── Hero ───────────────────────────────────────────────────── */
.cust-hero {
  background: var(--plum);
  padding: 130px 0 72px;
  position: relative;
  overflow: hidden;
}
.cust-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(200,136,58,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.cust-hero-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.cust-hero-text .hero-eyebrow { color: var(--amber); }
.cust-hero-text h1 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  color: var(--white);
  font-weight: 300;
  line-height: 1.05;
  margin-bottom: 20px;
}
.cust-hero-text h1 em { color: var(--amber); font-style: italic; }
.cust-hero-text .hero-sub { color: rgba(255,255,255,0.65); max-width: 520px; font-size: 0.95rem; margin-bottom: 32px; }
.cust-hero-text .btn-outline { border-color: rgba(255,255,255,0.3); color: var(--white); }
.cust-hero-text .btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }
.cust-hero-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  min-width: 280px;
}
.cust-badge {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 20px 20px 16px;
  text-align: center;
}
.cust-badge-num {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--amber);
  font-weight: 300;
  line-height: 1;
  margin-bottom: 6px;
}
.cust-badge-label { font-size: 0.72rem; color: rgba(255,255,255,0.5); line-height: 1.4; }

/* ── How It Works ───────────────────────────────────────────── */
.cust-steps {
  display: flex;
  align-items: center;
  gap: 0;
  justify-content: center;
  flex-wrap: wrap;
}
.cust-step {
  flex: 1;
  min-width: 200px;
  max-width: 280px;
  text-align: center;
  padding: 0 24px;
}
.cust-step-num {
  font-family: var(--serif);
  font-size: 3rem;
  color: var(--amber);
  opacity: 0.35;
  font-weight: 300;
  line-height: 1;
  margin-bottom: 16px;
}
.cust-step h4 { font-family: var(--serif); font-size: 1.15rem; margin-bottom: 10px; color: var(--text); }
.cust-step p { font-size: 0.82rem; line-height: 1.65; }
.cust-step-arrow { color: var(--border); flex-shrink: 0; margin: 0 8px; padding-top: 28px; }

/* ── Filter Bar ─────────────────────────────────────────────── */
.cust-filter-bar {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.cust-count {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Search ─────────────────────────────────────────────────── */
.cust-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.cust-search-wrap svg {
  position: absolute;
  left: 12px;
  color: var(--muted);
  pointer-events: none;
}
.cust-search {
  padding: 9px 14px 9px 34px;
  border: 1.5px solid var(--border);
  border-radius: 50px;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--text);
  background: var(--white);
  outline: none;
  width: 220px;
  transition: border-color var(--t);
}
.cust-search:focus { border-color: var(--amber); }

/* ── Product Grid ───────────────────────────────────────────── */
.cust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  min-height: 300px;
}
.cust-loading {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  gap: 20px;
}
.cust-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cust-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 0;
  color: var(--muted);
}

/* ── Custom Product Card ────────────────────────────────────── */
.cust-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--t), transform var(--t);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.cust-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cust-card-img {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #EDE9E3 0%, #D8D2C8 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.cust-card-img svg { color: var(--muted); opacity: 0.3; }
.cust-card-img-label {
  font-family: var(--serif);
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
  padding: 0 12px;
  line-height: 1.3;
}
.cust-card-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--amber);
  color: var(--white);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 50px;
}
.cust-card-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.cust-card-name {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.3;
  font-weight: 400;
}
.cust-card-meta { font-size: 0.72rem; color: var(--muted); margin-bottom: 8px; flex: 1; }
.cust-card-dims { font-size: 0.7rem; color: var(--muted); margin-bottom: 10px; }
.cust-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}
/* Logged-out cards have no price — keep the Configure button right-aligned */
.cust-card-footer.no-price {
  justify-content: flex-end;
}
.cust-card-price {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}
.cust-card-btn {
  padding: 7px 14px;
  background: var(--text);
  color: var(--white);
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 500;
  transition: background var(--t);
  border: none;
  cursor: pointer;
  font-family: var(--sans);
}
.cust-card-btn:hover { background: var(--amber); }

/* ── Finish Preview Strip ───────────────────────────────────── */
.finish-preview-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.finish-preview-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: default;
}
.finish-preview-dot-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  transition: transform var(--t);
}
.finish-preview-dot:hover .finish-preview-dot-circle { transform: scale(1.2); }
.finish-preview-dot-name { font-size: 0.6rem; color: var(--muted); text-align: center; max-width: 52px; line-height: 1.3; }

/* ── Configurator Modal ─────────────────────────────────────── */
.cfg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(36, 20, 55, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.cfg-overlay.open {
  opacity: 1;
  visibility: visible;
}
.cfg-modal {
  background: var(--white);
  border-radius: 20px;
  max-width: 1240px;
  width: 100%;
  max-height: 94vh;
  display: grid;
  grid-template-columns: 460px 1fr;
  /* Cap the single row to the modal height (instead of auto, which grows to
     content) so the right column is height-bound and its swatch list scrolls
     internally — otherwise tall finish lists push the enquire button past the
     94vh clip and it becomes unreachable. */
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  position: relative;
  transform: translateY(32px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 40px 100px rgba(36, 20, 55, 0.3);
}
.cfg-overlay.open .cfg-modal { transform: translateY(0) scale(1); }

.cfg-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--border);
  font-size: 1.35rem;
  cursor: pointer;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background var(--t), color var(--t);
  font-family: var(--sans);
}
.cfg-close:hover { background: var(--text); color: var(--white); }

/* Left panel */
.cfg-left {
  background: var(--surface);
  display: flex;
  flex-direction: column;
  border-radius: 20px 0 0 20px;
  overflow: hidden;
  min-height: 0; /* allow grid cell to shrink below content height so overflow-y triggers */
}
.cfg-img-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px 28px;
  min-height: 380px;
}
.cfg-img-placeholder {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #EDE9E3 0%, #D8D2C8 100%);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: background 0.4s ease;
}
.cfg-img-placeholder span {
  font-family: var(--serif);
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
  padding: 0 12px;
  line-height: 1.4;
  max-width: 180px;
}
.cfg-summary-box {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 18px 24px;
  flex-shrink: 0;
}
.cfg-summary-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 8px;
}
.cfg-summary-text {
  font-size: 0.84rem;
  color: var(--text);
  line-height: 1.6;
  font-style: italic;
}
.cfg-summary-disclaimer {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* Right panel */
.cfg-right {
  padding: 36px 32px 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}
.cfg-badges {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

/* Finish groups inside modal */
.cfg-finish-section { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cfg-finish-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}
.cfg-finish-header .popup-section-label { margin-bottom: 0; }
.cfg-finish-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cfg-finish-tab {
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
  border: 1.5px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: all var(--t);
  font-family: var(--sans);
}
.cfg-finish-tab.active {
  background: var(--text);
  color: var(--white);
  border-color: var(--text);
}
/* Always-visible name of the hovered/selected finish (replaces the tooltip). */
.cfg-finish-active-name {
  min-height: 1.15em;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--amber);
  margin: 0 0 10px;
  line-height: 1.15;
}
.cfg-finish-active-name .cfg-up { color: var(--muted); font-weight: 500; }
.cfg-finish-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.cfg-finish-search-wrap svg { position: absolute; left: 11px; color: var(--muted); pointer-events: none; }
.cfg-finish-search {
  width: 100%;
  padding: 8px 12px 8px 32px;
  border: 1.5px solid var(--border);
  border-radius: 50px;
  font-size: 0.8rem;
  font-family: var(--sans);
  color: var(--text);
  background: var(--white);
  outline: none;
  transition: border-color var(--t);
}
.cfg-finish-search:focus { border-color: var(--amber); }
.cfg-finish-groups {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* The list scrolls vertically, which clips horizontal overflow — so the
     selected-swatch ring and hover labels were cut off at the left edge. Pad the
     scroll box and pull it back out by the same amount so the swatches stay put
     but their rings/labels have room to breathe on both sides. */
  padding: 10px 16px;
  margin: 0 -16px;
}
/* Firefox has no ::-webkit-scrollbar; give it the plum thumb via scrollbar-color.
   Scoped with @supports because Chrome 121+ would otherwise let scrollbar-color
   override (disable) the ::-webkit-scrollbar styling below. */
@supports not selector(::-webkit-scrollbar) {
  .cfg-finish-groups { scrollbar-width: thin; scrollbar-color: var(--plum) var(--surface); }
}
.cfg-finish-groups::-webkit-scrollbar { width: 5px; }
.cfg-finish-groups::-webkit-scrollbar-track { background: var(--surface); border-radius: 3px; }
.cfg-finish-groups::-webkit-scrollbar-thumb { background: var(--plum); border-radius: 3px; }
.cfg-finish-groups::-webkit-scrollbar-thumb:hover { background: #3a2158; }
.cfg-finish-group { margin-bottom: 16px; }
.cfg-finish-group-title {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.cfg-finish-swatches {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
}
.cfg-swatch {
  width: 44px; height: 44px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color var(--t), border-color var(--t), transform var(--t);
  position: relative;
  flex-shrink: 0;
}
.cfg-swatch:hover:not(.active) { outline-color: var(--muted); transform: scale(1.1); }
.cfg-swatch.active {
  border-color: var(--white);
  outline-color: var(--text);
  transform: scale(1.12);
}
/* The finish name shows in a fixed line above the swatches (see
   .cfg-finish-active-name) rather than a floating tooltip — a tooltip inside
   this vertically-scrolling list gets clipped at the edges. */

.cfg-enquire-row {
  padding: 12px 0 2px;
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Real product photos & image swatches ───────────────────── */
.cust-card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  background: #f3f0ea;
}
.cust-card-img-label { z-index: 0; }
.cust-card-badge { z-index: 2; }

.cfg-img-placeholder.has-photo { background: var(--white); }

/* selected-colour chips in the configuration summary */
.cfg-summary-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cfg-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px 4px 4px;
}
.cfg-chip-sw {
  width: 24px; height: 24px; border-radius: 50%;
  background-size: cover; background-position: center;
  background-color: #e6e1d8; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.08);
}
.cfg-chip-txt { font-size: 0.7rem; color: var(--muted); line-height: 1.25; }
.cfg-chip-txt b { display: block; color: var(--text); font-weight: 600; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; }
.cfg-chip-txt i { color: var(--amber); font-style: normal; font-weight: 600; }
.cfg-img-placeholder img.cfg-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-lg);
}

/* Live render: an opaque body base with transparent overlays stacked on top. */
.cfg-stack {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cfg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* swatches & preview dots now carry real finish imagery */
.cfg-swatch {
  background-size: cover;
  background-position: center;
  background-color: #e6e1d8;
}
/* premium / upcharge finishes get a small amber marker */
.cfg-swatch.is-premium::before {
  content: "";
  position: absolute;
  top: -2px; right: -2px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--amber);
  border: 1.5px solid var(--white);
  z-index: 2;
}
.finish-preview-dot-circle {
  background-size: cover;
  background-position: center;
  background-color: #e6e1d8;
}

/* ── Short-viewport adjustments (laptop / small monitor) ───── */
@media (max-height: 820px) {
  .cfg-img-wrap { min-height: 280px; }
}
@media (max-height: 700px) {
  .cfg-img-wrap { min-height: 200px; padding: 20px 24px; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .cust-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .cust-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .cust-hero-badges { grid-template-columns: repeat(4, 1fr); min-width: auto; }
  .cfg-modal { grid-template-columns: 1fr; grid-template-rows: auto; max-height: 96vh; overflow-y: auto; border-radius: 16px; }
  .cfg-left { border-radius: 16px 16px 0 0; min-height: auto; }
  .cfg-img-wrap { min-height: 200px; padding: 20px; }
  .cfg-right { padding: 24px 20px 28px; overflow-y: visible; }
  .cfg-finish-groups { flex: none; max-height: 200px; }
}
@media (max-width: 768px) {
  .cust-grid { grid-template-columns: repeat(2, 1fr); }
  .cust-hero { padding: 110px 0 56px; }
  .cust-hero-badges { grid-template-columns: 1fr 1fr; }
  .cust-steps { flex-direction: column; gap: 8px; }
  .cust-step-arrow { transform: rotate(90deg); padding-top: 0; }
  .cust-filter-bar { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .cust-grid { grid-template-columns: 1fr; }
  .cust-badge-num { font-size: 1.6rem; }
}