/* All colour and type values come from the site's existing tokens. */
.tienda { background: var(--color-bg); color: var(--color-text); }
.tienda [hidden] { display: none !important; }
.tienda__intro { padding: 32px 0 24px; border-bottom: 1px solid var(--color-border); }
.tienda__intro .container { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.tienda__intro p { font-size: 13px; }
.tienda__intro a { color: var(--color-text-muted-aa); font-size: 13px; }
.tienda__layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); padding-block: 48px 64px; align-items: start; }
.tienda__gallery { min-width: 0; }
.tienda__stage { position: relative; background: var(--color-surface); }
.tienda__stage img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; display: block; }
.tienda__caption { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 12px; color: var(--color-text-muted-aa); }
.tienda__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; margin-top: 20px; }
.tienda__thumb { min-width: 0; width: 100%; padding: 4px; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); cursor: pointer; font-size: 11px; line-height: 1.4; }
.tienda__thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.tienda__thumb[aria-pressed=true] { border: 2px solid var(--color-text); padding: 3px; }
.tienda__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-teal-aa); }
.tienda h1 { font: 700 clamp(42px, 4.5vw, 68px)/.98 var(--font-display); margin: 12px 0 20px; text-transform: uppercase; max-width: 9em; }
.tienda__badge { display: inline-block; background: var(--color-dark); color: var(--color-on-dark); padding: 6px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.tienda__price { font: 700 32px/1.2 var(--font-display); margin-top: 18px; }
.tienda__unit { font: 500 12px var(--font-body); white-space: nowrap; }
.tienda__designs { border: 0; padding: 0; margin: 0 0 var(--space-lg); min-width: 0; }
.tienda__designs legend, .tienda__form-step { font: 700 28px/var(--lh-heading) var(--font-display); }
.tienda__step { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: var(--space-xs); background: var(--band-yellow-bg); font-size: 20px; vertical-align: middle; }
.tienda__design-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--space-sm); margin-top: var(--space-sm); }
.tienda__design { position: relative; display: flex; flex-direction: column; min-width: 0; border: 2px solid var(--color-border); background: var(--color-bg); cursor: pointer; transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease); }
.tienda__design:hover { border-color: var(--color-text); }
.tienda__design:has(input:checked) { border-color: var(--band-yellow-bg); background: var(--band-yellow-bg); }
.tienda .tienda__choice-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.tienda__design img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.tienda__design-label { display: block; padding: var(--space-sm); font: 700 20px/1.2 var(--font-display); overflow-wrap: anywhere; }
.tienda__design small { display: block; margin-top: var(--space-2xs); color: var(--color-text-muted-aa); font: 500 11px/1.5 var(--font-body); }
.tienda__design:has(input:checked) small { color: var(--color-text); }
.tienda__design-check { position: absolute; top: var(--space-xs); right: var(--space-xs); display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--color-text-muted-aa); border-radius: 50%; background: var(--color-bg); color: transparent; font: 700 20px/1 var(--font-body); }
.tienda__design:has(input:checked) .tienda__design-check { background: var(--band-yellow-bg); color: var(--color-text); border-color: var(--color-text); }
.tienda__copy { font-size: 14px; line-height: 1.7; margin: 20px 0; }
.tienda__notice { border-left: 3px solid var(--band-yellow-bg); padding-left: 14px; font-size: 12px; line-height: 1.7; margin-bottom: 24px; }
.tienda__notify { grid-column: 1 / -1; min-width: 0; border: 1px solid var(--color-text); border-top: var(--space-xs) solid var(--band-yellow-bg); }
.tienda__notify-heading { padding: var(--space-lg) var(--space-lg) var(--space-md); background: var(--color-bg-alt); }
.tienda__notify-heading .tienda__eyebrow { color: var(--color-text); }
.tienda h2 { font: 700 clamp(40px, 5vw, 64px)/var(--lh-heading) var(--font-display); text-transform: uppercase; margin-top: var(--space-xs); }
.tienda__sub { font-size: var(--fs-small); line-height: var(--lh-body); margin-top: var(--space-sm); color: var(--color-text-muted-aa); }
.tienda__notify-body { padding: var(--space-lg); }
.tienda__form-step { margin-bottom: var(--space-md); }
.tienda__contact-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-md); align-items: start; }
.tienda__field { display: grid; min-width: 0; gap: var(--space-xs); font-size: 13px; font-weight: 700; }
.tienda input[type=email] { width: 100%; min-width: 0; border: 1px solid var(--color-text-muted-aa); border-radius: var(--radius); background: var(--color-bg); padding: var(--space-sm); min-height: 56px; font: 500 16px var(--font-body); color: var(--color-text); }
.tienda__sizes { min-width: 0; border: 0; padding: 0; margin: 0; }
.tienda__sizes legend { padding: 0; margin-bottom: var(--space-xs); font: 700 13px var(--font-body); }
.tienda__size-options { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tienda__size { position: relative; display: grid; place-items: center; min-width: 48px; min-height: 56px; padding: var(--space-xs); border: 1px solid var(--color-text-muted-aa); border-radius: 999px; font: 700 18px/1 var(--font-display); cursor: pointer; }
.tienda__size--later { padding-inline: var(--space-sm); }
.tienda__size:hover { border-color: var(--color-text); }
.tienda__size:has(input:checked) { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.tienda__check { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.65; margin: 16px 0; cursor: pointer; }
.tienda__check input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; accent-color: var(--color-dark); }
.tienda__contact-consent { margin-block: var(--space-lg) var(--space-md); max-width: 80em; }
.tienda__submit { background: var(--band-yellow-bg); color: var(--color-text); border: 1px solid var(--color-text); width: 100%; min-height: 64px; padding: var(--space-sm); font: 700 28px var(--font-display); cursor: pointer; text-transform: uppercase; }
.tienda__submit:hover { box-shadow: inset 0 0 0 1px var(--color-text); }
.tienda__submit:disabled { opacity: .65; cursor: wait; }
.tienda__fine { font-size: 11px; line-height: 1.7; color: var(--color-text-muted-aa); margin-top: 10px; }
.tienda__error { font-size: 13px; line-height: 1.7; color: var(--band-red-bg); margin-top: 10px; }
.tienda__success { text-align: center; padding: var(--space-md) 0; }
.tienda__success h3 { font: 700 clamp(36px, 4vw, 48px)/var(--lh-heading) var(--font-display); margin: var(--space-md) 0 var(--space-sm); text-transform: uppercase; }
.tienda__success p { font-size: var(--fs-small); line-height: var(--lh-body); max-width: 48em; margin-inline: auto; }
.tienda__success-mark { display: grid; place-items: center; margin-inline: auto; width: 72px; height: 72px; border-radius: 50%; background: var(--band-yellow-bg); color: var(--color-text); font: 700 48px/1 var(--font-display); }
.tienda__success .tienda__success-label { margin-top: var(--space-md); font-weight: 700; }
.tienda__success-designs { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-xs); padding: 0; margin: var(--space-sm) 0 var(--space-md); list-style: none; }
.tienda__success-designs li { padding: var(--space-xs) var(--space-sm); background: var(--color-bg-alt); font: 700 20px/var(--lh-heading) var(--font-display); }
.tienda__privacy { border-block: 1px solid var(--color-border); margin-bottom: var(--space-lg); }
.tienda__privacy summary { min-height: 56px; padding-block: var(--space-sm); display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); color: var(--color-text-muted-aa); font-size: 13px; cursor: pointer; list-style: none; }
.tienda__privacy summary::-webkit-details-marker { display: none; }
.tienda__privacy summary > span { font: 700 24px/1 var(--font-display); }
.tienda__privacy[open] summary > span { transform: rotate(45deg); }
.tienda__privacy-content { max-width: var(--container-text); padding-block: 0 var(--space-md); }
.tienda__privacy p { font-size: 12px; line-height: 1.7; margin: 10px 0; }
.tienda__privacy-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.tienda__privacy-actions button { min-height: 48px; max-width: 100%; background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-text); padding: var(--space-xs) var(--space-sm); font: 700 14px var(--font-body); cursor: pointer; }
.tienda__privacy-actions button:first-child { background: var(--color-dark); color: var(--color-on-dark); }
.tienda :focus-visible { outline: 3px solid var(--color-teal-aa); outline-offset: 4px; }
.tienda__design:has(input:focus-visible), .tienda__size:has(input:focus-visible) { outline: 3px solid var(--color-teal-aa); outline-offset: 4px; }
.tienda__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 760px) {
  .tienda__layout { grid-template-columns: minmax(0, 1fr); padding-block: 24px 32px; gap: 28px; }
  .tienda__intro { padding-block: 18px; }
  .tienda__intro .container { align-items: flex-start; }
  .tienda__stage img { aspect-ratio: 1; }
  .tienda__thumb { width: 100%; font-size: 10px; }
  .tienda__notify-heading { padding: var(--space-md) var(--space-sm); }
  .tienda__notify-body { padding: var(--space-md) var(--space-sm); }
  .tienda__design-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-xs); }
  .tienda__design-label { padding: var(--space-xs); font-size: 18px; }
  .tienda__contact-row { grid-template-columns: minmax(0,1fr); }
  .tienda__privacy { margin-bottom: var(--space-md); }
}
@media (min-width: 761px) and (max-width: 1099px) {
  .tienda__design-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
/* Desktop: the sign-up card sits in the right column under the price, beside the gallery. */
@media (min-width: 761px) {
  .tienda__layout { row-gap: var(--space-xs); }
  .tienda__gallery { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: var(--space-lg); }
  .tienda__layout > section[aria-labelledby="product-title"] { grid-column: 2; grid-row: 1; }
  .tienda__notify { grid-column: 2; grid-row: 2; }
  .tienda__notify-heading { padding: var(--space-md) var(--space-md) var(--space-sm); }
  .tienda__notify-body { padding: var(--space-md); }
  .tienda h2 { font-size: clamp(32px, 3.2vw, 44px); }
  .tienda__designs legend, .tienda__form-step { font-size: 24px; }
  .tienda .tienda__design-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
  .tienda__design-label { padding: var(--space-xs); font-size: 16px; }
  .tienda__design-check { width: 24px; height: 24px; font-size: 16px; }
  .tienda__contact-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .tienda__submit { font-size: 24px; }
}