/* ==========================================================================
   PAINSHOP · PAGINE POLICY
   Spedizioni, rimborsi, privacy, termini, informativa legale, contatti.
   Shopify le stampa con un template suo, bianco: qui diventano nere e rosa
   come il resto del sito. Due agganci, perche' il template puo' cambiare:
   l'attributo data-template su <main> e il contenitore .shopify-policy__.
   ========================================================================== */

:root {
  --ps-pol-bg: #0a0a0a;
  --ps-pol-fg: #f3eff1;
  --ps-pol-dim: rgba(243, 239, 241, 0.62);
  --ps-pol-rosa: #ff7ac2;
  --ps-pol-accent: #e5137e;
  --ps-pol-line: rgba(243, 239, 241, 0.14);
  --ps-pol-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
}

body:has(main[data-template^="policy"]),
body:has(.shopify-policy__container) {
  background: var(--ps-pol-bg);
}

main[data-template^="policy"],
main:has(.shopify-policy__container) {
  --color-background: var(--ps-pol-bg);
  --color-foreground: var(--ps-pol-fg);
  --color-foreground-heading: var(--ps-pol-rosa);
  --color-foreground-rgb: 243 239 241;
  --color-link: var(--ps-pol-rosa);
  --color-border: var(--ps-pol-line);

  background: var(--ps-pol-bg);
  color: var(--ps-pol-fg);
  min-height: 72vh;
  padding: 56px 20px 96px;

  .section,
  .section-background,
  [class*="color-scheme"] {
    background: transparent;
  }

  .shopify-policy__container {
    max-width: 760px;
    margin-inline: auto;
    padding: 0;
  }

  /* ------------------------------------------------------------- titoli */

  h1,
  h2,
  h3,
  h4,
  .shopify-policy__title h1 {
    color: var(--ps-pol-rosa);
    font-family: var(--ps-pol-mono);
    text-transform: uppercase;
  }

  h1,
  .shopify-policy__title h1 {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.3em;
    line-height: 1.6;
    text-align: left;
    padding-bottom: 18px;
    margin: 0 0 34px;
    border-bottom: 1px solid var(--ps-pol-line);
  }

  h2,
  h3,
  h4 {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.22em;
    line-height: 1.7;
    margin: 34px 0 10px;
  }

  /* -------------------------------------------------------------- testo */

  p,
  li,
  span,
  div,
  td,
  th {
    color: var(--ps-pol-fg);
  }

  p,
  li {
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.01em;
  }

  p { margin: 0 0 14px; }

  ul,
  ol {
    margin: 0 0 18px;
    padding-left: 18px;
  }

  li { margin-bottom: 6px; }

  /* il grassetto resta grassetto ma non diventa rosa: i testi incollati da
     Word hanno interi paragrafi dentro a <b>, e diventerebbe tutto rosa */
  strong,
  b {
    color: inherit;
    font-weight: 600;
  }

  hr {
    border: 0;
    border-top: 1px solid var(--ps-pol-line);
    margin: 28px 0;
  }

  a,
  a:link,
  a:visited {
    color: var(--ps-pol-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }

  a:hover { color: var(--ps-pol-rosa); }

  /* Word e gli editor incollano colori e sfondi propri: nero su nero
     sparirebbe, quindi qui vengono annullati */
  [style*="color"],
  font[color] {
    color: inherit !important;
  }

  [style*="background"] {
    background: transparent !important;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 18px;
    font-size: 13px;
  }

  td,
  th {
    border: 1px solid var(--ps-pol-line);
    padding: 8px 10px;
    text-align: left;
  }

  th { color: var(--ps-pol-rosa); }
}

@media (max-width: 640px) {
  main[data-template^="policy"],
  main:has(.shopify-policy__container) {
    padding: 36px 16px 72px;

    h1,
    .shopify-policy__title h1 {
      letter-spacing: 0.22em;
      margin-bottom: 26px;
    }
  }
}