@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&family=Poppins:wght@300;400;500;600&display=swap');

:root{
  --nunito: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --poppins: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --title: #2c4357;
  --text: #6b7280;
  --border: #e7eaee;
  --bg: #ffffff;
  --soft: #f7f8fa;
}

#ekinox-xpress-configurator{
  font-family: var(--poppins);
  color: var(--text);
}

/* Layout */
.xpress-layout{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 14px;
  align-items:start;
}
@media (max-width: 980px){
  .xpress-layout{ grid-template-columns: 1fr; }
}
.xpress-col{ display:flex; flex-direction:column; gap:14px; }

/* Header */
.xpress-hero{ margin: 0 0 12px; }
.xpress-title{
  margin:0 0 6px;
  font-size:22px;
  line-height:1.2;
  font-family: var(--nunito);
  color: var(--title);
  font-weight: 700;
}
.xpress-subtitle{
  color: var(--text);
  font-size:14px;
  font-family: var(--poppins);
  font-weight: 400;
}

/* Cards */
.xpress-card{
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  background:var(--bg);
}
.xpress-card-title{
  font-family: var(--nunito);
  color: var(--title);
  font-weight: 700;
  font-size:16px;
  margin-bottom:10px;
}
.xpress-label{
  display:block;
  margin-top:10px;
  margin-bottom:6px;
  font-family: var(--nunito);
  color: var(--title);
  font-weight: 600;
}
.xpress-muted{
  color: var(--text);
  font-size:13px;
  margin-top:6px;
  font-weight: 400;
  font-family: var(--poppins);
}

.xpress-select,.xpress-input{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  box-sizing:border-box;
  font-family: var(--poppins);
  color: #4b5563;
}
.xpress-textarea{
  width:100%;
  min-height:110px;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  box-sizing:border-box;
  resize:vertical;
  font-family: var(--poppins);
  color: #4b5563;
}

.xpress-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media (max-width: 860px){
  .xpress-grid-2{ grid-template-columns:1fr; }
}

