/* Praça de Toiros · the shop. Loaded after styles.css (which the hub shares), so everything here is the shop's own.
   The order is a ticket for the Praça: four steps laid down the wall, the receipt filling in beside them.
   The whole page is one tiled wall with the hub: app.js fits the tile to the width (--step, --n) so every course
   holds whole tiles, and every ground, panel, photo, plaque and band below is measured in whole tiles. */
body.loja {
  --gold: #E3A92B;            /* the gold of the flag, and of the letters on the base */
  --basalto: #2B2B2D;         /* the base's charcoal, Terceira's basalt */
  --erro: #8E1F18;
  --erro-fundo: #F6E3E1;
  --tap: 56px;                /* the smallest thing a thumb has to hit */
}
.loja [hidden] { display: none !important; }

/* ---- the bar: the site's name takes you home; its maker's wordmark takes you to alloic.com (as on the hub) ---- */
.loja .mark { white-space: nowrap; }
.loja .bar-order { min-height: 52px; }
.loja .brand { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.loja .por-alloic { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); text-decoration: none; font-size: var(--t-small); transition: color .18s var(--ease); }
.loja .por-alloic:hover, .loja .por-alloic:focus-visible { color: var(--ink); }
.loja .alloic { height: .72em; width: auto; aspect-ratio: 2125 / 731; fill: currentColor; display: block; transform: translateY(.04em); }

/* ---- the maker signs the page at full width, on a darker step of the navy, before the pavement ---- */
.loja .assinatura {
  display: grid; justify-items: start; align-content: center; gap: 16px; margin: 0;
  padding: var(--step) calc(var(--step) * var(--lado));
  background: #0A1A3E url("azulejo-azul-512.jpg") 0 0 / calc(var(--step) * 4) calc(var(--step) * 4) repeat;
  color: #EEEDE9; text-decoration: none;
}
.loja .ass-por, .loja .ass-linha { font-size: var(--t-small); color: #C9D3EA; }
.loja .ass-logo { width: min(560px, 78vw); height: auto; aspect-ratio: 2125 / 731; fill: currentColor; display: block; transition: color .3s var(--ease); }
.loja .assinatura:hover .ass-logo, .loja .assinatura:focus-visible .ass-logo { color: var(--gold); }

/* ---- the wall's grounds: white glazed tiles for every light ground, the hub's pattern tile (mirrored into its
   2 x 2 block) for the walls at the top and the foot of the page, navy tiles where the wall turns blue ---- */
.loja > .bar { margin: 0; padding-inline: calc(var(--step) * var(--lado)); }   /* the bar on the wall's own margins */
.loja .hero, .loja .back { background: #E9DFC6 url("padrao-2x2.jpg") 0 0 / calc(var(--step) * 2) calc(var(--step) * 2) repeat; }
.loja .panel, .encomenda, .loja .gallery, .loja .faq {
  background: #F8F9FB url("../azores/azulejo-branco-512.jpg") 0 0 / calc(var(--step) * 4) calc(var(--step) * 4) repeat;
}
/* where the blue meets the white: the Greek key calçada, two tiles deep, cut to whole repeats */
.junta { height: calc(var(--step) * 2); background: #1E1F22 url("../azores/calcada-grega-1600.jpg") repeat-x 0 0 / var(--rep, 520px) 100%; }

/* ---- hero: a panel of white tiles, whole tiles wide and centred on the joints, carrying the two things you can hold ---- */
.loja .hero { padding: var(--step) 0; }
.loja .panel { width: calc(var(--step) * var(--pk)); margin: 0 auto; padding: 0; -webkit-mask: none; mask: none; }
.loja .panel-head { padding: calc(var(--step) * .6) calc(var(--step) * .5) calc(var(--step) * .4); }
.loja .hero-act { margin-top: 30px; }
.loja .stock-line { max-width: 36ch; text-align: center; }
.plates { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--joint); margin: 0; }
.plates figure { display: grid; grid-template-rows: calc(var(--step) * var(--ph)) var(--step); }
.plates img { width: 100%; height: 100%; object-fit: cover; }
.plates figcaption { font-size: var(--t-small); display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; gap: 0 .4em; padding: 0 10px; line-height: 1.35; text-align: center; }
.plates figcaption b { font-weight: 600; color: var(--cobalt); }
.plate-l img { animation: drift 24s var(--ease) infinite alternate; }

/* ---- the order ---- */
.encomenda {
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--step); align-items: start;
  padding: var(--step) calc(var(--step) * var(--lado));
}
.enc-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; align-content: flex-start; gap: 24px 48px; margin-bottom: var(--step); }
.enc-lead { max-width: 34ch; padding-bottom: 6px; }
/* each step is a sheet set into the wall: whole tiles tall, one course of tiles between them */
.passos { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--step); }
@media (min-width: 1240px) {
  .encomenda { grid-template-columns: calc(var(--step) * (var(--n) - 7)) calc(var(--step) * 4); }
  .passos { grid-column: 1; }
}

