/* "Completá el look" — Qiara */
.complete-look {
  margin: 32px 0;
  padding: 20px 16px;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.complete-look, .complete-look * { box-sizing: border-box; }
/* Vacía hasta que el JS la arma (no usamos display:none para que se pueda detectar al hacer scroll) */
.complete-look:empty { margin: 0; padding: 0; border: 0; }

.complete-look .ql-title {
  margin: 0 0 16px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.complete-look .ql-items { display: grid; gap: 12px; margin-bottom: 16px; }

.complete-look .ql-item {
  display: grid;
  grid-template-columns: 22px 96px 1fr;
  gap: 12px;
  align-items: center;
  margin: 0;
  cursor: pointer;
  opacity: .5;
  transition: opacity .15s;
}
.complete-look .ql-item.is-checked { opacity: 1; }

.complete-look .ql-check { position: absolute; opacity: 0; pointer-events: none; }
.complete-look .ql-box {
  width: 22px;
  height: 22px;
  border: 1.5px solid #000;
  background: #fff;
}
.complete-look .ql-item.is-checked .ql-box {
  background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/16px no-repeat;
}
.complete-look .ql-check:focus-visible + .ql-box { outline: 2px solid #000; outline-offset: 2px; }

.complete-look .ql-img { position: relative; display: block; }
.complete-look .ql-img img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
}
/* Mismo look que .js-offer-label (no usamos esa clase para que el JS del tema no la toque) */
.complete-look .ql-offer {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 2px 6px;
  background: #29F064;
  color: #000;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.complete-look .ql-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.complete-look .ql-name { font-size: 14px; line-height: 1.3; }
.complete-look .ql-name em { font-style: normal; font-weight: 700; }
.complete-look .ql-variant { font-size: 12px; }
.complete-look .ql-prices { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.complete-look .ql-price { font-size: 15px; font-weight: 700; }
.complete-look .ql-compare { font-size: 13px; color: #000; opacity: .55; }
.complete-look .ql-size {
  align-self: flex-start;
  padding: 4px 8px;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  font: inherit;
  font-size: 13px;
}

.complete-look .ql-btn {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid #000;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
}
.complete-look .ql-btn-secondary { background: #fff; color: #000; }
.complete-look .ql-btn-secondary:hover { background: #000; color: #fff; }
.complete-look .ql-btn-primary { background: #000; color: #fff; }
.complete-look .ql-btn-primary:disabled { opacity: .4; cursor: default; }

.complete-look .ql-summary { margin: 20px 0 12px; font-size: 14px; line-height: 1.5; }
.complete-look .ql-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 16px;
}
.complete-look .ql-total { font-size: 22px; }

.complete-look .ql-shipping {
  margin-bottom: 16px;
  padding: 12px 14px;
  background: #FDFFA4;
  font-size: 14px;
}
.complete-look .ql-bar {
  height: 6px;
  margin-top: 8px;
  background: #fff;
  overflow: hidden;
}
.complete-look .ql-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: #000;
  transition: width .3s;
}

.complete-look .ql-error { margin-top: 10px; font-size: 13px; color: #b00020; }

@media (min-width: 768px) {
  .complete-look { padding: 24px; }
}