/* tk-print-studio — Catalogo e scheda prodotto v3.8.0
   Il configuratore smette di essere una prova e diventa il sistema: una
   vetrina, e una pagina per prodotto con URL proprio. */

.tkps-prod {
    --cfg-blu:    #0369a1;
    --cfg-navy:   #0f172a;
    --cfg-verde:  #d6106f;
    --cfg-bordo:  #d9dee5;
    --cfg-grigio: #f4f6f8;
    --cfg-testo:  #1c2530;
    --cfg-tenue:  #6b7785;

    max-width: 1240px;
    margin: 0 auto;
    padding: 24px 20px 60px;
    color: var(--cfg-testo);
    font-size: 15px;
    line-height: 1.5;
}

/* Briciole */
.tkps-prod-briciole {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-bottom: 18px;
    font-size: 13px; color: var(--cfg-tenue);
}
.tkps-prod-briciole a { color: var(--cfg-blu); text-decoration: none; }
.tkps-prod-briciole a:hover { text-decoration: underline; }
.tkps-prod-briciole strong { color: var(--cfg-testo); font-weight: 600; }

/* Testata della scheda */
.tkps-prod-hero {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    padding: 0 0 28px;
    border-bottom: 1px solid var(--cfg-bordo);
    margin-bottom: 8px;
}
.tkps-prod-hero-img {
    background: var(--cfg-grigio);
    border: 1px solid var(--cfg-bordo);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: flex; align-items: center; justify-content: center;
}
.tkps-prod-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tkps-prod-hero-img.tkps-cat-img-disegno { background: #fff; }
.tkps-prod-hero-img.tkps-cat-img-disegno img { object-fit: contain; }
.tkps-prod-hero-emoji { background: var(--cfg-grigio); }
.tkps-prod-hero-emoji span { font-size: 96px; line-height: 1; }
.tkps-prod-hero-testo h1 { margin: 0 0 10px; font-size: 34px; line-height: 1.15; font-weight: 800; color: var(--cfg-navy); }
.tkps-prod-sommario { margin: 0 0 16px; color: var(--cfg-tenue); font-size: 16px; }

.tkps-prod-usp { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; }
.tkps-prod-usp li { position: relative; padding-left: 26px; font-size: 14px; }
.tkps-prod-usp li::before {
    content: "\2713";
    position: absolute; left: 0; top: 0;
    width: 18px; height: 18px;
    background: var(--cfg-blu); color: #fff;
    font-size: 11px; font-weight: 700;
    line-height: 18px; text-align: center;
}
.tkps-prod-da { margin: 0; font-size: 15px; color: var(--cfg-tenue); }
.tkps-prod-da strong { font-size: 26px; color: var(--cfg-navy); font-weight: 800; margin-left: 4px; }

/* Vetrina */
.tkps-cat-titolo { margin: 0 0 20px; font-size: 26px; font-weight: 800; color: var(--cfg-navy); }

/* Le variabili --cfg-* sono definite su .tkps-prod (archivio /stampa/). Quando la
   griglia e usata via shortcode [tkps_catalogo] fuori da quel wrapper (home,
   Elementor) le var mancherebbero e border/background si invaliderebbero: le card
   perderebbero cornice e sfondo. Le ridichiariamo sulla griglia. v3.22.1 */
.tkps-cat-griglia {
    --cfg-blu:    #0369a1;
    --cfg-navy:   #0f172a;
    --cfg-verde:  #d6106f;
    --cfg-bordo:  #d9dee5;
    --cfg-grigio: #f4f6f8;
    --cfg-testo:  #1c2530;
    --cfg-tenue:  #6b7785;
}

.tkps-cat-griglia {
    display: grid;
    grid-template-columns: repeat(var(--tkps-cat-col, 3), minmax(0, 1fr));
    gap: 22px;
}
.tkps-cat-card {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--cfg-bordo);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tkps-cat-card:hover {
    border-color: var(--cfg-blu);
    box-shadow: 0 6px 22px rgba(3, 105, 161, .13);
    transform: translateY(-2px);
}
.tkps-cat-img {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--cfg-grigio);
    border-bottom: 1px solid var(--cfg-bordo);
    overflow: hidden;
}
.tkps-cat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tkps-cat-emoji { font-size: 52px; line-height: 1; }

