/* ============================================================
   studio.x — tienda
   Viene del sitio aparte que estaba en tienda.studioxcompany.com.
   La cabecera y el pie son los del sitio; acá van solo el
   catálogo y la ficha de producto, escalados con --u como el
   resto (ver site.css).
   ============================================================ */

.sx-tienda{
  --card:   #f6f5f3;
  --linea2: #e8e6e3;
  --apagado:#7a7672;
  padding-bottom: calc(72 * var(--u));
}

/* ---------- encabezado del catálogo ---------- */
.sx-tienda .titular > div:first-child{ flex: 1 1 auto; min-width: 0; }
.sx-tienda .titular{
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--u));
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 1px solid var(--linea2);
  padding-bottom: calc(22 * var(--u));
  margin: calc(46 * var(--u)) 0 calc(34 * var(--u));
}
.sx-tienda h1{
  font-family: var(--display);
  font-size: calc(38 * var(--ut));
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.05;
  margin: 0;
  color: var(--tinta);
}
.sx-tienda .sub{
  font-family: var(--display);
  color: var(--tierra);
  font-size: calc(15 * var(--ut));
  font-weight: 500;
  letter-spacing: -.012em;
  margin-top: calc(12 * var(--u));
  /* sin tope de ancho entra en una línea; si igual tuviera que
     partirse, «pretty» evita que quede una palabra sola abajo */
  max-width: none;
  text-wrap: pretty;
}
.sx-tienda .filtros{
  display: flex;
  gap: calc(10 * var(--u));
  flex-wrap: wrap;
  align-items: center;
}
.sx-tienda .filtros input,
.sx-tienda .filtros select{
  font: inherit;
  font-size: calc(14 * var(--ut));
  padding: calc(11 * var(--u)) calc(18 * var(--u));
  border: 1px solid var(--linea2);
  /* redondeados como los botones del resto del sitio */
  border-radius: 999px;
  background: #fff;
  color: var(--tinta);
  min-width: calc(200 * var(--u));
  appearance: none;
  -webkit-appearance: none;
}
.sx-tienda .filtros select{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.2'/></svg>");
  background-repeat: no-repeat;
  background-position: right calc(12 * var(--u)) center;
  padding-right: calc(30 * var(--u));
}
.sx-tienda .filtros input:focus,
.sx-tienda .filtros select:focus{ outline: none; border-color: var(--tierra); }