/* Status */
.xpress-status{
  margin:8px 2px 0;
  font-weight: 500;
  font-family: var(--poppins);
}
.xpress-status-warn{ color:#8a5b00; }
.xpress-status.is-ok{ color:#0a7a2f; }
.xpress-status.is-err{ color:#b00020; }

/* Button */
.xpress-btn-primary{
  width:100%;
  margin-top:10px;
  padding:12px 14px;
  border-radius:12px;
  border:0;
  cursor:pointer;
  font-family: var(--nunito);
  font-weight: 700;
  background: #2c4357;
  color: #fff;
}

/* Tiles */
.xpress-tiles{ display:grid; gap:12px; }

/* Appliances */
.xpress-tiles--appliance{
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
@media (max-width: 520px){
  .xpress-tiles--appliance{ grid-template-columns: 1fr; }
}

/* Faucets */
.xpress-tiles--faucet{
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
@media (max-width: 520px){
  .xpress-tiles--faucet{ grid-template-columns: 1fr; }
}

/* MINI tiles: réellement “petites” */
.xpress-tiles--mini{
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:10px;
}
@media (max-width: 520px){
  .xpress-tiles--mini{ grid-template-columns: 1fr; }
}

.xpress-tile{
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  cursor:pointer;
  padding:0;
  overflow:hidden;
  text-align:left;
  transition: transform .06s ease, border-color .06s ease;
}
.xpress-tile:active{ transform:scale(.99); }
.xpress-tile.is-active{ border-color:#2c4357; }
.xpress-tile.is-disabled{ opacity:.55; cursor:not-allowed; }

/* Media */
.xpress-tile-media{
  width:100%;
  background: #fff;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px;
  box-sizing:border-box;
}
.xpress-tile-img{
  width:100%;
  height:100%;
  display:block;
  object-fit: contain;
}

/* Heights */
.tile--appliance .xpress-tile-media{ height:190px; padding: 18px; }
.tile--faucet .xpress-tile-media{ height:125px; padding: 8px; }  /* dezoom mitigeurs */
.tile--mini .xpress-tile-media{ height:92px; padding: 8px; }     /* plus petit */

.tile--appliance .xpress-tile-img{
  max-width: 92%;
  max-height: 92%;
}

.xpress-tile-body{ padding:12px 12px 10px; }
.tile--mini .xpress-tile-body{ padding:10px 10px 9px; }

.xpress-tile-title{
  font-family: var(--nunito);
  color: var(--title);
  font-weight: 600;
  line-height:1.2;
}
.tile--mini .xpress-tile-title{ font-size:13px; }

.xpress-tile-sub{
  margin-top:6px;
  color: var(--text);
  font-weight: 400;
  font-family: var(--poppins);
}
.tile--mini .xpress-tile-sub{ margin-top:4px; font-size:12px; }

/* Options descriptions */
.xpress-opt-desc{
  margin-top:10px;
  border:1px solid #f0f2f5;
  border-radius:14px;
  padding:10px 12px;
  background: var(--soft);
}
.xpress-opt-desc-item{
  font-size:13px;
  color: var(--text);
  margin:6px 0;
  font-weight: 400;
}
.xpress-opt-desc-item strong{
  font-family: var(--nunito);
  color: var(--title);
  font-weight: 600;
}

/* Swatches */
.xpress-swatches{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:10px;
}
.xpress-swatch{
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  padding:10px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
}
.xpress-swatch.is-active{ border-color:#2c4357; }
.xpress-swatch-box{
  width:56px; height:56px;
  border-radius:14px;
  border:1px solid #dde2e8;
  background-color:#f2f4f7;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
}
.xpress-swatch-code{
  font-size:10px;
  font-family: var(--nunito);
  font-weight: 600;
  color: var(--title);
  width:100%;
  text-align:center;
  padding:4px 6px;
  background:rgba(255,255,255,.88);
  border-top:1px solid rgba(44,67,87,.10);
}
.xpress-swatch-name{
  font-size:13px;
  color: var(--text);
  line-height:1.2;
  font-family: var(--poppins);
  font-weight: 400;
}

/* Components & pricing */
.xpress-block{
  border:1px solid #f0f2f5;
  border-radius:14px;
  padding:12px;
  margin-top:10px;
  background: var(--soft);
}
.xpress-block-title{
  font-family: var(--nunito);
  color: var(--title);
  font-weight: 600;
  margin-bottom:8px;
}
.xpress-list{ margin:0; padding-left:18px; color: #4b5563; }

.xpress-kv-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin: 6px 0;
}
.xpress-kv-row span{ color: var(--text); font-weight: 400; }
.xpress-kv-row strong{
  font-family: var(--nunito);
  color: var(--title);
  font-weight: 600;
}

.xpress-price-table{
  margin-top:8px;
  border:1px solid #eef1f5;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.xpress-price-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-top:1px solid #f0f2f5;
}
.xpress-price-row:first-child{ border-top:0; }
.xpress-price-label{
  color:#4b5563;
  font-weight: 400;
  font-family: var(--poppins);
}
.xpress-price-value{
  font-family: var(--nunito);
  color: var(--title);
  font-weight: 600;
}

.xpress-totalbox{
  margin-top:10px;
  border:1px solid #2c4357;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.xpress-totalbox-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-top:1px solid #eef1f5;
}
.xpress-totalbox-row:first-child{ border-top:0; }
.xpress-totalbox-row span{
  font-family: var(--poppins);
  color:#4b5563;
  font-weight: 400;
}
.xpress-totalbox-row strong{
  font-family: var(--nunito);
  color: var(--title);
  font-weight: 600;
}
.xpress-totalbox-row--ttc{
  background:#2c4357;
}
.xpress-totalbox-row--ttc span,
.xpress-totalbox-row--ttc strong{
  color:#fff;
}

/* Visual canvas */
.xpress-visual-canvas{
  background:#fff;
  border:1px solid #eef1f5;
  border-radius:14px;
  padding:10px;
  overflow:hidden;
}
.xpress-visual-canvas svg{
  width:100%;
  height:auto;
  display:block;
}