/* /negozi/ and /stores/ — the page for card stores (inc/stores.php).
   Built from the Vault tokens in vault.css; loaded only on these two pages. */

.stores ol, .stores ul { list-style: none; }

/* ---- Hero ----------------------------------------------------------------- */
.st-hero { padding-bottom: 56px; }
.st-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.st-lang {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--hair); border-radius: 30px; padding: 7px 14px;
  transition: color .2s, border-color .2s;
}
.st-lang:hover, .st-lang:focus-visible { color: var(--ink); border-color: var(--gold); }
.st-lang:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.st-hero .hero-h { margin-top: 18px; }

.st-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.st-btn { display: inline-flex; align-items: center; justify-content: center; padding: 15px 26px; font-size: 15px; }
.st-ctas-center { justify-content: center; }
.st-ctas-stack { flex-direction: column; margin-top: 28px; }
.st-ctas-stack .st-btn { width: 100%; }

/* ---- The proposal ticket (signature) ---------------------------------------
   What a store actually does all day, as an object: a lot of cards lands on
   the counter, gets priced against the market, and is accepted. Plays once;
   the end state is the resting state, so reduced motion just skips to it. */
/* min-width:0 on both grid children: a fixed-width ticket used to set the
   column's min-content to 360px, pushing the whole hero past a 375px screen. */