/* L illustrazione di serie ha il suo sfondo: va mostrata intera, non tagliata. */
.tkps-cat-img-disegno { background: #fff; }
.tkps-cat-img-disegno img { object-fit: contain; }

.tkps-cat-corpo { display: flex; flex-direction: column; gap: 7px; padding: 18px 18px 16px; flex: 1; }
.tkps-cat-nome { font-size: 19px; font-weight: 700; color: var(--cfg-navy); }
.tkps-cat-desc { font-size: 14px; color: var(--cfg-tenue); }
.tkps-cat-meta {
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    font-size: 12px; color: var(--cfg-tenue);
    text-transform: uppercase; letter-spacing: .04em;
}
.tkps-cat-piede {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-top: auto; padding-top: 14px;
    border-top: 1px solid var(--cfg-bordo);
}
.tkps-cat-prezzo { font-size: 22px; font-weight: 800; color: var(--cfg-navy); }
.tkps-cat-prezzo small { font-size: 12px; font-weight: 500; color: var(--cfg-tenue); margin-right: 3px; }
.tkps-cat-prezzo-vuoto { font-size: 15px; font-weight: 600; color: var(--cfg-tenue); }
.tkps-cat-cta { font-size: 14px; font-weight: 700; color: var(--cfg-verde); white-space: nowrap; }

/* Catalogo: testata e come funziona */
.tkps-cat-hero { margin-bottom: 30px; }
.tkps-cat-hero h1 { margin: 0 0 10px; font-size: 36px; font-weight: 800; color: var(--cfg-navy); }
.tkps-cat-hero p { margin: 0; max-width: 760px; font-size: 16px; color: var(--cfg-tenue); }

.tkps-cat-come { margin-top: 48px; padding-top: 34px; border-top: 1px solid var(--cfg-bordo); }
.tkps-cat-come h2 { margin: 0 0 22px; font-size: 24px; font-weight: 800; color: var(--cfg-navy); }
.tkps-cat-passi {
    list-style: none; counter-reset: passo; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px;
}
.tkps-cat-passi li { counter-increment: passo; padding-top: 44px; position: relative; }
.tkps-cat-passi li::before {
    content: counter(passo);
    position: absolute; top: 0; left: 0;
    width: 32px; height: 32px;
    background: var(--cfg-navy); color: #fff;
    font-size: 15px; font-weight: 800;
    line-height: 32px; text-align: center;
}
.tkps-cat-passi strong { display: block; margin-bottom: 5px; font-size: 16px; color: var(--cfg-navy); }
.tkps-cat-passi span { font-size: 14px; color: var(--cfg-tenue); }

/* Modelli e altri prodotti in coda alla scheda */
.tkps-prod-modelli, .tkps-prod-altri { margin-top: 46px; padding-top: 32px; border-top: 1px solid var(--cfg-bordo); }
.tkps-prod-modelli h2, .tkps-prod-altri h2 { margin: 0 0 8px; font-size: 24px; font-weight: 800; color: var(--cfg-navy); }
.tkps-prod-modelli-sub { margin: 0 0 22px; max-width: 720px; color: var(--cfg-tenue); font-size: 15px; }

.tkps-prod-modelli-griglia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tkps-prod-modello { display: block; text-decoration: none; color: inherit; }
.tkps-prod-modello-img {
    display: block;
    aspect-ratio: 3 / 4;
    background: var(--cfg-grigio);
    border: 1px solid var(--cfg-bordo);
    overflow: hidden;
    transition: border-color .15s;
}
.tkps-prod-modello:hover .tkps-prod-modello-img { border-color: var(--cfg-blu); }
.tkps-prod-modello-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tkps-prod-modello-nome { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; }

/* Il configuratore dentro la scheda non ripete il titolo di pagina */
.tkps-prod .tkps-cfg { padding-top: 0; max-width: none; }
.tkps-prod .tkps-cfg-head h2 { font-size: 22px; }

/* Responsive */
@media (max-width: 1024px) {
    .tkps-cat-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tkps-cat-passi   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tkps-prod-modelli-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tkps-prod-hero { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 782px) {
    .tkps-prod { padding: 16px 14px 44px; }
    .tkps-cat-griglia { grid-template-columns: 1fr; gap: 16px; }
    .tkps-cat-passi   { grid-template-columns: 1fr; gap: 18px; }
    .tkps-prod-modelli-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tkps-prod-hero { grid-template-columns: 1fr; gap: 18px; }
    .tkps-prod-hero-testo h1 { font-size: 26px; }
    .tkps-cat-hero h1 { font-size: 27px; }
}