/* ============================================================
   PRICE NINJA — the SERP's skin.

   Loaded next to core/css/serp.css, which holds the structure and reads every
   colour, font and radius from the tokens below. Also serves My Best Shopping
   List: both run themes.base.
   ============================================================ */

/* Brand tokens. This file cannot assume style.css has defined them: base.html only
   emits style.css when `css_site.site.name == "Price Ninja"`, which is false in
   production, so on /serp every var(--pn-*) would resolve to nothing. */
:root {
  --pn-blu:           #1D51BF;
  --pn-blu-60:        #6A8AF4;
  --pn-blu-80:        #B6C4FA;
  --pn-blu-90:        #DCE1FC;
  --pn-blu-scuro:     #163DA0;
  --pn-navy:          #051747;
  --pn-success:       #0DBD79;
  --pn-sfondo-pagina: #F4F5F8;
  --pn-raggio-md:     12px;
  --pn-raggio-lg:     16px;
  --pn-raggio-xl:     24px;
  --pn-font-testo:    'Inter', system-ui, -apple-system, sans-serif;
  --pn-font-titoli:   'Zalando Sans', 'Inter', system-ui, -apple-system, sans-serif;
}

/* What the structure reads. --testa-h is 0 because this header is position:static
   and scrolls away; the mockup inherited a sticky one from UnBox Labs. */
.serp-pagina {
  --card:               #fff;
  --greige:             var(--pn-sfondo-pagina);
  --superficie:         #EEF0FE;
  --divisore:           var(--pn-blu-90);
  --testo:              var(--pn-navy);
  --testo-2:            #353333;
  --tenue:              #5B6480;      /* 5.38:1 on the page background */
  --arancio:            var(--pn-blu);
  --azione:             var(--pn-blu);
  --azione-hover:       #2563EB;
  --azione-scuro:       var(--pn-blu-scuro);
  --azione-tenue:       #EEF0FE;
  --prezzo:             #2563EB;
  --etichetta:          #fff;
  --verde:              #0B7F50;      /* the theme green, #0DBD79, is 2.45:1 and cannot carry text */
  --rosso:              #C5221F;
  --ombra:              5, 23, 71;
  --ombra-azione:       29, 81, 191;
  --anello-fuoco:       29, 81, 191;
  --accento:            #EA4600;
  --bordo-tenue:        var(--pn-blu-90);
  --fondo-tenue:        #FBFCFF;
  --bordo-controllo:    #CFD8F5;
  --bordo-chip-attivo:  #CBD8F8;
  --chip-attivo:        238, 240, 254;
  --voce-hover:         238, 240, 254;
  --barra-attiva:       #C3D2F7;
  --barrato:            #5B6480;
  --fondo-sconto:       #E6F7EF;
  --separatore:         #B9C5EC;
  --r-xl:               var(--pn-raggio-xl);
  --r-lg:               var(--pn-raggio-lg);
  --r-md:               var(--pn-raggio-md);
  --pill:               100px;
  --testa-h:            0px;
  --titoli:             var(--pn-font-titoli);
  --testo-font:         var(--pn-font-testo);
}

/* Zalando Sans ships only in 700/800: at 500 it falls back or fakes the weight. */
.serp-pagina h1, .serp-pagina h2, .serp-pagina h3 {font-weight:700}
.serp-pagina .scheda {border:1px solid var(--divisore)}
@media (hover:hover) {
  .serp-pagina .scheda:hover {transform:none;border-color:var(--azione-piena,#1D51BF);
  box-shadow:0 2px 4px rgba(29,81,191,.10),0 16px 34px rgba(29,81,191,.14)}
}
.serp-pagina .azione {border-radius:var(--pill)}
.serp-pagina .applica {border-radius:var(--pill)}
@keyframes pn-shuriken {
  0%{transform:rotate(0deg);color:#fff}
  30%{transform:rotate(150deg);color:#FFD1B0}
  55%{transform:rotate(400deg);color:var(--accento,#EA4600)}
  78%{transform:rotate(830deg);color:#FF9457}
  100%{transform:rotate(1440deg);color:#fff}
}
.serp-pagina .btn-shuriken {position:absolute;right:18px;top:50%;margin-top:-9px;
  width:26px;height:19px;flex:0 0 auto;color:#fff;pointer-events:none;
  animation:pn-shuriken 3.2s cubic-bezier(.68,-.4,.27,1.4) infinite}
.serp-pagina .applica {position:relative;padding-right:46px}
.serp-pagina .applica .btn-shuriken {right:18px;width:24px;height:17px;margin-top:-8px}
@media (max-width:599px) {
  .serp-pagina .lista:not(.tabella) {grid-template-columns:1fr;gap:12px;padding-top:14px}
  .serp-pagina .lista:not(.tabella) .scheda {display:flex;flex-direction:column;gap:6px;
    padding:10px 12px 14px;transform:none}
  .serp-pagina .lista:not(.tabella) .vetrina {aspect-ratio:auto;height:clamp(160px,48vw,220px);
    padding:0;align-self:stretch}
  .serp-pagina .lista:not(.tabella) .nome {padding-right:34px;min-height:0;font-size:15px}
  .serp-pagina .lista:not(.tabella) .soldi {margin-top:1px}
  .serp-pagina .lista:not(.tabella) .cifra {font-size:23px}
  .serp-pagina .lista:not(.tabella) .meta {font-size:12.5px}
}
@media (prefers-reduced-motion:reduce) {
  .serp-pagina .btn-shuriken {animation:none !important}
}

/* The sort control's chevron: a data URI cannot read a token, so the declaration
   lives with the skin. */
.serp-pagina .ordina select {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23353333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* The page ground. It cannot live in the structure with the other tokens: they are
   declared on .serp-pagina, and body is its parent, so the variable is out of scope
   there.
 */
body:has(.serp-pagina) { background: var(--pn-sfondo-pagina); }

/* Same reasoning as the UnBox Labs skin: the price should not share the title's
   weight. Zalando Sans ships 700/800, so 700 is a real face here. */
.serp-pagina .cifra { font-weight: 700; letter-spacing: -.01em; }

/* The struck price, drawn the way the product page draws it (generic-product-page-v5):
   a tapered stroke across the number with the shuriken on its tip, rather than a
   text-decoration rule. The number needs room on the right for the star to land in. */
.serp-pagina .barrato { padding-right: 26px; }
.serp-pagina .taglio {
  display: block; position: absolute; left: -4px; top: 50%;
  width: calc(100% - 10px); height: 18px; margin-top: -9px;
  color: var(--accento); pointer-events: none;
}
.serp-pagina .taglio-stella {
  display: block; position: absolute; right: -2px; top: -4px;
  width: 13px; height: 10px; color: var(--accento); pointer-events: none;
}