.st-hero .hero-copy, .st-stage { min-width: 0; }
.st-stage { display: flex; justify-content: center; padding: 10px 0 20px; }
.ticket {
  --paper: #121c31;
  --notch: 101px; /* the two side notches sit on the dashed tear line (.tk-rows border) */
  position: relative; width: 100%; max-width: 360px;
  padding: 22px 22px 20px; border-radius: 16px;
  background:
    radial-gradient(circle at 0 var(--notch), var(--bg) 9px, transparent 9.5px),
    radial-gradient(circle at 100% var(--notch), var(--bg) 9px, transparent 9.5px),
    linear-gradient(170deg, #1a2742, var(--paper) 55%);
  border: 1px solid rgba(212, 175, 106, .42);
  box-shadow: 0 44px 90px -34px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .03);
  transform: rotate(-1.5deg);
  animation: tk-in .9s cubic-bezier(.2, .8, .2, 1) both;
}
.tk-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tk-kind { font-family: var(--serif); font-size: 24px; font-weight: 600; }
.tk-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--hair); border-radius: 5px; padding: 3px 7px;
}
.tk-from { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 6px; }
.tk-rows {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px dashed rgba(212, 175, 106, .35);
}
.tk-row {
  display: grid; grid-template-columns: 1fr auto; column-gap: 12px;
  padding: 9px 0; border-bottom: 1px solid rgba(158, 171, 194, .1);
  animation: tk-row .5s ease-out both; animation-delay: calc(.55s + var(--i) * .22s);
}
.tk-name { font-size: 14px; font-weight: 500; }
.tk-val { font-family: var(--mono); font-size: 13px; color: var(--ink); text-align: right; }
.tk-meta { grid-column: 1 / -1; font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 2px; }
.tk-totals { margin-top: 14px; display: grid; gap: 6px; animation: tk-row .5s ease-out 1.3s both; }
.tk-totals div { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.tk-totals b { font-family: var(--mono); font-weight: 700; color: var(--ink); }
.tk-ask b { color: var(--cyan); font-size: 16px; }
.tk-actions { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 8px; margin-top: 18px; animation: tk-row .5s ease-out 1.5s both; }
.tk-actions span {
  font-size: 12px; font-weight: 600; text-align: center; padding: 10px 6px; border-radius: 10px;
  border: 1px solid var(--hair); color: var(--muted); white-space: nowrap;
}
.tk-accept { animation: tk-press .45s ease-out 2.15s both; }
/* Stamped across the ticket's edge, beside the header: it must not hide a
   card name or a price. */
.tk-stamp {
  position: absolute; right: -16px; top: 60px;
  font-family: var(--mono); font-size: 17px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: #5be6a0; border: 2px solid #5be6a0; border-radius: 8px; padding: 7px 14px;
  background: rgba(15, 22, 40, .72); box-shadow: 0 0 0 4px rgba(91, 230, 160, .08);
  transform: rotate(-10deg);
  animation: tk-stamp .38s cubic-bezier(.3, 1.6, .5, 1) 2.45s both;
}

@keyframes tk-in {
  from { opacity: 0; transform: translateY(-34px) rotate(-5deg); }
  to   { opacity: 1; transform: rotate(-1.5deg); }
}
@keyframes tk-row {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes tk-press {
  0%   { transform: none; }
  45%  { transform: scale(.93); }
  100% { transform: none; background: linear-gradient(100deg, var(--teal), var(--cyan)); color: #06121d; border-color: transparent; }
}
@keyframes tk-stamp {
  from { opacity: 0; transform: scale(2.1) rotate(-22deg); }
  to   { opacity: 1; transform: scale(1) rotate(-10deg); }
}

/* ---- Steps and flow ------------------------------------------------------- */
.st-steps { padding: 0; }
.st-flow { padding: 0; }
.st-flow .step { text-align: left; padding: 22px; }
.st-flow .step h3 { font-size: 15px; font-weight: 600; margin-top: 10px; }
.st-flow .step p { font-size: 13px; line-height: 1.6; margin-top: 6px; }
.st-note { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 14px; color: var(--muted); }

/* ---- Requirements + price ------------------------------------------------- */
.st-req { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.st-list { margin-top: 22px; padding: 0; }
.st-list .li { margin-top: 20px; }
.st-list .li > div b { display: block; font-size: 16px; }
.st-list .li > div span { display: block; margin-top: 3px; }
.st-list a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.st-plan {
  border: 1px solid var(--gold); border-radius: 22px; padding: 34px;
  background: linear-gradient(160deg, rgba(212, 175, 106, .1), rgba(0, 212, 255, .05));
}
.st-plan-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.st-price { font-family: var(--serif); font-size: 64px; font-weight: 600; line-height: 1; margin-top: 14px; }
.st-per { color: var(--muted); font-size: 15px; margin-top: 6px; }
.st-plan ul { margin-top: 22px; padding: 0; }
.st-plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #cdd8ea; padding: 9px 0; border-top: 1px solid rgba(158, 171, 194, .14); }
.st-plan .ck { color: var(--cyan); flex: none; margin-top: 2px; line-height: 0; }
.st-list .ck { line-height: 0; }

/* ---- FAQ ------------------------------------------------------------------ */
.st-faq { max-width: 780px; }
.st-faq details { border-top: 1px solid rgba(212, 175, 106, .22); }
.st-faq details:last-child { border-bottom: 1px solid rgba(212, 175, 106, .22); }
.st-faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 2px; font-family: var(--serif); font-size: 22px; font-weight: 600;
}
.st-faq summary::-webkit-details-marker { display: none; }
.st-faq summary::after { content: "+"; font-family: var(--mono); font-size: 20px; color: var(--gold); transition: transform .2s; }
.st-faq details[open] summary::after { transform: rotate(45deg); }
.st-faq summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }
.st-faq p { color: var(--muted); font-size: 15px; line-height: 1.7; padding: 0 2px 22px; max-width: 680px; }

.st-mail { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 920px) {
  .st-req { grid-template-columns: 1fr; gap: 40px; }
  .st-stage { padding-top: 0; }
}
@media (max-width: 560px) {
  .st-ctas .st-btn { flex: 1 1 auto; }
  .ticket { padding: 20px 18px 18px; }
  .tk-kind { font-size: 21px; }
  .tk-actions span { font-size: 11px; }
  /* Narrow ticket: the stamp would cover the collector line, so it drops into
     a wider gap above the tear line. */
  .ticket { --notch: 139px; }
  .tk-rows { margin-top: 60px; }
  .tk-stamp { right: 10px; top: 88px; font-size: 15px; }
  .st-price { font-size: 54px; }
  .st-plan { padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ticket, .tk-row, .tk-totals, .tk-actions, .tk-stamp { animation: none; }
  .tk-accept { animation: none; background: linear-gradient(100deg, var(--teal), var(--cyan)); color: #06121d; border-color: transparent; }
}