/* ---------- catálogo ---------- */
.sx-tienda .catalogo{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(34 * var(--u)) calc(24 * var(--u));
  list-style: none;
  margin: 0;
  padding: 0;
}
.sx-tienda .pieza{ display: flex; flex-direction: column; position: relative; cursor: pointer; }
.sx-tienda .pieza[hidden]{ display: none; }
.sx-tienda .tapa{
  aspect-ratio: 3 / 4;
  background: var(--card);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.sx-tienda .tapa img{
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  background: var(--card);
  padding: calc(14 * var(--u));
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.sx-tienda .tapa img.llena{ object-fit: cover; padding: 0; }
.sx-tienda .pieza:hover .tapa img{ transform: scale(1.025); }
.sx-tienda .tapa .sinfoto{
  padding: calc(18 * var(--u));
  text-align: center;
  font-size: calc(14 * var(--ut));
  line-height: 1.35;
  color: var(--apagado);
}
.sx-tienda .tapa .sinfoto b{
  display: block;
  color: var(--tinta);
  font-size: calc(16 * var(--ut));
  margin-bottom: calc(6 * var(--u));
  font-family: var(--display);
}
.sx-tienda .sello{
  position: absolute;
  top: calc(10 * var(--u)); left: calc(10 * var(--u));
  background: var(--negro);
  color: #fff;
  font-size: calc(11 * var(--ut));
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: calc(6 * var(--u)) calc(9 * var(--u));
}
.sx-tienda .sello.oferta{ left: auto; right: calc(10 * var(--u)); }
.sx-tienda .vendida .tapa img{ filter: grayscale(1); opacity: .45; }

.sx-tienda .datos{ padding: calc(12 * var(--u)) 0 0; flex: 1; display: flex; flex-direction: column; }
.sx-tienda .rubro{
  font-family: var(--display);
  font-size: calc(13 * var(--ut));
  font-weight: 500;
  letter-spacing: -.012em;
  color: var(--tierra);
}
.sx-tienda .nombre{
  font-family: var(--display);
  font-size: calc(19 * var(--ut));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.012em;
  margin: calc(8 * var(--u)) 0 calc(4 * var(--u));
}
.sx-tienda .autoria{ font-size: calc(14 * var(--ut)); line-height: 1.4; color: var(--apagado); }
.sx-tienda .medidas{
  font-size: calc(13 * var(--ut));
  line-height: 1.4;
  color: var(--apagado);
  margin-top: calc(3 * var(--u));
}
.sx-tienda .precio{
  font-family: var(--display);
  font-size: calc(16 * var(--ut));
  font-weight: 500;
  margin: calc(10 * var(--u)) 0 calc(14 * var(--u));
}
.sx-tienda .vendida .precio{ color: var(--apagado); text-decoration: line-through; }
.sx-tienda .precio s,
.sx-tienda .d-precio s{ color: var(--apagado); font-weight: 400; margin-right: calc(6 * var(--u)); }
.sx-tienda .rebaja{
  font-style: normal;
  font-size: .72em;
  letter-spacing: .06em;
  background: var(--negro);
  color: #fff;
  padding: .2em .45em;
  margin-left: .45em;
  vertical-align: middle;
}

.sx-tienda .acciones{ display: flex; flex-direction: column; gap: calc(8 * var(--u)); margin-top: auto; }
.sx-tienda .boton{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  text-decoration: none;
  font-family: var(--display);
  font-size: calc(14 * var(--ut));
  font-weight: 500;
  letter-spacing: -.012em;
  min-height: calc(46 * var(--u));
  padding: calc(12 * var(--u)) calc(18 * var(--u));
  border: 1px solid var(--negro);
  border-radius: 999px;
  color: var(--negro);
  background: var(--beige);
  transition: background .2s, color .2s, border-color .2s;
}
.sx-tienda .boton:hover,
.sx-tienda .boton:focus-visible{
  background: var(--tierra);
  border-color: var(--tierra);
  color: var(--blanco);
}
.sx-tienda .boton small{ font-weight: 400; opacity: .7; }
/* en las tarjetas del catálogo la aclaración no cabe y parte el botón
   en dos líneas; queda solo en la ficha, donde hay ancho de sobra */
.sx-tienda .acciones .boton small{ display: none; }
.sx-tienda .acciones .boton{ text-align: center; }
.sx-tienda .boton.apagado,
.sx-tienda .vendida .boton{ pointer-events: none; opacity: .3; }
.sx-tienda .vacio{ font-family: var(--display); font-size: calc(16 * var(--ut)); color: var(--apagado); text-align: center; padding: calc(60 * var(--u)) 0; grid-column: 1 / -1; }

.sx-tienda .nota-pie{
  margin-top: calc(56 * var(--u));
  padding-top: calc(26 * var(--u));
  border-top: 1px solid var(--linea2);
  color: var(--apagado);
  font-size: calc(14 * var(--ut));
  line-height: 1.6;
  max-width: 78ch;
}

/* ---------- ficha de producto ---------- */
.sx-tienda .ficha{ display: none; }
body.viendo-producto .sx-tienda .catalogo-bloque{ display: none; }
body.viendo-producto .sx-tienda .ficha{ display: block; }

.sx-tienda .volver{
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font-family: var(--display);
  font-size: calc(13 * var(--ut));
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  margin: calc(46 * var(--u)) 0 calc(26 * var(--u));
  color: var(--negro);
}
.sx-tienda .volver:hover{ text-decoration: underline; }
.sx-tienda .d-grilla{
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: calc(48 * var(--u));
  align-items: start;
}
.sx-tienda .galeria .principal{
  aspect-ratio: 4 / 5;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.sx-tienda .galeria .principal img{
  width: 100%; height: 100%;
  object-fit: contain;
  padding: calc(24 * var(--u));
  background: var(--card);
  display: block;
}
.sx-tienda .galeria .principal img.llena{ object-fit: cover; padding: 0; }
.sx-tienda .miniaturas{ display: flex; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); flex-wrap: wrap; }
.sx-tienda .miniaturas button{
  width: calc(64 * var(--u)); height: calc(80 * var(--u));
  padding: 0;
  border: 1px solid var(--linea2);
  background: var(--card);
  cursor: pointer;
  overflow: hidden;
  opacity: .6;
  transition: opacity .15s, border-color .15s;
}
.sx-tienda .miniaturas button img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-tienda .miniaturas button.activa,
.sx-tienda .miniaturas button:hover{ opacity: 1; border-color: var(--negro); }

.sx-tienda .d-datos{ position: sticky; top: calc(24 * var(--u)); }
.sx-tienda .d-nombre{
  font-family: var(--display);
  font-size: calc(30 * var(--ut));
  font-weight: 600;
  line-height: 1.15;
  margin: calc(6 * var(--u)) 0 calc(8 * var(--u));
  letter-spacing: -.005em;
  overflow-wrap: anywhere;
}
.sx-tienda .d-autoria{ font-size: calc(15 * var(--ut)); color: var(--apagado); }
.sx-tienda .d-precio{
  font-family: var(--display);
  font-size: calc(24 * var(--ut));
  font-weight: 500;
  margin: calc(20 * var(--u)) 0 calc(22 * var(--u));
}
.sx-tienda .vendida .d-precio{ text-decoration: line-through; color: var(--apagado); }
.sx-tienda .d-acciones{ display: flex; flex-direction: column; gap: calc(10 * var(--u)); max-width: calc(420 * var(--u)); }
.sx-tienda .d-acciones .boton{ padding: calc(14 * var(--u)) calc(16 * var(--u)); font-size: calc(13 * var(--ut)); }
.sx-tienda .d-texto{
  margin: calc(32 * var(--u)) 0 0;
  font-size: calc(15 * var(--ut));
  line-height: 1.6;
  max-width: calc(520 * var(--u));
  overflow-wrap: anywhere;
}
.sx-tienda .d-texto p{ margin: 0 0 calc(12 * var(--u)); }
.sx-tienda .especificaciones{
  margin: calc(28 * var(--u)) 0 0;
  border-top: 1px solid var(--linea2);
  max-width: calc(520 * var(--u));
}
.sx-tienda .especificaciones div{
  display: flex;
  justify-content: space-between;
  gap: calc(20 * var(--u));
  padding: calc(12 * var(--u)) 0;
  border-bottom: 1px solid var(--linea2);
  font-size: calc(15 * var(--ut));
}
.sx-tienda .especificaciones dt{ color: var(--apagado); margin: 0; }
.sx-tienda .especificaciones dd{ margin: 0; text-align: right; overflow-wrap: anywhere; }
.sx-tienda .envio{
  font-size: calc(14 * var(--ut));
  line-height: 1.6;
  margin-top: calc(22 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  background: var(--card);
  max-width: calc(520 * var(--u));
}
.sx-tienda .envio strong{ font-weight: 500; }
.sx-tienda .aclaracion{
  font-size: calc(13 * var(--ut));
  color: var(--apagado);
  margin-top: calc(14 * var(--u));
  line-height: 1.6;
  max-width: calc(520 * var(--u));
}

/* ---------- pantallas chicas ---------- */
@media (max-width: 1100px){
  .sx-tienda .catalogo{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px){
  .sx-tienda .catalogo{ grid-template-columns: repeat(2, 1fr); gap: 30px 18px; }
  .sx-tienda .d-grilla{ grid-template-columns: 1fr; gap: 28px; }
  .sx-tienda .d-datos{ position: static; }
  .sx-tienda h1{ font-size: 32px; }
  .sx-tienda .sub{ font-size: 15px; }
  .sx-tienda .titular{ margin: 34px 0 26px; }
  .sx-tienda .filtros{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .sx-tienda .filtros input{ grid-column: 1 / -1; }
  .sx-tienda .filtros input,
  .sx-tienda .filtros select{ min-width: 0; width: 100%; font-size: 16px; }
  .sx-tienda .nombre{ font-size: 18px; }
  .sx-tienda .precio{ font-size: 16px; }
  .sx-tienda .boton{ font-size: 14px; min-height: 46px; }
  .sx-tienda .d-nombre{ font-size: 26px; }
  .sx-tienda .d-precio{ font-size: 22px; }
  .sx-tienda .miniaturas button{ width: 64px; height: 80px; }
}
@media (max-width: 480px){
  /* los desplegables no entran de a dos sin cortar el texto */
  .sx-tienda .filtros{ grid-template-columns: 1fr; }
}