/* ==========================================================================
   GR Theme Kit — i contenuti che il modulo emette sugli hook del core
   --------------------------------------------------------------------------
   Fino alla 1.9 queste regole vivevano solo nel tema gr-hybrid, e il modulo
   emetteva classi che nessun altro tema vestiva. Dalla 1.10.0 il modulo porta
   il proprio foglio, e lo registra solo quando il tema attivo non rende da se'
   questi contenuti (vedi ThemeCapabilities::eTemaLegacy): su gr-hybrid le
   stesse regole le mette gia' il tema, e due copie non servono a niente.

   Classic Minimal: raggi <= 2px, spaziature a scala 4pt, colori via --gr-*
   sempre con ripiego, motion 180ms.

   DENTRO `@layer ps-modules`, e non basta la specificita' bassa. Fino alla
   1.10.0 il foglio stava fuori dai livelli con i suoi `:where()`, convinto
   che un tema che veste queste classi vincesse sempre. Su un tema a livelli
   succede il contrario: una regola fuori livello batte qualunque livello, a
   qualunque specificita'. Su gr-base il filetto chiaro di `.footer__trust`
   copriva quello del piede scuro (misurato su eshopdemo: 1px pieno quasi
   bianco invece di una riga al 12%). Nel livello dei moduli queste regole
   battono i componenti di Hummingbird e perdono contro `gr`, il livello del
   tema. Su un tema senza livelli perdono contro qualunque sua regola: e' cio'
   che il foglio ha sempre voluto.
   ========================================================================== */

@layer ps-modules {

/* Pagamenti accettati, nel riepilogo del checkout */
:where(.gr-checkout-payments) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

:where(.gr-checkout-payments__item) {
  padding: 4px 12px;
  border: 1px solid var(--gr-line, #e6e8ec);
  border-radius: 2px;
  color: var(--gr-ink, #0b1220);
  font-size: 0.75rem;
}

/* Blocco di aiuto nel checkout */
:where(.checkout__help-block) {
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--gr-line, #e6e8ec);
  background: var(--gr-bg, #f7f8fa);
  color: var(--gr-mute, #6b7280);
  font-size: 0.875rem;
}

/* Striscia dei vantaggi in home */
:where(.gr-home-usp-strip) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gr-line, #e6e8ec);
  background: var(--gr-bg, #f7f8fa);
  color: var(--gr-ink, #0b1220);
  font-size: 0.875rem;
}

/* Badge di fiducia nel piede */
:where(.footer__trust) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--gr-line-soft, #eef0f3);
}

:where(.gr-footer-trust) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 40px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.gr-footer-trust__item) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
}

:where(.gr-footer-trust__item) .material-icons {
  flex: 0 0 auto;
  font-size: 1.125rem;
  line-height: 1;
  opacity: 0.7;
}

:where(.gr-footer-trust__label) {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 29.99em) {
  :where(.gr-footer-trust) {
    gap: 12px 24px;
  }
}

/* Logo della marca sulla scheda prodotto */
:where(.gr-brand-logo) {
  margin: 8px 0;
}

:where(.gr-brand-logo__img) {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
}

:where(.gr-brand-logo[data-size="small"]) .gr-brand-logo__img {
  max-width: 60px;
  max-height: 30px;
}

:where(.gr-brand-logo[data-size="medium"]) .gr-brand-logo__img {
  max-width: 120px;
  max-height: 60px;
}

:where(.gr-brand-logo[data-size="large"]) .gr-brand-logo__img {
  max-width: 200px;
  max-height: 100px;
}

}