/* Looks de diseño — subpágina. Color solo --belk-*.
   Los hex de paleta son DATOS del look, no chrome. */
.ds-page{ max-width:1100px; }

.ds-look{
  background:var(--belk-level-2);
  border:1px solid var(--belk-border);
  border-radius:var(--belk-radius);
  padding:0;
  margin-bottom:14px;
  box-shadow:var(--belk-shadow-1);
  overflow:hidden;
}
.ds-kitchen-wrap{ background:var(--belk-level-2-hi); overflow:hidden; }
.ds-kitchen{ display:block; width:100%; height:auto; }
.ds-kitchen-foto{ display:block; width:100%; height:auto; }
.ds-kitchen-credit{
  margin:0;
  padding:6px 16px 0;
  font-size:.68rem;
  color:var(--belk-text-muted);
}
.ds-kitchen-pie{
  margin:0;
  padding:8px 16px 10px;
  font-size:.72rem;
  color:var(--belk-text-muted);
}
.ds-swatch{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  height:10px;
}
.ds-swatch span{ display:block; }
.ds-body{ padding:14px 16px 16px; }
.ds-look h2{ font-size:1.05rem; margin:0 0 2px; color:var(--belk-text); }
.ds-tag{ font-size:.78rem; color:var(--belk-text-muted); margin:0 0 10px; }
.ds-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.ds-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:600; color:var(--belk-text);
  border:1px solid var(--belk-border); border-radius:999px;
  padding:3px 8px 3px 4px; background:var(--belk-level-2-hi);
}
.ds-dot{
  width:12px; height:12px; border-radius:50%;
  border:1px solid var(--belk-border); flex-shrink:0;
}
.ds-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
  margin:0 0 12px;
  font-size:.8rem;
}
.ds-grid b{ display:block; font-size:.68rem; color:var(--belk-text-muted); font-weight:600; margin-bottom:2px; }
.ds-grid p{ margin:0; color:var(--belk-text); }
.ds-tip{
  margin:0 0 12px;
  padding:10px 12px;
  border-radius:var(--belk-radius-sm);
  background:var(--belk-level-2-hi);
  border:1px solid var(--belk-border);
  font-size:.85rem;
  color:var(--belk-text);
}
.ds-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