.passo { background: var(--paper); padding: 40px 44px 44px; scroll-margin-top: 16px; }
.loja main .az-placa { --az-tile: var(--step); margin-left: calc(var(--step) * var(--po, 0)); }
.passo-cab { display: flex; align-items: center; gap: 22px; }
.passo-n { --az-tile: 58px; flex: none; }
.passo-t { font-size: var(--t-h2); font-weight: 600; line-height: 1.08; letter-spacing: -.015em; }
.passo-ajuda { margin-top: 16px; max-width: 46ch; }
.passo-vazio { margin-top: 16px; }
.volta1 { margin-top: 18px; }
.passo-pe { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 16px 28px; }
.passo-total { margin-right: auto; font-size: var(--t-lead); }
.passo-total b { font-weight: 600; margin-left: .3em; }
.passo-fim .passo-pe { display: none; }

/* choices: whole rows to tap, the photograph of each thing beside its name and price */
.opcoes, .extras, .destino, .vistas { border: 0; margin: 0; padding: 0; min-width: 0; }
.opcoes { margin-top: 28px; display: grid; gap: 10px; }
.extras { margin-top: 24px; display: grid; gap: 10px; }
.op-grupo { margin: 26px 0 4px; font-weight: 600; }
.opcao {
  display: grid; grid-template-columns: 30px 112px minmax(0, 1fr) auto; align-items: center; gap: 20px;
  min-height: 112px; padding: 12px 24px 12px 20px;
  background: var(--wall); color: var(--ink); cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.opcao:hover { background: var(--tone); }
.opcao:active { transform: scale(.99); }
.opcao input { width: 28px; height: 28px; margin: 0; accent-color: var(--cobalt); cursor: pointer; }
.opcao img { width: 112px; aspect-ratio: 1; object-fit: cover; }
.op-txt { display: grid; gap: 4px; }
.op-nome { font-size: var(--t-lead); font-weight: 600; line-height: 1.2; }
.op-desc { line-height: 1.45; }
.op-preco { font-size: var(--t-lead); font-weight: 600; white-space: nowrap; }
.opcao.on { background: var(--ink); color: var(--paper); }
.opcao.on input { accent-color: var(--paper); }
.opcao:focus-within { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.op-ficheiro img { filter: saturate(.85); }

/* a count instead of a tick */
.op-qtd { grid-template-columns: 112px minmax(0, 1fr) auto; padding-left: 70px; cursor: default; }
.op-qtd .op-preco { font-size: var(--t-body); }
.qtd { display: inline-grid; grid-template-columns: var(--tap) 52px var(--tap); align-items: center; }
.qtd-b {
  width: var(--tap); height: var(--tap); border: 0; border-radius: 0; cursor: pointer;
  font: 600 var(--t-lead)/1 var(--f); background: var(--paper); color: var(--ink);
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.qtd-b:hover { background: var(--grout); }
.qtd-b:active { transform: scale(.94); }
.qtd-b:disabled { color: var(--grout); cursor: default; }
.qtd-n { text-align: center; font-size: var(--t-lead); font-weight: 600; }
.op-qtd.on .qtd-b { background: var(--cobalt); color: var(--paper); }

/* what opens under a ticked extra */
.extra-mais { background: var(--tone); padding: 24px 24px 26px; display: grid; gap: 16px; }
.mensagem { display: grid; gap: 16px; }
.base-prova {
  background: var(--basalto); color: var(--gold); text-align: center;
  padding: 26px 20px 28px; font-size: var(--t-lead); font-weight: 600; line-height: 1.3; letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.conjunto { background: var(--cobalt); color: var(--paper); padding: 18px 24px; font-weight: 600; }

/* fields */
.campo { display: grid; gap: 8px; }
.campo-t { font-weight: 600; }
.campo input, .campo textarea {
  font: 400 var(--t-body)/1.3 var(--f); color: var(--ink); background: var(--paper);
  min-height: var(--tap); padding: 12px 16px; border: 2px solid var(--grout); border-radius: 0; width: 100%;
}
.campo textarea { resize: vertical; }
.campo input:focus, .campo textarea:focus { border-color: var(--cobalt); outline: none; }
.campo input[aria-invalid="true"] { border-color: var(--erro); }
.nota { font-size: var(--t-small); color: var(--muted); }
.aviso { background: var(--erro-fundo); color: var(--erro); padding: 14px 18px; font-weight: 600; }

/* ---- the studio: your photo in our ornament ---- */
.estudio { margin-top: 0; }
.est-grelha { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; margin-top: 26px; align-items: start; }
.est-vista { display: grid; gap: 12px; }
.est-palco { position: relative; aspect-ratio: 1; background: #050608; overflow: hidden; }
.est-palco canvas { width: 100%; height: 100%; display: block; }
/* the arena: drag here (a circle, so a thumb anywhere else still scrolls the page) */
.est-aro {
  position: absolute; left: 29.95%; top: 31.45%; width: 40.33%; aspect-ratio: 1; border-radius: 50%;
  cursor: pointer; touch-action: none; transition: outline-color .2s var(--ease);
  outline: 3px solid transparent; outline-offset: 4px;
}
.est-aro.com-foto { cursor: grab; }
.est-aro.arrasta { cursor: grabbing; outline-color: rgba(248, 249, 251, .75); }
.est-aro:focus-visible { outline-color: var(--paper); }
.est-ctl { display: grid; gap: 18px; align-content: start; }
.ficheiro { position: relative; overflow: hidden; }
.ficheiro input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.ficheiro:focus-within { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.privado { color: var(--ink); }
.vistas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vistas legend { margin-bottom: 8px; padding: 0; }
.vista { position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: var(--tap); padding: 8px 12px; background: var(--wall); cursor: pointer; font-weight: 600; line-height: 1.2;
  transition: background-color .18s var(--ease), color .18s var(--ease); }
.vista:hover { background: var(--tone); }
.vista input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.vista.on { background: var(--ink); color: var(--paper); }
.vista:focus-within { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.zoom { display: grid; gap: 8px; }
.zoom-l { display: grid; grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap); gap: 12px; align-items: center; }
.zoom-l .qtd-b { background: var(--wall); }
.zoom-l .qtd-b:hover { background: var(--tone); }
.zoom input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: var(--tap); background: transparent; margin: 0; cursor: pointer; }
.zoom input[type="range"]::-webkit-slider-runnable-track { height: 8px; background: var(--grout); }
.zoom input[type="range"]::-moz-range-track { height: 8px; background: var(--grout); }
.zoom input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 48px; margin-top: -20px; background: var(--ink); border: 0; border-radius: 0; }
.zoom input[type="range"]::-moz-range-thumb { width: 48px; height: 48px; background: var(--ink); border: 0; border-radius: 0; }
.zoom input[type="range"]:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.estudio:not(.tem-foto) [data-precisa-foto] { display: none; }
.sem-foto { display: grid; gap: 18px; justify-items: start; }

/* ---- the receipt ---- */
.talao-lado {
  grid-column: 2; position: sticky; top: var(--step);
  background: var(--paper); padding: 30px 30px 0; display: grid; gap: 18px; align-content: start;
  --notch: 14px;
  -webkit-mask:
    radial-gradient(circle at 0 calc(100% - 64px), #0000 var(--notch), #000 calc(var(--notch) + .5px)) left / 51% 100% no-repeat, /* taste-skill-ignore: hard-edged mask cutting the ticket's notches */
    radial-gradient(circle at 100% calc(100% - 64px), #0000 var(--notch), #000 calc(var(--notch) + .5px)) right / 51% 100% no-repeat; /* taste-skill-ignore: hard-edged mask */
  mask:
    radial-gradient(circle at 0 calc(100% - 64px), #0000 var(--notch), #000 calc(var(--notch) + .5px)) left / 51% 100% no-repeat, /* taste-skill-ignore: hard-edged mask */
    radial-gradient(circle at 100% calc(100% - 64px), #0000 var(--notch), #000 calc(var(--notch) + .5px)) right / 51% 100% no-repeat; /* taste-skill-ignore: hard-edged mask */
}
.talao-t { font-size: var(--t-lead); font-weight: 600; }
.linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.linhas li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.linhas li b { font-weight: 600; white-space: nowrap; }
.linhas .sub { display: block; font-size: var(--t-small); color: var(--muted); margin-top: 2px; }
.linhas .menos b { color: var(--cobalt); }
.linhas .vazio { color: var(--muted); }
.total { display: flex; justify-content: space-between; gap: 16px; font-size: var(--t-lead); font-weight: 600; padding-top: 18px; border-top: 6px dotted var(--cobalt); }
.talao-stub { margin: 4px -30px 0; padding: 20px 12px 22px; border-top: 6px dotted var(--grout); text-align: center; font-size: var(--t-small); font-weight: 600; color: var(--cobalt); }
.talao-passo { margin-top: 26px; background: var(--wall); padding: 24px 24px 22px; display: grid; gap: 14px; }
.talao-passo .total { border-top-color: var(--cobalt); }

/* where it goes, who it is for, and how to finish */
.destino { margin-top: 30px; display: grid; gap: 10px; }
.destino legend { padding: 0; margin-bottom: 10px; font-size: var(--t-lead); }
.op-linha { grid-template-columns: 30px minmax(0, 1fr) auto; min-height: 72px; }
.op-linha .op-nome { font-size: var(--t-body); }
.op-linha .op-preco { font-size: var(--t-body); }
.destino .nota { margin-top: 4px; }
.campo-nome { margin-top: 30px; max-width: 520px; }
.campo-nome .campo-t { font-size: var(--t-lead); }
.passo-fim .aviso { margin-top: 18px; }
.fim { margin: 34px 0 0; padding: 0 0 0 1.4em; display: grid; gap: 28px; }
.fim-p { padding-left: 8px; }
.fim-p::marker { font-size: var(--t-lead); font-weight: 600; color: var(--cobalt); }
.fim-t { max-width: 46ch; }
.fim-b { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.fim-b .btn { min-width: 260px; }
.fim .nota { margin-top: 12px; }
.fim .nota a { color: var(--ink); font-weight: 600; text-underline-offset: 4px; }
.pago { margin-top: 20px; background: var(--cobalt); color: var(--paper); padding: 18px 22px; font-weight: 600; }
.codigo { margin-top: 26px; }
.btn-tone { background: var(--tone); color: var(--ink); }
.btn-tone:hover { background: var(--grout); }


/* ---- the tile plaques lie flat on the wall, like the rest of the page ---- */
.loja .az-placa .az-p { box-shadow: none; } /* taste-skill-ignore: removes the shared plaque shadow on this page */
.loja .az-numero { filter: none; }
.loja .az-juntas { display: none; }
.loja .az-azulejos { gap: var(--joint, 3px); }

/* ---- up close: the photo tiles take whole tiles of the wall, edge to edge, centred on the course ---- */
.loja .gallery { padding: var(--step) 0; }
.loja .gallery .az-placa { margin: 0 0 var(--step) calc(var(--step) * (var(--gm) + var(--po, 0))); }
.loja .tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; width: calc(var(--step) * var(--gc) * var(--gs)); margin: 0 auto; }
.loja .tile { width: calc(var(--step) * var(--gs)); }
.loja .tile img { height: calc(var(--step) * var(--gs)); aspect-ratio: auto; }
.loja .strip { height: var(--step); min-height: 0; overflow: hidden; padding: 12px 14px; align-content: center; }

/* ---- delivery and files: the gift going out, and the plain terms beside it ---- */
.envio {
  display: grid; grid-template-columns: calc(var(--step) * 4) minmax(0, 1fr); column-gap: var(--step); align-items: start;
  margin: 0; padding: var(--step) calc(var(--step) * var(--lado));
  background: #0E2250 url("azulejo-azul-512.jpg") 0 0 / calc(var(--step) * 4) calc(var(--step) * 4) repeat; color: var(--on-dark);
}
.envio-foto img { width: 100%; height: calc(var(--step) * 6); object-fit: cover; }
.termos { margin: var(--step) 0 0; display: grid; gap: 30px; }
.termos dt { font-size: var(--t-lead); font-weight: 600; color: var(--gold); }
.termos dd { margin: 6px 0 0; max-width: 46ch; line-height: 1.55; }

/* ---- questions: the plaque in its five tiles, the reading text from the next joint ---- */
.loja .faq { grid-template-columns: calc(var(--step) * 5) minmax(0, 1fr); column-gap: var(--step); padding: var(--step) calc(var(--step) * var(--lado)); }
.loja .faq .az-placa { grid-column: 1; }
.loja .faq-text { grid-column: 2; }

/* ---- the foot: the postcard set into the patterned wall, scalloped one bite per tile; the signature on the navy
   wall; the street's calçada band, two tiles deep and cut to whole repeats ---- */
.loja .back { padding: 0; }
.loja .muro-pe { padding: var(--step) 0; }
.loja .postcard {
  width: calc(var(--step) * var(--pc)); min-height: 0; margin: 0 auto;
  padding: var(--step) calc(var(--step) * .6) calc(var(--step) * .5);
  -webkit-mask: radial-gradient(circle at 50% 0, #0000 calc(var(--step) / 2 - .5px), #000 calc(var(--step) / 2)) top / var(--step) 100% repeat-x; /* taste-skill-ignore: hard-edged mask, one scallop per tile */
  mask: radial-gradient(circle at 50% 0, #0000 calc(var(--step) / 2 - .5px), #000 calc(var(--step) / 2)) top / var(--step) 100% repeat-x; /* taste-skill-ignore: hard-edged mask */
}
.loja .back .calcada { margin: 0; height: calc(var(--step) * 2); background: #2B2B2D url("../azores/calcada-faixa-1600.jpg") repeat-x 0 0 / var(--rep, 520px) 100%; }

/* ---- motion: every control answers the thumb ---- */
.js .passo { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .passo.in { opacity: 1; transform: none; }
.js .termos > div { transition-duration: .6s; }
.btn:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
@keyframes chega { from { background-color: var(--gold); } to { background-color: var(--ink); } }
.opcao.on.chegou { animation: chega .7s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js .passo { opacity: 1; transform: none; }
}

/* ---- below 1240px: one column; the receipt moves into the last step and each step shows the total so far ---- */
@media (max-width: 1099px) {
  .loja .links { display: none; }
  .loja .bar { grid-template-columns: 1fr auto; }
}
@media (max-width: 1239px) {
  .talao-lado { display: none; }
}
@media (min-width: 1240px) {
  .talao-passo, .passo-total { display: none; }
}
@media (max-width: 900px) {
  .est-grelha { grid-template-columns: 1fr; }
  .est-palco { max-width: 620px; }
  .envio { display: block; }
  .envio-foto img { height: calc(var(--step) * 4); }
  .envio-txt { padding-top: var(--step); }
  .loja .faq { display: block; }
  .loja .faq .az-placa { margin-bottom: var(--step); }
}

/* ---- phone: its own composition ---- */
@media (max-width: 760px) {
  body.loja { --t-body: 19px; --t-lead: 21px; --tap: 56px; }
  .loja .mark { font-size: 20px; }
  .loja .panel-head { padding: calc(var(--step) * .6) var(--m) calc(var(--step) * .4); }
  .encomenda { display: block; }
  .enc-lead { padding: 0 var(--m) 6px; }
  .passo { padding: 28px var(--m) 30px; }
  .passo-cab { gap: 16px; }
  .passo-n { --az-tile: 46px; }
  .opcao { grid-template-columns: 28px 72px minmax(0, 1fr) auto; grid-template-areas: "in nome nome preco" "in img desc desc"; gap: 10px 14px; padding: 16px 14px 16px 12px; align-items: start; }
  .opcao input { grid-area: in; margin-top: 2px; }
  .opcao img { grid-area: img; width: 72px; }
  .op-txt { display: contents; }
  .op-nome { grid-area: nome; }
  .op-desc { grid-area: desc; }
  .op-preco { grid-area: preco; }
  .op-qtd { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "img txt" "qtd qtd"; padding-left: 14px; }
  .op-qtd .op-txt { display: grid; grid-area: txt; }
  .op-qtd .op-nome, .op-qtd .op-desc, .op-qtd .op-preco { grid-area: auto; }
  .op-qtd img { grid-area: img; }
  .qtd { grid-area: qtd; justify-self: start; margin-top: 4px; }
  .op-linha { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: none; align-items: center; min-height: 64px; }
  .op-linha .op-nome, .op-linha .op-preco { grid-area: auto; }
  .extra-mais { padding: 18px 14px 20px; }
  .est-grelha { gap: 20px; margin-top: 20px; }
  .est-palco { margin: 0 -6px; }
  .fim-b .btn { width: 100%; min-width: 0; }
  .passo-pe { gap: 14px; }
  .passo-total { width: 100%; display: flex; justify-content: space-between; }
  .passo-pe .btn { width: 100%; }
  .envio-foto img { height: calc(var(--step) * 5); }
  .termos, .loja .faq-text { padding: 0 var(--m); }
  .loja .assinatura { padding: var(--step) var(--m); }
  .loja .postcard { padding: var(--step) var(--m) calc(var(--step) * .5); }
  .loja .strip { padding: 8px var(--m); }
  .loja .strip .row2 { display: flex; flex-wrap: wrap; }   /* one tile deep: the name and the place, not the figures */
  .loja .strip .row3 { display: none; }
  .loja > .bar { padding-inline: var(--m); }
}
@media (max-width: 560px) {
  .loja .bar-order { display: none; }
  .loja .bar .por-alloic { display: none; }   /* the signature at the foot carries it on a phone */
}