/* Grafica Magazine — Regala: pagina Regala, pagina Riscatta, riquadro del regalo nel carrello.
   Stesse regole del sito: Arsenica per titoli e cifre, Aquawax per il testo, stile etichetta solo per etichette brevi,
   angoli vivi, niente filetti come separatori (i campi sono già linee), pulsante nero → giallo. */

.gmrg, .gmrg *, .gmrg *::before, .gmrg *::after { box-sizing: border-box; }
.gmrg {
  --gmrg-nero: var(--nero, #0A0A0A);
  --gmrg-giallo: var(--giallo, #FAEC04);
  --gmrg-carta: var(--carta, #F4F4F0);
  --gmrg-bianco: var(--bianco, #FFFFFF);
  --gmrg-grigio: var(--grigio, #5E5E58);
  --gmrg-errore: #B3261E;
  max-width: 720px;
  margin: 0; /* allineato a sinistra come il resto del sito (2026-11-03) */
  font-family: Aquawax, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gmrg-nero);
}

/* ---------- pagine Regala e Riscatta (modello semplice del tema: .page-header h1 + .page-content) ---------- */
/* margini come le altre pagine (2026-11-03, richiesta dell'utente: prima colonna centrata larga 720px, quindi margini di 90px su
   iPad in verticale e 400px su computer contro i 40px del resto del sito): pagina a tutta larghezza con 40px ai lati (20 su
   telefono), contenuto largo al massimo 720px. 2026-11-05 (richiesta dell'utente): la colonna torna centrata nella pagina */
body.gmrg-pagina main.site-main { max-width: none !important; width: 100%; margin-left: 0 !important; margin-right: 0 !important; padding: 72px 40px 120px !important; }
body.gmrg-pagina .page-header, body.gmrg-pagina .page-content { max-width: 720px; margin-left: auto; margin-right: auto; }
body.gmrg-pagina .page-header { margin-top: 0; margin-bottom: 20px; }
body.gmrg-pagina .page-header .entry-title { margin: 0; font: 400 clamp(40px, 6vw, 64px)/1 Arsenica, Georgia, serif; letter-spacing: 0; text-transform: none; color: var(--nero, #0A0A0A); text-wrap: balance; }
.gmrg.gmrg-intro { margin: 0 0 56px; font-size: 18px; line-height: 1.5; }
@media (max-width: 767px) {
  body.gmrg-pagina main.site-main { padding: 64px 20px !important; } /* spaziature standard su telefono: sp-64 sopra e sotto (2026-11-03) */
  .gmrg.gmrg-intro { margin-bottom: 40px; font-size: 16px; }
}

/* ---------- etichette e testo ---------- */
.gmrg .gmrg-etichetta { display: block; padding: 0; margin: 0 0 16px; font: 300 12px/18px Aquawax, Arial, sans-serif; letter-spacing: 4px; text-transform: uppercase; }
.gmrg fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.gmrg-blocco + .gmrg-blocco { margin-top: 48px; }
.gmrg .gmrg-nota { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--gmrg-grigio); }

/* ---------- scelte (riquadri con radio) ---------- */
.gmrg-scelte { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gmrg-scelta { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 22px; background: var(--gmrg-bianco); border: 1.5px solid rgba(10,10,10,.18); border-radius: 0; cursor: pointer; transition: border-color .2s, background-color .2s; }
.gmrg-scelta:hover { border-color: var(--gmrg-nero); }
.gmrg-scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.gmrg-scelta:has(input:checked) { border-color: var(--gmrg-nero); background: var(--gmrg-giallo); }
.gmrg-scelta:has(input:focus-visible) { outline: 2px solid var(--gmrg-nero); outline-offset: 2px; }
.gmrg-scelta__testa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gmrg-scelta__titolo { font: 400 22px/1.15 Arsenica, Georgia, serif; }
.gmrg-scelta__prezzo { font: 400 20px/1 Arsenica, Georgia, serif; white-space: nowrap; }
.gmrg-scelta__testo { font-size: 14px; line-height: 20px; }

/* ---------- quanti numeri: − valore + (come le quantità del carrello) ---------- */
.gmrg-quanti { display: flex; align-items: center; gap: 16px; padding: 6px 0 10px; border-bottom: 1.5px solid var(--gmrg-nero); }
.gmrg-quanti__valore { flex: 1 1 auto; font: 400 20px/1.3 Arsenica, Georgia, serif; text-align: center; font-variant-numeric: tabular-nums; }
.gmrg .gmrg-quanti__btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin: 0;
  font: 400 20px/1 Aquawax, Arial, sans-serif; color: var(--gmrg-nero); background: transparent; border: 1.5px solid var(--gmrg-nero); border-radius: 0 !important; box-shadow: none;
  transition: background-color .25s cubic-bezier(.16,1,.3,1), color .25s cubic-bezier(.16,1,.3,1); }
.gmrg .gmrg-quanti__btn:hover:not(:disabled), .gmrg .gmrg-quanti__btn:focus-visible { background: var(--gmrg-nero); color: var(--gmrg-giallo); }
.gmrg .gmrg-quanti__btn:disabled, .gmrg .gmrg-quanti__btn:disabled:hover { opacity: .25; background: transparent !important; color: var(--gmrg-nero) !important; border-color: var(--gmrg-nero) !important; }

/* ---------- campi ---------- */
.gmrg-numeri { margin-top: 24px; }
.gmrg-campi { display: grid; gap: 28px; margin-top: 32px; }
.gmrg-campo { display: block; }
.gmrg-campo__etichetta { display: block; margin-bottom: 6px; font-size: 16px; line-height: 22px; }
.gmrg-facoltativo { color: var(--gmrg-grigio); font-size: 14px; }
.gmrg-campo__aiuto { display: flex; justify-content: space-between; gap: 16px; margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--gmrg-grigio); }
.gmrg-contatore { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gmrg input[type="text"], .gmrg input[type="email"], .gmrg input[type="date"], .gmrg select, .gmrg textarea {
  display: block; width: 100%; min-height: 48px; margin: 0; padding: 10px 0;
  font: 400 16px/1.4 Aquawax, Arial, sans-serif; color: var(--gmrg-nero);
  background: transparent; border: 0; border-bottom: 1.5px solid var(--gmrg-nero); border-radius: 0; box-shadow: none;
  -webkit-appearance: none; appearance: none;
}
.gmrg textarea { resize: vertical; min-height: 104px; }
.gmrg select { padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--gmrg-nero) 50%), linear-gradient(135deg, var(--gmrg-nero) 50%, transparent 50%); background-position: calc(100% - 13px) 50%, calc(100% - 7px) 50%; background-size: 6px 6px; background-repeat: no-repeat; cursor: pointer; }
.gmrg input:focus, .gmrg select:focus, .gmrg textarea:focus { outline: none; border-bottom-width: 2.5px; }
.gmrg input:focus-visible, .gmrg select:focus-visible, .gmrg textarea:focus-visible { outline: 2px solid var(--gmrg-nero); outline-offset: 4px; }
.gmrg [aria-invalid="true"] { border-bottom-color: var(--gmrg-errore); }
.gmrg .gmrg-errore { margin: 6px 0 0; font-size: 14px; line-height: 20px; color: var(--gmrg-errore); }
.gmrg .gmrg-errore--generale { margin: 0 0 24px; padding: 12px 16px; background: var(--gmrg-bianco); border-left: 4px solid var(--gmrg-errore); }
.gmrg [hidden], .gmrg-regala [data-gmrg-nascosto] { display: none !important; }

/* ---------- totale e pulsante ---------- */
.gmrg-azione { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 48px; }
.gmrg-totale { font: 400 36px/1 Arsenica, Georgia, serif; }
.gmrg .gmrg-btn, .gmrg a.gmrg-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px;
  font: 400 12px/1.5 Aquawax, Arial, sans-serif; letter-spacing: 4px; text-transform: uppercase; text-decoration: none !important;
  color: var(--gmrg-bianco); background: var(--gmrg-nero); border: 2px solid var(--gmrg-nero); border-radius: 0 !important; box-shadow: none; cursor: pointer;
  transition: background-color .25s cubic-bezier(.16,1,.3,1), color .25s cubic-bezier(.16,1,.3,1), border-color .25s cubic-bezier(.16,1,.3,1);
}
.gmrg .gmrg-btn:hover, .gmrg .gmrg-btn:focus-visible { background: var(--gmrg-giallo); border-color: var(--gmrg-giallo); color: var(--gmrg-nero); }

/* ---------- come funziona ---------- */
.gmrg-come { list-style: none; padding: 0; margin: 72px auto 0; display: grid; gap: 14px; }
.gmrg-come li { display: flex; gap: 20px; align-items: baseline; margin: 0; }
.gmrg-come__n { flex: 0 0 auto; min-width: 24px; font: 300 12px/18px Aquawax, Arial, sans-serif; letter-spacing: 4px; opacity: .5; }
.gmrg-come a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- riscatta ---------- */
.gmrg-riscatta { max-width: 520px; margin-left: 0; }
body.gmrg-pagina .gmrg { margin-left: 0; }
form.gmrg-riscatta { display: grid; gap: 28px; }
form.gmrg-riscatta input[type="text"] { font: 400 24px/1.3 Arsenica, Georgia, serif; letter-spacing: 1px; text-transform: uppercase; }
form.gmrg-riscatta input[type="text"]::placeholder { color: rgba(10,10,10,.3); }
form.gmrg-riscatta .gmrg-btn { justify-self: start; }
.gmrg-esito { padding: 28px 28px 32px; background: var(--gmrg-giallo); }
.gmrg-esito__testo { margin: 0 0 24px; font: 400 22px/1.3 Arsenica, Georgia, serif; }
.gmrg .gmrg-esito__accedi { margin: 20px 0 0; font-size: 14px; line-height: 20px; }
.gmrg-esito .gmrg-esito__testo a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.gmrg .gmrg-esito__elenco { margin: -8px 0 16px; padding-left: 20px; font-size: 16px; line-height: 24px; }
.gmrg .gmrg-esito__elenco li { margin: 4px 0; }
.gmrg .gmrg-esito__riga { margin: 0 0 24px; font-size: 16px; line-height: 24px; }
.gmrg .gmrg-esito__testo + .gmrg-esito__riga { margin-top: -12px; }
.gmrg-esito__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.gmrg a.gmrg-link { color: var(--gmrg-nero); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.gmrg-esito__accedi a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- riquadro del regalo nel carrello e nel pagamento ---------- */
.gmrg-carrello { max-width: 1140px; margin: 0 auto 32px; padding: 20px 24px; background: var(--gmrg-giallo); }
.gmrg-carrello p { margin: 0; }
.gmrg-carrello p + p { margin-top: 4px; }
.gmrg-carrello__titolo { font: 400 20px/1.3 Arsenica, Georgia, serif; }
.gmrg-carrello--manca { background: var(--gmrg-bianco); border-left: 4px solid var(--gmrg-nero); }
.gmrg-carrello a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.gmrg-codice-ordine { margin: 6px 0 0; font-size: 14px; }
body.gmrg-con-regalo .gm-bundle-offerta .gm-bundle__testa,
body.gmrg-con-regalo .gm-bundle-offerta .gm-bundle__barra { display: none !important; }
body.gmrg-con-regalo .gm-bundle-offerta .gm-bundle__sugg { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
/* righe del regalo sotto il nome ("Per: Luca", "Modalità di recapito: a mano"): frasi, quindi testo normale e non stile etichetta */
body .wc-block-components-product-details .wc-block-components-product-details__per,
body .wc-block-components-product-details .wc-block-components-product-details__per *,
body .wc-block-components-product-details .wc-block-components-product-details__modalit-di-recapito,
body .wc-block-components-product-details .wc-block-components-product-details__modalit-di-recapito * {
  font-family: Aquawax, Arial, sans-serif !important; font-size: 14px !important; line-height: 20px !important; font-weight: 400 !important;
  letter-spacing: 0 !important; text-transform: none !important; color: var(--grigio, #5E5E58) !important;
}
body .wc-block-components-product-details__per,
body .wc-block-components-product-details__modalit-di-recapito { display: block !important; }
/* WooCommerce toglie la "à" dal nome della classe (__modalit-di-recapito) e mette " / " tra le righe: qui vanno a capo, la barra non serve */
body .wc-block-components-product-details__per > span[aria-hidden="true"] { display: none !important; }

@media (max-width: 767px) {
  .gmrg-scelte { grid-template-columns: 1fr; }
  .gmrg-blocco + .gmrg-blocco { margin-top: 40px; }
  .gmrg-azione { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 40px; }
  .gmrg-totale { font-size: 32px; }
  .gmrg .gmrg-btn { width: 100%; letter-spacing: 3px; }
  .gmrg-come { margin-top: 56px; }
  .gmrg-carrello { padding: 16px 20px; margin-bottom: 24px; }
}

/* ---------- niente colori del tema sui pulsanti (2026-10-29) ----------
   Il reset del tema Hello colora di magenta (#c36) i pulsanti in :focus e :active: qui ogni stato
   resta quello del sito (nero; giallo solo al passaggio del mouse o con la tastiera). */
.gmrg .gmrg-btn:is(:focus, :active):not(:hover):not(:focus-visible) { background: var(--gmrg-nero); border-color: var(--gmrg-nero); color: var(--gmrg-bianco); }
.gmrg .gmrg-quanti__btn:is(:focus, :active):not(:hover):not(:focus-visible):not(:disabled) { background: transparent; border-color: var(--gmrg-nero); color: var(--gmrg-nero); }
.gmrg :is(button, [type="submit"], [type="button"]) { border-radius: 0; }
.gmrg a:not(.gmrg-btn):is(:hover, :active, :focus) { color: inherit; }