.ds-section{ margin-bottom:20px; }
.ds-h2{ font-size:1rem; margin:0 0 10px; color:var(--belk-text); }
.ds-prop-row{ display:flex; gap:12px; overflow-x:auto; padding-bottom:4px; }
.ds-prop{
  flex:0 0 260px;
  background:var(--belk-level-2);
  border:1px solid var(--belk-border);
  border-radius:var(--belk-radius);
  padding:10px;
}
.ds-prop-img{ width:100%; border-radius:var(--belk-radius-sm); display:block; margin-bottom:8px; }
.ds-prop h3{ margin:0 0 4px; font-size:.95rem; }
.ds-slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px; }
.ds-slot{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 6px; border:1px solid var(--belk-border); border-radius:var(--belk-radius-sm);
  background:var(--belk-level-2); cursor:pointer; font:inherit; color:inherit;
}
.ds-slot--active{ border-color:var(--belk-accent); background:var(--belk-level-2-hi); }
.ds-slot-label{ font-size:.68rem; font-weight:700; }
.ds-slot-name{ font-size:.68rem; color:var(--belk-text-muted); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-dot--empty{ display:flex; align-items:center; justify-content:center; font-size:.75rem; color:var(--belk-text-muted); }
.ds-preview{
  min-height:120px; margin-bottom:10px; border-radius:var(--belk-radius-sm);
  background:var(--belk-level-2-hi); border:1px solid var(--belk-border); overflow:hidden;
}
.ds-preview-img{ display:block; width:100%; height:auto; }
.ds-preview-placeholder{ margin:0; padding:20px; text-align:center; font-size:.85rem; color:var(--belk-text-muted); }
.ds-color-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ds-color{
  display:flex; align-items:center; gap:10px; text-align:left;
  padding:8px; border:1px solid var(--belk-border); border-radius:var(--belk-radius-sm);
  background:var(--belk-level-2); cursor:pointer; font:inherit; color:inherit;
}
.ds-color--sel{ background:var(--belk-level-2-hi); border-color:var(--belk-accent); }
.ds-color b{ display:block; font-size:.8rem; }
.ds-color small{ font-size:.65rem; color:var(--belk-text-muted); }

/* Muestra melamina — chip rectangular estilo fabricante (datos Belk, no chrome). */
.mlam-chip{
  display:block; object-fit:cover; flex-shrink:0;
  border-radius:4px; border:1px solid var(--belk-border);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
  background:var(--belk-level-2-hi);
}
.mlam-chip--md{ width:56px; height:40px; }
.mlam-chip--sm{ width:36px; height:26px; border-radius:3px; }
.mlam-chip--lg{ width:72px; height:48px; }
.mlam-chip--sel{ outline:2px solid var(--belk-accent); outline-offset:1px; }
.ds-slot .mlam-chip{ margin-bottom:2px; }

@media (max-width:640px){
  .ds-grid{ grid-template-columns:1fr; }
}

/* Cocina lineal — recreación del modelo (bajos roble, altos gris, torre nogal). */
.k-scene{ background:#1a1d22; }
.k-lineal{
  --k-oak:#CDB892;
  --k-grey:#C8CCD0;
  --k-walnut:#4A342A;
  --k-counter:#D5D9DE;
  --k-wall:#8E949C;
  --k-plinth:#121212;
  --k-floor:#2A2E33;
  --k-pull:#161616;
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--k-wall);
}
.k-lineal{ width:100%; }
.k-wall{
  position:absolute; inset:0 0 20% 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.07) 0 7px,
      transparent 7px 16px),
    linear-gradient(180deg,
      color-mix(in srgb, var(--k-wall) 70%, white) 0%,
      var(--k-wall) 55%,
      color-mix(in srgb, var(--k-wall) 72%, black) 100%);
}
.k-floor{
  position:absolute; left:0; right:0; bottom:0; height:20%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 28%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 28%, transparent 28% 100%),
    var(--k-floor);
  box-shadow:inset 0 18px 36px rgba(0,0,0,.4);
}
.k-grain-h{
  background-color:var(--k-oak);
  background-image:
    repeating-linear-gradient(90deg, rgba(70,45,18,.14) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(255,236,200,.16) 0 2px, transparent 2px 13px);
}
.k-grain-v{
  background-color:var(--k-walnut);
  background-image:
    repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(180deg, rgba(210,150,90,.1) 0 1px, transparent 1px 12px);
}
.k-left{
  position:absolute; left:1.6%; top:7%; width:9.2%; bottom:20%;
  border-radius:2px 2px 0 0;
  box-shadow:2px 0 8px rgba(0,0,0,.25);
  z-index:3;
}
.k-left-glass{
  position:absolute; left:8%; right:8%; top:6%; height:22%;
  background:linear-gradient(180deg, rgba(180,200,210,.35), rgba(40,30,24,.4));
  border:1px solid rgba(255,255,255,.12);
  border-radius:2px;
}
.k-left-glass--low{ top:auto; bottom:28%; height:18%; }
.k-left-shelf{
  position:absolute; left:10%; right:10%; top:32%; height:4px;
  background:rgba(0,0,0,.35);
}
.k-left-shelf--2{ top:58%; }
.k-uppers{
  position:absolute; left:12%; top:7%; width:40%; height:27%;
  display:flex; z-index:2;
  border-radius:2px;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  overflow:visible;
}
.k-uppers::after{
  content:"";
  position:absolute; left:4%; right:4%; top:100%;
  height:14px;
  background:linear-gradient(180deg, rgba(255,216,160,.42), transparent);
  pointer-events:none;
  z-index:2;
}
.k-upper-door{
  flex:1; height:100%;
  background:var(--k-grey);
  box-shadow:inset -1px 0 0 rgba(0,0,0,.12);
}
.k-hood{
  position:absolute; left:22%; top:34.2%; width:18%; height:3.2%;
  background:#111;
  border-radius:0 0 3px 3px;
  z-index:2;
}
.k-shelves{
  position:absolute; left:53%; top:10%; width:21%; height:36%;
  z-index:2;
}
.k-shelf{
  position:absolute; left:0; right:0; height:11%;
  border-radius:1px;
  box-shadow:0 10px 18px rgba(255,210,150,.28);
}
.k-shelf:nth-child(1){ top:4%; }
.k-shelf:nth-child(2){ top:38%; }
.k-shelf:nth-child(3){ top:72%; }
.k-shelf::after{
  content:"";
  position:absolute; left:4%; right:4%; top:100%;
  height:14px;
  background:linear-gradient(180deg, rgba(255,216,160,.55), transparent);
  pointer-events:none;
}
.k-splash{
  position:absolute; left:12%; top:36%; width:41%; height:20.5%;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--k-grey) 70%, white),
    color-mix(in srgb, var(--k-grey) 88%, black));
  z-index:1;
}
.k-splash-wood{
  position:absolute; left:53%; top:7%; width:21%; height:49.5%;
  z-index:1;
}
.k-counter{
  position:absolute; left:11.5%; top:56.5%; width:62.5%; height:4.2%;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--k-counter) 86%, white),
    var(--k-counter) 42%,
    color-mix(in srgb, var(--k-counter) 78%, black));
  z-index:3;
  box-shadow:0 2px 0 rgba(0,0,0,.12);
}
.k-hob{
  position:absolute; left:18%; top:18%; width:16%; height:64%;
  background:#1a1a1a;
  border-radius:1px;
}
.k-hob::before,
.k-hob::after{
  content:"";
  position:absolute; top:18%;
  width:32%; aspect-ratio:1;
  border:1px solid #4a4a4a;
  border-radius:50%;
}
.k-hob::before{ left:12%; }
.k-hob::after{ right:12%; }
.k-sink{
  position:absolute; left:58%; top:22%; width:14%; height:58%;
  background:#9aa3ab;
  border-radius:1px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
}
.k-tap{
  position:absolute; left:50%; bottom:100%;
  width:2px; height:16px;
  margin-left:-1px;
  background:#c5c8cc;
}
.k-tap::before{
  content:"";
  position:absolute; left:-8px; top:0;
  width:14px; height:2px; background:#c5c8cc;
}
.k-bases{
  position:absolute; left:11.5%; top:60.5%; width:62.5%; height:19.5%;
  display:flex; z-index:3;
  overflow:hidden;
}
.k-base-door{
  flex:1; height:100%; position:relative;
  box-shadow:inset -1px 0 0 rgba(0,0,0,.16);
}
.k-base-door i{
  position:absolute; left:50%; top:16%;
  width:46%; height:3px;
  margin-left:-23%;
  background:var(--k-pull, #161616);
  border-radius:1px;
}
.k-plinth{
  position:absolute; left:11.5%; top:80%; width:62.5%; height:2.4%;
  background:var(--k-plinth);
  z-index:3;
}
.k-tower{
  position:absolute; right:1.6%; top:7%; width:23%; bottom:20%;
  z-index:4;
  border-radius:2px 2px 0 0;
  box-shadow:-4px 0 14px rgba(0,0,0,.28);
}
.k-oven{
  position:absolute; left:18%; right:10%; top:28%; height:22%;
  background:linear-gradient(180deg, #2a2a2a, #111);
  border:2px solid #0a0a0a;
  border-radius:2px;
}
.k-oven::after{
  content:"";
  position:absolute; left:10%; right:10%; top:18%; bottom:18%;
  background:linear-gradient(180deg, #3a3a3a, #151515);
  box-shadow:inset 0 0 8px rgba(0,0,0,.5);
}
.k-cubbies{
  position:absolute; left:4%; top:6%; width:18%; height:70%;
  display:flex; flex-direction:column; gap:6%;
}
.k-cubbies span{
  flex:1;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.06);
}
.k-tower-face{
  position:absolute; left:24%; right:0; top:0; bottom:0;
}