/* ==========================================================================
PROF SICUREZZA — Design System (single source of truth)
--------------------------------------------------------------------------
Tipografia: Inter Tight (UI/body) + IBM Plex Mono (codici, eyebrow)
Tono: neutro caldo, accent blu professionale, accent caldi su offerte
Path: wp-content/mu-plugins/prof-sicurezza/assets/prof-sicurezza.css
--------------------------------------------------------------------------
Indice:
1. TOKENS variabili CSS (colori, raggi, ombre)
2. RESET / BASE reset, html/body, link/button
3. UTILITIES .container, .mono, .imgbg, .icon
4. BUTTONS .btn, .btn-primary, .btn-secondary, .btn-dark, ...
5. BADGES / CHIPS .badge, .chip, .filter-chip
6. EYEBROW / HEAD .eyebrow-mono, .section-head
7. TOPBAR / HEADER .topbar, header.main, .search, .cart-btn
8. NAV nav.cats
9. HERO .hero-wrap, .hero-overlay, .hero-watermark
10. USP STRIP .usps
11. CATEGORIE .cats-feat, .cats-grid, .cat-feat, .cat-card
12. DEAL OF DAY .deal, .countdown
13. PRODUCT CARD .product, .products
14. BANNER STRIP .banner-strip, .banner
15. BRANDS STRIP .brands
16. RECENT VIEWED .recent-strip, .recent
17. FOOTER footer, .footer-grid
18. STICKY HELP .sticky-help
19. PHASE-2 STUBS breadcrumb, gallery, pricebox, filters (PDP/Cat)
20. RESPONSIVE 3 breakpoints desktop-first
========================================================================== */
/* ==========================================================================
1. TOKENS
========================================================================== */
:root{
/* Backgrounds */
--bg: oklch(0.985 0.004 80);
--bg-2: oklch(0.965 0.006 80);
--bg-3: oklch(0.935 0.008 80);
/* Ink (testo) */
--ink: oklch(0.20 0.015 250);
--ink-2: oklch(0.42 0.012 250);
--ink-3: oklch(0.58 0.010 250);
/* Lines */
--line: oklch(0.90 0.008 250);
--line-2: oklch(0.84 0.010 250);
/* Brand — Professione Sicurezza (logo: rosso #C23026, navy #1B2152, cyan #00AEEF) */
--navy: oklch(0.274 0.089 273.7); /* #1B2152 — struttura, titoli, prezzi */
--brand: oklch(0.274 0.089 273.7); /* navy brand #1B2152 — link, accenti, etichette */
--brand-ink: oklch(0.40 0.11 268); /* navy più chiaro — hover testo/link (visibile) */
--brand-soft:oklch(0.95 0.03 273.7); /* navy tenue — sfondi soft */
--action: oklch(0.538 0.184 28.8); /* rosso brand #C23026 — pulsanti / CTA */
--action-ink:oklch(0.46 0.17 29); /* rosso scuro #A21C14 — hover CTA */
/* Status */
--ok: oklch(0.62 0.13 150);
--ok-soft: oklch(0.95 0.04 150);
--warn: oklch(0.72 0.15 70);
--warn-soft: oklch(0.96 0.04 80);
--danger: oklch(0.538 0.184 28.8); /* allineato al rosso brand */
--danger-soft:oklch(0.95 0.04 29);
/* Radius */
--radius: 6px;
--radius-lg: 10px;
--radius-pill:99px;
/* Shadows */
--shadow-sm: 0 1px 0 oklch(0.85 0.01 250 / 0.5), 0 1px 2px oklch(0.20 0.01 250 / 0.04);
--shadow-md: 0 1px 2px oklch(0.20 0.01 250 / 0.05), 0 8px 24px oklch(0.20 0.01 250 / 0.06);
--shadow-lg: 0 4px 12px oklch(0.20 0.01 250 / 0.06), 0 20px 50px oklch(0.20 0.01 250 / 0.10);
/* Layout */
--container-max: 1320px;
--container-pad: 32px;
/* Sticky offsets (header height per anchor scroll) */
--header-h: 78px;
--topbar-h: 38px;
--nav-h: 46px;
}
/* ==========================================================================
2. RESET / BASE
========================================================================== */
.ps-scope *,
.ps-scope *::before,
.ps-scope *::after { box-sizing:border-box; }
.ps-scope { margin:0; padding:0; }
/* Body-level styling: applicato via class su dal mu-plugin */
body.prof-sicurezza{
background:var(--bg);
color:var(--ink);
font-family:'Inter Tight', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
font-size:15px;
line-height:1.45;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
body.prof-sicurezza a{ color:inherit; text-decoration:none; }
body.prof-sicurezza button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
body.prof-sicurezza img{ max-width:100%; height:auto; display:block; }
body.prof-sicurezza ul, body.prof-sicurezza ol{ list-style:none; padding:0; margin:0; }
/* ==========================================================================
3. UTILITIES
========================================================================== */
.mono{ font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; }
.container{
max-width:var(--container-max);
margin:0 auto;
padding:0 var(--container-pad);
}
.imgbg{
background-size:cover;
background-position:center;
background-repeat:no-repeat;
font-size:0;
color:transparent;
border:1px solid var(--line);
}
.imgbg.no-border{ border:none; }
.placeholder{
background:repeating-linear-gradient(135deg,
oklch(0.92 0.01 250) 0 8px,
oklch(0.95 0.008 250) 8px 16px);
border:1px solid var(--line);
display:flex; align-items:center; justify-content:center;
color:var(--ink-3);
font-family:'IBM Plex Mono', monospace;
font-size:11px;
text-align:center;
padding:8px;
}
/* Icone (SVG inline) */
.icon{
width:18px; height:18px;
stroke:currentColor; stroke-width:1.6;
fill:none; stroke-linecap:round; stroke-linejoin:round;
flex-shrink:0;
}
.icon-sm{ width:14px; height:14px; }
.icon-lg{ width:22px; height:22px; }
.icon-xl{ width:28px; height:28px; }
/* Section spacing */
.section{ padding:48px 0; }
.section-tight{ padding:24px 0; }
.section-flush-top{ padding-top:0; }
.section-flush-bottom{ padding-bottom:0; }
/* ==========================================================================
4. BUTTONS
========================================================================== */
.btn{
display:inline-flex; align-items:center; gap:8px;
padding:11px 18px;
border-radius:var(--radius);
font-weight:600; font-size:14px;
border:1px solid transparent;
transition:all .15s ease;
white-space:nowrap;
cursor:pointer;
font-family:inherit;
}
.btn-primary{ background:var(--action); color:#fff; }
.btn-primary:hover{ background:var(--action-ink); }
.btn-secondary{ background:#fff; color:var(--ink); border-color:var(--line-2); }
.btn-secondary:hover{ border-color:var(--ink-2); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:oklch(0.30 0.02 250); }
.btn-ghost{ background:transparent; color:var(--ink); padding-left:0; padding-right:0; }
.btn-ghost:hover{ color:var(--brand); }
.btn-ghost-light{
color:#fff; padding:14px 4px;
font-weight:600; font-size:14px;
display:inline-flex; align-items:center; gap:8px;
border-bottom:1px solid oklch(1 0 0 / 0.3);
}
.btn-ghost-light:hover{ border-bottom-color:#fff; }
.btn-lg{ padding:14px 22px; font-size:15px; }
.btn-sm{ padding:7px 12px; font-size:12.5px; }
.btn-block{ display:flex; width:100%; justify-content:center; }
/* ==========================================================================
5. BADGES / CHIPS
========================================================================== */
.badge{
font-size:10px; font-weight:700;
letter-spacing:0.04em; text-transform:uppercase;
padding:3px 7px; border-radius:4px;
display:inline-flex; align-items:center; gap:4px;
}
.badge-top { background:var(--ink); color:#fff; }
.badge-disc { background:var(--danger); color:#fff; }
.badge-stock { background:var(--ok); color:#fff; }
.badge-new { background:var(--warn); color:#fff; }
.badge-soft { background:var(--brand-soft); color:var(--brand-ink); font-weight:600; }
.badge-soft-ok { background:var(--ok-soft); color:oklch(0.40 0.12 150); font-weight:600; }
.chip{
padding:7px 13px; border-radius:99px;
font-size:12.5px; font-weight:500;
background:#fff; border:1px solid var(--line);
color:var(--ink-2);
display:inline-flex; align-items:center; gap:6px;
transition:all .15s ease;
}
.chip:hover{ border-color:var(--ink-2); color:var(--ink); }
.chip.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
/* Variante "filter chip" usata sopra Bestseller */
.filter-bar{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.filter-chip{
padding:7px 13px; border-radius:99px;
font-size:12.5px; font-weight:500;
background:#fff; border:1px solid var(--line);
color:var(--ink-2);
cursor:pointer; transition:all .15s ease;
}
.filter-chip.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.filter-chip:hover:not(.on){ border-color:var(--ink-2); color:var(--ink); }
/* ==========================================================================
6. EYEBROW / SECTION HEAD
========================================================================== */
.eyebrow-mono{
font-family:'IBM Plex Mono', monospace;
font-size:11px;
color:var(--brand);
letter-spacing:0.12em;
text-transform:uppercase;
}
.eyebrow-mono.muted{ color:var(--ink-3); }
.section-head{
display:flex; align-items:end; justify-content:space-between;
margin-bottom:24px; gap:24px;
}
.section-head .lbl{
font-family:'IBM Plex Mono', monospace;
font-size:11px; color:var(--brand);
letter-spacing:0.12em; text-transform:uppercase;
margin-bottom:8px;
}
.section-head h2{
font-size:28px; line-height:1.1;
letter-spacing:-0.02em; font-weight:700;
}
.section-head .link{
font-size:13px; color:var(--brand);
font-weight:600;
display:flex; align-items:center; gap:6px;
}
/* ==========================================================================
7. TOPBAR / HEADER
========================================================================== */
.topbar{
background:var(--ink);
color:oklch(0.92 0.005 80);
font-size:12.5px;
}
.topbar .row{
display:flex; justify-content:space-between; align-items:center;
height:var(--topbar-h); gap:24px;
}
.topbar ul{ display:flex; gap:22px; list-style:none; }
.topbar li{
display:flex; align-items:center; gap:7px;
color:rgba(255,255,255,0.88);
font-weight:500;
}
.topbar li .icon{ stroke:rgba(255,255,255,0.70); }
.topbar .right{
display:flex; gap:18px; align-items:center;
color:rgba(255,255,255,0.85);
font-weight:500;
}
.topbar .right a{ color:rgba(255,255,255,0.85); }
.topbar .right a:hover{ color:#fff; }
.topbar .sep{
width:1px; height:14px;
background:rgba(255,255,255,0.22);
}
header.main{
background:#fff;
border-bottom:1px solid var(--line);
position:sticky; top:0; z-index:100; /* sopra il mega menu (z:60) — serve perché la search dropdown sta dentro */
}
header.main .row{
display:grid;
grid-template-columns:auto 1fr auto;
gap:32px; align-items:center;
height:var(--header-h);
}
.logo{
display:flex; align-items:center; gap:10px;
font-weight:800; font-size:20px;
letter-spacing:-0.02em;
}
.logo-mark{
width:38px; height:38px;
border-radius:8px;
background:var(--ink); color:#fff;
display:grid; place-items:center;
}
.logo-mark svg{ stroke:var(--brand); stroke-width:2; }
.logo small{
display:block; font-size:10px; font-weight:500;
letter-spacing:0.14em; color:var(--ink-3);
text-transform:uppercase; line-height:1;
}
.search{
display:flex; align-items:center; gap:10px;
background:var(--bg-2);
border:1px solid var(--line);
border-radius:var(--radius);
padding:0 14px;
height:46px;
}
.search input,
.search .search-field{ /* WC native form */
flex:1; border:none; background:none; outline:none;
font:inherit; color:var(--ink); height:100%;
}
.search input::placeholder,
.search .search-field::placeholder{ color:var(--ink-3); }
.search .pill{
font-size:11px; background:#fff;
border:1px solid var(--line); border-radius:4px;
padding:3px 7px; color:var(--ink-2);
}
.search button[type="submit"]{
background:none; border:none; color:var(--ink-3);
display:flex; align-items:center; padding:0;
cursor:pointer;
}
.search button[type="submit"]:hover{ color:var(--ink); }
.header-actions{
display:flex; align-items:center; gap:6px;
}
.icon-btn{
display:flex; flex-direction:column; align-items:center; gap:3px;
padding:8px 12px; border-radius:var(--radius);
font-size:11px; color:var(--ink-2);
position:relative;
}
.icon-btn:hover{ background:var(--bg-3); color:var(--ink); }
.icon-btn .badge{
position:absolute; top:2px; right:6px;
background:var(--action); color:#fff;
font-size:10px; font-weight:600;
padding:1px 5px; border-radius:8px;
letter-spacing:0;
}
.cart-btn{
background:var(--action); color:#fff;
border-radius:var(--radius);
padding:10px 14px;
display:flex; align-items:center; gap:10px;
}
.cart-btn:hover{ background:var(--action-ink); }
.cart-btn .cart-meta{
display:flex; flex-direction:column;
align-items:flex-start; line-height:1.1;
}
.cart-btn .cart-meta small{
font-size:10.5px; color:rgba(255,255,255,0.88);
font-weight:500;
}
.cart-btn .cart-meta b{
font-size:13px; font-weight:600;
}
/* ==========================================================================
8. NAV (categorie)
========================================================================== */
nav.cats{
background:#fff;
border-bottom:1px solid var(--line);
}
nav.cats .row{
display:flex; align-items:stretch;
height:var(--nav-h); gap:0;
}
nav.cats a{
display:flex; align-items:center; gap:8px;
padding:0 16px;
font-size:13.5px; font-weight:500;
color:var(--ink); position:relative;
}
nav.cats a:hover{ color:var(--brand); }
nav.cats a.has-mega::after{
content:""; width:6px; height:6px;
border-right:1.5px solid currentColor;
border-bottom:1.5px solid currentColor;
transform:rotate(45deg) translateY(-2px);
margin-left:2px;
}
nav.cats a.featured{ color:var(--danger); font-weight:600; }
nav.cats .nav-right{
margin-left:auto;
display:flex; align-items:center; gap:6px;
font-size:12.5px; color:var(--ink-2);
}
nav.cats .nav-right .icon{ stroke:var(--brand); }
/* Mobile nav drawer toggle (visibile solo < 768) */
.nav-toggle{
display:none;
width:40px; height:40px;
align-items:center; justify-content:center;
border-radius:var(--radius);
color:var(--ink);
}
/* ==========================================================================
9. HERO emozionale full-bleed
========================================================================== */
.hero-wrap{
position:relative;
background:oklch(0.13 0.02 250);
overflow:hidden;
color:#fff;
}
.hero-bg-img{
position:absolute; inset:0; z-index:1;
}
.hero-bg-img > .ph,
.hero-bg-img > .imgbg{
position:absolute; inset:0; border:none;
}
.hero-overlay{
position:absolute; inset:0; z-index:2;
background:
radial-gradient(ellipse at 20% 50%,
oklch(0.13 0.02 250 / 0.92) 0%,
oklch(0.13 0.02 250 / 0.55) 50%,
oklch(0.13 0.02 250 / 0.35) 100%),
linear-gradient(180deg,
oklch(0.13 0.02 250 / 0.4) 0%,
oklch(0.13 0.02 250 / 0.7) 100%);
}
.hero-noise{
position:absolute; inset:0; z-index:3;
background-image:radial-gradient(oklch(1 0 0 / 0.04) 1px, transparent 1px);
background-size:3px 3px;
mix-blend-mode:overlay;
pointer-events:none;
}
.hero-inner{
position:relative; z-index:4;
padding:120px 0 110px;
max-width:680px;
}
.hero-watermark{
position:absolute; right:32px; bottom:24px; z-index:4;
font-family:'IBM Plex Mono', monospace;
font-size:10px;
color:oklch(1 0 0 / 0.35);
letter-spacing:0.18em;
text-transform:uppercase;
display:flex; align-items:center; gap:10px;
}
.hero-watermark .rec{
width:7px; height:7px; border-radius:50%;
background:oklch(0.65 0.20 25);
box-shadow:0 0 0 3px oklch(0.65 0.20 25 / 0.25);
animation:ps-pulse 1.6s ease-in-out infinite;
}
@keyframes ps-pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }
.eyebrow{
display:inline-flex; align-items:center; gap:8px;
background:oklch(1 0 0 / 0.08);
color:#fff;
padding:7px 14px;
border-radius:99px;
font-size:11.5px; font-weight:600;
border:1px solid oklch(1 0 0 / 0.18);
align-self:flex-start;
backdrop-filter:blur(8px);
}
.eyebrow .dot{
width:6px; height:6px; border-radius:50%;
background:oklch(0.72 0.18 150);
box-shadow:0 0 0 3px oklch(0.72 0.18 150 / 0.3);
}
.hero h1{
font-size:72px; line-height:1.0;
letter-spacing:-0.035em; font-weight:700;
margin:24px 0 22px;
text-wrap:balance; color:#fff;
}
.hero h1 em{
font-style:italic; font-weight:500;
color:#00B0F0; /* azzurro del logo — testo "Prof Sicurezza" (era rosso brand) */
}
.hero p.lead{
font-size:18px;
color:oklch(0.85 0.01 250);
max-width:520px;
line-height:1.5;
text-wrap:pretty;
}
.hero-ctas{
display:flex; gap:12px; margin-top:32px;
align-items:center;
}
.hero-ctas .btn-primary{
background:#fff; color:var(--ink);
}
.hero-ctas .btn-primary:hover{
background:oklch(0.92 0.02 250);
}
.hero-trust-mini{
display:flex; gap:32px; margin-top:48px;
padding-top:28px;
border-top:1px solid oklch(1 0 0 / 0.12);
align-items:center;
}
.hero-trust-mini > div{
display:flex; flex-direction:column; gap:2px;
}
.hero-trust-mini b{
color:#fff; font-size:15px; font-weight:600;
display:flex; align-items:center; gap:6px;
}
.hero-trust-mini small{
color:oklch(0.78 0.01 250); font-size:11.5px;
}
.hero-trust-mini .stars{
color:oklch(0.82 0.16 80); letter-spacing:1px;
font-size:14px;
}
.hero-trust-mini .sep{
width:1px; height:32px;
background:oklch(1 0 0 / 0.12);
}
/* ==========================================================================
10. USP STRIP
========================================================================== */
.usps{
background:#fff;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.usps-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
}
.usps-grid > div{
padding:18px 22px;
display:flex; align-items:center; gap:12px;
border-right:1px solid var(--line);
}
.usps-grid > div:last-child{ border-right:none; }
.usp-ic{
width:38px; height:38px; border-radius:8px;
background:var(--bg-2); /* tono neutro caldo, niente residuo azzurro */
display:grid; place-items:center;
flex-shrink:0;
}
.usp-ic .icon{ stroke:var(--navy); }
.usps b{ font-size:13px; display:block; }
.usps small{
font-size:11.5px; color:var(--ink-3);
display:block; margin-top:2px;
}
/* ==========================================================================
11. CATEGORIE — featured + grid
========================================================================== */
.cats-feat{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:14px; margin-bottom:14px;
}
.cat-feat{
position:relative;
border-radius:var(--radius-lg);
overflow:hidden;
background:#fff;
border:1px solid var(--line);
min-height:240px;
display:flex; flex-direction:column;
justify-content:flex-end;
padding:24px;
transition:all .15s ease;
}
.cat-feat:hover{
border-color:var(--ink);
transform:translateY(-2px);
box-shadow:var(--shadow-md);
}
.cat-feat .cat-bg{
position:absolute; inset:0; z-index:1;
}
.cat-feat .cat-bg .ph,
.cat-feat .cat-bg .imgbg{
position:absolute; inset:0; border:none;
}
.cat-feat .cat-overlay{
position:absolute; inset:0; z-index:2;
background:linear-gradient(180deg,
oklch(0.20 0.015 250 / 0) 30%,
oklch(0.20 0.015 250 / 0.7) 100%);
}
.cat-feat .cat-content{
position:relative; z-index:3; color:#fff;
}
.cat-feat .tag{
font-family:'IBM Plex Mono', monospace;
font-size:10.5px; text-transform:uppercase;
letter-spacing:0.1em;
color:oklch(0.85 0.10 250);
margin-bottom:6px; display:block;
}
.cat-feat h3{
font-size:22px; font-weight:700;
letter-spacing:-0.015em; line-height:1.15;
}
.cat-feat .meta{
font-size:12.5px;
color:oklch(0.85 0.005 80);
margin-top:6px;
}
.cat-feat.large h3{ font-size:28px; }
.cat-feat .arr{
position:absolute; top:18px; right:18px;
width:36px; height:36px; border-radius:50%;
background:#fff; color:var(--ink);
display:grid; place-items:center; z-index:3;
}
.cats-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:12px;
}
.cat-card{
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius-lg);
padding:14px;
display:flex; flex-direction:column; gap:10px;
transition:all .15s ease;
min-height:150px;
}
.cat-card:hover{
border-color:var(--ink);
box-shadow:var(--shadow-md);
transform:translateY(-2px);
}
.cat-card .ph,
.cat-card .imgbg{
height:70px; border-radius:var(--radius);
}
.cat-card b{
font-size:13px; font-weight:600;
}
.cat-card small{
font-size:11px; color:var(--ink-3);
font-family:'IBM Plex Mono', monospace;
}
/* ==========================================================================
12. DEAL OF THE DAY
========================================================================== */
.deal{
background:linear-gradient(135deg,
oklch(0.22 0.09 273.7) 0%,
oklch(0.34 0.10 273.7) 100%); /* navy brand — i pulsanti rossi dentro spiccano */
color:#fff;
border-radius:var(--radius-lg);
overflow:hidden;
display:grid;
grid-template-columns:1fr 2fr;
gap:0;
}
.deal-left{
padding:36px;
display:flex; flex-direction:column;
justify-content:center; gap:14px;
}
.deal-eye{
display:inline-flex; align-items:center; gap:7px;
font-family:'IBM Plex Mono', monospace;
font-size:11px; letter-spacing:0.14em; font-weight:600;
color:#fff;
background:var(--action);
padding:5px 11px; border-radius:999px;
text-transform:uppercase;
align-self:flex-start;
}
.deal h2{
font-size:32px; line-height:1.05;
font-weight:700; letter-spacing:-0.02em;
}
.deal p{
font-size:14px;
color:rgba(255,255,255,0.92);
max-width:300px;
}
.countdown{
display:flex; gap:8px; margin-top:8px;
}
.cd-box{
background:rgba(255,255,255,0.07);
border:1px solid rgba(255,255,255,0.18);
border-radius:var(--radius);
padding:12px 14px; min-width:64px;
text-align:center;
backdrop-filter:blur(2px);
}
.cd-box b{
font-family:'IBM Plex Mono', monospace;
font-size:24px; font-weight:700;
display:block; line-height:1;
color:#fff;
letter-spacing:-0.01em;
}
.cd-box small{
font-size:10px;
color:rgba(255,255,255,0.70);
font-weight:500;
margin-top:4px;
display:block;
text-transform:uppercase;
letter-spacing:0.06em;
}
.deal-products{
display:grid;
grid-template-columns:repeat(2,1fr);
background:#fff;
}
.deal-products .product{
border:none;
border-left:1px solid var(--line);
border-radius:0;
}
.deal-products .product:first-child{ border-left:none; }
/* ==========================================================================
13. PRODUCT CARD (componente più riusato)
========================================================================== */
.products{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
}
.product{
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius-lg);
overflow:hidden;
display:flex; flex-direction:column;
position:relative;
transition:all .15s ease;
}
.product:hover{
border-color:var(--ink-2);
box-shadow:var(--shadow-md);
}
.product .ph,
.product .imgbg,
.product .product-img{
aspect-ratio:1;
border:none;
border-bottom:1px solid var(--line);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
display:block;
width:100%;
}
.product .product-img img{
width:100%; height:100%; object-fit:cover;
display:block;
}
.product .badges{
position:absolute; top:10px; left:10px;
display:flex; flex-direction:column; gap:4px;
z-index:2;
}
.product .wishlist{
position:absolute; top:10px; right:10px;
width:30px; height:30px; border-radius:50%;
background:#fff; border:1px solid var(--line);
display:grid; place-items:center; z-index:2;
}
.product .wishlist:hover{
border-color:var(--danger); color:var(--danger);
}
.product .body{
padding:12px 14px 14px;
display:flex; flex-direction:column; gap:6px;
flex:1;
}
.product .brand{
font-size:10.5px;
font-family:'IBM Plex Mono', monospace;
color:var(--ink-3);
text-transform:uppercase;
letter-spacing:0.06em;
}
.product h3,
.product .product-title{
font-size:13.5px; font-weight:600;
line-height:1.3; letter-spacing:-0.005em;
min-height:34px;
margin:0;
}
.product .specs{
display:flex; flex-wrap:wrap; gap:4px;
font-size:10.5px; color:var(--ink-2);
}
.product .specs span{
background:var(--bg-2);
padding:2px 6px;
border-radius:3px;
border:1px solid var(--line);
}
.product .rating{
display:flex; align-items:center; gap:6px;
font-size:11.5px; color:var(--ink-3);
}
.product .rating .stars{ font-size:11.5px; }
/* WC star rating native: lo restyling dell'asset stelle */
.product .star-rating{
font-size:12px; color:oklch(0.65 0.16 80);
height:1em; line-height:1; overflow:hidden;
position:relative; width:5.4em; font-family:star;
}
.product .star-rating::before{
content:"\\73\\73\\73\\73\\73"; opacity:0.25; float:left; top:0; left:0; position:absolute;
}
.product .star-rating span{
overflow:hidden; float:left; top:0; left:0;
position:absolute; padding-top:1.5em;
}
.product .star-rating span::before{
content:"\\53\\53\\53\\53\\53"; top:0; position:absolute; left:0;
}
.product .price-row{
display:flex; align-items:baseline; gap:6px;
margin-top:auto;
}
.product .price{
font-size:18px; font-weight:700;
letter-spacing:-0.02em; color:var(--navy);
}
.product .price-old,
.product .price del,
.product del .woocommerce-Price-amount{
font-size:12px; color:var(--ink-2);
text-decoration:line-through;
font-weight:500;
}
.product .price ins{
text-decoration:none;
background:none;
}
.product .vat{
font-size:10.5px; color:var(--ink-3);
}
.product .stock{
font-size:11px; color:var(--ok);
font-weight:600;
display:flex; align-items:center; gap:5px;
}
.product .stock .dot{
width:5px; height:5px; border-radius:50%;
background:var(--ok);
}
.product .stock--low{ color:var(--warn); }
.product .stock--low .dot{ background:var(--warn); }
.product .stock--out{ color:var(--danger); }
.product .stock--out .dot{ background:var(--danger); }
.product .add,
.product .add_to_cart_button{
margin-top:6px;
display:flex; align-items:center; justify-content:center; gap:6px;
background:var(--action); color:#fff;
padding:9px;
border-radius:var(--radius);
font-weight:600; font-size:12.5px;
text-decoration:none;
transition:background .15s ease;
}
.product .add:hover,
.product .add_to_cart_button:hover{
background:var(--action-ink); color:#fff;
}
.product .added_to_cart{
display:none; /* nasconde il "View cart" che WC inserisce dopo l'add */
}
/* ==========================================================================
14. BANNER STRIP
========================================================================== */
.banner-strip{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
.banner{
position:relative;
border-radius:var(--radius-lg);
overflow:hidden;
min-height:200px;
border:1px solid var(--line);
padding:28px;
display:flex; flex-direction:column;
justify-content:space-between;
}
.banner.b1{
background:linear-gradient(135deg,
oklch(0.94 0.02 150) 0%,
oklch(0.88 0.05 150) 100%);
}
.banner.b2{
background:linear-gradient(135deg,
oklch(0.94 0.02 250) 0%,
oklch(0.88 0.05 250) 100%);
}
.banner .ph,
.banner .imgbg{
position:absolute;
right:-30px; top:50%;
transform:translateY(-50%);
width:50%; height:80%;
border-radius:var(--radius);
}
.banner .b-content{
position:relative; z-index:2;
max-width:55%;
}
.banner .tag{
font-family:'IBM Plex Mono', monospace;
font-size:11px; text-transform:uppercase;
letter-spacing:0.1em;
color:var(--brand); font-weight:600;
}
.banner h3{
font-size:24px; font-weight:700;
letter-spacing:-0.015em; line-height:1.1;
margin:8px 0 6px;
}
.banner p{
font-size:13px; color:var(--ink-2);
max-width:280px;
}
.banner .btn{
margin-top:14px; align-self:flex-start;
position:relative; z-index:2;
}
/* ==========================================================================
15. BRANDS STRIP
========================================================================== */
.brands{
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius-lg);
padding:24px;
}
.brands-row{
display:flex; align-items:center; justify-content:space-between;
gap:16px;
}
.brand-logo{
height:34px; flex:1;
background:repeating-linear-gradient(135deg,
oklch(0.88 0.005 250) 0 6px,
oklch(0.92 0.005 250) 6px 12px);
border-radius:4px;
display:grid; place-items:center;
font-family:'IBM Plex Mono', monospace;
font-size:11px; color:var(--ink-3);
background-size:cover; background-position:center;
}
.brand-logo.has-img{
background:#fff;
}
.brand-logo img{
max-height:28px; width:auto;
object-fit:contain;
}
.brands-label{
font-family:'IBM Plex Mono', monospace;
font-size:11px; color:var(--ink-3);
text-transform:uppercase; letter-spacing:0.1em;
flex-shrink:0;
padding-right:20px;
border-right:1px solid var(--line);
}
/* ==========================================================================
16. RECENTLY VIEWED
========================================================================== */
.recent-strip{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:12px;
}
.recent{
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius-lg);
overflow:hidden;
display:flex; flex-direction:column;
padding:0;
transition:all .15s ease;
}
.recent:hover{ border-color:var(--ink-2); }
.recent .ph,
.recent .imgbg,
.recent .product-img{
aspect-ratio:1;
border:none;
border-bottom:1px solid var(--line);
}
.recent .body{
padding:10px 12px 12px;
display:flex; flex-direction:column; gap:4px;
}
.recent .brand{
font-size:10px;
font-family:'IBM Plex Mono', monospace;
color:var(--ink-3);
text-transform:uppercase;
}
.recent h4{
font-size:12px; font-weight:600;
line-height:1.3; min-height:32px;
margin:0;
}
.recent .price{
font-size:14px; font-weight:700;
margin-top:4px;
}
/* ==========================================================================
17. FOOTER
========================================================================== */
footer.ps-footer{
background:var(--bg-2);
border-top:1px solid var(--line);
padding:48px 0 22px;
margin-top:48px;
}
.footer-grid{
display:grid;
grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;
gap:36px;
margin-bottom:32px;
}
.footer-col h4{
font-size:13px; font-weight:600;
margin-bottom:12px;
}
.footer-col ul{
list-style:none;
display:flex; flex-direction:column; gap:7px;
padding:0; margin:0;
}
.footer-col li a{
font-size:12.5px; color:var(--ink-2);
}
.footer-col li a:hover{ color:var(--brand); }
.footer-brand p{
font-size:12.5px; color:var(--ink-2);
max-width:300px; margin:12px 0 14px;
}
.contact-row{
display:flex; align-items:center; gap:10px;
font-size:12.5px; color:var(--ink);
margin-bottom:6px;
}
.contact-row .icon{ stroke:var(--brand); }
body.prof-sicurezza .pay-row{
display:flex !important; flex-direction:row !important; align-items:center !important;
gap:12px !important; flex-wrap:wrap !important; margin-top:14px !important;
width:auto !important;
}
/* Pill testuale (fallback se manca un'immagine): pill bianco minimal */
body.prof-sicurezza .pay-row .pay-chip{
height:32px !important; padding:0 9px !important; box-sizing:border-box !important;
width:auto !important; flex:0 0 auto !important;
border-radius:5px !important;
background:#fff !important; border:1px solid var(--line) !important;
font-family:'IBM Plex Mono', monospace !important;
font-size:10px !important; font-weight:600 !important; color:var(--ink-2) !important;
display:inline-flex !important; align-items:center !important; justify-content:center !important;
line-height:1 !important;
}
/* Loghi pagamento (uniformi caricati dall'utente): altezza fissa + bordi arrotondati */
body.prof-sicurezza .pay-row .pay-chip--img{
background:transparent !important; border:0 !important; padding:0 !important;
display:inline-flex !important; align-items:center !important;
height:auto !important; width:auto !important;
}
body.prof-sicurezza .pay-row .pay-chip--img img{
height:26px !important; width:auto !important;
max-width:none !important; max-height:26px !important;
display:block !important;
border-radius:5px !important;
margin:0 !important; padding:0 !important;
}
/* ============================================================
SEARCH — autocomplete dropdown + pagina risultati
============================================================ */
body.prof-sicurezza .search{ position:relative !important; }
body.prof-sicurezza .ps-suggest{
position:absolute !important; left:0 !important; right:0 !important; top:calc(100% + 6px) !important;
background:#fff !important; border:1px solid var(--line) !important; border-radius:var(--radius-lg) !important;
box-shadow:0 18px 50px rgba(27,33,82,.14), 0 6px 16px rgba(27,33,82,.06) !important;
z-index:9999 !important; max-height:520px !important; overflow-y:auto !important;
padding:6px !important;
}
body.prof-sicurezza .ps-suggest-empty{
padding:18px 14px !important; color:var(--ink-3) !important; font-size:13.5px !important; text-align:center !important;
}
body.prof-sicurezza .ps-suggest-item{
display:grid !important; grid-template-columns:48px 1fr auto !important; gap:12px !important;
align-items:center !important; padding:8px 10px !important; border-radius:8px !important;
text-decoration:none !important; color:var(--ink) !important;
transition:background .12s !important;
}
body.prof-sicurezza .ps-suggest-item:hover,
body.prof-sicurezza .ps-suggest-item.is-active{ background:var(--bg-2) !important; }
body.prof-sicurezza .ps-suggest-item .thumb{
width:48px !important; height:48px !important; border-radius:6px !important; overflow:hidden !important;
background:#fff !important; border:1px solid var(--line) !important;
display:grid !important; place-items:center !important;
}
body.prof-sicurezza .ps-suggest-item .thumb img{
max-width:80% !important; max-height:80% !important; width:auto !important; height:auto !important;
object-fit:contain !important; display:block !important;
}
body.prof-sicurezza .ps-suggest-item .meta{ display:flex !important; flex-direction:column !important; gap:2px !important; min-width:0 !important; }
body.prof-sicurezza .ps-suggest-item .meta .b{
font-family:'IBM Plex Mono', monospace !important; font-size:10px !important;
letter-spacing:.1em !important; text-transform:uppercase !important;
color:var(--navy) !important; font-weight:600 !important;
}
body.prof-sicurezza .ps-suggest-item .meta .t{
font-size:13.5px !important; font-weight:600 !important; line-height:1.3 !important;
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
body.prof-sicurezza .ps-suggest-item .meta .t mark{
background:var(--brand-soft) !important; color:var(--navy) !important; padding:0 2px !important; border-radius:2px !important;
}
body.prof-sicurezza .ps-suggest-item .meta .sku{
font-family:'IBM Plex Mono', monospace !important; font-size:10.5px !important;
color:var(--ink-3) !important;
}
body.prof-sicurezza .ps-suggest-item .price{
font-size:14px !important; font-weight:700 !important; color:var(--navy) !important;
font-variant-numeric:tabular-nums !important; white-space:nowrap !important;
}
body.prof-sicurezza .ps-suggest-all{
display:block !important; padding:11px 14px !important; margin-top:4px !important;
border-top:1px solid var(--line) !important;
text-align:center !important; font-size:13px !important; color:var(--navy) !important;
text-decoration:none !important; font-weight:600 !important; border-radius:0 0 var(--radius-lg) var(--radius-lg) !important;
transition:background .12s !important;
}
body.prof-sicurezza .ps-suggest-all:hover{ background:var(--bg-2) !important; }
/* Pagina risultati ricerca — respiro dopo il mega menu */
body.prof-sicurezza .container.ps-search-page{
padding-top:56px !important;
}
body.prof-sicurezza .search-head{ padding:36px 0 24px !important; }
body.prof-sicurezza .search-head .lbl{
font-family:'IBM Plex Mono', monospace !important; font-size:11px !important;
letter-spacing:.14em !important; text-transform:uppercase !important; color:var(--navy) !important;
font-weight:600 !important; margin-bottom:8px !important;
}
body.prof-sicurezza .search-head h1{
font-size:32px !important; font-weight:700 !important; letter-spacing:-.02em !important;
color:var(--ink) !important; margin-bottom:6px !important; text-wrap:balance !important;
}
body.prof-sicurezza .search-head p{ color:var(--ink-2) !important; font-size:15px !important; }
body.prof-sicurezza .search-head p b{ color:var(--ink) !important; }
body.prof-sicurezza .search-empty{
text-align:center !important; padding:48px 24px 32px !important;
background:#fff !important; border:1px solid var(--line) !important; border-radius:var(--radius-lg) !important;
}
body.prof-sicurezza .search-empty svg{ color:var(--ink-3) !important; margin-bottom:14px !important; }
body.prof-sicurezza .search-empty h2{
font-size:22px !important; font-weight:700 !important; color:var(--ink) !important; margin-bottom:8px !important;
}
body.prof-sicurezza .search-empty p{ color:var(--ink-2) !important; font-size:14.5px !important; margin-bottom:4px !important; }
body.prof-sicurezza .search-empty .cats-feat{ text-align:left !important; max-width:900px !important; margin:18px auto 0 !important; }
/* Pagina risultati: griglia prodotti standard 4-col */
body.prof-sicurezza .products.grid{
display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:18px !important; margin-bottom:32px !important;
}
@media (max-width:1024px){ body.prof-sicurezza .products.grid{ grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width:760px){ body.prof-sicurezza .products.grid{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:480px){ body.prof-sicurezza .products.grid{ grid-template-columns:1fr !important; } }
/* Paginazione */
body.prof-sicurezza nav.pagination{
display:flex !important; gap:6px !important; justify-content:center !important; padding:18px 0 36px !important;
}
body.prof-sicurezza nav.pagination a{
min-width:38px !important; height:38px !important; padding:0 12px !important;
display:inline-flex !important; align-items:center !important; justify-content:center !important;
background:#fff !important; border:1px solid var(--line) !important; border-radius:8px !important;
color:var(--ink-2) !important; font-weight:600 !important; font-size:13.5px !important;
text-decoration:none !important; transition:border-color .15s, background .15s, color .15s !important;
}
body.prof-sicurezza nav.pagination a:hover{ border-color:var(--navy) !important; color:var(--navy) !important; }
body.prof-sicurezza nav.pagination a.is-active{
background:var(--navy) !important; color:#fff !important; border-color:var(--navy) !important;
}
.footer-bottom{
padding-top:20px;
border-top:1px solid var(--line);
display:flex; justify-content:space-between; align-items:center;
font-size:11.5px; color:var(--ink-3);
}
.footer-bottom .legal{ display:flex; gap:14px; }
/* ==========================================================================
18. STICKY HELP
========================================================================== */
.sticky-help{
position:fixed; bottom:24px; right:24px;
background:var(--ink); color:#fff;
border-radius:99px;
padding:11px 18px 11px 14px;
display:flex; align-items:center; gap:10px;
box-shadow:var(--shadow-md);
font-size:13px; font-weight:500;
z-index:60;
text-decoration:none;
}
.sticky-help .av{
width:28px; height:28px; border-radius:50%;
background:oklch(0.45 0.10 150);
border:2px solid oklch(0.65 0.10 150);
display:grid; place-items:center;
font-size:10.5px; font-weight:700;
}
.sticky-help .live-dot{
width:7px; height:7px; border-radius:50%;
background:oklch(0.65 0.16 150);
box-shadow:0 0 0 3px oklch(0.65 0.16 150 / 0.3);
}
/* ==========================================================================
19. PHASE-2 STUBS — componenti per PDP / Categoria (fase 2)
Già nel file così le pagine future ereditano lo stile senza refactor.
========================================================================== */
/* --- Breadcrumb --- */
.breadcrumb{
padding:14px 0;
font-size:12px; color:var(--ink-3);
display:flex; align-items:center; gap:8px;
flex-wrap:wrap;
}
.breadcrumb a:hover{ color:var(--brand); }
.breadcrumb .sep{ color:var(--line-2); }
.breadcrumb .current{ color:var(--ink-2); }
/* --- Cat hero (Pagina Categoria) --- */
.cat-hero{
display:grid;
grid-template-columns:1.1fr 1fr;
gap:32px; align-items:stretch;
padding:0 0 32px;
}
.cat-hero-text{
display:flex; flex-direction:column;
justify-content:center; gap:14px;
}
.cat-hero-text h1{
font-size:44px; line-height:1.05;
letter-spacing:-0.025em; font-weight:700;
text-wrap:balance;
}
.cat-hero-text p{
font-size:15px; color:var(--ink-2);
max-width:520px; line-height:1.55;
text-wrap:pretty;
}
.cat-hero-stats{
display:flex; gap:28px;
margin-top:8px; padding-top:16px;
border-top:1px solid var(--line);
}
.cat-hero-stats > div{
display:flex; flex-direction:column; gap:2px;
}
.cat-hero-stats b{
font-size:18px; font-weight:700;
letter-spacing:-0.015em;
}
.cat-hero-stats small{
font-size:11.5px; color:var(--ink-3);
}
.cat-hero-img{
position:relative;
border-radius:var(--radius-lg);
overflow:hidden;
min-height:280px;
background:#000;
}
.cat-hero-img .ph,
.cat-hero-img .imgbg{
position:absolute; inset:0; border:none;
}
/* --- Pricebox & gallery (PDP) — solo i pezzi base, dettagli in fase 2 --- */
.pdp{
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
gap:48px;
padding:8px 0 32px;
}
.pricebox{
background:var(--bg-2);
border:1px solid var(--line);
border-radius:var(--radius-lg);
padding:20px 22px;
margin-bottom:18px;
position:relative;
}
/* --- Filters sidebar (Categoria) — solo skeleton --- */
.listing{
display:grid;
grid-template-columns:264px 1fr;
gap:32px;
align-items:start;
padding-bottom:48px;
}
.filters-side{
position:sticky;
top:calc(var(--topbar-h) + var(--header-h) + 8px);
display:flex; flex-direction:column;
border:1px solid var(--line);
border-radius:var(--radius-lg);
background:#fff;
overflow:hidden;
}
/* ==========================================================================
20. RESPONSIVE — desktop-first, 3 breakpoint
========================================================================== */
/* === 1024px (tablet landscape) ============================ */
@media (max-width:1024px){
:root{
--container-pad:24px;
}
.hero h1{ font-size:56px; }
.hero-inner{ padding:90px 0 80px; }
.cats-grid{ grid-template-columns:repeat(4,1fr); }
.products{ grid-template-columns:repeat(3,1fr); }
.recent-strip{ grid-template-columns:repeat(4,1fr); }
.deal{ grid-template-columns:1fr; }
.deal-products{ grid-template-columns:repeat(2,1fr); }
.footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; }
.footer-grid .footer-col:nth-child(5){ grid-column:span 4; padding-top:8px; border-top:1px solid var(--line); }
/* Nav scroll-x se troppe voci */
nav.cats .row{ overflow-x:auto; gap:0; }
nav.cats .nav-right{ display:none; }
/* PDP in fase 2 */
.pdp{ grid-template-columns:1fr; gap:32px; }
.listing{ grid-template-columns:1fr; }
.filters-side{ position:static; }
}
/* === 768px (tablet portrait) ============================== */
@media (max-width:768px){
:root{
--container-pad:16px;
--header-h:64px;
}
.topbar .row{
flex-direction:column; height:auto;
gap:6px; padding:8px 0;
align-items:flex-start;
}
.topbar ul{ flex-wrap:wrap; gap:12px; font-size:11.5px; }
.topbar .right{ gap:10px; font-size:11.5px; }
header.main .row{
grid-template-columns:auto 1fr auto;
gap:12px; height:var(--header-h);
}
/* Ricerca diventa popover icon-only */
header.main .search{
display:none;
}
header.main.search-open .search{
display:flex;
position:absolute; top:100%; left:0; right:0;
margin:0; border-radius:0;
border-left:none; border-right:none;
z-index:51;
}
.search-toggle{
display:grid; place-items:center;
width:40px; height:40px;
border-radius:var(--radius);
color:var(--ink-2);
}
.icon-btn{ padding:6px 8px; }
.icon-btn span:not(.badge){ display:none; }
.cart-btn .cart-meta{ display:none; }
.cart-btn{ padding:10px 12px; }
/* Nav: hamburger drawer */
nav.cats{ position:relative; }
nav.cats .row{
height:auto;
}
.nav-toggle{
display:flex; align-items:center; gap:8px;
height:48px; padding:0 0;
font-size:13.5px; font-weight:600;
color:var(--ink); width:100%;
}
.nav-toggle::after{
content:""; width:10px; height:10px; margin-left:auto;
border-right:1.5px solid currentColor;
border-bottom:1.5px solid currentColor;
transform:rotate(45deg) translateY(-2px);
}
nav.cats .nav-list{
display:none;
position:absolute; top:100%; left:0; right:0;
background:#fff; border-bottom:1px solid var(--line);
z-index:51; flex-direction:column;
padding:8px 16px; gap:0;
box-shadow:var(--shadow-md);
}
nav.cats.open .nav-list{ display:flex; }
nav.cats .nav-list a{
padding:14px 0;
border-bottom:1px solid var(--line);
width:100%;
}
nav.cats .nav-list a:last-child{ border-bottom:none; }
nav.cats .nav-right{ display:none; }
/* Hero */
.hero h1{ font-size:42px; }
.hero p.lead{ font-size:16px; }
.hero-inner{ padding:64px 0 60px; max-width:100%; }
.hero-trust-mini{ flex-wrap:wrap; gap:18px; padding-top:18px; margin-top:30px; }
.hero-trust-mini .sep{ display:none; }
.hero-watermark{ right:16px; bottom:16px; }
/* USP */
.usps-grid{ grid-template-columns:repeat(2,1fr); }
.usps-grid > div{ padding:14px 16px; }
.usps-grid > div:nth-child(2){ border-right:none; }
/* Categorie */
.cats-feat{ grid-template-columns:1fr; gap:10px; }
.cat-feat{ min-height:180px; padding:20px; }
.cat-feat.large h3{ font-size:24px; }
.cats-grid{ grid-template-columns:repeat(3,1fr); gap:10px; }
/* Deal */
.deal-left{ padding:24px; }
.deal h2{ font-size:24px; }
.deal-products{ grid-template-columns:1fr; }
.deal-products .product:not(:first-child){
border-left:none;
border-top:1px solid var(--line);
}
/* Products grid */
.products{ grid-template-columns:repeat(2,1fr); gap:12px; }
.product .body{ padding:10px 12px 12px; }
.product h3{ font-size:13px; min-height:32px; }
.product .price{ font-size:16px; }
/* Filter chips: scroll-x */
.filter-bar{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
.filter-chip{ flex-shrink:0; }
/* Banner */
.banner-strip{ grid-template-columns:1fr; }
.banner{ min-height:180px; padding:22px; }
.banner .ph, .banner .imgbg{
width:40%; right:-10%; opacity:0.6;
}
/* Brands */
.brands{ padding:18px; }
.brands-row{ flex-wrap:wrap; gap:10px; }
.brands-label{
width:100%; padding-right:0; padding-bottom:10px;
border-right:none; border-bottom:1px solid var(--line);
}
.brand-logo{ flex:0 0 calc(33.333% - 7px); }
/* Recent */
.recent-strip{ grid-template-columns:repeat(3,1fr); }
/* Section */
.section{ padding:32px 0; }
.section-head h2{ font-size:22px; }
/* Footer */
.footer-grid{
grid-template-columns:1fr 1fr;
gap:24px;
}
.footer-grid .footer-col:first-child{
grid-column:span 2;
}
/* Sticky help */
.sticky-help{ bottom:14px; right:14px; padding:10px 14px 10px 12px; font-size:12px; }
}
/* === 480px (mobile) ======================================= */
@media (max-width:480px){
.hero h1{ font-size:34px; }
.hero-ctas{ flex-direction:column; align-items:stretch; }
.hero-ctas .btn{ justify-content:center; }
.hero-ctas .btn-ghost-light{ text-align:center; }
.cats-grid{ grid-template-columns:repeat(2,1fr); }
.products{ grid-template-columns:repeat(2,1fr); gap:10px; }
.recent-strip{ grid-template-columns:repeat(2,1fr); }
.footer-grid{ grid-template-columns:1fr; }
.footer-grid .footer-col:first-child{ grid-column:auto; }
.footer-bottom{ flex-direction:column; gap:10px; align-items:flex-start; }
.usps-grid > div{ padding:12px; }
.usps-grid b{ font-size:12px; }
.usps-grid small{ font-size:11px; }
.deal h2{ font-size:20px; }
.countdown{ flex-wrap:wrap; }
.sticky-help span:not(.av):not(.live-dot){ display:none; }
.sticky-help{ padding:10px 12px; }
}
/* ============================================================
PROF SICUREZZA — CSS OVERRIDE
Da APPENDERE IN FONDO al file prof-sicurezza.css esistente
(NON sostituire il file, solo aggiungere queste righe).
Cosa fa: alza la specificità con `body.prof-sicurezza` + !important
per vincere contro le classi globali di Oxygen 6 (Breakdance) e
WooCommerce che collidono con quelle del design (.row, .container,
.products, .product, ecc.)
============================================================ */
/* === BASE: container & row neutralizzati === */
body.prof-sicurezza .container{
max-width:1320px !important;
margin-left:auto !important;
margin-right:auto !important;
padding:0 32px !important;
width:auto !important;
display:block !important;
}
/* === TOPBAR === */
body.prof-sicurezza .topbar{
background:var(--navy) !important;
color:oklch(0.92 0.005 80) !important;
font-size:12.5px !important;
display:block !important;
}
body.prof-sicurezza .topbar .row{
display:flex !important;
flex-direction:row !important;
justify-content:space-between !important;
align-items:center !important;
height:38px !important;
gap:24px !important;
padding:0 var(--container-pad, 32px) !important;
margin:0 auto !important;
max-width:var(--container-max, 1320px) !important;
width:100% !important;
box-sizing:border-box !important;
flex-wrap:nowrap !important;
}
body.prof-sicurezza .topbar ul{
display:flex !important;
flex-direction:row !important;
gap:22px !important;
list-style:none !important;
padding:0 !important;
margin:0 !important;
}
body.prof-sicurezza .topbar li{
display:flex !important;
align-items:center !important;
gap:7px !important;
list-style:none !important;
margin:0 !important;
padding:0 !important;
}
body.prof-sicurezza .topbar .right{
display:flex !important;
flex-direction:row !important;
gap:18px !important;
align-items:center !important;
}
/* === HEADER PRINCIPALE === */
body.prof-sicurezza header.main{
background:#fff !important;
border-bottom:1px solid var(--line) !important;
position:sticky !important;
top:0 !important;
z-index:100 !important; /* sopra il mega menu (z:60) — search dropdown sta dentro */
display:block !important;
}
body.prof-sicurezza header.main .row{
display:grid !important;
grid-template-columns:auto 1fr auto !important;
gap:32px !important;
align-items:center !important;
height:78px !important;
padding:0 var(--container-pad, 32px) !important;
margin:0 auto !important;
max-width:var(--container-max, 1320px) !important;
width:100% !important;
box-sizing:border-box !important;
}
body.prof-sicurezza .logo{
display:flex !important;
align-items:center !important;
gap:10px !important;
font-weight:800 !important;
font-size:20px !important;
letter-spacing:-0.02em !important;
}
body.prof-sicurezza header.main .search{
display:flex !important;
align-items:center !important;
gap:10px !important;
background:var(--bg-2) !important;
border:1px solid var(--line) !important;
border-radius:6px !important;
padding:0 14px !important;
height:46px !important;
flex:1 !important;
max-width:none !important;
}
body.prof-sicurezza header.main .search-toggle{
display:none !important; /* solo mobile */
}
body.prof-sicurezza .header-actions{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:6px !important;
}
body.prof-sicurezza .icon-btn{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:3px !important;
padding:8px 12px !important;
position:relative !important;
}
body.prof-sicurezza .cart-btn{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:10px !important;
background:var(--action) !important;
color:#fff !important;
border-radius:6px !important;
padding:10px 14px !important;
}
body.prof-sicurezza .cart-btn:hover{ background:var(--action-ink) !important; }
body.prof-sicurezza .cart-btn .cart-meta{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
line-height:1.1 !important;
}
/* === NAV CATEGORIE === */
body.prof-sicurezza nav.cats{
background:#fff !important;
border-bottom:1px solid var(--line) !important;
display:block !important;
}
body.prof-sicurezza nav.cats .row{
display:flex !important;
flex-direction:row !important;
align-items:stretch !important;
height:46px !important;
gap:0 !important;
padding:0 var(--container-pad, 32px) !important;
margin:0 auto !important;
max-width:var(--container-max, 1320px) !important;
width:100% !important;
box-sizing:border-box !important;
flex-wrap:nowrap !important;
}
body.prof-sicurezza nav.cats .nav-list{
display:flex !important;
flex-direction:row !important;
align-items:stretch !important;
flex:1 !important;
gap:0 !important;
padding:0 !important;
margin:0 !important;
position:static !important;
background:transparent !important;
border:none !important;
box-shadow:none !important;
}
body.prof-sicurezza nav.cats .nav-list a{
display:flex !important;
align-items:center !important;
gap:8px !important;
padding:0 16px !important;
font-size:13.5px !important;
font-weight:500 !important;
color:var(--ink) !important;
border-bottom:none !important;
width:auto !important;
}
body.prof-sicurezza nav.cats .nav-toggle{
display:none !important; /* solo mobile */
}
body.prof-sicurezza nav.cats .nav-right{
display:flex !important;
flex-direction:row !important;
margin-left:auto !important;
align-items:center !important;
gap:6px !important;
font-size:12.5px !important;
color:var(--ink-2) !important;
padding:0 16px !important;
}
/* === PRODUCT GRID — anti WooCommerce === */
body.prof-sicurezza .products,
body.prof-sicurezza ul.products{
display:grid !important;
grid-template-columns:repeat(4,1fr) !important;
gap:16px !important;
list-style:none !important;
padding:0 !important;
margin:0 !important;
}
body.prof-sicurezza .product,
body.prof-sicurezza ul.products li.product{
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:10px !important;
overflow:hidden !important;
display:flex !important;
flex-direction:column !important;
position:relative !important;
width:auto !important;
max-width:none !important;
margin:0 !important;
padding:0 !important;
float:none !important;
list-style:none !important;
}
/* === CATEGORIE === */
body.prof-sicurezza .cats-feat{
display:grid !important;
grid-template-columns:repeat(3,1fr) !important;
gap:18px !important;
margin-bottom:18px !important;
}
body.prof-sicurezza .cats-grid{
display:grid !important;
grid-template-columns:repeat(4,1fr) !important;
gap:18px !important;
}
body.prof-sicurezza .cat-feat,
body.prof-sicurezza .cat-card{
display:flex !important;
flex-direction:column !important;
}
/* === USP STRIP === */
body.prof-sicurezza .usps{
display:block !important;
background:#fff !important;
}
body.prof-sicurezza .usps-grid{
display:grid !important;
grid-template-columns:repeat(4,1fr) !important;
gap:0 !important;
}
body.prof-sicurezza .usps-grid > div{
display:flex !important;
align-items:center !important;
gap:12px !important;
padding:18px 22px !important;
border-right:1px solid var(--line) !important;
}
/* === BANNER STRIP === */
body.prof-sicurezza .banner-strip{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:14px !important;
}
/* === BRAND STRIP === */
body.prof-sicurezza .brands-row{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:space-between !important;
gap:16px !important;
flex-wrap:wrap !important;
}
/* === RECENT VIEWED === */
body.prof-sicurezza .recent-strip{
display:grid !important;
grid-template-columns:repeat(6,1fr) !important;
gap:12px !important;
}
/* === DEAL OF DAY === */
body.prof-sicurezza .deal{
display:grid !important;
grid-template-columns:1fr 2fr !important;
}
body.prof-sicurezza .deal-products{
display:grid !important;
grid-template-columns:repeat(2,1fr) !important;
}
/* === FOOTER === */
body.prof-sicurezza footer.ps-footer{
display:block !important;
background:var(--bg-2) !important;
border-top:1px solid var(--line) !important;
padding:48px 0 22px !important;
margin-top:48px !important;
}
body.prof-sicurezza .footer-grid{
display:grid !important;
grid-template-columns:1.4fr 1fr 1fr 1fr 1fr !important;
gap:36px !important;
margin-bottom:32px !important;
}
body.prof-sicurezza .footer-col ul{
list-style:none !important;
display:flex !important;
flex-direction:column !important;
gap:7px !important;
padding:0 !important;
margin:0 !important;
}
/* === HERO emozionale === */
body.prof-sicurezza .hero-wrap{
position:relative !important;
background:oklch(0.13 0.02 250) !important;
overflow:hidden !important;
color:#fff !important;
display:block !important;
}
body.prof-sicurezza .hero-bg-img,
body.prof-sicurezza .hero-overlay,
body.prof-sicurezza .hero-noise{
position:absolute !important;
inset:0 !important;
}
body.prof-sicurezza .hero-inner{
position:relative !important;
z-index:4 !important;
padding:120px 0 110px !important;
max-width:680px !important;
}
body.prof-sicurezza .hero h1{
font-size:72px !important;
line-height:1.0 !important;
letter-spacing:-0.035em !important;
font-weight:700 !important;
margin:24px 0 22px !important;
color:#fff !important;
}
body.prof-sicurezza .hero p.lead{
font-size:18px !important;
color:oklch(0.85 0.01 250) !important;
max-width:520px !important;
line-height:1.5 !important;
}
body.prof-sicurezza .hero-ctas{
display:flex !important;
flex-direction:row !important;
gap:12px !important;
margin-top:32px !important;
align-items:center !important;
}
body.prof-sicurezza .hero-trust-mini{
display:flex !important;
flex-direction:row !important;
gap:32px !important;
margin-top:48px !important;
padding-top:28px !important;
align-items:center !important;
}
/* === SECTION HEAD === */
body.prof-sicurezza .section-head{
display:flex !important;
flex-direction:row !important;
align-items:end !important;
justify-content:space-between !important;
margin-bottom:24px !important;
gap:24px !important;
}
/* === FILTER CHIPS === */
body.prof-sicurezza .filter-bar{
display:flex !important;
flex-direction:row !important;
gap:8px !important;
margin-bottom:20px !important;
flex-wrap:wrap !important;
}
/* === RESPONSIVE OVERRIDES === */
@media (max-width:768px){
body.prof-sicurezza header.main .search{
display:none !important;
}
body.prof-sicurezza header.main.search-open .search{
display:flex !important;
position:absolute !important;
top:100% !important;
left:0 !important;
right:0 !important;
}
body.prof-sicurezza .search-toggle{
display:grid !important;
place-items:center !important;
width:40px !important;
height:40px !important;
}
body.prof-sicurezza nav.cats .nav-toggle{
display:flex !important;
align-items:center !important;
gap:8px !important;
width:100% !important;
height:48px !important;
}
/* OBSOLETO: vecchio drawer mobile sostituito da v12.
Lasciato vuoto per non spostare la numerazione delle righe. */
body.prof-sicurezza .cats-feat{
grid-template-columns:1fr !important;
}
body.prof-sicurezza .cats-grid{
grid-template-columns:repeat(3,1fr) !important;
}
body.prof-sicurezza .products,
body.prof-sicurezza ul.products{
grid-template-columns:repeat(2,1fr) !important;
}
body.prof-sicurezza .recent-strip{
grid-template-columns:repeat(3,1fr) !important;
}
body.prof-sicurezza .deal{
grid-template-columns:1fr !important;
}
body.prof-sicurezza .banner-strip{
grid-template-columns:1fr !important;
}
body.prof-sicurezza .footer-grid{
grid-template-columns:1fr 1fr !important;
}
body.prof-sicurezza .usps-grid{
grid-template-columns:repeat(2,1fr) !important;
}
}
@media (max-width:480px){
body.prof-sicurezza .cats-grid{
grid-template-columns:repeat(2,1fr) !important;
}
body.prof-sicurezza .recent-strip{
grid-template-columns:repeat(2,1fr) !important;
}
body.prof-sicurezza .footer-grid{
grid-template-columns:1fr !important;
}
}
/* ============================================================
v3 — Aggiunte per nuovi brand banners (struttura semplificata)
============================================================ */
body.prof-sicurezza .ps-section{
padding:48px 0 !important;
display:block !important;
}
body.prof-sicurezza .ps-section-flush-top{ padding-top:0 !important; }
body.prof-sicurezza .ps-section-flush-bottom{ padding-bottom:0 !important; }
body.prof-sicurezza .banner .b-content{
display:flex !important;
flex-direction:column !important;
gap:6px !important;
position:relative !important;
z-index:2 !important;
max-width:55% !important;
}
body.prof-sicurezza .banner-h3{
font-size:24px !important;
font-weight:700 !important;
letter-spacing:-0.015em !important;
line-height:1.1 !important;
display:block !important;
}
body.prof-sicurezza .banner-desc{
font-size:13px !important;
color:var(--ink-2) !important;
display:block !important;
}
body.prof-sicurezza .banner > .btn,
body.prof-sicurezza .banner > span.btn-primary,
body.prof-sicurezza .banner > span.btn-secondary{
margin-top:14px !important;
align-self:flex-start !important;
}
/* ============================================================
v4 — Fix responsive footer + altri (1024 e 768)
Il primo override aveva !important fisso a 5 colonne sul desktop
ma mancavano i breakpoint intermedi.
============================================================ */
@media (max-width:1024px){
body.prof-sicurezza .footer-grid{
grid-template-columns:1.4fr 1fr 1fr 1fr !important;
gap:28px !important;
}
body.prof-sicurezza .footer-grid .footer-col:nth-child(5){
grid-column:span 4 !important;
padding-top:14px !important;
border-top:1px solid var(--line) !important;
}
/* Categorie + product grid in tablet */
body.prof-sicurezza .cats-grid{
grid-template-columns:repeat(4,1fr) !important;
}
body.prof-sicurezza .products,
body.prof-sicurezza ul.products{
grid-template-columns:repeat(3,1fr) !important;
}
body.prof-sicurezza .recent-strip{
grid-template-columns:repeat(4,1fr) !important;
}
body.prof-sicurezza .banner-strip{
grid-template-columns:1fr !important;
}
}
@media (max-width:768px){
body.prof-sicurezza .footer-grid{
grid-template-columns:1fr 1fr !important;
gap:24px !important;
}
body.prof-sicurezza .footer-grid .footer-col:first-child{
grid-column:span 2 !important;
border-top:none !important;
padding-top:0 !important;
}
body.prof-sicurezza .footer-grid .footer-col:nth-child(5){
grid-column:auto !important;
border-top:none !important;
padding-top:0 !important;
}
body.prof-sicurezza .footer-bottom{
flex-direction:column !important;
gap:12px !important;
align-items:flex-start !important;
}
}
@media (max-width:480px){
body.prof-sicurezza .footer-grid{
grid-template-columns:1fr !important;
gap:24px !important;
}
body.prof-sicurezza .footer-grid .footer-col:first-child,
body.prof-sicurezza .footer-grid .footer-col:nth-child(5){
grid-column:auto !important;
}
}
/* ============================================================
v5 — Hardening responsive a tablet width (769-1024)
La deal section + cats-feat erano 2/3 colonne anche a tablet
causando overflow. Forziamo stack su tutto quello che può
diventare troppo stretto.
============================================================ */
@media (max-width:1024px){
/* DEAL: stacka la sezione (titolo sopra, prodotti sotto) */
body.prof-sicurezza .deal{
grid-template-columns:1fr !important;
}
body.prof-sicurezza .deal-products{
grid-template-columns:repeat(2,1fr) !important;
border-top:1px solid var(--line) !important;
}
body.prof-sicurezza .deal-products .product:not(:first-child){
border-left:1px solid var(--line) !important;
border-top:none !important;
}
/* CATEGORIE FEATURED: 2 col (la prima grande sopra, le altre 2 sotto) */
body.prof-sicurezza .cats-feat{
grid-template-columns:1fr 1fr !important;
}
body.prof-sicurezza .cats-feat > a:first-child{
grid-column:span 2 !important;
}
}
/* Anti-overflow globale: previeni horizontal scroll a qualunque viewport.
NB: NON includere .container qui — ha già il suo max-width:1320px
e ridichiararlo qui lo sovrascriverebbe (regola successiva nello stylesheet). */
html, body{
overflow-x:hidden !important;
}
body.prof-sicurezza section,
body.prof-sicurezza .ps-section,
body.prof-sicurezza .topbar,
body.prof-sicurezza header.main,
body.prof-sicurezza nav.cats,
body.prof-sicurezza footer.ps-footer{
max-width:100vw !important;
box-sizing:border-box !important;
}
/* ============================================================
v6 — Slider orizzontale prodotti su mobile (768 e sotto)
- .products (bestseller + nuovi arrivi)
- .deal-products (offerta del giorno)
- .recent-strip (visti di recente)
Pattern peek: card 80% viewport, anteprima 20% della successiva.
Scroll-snap per fermarsi pulito su ogni card.
============================================================ */
@media (max-width:768px){
/* Products grid → slider */
body.prof-sicurezza .products,
body.prof-sicurezza ul.products{
display:flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
overflow-x:auto !important;
overflow-y:visible !important;
scroll-snap-type:x mandatory !important;
-webkit-overflow-scrolling:touch !important;
gap:12px !important;
padding:4px 16px 12px !important;
margin:0 -16px !important; /* sfora il container fino al bordo viewport */
grid-template-columns:none !important;
scrollbar-width:none !important; /* Firefox */
}
body.prof-sicurezza .products::-webkit-scrollbar,
body.prof-sicurezza ul.products::-webkit-scrollbar{
display:none !important; /* Chrome/Safari */
}
body.prof-sicurezza .products > .product,
body.prof-sicurezza ul.products > li.product{
flex:0 0 78% !important;
max-width:78% !important;
width:78% !important;
scroll-snap-align:start !important;
scroll-margin-left:16px !important;
}
/* Deal products → slider stesso pattern */
body.prof-sicurezza .deal-products{
display:flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
overflow-x:auto !important;
scroll-snap-type:x mandatory !important;
-webkit-overflow-scrolling:touch !important;
gap:0 !important;
grid-template-columns:none !important;
scrollbar-width:none !important;
border-top:1px solid var(--line) !important;
}
body.prof-sicurezza .deal-products::-webkit-scrollbar{ display:none !important; }
body.prof-sicurezza .deal-products > .product{
flex:0 0 85% !important;
max-width:85% !important;
width:85% !important;
scroll-snap-align:start !important;
border-left:1px solid var(--line) !important;
border-top:none !important;
}
body.prof-sicurezza .deal-products > .product:first-child{
border-left:none !important;
}
/* Recently viewed strip → slider */
body.prof-sicurezza .recent-strip{
display:flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
overflow-x:auto !important;
scroll-snap-type:x mandatory !important;
-webkit-overflow-scrolling:touch !important;
gap:10px !important;
padding:4px 16px 12px !important;
margin:0 -16px !important;
grid-template-columns:none !important;
scrollbar-width:none !important;
}
body.prof-sicurezza .recent-strip::-webkit-scrollbar{ display:none !important; }
body.prof-sicurezza .recent-strip > .recent{
flex:0 0 55% !important;
max-width:55% !important;
scroll-snap-align:start !important;
}
/* Hint visivo: la sezione "fluttua" oltre il container per mostrare
che si può scrollare. Aggiungiamo una piccola ombra a destra. */
body.prof-sicurezza .container{
position:relative !important;
}
}
@media (max-width:480px){
/* Su mobile più piccolo, card un po' più strette per più peek */
body.prof-sicurezza .products > .product,
body.prof-sicurezza ul.products > li.product{
flex:0 0 75% !important;
max-width:75% !important;
width:75% !important;
}
body.prof-sicurezza .recent-strip > .recent{
flex:0 0 50% !important;
max-width:50% !important;
}
}
/* ============================================================
v7 — PAGINA PRODOTTO (PDP) — stili completi
============================================================ */
/* === Breadcrumb (override per sicurezza) === */
body.prof-sicurezza .breadcrumb{
padding:14px 0 !important;
font-size:12px !important;
color:var(--ink-3) !important;
display:flex !important;
align-items:center !important;
gap:8px !important;
flex-wrap:wrap !important;
}
body.prof-sicurezza .breadcrumb a:hover{ color:var(--brand) !important; }
body.prof-sicurezza .breadcrumb .sep{ color:var(--line-2) !important; }
body.prof-sicurezza .breadcrumb .current{ color:var(--ink-2) !important; }
/* === PDP main layout === */
body.prof-sicurezza .pdp{
display:grid !important;
grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) !important;
gap:48px !important;
padding:8px 0 32px !important;
}
/* === GALLERY === */
body.prof-sicurezza .gallery{
display:grid !important;
grid-template-columns:84px 1fr !important;
gap:14px !important;
align-items:start !important;
}
body.prof-sicurezza .thumbs{
display:flex !important;
flex-direction:column !important;
gap:8px !important;
}
body.prof-sicurezza .thumb{
width:84px !important; height:84px !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
background:#fff !important;
cursor:pointer !important;
overflow:hidden !important;
position:relative !important;
padding:0 !important;
}
body.prof-sicurezza .thumb.on{
border-color:var(--ink) !important;
box-shadow:0 0 0 2px var(--ink) inset !important;
}
body.prof-sicurezza .thumb:hover{ border-color:var(--ink-2) !important; }
body.prof-sicurezza .thumb .ph{
width:100% !important; height:100% !important;
border:none !important; display:block !important;
}
body.prof-sicurezza .thumb-360{
font-family:'IBM Plex Mono', monospace !important;
font-size:10px !important;
color:var(--ink-2) !important;
font-weight:600 !important;
display:grid !important;
place-items:center !important;
background:var(--bg-2) !important;
height:84px !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
text-align:center !important;
line-height:1.2 !important;
padding:6px !important;
cursor:pointer !important;
}
body.prof-sicurezza .gallery-main{
position:relative !important;
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:var(--radius-lg) !important;
aspect-ratio:1 !important;
overflow:hidden !important;
}
body.prof-sicurezza .gallery-main .ph{
position:absolute !important; inset:0 !important;
border:none !important;
}
body.prof-sicurezza .gallery-main img{
position:absolute !important; inset:0 !important;
width:100% !important; height:100% !important;
object-fit:cover !important;
display:block !important;
}
body.prof-sicurezza .gallery-tags{
position:absolute !important; top:14px !important; left:14px !important;
display:flex !important; flex-direction:column !important; gap:5px !important;
z-index:2 !important;
}
body.prof-sicurezza .gallery-share{
position:absolute !important; top:14px !important; right:14px !important;
display:flex !important; gap:6px !important; z-index:2 !important;
}
body.prof-sicurezza .icon-circle{
width:34px !important; height:34px !important;
border-radius:50% !important;
background:#fff !important;
border:1px solid var(--line) !important;
display:grid !important; place-items:center !important;
color:var(--ink) !important;
cursor:pointer !important;
}
body.prof-sicurezza .icon-circle:hover{ border-color:var(--ink) !important; color:var(--brand) !important; }
body.prof-sicurezza .gallery-counter{
position:absolute !important; bottom:14px !important; left:14px !important;
background:oklch(0.20 0.015 250 / 0.85) !important;
color:#fff !important;
font-family:'IBM Plex Mono', monospace !important;
font-size:10.5px !important;
padding:5px 10px !important;
border-radius:99px !important;
letter-spacing:0.06em !important;
z-index:2 !important;
}
body.prof-sicurezza .gallery-zoom-hint{
position:absolute !important; bottom:14px !important; right:14px !important;
background:oklch(0.20 0.015 250 / 0.85) !important;
color:#fff !important;
font-family:'IBM Plex Mono', monospace !important;
font-size:10.5px !important;
padding:5px 10px !important;
border-radius:99px !important;
display:flex !important; align-items:center !important; gap:6px !important;
z-index:2 !important;
}
body.prof-sicurezza .gallery-arrows{
position:absolute !important; top:50% !important; left:0 !important; right:0 !important;
transform:translateY(-50%) !important;
display:flex !important; justify-content:space-between !important;
padding:0 14px !important; z-index:2 !important;
pointer-events:none !important;
}
body.prof-sicurezza .gallery-arrows .icon-circle{
pointer-events:auto !important;
width:42px !important; height:42px !important;
background:#fff !important;
box-shadow:var(--shadow-sm) !important;
}
/* === INFO column === */
body.prof-sicurezza .info-head{
display:flex !important; align-items:center !important; gap:8px !important;
margin-bottom:10px !important;
flex-wrap:wrap !important;
}
body.prof-sicurezza .info-head .brand-line{
display:flex !important; align-items:center !important; gap:8px !important;
font-family:'IBM Plex Mono', monospace !important;
font-size:11px !important;
color:var(--ink-2) !important;
letter-spacing:0.06em !important;
text-transform:uppercase !important;
}
body.prof-sicurezza .info-head .brand-line b{ color:var(--ink) !important; font-weight:700 !important; }
body.prof-sicurezza .info-head .auth{
background:var(--ok-soft) !important;
color:oklch(0.40 0.12 150) !important;
font-size:10.5px !important;
font-weight:600 !important;
padding:3px 8px !important;
border-radius:99px !important;
letter-spacing:0.04em !important;
text-transform:uppercase !important;
display:flex !important; align-items:center !important; gap:5px !important;
}
body.prof-sicurezza .info-head .auth .dot{
width:5px !important; height:5px !important; border-radius:50% !important;
background:var(--ok) !important;
}
body.prof-sicurezza .info h1,
body.prof-sicurezza .info .product_title{
font-size:30px !important;
line-height:1.15 !important;
letter-spacing:-0.02em !important;
font-weight:700 !important;
margin:0 0 8px !important;
text-wrap:balance !important;
}
body.prof-sicurezza .info .sku{
font-family:'IBM Plex Mono', monospace !important;
font-size:11.5px !important;
color:var(--ink-3) !important;
display:flex !important; gap:14px !important; flex-wrap:wrap !important;
margin-bottom:14px !important;
}
body.prof-sicurezza .info .sku b{ color:var(--ink-2) !important; font-weight:500 !important; }
body.prof-sicurezza .info .rating-row{
display:flex !important; align-items:center !important; gap:14px !important;
font-size:13px !important; color:var(--ink-2) !important;
margin-bottom:18px !important; padding-bottom:18px !important;
border-bottom:1px solid var(--line) !important;
flex-wrap:wrap !important;
}
body.prof-sicurezza .info .rating-row .stars{
color:oklch(0.65 0.16 80) !important;
letter-spacing:1px !important;
font-size:14px !important;
}
body.prof-sicurezza .info .rating-row a{ color:var(--brand) !important; font-weight:600 !important; }
body.prof-sicurezza .info .rating-row .sep{
width:1px !important; height:14px !important; background:var(--line) !important;
}
/* Highlights */
body.prof-sicurezza .highlights{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:10px 22px !important;
margin-bottom:22px !important;
list-style:none !important;
padding:0 !important;
}
body.prof-sicurezza .highlights li{
display:flex !important; align-items:flex-start !important; gap:8px !important;
font-size:13px !important; color:var(--ink-2) !important;
list-style:none !important;
}
body.prof-sicurezza .highlights li svg{
stroke:var(--ok) !important; flex-shrink:0 !important; margin-top:2px !important;
}
/* PRICE BOX */
body.prof-sicurezza .pricebox{
background:var(--bg-2) !important;
border:1px solid var(--line) !important;
border-radius:var(--radius-lg) !important;
padding:20px 22px !important;
margin-bottom:18px !important;
position:relative !important;
}
body.prof-sicurezza .pricebox .deal-line{
display:inline-flex !important; align-items:center !important; gap:8px !important;
background:var(--danger) !important; color:#fff !important;
font-size:11px !important; font-weight:700 !important;
padding:4px 9px !important; border-radius:4px !important;
letter-spacing:0.04em !important; text-transform:uppercase !important;
margin-bottom:10px !important;
}
body.prof-sicurezza .pricebox .deal-line .icon{ stroke:#fff !important; width:13px !important; height:13px !important; }
body.prof-sicurezza .price-main-row{
display:flex !important; align-items:baseline !important; gap:10px !important;
flex-wrap:wrap !important;
}
body.prof-sicurezza .price-main-row .price-now{
font-size:36px !important; font-weight:700 !important;
letter-spacing:-0.025em !important; color:var(--navy) !important;
}
body.prof-sicurezza .price-main-row .price-old{
font-size:16px !important; color:var(--ink-3) !important;
text-decoration:line-through !important;
}
body.prof-sicurezza .price-main-row .price-save{
background:oklch(0.95 0.05 25) !important;
color:oklch(0.42 0.18 25) !important;
font-weight:700 !important; font-size:12px !important;
padding:3px 8px !important; border-radius:4px !important;
}
body.prof-sicurezza .price-meta{
font-size:12.5px !important; color:var(--ink-2) !important; font-weight:500 !important;
margin-top:6px !important;
display:flex !important; gap:14px !important; flex-wrap:wrap !important;
}
body.prof-sicurezza .price-meta b{ color:var(--ink-2) !important; font-weight:500 !important; }
body.prof-sicurezza .price-installments{
margin-top:12px !important; padding-top:12px !important;
border-top:1px dashed var(--line-2) !important;
font-size:12.5px !important; color:var(--ink-2) !important;
display:flex !important; align-items:center !important; gap:8px !important;
flex-wrap:wrap !important;
}
body.prof-sicurezza .pay-mini{
display:inline-flex !important; height:18px !important; padding:0 6px !important;
border-radius:3px !important; background:#fff !important;
border:1px solid var(--line) !important;
font-family:'IBM Plex Mono', monospace !important;
font-size:9px !important; color:var(--ink-2) !important;
align-items:center !important; font-weight:500 !important;
}
body.prof-sicurezza .price-installments b{ color:var(--ink) !important; font-weight:600 !important; }
body.prof-sicurezza .countdown-deal{
margin-top:14px !important; padding:11px 14px !important;
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
display:flex !important; align-items:center !important; gap:14px !important;
font-size:12.5px !important;
}
body.prof-sicurezza .countdown-deal .ic{
width:30px !important; height:30px !important; border-radius:50% !important;
background:var(--danger-soft) !important; color:var(--danger) !important;
display:grid !important; place-items:center !important; flex-shrink:0 !important;
}
body.prof-sicurezza .countdown-deal .txt{ flex:1 !important; }
body.prof-sicurezza .countdown-deal b{ display:block !important; color:var(--ink) !important; font-weight:600 !important; }
body.prof-sicurezza .countdown-deal small{ color:var(--ink-3) !important; font-size:11.5px !important; }
body.prof-sicurezza .countdown-deal .nums{
font-family:'IBM Plex Mono', monospace !important;
font-size:14px !important; font-weight:600 !important;
color:var(--danger) !important; letter-spacing:0.04em !important;
}
/* BUY ROW */
body.prof-sicurezza .buy-row{
display:grid !important;
grid-template-columns:auto 1fr auto !important;
gap:8px !important;
align-items:stretch !important;
margin-top:6px !important;
}
body.prof-sicurezza .qty{
display:flex !important; align-items:center !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
background:#fff !important;
height:52px !important; width:120px !important;
}
body.prof-sicurezza .qty button{
width:38px !important; height:100% !important;
font-size:18px !important; color:var(--ink-2) !important;
background:none !important; border:none !important;
}
body.prof-sicurezza .qty button:hover{ color:var(--ink) !important; }
body.prof-sicurezza .qty input,
body.prof-sicurezza .qty .input-text{
flex:1 !important; text-align:center !important;
border:none !important; outline:none !important;
font:inherit !important; font-size:16px !important;
font-weight:600 !important; width:100% !important;
background:none !important;
}
body.prof-sicurezza .btn-add,
body.prof-sicurezza .info .single_add_to_cart_button{
background:var(--action) !important; color:#fff !important;
border-radius:var(--radius) !important;
font-weight:700 !important; font-size:15px !important;
display:flex !important; align-items:center !important; justify-content:center !important;
gap:8px !important; height:52px !important;
border:none !important; cursor:pointer !important;
padding:0 16px !important;
}
body.prof-sicurezza .btn-add:hover,
body.prof-sicurezza .info .single_add_to_cart_button:hover{ background:var(--action-ink) !important; }
body.prof-sicurezza .btn-icon-square{
width:52px !important; height:52px !important;
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
display:grid !important; place-items:center !important;
color:var(--ink-2) !important; cursor:pointer !important;
}
body.prof-sicurezza .btn-icon-square:hover{ border-color:var(--ink) !important; color:var(--ink) !important; }
body.prof-sicurezza .btn-buy-now{
margin-top:8px !important;
background:var(--ink) !important; color:#fff !important;
border-radius:var(--radius) !important;
font-weight:600 !important; font-size:14px !important;
padding:13px !important;
display:flex !important; align-items:center !important; justify-content:center !important;
gap:8px !important; width:100% !important;
border:none !important; cursor:pointer !important;
}
body.prof-sicurezza .btn-buy-now:hover{ background:oklch(0.30 0.02 250) !important; }
/* STOCK + DELIVERY */
body.prof-sicurezza .stock-block{
margin-top:18px !important; padding:14px !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
background:#fff !important;
display:flex !important; flex-direction:column !important; gap:10px !important;
}
body.prof-sicurezza .stock-row{
display:flex !important; align-items:center !important; gap:10px !important;
font-size:13px !important;
}
body.prof-sicurezza .stock-row .ic{
width:30px !important; height:30px !important;
border-radius:50% !important;
display:grid !important; place-items:center !important;
flex-shrink:0 !important;
}
body.prof-sicurezza .stock-row .ic.ok{ background:var(--ok-soft) !important; color:oklch(0.40 0.12 150) !important; }
body.prof-sicurezza .stock-row .ic.brand-c{ background:var(--brand-soft) !important; color:var(--brand) !important; }
body.prof-sicurezza .stock-row b{ font-weight:600 !important; color:var(--ink) !important; display:block !important; }
body.prof-sicurezza .stock-row small{ color:var(--ink-3) !important; font-size:11.5px !important; display:block !important; }
body.prof-sicurezza .stock-row .right{
margin-left:auto !important;
color:var(--brand) !important;
font-weight:600 !important; font-size:12px !important;
}
body.prof-sicurezza .pickup-block{
font-size:12.5px !important; color:var(--ink-2) !important;
padding:11px 14px !important;
background:var(--brand-soft) !important;
border:1px solid oklch(0.85 0.05 250) !important;
border-radius:var(--radius) !important;
display:flex !important; align-items:center !important; gap:10px !important;
margin-top:8px !important;
}
body.prof-sicurezza .pickup-block .icon{ stroke:var(--brand) !important; }
body.prof-sicurezza .pickup-block a{
color:var(--brand) !important; font-weight:600 !important;
margin-left:auto !important; white-space:nowrap !important;
}
/* Trust strip mini */
body.prof-sicurezza .trust-strip{
display:grid !important;
grid-template-columns:repeat(3,1fr) !important;
gap:8px !important; margin-top:14px !important;
}
body.prof-sicurezza .trust-strip > div{
padding:10px 8px !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
background:#fff !important;
text-align:center !important;
display:flex !important; flex-direction:column !important;
align-items:center !important; gap:4px !important;
}
body.prof-sicurezza .trust-strip svg{
stroke:var(--brand) !important; width:18px !important; height:18px !important;
fill:none !important;
}
body.prof-sicurezza .trust-strip b{ font-size:11.5px !important; color:var(--ink) !important; font-weight:600 !important; }
body.prof-sicurezza .trust-strip small{ font-size:10.5px !important; color:var(--ink-3) !important; }
/* === PDP SECTION === */
body.prof-sicurezza .pdp-section{
padding:48px 0 !important;
border-top:1px solid var(--line) !important;
}
body.prof-sicurezza .pdp-section.first{ border-top:none !important; }
body.prof-sicurezza .pdp-section .lbl{
font-family:'IBM Plex Mono', monospace !important;
font-size:11px !important;
color:var(--brand) !important;
letter-spacing:0.12em !important;
text-transform:uppercase !important;
margin-bottom:8px !important;
}
body.prof-sicurezza .pdp-section h2{
font-size:26px !important;
line-height:1.15 !important;
letter-spacing:-0.02em !important;
font-weight:700 !important;
margin-bottom:18px !important;
text-wrap:balance !important;
}
/* DESCRIPTION */
body.prof-sicurezza .desc-grid{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:48px !important;
align-items:start !important;
}
body.prof-sicurezza .desc-grid .copy p{
font-size:14.5px !important;
color:var(--ink-2) !important;
line-height:1.6 !important;
margin-bottom:14px !important;
text-wrap:pretty !important;
}
body.prof-sicurezza .desc-grid .copy p strong{ color:var(--ink) !important; font-weight:600 !important; }
body.prof-sicurezza .desc-image{
position:relative !important;
border-radius:var(--radius-lg) !important;
overflow:hidden !important;
aspect-ratio:5/6 !important;
background:#000 !important;
}
body.prof-sicurezza .desc-image .ph{
position:absolute !important; inset:0 !important; border:none !important;
}
body.prof-sicurezza .desc-image .caption{
position:absolute !important;
left:18px !important; bottom:18px !important; right:18px !important;
color:#fff !important; z-index:2 !important;
}
body.prof-sicurezza .desc-image .caption .tag{
font-family:'IBM Plex Mono', monospace !important;
font-size:10px !important;
color:oklch(0.85 0.10 250) !important;
letter-spacing:0.1em !important;
text-transform:uppercase !important;
margin-bottom:6px !important;
display:block !important;
}
body.prof-sicurezza .desc-image .caption b{
font-size:18px !important;
font-weight:600 !important;
letter-spacing:-0.01em !important;
line-height:1.2 !important;
display:block !important;
}
body.prof-sicurezza .desc-image::after{
content:"" !important;
position:absolute !important; inset:0 !important;
background:linear-gradient(180deg,transparent 40%,oklch(0.13 0.02 250 / 0.8)) !important;
z-index:1 !important;
}
/* SPECS table 2x4 (4 colonne k/v k/v) */
body.prof-sicurezza .specs-table-wide{
display:grid !important;
grid-template-columns:1fr 1.4fr 1fr 1.4fr !important;
gap:0 !important;
border:1px solid var(--line) !important;
border-radius:var(--radius-lg) !important;
overflow:hidden !important;
background:#fff !important;
}
body.prof-sicurezza .specs-table-wide > div{
padding:11px 14px !important;
font-size:13px !important;
border-top:1px solid var(--line) !important;
}
body.prof-sicurezza .specs-table-wide > div:nth-child(-n+4){ border-top:none !important; }
body.prof-sicurezza .specs-table-wide .k{
color:var(--ink-3) !important;
background:var(--bg-2) !important;
border-right:1px solid var(--line) !important;
}
body.prof-sicurezza .specs-table-wide .v{
color:var(--ink) !important;
font-weight:500 !important;
}
/* REVIEWS */
body.prof-sicurezza .reviews-grid{
display:grid !important;
grid-template-columns:300px 1fr !important;
gap:48px !important;
align-items:start !important;
}
body.prof-sicurezza .review-summary .big-score{
font-size:54px !important;
font-weight:700 !important;
letter-spacing:-0.03em !important;
line-height:1 !important;
}
body.prof-sicurezza .review-summary .big-score sub{
font-size:18px !important;
color:var(--ink-3) !important;
font-weight:500 !important;
letter-spacing:0 !important;
}
body.prof-sicurezza .review-summary .stars-big{
font-size:18px !important;
color:oklch(0.65 0.16 80) !important;
letter-spacing:2px !important;
margin-top:6px !important;
display:block !important;
}
body.prof-sicurezza .review-summary .total{
font-size:12.5px !important;
color:var(--ink-3) !important;
margin-top:4px !important;
}
body.prof-sicurezza .stars-bar{
display:grid !important;
grid-template-columns:auto 1fr auto !important;
gap:8px !important;
align-items:center !important;
margin-top:14px !important;
font-size:11.5px !important;
color:var(--ink-3) !important;
}
body.prof-sicurezza .stars-bar > span:first-child{
font-family:'IBM Plex Mono', monospace !important;
}
body.prof-sicurezza .stars-bar .bar{
height:6px !important;
background:var(--bg-3) !important;
border-radius:3px !important;
overflow:hidden !important;
}
body.prof-sicurezza .stars-bar .bar > div{
height:100% !important;
background:oklch(0.65 0.16 80) !important;
border-radius:3px !important;
}
body.prof-sicurezza .stars-bar .num{
font-family:'IBM Plex Mono', monospace !important;
color:var(--ink-2) !important;
text-align:right !important;
min-width:36px !important;
}
body.prof-sicurezza .review{
padding:18px 0 !important;
border-top:1px solid var(--line) !important;
}
body.prof-sicurezza .review:first-child{
border-top:none !important;
padding-top:6px !important;
}
body.prof-sicurezza .review-head{
display:flex !important; align-items:center !important; gap:10px !important;
margin-bottom:8px !important;
}
body.prof-sicurezza .review-head .av{
width:36px !important; height:36px !important;
border-radius:50% !important;
background:var(--brand-soft) !important;
color:var(--brand) !important;
display:grid !important; place-items:center !important;
font-weight:700 !important; font-size:12px !important;
}
body.prof-sicurezza .review-head .who{ flex:1 !important; font-size:13px !important; }
body.prof-sicurezza .review-head .who b{ font-weight:600 !important; display:block !important; }
body.prof-sicurezza .review-head .who small{
font-size:11.5px !important; color:var(--ink-3) !important;
display:flex !important; gap:8px !important; align-items:center !important;
}
body.prof-sicurezza .review-head .when{
font-size:11.5px !important; color:var(--ink-3) !important;
font-family:'IBM Plex Mono', monospace !important;
}
body.prof-sicurezza .review-stars{
font-size:13px !important;
color:oklch(0.65 0.16 80) !important;
letter-spacing:1px !important;
margin-bottom:6px !important;
display:block !important;
}
body.prof-sicurezza .review h4{
font-size:14px !important;
font-weight:600 !important;
margin:0 0 6px !important;
}
body.prof-sicurezza .review p{
font-size:13.5px !important;
color:var(--ink-2) !important;
line-height:1.55 !important;
text-wrap:pretty !important;
margin:0 !important;
}
/* INSTALLER CTA */
body.prof-sicurezza .installer-cta{
background:var(--ink) !important;
color:#fff !important;
border-radius:var(--radius-lg) !important;
padding:32px !important;
display:grid !important;
grid-template-columns:auto 1fr auto !important;
gap:24px !important;
align-items:center !important;
}
body.prof-sicurezza .installer-cta .av{
width:64px !important; height:64px !important;
border-radius:50% !important;
background:oklch(0.45 0.10 150) !important;
border:3px solid oklch(0.65 0.10 150) !important;
display:grid !important; place-items:center !important;
font-size:18px !important; font-weight:700 !important;
}
body.prof-sicurezza .installer-cta h3{
font-size:22px !important;
line-height:1.2 !important;
letter-spacing:-0.01em !important;
font-weight:700 !important;
margin:0 0 6px !important;
text-wrap:balance !important;
}
body.prof-sicurezza .installer-cta p{
color:oklch(0.78 0.005 80) !important;
font-size:13.5px !important;
max-width:520px !important;
margin:0 !important;
}
body.prof-sicurezza .installer-cta .btns{
display:flex !important;
flex-direction:column !important;
gap:8px !important;
}
body.prof-sicurezza .installer-cta .btn-primary-light{
background:#fff !important; color:var(--ink) !important;
}
body.prof-sicurezza .installer-cta .btn-primary-light:hover{
background:oklch(0.92 0.02 250) !important;
}
/* RELATED grid */
body.prof-sicurezza .products-related{
display:grid !important;
grid-template-columns:repeat(4,1fr) !important;
gap:16px !important;
}
/* ============================================================
PDP RESPONSIVE
============================================================ */
@media (max-width:1024px){
body.prof-sicurezza .pdp{
grid-template-columns:1fr !important;
gap:32px !important;
}
body.prof-sicurezza .desc-grid{
grid-template-columns:1fr !important;
gap:24px !important;
}
body.prof-sicurezza .reviews-grid{
grid-template-columns:1fr !important;
gap:32px !important;
}
body.prof-sicurezza .specs-table-wide{
grid-template-columns:1fr 1.4fr !important;
}
body.prof-sicurezza .specs-table-wide > div:nth-child(-n+2){ border-top:none !important; }
body.prof-sicurezza .specs-table-wide > div:nth-child(n+3){ border-top:1px solid var(--line) !important; }
body.prof-sicurezza .products-related{
grid-template-columns:repeat(3,1fr) !important;
}
}
@media (max-width:768px){
body.prof-sicurezza .gallery{
grid-template-columns:1fr !important;
}
body.prof-sicurezza .thumbs{
flex-direction:row !important;
overflow-x:auto !important;
scrollbar-width:none !important;
}
body.prof-sicurezza .thumbs::-webkit-scrollbar{ display:none !important; }
body.prof-sicurezza .info h1,
body.prof-sicurezza .info .product_title{
font-size:24px !important;
}
body.prof-sicurezza .highlights{
grid-template-columns:1fr !important;
}
body.prof-sicurezza .price-main-row .price-now{
font-size:30px !important;
}
body.prof-sicurezza .installer-cta{
grid-template-columns:1fr !important;
text-align:center !important;
padding:24px !important;
}
body.prof-sicurezza .installer-cta .av{ margin:0 auto !important; }
body.prof-sicurezza .installer-cta p{ margin:0 auto !important; }
body.prof-sicurezza .installer-cta .btns{ align-items:center !important; }
body.prof-sicurezza .products-related{
display:flex !important;
flex-direction:row !important;
overflow-x:auto !important;
scroll-snap-type:x mandatory !important;
gap:12px !important;
padding:4px 16px 12px !important;
margin:0 -16px !important;
grid-template-columns:none !important;
scrollbar-width:none !important;
}
body.prof-sicurezza .products-related::-webkit-scrollbar{ display:none !important; }
body.prof-sicurezza .products-related > .product{
flex:0 0 78% !important;
max-width:78% !important;
scroll-snap-align:start !important;
}
body.prof-sicurezza .specs-table-wide{
grid-template-columns:1fr !important;
}
body.prof-sicurezza .specs-table-wide > div{
border-top:1px solid var(--line) !important;
}
body.prof-sicurezza .specs-table-wide > div:first-child{ border-top:none !important; }
body.prof-sicurezza .specs-table-wide .k{ border-right:none !important; }
body.prof-sicurezza .pdp-section{ padding:32px 0 !important; }
body.prof-sicurezza .pdp-section h2{ font-size:22px !important; }
}
@media (max-width:480px){
body.prof-sicurezza .info h1,
body.prof-sicurezza .info .product_title{
font-size:22px !important;
}
body.prof-sicurezza .buy-row{
grid-template-columns:auto 1fr !important;
}
body.prof-sicurezza .buy-row .btn-icon-square{
grid-column:span 2 !important;
width:auto !important;
}
body.prof-sicurezza .trust-strip{
grid-template-columns:1fr !important;
}
body.prof-sicurezza .trust-strip > div{
flex-direction:row !important;
justify-content:flex-start !important;
text-align:left !important;
}
}
/* ============================================================
v8 — Product images in CONTAIN mode (no cropping)
I tuoi prodotti (XVR/NVR/etc.) sono orizzontali e venivano
tagliati dal cover. Contain mostra l'immagine intera con
padding di sfondo bianco.
============================================================ */
/* PDP gallery main image */
body.prof-sicurezza .gallery-main .ph,
body.prof-sicurezza .gallery-main .imgbg,
body.prof-sicurezza .gallery-main img{
background-size:contain !important;
background-color:#fff !important;
background-repeat:no-repeat !important;
background-position:center !important;
object-fit:contain !important;
padding:16px !important;
box-sizing:border-box !important;
}
/* PDP gallery thumbnails */
body.prof-sicurezza .thumb .ph,
body.prof-sicurezza .thumb .imgbg{
background-size:contain !important;
background-color:#fff !important;
background-repeat:no-repeat !important;
background-position:center !important;
padding:6px !important;
box-sizing:border-box !important;
}
/* Product cards (bestseller, nuovi, related, ecc.) */
body.prof-sicurezza .product .ph,
body.prof-sicurezza .product .imgbg,
body.prof-sicurezza .product .product-img,
body.prof-sicurezza .product .product-img img,
body.prof-sicurezza ul.products li.product .ph,
body.prof-sicurezza ul.products li.product .imgbg{
background-size:contain !important;
background-color:#fff !important;
background-repeat:no-repeat !important;
background-position:center !important;
object-fit:contain !important;
padding:12px !important;
box-sizing:border-box !important;
}
/* Recently viewed cards */
body.prof-sicurezza .recent .ph,
body.prof-sicurezza .recent .imgbg{
background-size:contain !important;
background-color:#fff !important;
background-repeat:no-repeat !important;
background-position:center !important;
padding:10px !important;
box-sizing:border-box !important;
}
/* Eccezioni: category cards e brand banners restano COVER
(sono immagini "scene" che funzionano meglio piene) */
body.prof-sicurezza .cat-feat .ph,
body.prof-sicurezza .cat-feat .imgbg,
body.prof-sicurezza .cat-card .ph,
body.prof-sicurezza .cat-card .imgbg,
body.prof-sicurezza .hero-bg-img .ph,
body.prof-sicurezza .hero-bg-img .imgbg,
body.prof-sicurezza .banner .ph,
body.prof-sicurezza .banner .imgbg,
body.prof-sicurezza .desc-image .ph,
body.prof-sicurezza .desc-image .imgbg,
body.prof-sicurezza .cat-hero-img .ph,
body.prof-sicurezza .cat-hero-img .imgbg{
background-size:cover !important;
background-color:transparent !important;
padding:0 !important;
}
/* ============================================================
v9 — PAGINA CATEGORIA + MEGA MENU
============================================================ */
/* === CATEGORY HERO === */
body.prof-sicurezza .cat-hero{
display:grid !important;
grid-template-columns:1.1fr 1fr !important;
gap:32px !important;
align-items:stretch !important;
padding:0 0 32px !important;
}
body.prof-sicurezza .cat-hero-text{
display:flex !important; flex-direction:column !important;
justify-content:center !important;
gap:14px !important;
}
body.prof-sicurezza .cat-hero-text .lbl{
font-family:'IBM Plex Mono', monospace !important;
font-size:11px !important;
color:var(--brand) !important;
letter-spacing:0.12em !important;
text-transform:uppercase !important;
}
body.prof-sicurezza .cat-hero-text h1{
font-size:44px !important;
line-height:1.05 !important;
letter-spacing:-0.025em !important;
font-weight:700 !important;
text-wrap:balance !important;
margin:0 !important;
}
body.prof-sicurezza .cat-hero-text p{
font-size:15px !important;
color:var(--ink-2) !important;
max-width:520px !important;
line-height:1.55 !important;
text-wrap:pretty !important;
margin:0 !important;
}
body.prof-sicurezza .cat-hero-stats{
display:flex !important;
gap:28px !important;
margin-top:8px !important;
padding-top:16px !important;
border-top:1px solid var(--line) !important;
flex-wrap:wrap !important;
}
body.prof-sicurezza .cat-hero-stats > div{
display:flex !important; flex-direction:column !important; gap:2px !important;
}
body.prof-sicurezza .cat-hero-stats b{
font-size:18px !important;
font-weight:700 !important;
letter-spacing:-0.015em !important;
}
body.prof-sicurezza .cat-hero-stats small{
font-size:11.5px !important;
color:var(--ink-3) !important;
}
body.prof-sicurezza .cat-hero-img{
position:relative !important;
border-radius:var(--radius-lg) !important;
overflow:hidden !important;
min-height:280px !important;
background:#000 !important;
}
body.prof-sicurezza .cat-hero-img .ph,
body.prof-sicurezza .cat-hero-img .imgbg{
position:absolute !important;
inset:0 !important;
border:none !important;
background-size:cover !important;
background-color:transparent !important;
}
body.prof-sicurezza .cat-hero-img::after{
content:"" !important;
position:absolute !important;
inset:0 !important;
background:linear-gradient(135deg,transparent 50%,oklch(0.13 0.02 250 / 0.5)) !important;
z-index:1 !important;
}
body.prof-sicurezza .cat-hero-img .floating-info{
position:absolute !important;
left:18px !important;
bottom:18px !important;
color:#fff !important;
z-index:2 !important;
font-family:'IBM Plex Mono', monospace !important;
font-size:11px !important;
letter-spacing:0.1em !important;
text-transform:uppercase !important;
display:flex !important;
align-items:center !important;
gap:8px !important;
}
body.prof-sicurezza .cat-hero-img .floating-info .rec{
width:7px !important; height:7px !important;
border-radius:50% !important;
background:oklch(0.65 0.20 25) !important;
box-shadow:0 0 0 3px oklch(0.65 0.20 25 / 0.25) !important;
animation:ps-pulse 1.6s ease-in-out infinite !important;
}
/* === SUB-CATEGORIES strip === */
body.prof-sicurezza .subcats{
display:flex !important;
gap:8px !important;
overflow-x:auto !important;
padding:14px 0 !important;
margin-bottom:24px !important;
border-top:1px solid var(--line) !important;
border-bottom:1px solid var(--line) !important;
scrollbar-width:none !important;
}
body.prof-sicurezza .subcats::-webkit-scrollbar{ display:none !important; }
body.prof-sicurezza .subcat{
flex-shrink:0 !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
padding:10px 16px 10px 12px !important;
border:1px solid var(--line) !important;
border-radius:99px !important;
background:#fff !important;
font-size:13px !important;
font-weight:500 !important;
color:var(--ink) !important;
white-space:nowrap !important;
}
body.prof-sicurezza .subcat:hover{ border-color:var(--ink-2) !important; }
body.prof-sicurezza .subcat.on{
background:var(--ink) !important;
color:#fff !important;
border-color:var(--ink) !important;
}
body.prof-sicurezza .subcat .ic{
width:24px !important; height:24px !important;
border-radius:50% !important;
background:var(--brand-soft) !important;
color:var(--brand) !important;
display:grid !important; place-items:center !important;
flex-shrink:0 !important;
}
body.prof-sicurezza .subcat.on .ic{
background:oklch(0.30 0.02 250) !important; color:#fff !important;
}
body.prof-sicurezza .subcat small{
font-family:'IBM Plex Mono', monospace !important;
font-size:10.5px !important;
color:var(--ink-3) !important;
font-weight:400 !important;
margin-left:2px !important;
}
body.prof-sicurezza .subcat.on small{ color:oklch(0.78 0.005 80) !important; }
/* === LISTING LAYOUT === */
body.prof-sicurezza .listing{
display:grid !important;
grid-template-columns:264px 1fr !important;
gap:32px !important;
align-items:start !important;
padding-bottom:48px !important;
}
/* === SIDEBAR FILTERS === */
body.prof-sicurezza .filters-side{
position:sticky !important;
top:124px !important;
display:flex !important;
flex-direction:column !important;
gap:0 !important;
border:1px solid var(--line) !important;
border-radius:var(--radius-lg) !important;
background:#fff !important;
overflow:hidden !important;
}
body.prof-sicurezza .filters-head{
padding:14px 16px !important;
border-bottom:1px solid var(--line) !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
font-size:13px !important;
font-weight:600 !important;
}
body.prof-sicurezza .filters-head a{
font-size:12px !important;
color:var(--brand) !important;
font-weight:600 !important;
}
body.prof-sicurezza .filter-block{
padding:16px !important;
border-bottom:1px solid var(--line) !important;
}
body.prof-sicurezza .filter-block:last-child{ border-bottom:none !important; }
body.prof-sicurezza .filter-block h4{
font-size:12px !important;
font-family:'IBM Plex Mono', monospace !important;
color:var(--ink-3) !important;
letter-spacing:0.1em !important;
text-transform:uppercase !important;
margin:0 0 10px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
}
body.prof-sicurezza .filter-block h4 .ct{
color:var(--ink-3) !important;
font-weight:400 !important;
text-transform:none !important;
letter-spacing:0 !important;
font-family:'Inter Tight', sans-serif !important;
font-size:11px !important;
}
body.prof-sicurezza .filter-list{
display:flex !important;
flex-direction:column !important;
gap:6px !important;
max-height:200px !important;
overflow-y:auto !important;
}
body.prof-sicurezza .filter-list label{
display:flex !important;
align-items:center !important;
gap:8px !important;
font-size:13px !important;
color:var(--ink-2) !important;
cursor:pointer !important;
padding:3px 0 !important;
}
body.prof-sicurezza .filter-list label:hover{ color:var(--ink) !important; }
body.prof-sicurezza .filter-list input[type="checkbox"]{
width:15px !important; height:15px !important;
accent-color:var(--ink) !important;
flex-shrink:0 !important;
margin:0 !important;
}
body.prof-sicurezza .filter-list .num{
font-family:'IBM Plex Mono', monospace !important;
font-size:10.5px !important;
color:var(--ink-3) !important;
margin-left:auto !important;
}
/* Price filter */
body.prof-sicurezza .price-range{
display:flex !important;
flex-direction:column !important;
gap:10px !important;
}
body.prof-sicurezza .price-inputs{
display:grid !important;
grid-template-columns:1fr auto 1fr !important;
gap:6px !important;
align-items:center !important;
}
body.prof-sicurezza .price-inputs input{
padding:7px 10px !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
font:inherit !important;
font-size:12px !important;
width:100% !important;
outline:none !important;
background:var(--bg-2) !important;
font-family:'IBM Plex Mono', monospace !important;
}
body.prof-sicurezza .price-inputs input:focus{
border-color:var(--ink) !important;
background:#fff !important;
}
body.prof-sicurezza .price-inputs span{
color:var(--ink-3) !important;
font-size:12px !important;
}
/* Active filters pills */
body.prof-sicurezza .active-filters{
display:flex !important;
flex-wrap:wrap !important;
gap:6px !important;
margin-bottom:14px !important;
}
body.prof-sicurezza .active-pill{
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
padding:6px 8px 6px 12px !important;
background:var(--ink) !important;
color:#fff !important;
border-radius:99px !important;
font-size:12px !important;
font-weight:500 !important;
text-decoration:none !important;
}
body.prof-sicurezza .active-pill .x{
display:grid !important; place-items:center !important;
width:18px !important; height:18px !important;
border-radius:50% !important;
background:oklch(0.30 0.02 250) !important;
color:#fff !important;
font-size:11px !important;
}
body.prof-sicurezza .active-clear{
font-size:12px !important;
color:var(--brand) !important;
font-weight:600 !important;
padding:6px 8px !important;
}
/* TOOLBAR */
body.prof-sicurezza .toolbar{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:14px !important;
padding:10px 0 !important;
margin-bottom:16px !important;
border-bottom:1px solid var(--line) !important;
flex-wrap:wrap !important;
}
body.prof-sicurezza .toolbar .count{
font-size:13px !important; color:var(--ink-2) !important;
}
body.prof-sicurezza .toolbar .count b{
color:var(--ink) !important; font-weight:600 !important;
}
body.prof-sicurezza .toolbar-right{
display:flex !important;
gap:10px !important;
align-items:center !important;
}
body.prof-sicurezza .sort-select{
padding:8px 32px 8px 12px !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
background:#fff !important;
font:inherit !important;
font-size:13px !important;
color:var(--ink) !important;
appearance:none !important;
background-image:url("data:image/svg+xml;utf8,") !important;
background-repeat:no-repeat !important;
background-position:right 8px center !important;
background-size:14px !important;
cursor:pointer !important;
}
body.prof-sicurezza .view-toggle{
display:flex !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
overflow:hidden !important;
background:#fff !important;
}
body.prof-sicurezza .view-toggle button{
padding:8px 10px !important;
color:var(--ink-3) !important;
border-right:1px solid var(--line) !important;
background:transparent !important;
}
body.prof-sicurezza .view-toggle button:last-child{ border-right:none !important; }
body.prof-sicurezza .view-toggle button.on{
background:var(--bg-3) !important;
color:var(--ink) !important;
}
/* PRODUCTS grid 3-col (categoria) */
body.prof-sicurezza .cat-products{
display:grid !important;
grid-template-columns:repeat(3,1fr) !important;
gap:16px !important;
}
/* PROMO inline tile */
body.prof-sicurezza .promo-tile{
grid-column:span 1 !important;
background:linear-gradient(135deg, oklch(0.22 0.03 250) 0%, oklch(0.30 0.06 250) 100%) !important;
color:#fff !important;
border-radius:var(--radius-lg) !important;
padding:22px !important;
display:flex !important;
flex-direction:column !important;
justify-content:space-between !important;
min-height:100% !important;
position:relative !important;
overflow:hidden !important;
text-decoration:none !important;
}
body.prof-sicurezza .promo-tile .ph,
body.prof-sicurezza .promo-tile .imgbg{
position:absolute !important;
right:-30px !important;
bottom:-30px !important;
width:160px !important;
height:160px !important;
border-radius:50% !important;
border:none !important;
opacity:0.4 !important;
background-color:transparent !important;
padding:0 !important;
background-size:cover !important;
}
body.prof-sicurezza .promo-tile .tag{
font-family:'IBM Plex Mono', monospace !important;
font-size:10px !important;
letter-spacing:0.12em !important;
text-transform:uppercase !important;
color:oklch(0.85 0.10 250) !important;
margin-bottom:8px !important;
}
body.prof-sicurezza .promo-tile h3{
font-size:22px !important;
line-height:1.1 !important;
letter-spacing:-0.015em !important;
font-weight:700 !important;
text-wrap:balance !important;
position:relative !important;
z-index:2 !important;
margin:0 !important;
}
body.prof-sicurezza .promo-tile p{
font-size:13px !important;
color:oklch(0.85 0.005 80) !important;
margin:8px 0 0 !important;
position:relative !important;
z-index:2 !important;
}
body.prof-sicurezza .promo-tile .btn{
margin-top:16px !important;
background:#fff !important;
color:var(--ink) !important;
align-self:flex-start !important;
position:relative !important;
z-index:2 !important;
}
/* PAGINATION */
body.prof-sicurezza .pagination{
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
padding:24px 0 !important;
border-top:1px solid var(--line) !important;
margin-top:32px !important;
flex-wrap:wrap !important;
gap:14px !important;
}
body.prof-sicurezza .pagination .page-numbers,
body.prof-sicurezza .pagination > nav{
display:flex !important;
gap:4px !important;
}
body.prof-sicurezza .pagination .page-numbers a,
body.prof-sicurezza .pagination .page-numbers span{
display:grid !important;
place-items:center !important;
min-width:36px !important;
height:36px !important;
padding:0 10px !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
font-size:13px !important;
font-weight:500 !important;
color:var(--ink-2) !important;
background:#fff !important;
text-decoration:none !important;
}
body.prof-sicurezza .pagination .page-numbers a:hover{
border-color:var(--ink-2) !important;
color:var(--ink) !important;
}
body.prof-sicurezza .pagination .page-numbers .current,
body.prof-sicurezza .pagination .page-numbers a.on{
background:var(--ink) !important;
color:#fff !important;
border-color:var(--ink) !important;
}
body.prof-sicurezza .pagination .page-numbers .dots{
border:none !important;
background:transparent !important;
color:var(--ink-3) !important;
}
body.prof-sicurezza .page-info{
font-size:12.5px !important;
color:var(--ink-3) !important;
font-family:'IBM Plex Mono', monospace !important;
}
/* GUIDE BAND */
body.prof-sicurezza .guide-band{
background:var(--bg-2) !important;
border-top:1px solid var(--line) !important;
padding:48px 0 !important;
}
body.prof-sicurezza .guide-grid{
display:grid !important;
grid-template-columns:1fr 1fr 1fr !important;
gap:24px !important;
}
body.prof-sicurezza .guide-card{
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:var(--radius-lg) !important;
padding:22px !important;
display:flex !important;
flex-direction:column !important;
gap:8px !important;
}
body.prof-sicurezza .guide-card:hover{
border-color:var(--ink-2) !important;
box-shadow:var(--shadow-sm) !important;
}
body.prof-sicurezza .guide-card .ic{
width:42px !important; height:42px !important;
border-radius:8px !important;
background:var(--brand-soft) !important;
color:var(--brand) !important;
display:grid !important; place-items:center !important;
margin-bottom:6px !important;
}
body.prof-sicurezza .guide-card b{
font-size:15px !important;
font-weight:600 !important;
letter-spacing:-0.005em !important;
}
body.prof-sicurezza .guide-card p{
font-size:13px !important;
color:var(--ink-2) !important;
line-height:1.5 !important;
text-wrap:pretty !important;
margin:0 !important;
}
body.prof-sicurezza .guide-card .guide-link{
font-size:12.5px !important;
color:var(--brand) !important;
font-weight:600 !important;
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
margin-top:auto !important;
padding-top:8px !important;
align-self:flex-start !important;
}
/* SEO BLOCK */
body.prof-sicurezza .seo-block{
padding:48px 0 !important;
border-top:1px solid var(--line) !important;
}
body.prof-sicurezza .seo-block h2{
font-size:22px !important;
line-height:1.2 !important;
letter-spacing:-0.015em !important;
font-weight:700 !important;
margin:0 0 14px !important;
}
body.prof-sicurezza .seo-block p{
font-size:13.5px !important;
color:var(--ink-2) !important;
line-height:1.6 !important;
max-width:780px !important;
margin:0 0 10px !important;
text-wrap:pretty !important;
}
/* ============================================================
MEGA MENU
============================================================ */
body.prof-sicurezza nav.cats .nav-list a{
position:relative !important;
}
body.prof-sicurezza .mega{
position:absolute !important;
top:100% !important;
left:0 !important;
right:0 !important;
background:#fff !important;
border-top:1px solid var(--line) !important;
border-bottom:1px solid var(--line) !important;
box-shadow:var(--shadow-md) !important;
z-index:40 !important;
padding:32px 0 !important;
display:none !important;
}
body.prof-sicurezza nav.cats .nav-list .has-mega:hover > .mega,
body.prof-sicurezza nav.cats .nav-list .has-mega:focus-within > .mega{
display:block !important;
}
body.prof-sicurezza .mega-grid{
max-width:var(--container-max, 1320px) !important;
margin:0 auto !important;
padding:0 32px !important;
display:grid !important;
grid-template-columns:2fr 1fr 1fr !important;
gap:32px !important;
box-sizing:border-box !important;
}
body.prof-sicurezza .mega-col h5{
font-family:'IBM Plex Mono', monospace !important;
font-size:11px !important;
color:var(--brand) !important;
letter-spacing:0.1em !important;
text-transform:uppercase !important;
margin:0 0 12px !important;
font-weight:600 !important;
}
body.prof-sicurezza .mega-subs{
list-style:none !important;
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:8px 16px !important;
padding:0 !important;
margin:0 !important;
}
body.prof-sicurezza .mega-subs li{
list-style:none !important;
margin:0 !important;
}
body.prof-sicurezza .mega-subs a{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
padding:8px 10px !important;
font-size:13px !important;
color:var(--ink) !important;
border-radius:var(--radius) !important;
font-weight:500 !important;
}
body.prof-sicurezza .mega-subs a:hover{
background:var(--bg-2) !important;
color:var(--brand) !important;
}
body.prof-sicurezza .mega-subs a small{
font-family:'IBM Plex Mono', monospace !important;
font-size:10.5px !important;
color:var(--ink-3) !important;
font-weight:400 !important;
}
body.prof-sicurezza .mega-brands{
list-style:none !important;
display:flex !important;
flex-direction:column !important;
gap:6px !important;
padding:0 !important;
margin:0 !important;
}
body.prof-sicurezza .mega-brands a{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
padding:6px 10px !important;
font-size:13px !important;
color:var(--ink-2) !important;
border-radius:var(--radius) !important;
}
body.prof-sicurezza .mega-brands a:hover{ color:var(--ink) !important; background:var(--bg-2) !important; }
body.prof-sicurezza .mega-promo{
position:relative !important;
border-radius:var(--radius-lg) !important;
overflow:hidden !important;
min-height:180px !important;
background:linear-gradient(135deg, var(--brand-soft), oklch(0.94 0.04 250)) !important;
padding:20px !important;
display:flex !important;
flex-direction:column !important;
justify-content:flex-end !important;
text-decoration:none !important;
}
body.prof-sicurezza .mega-promo .tag{
font-family:'IBM Plex Mono', monospace !important;
font-size:10.5px !important;
color:var(--brand) !important;
letter-spacing:0.1em !important;
text-transform:uppercase !important;
font-weight:600 !important;
}
body.prof-sicurezza .mega-promo b{
font-size:16px !important;
font-weight:700 !important;
color:var(--ink) !important;
display:block !important;
margin-top:4px !important;
}
body.prof-sicurezza .mega-promo .link{
font-size:12px !important;
color:var(--brand) !important;
font-weight:600 !important;
margin-top:8px !important;
}
/* ============================================================
PAGINA CATEGORIA RESPONSIVE
============================================================ */
@media (max-width:1024px){
body.prof-sicurezza .cat-hero{
grid-template-columns:1fr !important;
gap:24px !important;
}
body.prof-sicurezza .cat-hero-text h1{ font-size:34px !important; }
body.prof-sicurezza .listing{
grid-template-columns:1fr !important;
gap:24px !important;
}
body.prof-sicurezza .filters-side{
position:static !important;
}
body.prof-sicurezza .cat-products{
grid-template-columns:repeat(2,1fr) !important;
}
body.prof-sicurezza .guide-grid{
grid-template-columns:1fr 1fr !important;
}
/* Mega menu disabled on tablet/mobile */
body.prof-sicurezza .mega{ display:none !important; }
}
@media (max-width:768px){
body.prof-sicurezza .cat-hero-text h1{ font-size:26px !important; }
body.prof-sicurezza .cat-hero-img{ min-height:200px !important; }
body.prof-sicurezza .filters-head{
cursor:pointer !important;
}
body.prof-sicurezza .filters-side.collapsed .filter-block,
body.prof-sicurezza .filters-side.collapsed .price-range,
body.prof-sicurezza .filters-side.collapsed .filter-list,
body.prof-sicurezza .filters-side.collapsed .price-inputs{
display:none !important;
}
body.prof-sicurezza .cat-products{
grid-template-columns:1fr !important;
}
body.prof-sicurezza .guide-grid{
grid-template-columns:1fr !important;
}
body.prof-sicurezza .toolbar{
flex-direction:column !important;
align-items:flex-start !important;
}
}
/* ============================================================
v10 — Mega menu structure fix + filters fix + native pages
============================================================ */
/* Override: .nav-item è il nuovo wrapper, gestisce l'hover */
body.prof-sicurezza nav.cats{
position:relative !important;
}
body.prof-sicurezza nav.cats .nav-list .nav-item{
display:flex !important;
align-items:stretch !important;
position:static !important; /* la .mega assoluta usa il nav come ancora */
}
body.prof-sicurezza nav.cats .nav-list .nav-item > a{
display:flex !important;
align-items:center !important;
gap:8px !important;
padding:0 16px !important;
font-size:13.5px !important;
font-weight:500 !important;
color:var(--ink) !important;
height:100% !important;
text-decoration:none !important;
}
body.prof-sicurezza nav.cats .nav-list .nav-item > a:hover{
color:var(--brand) !important;
}
body.prof-sicurezza nav.cats .nav-list .nav-item.has-mega > a::after{
content:"" !important;
width:6px !important; height:6px !important;
border-right:1.5px solid currentColor !important;
border-bottom:1.5px solid currentColor !important;
transform:rotate(45deg) translateY(-2px) !important;
margin-left:2px !important;
}
/* Hover sul wrapper apre il dropdown */
body.prof-sicurezza nav.cats .nav-list .nav-item.has-mega:hover > .mega,
body.prof-sicurezza nav.cats .nav-list .nav-item.has-mega:focus-within > .mega{
display:block !important;
}
/* Sticky help non deve coprire il mega menu */
body.prof-sicurezza .mega{
z-index:60 !important; /* sopra header */
}
/* ============================================================
v11 — Mega menu enhancements (CTA + grid brands)
============================================================ */
/* CTA "Vedi tutti i N prodotti" in fondo al mega cat */
body.prof-sicurezza .mega-cta-all{
display:inline-flex !important;
margin-top:14px !important;
font-size:12.5px !important;
font-weight:600 !important;
color:var(--brand) !important;
text-decoration:none !important;
padding:8px 10px !important;
border-radius:var(--radius) !important;
background:var(--brand-soft) !important;
}
body.prof-sicurezza .mega-cta-all:hover{
background:var(--action) !important;
color:#fff !important;
}
/* Brand mega: grid 4 col per la lista brand */
body.prof-sicurezza .mega .mega-subs[style*="grid-template-columns:1fr 1fr 1fr 1fr"]{
grid-template-columns:1fr 1fr 1fr 1fr !important;
gap:6px 14px !important;
}
/* ============================================================
v12 — Mobile review completo: nav drawer + filters drawer
============================================================ */
/* === Bottone "Filtri" mobile-only nella toolbar === */
body.prof-sicurezza .mobile-filter-trigger{
display:none !important;
align-items:center !important;
gap:8px !important;
padding:8px 14px !important;
background:var(--ink) !important;
color:#fff !important;
border:none !important;
border-radius:var(--radius) !important;
font-size:13px !important;
font-weight:600 !important;
cursor:pointer !important;
font-family:inherit !important;
}
body.prof-sicurezza .mobile-filter-trigger:hover{
background:oklch(0.30 0.02 250) !important;
}
/* === Close button dentro filters-side (mobile only) === */
body.prof-sicurezza .filters-close{
display:none !important;
width:32px !important;
height:32px !important;
border-radius:var(--radius) !important;
background:transparent !important;
border:1px solid var(--line) !important;
align-items:center !important;
justify-content:center !important;
color:var(--ink-2) !important;
cursor:pointer !important;
padding:0 !important;
margin-left:auto !important;
}
body.prof-sicurezza .filters-close svg{
width:16px !important; height:16px !important;
}
/* Bloccare scroll body quando drawer aperti */
body.prof-sicurezza.nav-open,
body.prof-sicurezza.filters-open{
overflow:hidden !important;
}
/* === MOBILE (≤768px) drawers === */
@media (max-width:768px){
/* ===== HAMBURGER NAV DRAWER ===== */
body.prof-sicurezza nav.cats{
position:relative !important;
z-index:55 !important;
}
body.prof-sicurezza nav.cats .row{
height:54px !important;
padding:0 var(--container-pad, 16px) !important;
justify-content:flex-start !important;
}
body.prof-sicurezza nav.cats .nav-toggle{
display:flex !important;
align-items:center !important;
gap:8px !important;
height:44px !important;
padding:0 4px !important;
font-size:14px !important;
font-weight:600 !important;
color:var(--ink) !important;
background:none !important;
border:none !important;
cursor:pointer !important;
width:auto !important;
}
body.prof-sicurezza nav.cats .nav-toggle::after{
content:"" !important;
display:none !important; /* niente freccia, hamburger basta */
}
body.prof-sicurezza nav.cats .nav-right{
display:none !important; /* nascondiamo "Spedizione 24/48h" su mobile per spazio */
}
/* Drawer nav-list: slide da sinistra a full-screen */
body.prof-sicurezza nav.cats .nav-list{
display:flex !important;
flex-direction:column !important;
position:fixed !important;
top:0 !important;
left:0 !important;
bottom:0 !important;
width:88% !important;
max-width:360px !important;
background:#fff !important;
z-index:200 !important;
padding:24px 20px !important;
margin:0 !important;
overflow-y:auto !important;
box-shadow:8px 0 32px rgba(0,0,0,0.18) !important;
transform:translateX(-100%) !important;
transition:transform .25s ease !important;
border:none !important;
align-items:stretch !important;
gap:4px !important;
}
body.prof-sicurezza nav.cats.open .nav-list{
transform:translateX(0) !important;
}
/* Backdrop quando drawer aperto */
body.prof-sicurezza nav.cats.open::before{
content:"" !important;
position:fixed !important;
inset:0 !important;
background:rgba(0,0,0,0.5) !important;
z-index:150 !important;
backdrop-filter:blur(2px) !important;
}
/* Voci nel drawer */
body.prof-sicurezza nav.cats .nav-list .nav-item,
body.prof-sicurezza nav.cats .nav-list > a{
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
width:100% !important;
border-bottom:1px solid var(--line) !important;
padding:0 !important;
}
body.prof-sicurezza nav.cats .nav-list .nav-item > a,
body.prof-sicurezza nav.cats .nav-list > a{
display:flex !important;
align-items:center !important;
padding:14px 4px !important;
font-size:15px !important;
font-weight:500 !important;
color:var(--ink) !important;
width:100% !important;
height:auto !important;
text-decoration:none !important;
}
body.prof-sicurezza nav.cats .nav-list .nav-item.has-mega > a::after{
content:"›" !important;
border:none !important;
transform:none !important;
margin-left:auto !important;
font-size:22px !important;
line-height:1 !important;
color:var(--ink-3) !important;
font-weight:300 !important;
}
body.prof-sicurezza nav.cats .nav-list .featured{
color:var(--danger) !important;
font-weight:600 !important;
}
/* Mega su mobile: DISABILITATO (nei drawer le sub-cat si raggiungono via tap) */
body.prof-sicurezza .mega{
display:none !important;
}
/* ===== FILTERS DRAWER (categoria/shop) ===== */
body.prof-sicurezza .listing{
grid-template-columns:1fr !important;
}
body.prof-sicurezza .filters-side{
position:fixed !important;
top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
width:100% !important; max-width:100% !important;
border-radius:0 !important;
z-index:300 !important;
transform:translateY(100%) !important;
transition:transform .25s ease !important;
overflow-y:auto !important;
padding-bottom:80px !important; /* spazio per submit button sticky */
}
body.prof-sicurezza .filters-side.open{
transform:translateY(0) !important;
}
/* Backdrop filters */
body.prof-sicurezza.filters-open::after{
content:"" !important;
position:fixed !important;
inset:0 !important;
background:rgba(0,0,0,0.5) !important;
z-index:250 !important;
backdrop-filter:blur(2px) !important;
}
body.prof-sicurezza .filters-head{
position:sticky !important;
top:0 !important;
background:#fff !important;
z-index:1 !important;
padding:14px 18px !important;
border-bottom:1px solid var(--line) !important;
}
body.prof-sicurezza .filters-head .filters-close{
display:flex !important;
}
body.prof-sicurezza .filters-head > span{
font-size:16px !important;
font-weight:700 !important;
}
body.prof-sicurezza .filter-list{
max-height:none !important; /* su mobile, niente scroll interno */
}
/* Bottone Filtri visibile */
body.prof-sicurezza .mobile-filter-trigger{
display:inline-flex !important;
}
/* Toolbar mobile: ridisegnata per il bottone */
body.prof-sicurezza .toolbar{
flex-direction:row !important;
align-items:center !important;
justify-content:space-between !important;
gap:10px !important;
padding:14px 0 !important;
}
body.prof-sicurezza .toolbar .count{
font-size:12.5px !important;
flex:1 !important;
}
body.prof-sicurezza .toolbar-right{
flex-shrink:0 !important;
}
body.prof-sicurezza .sort-select{
font-size:12px !important;
padding:6px 28px 6px 10px !important;
}
/* Sub-cats strip già scrollabile orizzontalmente — assicuriamoci */
body.prof-sicurezza .subcats{
padding:14px 16px !important;
margin-left:-16px !important;
margin-right:-16px !important;
border-left:none !important;
border-right:none !important;
}
}
/* === HEADER mobile: hamburger + logo compatto + icone === */
@media (max-width:768px){
body.prof-sicurezza header.main .row{
grid-template-columns:auto 1fr auto !important;
height:60px !important;
gap:8px !important;
padding:0 var(--container-pad, 16px) !important;
}
body.prof-sicurezza .logo{
font-size:16px !important;
gap:6px !important;
}
body.prof-sicurezza .logo small{
display:none !important; /* tagline non serve su mobile */
}
body.prof-sicurezza .logo-mark{
width:30px !important; height:30px !important;
}
body.prof-sicurezza header.main .search{
display:none !important;
}
body.prof-sicurezza header.main.search-open .search{
display:flex !important;
position:absolute !important;
top:100% !important;
left:0 !important; right:0 !important;
margin:0 !important;
border-radius:0 !important;
border-left:none !important;
border-right:none !important;
z-index:51 !important;
padding:8px 16px !important;
background:#fff !important;
border-bottom:1px solid var(--line) !important;
height:auto !important;
}
body.prof-sicurezza .search-toggle{
display:grid !important;
place-items:center !important;
width:40px !important;
height:40px !important;
border-radius:var(--radius) !important;
color:var(--ink-2) !important;
background:none !important;
border:none !important;
cursor:pointer !important;
}
body.prof-sicurezza .header-actions{
gap:2px !important;
}
body.prof-sicurezza .icon-btn{
padding:6px 8px !important;
}
body.prof-sicurezza .icon-btn > span:not(.badge){
display:none !important;
}
body.prof-sicurezza .cart-btn{
padding:8px 10px !important;
}
body.prof-sicurezza .cart-btn .cart-meta{
display:none !important; /* solo icona, niente €+count testuali */
}
/* Topbar: compatta, items wrap */
body.prof-sicurezza .topbar .row{
height:auto !important;
padding:6px 16px !important;
gap:8px !important;
flex-wrap:wrap !important;
}
body.prof-sicurezza .topbar ul{
gap:12px !important;
flex-wrap:wrap !important;
font-size:11.5px !important;
}
body.prof-sicurezza .topbar .right{
gap:10px !important;
font-size:11.5px !important;
}
}
@media (max-width:480px){
body.prof-sicurezza .topbar ul li:nth-child(3),
body.prof-sicurezza .topbar ul li:nth-child(4){
display:none !important; /* nascondi telefono e fattura per spazio */
}
body.prof-sicurezza .topbar .right a:nth-child(1),
body.prof-sicurezza .topbar .right a:nth-child(3){
display:none !important; /* lascia solo Area rivenditori + Accedi */
}
body.prof-sicurezza header.main .row{
grid-template-columns:auto 1fr auto !important;
gap:6px !important;
}
body.prof-sicurezza .toolbar{
flex-direction:column !important;
align-items:stretch !important;
gap:10px !important;
}
body.prof-sicurezza .toolbar .count{
text-align:center !important;
}
body.prof-sicurezza .toolbar-right{
justify-content:space-between !important;
display:flex !important;
}
}
/* ============================================================
v13 — Fix issues mobile precise
============================================================ */
/* ===== USP STRIP — divisori 2x2 ortogonali ===== */
@media (max-width:768px){
body.prof-sicurezza .usps-grid{
grid-template-columns:repeat(2,1fr) !important;
background:#fff !important;
}
body.prof-sicurezza .usps-grid > div{
border-right:1px solid var(--line) !important;
border-bottom:1px solid var(--line) !important;
padding:18px 14px !important;
gap:10px !important;
}
/* Niente border-right per gli ultimi di ogni riga (2°, 4°, ecc.) */
body.prof-sicurezza .usps-grid > div:nth-child(2n){
border-right:none !important;
}
/* Niente border-bottom per gli ultimi 2 (= ultima riga) */
body.prof-sicurezza .usps-grid > div:nth-last-child(-n+2){
border-bottom:none !important;
}
body.prof-sicurezza .usps b{ font-size:12.5px !important; }
body.prof-sicurezza .usps small{ font-size:11px !important; }
}
/* ===== CATS-GRID source-order fix ===== */
/* Le @media query precedenti avevano ordini confusi. Re-assert qui dopo
TUTTO il resto del CSS: a 430px deve vincere repeat(2,1fr). */
@media (max-width:1024px){
body.prof-sicurezza .cats-grid{
grid-template-columns:repeat(4, minmax(0,1fr)) !important;
gap:12px !important;
}
}
@media (max-width:768px){
body.prof-sicurezza .cats-grid{
grid-template-columns:repeat(3, minmax(0,1fr)) !important;
gap:10px !important;
}
}
@media (max-width:480px){
body.prof-sicurezza .cats-grid{
grid-template-columns:repeat(2, minmax(0,1fr)) !important;
gap:10px !important;
}
}
/* Card categoria uniformi (altezza + dimensioni costanti) */
@media (max-width:1024px){
body.prof-sicurezza .cat-card{
min-height:140px !important;
padding:12px !important;
}
body.prof-sicurezza .cat-card .ph,
body.prof-sicurezza .cat-card .imgbg{
height:60px !important;
min-width:0 !important;
}
body.prof-sicurezza .cat-card b{
font-size:12px !important;
line-height:1.25 !important;
}
body.prof-sicurezza .cat-card small{
font-size:10.5px !important;
}
}
/* ===== DEAL PRODUCTS MOBILE — spazi interni ===== */
@media (max-width:768px){
body.prof-sicurezza .deal{
grid-template-columns:1fr !important;
}
body.prof-sicurezza .deal-left{
padding:22px 18px !important;
}
body.prof-sicurezza .deal h2{
font-size:20px !important;
line-height:1.2 !important;
}
body.prof-sicurezza .deal-products{
display:flex !important;
flex-direction:row !important;
overflow-x:auto !important;
scroll-snap-type:x mandatory !important;
gap:0 !important;
padding:0 !important;
margin:0 !important;
border-top:1px solid var(--line) !important;
scrollbar-width:none !important;
}
body.prof-sicurezza .deal-products::-webkit-scrollbar{ display:none !important; }
body.prof-sicurezza .deal-products > .product{
flex:0 0 88% !important;
max-width:88% !important;
width:88% !important;
scroll-snap-align:start !important;
border:none !important;
border-right:1px solid var(--line) !important;
border-radius:0 !important;
padding:0 !important;
}
body.prof-sicurezza .deal-products > .product:last-child{
border-right:none !important;
}
body.prof-sicurezza .deal-products > .product .body{
padding:12px 14px 14px !important;
}
body.prof-sicurezza .deal-products > .product .product-img,
body.prof-sicurezza .deal-products > .product .ph{
padding:18px !important;
aspect-ratio:1 !important;
}
}
/* ===== HAMBURGER NAV — defensive override per assicurare visibilità ===== */
@media (max-width:768px){
body.prof-sicurezza nav.cats .nav-toggle{
display:flex !important;
align-items:center !important;
gap:8px !important;
padding:0 !important;
height:44px !important;
font-size:14px !important;
font-weight:600 !important;
color:var(--ink) !important;
background:none !important;
border:none !important;
cursor:pointer !important;
pointer-events:auto !important;
z-index:60 !important;
position:relative !important;
}
/* Drawer SI VEDE — z-index in stacking context globale */
body.prof-sicurezza nav.cats.open{
z-index:300 !important; /* sopra header sticky e tutto */
position:relative !important;
}
body.prof-sicurezza nav.cats.open .nav-list{
z-index:301 !important;
}
body.prof-sicurezza nav.cats.open::before{
z-index:299 !important;
}
/* Voci più alte (touch friendly) */
body.prof-sicurezza nav.cats .nav-list .nav-item > a,
body.prof-sicurezza nav.cats .nav-list > a{
min-height:48px !important;
}
}
/* Sticky help: assicurati che non copra drawer aperti */
body.prof-sicurezza.nav-open .sticky-help,
body.prof-sicurezza.filters-open .sticky-help{
display:none !important;
}
/* ============================================================
v14 — Drawer mobile: position:fixed garantito (specificità max)
La regola precedente nav.cats.open .nav-list con position:absolute
sovrascriveva v12. Qui ridichiariamo con specificità ALTA che batte
qualsiasi altra regola.
============================================================ */
@media (max-width:768px){
body.prof-sicurezza nav.cats.open .nav-list,
body.prof-sicurezza nav.cats .nav-list{
display:flex !important;
flex-direction:column !important;
position:fixed !important;
top:0 !important;
left:0 !important;
bottom:0 !important;
right:auto !important;
width:88% !important;
max-width:360px !important;
background:#fff !important;
z-index:9999 !important;
padding:24px 20px !important;
margin:0 !important;
overflow-y:auto !important;
box-shadow:8px 0 32px rgba(0,0,0,0.18) !important;
transform:translateX(-100%) !important;
transition:transform .25s ease !important;
border:none !important;
align-items:stretch !important;
gap:4px !important;
}
body.prof-sicurezza nav.cats.open .nav-list{
transform:translateX(0) !important;
}
/* Backdrop dietro al drawer */
body.prof-sicurezza nav.cats.open::before{
content:"" !important;
position:fixed !important;
inset:0 !important;
background:rgba(0,0,0,0.5) !important;
z-index:9998 !important;
backdrop-filter:blur(2px) !important;
}
}
/* ============================================================
v15 — Fix mobile: header alignment, deal cards gap, brand grid
============================================================ */
/* ===== HEADER: logo a sx, icone (search-toggle + header-actions) a dx ===== */
@media (max-width:768px){
/* Da grid a flex per controllo allineamento dei figli */
body.prof-sicurezza header.main .row{
display:flex !important;
grid-template-columns:none !important;
align-items:center !important;
flex-wrap:nowrap !important;
gap:6px !important;
height:60px !important;
padding:0 var(--container-pad, 16px) !important;
}
body.prof-sicurezza header.main .logo{
flex:0 1 auto !important;
min-width:0 !important;
margin-right:auto !important; /* spinge tutto il resto a destra */
}
body.prof-sicurezza header.main .logo > span:not(.logo-mark){
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
body.prof-sicurezza header.main .search-toggle{
flex:0 0 auto !important;
order:2 !important;
}
body.prof-sicurezza header.main .header-actions{
flex:0 0 auto !important;
order:3 !important;
}
}
/* ===== DEAL PRODUCTS: gap visibile + padding interno ===== */
@media (max-width:768px){
body.prof-sicurezza .deal-products{
gap:12px !important;
padding:16px !important;
scroll-padding-left:16px !important;
background:rgba(0,0,0,0.02) !important;
}
body.prof-sicurezza .deal-products > .product{
flex:0 0 calc(85% - 8px) !important;
max-width:calc(85% - 8px) !important;
width:calc(85% - 8px) !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
background:#fff !important;
scroll-margin-left:16px !important;
}
body.prof-sicurezza .deal-products > .product:first-child{
border-left:1px solid var(--line) !important;
}
body.prof-sicurezza .deal-products > .product:last-child{
border-right:1px solid var(--line) !important;
}
}
/* ===== BRAND STRIP: griglia bilanciata ===== */
@media (max-width:768px){
body.prof-sicurezza .brands-row{
display:grid !important;
grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
gap:10px !important;
flex-wrap:initial !important;
justify-content:initial !important;
}
body.prof-sicurezza .brands-row .brands-label{
grid-column:1 / -1 !important;
width:auto !important;
flex:none !important;
margin-bottom:4px !important;
}
body.prof-sicurezza .brands-row .brand-logo{
flex:initial !important;
width:100% !important;
min-width:0 !important;
}
}
@media (max-width:480px){
body.prof-sicurezza .brands-row{
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}
/* Se il numero di brand-logo è dispari, l'ultimo sta solo: centralo
(:nth-of-type conta solo gli , ignorando lo brands-label) */
body.prof-sicurezza .brands-row a.brand-logo:last-of-type:nth-of-type(odd){
grid-column:1 / -1 !important;
justify-self:center !important;
width:calc(50% - 5px) !important;
}
}
/* ============================================================
v16 — Subcats strip: wrap su desktop, scroll su mobile
Su desktop la rotella mouse non scrolla orizzontale → wrap.
Su mobile (touch) lo scroll-x funziona naturalmente → no wrap.
============================================================ */
@media (min-width:769px){
body.prof-sicurezza .subcats{
flex-wrap:wrap !important;
overflow-x:visible !important;
row-gap:10px !important;
}
}
/* ===== DEAL PRODUCTS desktop: gap visibile tra le card ===== */
@media (min-width:769px){
body.prof-sicurezza .deal-products{
gap:16px !important;
padding:16px !important;
background:rgba(0,0,0,0.02) !important;
}
body.prof-sicurezza .deal-products > .product{
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
background:#fff !important;
}
}
/* ============================================================
v17 — AUTH: landing /registrati/ + login + UM form styling
============================================================ */
/* Topbar user pill */
body.prof-sicurezza .topbar-user{
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
}
body.prof-sicurezza .topbar-user b{
font-weight:600 !important;
margin-left:2px !important;
}
body.prof-sicurezza .pill-warn{
background:oklch(0.85 0.12 60) !important;
color:oklch(0.30 0.10 60) !important;
font-size:10px !important;
padding:2px 6px !important;
border-radius:99px !important;
margin-left:6px !important;
}
/* ============= AUTH LANDING ============= */
body.prof-sicurezza .auth-grid{
display:grid !important;
grid-template-columns:minmax(0, 0.85fr) minmax(0, 1.5fr) !important;
gap:48px !important;
margin:40px 0 !important;
}
body.prof-sicurezza .auth-block-head{
margin-bottom:24px !important;
}
body.prof-sicurezza .auth-block-head .lbl{
font-family:'IBM Plex Mono', monospace !important;
font-size:11px !important;
letter-spacing:0.12em !important;
text-transform:uppercase !important;
color:var(--ink-3) !important;
margin-bottom:8px !important;
}
body.prof-sicurezza .auth-block-head h2{
font-size:28px !important;
line-height:1.2 !important;
font-weight:700 !important;
letter-spacing:-0.01em !important;
margin:0 0 8px !important;
}
body.prof-sicurezza .auth-block-head h2 em{
color:var(--brand) !important;
font-style:normal !important;
}
body.prof-sicurezza .auth-block-head p{
color:var(--ink-3) !important;
font-size:14px !important;
}
/* Login form */
body.prof-sicurezza .ps-login-form{
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:var(--radius-lg, 12px) !important;
padding:24px !important;
display:flex !important;
flex-direction:column !important;
gap:14px !important;
}
body.prof-sicurezza .ps-login-form .form-row{
display:flex !important;
flex-direction:column !important;
gap:6px !important;
}
body.prof-sicurezza .ps-login-form .form-row-inline{
flex-direction:row !important;
justify-content:space-between !important;
align-items:center !important;
}
body.prof-sicurezza .ps-login-form label{
font-size:12.5px !important;
font-weight:600 !important;
color:var(--ink-2) !important;
}
body.prof-sicurezza .ps-login-form .input{
width:100% !important;
padding:11px 14px !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
font-size:14px !important;
background:#fff !important;
}
body.prof-sicurezza .ps-login-form .input:focus{
outline:none !important;
border-color:var(--action) !important;
box-shadow:0 0 0 3px oklch(0.65 0.18 250 / 0.15) !important;
}
body.prof-sicurezza .ps-login-form .checkbox{
display:flex !important;
align-items:center !important;
gap:8px !important;
font-weight:500 !important;
cursor:pointer !important;
}
body.prof-sicurezza .ps-login-form .checkbox input{
margin:0 !important;
}
body.prof-sicurezza .ps-login-form .link{
font-size:12.5px !important;
color:var(--brand) !important;
text-decoration:none !important;
}
body.prof-sicurezza .ps-login-form .link:hover{
text-decoration:underline !important;
}
body.prof-sicurezza .btn-block{
width:100% !important;
justify-content:center !important;
}
/* Auth cards (3 tipi account) */
body.prof-sicurezza .auth-cards{
display:flex !important;
flex-direction:column !important;
gap:14px !important;
}
body.prof-sicurezza .auth-card{
display:grid !important;
grid-template-columns:1fr auto !important;
grid-template-rows:auto auto auto !important;
gap:6px 18px !important;
align-items:start !important;
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:var(--radius-lg, 12px) !important;
padding:22px 24px !important;
text-decoration:none !important;
color:inherit !important;
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
body.prof-sicurezza .auth-card:hover{
border-color:var(--ink-3) !important;
transform:translateY(-2px) !important;
box-shadow:0 8px 24px rgba(0,0,0,0.06) !important;
}
body.prof-sicurezza .auth-card-tag{
grid-column:1 / -1 !important;
font-family:'IBM Plex Mono', monospace !important;
font-size:10.5px !important;
letter-spacing:0.12em !important;
font-weight:600 !important;
color:var(--ink-3) !important;
background:oklch(0.95 0.005 250) !important;
padding:4px 8px !important;
border-radius:4px !important;
display:inline-block !important;
width:fit-content !important;
}
body.prof-sicurezza .auth-card-tag.tag-blue{
background:oklch(0.92 0.05 250) !important;
color:oklch(0.40 0.18 250) !important;
}
body.prof-sicurezza .auth-card-tag.tag-gold{
background:oklch(0.92 0.08 80) !important;
color:oklch(0.40 0.10 60) !important;
}
body.prof-sicurezza .auth-card h3{
grid-column:1 !important;
font-size:17px !important;
line-height:1.3 !important;
font-weight:600 !important;
margin:0 !important;
letter-spacing:-0.005em !important;
}
body.prof-sicurezza .auth-card-cta{
grid-column:2 !important;
grid-row:2 / span 2 !important;
align-self:center !important;
white-space:nowrap !important;
}
body.prof-sicurezza .auth-benefits{
grid-column:1 !important;
list-style:none !important;
padding:0 !important;
margin:6px 0 0 !important;
display:flex !important;
flex-direction:column !important;
gap:6px !important;
}
body.prof-sicurezza .auth-benefits li{
display:flex !important;
align-items:center !important;
gap:10px !important;
font-size:13.5px !important;
color:var(--ink-2) !important;
}
body.prof-sicurezza .auth-benefits .dot{
width:8px !important;
height:8px !important;
border-radius:50% !important;
background:var(--line-2) !important;
flex-shrink:0 !important;
}
body.prof-sicurezza .auth-benefits .dot-ok{
background:oklch(0.62 0.18 145) !important;
}
/* Btn dark per Rivenditore */
body.prof-sicurezza .btn-dark{
background:var(--ink) !important;
color:#fff !important;
border:1px solid var(--ink) !important;
}
body.prof-sicurezza .btn-dark:hover{
background:oklch(0.22 0.005 250) !important;
}
/* Help footer */
body.prof-sicurezza .auth-help{
margin-top:32px !important;
padding:18px !important;
background:oklch(0.97 0.005 250) !important;
border-radius:var(--radius) !important;
text-align:center !important;
font-size:13px !important;
color:var(--ink-3) !important;
}
body.prof-sicurezza .auth-help a{
color:var(--brand) !important;
font-weight:600 !important;
text-decoration:none !important;
}
/* Already logged box */
body.prof-sicurezza .auth-already{
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:var(--radius-lg, 12px) !important;
padding:32px !important;
text-align:center !important;
margin:40px 0 !important;
}
body.prof-sicurezza .auth-already p{
margin-bottom:16px !important;
font-size:15px !important;
}
/* Mobile auth */
@media (max-width:768px){
body.prof-sicurezza .auth-grid{
grid-template-columns:1fr !important;
gap:32px !important;
margin:24px 0 !important;
}
body.prof-sicurezza .auth-block-head h2{
font-size:22px !important;
}
body.prof-sicurezza .auth-card{
grid-template-columns:1fr !important;
grid-template-rows:auto auto auto auto !important;
padding:18px !important;
}
body.prof-sicurezza .auth-card-cta{
grid-column:1 !important;
grid-row:auto !important;
margin-top:8px !important;
width:100% !important;
justify-content:center !important;
}
}
/* ============= ULTIMATE MEMBER form styling ============= */
/* Wrappa tutto sotto body.prof-sicurezza così evitiamo collisioni */
body.prof-sicurezza .um,
body.prof-sicurezza .um-form{
max-width:560px !important;
margin:32px auto !important;
}
body.prof-sicurezza .um .um-row{
margin-bottom:16px !important;
}
body.prof-sicurezza .um-field-label,
body.prof-sicurezza .um label{
font-size:12.5px !important;
font-weight:600 !important;
color:var(--ink-2) !important;
margin-bottom:6px !important;
display:block !important;
}
body.prof-sicurezza .um input[type="text"],
body.prof-sicurezza .um input[type="email"],
body.prof-sicurezza .um input[type="password"],
body.prof-sicurezza .um input[type="tel"],
body.prof-sicurezza .um input[type="number"],
body.prof-sicurezza .um input[type="url"],
body.prof-sicurezza .um select,
body.prof-sicurezza .um textarea{
width:100% !important;
padding:11px 14px !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
font-size:14px !important;
background:#fff !important;
color:var(--ink) !important;
box-shadow:none !important;
}
body.prof-sicurezza .um input:focus,
body.prof-sicurezza .um select:focus,
body.prof-sicurezza .um textarea:focus{
outline:none !important;
border-color:var(--action) !important;
box-shadow:0 0 0 3px oklch(0.65 0.18 250 / 0.15) !important;
}
body.prof-sicurezza .um .um-button,
body.prof-sicurezza .um button[type="submit"],
body.prof-sicurezza .um input[type="submit"]{
background:var(--action) !important;
color:#fff !important;
border:none !important;
border-radius:var(--radius) !important;
padding:12px 24px !important;
font-size:14px !important;
font-weight:600 !important;
cursor:pointer !important;
transition:background .15s ease !important;
width:auto !important;
text-shadow:none !important;
}
body.prof-sicurezza .um .um-button:hover{
background:var(--action-ink) !important;
}
body.prof-sicurezza .um .um-field-checkbox-state,
body.prof-sicurezza .um .um-field-radio-state{
font-size:13px !important;
color:var(--ink-2) !important;
}
body.prof-sicurezza .um .um-form-error,
body.prof-sicurezza .um .um-notice.err{
background:oklch(0.95 0.08 25) !important;
color:oklch(0.30 0.18 25) !important;
border:1px solid oklch(0.80 0.10 25) !important;
border-radius:var(--radius) !important;
padding:10px 12px !important;
font-size:13px !important;
}
body.prof-sicurezza .um .um-notice.success{
background:oklch(0.95 0.08 145) !important;
color:oklch(0.30 0.15 145) !important;
border:1px solid oklch(0.80 0.10 145) !important;
border-radius:var(--radius) !important;
padding:10px 12px !important;
font-size:13px !important;
}
/* Mobile UM */
@media (max-width:768px){
body.prof-sicurezza .um,
body.prof-sicurezza .um-form{
margin:16px 0 !important;
}
}
/* ============================================================
v21 — UM form layout migliorato (sezioni, spacing, content block)
============================================================ */
body.prof-sicurezza .um,
body.prof-sicurezza .um-form{
max-width:760px !important; /* più stretto = meglio leggibile */
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:var(--radius-lg, 12px) !important;
padding:32px !important;
margin:32px auto !important;
}
@media (max-width:768px){
body.prof-sicurezza .um,
body.prof-sicurezza .um-form{
padding:20px !important;
margin:16px 0 !important;
border-radius:0 !important;
border-left:none !important;
border-right:none !important;
}
}
/* Spacing tra rows (allineato 18px) */
body.prof-sicurezza .um .um-row{
margin-bottom:18px !important;
}
body.prof-sicurezza .um .um-row:last-child{ margin-bottom:0 !important; }
/* Campi dentro una row a 2-col: stesso baseline anche con help-icon */
body.prof-sicurezza .um .um-row.um-row-1-2-1-2 .um-col-1-2,
body.prof-sicurezza .um .um-row.um-row-1-3-1-3-1-3 .um-col-1-3{
display:flex !important;
flex-direction:column !important;
}
body.prof-sicurezza .um .um-field{
margin-bottom:0 !important;
}
/* Content Block come titolo di sezione */
body.prof-sicurezza .um .um-field-block{
background:transparent !important;
border:none !important;
border-bottom:1px solid var(--line) !important;
padding:24px 0 8px !important;
margin:8px 0 6px !important;
font-family:'IBM Plex Mono', monospace !important;
font-size:11px !important;
letter-spacing:0.14em !important;
text-transform:uppercase !important;
color:var(--ink-3) !important;
}
body.prof-sicurezza .um .um-field-block:first-of-type{
padding-top:0 !important;
margin-top:0 !important;
}
/* Help icon dei campi: meno invadente */
body.prof-sicurezza .um .um-tip{
color:var(--ink-3) !important;
margin-left:6px !important;
font-size:13px !important;
}
/* Bottone full-width nei form B2B */
body.prof-sicurezza .um .um-form-row.um-button-row,
body.prof-sicurezza .um .um-button-block{
margin-top:24px !important;
padding-top:24px !important;
border-top:1px solid var(--line) !important;
}
body.prof-sicurezza .um button[type="submit"],
body.prof-sicurezza .um .um-button{
width:100% !important;
padding:14px 24px !important;
font-size:15px !important;
}
/* Label compatti, più leggibili */
body.prof-sicurezza .um .um-field-label{
font-size:12.5px !important;
font-weight:600 !important;
margin-bottom:6px !important;
color:var(--ink-2) !important;
}
/* Required asterisco visibile */
body.prof-sicurezza .um .um-field-label .um-req,
body.prof-sicurezza .um .um-field-label-required{
color:#dc2626 !important;
margin-left:2px !important;
}
/* Privacy checkbox + reCAPTCHA: più aria sopra */
body.prof-sicurezza .um .um-field[data-key="privacy_policy"],
body.prof-sicurezza .um .um-field-recaptcha,
body.prof-sicurezza .um .um-field-google_recaptcha_field{
margin-top:16px !important;
padding-top:16px !important;
border-top:1px dashed var(--line) !important;
}
/* ============================================================
v18 — PDP mobile: anti-overflow + specs + desc-image responsive
============================================================ */
@media (max-width:768px){
/* Anti-overflow globale: niente più sforaggio orizzontale */
body.prof-sicurezza .pdp-section,
body.prof-sicurezza .pdp,
body.prof-sicurezza .desc-grid,
body.prof-sicurezza .desc-image,
body.prof-sicurezza .gallery,
body.prof-sicurezza .gallery-main,
body.prof-sicurezza .specs-table-wide{
max-width:100% !important;
overflow-x:hidden !important;
}
/* Tutte le immagini dentro PDP description: max 100% width */
body.prof-sicurezza .pdp-section .copy img,
body.prof-sicurezza .pdp-section .copy iframe,
body.prof-sicurezza .pdp-section .copy video,
body.prof-sicurezza .pdp-section .copy table{
max-width:100% !important;
height:auto !important;
display:block !important;
}
/* === GALLERY === */
body.prof-sicurezza .gallery-main{
aspect-ratio:1 !important;
width:100% !important;
border-radius:var(--radius) !important;
}
body.prof-sicurezza .gallery-main .ph{
background-size:contain !important;
background-repeat:no-repeat !important;
background-position:center !important;
background-color:#fff !important;
}
body.prof-sicurezza .gallery-main img{
object-fit:contain !important;
background:#fff !important;
}
body.prof-sicurezza .thumb{
width:64px !important;
height:64px !important;
flex-shrink:0 !important;
}
body.prof-sicurezza .thumb-360{
width:64px !important;
height:64px !important;
font-size:9px !important;
flex-shrink:0 !important;
}
/* === DESC IMAGE === */
body.prof-sicurezza .desc-image{
aspect-ratio:4/3 !important;
width:100% !important;
background:var(--bg-2) !important;
}
body.prof-sicurezza .desc-image .ph,
body.prof-sicurezza .desc-image .imgbg{
background-size:contain !important;
background-repeat:no-repeat !important;
background-position:center !important;
background-color:#fff !important;
}
body.prof-sicurezza .desc-image .caption{
background:linear-gradient(180deg,transparent 40%,oklch(0.13 0.02 250 / 0.7)) !important;
padding:18px !important;
left:0 !important; right:0 !important; bottom:0 !important;
}
/* === SPECS: 2 colonne ridotte, label sticky a sinistra === */
body.prof-sicurezza .specs-table-wide{
display:grid !important;
grid-template-columns:minmax(0, 110px) minmax(0, 1fr) !important;
gap:0 !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
background:#fff !important;
overflow:hidden !important;
}
body.prof-sicurezza .specs-table-wide > div{
padding:12px 14px !important;
font-size:13px !important;
line-height:1.45 !important;
border-top:1px solid var(--line) !important;
word-break:break-word !important;
overflow-wrap:anywhere !important;
}
body.prof-sicurezza .specs-table-wide > div:nth-child(-n+2){
border-top:none !important;
}
body.prof-sicurezza .specs-table-wide .k{
background:var(--bg-2) !important;
font-weight:600 !important;
color:var(--ink-2) !important;
border-right:1px solid var(--line) !important;
font-size:12px !important;
}
body.prof-sicurezza .specs-table-wide .v{
color:var(--ink) !important;
}
/* === Padding sezioni e container coerente === */
body.prof-sicurezza .pdp-section .container{
padding-left:16px !important;
padding-right:16px !important;
}
}
@media (max-width:480px){
body.prof-sicurezza .specs-table-wide{
grid-template-columns:minmax(0, 95px) minmax(0, 1fr) !important;
}
body.prof-sicurezza .specs-table-wide > div{
padding:10px 12px !important;
font-size:12.5px !important;
}
body.prof-sicurezza .specs-table-wide .k{
font-size:11px !important;
}
}
/* ============================================================
v19 — BOX-SIZING GLOBALE su body.prof-sicurezza
Il padding di .container (32px lato) sommava al width:auto facendo
sforare ogni elemento di 64px > viewport. Fix: border-box ovunque
sotto il body di scope, così padding è incluso nel width.
+ Container padding ridotto a 16px su mobile (era 32px).
============================================================ */
body.prof-sicurezza *,
body.prof-sicurezza *::before,
body.prof-sicurezza *::after{
box-sizing:border-box !important;
}
/* Container padding mobile-friendly */
@media (max-width:768px){
body.prof-sicurezza .container{
padding-left:16px !important;
padding-right:16px !important;
max-width:100vw !important;
}
}
/* ============================================================
v20 — PDP desc-grid: forza minmax(0,1fr) e domina i HTML
nel contenuto descrizione WC, che altrimenti gonfiano la colonna.
Mobile: word-break:break-all per stringhe tecniche non spezzabili.
============================================================ */
/* Desktop + mobile: grid items con min-width:0 per non far esplodere */
body.prof-sicurezza .desc-grid{
grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
}
body.prof-sicurezza .desc-grid > *{
min-width:0 !important;
max-width:100% !important;
}
/* Tabelle dentro la descrizione WC: forza fit container */
body.prof-sicurezza .desc-grid .copy table,
body.prof-sicurezza .pdp-section .copy table{
width:100% !important;
max-width:100% !important;
table-layout:fixed !important;
border-collapse:collapse !important;
margin:12px 0 !important;
}
body.prof-sicurezza .desc-grid .copy table td,
body.prof-sicurezza .desc-grid .copy table th,
body.prof-sicurezza .pdp-section .copy table td,
body.prof-sicurezza .pdp-section .copy table th{
word-break:normal !important;
overflow-wrap:break-word !important;
padding:8px 10px !important;
vertical-align:top !important;
border:1px solid var(--line) !important;
font-size:13px !important;
}
/* === Descrizione: copy-full autosufficiente con max-width forte === */
body.prof-sicurezza .pdp-section .copy-full,
body.prof-sicurezza .copy-full{
max-width:1100px !important;
width:100% !important;
margin-left:auto !important;
margin-right:auto !important;
padding-left:32px !important;
padding-right:32px !important;
box-sizing:border-box !important;
}
body.prof-sicurezza .copy-full .lbl{
font-family:'IBM Plex Mono', monospace !important;
font-size:11px !important;
letter-spacing:0.12em !important;
text-transform:uppercase !important;
color:var(--ink-3) !important;
margin-bottom:8px !important;
}
body.prof-sicurezza .copy-full h2{
font-size:28px !important;
line-height:1.2 !important;
font-weight:700 !important;
margin:0 0 20px !important;
letter-spacing:-0.01em !important;
}
@media (max-width:768px){
body.prof-sicurezza .pdp-section .copy-full,
body.prof-sicurezza .copy-full{
padding-left:16px !important;
padding-right:16px !important;
}
body.prof-sicurezza .copy-full h2{
font-size:22px !important;
}
}
/* Anche .pdp-section .container: forza vincolo 1320 (in caso Oxygen sovrascriva) */
body.prof-sicurezza .pdp-section > .container,
body.prof-sicurezza section.pdp-section > .container{
max-width:1320px !important;
width:100% !important;
margin-left:auto !important;
margin-right:auto !important;
padding-left:32px !important;
padding-right:32px !important;
box-sizing:border-box !important;
}
@media (max-width:768px){
body.prof-sicurezza .pdp-section > .container,
body.prof-sicurezza section.pdp-section > .container{
padding-left:16px !important;
padding-right:16px !important;
max-width:100vw !important;
}
}
body.prof-sicurezza .desc-grid .copy table thead,
body.prof-sicurezza .pdp-section .copy table thead{
background:var(--bg-2) !important;
}
/* Specs-table-wide: rompi solo stringhe TROPPO lunghe (non parole normali) */
@media (max-width:768px){
body.prof-sicurezza .specs-table-wide > div,
body.prof-sicurezza .specs-table-wide .k,
body.prof-sicurezza .specs-table-wide .v{
word-break:normal !important; /* parole normali NON spezzate */
overflow-wrap:break-word !important; /* solo quando la riga è piena */
hyphens:auto !important;
min-width:0 !important;
max-width:100% !important;
}
}
/* Defensive: tutto dentro .pdp e .pdp-section può ridursi */
body.prof-sicurezza .pdp > *,
body.prof-sicurezza .pdp-section > *,
body.prof-sicurezza .pdp-section .container > *{
min-width:0 !important;
max-width:100% !important;
}
/* ============================================================
v22 — Modifiche listate (12 item)
============================================================ */
/* === 8. NAV STICKY ON TOP === */
body.prof-sicurezza nav.cats{
position:sticky !important;
top:0 !important;
z-index:90 !important;
background:#fff !important;
border-bottom:1px solid var(--line) !important;
}
/* Quando il drawer mobile è aperto, evita che la nav stessa rimanga sticky sopra il backdrop */
body.prof-sicurezza.nav-open nav.cats{
position:relative !important;
}
/* === 1. TOPBAR responsive: telefono visibile a sx, link extra hide-mobile === */
@media (max-width:768px){
body.prof-sicurezza .topbar .hide-mobile{
display:none !important;
}
body.prof-sicurezza .topbar-left li{
font-size:11px !important;
}
}
body.prof-sicurezza .topbar-phone{
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
font-weight:600 !important;
}
/* === 4. BESTSELLER chips filter === */
body.prof-sicurezza .filter-chip{
cursor:pointer !important;
user-select:none !important;
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:99px !important;
padding:8px 16px !important;
font-size:13px !important;
color:var(--ink-2) !important;
font-weight:500 !important;
text-decoration:none !important;
white-space:nowrap !important;
transition:all .15s ease !important;
}
body.prof-sicurezza .filter-chip:hover{
border-color:var(--ink) !important;
color:var(--ink) !important;
}
body.prof-sicurezza .filter-chip.on{
background:var(--ink) !important;
color:#fff !important;
border-color:var(--ink) !important;
}
body.prof-sicurezza .bs-item.is-hidden{
display:none !important;
}
/* La card prodotto dentro al wrapper .bs-item deve riempire la cella grid */
body.prof-sicurezza .bestseller-grid > .bs-item > .product{
width:100% !important;
margin:0 !important;
display:flex !important;
}
/* ============================================================
v23 — WhatsApp sticky + categories tree + auth buttons forte
============================================================ */
/* === STICKY WHATSAPP icon === */
body.prof-sicurezza .sticky-wa{
position:fixed !important;
bottom:24px !important;
right:24px !important;
width:60px !important;
height:60px !important;
border-radius:50% !important;
background:#25d366 !important; /* WhatsApp brand green */
color:#fff !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-shadow:0 8px 24px rgba(37,211,102,0.4), 0 4px 12px rgba(0,0,0,0.15) !important;
z-index:80 !important;
text-decoration:none !important;
transition:transform .2s ease, box-shadow .2s ease !important;
animation:wa-pulse 2.4s ease-in-out infinite !important;
}
body.prof-sicurezza .sticky-wa:hover{
transform:scale(1.08) !important;
box-shadow:0 12px 30px rgba(37,211,102,0.5), 0 4px 12px rgba(0,0,0,0.15) !important;
animation:none !important;
}
body.prof-sicurezza .sticky-wa svg{
width:32px !important;
height:32px !important;
display:block !important;
}
@keyframes wa-pulse{
0%, 100% { box-shadow:0 8px 24px rgba(37,211,102,0.4), 0 0 0 0 rgba(37,211,102,0.5), 0 4px 12px rgba(0,0,0,0.15); }
50% { box-shadow:0 8px 24px rgba(37,211,102,0.4), 0 0 0 14px rgba(37,211,102,0), 0 4px 12px rgba(0,0,0,0.15); }
}
@media (max-width:768px){
body.prof-sicurezza .sticky-wa{
bottom:18px !important;
right:18px !important;
width:54px !important;
height:54px !important;
}
body.prof-sicurezza .sticky-wa svg{
width:28px !important;
height:28px !important;
}
}
/* Nascondi se drawer mobile aperti */
body.prof-sicurezza.nav-open .sticky-wa,
body.prof-sicurezza.filters-open .sticky-wa{
display:none !important;
}
/* === PAGINA /categorie/ — gerarchia visiva === */
body.prof-sicurezza .cat-tree-section{
margin:48px 0 !important;
padding-bottom:48px !important;
border-bottom:1px solid var(--line) !important;
}
body.prof-sicurezza .cat-tree-section:last-child{
border-bottom:none !important;
}
body.prof-sicurezza .cat-tree-head{
margin-bottom:20px !important;
}
body.prof-sicurezza .cat-tree-title{
display:inline-flex !important;
align-items:baseline !important;
gap:12px !important;
text-decoration:none !important;
color:inherit !important;
padding:8px 0 !important;
border-bottom:2px solid transparent !important;
transition:border-color .15s ease !important;
}
body.prof-sicurezza .cat-tree-title:hover{
border-bottom-color:var(--brand) !important;
}
body.prof-sicurezza .cat-tree-title h2{
font-size:28px !important;
font-weight:700 !important;
margin:0 !important;
letter-spacing:-0.01em !important;
display:inline !important;
}
body.prof-sicurezza .cat-tree-count{
font-family:'IBM Plex Mono', monospace !important;
font-size:12px !important;
letter-spacing:0.06em !important;
color:var(--ink-3) !important;
text-transform:uppercase !important;
}
body.prof-sicurezza .cat-tree-title svg{
margin-left:4px !important;
color:var(--brand) !important;
}
body.prof-sicurezza .cat-tree-empty{
color:var(--ink-3) !important;
padding:12px 0 !important;
}
body.prof-sicurezza .cat-tree-empty a{
color:var(--brand) !important;
font-weight:600 !important;
}
body.prof-sicurezza .cats-grid-children{
/* Eredita le regole responsive di .cats-grid */
}
@media (max-width:768px){
body.prof-sicurezza .cat-tree-section{
margin:32px 0 !important;
padding-bottom:32px !important;
}
body.prof-sicurezza .cat-tree-title h2{
font-size:22px !important;
}
body.prof-sicurezza .cat-tree-title{
flex-wrap:wrap !important;
}
}
/* === BESTSELLER chips: scroll orizzontale forzato su mobile === */
body.prof-sicurezza .filter-bar,
body.prof-sicurezza .bestseller-chips{
display:flex !important;
flex-wrap:nowrap !important;
overflow-x:auto !important;
gap:8px !important;
scrollbar-width:none !important;
margin-bottom:20px !important;
}
body.prof-sicurezza .filter-bar::-webkit-scrollbar,
body.prof-sicurezza .bestseller-chips::-webkit-scrollbar{
display:none !important;
}
@media (max-width:768px){
body.prof-sicurezza .filter-bar,
body.prof-sicurezza .bestseller-chips{
margin-left:-16px !important;
margin-right:-16px !important;
padding:0 16px 8px !important;
}
}
/* === BESTSELLER: products slider mobile forzato === */
@media (max-width:768px){
body.prof-sicurezza .bestseller-grid,
body.prof-sicurezza .products.bestseller-grid{
display:flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
overflow-x:auto !important;
scroll-snap-type:x mandatory !important;
-webkit-overflow-scrolling:touch !important;
gap:12px !important;
padding:4px 16px 12px !important;
margin-left:-16px !important;
margin-right:-16px !important;
grid-template-columns:none !important;
scrollbar-width:none !important;
}
body.prof-sicurezza .bestseller-grid > .bs-item,
body.prof-sicurezza .products.bestseller-grid > .bs-item{
flex:0 0 78% !important;
max-width:78% !important;
width:78% !important;
scroll-snap-align:start !important;
}
}
/* === 11. AUTH BUTTONS: STESSA size forzata, stile diverso === */
body.prof-sicurezza .ps-login-form .btn,
body.prof-sicurezza .ps-login-form button[type="submit"],
body.prof-sicurezza .auth-card .auth-card-cta,
body.prof-sicurezza .auth-card .btn{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
width:100% !important;
height:48px !important; /* stessa altezza esatta */
padding:0 24px !important;
font-size:14px !important;
font-weight:600 !important;
border-radius:var(--radius, 8px) !important;
text-decoration:none !important;
border:1px solid transparent !important;
cursor:pointer !important;
line-height:1 !important;
box-sizing:border-box !important;
white-space:nowrap !important;
}
/* Stili distinti per i 4 ruoli */
/* Login = blu pieno (azione primaria) */
body.prof-sicurezza .ps-login-form .btn-primary{
background:var(--action) !important;
color:#fff !important;
border-color:var(--action) !important;
}
body.prof-sicurezza .ps-login-form .btn-primary:hover{
background:var(--action-ink) !important;
}
/* Privato = bordato (azione secondaria, ma chiara) */
body.prof-sicurezza .auth-card--privato .auth-card-cta{
background:#fff !important;
color:var(--brand) !important;
border-color:var(--action) !important;
}
body.prof-sicurezza .auth-card--privato .auth-card-cta:hover{
background:var(--action) !important;
color:#fff !important;
}
/* Installatore = bordato gold */
body.prof-sicurezza .auth-card--installatore .auth-card-cta{
background:#fff !important;
color:oklch(0.50 0.15 80) !important;
border-color:oklch(0.70 0.15 80) !important;
}
body.prof-sicurezza .auth-card--installatore .auth-card-cta:hover{
background:oklch(0.55 0.15 80) !important;
color:#fff !important;
border-color:oklch(0.55 0.15 80) !important;
}
/* Rivenditore = nero pieno (premium) */
body.prof-sicurezza .auth-card--rivenditore .auth-card-cta{
background:var(--ink) !important;
color:#fff !important;
border-color:var(--ink) !important;
}
body.prof-sicurezza .auth-card--rivenditore .auth-card-cta:hover{
background:oklch(0.20 0.005 250) !important;
}
/* Mobile: assicurati che cards stackino, niente eccezioni */
@media (max-width:768px){
body.prof-sicurezza .auth-grid{
display:flex !important;
flex-direction:column !important;
gap:32px !important;
}
body.prof-sicurezza .auth-cards{
display:flex !important;
flex-direction:column !important;
gap:14px !important;
}
body.prof-sicurezza .auth-card{
display:flex !important;
flex-direction:column !important;
grid-template-columns:none !important;
grid-template-rows:none !important;
align-items:stretch !important;
padding:18px !important;
}
}
/* ============================================================
v24 — USP border, mega CTA underline, nav promo emphasis
============================================================ */
/* === 1. USP STRIP: bordo sx anche sulla prima card === */
body.prof-sicurezza .usps-grid > div:first-child{
border-left:1px solid var(--line) !important;
}
body.prof-sicurezza .usps-grid > div{
border-right:1px solid var(--line) !important;
}
body.prof-sicurezza .usps-grid > div:last-child{
border-right:1px solid var(--line) !important;
}
/* === 2. MEGA-CTA-ALL: solo underline, niente sfondo === */
body.prof-sicurezza .mega-cta-all{
background:transparent !important;
padding:8px 0 !important;
text-decoration:underline !important;
text-underline-offset:3px !important;
text-decoration-thickness:1px !important;
border-radius:0 !important;
}
body.prof-sicurezza .mega-cta-all:hover{
background:transparent !important;
color:var(--brand) !important;
text-decoration-thickness:2px !important;
}
/* === 3. NAV PROMO ("Offerte"): testo rosso compatto, niente pill === */
body.prof-sicurezza nav.cats .nav-promo,
body.prof-sicurezza nav.cats .nav-promo::before,
body.prof-sicurezza nav.cats .nav-promo::after{
background:none !important;
border:none !important;
box-shadow:none !important;
}
body.prof-sicurezza nav.cats .nav-promo{
color:oklch(0.55 0.22 25) !important;
font-weight:600 !important;
display:inline-flex !important;
align-items:center !important;
gap:5px !important;
text-decoration:none !important;
padding:0 !important;
transition:color .15s ease !important;
}
body.prof-sicurezza nav.cats .nav-promo:hover{
color:oklch(0.45 0.24 25) !important;
}
body.prof-sicurezza nav.cats .nav-promo svg{
stroke:currentColor !important;
}
/* === Nav items: tutti in MAIUSCOLO === */
body.prof-sicurezza nav.cats .nav-list > a,
body.prof-sicurezza nav.cats .nav-list .nav-item > a,
body.prof-sicurezza nav.cats .nav-list .nav-promo{
text-transform:uppercase !important;
letter-spacing:0.03em !important;
}
/* ============================================================
v28 — Topbar/Header: allineamento verticale forzato ovunque
============================================================ */
/* Topbar: tutti gli item allineati al centro verticale */
body.prof-sicurezza .topbar .row,
body.prof-sicurezza .topbar .topbar-left,
body.prof-sicurezza .topbar .right{
display:flex !important;
align-items:center !important;
}
body.prof-sicurezza .topbar .topbar-left li,
body.prof-sicurezza .topbar .right > *{
display:inline-flex !important;
align-items:center !important;
line-height:1 !important;
}
body.prof-sicurezza .topbar svg,
body.prof-sicurezza .topbar .icon{
flex-shrink:0 !important;
vertical-align:middle !important;
}
body.prof-sicurezza .topbar-user{
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
line-height:1 !important;
}
body.prof-sicurezza .topbar-user b{
line-height:1 !important;
display:inline-block !important;
}
/* Header: logo e icone tutti centrati */
body.prof-sicurezza header.main .row{
display:flex !important;
align-items:center !important;
}
body.prof-sicurezza .logo,
body.prof-sicurezza .header-actions,
body.prof-sicurezza .header-actions > *,
body.prof-sicurezza .search-toggle,
body.prof-sicurezza .cart-btn{
display:inline-flex !important;
align-items:center !important;
}
body.prof-sicurezza .logo > span:not(.logo-mark){
display:inline-flex !important;
flex-direction:column !important;
justify-content:center !important;
line-height:1.1 !important;
}
/* Nav-toggle (hamburger): SOLO MOBILE — su desktop nascosto */
body.prof-sicurezza nav.cats .nav-toggle{
display:none !important;
}
body.prof-sicurezza .nav-toggle-label{
line-height:1 !important;
}
/* Solo su mobile: mostra l'hamburger e centra verticalmente nella row */
@media (max-width:768px){
body.prof-sicurezza nav.cats .row{
align-items:center !important;
height:48px !important;
}
body.prof-sicurezza nav.cats .nav-toggle{
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
height:44px !important;
align-self:center !important;
line-height:1 !important;
}
body.prof-sicurezza nav.cats .nav-toggle svg{
flex-shrink:0 !important;
}
body.prof-sicurezza .nav-toggle-label{
display:inline-block !important;
}
}
/* ============================================================
v25 — Deal text color + section-head link aligned with title
============================================================ */
/* === FIX deal-products text color === */
/* .deal ha color:#fff per il testo bianco su dark.
.deal-products ha bg bianco ma ereditava color:#fff → titolo+prezzo invisibili.
Reset al colore di default per i testi dentro la card su sfondo chiaro. */
body.prof-sicurezza .deal-products,
body.prof-sicurezza .deal-products .product,
body.prof-sicurezza .deal-products .product .body,
body.prof-sicurezza .deal-products .product h3,
body.prof-sicurezza .deal-products .product h3 a,
body.prof-sicurezza .deal-products .product .price-row,
body.prof-sicurezza .deal-products .product .price-row .amount,
body.prof-sicurezza .deal-products .product .price-row ins{
color:var(--ink) !important;
}
/* === Section-head: link allineato col TITLE, non sotto ===
Trucco: il wrapper interno (div senza classe che contiene lbl+h2)
viene "trasparentizzato" con display:contents, così lbl e h2
diventano direct children del grid e possiamo posizionarli precisamente. */
body.prof-sicurezza .section-head{
display:grid !important;
grid-template-columns:minmax(0, 1fr) auto !important;
grid-template-rows:auto auto !important;
column-gap:24px !important;
row-gap:0 !important;
align-items:center !important;
margin-bottom:24px !important;
}
body.prof-sicurezza .section-head > div:not(.link):first-child{
display:contents !important;
}
/* lbl → riga 1, colonna 1 (spanna entrambe le colonne così è full-width) */
body.prof-sicurezza .section-head > div:not(.link):first-child > .lbl{
grid-column:1 / -1 !important;
grid-row:1 !important;
margin-bottom:8px !important;
}
/* h2 → riga 2, colonna 1 */
body.prof-sicurezza .section-head > div:not(.link):first-child > h2{
grid-column:1 !important;
grid-row:2 !important;
align-self:center !important;
margin:0 !important;
}
/* Link → riga 2, colonna 2 — stessa riga dell'h2 → ALLINEATO */
body.prof-sicurezza .section-head > a.link,
body.prof-sicurezza .section-head > .link{
grid-column:2 !important;
grid-row:2 !important;
align-self:center !important;
white-space:nowrap !important;
}
@media (max-width:768px){
body.prof-sicurezza .section-head{
column-gap:14px !important;
}
body.prof-sicurezza .section-head > a.link,
body.prof-sicurezza .section-head > .link{
font-size:12.5px !important;
}
}
/* ============================================================
v26 — USP borders mobile, banner gradient, cats-feat margin,
brand-logo text-align center multi-line
============================================================ */
/* === 1. USP mobile (2-col): rimuovi bordi esterni che toccano il viewport === */
@media (max-width:768px){
body.prof-sicurezza .usps-grid > div:nth-child(odd){
border-left:none !important;
}
body.prof-sicurezza .usps-grid > div:nth-child(even){
border-right:none !important;
}
}
/* === 2. BANNER brand: gradiente più forte per leggibilità testo === */
body.prof-sicurezza .banner.b1{
background:linear-gradient(135deg,
oklch(0.85 0.08 150) 0%,
oklch(0.72 0.14 150) 100%) !important;
}
body.prof-sicurezza .banner.b2{
background:linear-gradient(135deg,
oklch(0.85 0.08 250) 0%,
oklch(0.72 0.14 250) 100%) !important;
}
/* Testo banner: contrasto maggiore con bg saturato */
body.prof-sicurezza .banner .tag{
color:oklch(0.30 0.18 250) !important;
}
body.prof-sicurezza .banner h3{
color:var(--ink) !important;
}
body.prof-sicurezza .banner p{
color:oklch(0.30 0.02 250) !important;
}
/* === 3. CATS-FEAT mobile: padding laterale come .products === */
@media (max-width:768px){
body.prof-sicurezza .cats-feat{
padding-left:16px !important;
padding-right:16px !important;
margin-left:-16px !important;
margin-right:-16px !important;
box-sizing:border-box !important;
}
}
/* === 4. BRAND-LOGO placeholder (mono name su 2 righe): center align === */
body.prof-sicurezza .brand-logo{
text-align:center !important;
}
body.prof-sicurezza .brand-logo:not(.has-img){
/* Aumenta altezza per accomodare 2 righe senza taglio */
min-height:44px !important;
height:auto !important;
padding:6px 8px !important;
line-height:1.2 !important;
}
/* ============================================================
v29 — Mega 2-col + footer strip + brand-logo contain
============================================================ */
/* === MEGA MENU 3ª colonna CTA: card cliccabile multi-riga full-width === */
/* SOLO la colonna del button è top-aligned (le altre restano stretch) */
body.prof-sicurezza .mega-col-cta{
align-self:start !important; /* scope: solo questa cella, non tutta la grid */
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
justify-content:flex-start !important;
padding:0 !important;
margin:0 !important;
}
/* Specificity high: batte body.prof-sicurezza nav.cats .nav-list a */
body.prof-sicurezza nav.cats .nav-list a.btn-mega-promo,
body.prof-sicurezza a.btn-mega-promo{
display:flex !important;
flex-direction:column !important;
align-items:center !important; /* centra orizzontalmente le righe interne */
justify-content:center !important;
text-align:center !important;
gap:6px !important;
width:100% !important;
background:var(--brand-soft, oklch(0.93 0.04 250)) !important;
color:var(--ink) !important;
padding:16px !important; /* 16px su tutti e 4 i lati */
margin:0 !important;
border-radius:var(--radius-lg, 12px) !important;
border:1px solid transparent !important;
text-decoration:none !important;
box-sizing:border-box !important;
transition:background .15s ease, transform .15s ease !important;
height:auto !important;
}
body.prof-sicurezza .btn-mega-promo:hover{
background:oklch(0.88 0.06 250) !important;
transform:translateY(-2px) !important;
}
body.prof-sicurezza .btn-mega-promo .tag{
font-family:'IBM Plex Mono', monospace !important;
font-size:10.5px !important;
font-weight:600 !important;
letter-spacing:0.12em !important;
text-transform:uppercase !important;
color:var(--brand) !important;
display:block !important;
}
body.prof-sicurezza .btn-mega-promo b{
font-size:16px !important;
font-weight:700 !important;
letter-spacing:-0.01em !important;
line-height:1.25 !important;
color:var(--ink) !important;
display:block !important;
margin:2px 0 4px !important;
}
body.prof-sicurezza .btn-mega-promo .link{
display:inline-flex !important;
align-items:center !important;
gap:4px !important;
font-size:13px !important;
font-weight:600 !important;
color:var(--brand) !important;
margin-top:auto !important;
}
body.prof-sicurezza .btn-mega-promo .link svg{
stroke:currentColor !important;
flex-shrink:0 !important;
transition:transform .15s ease !important;
}
body.prof-sicurezza .btn-mega-promo:hover .link svg{
transform:translateX(3px) !important;
}
/* === BRAND-LOGO con immagine: contain invece di cover === */
body.prof-sicurezza .brand-logo.has-img{
background-size:contain !important;
background-repeat:no-repeat !important;
background-position:center !important;
background-color:#fff !important;
/* No diagonal stripe placeholder pattern */
background-image:var(--brand-logo-bg, none);
padding:10px 12px !important;
min-height:54px !important;
height:auto !important;
}
body.prof-sicurezza .brand-logo.has-img > *{
/* Hide eventual fallback text inside has-img cell */
display:none !important;
}
/* Card dei brand nella pagina /brand/ — anche lì contain forzato */
body.prof-sicurezza .brand-card-logo .ph,
body.prof-sicurezza .brand-card-logo .imgbg{
background-size:contain !important;
background-repeat:no-repeat !important;
background-position:center !important;
background-color:#fff !important;
}
/* ============================================================
v27 — Bestseller slider mobile: niente negative-margin,
cards iniziano dal container padding (16px da viewport).
Override forzato delle regole v6/v22/v23 che usavano -16px.
============================================================ */
@media (max-width:768px){
body.prof-sicurezza .bestseller-grid,
body.prof-sicurezza .products.bestseller-grid,
body.prof-sicurezza .products,
body.prof-sicurezza ul.products{
margin-left:0 !important;
margin-right:0 !important;
padding-left:0 !important;
padding-right:0 !important;
/* Mantieni padding verticale per spazio sopra/sotto */
padding-top:4px !important;
padding-bottom:12px !important;
}
/* Bs-item e product cards mantengono 78% e snap-start */
body.prof-sicurezza .bestseller-grid > .bs-item,
body.prof-sicurezza .products.bestseller-grid > .bs-item{
scroll-margin-left:0 !important;
}
body.prof-sicurezza .products > .product,
body.prof-sicurezza ul.products > li.product{
scroll-margin-left:0 !important;
}
}
/* === 4b. Bestseller mobile slider — i .bs-item devono comportarsi come le card === */
@media (max-width:768px){
body.prof-sicurezza .bestseller-grid{
display:flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
overflow-x:auto !important;
scroll-snap-type:x mandatory !important;
-webkit-overflow-scrolling:touch !important;
gap:12px !important;
padding:4px 16px 12px !important;
margin:0 -16px !important;
grid-template-columns:none !important;
scrollbar-width:none !important;
}
body.prof-sicurezza .bestseller-grid::-webkit-scrollbar{ display:none !important; }
body.prof-sicurezza .bestseller-grid > .bs-item{
flex:0 0 78% !important;
max-width:78% !important;
width:78% !important;
scroll-snap-align:start !important;
}
body.prof-sicurezza .bestseller-grid > .bs-item > .product{
width:100% !important;
margin:0 !important;
}
}
/* === 9. MOBILE FILTERS HEAD — riallinea titolo / reset / chiudi === */
@media (max-width:768px){
body.prof-sicurezza .filters-head{
display:grid !important;
grid-template-columns:1fr auto auto !important;
align-items:center !important;
gap:14px !important;
padding:16px 18px !important;
}
body.prof-sicurezza .filters-head h3,
body.prof-sicurezza .filters-head > span:first-child{
margin:0 !important;
font-size:16px !important;
font-weight:700 !important;
}
body.prof-sicurezza .filters-head .filters-reset{
font-size:12.5px !important;
color:var(--brand) !important;
text-decoration:none !important;
font-weight:600 !important;
}
body.prof-sicurezza .filters-head .filters-close{
width:32px !important;
height:32px !important;
background:var(--bg-2) !important;
border:none !important;
border-radius:50% !important;
display:grid !important;
place-items:center !important;
font-size:20px !important;
line-height:1 !important;
color:var(--ink) !important;
cursor:pointer !important;
}
}
/* === 11. AUTH BUTTONS uniformi (stessa size, stile diverso) === */
body.prof-sicurezza .auth-card .auth-card-cta{
width:100% !important;
justify-content:center !important;
padding:12px 24px !important;
font-size:14px !important;
font-weight:600 !important;
border-radius:var(--radius) !important;
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
margin-top:14px !important;
}
body.prof-sicurezza .auth-login .btn.btn-primary.btn-block,
body.prof-sicurezza .ps-login-form .btn{
padding:12px 24px !important;
font-size:14px !important;
font-weight:600 !important;
}
/* Su mobile: cards stackate verticali con button full-width sotto al testo */
@media (max-width:768px){
body.prof-sicurezza .auth-grid{
grid-template-columns:1fr !important;
gap:32px !important;
}
body.prof-sicurezza .auth-cards{
display:flex !important;
flex-direction:column !important;
gap:14px !important;
}
body.prof-sicurezza .auth-card{
display:flex !important;
flex-direction:column !important;
grid-template-columns:none !important;
align-items:stretch !important;
padding:18px !important;
}
body.prof-sicurezza .auth-card-cta{
width:100% !important;
margin-top:14px !important;
}
}
/* === 7. BRAND INDEX GRID === */
body.prof-sicurezza .brand-index-grid{
display:grid !important;
grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
gap:18px !important;
margin:32px 0 !important;
}
body.prof-sicurezza .brand-card{
display:flex !important;
flex-direction:column !important;
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:var(--radius-lg, 12px) !important;
text-decoration:none !important;
color:inherit !important;
overflow:hidden !important;
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
body.prof-sicurezza .brand-card:hover{
transform:translateY(-2px) !important;
box-shadow:0 8px 24px rgba(0,0,0,0.06) !important;
border-color:var(--ink-3) !important;
}
body.prof-sicurezza .brand-card-logo{
aspect-ratio:4/3 !important;
background:var(--bg-2) !important;
display:grid !important;
place-items:center !important;
padding:16px !important;
position:relative !important;
}
body.prof-sicurezza .brand-card-logo .ph,
body.prof-sicurezza .brand-card-logo .imgbg{
position:absolute !important;
inset:0 !important;
border:none !important;
background-color:transparent !important;
}
body.prof-sicurezza .brand-card-name-mono{
font-family:'IBM Plex Mono', monospace !important;
font-size:13px !important;
font-weight:600 !important;
letter-spacing:0.04em !important;
color:var(--ink-2) !important;
text-align:center !important;
}
body.prof-sicurezza .brand-card-body{
padding:14px 16px !important;
display:flex !important;
flex-direction:column !important;
gap:2px !important;
border-top:1px solid var(--line) !important;
}
body.prof-sicurezza .brand-card-body b{
font-size:14px !important;
font-weight:600 !important;
}
body.prof-sicurezza .brand-card-body small{
font-size:11.5px !important;
color:var(--ink-3) !important;
}
@media (max-width:1024px){
body.prof-sicurezza .brand-index-grid{
grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
}
}
@media (max-width:768px){
body.prof-sicurezza .brand-index-grid{
grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
gap:12px !important;
}
}
@media (max-width:480px){
body.prof-sicurezza .brand-index-grid{
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}
}
/* ============================================================
v30 — Fix batch: badge fit, chevron, add-to-cart card/PDP,
WC cart/checkout styling, logo img, YITH wishlist
============================================================ */
/* ===== #2 BADGE: fit content + niente stretch ===== */
body.prof-sicurezza .product .badges{
align-items:flex-start !important;
}
body.prof-sicurezza .badge{
width:fit-content !important;
align-self:flex-start !important;
flex:0 0 auto !important;
}
/* ===== #11 CHEVRON: absolute centered, niente più taglio su 2 righe ===== */
body.prof-sicurezza nav.cats a.has-mega,
body.prof-sicurezza nav.cats .nav-item.has-mega > a{
position:relative !important;
padding-right:24px !important;
}
body.prof-sicurezza nav.cats a.has-mega::after,
body.prof-sicurezza nav.cats .nav-item.has-mega > a::after{
content:"" !important;
width:6px !important;
height:6px !important;
border-right:1.5px solid currentColor !important;
border-bottom:1.5px solid currentColor !important;
position:absolute !important;
right:8px !important;
top:50% !important;
transform:translateY(-65%) rotate(45deg) !important;
margin:0 !important;
}
/* ===== #3 ADD TO CART CARD PRODOTTO ===== */
body.prof-sicurezza .product .add,
body.prof-sicurezza .product a.add_to_cart_button,
body.prof-sicurezza .product .button.product_type_simple,
body.prof-sicurezza .product .button.product_type_variable,
body.prof-sicurezza .product a.button{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
width:100% !important;
padding:10px 16px !important;
margin-top:8px !important;
background:var(--action) !important;
color:#fff !important;
border:1px solid var(--action) !important;
border-radius:var(--radius, 8px) !important;
font-size:13.5px !important;
font-weight:600 !important;
font-family:inherit !important;
text-decoration:none !important;
text-align:center !important;
cursor:pointer !important;
transition:background .15s ease, transform .15s ease !important;
box-sizing:border-box !important;
white-space:nowrap !important;
}
body.prof-sicurezza .product .add:hover,
body.prof-sicurezza .product a.add_to_cart_button:hover,
body.prof-sicurezza .product .button.product_type_simple:hover,
body.prof-sicurezza .product .button.product_type_variable:hover,
body.prof-sicurezza .product a.button:hover{
background:var(--action-ink) !important;
transform:translateY(-1px) !important;
}
/* "Aggiunto al carrello" state (.added_to_cart link che WC aggiunge dopo click) */
body.prof-sicurezza .product .added_to_cart{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
width:100% !important;
padding:8px 12px !important;
margin-top:6px !important;
background:#fff !important;
color:var(--ok, oklch(0.55 0.18 145)) !important;
border:1px solid var(--ok, oklch(0.70 0.15 145)) !important;
border-radius:var(--radius, 8px) !important;
font-size:12.5px !important;
font-weight:600 !important;
text-decoration:none !important;
}
/* Loading spinner WC dopo click */
body.prof-sicurezza .product .loading{
opacity:0.6 !important;
pointer-events:none !important;
}
body.prof-sicurezza .product .added{
display:none !important; /* nascondi tick, lo dice già il bottone */
}
/* ===== #7 ADD TO CART PDP ===== */
body.prof-sicurezza .pdp .buy-row,
body.prof-sicurezza .pdp form.cart{
display:flex !important;
flex-wrap:wrap !important;
align-items:stretch !important;
gap:12px !important;
margin:16px 0 !important;
}
body.prof-sicurezza .pdp form.cart .quantity input.qty{
width:80px !important;
padding:12px !important;
border:1px solid var(--line) !important;
border-radius:var(--radius, 8px) !important;
font-size:15px !important;
font-weight:600 !important;
text-align:center !important;
-moz-appearance:textfield !important;
}
body.prof-sicurezza .pdp .single_add_to_cart_button,
body.prof-sicurezza .pdp .btn-add,
body.prof-sicurezza .pdp button.single_add_to_cart_button{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
flex:1 1 auto !important;
min-width:200px !important;
padding:14px 28px !important;
background:var(--action) !important;
color:#fff !important;
border:1px solid var(--action) !important;
border-radius:var(--radius, 8px) !important;
font-size:15px !important;
font-weight:700 !important;
font-family:inherit !important;
text-decoration:none !important;
cursor:pointer !important;
transition:background .15s ease !important;
}
body.prof-sicurezza .pdp .single_add_to_cart_button:hover{
background:var(--action-ink) !important;
}
/* ===== #1 LOGO IMG (sostituisce SVG shield) ===== */
body.prof-sicurezza .logo-img{
display:block !important;
height:38px !important;
width:auto !important;
max-width:200px !important;
object-fit:contain !important;
}
@media (max-width:768px){
body.prof-sicurezza .logo-img{
height:30px !important;
}
}
/* ===== #6 YITH WISHLIST: integrazione visiva ===== */
body.prof-sicurezza .product .yith-wcwl-add-to-wishlist,
body.prof-sicurezza .product .yith-wcwl-add-button{
position:absolute !important;
top:10px !important;
right:10px !important;
z-index:2 !important;
margin:0 !important;
}
body.prof-sicurezza .product .yith-wcwl-add-to-wishlist a,
body.prof-sicurezza .product .yith-add-to-wishlist-button{
width:30px !important;
height:30px !important;
border-radius:50% !important;
background:#fff !important;
border:1px solid var(--line) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 !important;
font-size:0 !important;
color:var(--ink-3) !important;
transition:border-color .15s ease, color .15s ease !important;
}
body.prof-sicurezza .product .yith-wcwl-add-to-wishlist a:hover,
body.prof-sicurezza .product .yith-add-to-wishlist-button:hover{
border-color:var(--danger) !important;
color:var(--danger) !important;
}
body.prof-sicurezza .product .yith-wcwl-add-to-wishlist a::before,
body.prof-sicurezza .product .yith-add-to-wishlist-button::before{
content:"♥" !important;
font-size:14px !important;
line-height:1 !important;
}
/* Stato "added to wishlist" */
body.prof-sicurezza .product .yith-wcwl-wishlistexistsbrowse a::before,
body.prof-sicurezza .product .yith-wcwl-wishlistaddedbrowse a::before{
color:var(--danger) !important;
}
/* ===== #4 WC CART + CHECKOUT styling ===== */
body.prof-sicurezza .woocommerce{
font-family:inherit !important;
}
body.prof-sicurezza .woocommerce-cart-form,
body.prof-sicurezza form.woocommerce-cart-form{
margin:24px 0 !important;
}
body.prof-sicurezza table.shop_table{
border:1px solid var(--line) !important;
border-radius:var(--radius-lg, 12px) !important;
border-collapse:separate !important;
border-spacing:0 !important;
overflow:hidden !important;
background:#fff !important;
}
body.prof-sicurezza table.shop_table th{
background:var(--bg-2) !important;
font-family:'IBM Plex Mono', monospace !important;
font-size:11px !important;
letter-spacing:0.06em !important;
text-transform:uppercase !important;
color:var(--ink-2) !important;
padding:14px 16px !important;
border-bottom:1px solid var(--line) !important;
font-weight:600 !important;
}
body.prof-sicurezza table.shop_table td{
padding:16px !important;
border-bottom:1px solid var(--line) !important;
vertical-align:middle !important;
}
body.prof-sicurezza table.shop_table tr:last-child td{
border-bottom:none !important;
}
body.prof-sicurezza .cart_item .product-thumbnail img{
max-width:80px !important;
border-radius:var(--radius) !important;
border:1px solid var(--line) !important;
}
body.prof-sicurezza .cart_item .product-name a{
color:var(--ink) !important;
font-weight:600 !important;
text-decoration:none !important;
}
body.prof-sicurezza .cart_item .quantity .input-text{
width:60px !important;
padding:8px !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
text-align:center !important;
}
body.prof-sicurezza .cart_item .product-remove a{
width:30px !important;
height:30px !important;
border-radius:50% !important;
background:var(--bg-2) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:var(--ink) !important;
text-decoration:none !important;
font-size:18px !important;
line-height:1 !important;
}
body.prof-sicurezza .cart_item .product-remove a:hover{
background:var(--danger) !important;
color:#fff !important;
}
/* Cart totals box (a destra) */
body.prof-sicurezza .cart-collaterals .cart_totals{
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:var(--radius-lg, 12px) !important;
padding:24px !important;
}
body.prof-sicurezza .cart_totals h2{
font-size:20px !important;
margin:0 0 16px !important;
font-weight:700 !important;
}
body.prof-sicurezza .cart_totals .order-total .amount{
font-size:22px !important;
color:var(--brand) !important;
font-weight:700 !important;
}
/* Coupon form */
body.prof-sicurezza .coupon{
display:flex !important;
gap:8px !important;
margin-bottom:16px !important;
}
body.prof-sicurezza .coupon input[type="text"]{
flex:1 !important;
padding:10px 14px !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
font-size:14px !important;
}
/* WC buttons → stile coerente */
body.prof-sicurezza .woocommerce .button,
body.prof-sicurezza .woocommerce a.button,
body.prof-sicurezza .woocommerce button.button,
body.prof-sicurezza .woocommerce input.button,
body.prof-sicurezza .checkout-button,
body.prof-sicurezza #place_order,
body.prof-sicurezza .wc-proceed-to-checkout a.checkout-button{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
padding:12px 22px !important;
background:var(--action) !important;
color:#fff !important;
border:1px solid var(--action) !important;
border-radius:var(--radius, 8px) !important;
font-size:14px !important;
font-weight:600 !important;
font-family:inherit !important;
text-decoration:none !important;
text-shadow:none !important;
cursor:pointer !important;
transition:background .15s ease !important;
}
body.prof-sicurezza .woocommerce .button:hover,
body.prof-sicurezza .checkout-button:hover,
body.prof-sicurezza #place_order:hover{
background:var(--action-ink) !important;
}
body.prof-sicurezza .woocommerce .button.alt,
body.prof-sicurezza .checkout-button,
body.prof-sicurezza #place_order{
background:var(--ink) !important;
border-color:var(--ink) !important;
width:100% !important;
padding:14px 24px !important;
font-size:15px !important;
}
body.prof-sicurezza .woocommerce .button.alt:hover,
body.prof-sicurezza .checkout-button:hover,
body.prof-sicurezza #place_order:hover{
background:oklch(0.22 0.005 250) !important;
}
/* Checkout form fields */
body.prof-sicurezza .woocommerce form .form-row input.input-text,
body.prof-sicurezza .woocommerce form .form-row textarea,
body.prof-sicurezza .woocommerce form .form-row select,
body.prof-sicurezza .woocommerce .select2-container--default .select2-selection--single{
padding:11px 14px !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
font-size:14px !important;
background:#fff !important;
color:var(--ink) !important;
box-shadow:none !important;
height:auto !important;
}
body.prof-sicurezza .woocommerce form .form-row input.input-text:focus,
body.prof-sicurezza .woocommerce form .form-row textarea:focus{
outline:none !important;
border-color:var(--action) !important;
box-shadow:0 0 0 3px oklch(0.65 0.18 250 / 0.15) !important;
}
body.prof-sicurezza .woocommerce form .form-row label{
font-size:12.5px !important;
font-weight:600 !important;
color:var(--ink-2) !important;
margin-bottom:6px !important;
}
/* Checkout layout: 2 col */
body.prof-sicurezza .woocommerce-checkout #customer_details{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:32px !important;
margin-bottom:32px !important;
}
@media (max-width:768px){
body.prof-sicurezza .woocommerce-checkout #customer_details{
grid-template-columns:1fr !important;
}
}
/* Notice box */
body.prof-sicurezza .woocommerce-message,
body.prof-sicurezza .woocommerce-info,
body.prof-sicurezza .woocommerce-error{
padding:14px 18px !important;
border-radius:var(--radius) !important;
font-size:14px !important;
margin:16px 0 !important;
border-left:4px solid !important;
}
body.prof-sicurezza .woocommerce-message{
background:oklch(0.95 0.05 145) !important;
border-color:var(--ok, oklch(0.55 0.18 145)) !important;
color:oklch(0.30 0.15 145) !important;
}
body.prof-sicurezza .woocommerce-info{
background:oklch(0.95 0.05 250) !important;
border-color:var(--action) !important;
color:oklch(0.30 0.18 250) !important;
}
body.prof-sicurezza .woocommerce-error{
background:oklch(0.95 0.05 25) !important;
border-color:var(--danger) !important;
color:oklch(0.30 0.18 25) !important;
}
/* Cart layout 2 col su desktop (form + totals) */
body.prof-sicurezza .woocommerce-cart .woocommerce{
display:grid !important;
grid-template-columns:2fr 1fr !important;
gap:32px !important;
align-items:start !important;
}
body.prof-sicurezza .woocommerce-cart .woocommerce > .woocommerce-cart-form{
grid-column:1 !important;
}
body.prof-sicurezza .woocommerce-cart .woocommerce > .cart-collaterals{
grid-column:2 !important;
}
@media (max-width:1024px){
body.prof-sicurezza .woocommerce-cart .woocommerce{
grid-template-columns:1fr !important;
}
body.prof-sicurezza .woocommerce-cart .woocommerce > .woocommerce-cart-form,
body.prof-sicurezza .woocommerce-cart .woocommerce > .cart-collaterals{
grid-column:1 !important;
}
}
/* ===== PAGINA ASSISTENZA (#9) ===== */
body.prof-sicurezza .assistenza-grid{
display:grid !important;
grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
gap:18px !important;
margin:32px 0 !important;
}
@media (max-width:768px){
body.prof-sicurezza .assistenza-grid{
grid-template-columns:1fr !important;
}
}
body.prof-sicurezza .assistenza-card{
display:flex !important;
flex-direction:column !important;
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:var(--radius-lg, 12px) !important;
padding:24px !important;
text-decoration:none !important;
color:inherit !important;
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
body.prof-sicurezza .assistenza-card:hover{
transform:translateY(-3px) !important;
box-shadow:0 12px 28px rgba(0,0,0,0.06) !important;
border-color:var(--ink-3) !important;
}
body.prof-sicurezza .assistenza-card-ic{
width:54px !important;
height:54px !important;
border-radius:12px !important;
background:var(--brand-soft, oklch(0.93 0.04 250)) !important;
color:var(--brand) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin-bottom:14px !important;
}
body.prof-sicurezza .assistenza-card h3{
font-size:18px !important;
font-weight:700 !important;
margin:0 0 6px !important;
}
body.prof-sicurezza .assistenza-card p{
font-size:13.5px !important;
color:var(--ink-2) !important;
margin:0 0 12px !important;
line-height:1.5 !important;
}
body.prof-sicurezza .assistenza-card .link{
color:var(--brand) !important;
font-weight:600 !important;
font-size:13px !important;
margin-top:auto !important;
}
body.prof-sicurezza .assistenza-section{
margin:48px 0 !important;
}
body.prof-sicurezza .assistenza-section h2{
font-size:24px !important;
font-weight:700 !important;
margin:0 0 20px !important;
}
body.prof-sicurezza .faq-grid{
display:flex !important;
flex-direction:column !important;
gap:10px !important;
}
body.prof-sicurezza .faq-item{
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
padding:14px 18px !important;
transition:border-color .15s ease !important;
}
body.prof-sicurezza .faq-item:hover{
border-color:var(--ink-3) !important;
}
body.prof-sicurezza .faq-item summary{
font-weight:600 !important;
font-size:14.5px !important;
cursor:pointer !important;
list-style:none !important;
padding-right:24px !important;
position:relative !important;
color:var(--ink) !important;
}
body.prof-sicurezza .faq-item summary::-webkit-details-marker{ display:none !important; }
body.prof-sicurezza .faq-item summary::after{
content:"+" !important;
position:absolute !important;
right:0 !important;
top:50% !important;
transform:translateY(-50%) !important;
font-size:20px !important;
font-weight:400 !important;
color:var(--ink-3) !important;
transition:transform .15s ease !important;
}
body.prof-sicurezza .faq-item[open] summary::after{
content:"–" !important;
}
body.prof-sicurezza .faq-item p{
margin:12px 0 0 !important;
color:var(--ink-2) !important;
font-size:14px !important;
line-height:1.6 !important;
}
body.prof-sicurezza .faq-item p a{
color:var(--brand) !important;
font-weight:600 !important;
}
/* ===== PAGINE STATICHE (footer pages: Contatti, Spedizioni, Resi, Garanzia, Chi siamo, ecc) ===== */
body.prof-sicurezza .ps-static-page{
/* solo padding verticale: quello orizzontale lo dà .container (32px desktop /
16px mobile) come nel resto del sito — prima `padding:32px 0` lo azzerava
e il testo si attaccava al bordo. */
padding-top:32px !important;
padding-bottom:64px !important;
min-height:50vh !important;
}
body.prof-sicurezza .ps-static-page .breadcrumb{
margin-bottom:14px !important;
}
body.prof-sicurezza .ps-static-hero{
padding:6px 0 32px !important;
border-bottom:1px solid var(--line) !important;
margin-bottom:32px !important;
}
body.prof-sicurezza .ps-static-hero .lbl{
font-family:'IBM Plex Mono', monospace !important;
font-size:11px !important;
letter-spacing:0.12em !important;
text-transform:uppercase !important;
color:var(--brand) !important;
margin-bottom:10px !important;
}
body.prof-sicurezza .ps-static-hero h1{
font-size:44px !important;
font-weight:700 !important;
letter-spacing:-0.02em !important;
margin:0 !important;
line-height:1.1 !important;
}
body.prof-sicurezza .ps-static-body{
max-width:780px !important;
font-size:15.5px !important;
line-height:1.7 !important;
color:var(--ink-2) !important;
}
body.prof-sicurezza .ps-static-body h2{
font-size:24px !important;
font-weight:700 !important;
color:var(--ink) !important;
margin:36px 0 14px !important;
letter-spacing:-0.01em !important;
}
body.prof-sicurezza .ps-static-body h3{
font-size:18px !important;
font-weight:700 !important;
color:var(--ink) !important;
margin:24px 0 10px !important;
}
body.prof-sicurezza .ps-static-body p{
margin:0 0 12px !important;
}
body.prof-sicurezza .ps-static-body ul,
body.prof-sicurezza .ps-static-body ol{
margin:8px 0 16px !important;
padding-left:24px !important;
}
body.prof-sicurezza .ps-static-body li{
margin:6px 0 !important;
}
body.prof-sicurezza .ps-static-body a{
color:var(--brand) !important;
font-weight:600 !important;
text-decoration:underline !important;
text-underline-offset:2px !important;
}
body.prof-sicurezza .ps-static-body b,
body.prof-sicurezza .ps-static-body strong{
color:var(--ink) !important;
font-weight:700 !important;
}
/* Notice box dentro le pagine statiche (es. limitazione P.IVA in /resi/) */
body.prof-sicurezza .ps-static-notice{
padding:18px 22px !important;
background:oklch(0.96 0.04 60) !important;
border-left:4px solid oklch(0.65 0.18 60) !important;
border-radius:var(--radius) !important;
margin:18px 0 !important;
font-size:14.5px !important;
color:oklch(0.30 0.08 60) !important;
}
body.prof-sicurezza .ps-static-notice b{
color:oklch(0.20 0.10 60) !important;
}
/* Cards (per pagina /contatti/) */
body.prof-sicurezza .ps-static-cards{
display:grid !important;
grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
gap:14px !important;
margin:24px 0 32px !important;
}
@media (max-width:768px){
body.prof-sicurezza .ps-static-cards{
grid-template-columns:1fr !important;
}
}
body.prof-sicurezza .ps-static-card{
display:flex !important;
flex-direction:column !important;
padding:22px !important;
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:var(--radius-lg, 12px) !important;
text-decoration:none !important;
color:inherit !important;
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
body.prof-sicurezza .ps-static-card:hover{
transform:translateY(-2px) !important;
box-shadow:0 8px 24px rgba(0,0,0,0.06) !important;
border-color:var(--ink-3) !important;
}
body.prof-sicurezza .ps-static-card h3{
margin:0 0 6px !important;
font-size:16px !important;
}
body.prof-sicurezza .ps-static-card p{
margin:0 0 12px !important;
color:var(--ink-2) !important;
font-size:14px !important;
line-height:1.5 !important;
}
body.prof-sicurezza .ps-static-card .link{
margin-top:auto !important;
color:var(--brand) !important;
font-weight:600 !important;
font-size:13px !important;
}
/* Info box (es. sede legale in /contatti/) */
body.prof-sicurezza .ps-static-info{
padding:24px !important;
background:var(--bg-2) !important;
border-radius:var(--radius-lg, 12px) !important;
margin:24px 0 !important;
}
body.prof-sicurezza .ps-static-info h3{
margin-top:0 !important;
}
/* /contatti/: cards + box info su 3 colonne allineate, a tutta la larghezza del
contenitore (niente cap a 780px). :has(> .ps-static-cards) → solo pagina Contatti. */
@media (min-width:769px){
body.prof-sicurezza .ps-static-body:has(> .ps-static-cards){
max-width:none !important;
display:grid !important;
grid-template-columns:1fr 1fr 1fr !important;
gap:14px !important;
align-items:start !important;
}
body.prof-sicurezza .ps-static-body:has(> .ps-static-cards) > .ps-static-cards{
grid-column:1 / -1 !important;
margin:18px 0 6px !important;
}
body.prof-sicurezza .ps-static-body:has(> .ps-static-cards) > .ps-static-info{
margin:0 !important;
}
}
@media (max-width:768px){
body.prof-sicurezza .ps-static-hero{
padding:4px 0 20px !important;
margin-bottom:20px !important;
}
body.prof-sicurezza .ps-static-hero h1{
font-size:30px !important;
}
body.prof-sicurezza .ps-static-body h2{
font-size:20px !important;
}
}
/* ============================================================
v31 — Fix specifici: YITH wishlist icon-only + add-to-cart card
============================================================ */
/* === YITH WISHLIST v3 (4.x markup): icon-only nel product card === */
/* YITH 4.x usa classi DIVERSE: .yith-add-to-wishlist-button-block container,
a.yith-wcwl-add-to-wishlist-button anchor, svg.yith-wcwl-icon icona,
span.yith-wcwl-add-to-wishlist-button__label testo. */
body.prof-sicurezza .product .yith-add-to-wishlist-button-block,
body.prof-sicurezza article.product .yith-add-to-wishlist-button-block{
position:absolute !important;
top:10px !important;
right:10px !important;
z-index:3 !important;
width:36px !important;
height:36px !important;
margin:0 !important;
padding:0 !important;
display:block !important;
}
body.prof-sicurezza .product .yith-add-to-wishlist-button-block a.yith-wcwl-add-to-wishlist-button,
body.prof-sicurezza article.product a.yith-wcwl-add-to-wishlist-button,
body.prof-sicurezza article.product a.yith-wcwl-remove-from-wishlist-button{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:36px !important;
height:36px !important;
background:#fff !important;
border:1.5px solid var(--line) !important;
border-radius:50% !important;
color:var(--ink-3) !important;
padding:0 !important;
margin:0 !important;
font-size:0 !important;
line-height:1 !important;
box-sizing:border-box !important;
text-decoration:none !important;
cursor:pointer !important;
transition:border-color .15s ease, color .15s ease, background .15s ease !important;
box-shadow:0 1px 2px rgba(0,0,0,0.04) !important;
}
body.prof-sicurezza .product .yith-add-to-wishlist-button-block a.yith-wcwl-add-to-wishlist-button:hover,
body.prof-sicurezza article.product a.yith-wcwl-add-to-wishlist-button:hover{
border-color:var(--danger) !important;
color:var(--danger) !important;
}
/* Nascondi il label "Add to wishlist" */
body.prof-sicurezza .product .yith-wcwl-add-to-wishlist-button__label,
body.prof-sicurezza .product .yith-wcwl-add-to-wishlist-button .yith-wcwl-add-to-wishlist-button__label{
display:none !important;
font-size:0 !important;
}
/* Mostra l'icona SVG cuore — più grande e con stroke più nitido */
body.prof-sicurezza .product .yith-wcwl-add-to-wishlist-button svg.yith-wcwl-icon,
body.prof-sicurezza .product .yith-add-to-wishlist-button-block svg{
width:20px !important;
height:20px !important;
display:block !important;
stroke:currentColor !important;
stroke-width:1.8 !important;
fill:none !important;
font-size:0 !important;
shape-rendering:geometricPrecision !important;
}
/* ============================================================
Stato "ADDED" — solo l'SVG cuore si colora rosso pieno.
Lo sfondo del bottone rimane bianco, border leggermente rosa.
============================================================ */
body.prof-sicurezza .product .yith-add-to-wishlist-button-block--in a,
body.prof-sicurezza .product .yith-add-to-wishlist-button-block.yith-add-to-wishlist-button-block--in a,
body.prof-sicurezza .product a.yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button--added,
body.prof-sicurezza .product a.yith-wcwl-add-to-wishlist-button[data-state="added"],
body.prof-sicurezza .product a.yith-wcwl-remove-from-wishlist-button{
color:var(--danger) !important;
background:#fff !important;
border-color:var(--danger) !important;
}
body.prof-sicurezza .product .yith-add-to-wishlist-button-block--in a svg,
body.prof-sicurezza .product a.yith-wcwl-add-to-wishlist-button--added svg,
body.prof-sicurezza .product a.yith-wcwl-add-to-wishlist-button[data-state="added"] svg,
body.prof-sicurezza .product a.yith-wcwl-remove-from-wishlist-button svg{
fill:var(--danger) !important;
stroke:var(--danger) !important;
}
/* === BACKWARD COMPAT: regole vecchie YITH wcwl markup (kept for safety) === */
body.prof-sicurezza .product .yith-wcwl-add-to-wishlist{
position:absolute !important;
top:10px !important;
right:10px !important;
z-index:3 !important;
width:32px !important;
height:32px !important;
margin:0 !important;
padding:0 !important;
display:block !important;
}
/* Tutti i wrapper interni (add-button, browse-button) sovrapposti nello stesso bottone */
body.prof-sicurezza .product .yith-wcwl-add-to-wishlist > div{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 !important;
}
/* Hidden state */
body.prof-sicurezza .product .yith-wcwl-add-to-wishlist .hidden,
body.prof-sicurezza .product .yith-wcwl-add-to-wishlist [style*="display: none"]{
display:none !important;
}
/* L'anchor diventa il cerchio bianco col cuore */
body.prof-sicurezza .product .yith-wcwl-add-to-wishlist a{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
height:100% !important;
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:50% !important;
color:var(--ink-3) !important;
text-decoration:none !important;
padding:0 !important;
margin:0 !important;
font-size:0 !important; /* nasconde testo "Add to wishlist" */
line-height:1 !important;
box-sizing:border-box !important;
transition:border-color .15s ease, color .15s ease, background .15s ease !important;
}
body.prof-sicurezza .product .yith-wcwl-add-to-wishlist a:hover{
border-color:var(--danger) !important;
color:var(--danger) !important;
}
/* Hide tutti i child text node / span dell'anchor */
body.prof-sicurezza .product .yith-wcwl-add-to-wishlist a span,
body.prof-sicurezza .product .yith-wcwl-add-to-wishlist a > *:not(i):not(svg){
font-size:0 !important;
display:none !important;
}
/* L'icona YITH (i.yith-wcwl-icon) — mostrala col font-size corretto */
body.prof-sicurezza .product .yith-wcwl-add-to-wishlist a i,
body.prof-sicurezza .product .yith-wcwl-add-to-wishlist a .yith-wcwl-icon{
font-size:16px !important;
line-height:1 !important;
display:inline-block !important;
color:inherit !important;
}
/* Se l'icona usa SVG */
body.prof-sicurezza .product .yith-wcwl-add-to-wishlist a svg{
width:16px !important;
height:16px !important;
display:inline-block !important;
stroke:currentColor !important;
fill:none !important;
}
/* Fallback: se nessuna icona è caricata da YITH, mostra cuore unicode */
body.prof-sicurezza .product .yith-wcwl-add-to-wishlist a:not(:has(i)):not(:has(svg))::before{
content:"♥" !important;
font-size:16px !important;
line-height:1 !important;
display:inline-block !important;
}
/* AJAX loading state — non far espandere il bottone */
body.prof-sicurezza .product .yith-wcwl-add-to-wishlist .ajax-loading{
display:none !important;
}
/* Stato added/exists — cuore pieno rosso */
body.prof-sicurezza .product .yith-wcwl-wishlistaddedbrowse a,
body.prof-sicurezza .product .yith-wcwl-wishlistexistsbrowse a{
color:var(--danger) !important;
border-color:var(--danger) !important;
}
/* Feedback message (mostra "Aggiunto") — nascondi */
body.prof-sicurezza .product .yith-wcwl-add-to-wishlist .feedback{
display:none !important;
}
/* === ADD TO CART CARD: specificity più alta + force visibility === */
body.prof-sicurezza article.product a.add,
body.prof-sicurezza article.product a.add_to_cart_button,
body.prof-sicurezza article.product a.button.product_type_simple,
body.prof-sicurezza article.product a.button.product_type_variable,
body.prof-sicurezza article.product a.button.product_type_grouped,
body.prof-sicurezza article.product a.button.product_type_external,
body.prof-sicurezza article.product a.ajax_add_to_cart,
body.prof-sicurezza .product .body a.button,
body.prof-sicurezza .product .body a.add_to_cart_button{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
width:100% !important;
padding:10px 16px !important;
margin-top:10px !important;
background:var(--action) !important;
color:#fff !important;
border:1px solid var(--action) !important;
border-radius:var(--radius, 8px) !important;
font-size:13.5px !important;
font-weight:600 !important;
font-family:inherit !important;
text-decoration:none !important;
text-align:center !important;
text-transform:none !important;
letter-spacing:0 !important;
text-shadow:none !important;
cursor:pointer !important;
transition:background .15s ease !important;
box-sizing:border-box !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
visibility:visible !important;
opacity:1 !important;
position:static !important;
}
body.prof-sicurezza article.product a.add:hover,
body.prof-sicurezza article.product a.add_to_cart_button:hover,
body.prof-sicurezza article.product a.button:hover,
body.prof-sicurezza .product .body a.button:hover{
background:var(--action-ink) !important;
}
/* "Visualizza prodotto" (product_type_variable o esauriti che non sono ajax-able) */
body.prof-sicurezza article.product a.button.product_type_variable::before,
body.prof-sicurezza article.product a.button.product_type_grouped::before,
body.prof-sicurezza article.product a.button.product_type_external::before{
content:"" !important;
}
/* ============================================================
v32 — Cart page styling forte + PDP buy-row wishlist
============================================================ */
/* PDP buy-row con wishlist accanto al button */
body.prof-sicurezza .pdp .pdp-buy-row{
display:flex !important;
align-items:stretch !important;
gap:10px !important;
margin:16px 0 !important;
}
body.prof-sicurezza .pdp .pdp-buy-row form.cart{
flex:1 !important;
margin:0 !important;
}
body.prof-sicurezza .pdp .pdp-wishlist{
flex:0 0 auto !important;
display:flex !important;
align-items:center !important;
}
body.prof-sicurezza .pdp .pdp-wishlist .yith-wcwl-add-to-wishlist{
position:relative !important;
top:auto !important; right:auto !important;
width:54px !important;
height:54px !important;
}
body.prof-sicurezza .pdp .pdp-wishlist .yith-wcwl-add-to-wishlist a{
border-radius:var(--radius, 8px) !important;
border:1px solid var(--line) !important;
background:#fff !important;
}
body.prof-sicurezza .pdp .pdp-wishlist .yith-wcwl-add-to-wishlist a i,
body.prof-sicurezza .pdp .pdp-wishlist .yith-wcwl-add-to-wishlist a svg{
font-size:20px !important;
width:20px !important;
height:20px !important;
}
/* === CART PAGE: layout completo + traduzione headers via ::after ::before === */
/* Wrapper outer */
body.prof-sicurezza.woocommerce-cart .entry-content,
body.prof-sicurezza.woocommerce-cart main,
body.prof-sicurezza.woocommerce-cart .ct-container,
body.prof-sicurezza.woocommerce-cart .ct-main-content{
padding:32px 0 64px !important;
}
/* Forza container width + grid 2 col su desktop */
body.prof-sicurezza .woocommerce.archive-on-cart,
body.prof-sicurezza .woocommerce form.woocommerce-cart-form,
body.prof-sicurezza .cart-collaterals{
max-width:1320px !important;
margin-left:auto !important;
margin-right:auto !important;
padding-left:16px !important;
padding-right:16px !important;
box-sizing:border-box !important;
}
/* SHOP TABLE (cart items) — restyle forte */
body.prof-sicurezza table.shop_table_responsive,
body.prof-sicurezza table.cart,
body.prof-sicurezza .woocommerce table.shop_table{
width:100% !important;
background:#fff !important;
border:1px solid var(--line) !important;
border-collapse:separate !important;
border-spacing:0 !important;
border-radius:var(--radius-lg, 12px) !important;
overflow:hidden !important;
margin:0 0 24px !important;
}
body.prof-sicurezza table.cart thead,
body.prof-sicurezza .woocommerce table.shop_table thead{
background:var(--bg-2) !important;
}
body.prof-sicurezza table.cart thead th,
body.prof-sicurezza .woocommerce table.shop_table thead th{
font-family:'IBM Plex Mono', monospace !important;
font-size:11px !important;
letter-spacing:0.08em !important;
text-transform:uppercase !important;
color:var(--ink-2) !important;
padding:16px !important;
font-weight:600 !important;
text-align:left !important;
border-bottom:1px solid var(--line) !important;
}
body.prof-sicurezza table.cart tbody td,
body.prof-sicurezza .woocommerce table.shop_table tbody td{
padding:20px 16px !important;
border-bottom:1px solid var(--line) !important;
vertical-align:middle !important;
background:#fff !important;
}
body.prof-sicurezza table.cart tbody tr:last-child td,
body.prof-sicurezza .woocommerce table.shop_table tbody tr:last-child td{
border-bottom:none !important;
}
/* Cart item product thumbnail */
body.prof-sicurezza .cart_item .product-thumbnail img,
body.prof-sicurezza .woocommerce-cart-form .cart_item .product-thumbnail img{
width:80px !important;
height:80px !important;
max-width:80px !important;
object-fit:contain !important;
border-radius:var(--radius) !important;
border:1px solid var(--line) !important;
background:#fff !important;
}
/* Product name link */
body.prof-sicurezza .cart_item .product-name a,
body.prof-sicurezza .woocommerce-cart-form .product-name a{
color:var(--ink) !important;
font-weight:600 !important;
font-size:14.5px !important;
text-decoration:none !important;
line-height:1.3 !important;
}
body.prof-sicurezza .cart_item .product-name a:hover{
color:var(--brand) !important;
}
/* Quantity controls */
body.prof-sicurezza .cart_item .quantity{
display:inline-flex !important;
align-items:center !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
overflow:hidden !important;
}
body.prof-sicurezza .cart_item .quantity .input-text,
body.prof-sicurezza .cart_item .quantity input[type="number"],
body.prof-sicurezza .cart_item .qty{
width:54px !important;
padding:10px 6px !important;
border:none !important;
text-align:center !important;
font-size:14px !important;
font-weight:600 !important;
background:#fff !important;
}
body.prof-sicurezza .cart_item .quantity .qty-minus,
body.prof-sicurezza .cart_item .quantity .qty-plus{
width:32px !important;
height:38px !important;
border:none !important;
background:var(--bg-2) !important;
cursor:pointer !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-weight:700 !important;
}
/* Price cells */
body.prof-sicurezza .cart_item .product-price,
body.prof-sicurezza .cart_item .product-subtotal{
font-weight:600 !important;
font-size:15px !important;
color:var(--ink) !important;
}
body.prof-sicurezza .cart_item .product-price del,
body.prof-sicurezza .cart_item .product-subtotal del{
color:var(--ink-3) !important;
font-weight:400 !important;
font-size:13px !important;
}
body.prof-sicurezza .cart_item .product-price ins,
body.prof-sicurezza .cart_item .product-subtotal ins{
background:none !important;
text-decoration:none !important;
color:var(--brand) !important;
}
/* Remove button (x) */
body.prof-sicurezza .cart_item .product-remove a,
body.prof-sicurezza .cart_item .remove{
width:30px !important;
height:30px !important;
border-radius:50% !important;
background:var(--bg-2) !important;
color:var(--ink) !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
font-size:16px !important;
line-height:1 !important;
font-weight:400 !important;
text-decoration:none !important;
border:none !important;
}
body.prof-sicurezza .cart_item .product-remove a:hover,
body.prof-sicurezza .cart_item .remove:hover{
background:var(--danger) !important;
color:#fff !important;
}
/* Save (sconto) message */
body.prof-sicurezza .product-subtotal .save-amount,
body.prof-sicurezza .save-amount{
display:block !important;
font-size:11.5px !important;
font-weight:500 !important;
color:var(--ok, oklch(0.55 0.18 145)) !important;
margin-top:4px !important;
}
/* Coupon row at bottom of cart table */
body.prof-sicurezza .cart_item.actions,
body.prof-sicurezza table.cart tr.actions,
body.prof-sicurezza .woocommerce table.shop_table tr.actions{
background:var(--bg-2) !important;
}
body.prof-sicurezza tr.actions td.actions{
padding:16px !important;
}
body.prof-sicurezza .coupon{
display:inline-flex !important;
gap:8px !important;
align-items:center !important;
margin-right:16px !important;
}
body.prof-sicurezza .coupon input.input-text,
body.prof-sicurezza .coupon #coupon_code{
padding:11px 14px !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
font-size:14px !important;
background:#fff !important;
min-width:200px !important;
}
body.prof-sicurezza .coupon button.button{
padding:11px 18px !important;
background:#fff !important;
color:var(--ink) !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
font-weight:600 !important;
cursor:pointer !important;
}
body.prof-sicurezza .coupon button.button:hover{
border-color:var(--action) !important;
color:var(--brand) !important;
}
/* CART TOTALS box */
body.prof-sicurezza .cart-collaterals,
body.prof-sicurezza .woocommerce .cart-collaterals{
width:100% !important;
}
body.prof-sicurezza .cart_totals{
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:var(--radius-lg, 12px) !important;
padding:28px !important;
width:auto !important;
}
body.prof-sicurezza .cart_totals h2{
font-family:'IBM Plex Mono', monospace !important;
font-size:11px !important;
letter-spacing:0.08em !important;
text-transform:uppercase !important;
color:var(--ink-3) !important;
margin:0 0 16px !important;
font-weight:600 !important;
}
body.prof-sicurezza .cart_totals table.shop_table{
border:none !important;
border-radius:0 !important;
}
body.prof-sicurezza .cart_totals table.shop_table th{
padding:12px 0 !important;
background:transparent !important;
text-transform:none !important;
font-family:inherit !important;
font-size:14px !important;
letter-spacing:0 !important;
border:none !important;
border-bottom:1px solid var(--line) !important;
color:var(--ink-2) !important;
}
body.prof-sicurezza .cart_totals table.shop_table td{
padding:12px 0 !important;
border:none !important;
border-bottom:1px solid var(--line) !important;
text-align:right !important;
font-weight:600 !important;
}
body.prof-sicurezza .cart_totals .order-total th,
body.prof-sicurezza .cart_totals .order-total td{
font-size:18px !important;
padding-top:18px !important;
font-weight:700 !important;
border-bottom:none !important;
}
body.prof-sicurezza .cart_totals .order-total .amount{
color:var(--brand) !important;
font-size:22px !important;
}
/* Proceed to checkout button (Estimated total + bottone) */
body.prof-sicurezza .wc-proceed-to-checkout{
margin-top:20px !important;
padding-top:20px !important;
border-top:1px solid var(--line) !important;
}
body.prof-sicurezza .wc-proceed-to-checkout a.checkout-button,
body.prof-sicurezza a.checkout-button.button.alt.wc-forward,
body.prof-sicurezza .button.checkout-button{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
padding:16px 24px !important;
background:var(--ink) !important;
color:#fff !important;
border:1px solid var(--ink) !important;
border-radius:var(--radius, 8px) !important;
font-size:15px !important;
font-weight:700 !important;
text-decoration:none !important;
text-transform:none !important;
letter-spacing:0 !important;
cursor:pointer !important;
transition:background .15s ease !important;
}
body.prof-sicurezza .wc-proceed-to-checkout a.checkout-button:hover{
background:oklch(0.22 0.005 250) !important;
}
/* Empty cart message */
body.prof-sicurezza .cart-empty,
body.prof-sicurezza .woocommerce-cart .cart-empty{
text-align:center !important;
padding:48px 24px !important;
font-size:16px !important;
color:var(--ink-2) !important;
}
body.prof-sicurezza .return-to-shop{
text-align:center !important;
margin-top:24px !important;
}
body.prof-sicurezza .return-to-shop a.button{
display:inline-flex !important;
padding:12px 24px !important;
background:var(--action) !important;
color:#fff !important;
border-radius:var(--radius) !important;
text-decoration:none !important;
font-weight:600 !important;
}
/* Cart layout 2 col su desktop */
@media (min-width:1024px){
body.prof-sicurezza.woocommerce-cart .woocommerce{
display:grid !important;
grid-template-columns:minmax(0, 2fr) minmax(0, 1fr) !important;
gap:32px !important;
align-items:start !important;
}
body.prof-sicurezza.woocommerce-cart .woocommerce > form.woocommerce-cart-form{
grid-column:1 !important;
margin:0 !important;
}
body.prof-sicurezza.woocommerce-cart .woocommerce > .cart-collaterals{
grid-column:2 !important;
position:sticky !important;
top:80px !important;
}
}
/* ============================================================
v33 — WC CART BLOCK (nuovo, Gutenberg-based) styling
Classi reali: wc-block-cart-* (non legacy woocommerce-cart-form)
============================================================ */
/* Container outer */
body.prof-sicurezza .wp-block-woocommerce-cart{
max-width:1320px !important;
margin:32px auto 64px !important;
padding:0 32px !important;
box-sizing:border-box !important;
}
@media (max-width:768px){
body.prof-sicurezza .wp-block-woocommerce-cart{
padding:0 16px !important;
}
}
/* Sidebar layout (cart items + totals) — force 2:1 grid filling full width */
body.prof-sicurezza .wc-block-components-sidebar-layout.wc-block-cart{
display:grid !important;
grid-template-columns:minmax(0, 2fr) minmax(0, 1fr) !important;
gap:32px !important;
align-items:start !important;
width:100% !important;
max-width:100% !important;
}
@media (max-width:1024px){
body.prof-sicurezza .wc-block-components-sidebar-layout.wc-block-cart{
grid-template-columns:1fr !important;
}
}
/* FORZA i due figli a riempire la loro cella di grid */
body.prof-sicurezza .wc-block-components-sidebar-layout.wc-block-cart > .wc-block-cart__main,
body.prof-sicurezza .wc-block-components-sidebar-layout.wc-block-cart > .wc-block-components-main,
body.prof-sicurezza .wc-block-components-sidebar-layout.wc-block-cart > .wc-block-cart__sidebar,
body.prof-sicurezza .wc-block-components-sidebar-layout.wc-block-cart > .wc-block-components-sidebar{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
flex:none !important;
box-sizing:border-box !important;
}
/* Main column (cart items) */
body.prof-sicurezza .wc-block-cart__main{
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:var(--radius-lg, 12px) !important;
overflow:hidden !important;
}
/* Table cart items */
body.prof-sicurezza table.wc-block-cart-items{
width:100% !important;
border-collapse:separate !important;
border-spacing:0 !important;
margin:0 !important;
}
/* Header row (Product, Total) */
body.prof-sicurezza .wc-block-cart-items__header{
background:var(--bg-2) !important;
border-bottom:1px solid var(--line) !important;
}
body.prof-sicurezza .wc-block-cart-items__header > *,
body.prof-sicurezza th.wc-block-cart-items__header-image,
body.prof-sicurezza th.wc-block-cart-items__header-product,
body.prof-sicurezza th.wc-block-cart-items__header-total{
font-family:'IBM Plex Mono', monospace !important;
font-size:11px !important;
letter-spacing:0.08em !important;
text-transform:uppercase !important;
color:var(--ink-2) !important;
padding:16px !important;
font-weight:600 !important;
text-align:left !important;
border:none !important;
}
body.prof-sicurezza th.wc-block-cart-items__header-total{
text-align:right !important;
}
/* Item rows */
body.prof-sicurezza tr.wc-block-cart-items__row,
body.prof-sicurezza .wc-block-cart-items__row{
border-bottom:1px solid var(--line) !important;
}
body.prof-sicurezza tr.wc-block-cart-items__row:last-child{
border-bottom:none !important;
}
body.prof-sicurezza .wc-block-cart-items__row td,
body.prof-sicurezza tr.wc-block-cart-items__row > *{
padding:20px 16px !important;
vertical-align:middle !important;
background:#fff !important;
border:none !important;
border-bottom:1px solid var(--line) !important;
}
body.prof-sicurezza tr.wc-block-cart-items__row:last-child td{
border-bottom:none !important;
}
/* Product image */
body.prof-sicurezza .wc-block-cart-item__image,
body.prof-sicurezza td.wc-block-cart-item__image{
width:100px !important;
padding-right:0 !important;
}
body.prof-sicurezza .wc-block-cart-item__image img,
body.prof-sicurezza .wc-block-cart-item__image a img{
width:80px !important;
height:80px !important;
object-fit:contain !important;
border-radius:var(--radius) !important;
border:1px solid var(--line) !important;
background:#fff !important;
padding:6px !important;
box-sizing:border-box !important;
}
/* Product name + variation info column */
body.prof-sicurezza .wc-block-cart-item__product,
body.prof-sicurezza td.wc-block-cart-item__product{
padding:20px 16px !important;
}
body.prof-sicurezza .wc-block-cart-item__product a,
body.prof-sicurezza .wc-block-cart-item__wrap a{
color:var(--ink) !important;
font-weight:600 !important;
font-size:14.5px !important;
text-decoration:none !important;
line-height:1.3 !important;
}
body.prof-sicurezza .wc-block-cart-item__product a:hover{
color:var(--brand) !important;
}
body.prof-sicurezza .wc-block-components-product-name{
font-weight:600 !important;
color:var(--ink) !important;
font-size:14.5px !important;
}
body.prof-sicurezza .wc-block-cart-item__prices,
body.prof-sicurezza .wc-block-components-product-price{
margin-top:6px !important;
font-size:13px !important;
color:var(--ink-2) !important;
}
/* Quantity selector */
body.prof-sicurezza .wc-block-cart-item__quantity{
margin-top:10px !important;
}
body.prof-sicurezza .wc-block-components-quantity-selector{
display:inline-flex !important;
align-items:stretch !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
overflow:hidden !important;
background:#fff !important;
}
body.prof-sicurezza .wc-block-components-quantity-selector input,
body.prof-sicurezza .wc-block-components-quantity-selector__input{
width:50px !important;
border:none !important;
text-align:center !important;
font-weight:600 !important;
font-size:14px !important;
padding:6px !important;
background:#fff !important;
}
body.prof-sicurezza .wc-block-components-quantity-selector__button{
width:32px !important;
height:auto !important;
border:none !important;
background:var(--bg-2) !important;
color:var(--ink) !important;
font-weight:700 !important;
cursor:pointer !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
body.prof-sicurezza .wc-block-components-quantity-selector__button:hover{
background:var(--line) !important;
}
/* Remove link */
body.prof-sicurezza .wc-block-cart-item__remove-link{
display:inline-block !important;
margin-top:10px !important;
font-size:12.5px !important;
color:var(--ink-3) !important;
text-decoration:underline !important;
}
body.prof-sicurezza .wc-block-cart-item__remove-link:hover{
color:var(--danger) !important;
}
/* Total cell */
body.prof-sicurezza .wc-block-cart-item__total,
body.prof-sicurezza td.wc-block-cart-item__total{
text-align:right !important;
font-weight:700 !important;
font-size:15px !important;
color:var(--ink) !important;
}
/* Sidebar (Cart Totals) */
body.prof-sicurezza .wc-block-cart__sidebar,
body.prof-sicurezza .wc-block-components-sidebar{
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:var(--radius-lg, 12px) !important;
padding:24px !important;
}
body.prof-sicurezza .wc-block-cart__sidebar .wc-block-components-totals-wrapper,
body.prof-sicurezza .wc-block-components-totals-wrapper{
border-bottom:1px solid var(--line) !important;
padding-bottom:12px !important;
margin-bottom:12px !important;
}
body.prof-sicurezza .wc-block-components-totals-wrapper:last-child{
border-bottom:none !important;
}
body.prof-sicurezza .wc-block-components-totals-item{
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
padding:6px 0 !important;
font-size:14px !important;
}
body.prof-sicurezza .wc-block-components-totals-item__label{
color:var(--ink-2) !important;
font-weight:500 !important;
}
body.prof-sicurezza .wc-block-components-totals-item__value{
font-weight:600 !important;
color:var(--ink) !important;
}
body.prof-sicurezza .wc-block-components-totals-footer-item{
padding-top:14px !important;
border-top:1px solid var(--line) !important;
margin-top:6px !important;
}
body.prof-sicurezza .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
font-size:16px !important;
font-weight:700 !important;
color:var(--ink) !important;
}
body.prof-sicurezza .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
font-size:22px !important;
font-weight:700 !important;
color:var(--brand) !important;
}
/* Coupon section */
body.prof-sicurezza .wc-block-components-totals-coupon,
body.prof-sicurezza .wc-block-components-panel{
background:transparent !important;
border:none !important;
border-top:1px solid var(--line) !important;
margin-top:12px !important;
padding-top:12px !important;
}
body.prof-sicurezza .wc-block-components-panel__button{
font-size:13px !important;
color:var(--brand) !important;
font-weight:600 !important;
padding:6px 0 !important;
background:transparent !important;
border:none !important;
}
body.prof-sicurezza .wc-block-components-totals-coupon input,
body.prof-sicurezza .wc-block-components-text-input input{
padding:10px 12px !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
font-size:14px !important;
}
/* Checkout button (Proceed to Checkout) */
body.prof-sicurezza .wc-block-cart__submit-container,
body.prof-sicurezza .wp-block-woocommerce-proceed-to-checkout-block{
margin-top:20px !important;
padding-top:20px !important;
border-top:1px solid var(--line) !important;
}
body.prof-sicurezza .wc-block-cart__submit-button,
body.prof-sicurezza .wc-block-components-checkout-button,
body.prof-sicurezza .wp-block-woocommerce-proceed-to-checkout-block a{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
padding:16px 24px !important;
background:var(--ink) !important;
color:#fff !important;
border:1px solid var(--ink) !important;
border-radius:var(--radius, 8px) !important;
font-size:15px !important;
font-weight:700 !important;
text-decoration:none !important;
text-transform:none !important;
letter-spacing:0 !important;
cursor:pointer !important;
transition:background .15s ease !important;
box-sizing:border-box !important;
}
body.prof-sicurezza .wc-block-cart__submit-button:hover,
body.prof-sicurezza .wc-block-components-checkout-button:hover,
body.prof-sicurezza .wp-block-woocommerce-proceed-to-checkout-block a:hover{
background:oklch(0.22 0.005 250) !important;
}
/* Empty cart message */
body.prof-sicurezza .wp-block-woocommerce-empty-cart-block,
body.prof-sicurezza .wc-block-cart__empty-cart__title{
text-align:center !important;
padding:48px 24px !important;
}
/* ===== TRADUZIONI WC Cart Block (fallback se .mo italiani non caricati) ===== */
/* Le label inglesi sono dentro figli del TH/button. Nascondo lo span
e mostro testo italiano via ::before sul parent. */
body.prof-sicurezza .wc-block-cart-items__header-product > span,
body.prof-sicurezza .wc-block-cart-items__header-total > span{
display:none !important;
}
body.prof-sicurezza .wc-block-cart-items__header-product::before{
content:"PRODOTTO" !important;
font-size:11px !important;
font-family:'IBM Plex Mono', monospace !important;
letter-spacing:0.08em !important;
text-transform:uppercase !important;
}
body.prof-sicurezza .wc-block-cart-items__header-total::before{
content:"TOTALE" !important;
font-size:11px !important;
font-family:'IBM Plex Mono', monospace !important;
letter-spacing:0.08em !important;
text-transform:uppercase !important;
}
/* Bottone checkout: "Proceed to Checkout" → "Procedi al checkout" */
body.prof-sicurezza .wc-block-cart__submit-button,
body.prof-sicurezza .wc-block-components-checkout-button,
body.prof-sicurezza .wp-block-woocommerce-proceed-to-checkout-block a{
position:relative !important;
font-size:0 !important;
}
body.prof-sicurezza .wc-block-cart__submit-button::after,
body.prof-sicurezza .wc-block-components-checkout-button::after,
body.prof-sicurezza .wp-block-woocommerce-proceed-to-checkout-block a::after{
content:"Procedi al checkout →" !important;
font-size:15px !important;
font-weight:700 !important;
color:#fff !important;
}
/* "Cart totals" → "Riepilogo ordine" */
body.prof-sicurezza .wc-block-cart__totals-title,
body.prof-sicurezza h2.wc-block-cart__totals-title,
body.prof-sicurezza .wp-block-woocommerce-cart-order-summary-heading-block{
font-size:0 !important;
margin:0 0 12px !important;
}
body.prof-sicurezza .wc-block-cart__totals-title::before,
body.prof-sicurezza h2.wc-block-cart__totals-title::before,
body.prof-sicurezza .wp-block-woocommerce-cart-order-summary-heading-block::before{
content:"Riepilogo ordine" !important;
font-size:16px !important;
font-weight:700 !important;
letter-spacing:-0.01em !important;
color:var(--ink) !important;
font-family:inherit !important;
}
/* "Estimated total" → "Totale" */
body.prof-sicurezza .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
font-size:0 !important;
}
body.prof-sicurezza .wc-block-components-totals-footer-item .wc-block-components-totals-item__label::before{
content:"Totale" !important;
font-size:16px !important;
font-weight:700 !important;
color:var(--ink) !important;
}
/* "Add coupons" / "Coupons" panel toggle → "Hai un codice sconto?" */
body.prof-sicurezza .wc-block-components-panel__button > span,
body.prof-sicurezza button.wc-block-components-panel__button > span{
/* Non rimpiazzare cieco: targetto solo se contiene "coupon" via :has (CSS4) */
}
body.prof-sicurezza .wc-block-components-totals-coupon button.wc-block-components-panel__button{
font-size:0 !important;
}
body.prof-sicurezza .wc-block-components-totals-coupon button.wc-block-components-panel__button::before{
content:"Hai un codice sconto?" !important;
font-size:13px !important;
color:var(--brand) !important;
font-weight:600 !important;
}
/* ============================================================
v34 — Polish finale: card height/button align, brand banner
contain logo, wishlist visual feedback, wishlist page styling
============================================================ */
/* ===== PRODUCT CARD: altezza uniforme + button add-to-cart sempre in fondo ===== */
body.prof-sicurezza .products,
body.prof-sicurezza ul.products,
body.prof-sicurezza .bestseller-grid{
align-items:stretch !important;
}
body.prof-sicurezza article.product{
display:flex !important;
flex-direction:column !important;
height:100% !important;
}
body.prof-sicurezza .product .body{
display:flex !important;
flex-direction:column !important;
flex:1 1 auto !important;
gap:6px !important;
}
/* h3 title min-height per uniformare altezza tra prodotti con titoli diversi */
body.prof-sicurezza .product .body h3{
min-height:38px !important;
display:-webkit-box !important;
-webkit-line-clamp:2 !important;
-webkit-box-orient:vertical !important;
overflow:hidden !important;
margin:0 !important;
}
/* Add to cart button: push to bottom con margin-top:auto */
body.prof-sicurezza article.product a.add,
body.prof-sicurezza article.product a.add_to_cart_button,
body.prof-sicurezza article.product a.button{
margin-top:auto !important;
}
/* Stock indicator: stay above the button (nasconde gap se manca stock) */
body.prof-sicurezza .product .stock{
margin-bottom:0 !important;
}
/* Bestseller mobile slider: card stessa altezza nonostante flex-direction row */
@media (max-width:768px){
body.prof-sicurezza .bestseller-grid > .bs-item{
display:flex !important;
}
body.prof-sicurezza .bestseller-grid > .bs-item > .product{
height:auto !important;
min-height:100% !important;
}
}
/* ===== BRAND BANNERS: logo contenuto + bordi puliti ===== */
body.prof-sicurezza .banner-strip{
display:grid !important;
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
gap:18px !important;
}
@media (max-width:768px){
body.prof-sicurezza .banner-strip{
grid-template-columns:1fr !important;
}
}
body.prof-sicurezza .banner{
position:relative !important;
min-height:200px !important;
padding:32px !important;
border-radius:var(--radius-lg, 12px) !important;
overflow:hidden !important;
display:flex !important;
flex-direction:column !important;
justify-content:space-between !important;
align-items:flex-start !important;
isolation:isolate !important;
}
/* Background image (logo brand) — contained, posizionato a destra */
body.prof-sicurezza .banner .ph,
body.prof-sicurezza .banner .imgbg{
position:absolute !important;
right:24px !important;
top:50% !important;
transform:translateY(-50%) !important;
width:42% !important;
height:70% !important;
background-size:contain !important;
background-repeat:no-repeat !important;
background-position:center right !important;
background-color:transparent !important;
border:none !important;
opacity:0.85 !important;
z-index:0 !important;
}
body.prof-sicurezza .banner .b-content{
position:relative !important;
z-index:1 !important;
max-width:55% !important;
display:flex !important;
flex-direction:column !important;
gap:6px !important;
}
body.prof-sicurezza .banner .tag{
font-family:'IBM Plex Mono', monospace !important;
font-size:11px !important;
letter-spacing:0.1em !important;
text-transform:uppercase !important;
color:var(--brand) !important;
font-weight:600 !important;
}
body.prof-sicurezza .banner .banner-h3{
font-size:26px !important;
font-weight:700 !important;
color:var(--ink) !important;
letter-spacing:-0.01em !important;
line-height:1.1 !important;
}
body.prof-sicurezza .banner .banner-desc{
font-size:13.5px !important;
color:var(--ink-2) !important;
line-height:1.5 !important;
max-width:280px !important;
}
body.prof-sicurezza .banner > .btn{
position:relative !important;
z-index:1 !important;
align-self:flex-start !important;
margin-top:auto !important;
}
/* ===== WISHLIST HEART: visual feedback added vs not + fix svg cut ===== */
/* Lo svg dell'icona è "stroke" outline. Se è "filled" significa added. */
body.prof-sicurezza .product .yith-add-to-wishlist-button-block svg{
width:18px !important;
height:18px !important;
display:block !important;
fill:none !important;
stroke:currentColor !important;
stroke-width:1.5 !important;
overflow:visible !important;
}
/* Stato "exists in wishlist" — YITH cambia parent class quando added */
body.prof-sicurezza .product .yith-add-to-wishlist-button-block--exists a,
body.prof-sicurezza .product .yith-add-to-wishlist-button-block.yith-add-to-wishlist-button-block--in a,
body.prof-sicurezza .product .yith-wcwl-add-to-wishlist-button--added{
color:var(--danger, oklch(0.62 0.22 25)) !important;
border-color:var(--danger, oklch(0.62 0.22 25)) !important;
background:oklch(0.97 0.04 25) !important;
}
body.prof-sicurezza .product .yith-add-to-wishlist-button-block--exists svg,
body.prof-sicurezza .product .yith-add-to-wishlist-button-block.yith-add-to-wishlist-button-block--in svg,
body.prof-sicurezza .product .yith-wcwl-add-to-wishlist-button--added svg{
fill:currentColor !important;
}
/* Hover state — sempre rossiccio */
body.prof-sicurezza .product .yith-add-to-wishlist-button-block a:hover{
color:var(--danger) !important;
border-color:var(--danger) !important;
}
/* ===== PAGINA WISHLIST: layout pulito e coerente al sito ===== */
body.prof-sicurezza .yith-wcwl-shortcode-wrapper,
body.prof-sicurezza .wishlist-fragment,
body.prof-sicurezza .yith-wcwl-form,
body.prof-sicurezza .woocommerce-wishlist .post-content,
body.prof-sicurezza .woocommerce-wishlist .entry-content{
max-width:1320px !important;
margin:32px auto 64px !important;
padding:0 16px !important;
}
@media (max-width:768px){
body.prof-sicurezza .yith-wcwl-shortcode-wrapper,
body.prof-sicurezza .wishlist-fragment,
body.prof-sicurezza .yith-wcwl-form{
padding:0 12px !important;
}
}
/* Title "My wishlist" */
body.prof-sicurezza .wishlist-title,
body.prof-sicurezza .wishlist-title-container{
margin-bottom:24px !important;
}
body.prof-sicurezza .wishlist-title h2{
font-size:32px !important;
font-weight:700 !important;
letter-spacing:-0.01em !important;
color:var(--ink) !important;
margin:0 !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
}
body.prof-sicurezza .wishlist-title .heart-outline,
body.prof-sicurezza .wishlist-title i.fa{
display:none !important;
}
/* Wishlist table — FORZA layout tabella su desktop.
YITH applica la classe "responsive" che imposta tutte le righe a display:block
per il mobile. Su desktop ripristiniamo il display table corretto. */
@media (min-width: 769px) {
body.prof-sicurezza table.wishlist_table.responsive,
body.prof-sicurezza table.wishlist_table{
display:table !important;
width:100% !important;
}
body.prof-sicurezza table.wishlist_table thead{
display:table-header-group !important;
}
body.prof-sicurezza table.wishlist_table tbody{
display:table-row-group !important;
}
body.prof-sicurezza table.wishlist_table tr,
body.prof-sicurezza table.wishlist_table tbody tr,
body.prof-sicurezza table.wishlist_table thead tr{
display:table-row !important;
width:auto !important;
border:none !important;
}
body.prof-sicurezza table.wishlist_table th,
body.prof-sicurezza table.wishlist_table td{
display:table-cell !important;
width:auto !important;
float:none !important;
clear:none !important;
}
/* YITH usa span con classe "nobr" che a volte ha display:none su desktop */
body.prof-sicurezza table.wishlist_table th .nobr,
body.prof-sicurezza table.wishlist_table td .nobr{
display:inline !important;
}
/* "Item label" prepend di YITH che fa "Nome prodotto:" come prefisso mobile */
body.prof-sicurezza table.wishlist_table td::before,
body.prof-sicurezza table.wishlist_table th::before{
display:none !important;
content:none !important;
}
}
body.prof-sicurezza table.wishlist_table,
body.prof-sicurezza .wishlist_table{
width:100% !important;
border:1px solid var(--line) !important;
border-collapse:separate !important;
border-spacing:0 !important;
border-radius:var(--radius-lg, 12px) !important;
overflow:hidden !important;
background:#fff !important;
}
body.prof-sicurezza table.wishlist_table thead{
background:var(--bg-2) !important;
}
body.prof-sicurezza table.wishlist_table thead th{
padding:16px !important;
font-family:'IBM Plex Mono', monospace !important;
font-size:11px !important;
letter-spacing:0.08em !important;
text-transform:uppercase !important;
color:var(--ink-2) !important;
font-weight:600 !important;
text-align:left !important;
border-bottom:1px solid var(--line) !important;
}
body.prof-sicurezza table.wishlist_table tbody tr{
border-bottom:1px solid var(--line) !important;
}
body.prof-sicurezza table.wishlist_table tbody tr:last-child{
border-bottom:none !important;
}
body.prof-sicurezza table.wishlist_table td{
padding:16px !important;
vertical-align:middle !important;
border:none !important;
border-bottom:1px solid var(--line) !important;
background:#fff !important;
}
body.prof-sicurezza table.wishlist_table tbody tr:last-child td{
border-bottom:none !important;
}
body.prof-sicurezza table.wishlist_table .product-thumbnail img{
width:60px !important;
height:60px !important;
object-fit:contain !important;
border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
background:#fff !important;
padding:4px !important;
}
body.prof-sicurezza table.wishlist_table .product-name a{
color:var(--ink) !important;
font-weight:600 !important;
text-decoration:none !important;
font-size:14.5px !important;
}
body.prof-sicurezza table.wishlist_table .product-name a:hover{
color:var(--brand) !important;
}
body.prof-sicurezza table.wishlist_table .product-price{
font-weight:600 !important;
}
body.prof-sicurezza table.wishlist_table .product-stock-status .stock,
body.prof-sicurezza table.wishlist_table .product-stock-status .wishlist-in-stock,
body.prof-sicurezza table.wishlist_table .wishlist-in-stock{
color:var(--ok, oklch(0.55 0.18 145)) !important;
font-weight:600 !important;
font-size:13px !important;
}
body.prof-sicurezza table.wishlist_table .product-stock-status .out-of-stock,
body.prof-sicurezza table.wishlist_table .wishlist-out-of-stock{
color:var(--danger) !important;
font-weight:600 !important;
font-size:13px !important;
}
/* Add to cart button nella riga wishlist */
body.prof-sicurezza table.wishlist_table .product-add-to-cart a,
body.prof-sicurezza table.wishlist_table .product-add-to-cart button{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
padding:8px 14px !important;
background:var(--action) !important;
color:#fff !important;
border:1px solid var(--action) !important;
border-radius:var(--radius) !important;
font-weight:600 !important;
font-size:13px !important;
text-decoration:none !important;
}
body.prof-sicurezza table.wishlist_table .product-add-to-cart a:hover{
background:var(--action-ink) !important;
}
/* Remove (×) button */
body.prof-sicurezza table.wishlist_table .product-remove a,
body.prof-sicurezza table.wishlist_table .product-remove .remove{
width:30px !important;
height:30px !important;
border-radius:50% !important;
background:var(--bg-2) !important;
color:var(--ink) !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
font-size:16px !important;
font-weight:400 !important;
text-decoration:none !important;
line-height:1 !important;
border:none !important;
}
body.prof-sicurezza table.wishlist_table .product-remove a:hover{
background:var(--danger) !important;
color:#fff !important;
}
/* Share buttons */
body.prof-sicurezza .wishlist-share,
body.prof-sicurezza .yith-wcwl-share{
margin-top:32px !important;
padding-top:24px !important;
border-top:1px solid var(--line) !important;
}
body.prof-sicurezza .wishlist-share h4,
body.prof-sicurezza .yith-wcwl-share-title{
font-size:11px !important;
font-family:'IBM Plex Mono', monospace !important;
letter-spacing:0.08em !important;
text-transform:uppercase !important;
color:var(--ink-3) !important;
font-weight:600 !important;
margin:0 0 12px !important;
}
body.prof-sicurezza .wishlist-share ul,
body.prof-sicurezza .yith-wcwl-share ul,
body.prof-sicurezza .yith-wcwl-share-list{
display:flex !important;
gap:8px !important;
list-style:none !important;
padding:0 !important;
margin:0 !important;
}
body.prof-sicurezza .wishlist-share li{
margin:0 !important;
}
body.prof-sicurezza .wishlist-share a,
body.prof-sicurezza .yith-wcwl-share a{
width:36px !important;
height:36px !important;
border-radius:50% !important;
background:var(--bg-2) !important;
color:var(--ink) !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
text-decoration:none !important;
}
body.prof-sicurezza .wishlist-share a:hover{
background:var(--action) !important;
color:#fff !important;
}
/* Empty state */
body.prof-sicurezza .wishlist-empty,
body.prof-sicurezza .yith-wcwl-no-elements{
text-align:center !important;
padding:64px 24px !important;
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:var(--radius-lg, 12px) !important;
font-size:15px !important;
color:var(--ink-2) !important;
}
/* ===== CART PAGE: rifinitura finale ===== */
body.prof-sicurezza .wc-block-cart-item__image img{
max-width:80px !important;
object-fit:contain !important;
background:var(--bg-2) !important;
}
/* Cart row: badge sconto (es. "Risparmi 38,16 €") */
body.prof-sicurezza .wc-block-components-sale-badge{
background:oklch(0.95 0.06 25) !important;
color:oklch(0.40 0.18 25) !important;
border:1px solid oklch(0.80 0.10 25) !important;
font-size:11px !important;
font-weight:600 !important;
padding:3px 8px !important;
border-radius:99px !important;
display:inline-block !important;
margin-top:4px !important;
}
/* Cart prices: regular e sale */
body.prof-sicurezza .wc-block-components-formatted-money-amount{
font-weight:600 !important;
}
body.prof-sicurezza .wc-block-components-product-price__regular{
color:var(--ink-3) !important;
font-size:12px !important;
text-decoration:line-through !important;
}
body.prof-sicurezza .wc-block-components-product-price__value{
color:var(--ink) !important;
}
/* Notice carrello vuoto / azioni rapide */
body.prof-sicurezza .wp-block-woocommerce-empty-cart-block .wc-block-page-content{
text-align:center !important;
padding:64px 24px !important;
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:var(--radius-lg, 12px) !important;
}
/* ============================================================
v35 — YITH WISHLIST PAGE: layout mobile-stack → card grid
YITH renderizza ogni item come blocchi separati. Sistemo come
griglia di "cards" orizzontali con image | content | actions.
============================================================ */
/* Wrapper exterior */
body.prof-sicurezza.woocommerce-wishlist .yith-wcwl-form,
body.prof-sicurezza.woocommerce-wishlist .wishlist-fragment{
max-width:1200px !important;
margin:32px auto !important;
padding:0 16px !important;
}
/* Title */
body.prof-sicurezza .wishlist-title{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
margin-bottom:28px !important;
padding:0 !important;
}
body.prof-sicurezza .wishlist-title h2,
body.prof-sicurezza .wishlist-title.wishlist-title-with-form h2{
font-size:32px !important;
font-weight:700 !important;
letter-spacing:-0.01em !important;
color:var(--ink) !important;
margin:0 !important;
padding:0 !important;
display:inline-flex !important;
align-items:center !important;
gap:10px !important;
}
body.prof-sicurezza .wishlist-title .heart-outline,
body.prof-sicurezza .wishlist-title i.fa,
body.prof-sicurezza .wishlist-title svg{
display:none !important;
}
/* Edit title button */
body.prof-sicurezza .wishlist-title .show-title-form{
font-size:12px !important;
color:var(--ink-3) !important;
text-decoration:underline !important;
margin-left:auto !important;
cursor:pointer !important;
}
/* "No products" empty state */
body.prof-sicurezza .wishlist-empty{
text-align:center !important;
padding:64px 24px !important;
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:var(--radius-lg, 12px) !important;
font-size:15px !important;
color:var(--ink-2) !important;
margin:24px 0 !important;
}
/* WISHLIST ITEMS (mobile-stacked layout) ───────────────────── */
/* Su mobile (≤768px) trasformiamo la tabella in cards stacked.
Su desktop usiamo la tabella nativa stilata sopra (riga 8070+). */
@media (max-width: 768px) {
body.prof-sicurezza .yith-wcwl-form .wishlist-items-wrapper,
body.prof-sicurezza .yith-wcwl-form > div:not(.wishlist-title-container):not(.wishlist-share){
display:grid !important;
grid-template-columns:1fr !important;
gap:12px !important;
margin:0 !important;
padding:0 !important;
list-style:none !important;
}
/* Ogni "item" — YITH lo wraps in un div o tr */
body.prof-sicurezza .yith-wcwl-form .wishlist-item,
body.prof-sicurezza .yith-wcwl-form .wishlist_item,
body.prof-sicurezza .yith-wcwl-row{
display:grid !important;
grid-template-columns:80px 1fr auto !important;
align-items:center !important;
gap:18px !important;
padding:18px !important;
background:#fff !important;
border:1px solid var(--line) !important;
border-radius:var(--radius-lg, 12px) !important;
margin:0 !important;
}
body.prof-sicurezza .yith-wcwl-form img.wp-post-image,
body.prof-sicurezza .yith-wcwl-form .product-thumbnail img{
width:80px !important;
height:80px !important;
object-fit:contain !important;
background:var(--bg-2) !important;
border-radius:var(--radius) !important;
padding:4px !important;
border:1px solid var(--line) !important;
}
body.prof-sicurezza .yith-wcwl-form .product-name a,
body.prof-sicurezza .yith-wcwl-form a.wishlist-item__name{
color:var(--ink) !important;
font-weight:600 !important;
font-size:15px !important;
text-decoration:none !important;
line-height:1.3 !important;
display:block !important;
margin-bottom:6px !important;
}
body.prof-sicurezza .yith-wcwl-form .product-name a:hover{
color:var(--brand) !important;
}
body.prof-sicurezza table.item-details-table{
border:none !important;
background:transparent !important;
margin:0 !important;
width:auto !important;
display:inline-block !important;
}
body.prof-sicurezza table.item-details-table tr{
display:inline-flex !important;
gap:4px !important;
margin-right:18px !important;
}
body.prof-sicurezza table.item-details-table td{
display:inline !important;
padding:0 !important;
border:none !important;
background:transparent !important;
font-size:13px !important;
vertical-align:middle !important;
}
body.prof-sicurezza table.item-details-table td.label{
color:var(--ink-3) !important;
font-weight:500 !important;
}
body.prof-sicurezza table.item-details-table td.value{
color:var(--ink) !important;
font-weight:600 !important;
}
body.prof-sicurezza table.item-details-table del{
color:var(--ink-3) !important;
font-weight:400 !important;
margin-right:4px !important;
}
body.prof-sicurezza table.item-details-table ins{
background:none !important;
text-decoration:none !important;
color:var(--brand) !important;
}
/* Actions column (Add to cart, Remove) — solo mobile */
body.prof-sicurezza .yith-wcwl-form .product-add-to-cart,
body.prof-sicurezza .yith-wcwl-form .yith-wcwl-item-add-cart{
display:flex !important;
flex-direction:column !important;
align-items:flex-end !important;
gap:6px !important;
}
body.prof-sicurezza .yith-wcwl-form .product-add-to-cart a,
body.prof-sicurezza .yith-wcwl-form a.add_to_cart_button{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
padding:10px 18px !important;
background:var(--action) !important;
color:#fff !important;
border:1px solid var(--action) !important;
border-radius:var(--radius) !important;
font-weight:600 !important;
font-size:13.5px !important;
text-decoration:none !important;
white-space:nowrap !important;
}
body.prof-sicurezza .yith-wcwl-form .product-add-to-cart a:hover{
background:var(--action-ink) !important;
}
body.prof-sicurezza .yith-wcwl-form .product-remove a,
body.prof-sicurezza .yith-wcwl-form .yith-wcwl-remove{
width:30px !important;
height:30px !important;
border-radius:50% !important;
background:var(--bg-2) !important;
color:var(--ink-2) !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
text-decoration:none !important;
font-size:14px !important;
line-height:1 !important;
border:none !important;
}
} /* end @media (max-width: 768px) */
body.prof-sicurezza .yith-wcwl-form .product-remove a:hover{
background:var(--danger) !important;
color:#fff !important;
}
/* Mobile responsive: stack vertically */
@media (max-width:768px){
body.prof-sicurezza .yith-wcwl-form .wishlist-item,
body.prof-sicurezza .yith-wcwl-form .wishlist_item,
body.prof-sicurezza .yith-wcwl-row{
grid-template-columns:60px 1fr !important;
grid-template-rows:auto auto !important;
}
body.prof-sicurezza .yith-wcwl-form .product-add-to-cart,
body.prof-sicurezza .yith-wcwl-form .yith-wcwl-item-add-cart{
grid-column:1 / -1 !important;
flex-direction:row !important;
align-items:stretch !important;
width:100% !important;
}
body.prof-sicurezza .yith-wcwl-form .product-add-to-cart a{
flex:1 !important;
}
}
/* Share section */
body.prof-sicurezza .yith-wcwl-form .wishlist-share,
body.prof-sicurezza .wishlist-share{
margin-top:32px !important;
padding-top:24px !important;
border-top:1px solid var(--line) !important;
}
body.prof-sicurezza .wishlist-share-title,
body.prof-sicurezza .yith-wcwl-share-title{
font-size:11px !important;
font-family:'IBM Plex Mono', monospace !important;
letter-spacing:0.08em !important;
text-transform:uppercase !important;
color:var(--ink-3) !important;
font-weight:600 !important;
margin:0 0 12px !important;
}
body.prof-sicurezza .wishlist-share ul{
display:flex !important;
gap:8px !important;
list-style:none !important;
margin:0 !important;
padding:0 !important;
}
body.prof-sicurezza .wishlist-share a{
width:36px !important;
height:36px !important;
border-radius:50% !important;
background:var(--bg-2) !important;
color:var(--ink) !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
text-decoration:none !important;
transition:background .15s ease !important;
}
body.prof-sicurezza .wishlist-share a:hover{
background:var(--action) !important;
color:#fff !important;
}
/* ============================================================
BRAND COERENZA v2 — banner navy/rosso + avatar (no verde/azzurro)
============================================================ */
/* Banner promo: alternano NAVY (b1) e ROSSO (b2), sfondo scuro → testo bianco */
body.prof-sicurezza .banner.b1{
background:linear-gradient(135deg, oklch(0.34 0.09 273.7) 0%, oklch(0.235 0.085 273.7) 100%) !important;
}
body.prof-sicurezza .banner.b2{
background:linear-gradient(135deg, oklch(0.56 0.17 29) 0%, oklch(0.45 0.17 29) 100%) !important;
}
body.prof-sicurezza .banner .tag{ color:oklch(1 0 0 / 0.82) !important; }
body.prof-sicurezza .banner h3,
body.prof-sicurezza .banner .banner-h3{ color:#fff !important; }
body.prof-sicurezza .banner p,
body.prof-sicurezza .banner .banner-desc{ color:oklch(1 0 0 / 0.88) !important; }
body.prof-sicurezza .banner .btn,
body.prof-sicurezza .banner > .btn{
background:#fff !important;
color:var(--navy) !important;
border-color:#fff !important;
}
/* Blocco assistenza: avatar in rosso brand (non più verde) */
body.prof-sicurezza .installer-cta .av{
background:var(--action) !important;
border-color:oklch(0.66 0.15 29) !important;
}
/* ============================================================
PDP HERO v2 — box prezzo, stepper quantità, CTA, preferiti
============================================================ */
/* --- Price box: card pulita, niente accento laterale --- */
body.prof-sicurezza .info .pricebox{
position:relative !important; background:#fff !important;
border:1px solid var(--line) !important; border-radius:var(--radius-lg) !important;
padding:20px 22px !important;
box-shadow:0 4px 14px rgba(27,33,82,.06) !important; overflow:hidden !important;
margin-top:6px !important;
}
body.prof-sicurezza .info .pricebox::before{ content:none !important; display:none !important; }
/* la deal-line "OFFERTA" è ridondante col badge -X%: la nascondiamo */
body.prof-sicurezza .info .pricebox .deal-line{ display:none !important; }
body.prof-sicurezza .info .pricebox .price-main-row{
display:flex !important; align-items:baseline !important; gap:14px !important; flex-wrap:wrap !important;
}
body.prof-sicurezza .info .price-now{
font-size:40px !important; font-weight:800 !important; color:var(--navy) !important;
letter-spacing:-.03em !important; line-height:1 !important;
}
body.prof-sicurezza .info .price-old{ font-size:17px !important; align-self:baseline !important; }
body.prof-sicurezza .info .price-disc{
margin-left:auto !important; align-self:center !important;
background:var(--action) !important; color:#fff !important;
font-family:'IBM Plex Mono',monospace !important; font-weight:800 !important; font-size:14px !important;
padding:6px 11px !important; border-radius:6px !important; white-space:nowrap !important;
}
/* meta row: IVA inclusa + Risparmi pill, allineati */
body.prof-sicurezza .info .pricebox .price-meta{
display:flex !important; align-items:center !important; gap:12px !important; flex-wrap:wrap !important;
margin-top:10px !important;
}
body.prof-sicurezza .info .price-save{
background:var(--danger-soft) !important; color:var(--action) !important;
font-weight:700 !important; font-size:12.5px !important; padding:4px 10px !important; border-radius:999px !important;
margin:0 !important;
}
/* --- Buy row: [stepper + CTA] [cuore] --- */
/* Layout come la standalone: riga quantità → riga [CTA + cuore] → riga "Acquista ora".
Il form WooCommerce racchiude stepper+CTA: con display:contents i suoi figli
entrano nel flex di .pdp-buy-row; uno spacer 100% forza gli a-capo. */
body.prof-sicurezza .pdp-buy-row{
display:flex !important; flex-wrap:wrap !important; gap:12px !important;
align-items:center !important; margin-top:18px !important;
}
body.prof-sicurezza .pdp-buy-row form.cart{ display:contents !important; margin:0 !important; }
/* neutralizza i campi non visivi del form (label screen-reader, hidden) */
body.prof-sicurezza .pdp-buy-row form.cart > label.screen-reader-text,
body.prof-sicurezza .pdp-buy-row form.cart input[type="hidden"]{
position:absolute !important; width:1px !important; height:1px !important;
padding:0 !important; margin:0 !important; overflow:hidden !important; border:0 !important; clip:rect(0 0 0 0) !important;
}
body.prof-sicurezza .pdp-buy-row .stock.in-stock{
flex:1 1 100% !important; order:0 !important; margin:0 !important;
font-size:12.5px !important; font-weight:600 !important; color:var(--ok) !important;
}
body.prof-sicurezza .pdp-buy-row .quantity{ order:1 !important; flex:0 0 auto !important; }
/* spacer: forza la CTA su una nuova riga sotto lo stepper */
body.prof-sicurezza .pdp-buy-row::after{
content:"" !important; order:2 !important; flex:0 0 100% !important; height:0 !important; margin:0 !important;
}
body.prof-sicurezza .pdp-buy-row .single_add_to_cart_button.btn-add{ order:3 !important; flex:1 1 auto !important; }
body.prof-sicurezza .pdp-buy-row .pdp-wishlist{ order:4 !important; flex:0 0 auto !important; }
body.prof-sicurezza .pdp-buy-row .btn-buy-now{
order:5 !important; flex:1 1 100% !important;
height:50px !important; border-radius:var(--radius) !important;
background:#fff !important; color:var(--navy) !important; border:1.5px solid var(--navy) !important;
font-family:inherit !important; font-weight:700 !important; font-size:14.5px !important; cursor:pointer !important;
display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
transition:background .15s, color .15s !important;
}
body.prof-sicurezza .pdp-buy-row .btn-buy-now:hover{ background:var(--navy) !important; color:#fff !important; }
/* Stepper quantità (bottoni del tema bde) */
body.prof-sicurezza .pdp-buy-row .quantity{
display:inline-flex !important; align-items:center !important; flex:none !important;
border:1.5px solid var(--line-2) !important; border-radius:999px !important;
background:#fff !important; height:54px !important; overflow:hidden !important;
}
/* Bottoni quantità del tema resi in modo inaffidabile → li nascondiamo
e usiamo i nostri (.ps-qbtn) iniettati via JS con SVG inline. */
body.prof-sicurezza .pdp-buy-row .quantity .bde-quantity-button{ display:none !important; }
body.prof-sicurezza .pdp-buy-row .quantity .ps-qbtn{
width:46px !important; height:54px !important; flex:none !important; border:none !important;
background:#fff !important; cursor:pointer !important; padding:0 !important;
display:grid !important; place-items:center !important; transition:background-color .15s !important;
}
body.prof-sicurezza .pdp-buy-row .quantity .ps-qbtn:hover:not(:disabled){ background:var(--brand-soft) !important; }
body.prof-sicurezza .pdp-buy-row .quantity .ps-qbtn:disabled{ opacity:.32 !important; cursor:not-allowed !important; }
body.prof-sicurezza .pdp-buy-row .quantity .ps-qbtn svg{ width:17px !important; height:17px !important; display:block !important; }
body.prof-sicurezza .pdp-buy-row .quantity input.qty,
body.prof-sicurezza .pdp-buy-row .quantity input.input-text,
body.prof-sicurezza .pdp-buy-row .quantity input[type="number"],
body.prof-sicurezza .pdp-buy-row .quantity input.qty:focus,
body.prof-sicurezza .pdp-buy-row .quantity input.qty:focus-visible,
body.prof-sicurezza .pdp-buy-row .quantity input.qty:hover,
body.prof-sicurezza .pdp-buy-row .quantity input.qty:active{
width:48px !important; text-align:center !important;
border:0 none transparent !important;
border-top:0 none transparent !important; border-right:0 none transparent !important;
border-bottom:0 none transparent !important; border-left:0 none transparent !important;
border-width:0 !important; border-style:none !important;
outline:0 none !important; outline-offset:0 !important; box-shadow:none !important; border-radius:0 !important;
background:transparent !important; background-color:transparent !important; background-image:none !important;
font:inherit !important; font-size:16px !important; font-weight:700 !important;
color:var(--ink) !important; -moz-appearance:textfield !important; appearance:textfield !important;
padding:0 !important; margin:0 !important; min-width:0 !important;
}
body.prof-sicurezza .pdp-buy-row .quantity input.qty::-webkit-outer-spin-button,
body.prof-sicurezza .pdp-buy-row .quantity input.qty::-webkit-inner-spin-button{ -webkit-appearance:none !important; margin:0 !important; }
/* CTA "Aggiungi al carrello" */
body.prof-sicurezza .pdp-buy-row .single_add_to_cart_button.btn-add{
flex:1 !important; height:54px !important; border-radius:var(--radius) !important;
background:var(--action) !important; color:#fff !important; font-weight:700 !important; font-size:15px !important;
display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important;
border:none !important; cursor:pointer !important; padding:0 22px !important;
box-shadow:0 6px 18px rgba(194,48,38,.28) !important;
transition:transform .12s ease, box-shadow .2s ease, background .15s ease !important;
}
body.prof-sicurezza .pdp-buy-row .single_add_to_cart_button.btn-add::before{
content:"" !important; width:18px !important; height:18px !important; flex:none !important;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='18' cy='21' r='1'/%3E%3Cpath d='M2 3h2.2l2.3 12.4a2 2 0 0 0 2 1.6h8.6a2 2 0 0 0 2-1.6L21 7H5.5'/%3E%3C/svg%3E") center/contain no-repeat !important;
}
body.prof-sicurezza .pdp-buy-row .single_add_to_cart_button.btn-add:hover{
background:var(--action-ink) !important; transform:translateY(-1px) !important;
box-shadow:0 10px 26px rgba(194,48,38,.34) !important;
}
/* Preferiti (YITH) → bottone quadrato con cuore, allineato al CTA */
body.prof-sicurezza .pdp-wishlist{
display:inline-flex !important; align-items:stretch !important;
height:54px !important; margin:0 !important; padding:0 !important;
}
body.prof-sicurezza .pdp-wishlist .yith-add-to-wishlist-button-block,
body.prof-sicurezza .pdp-wishlist .yith-wcwl-add-to-wishlist{
display:inline-flex !important; align-items:stretch !important;
height:54px !important; margin:0 !important; padding:0 !important;
}
body.prof-sicurezza .pdp-wishlist .yith-wcwl-add-to-wishlist-button{
width:54px !important; height:54px !important; box-sizing:border-box !important;
border:1.5px solid var(--line-2) !important;
border-radius:var(--radius) !important; background:#fff !important; color:var(--ink-2) !important;
display:inline-flex !important; align-items:center !important; justify-content:center !important;
font-size:0 !important; line-height:0 !important; cursor:pointer !important; text-decoration:none !important;
padding:0 !important; margin:0 !important;
transition:border-color .15s, color .15s, background .15s, transform .12s !important;
}
body.prof-sicurezza .pdp-wishlist .yith-wcwl-add-to-wishlist-button:hover{
border-color:var(--action) !important; color:var(--action) !important; transform:translateY(-1px) !important;
}
body.prof-sicurezza .pdp-wishlist .yith-wcwl-icon{ width:22px !important; height:22px !important; }
body.prof-sicurezza .pdp-wishlist .yith-wcwl-add-to-wishlist-button--added,
body.prof-sicurezza .pdp-wishlist .yith-wcwl-add-to-wishlist-button.added{
border-color:var(--action) !important; color:var(--action) !important; background:var(--danger-soft) !important;
}
body.prof-sicurezza .pdp-wishlist .yith-wcwl-add-to-wishlist-button--added .yith-wcwl-icon,
body.prof-sicurezza .pdp-wishlist .yith-wcwl-add-to-wishlist-button.added .yith-wcwl-icon{ fill:var(--action) !important; }
/* nascondi label + link "vedi lista" extra dentro il buy row (centra il cuore) */
body.prof-sicurezza .pdp-wishlist .yith-wcwl-wishlistaddedbrowse,
body.prof-sicurezza .pdp-wishlist .yith-wcwl-wishlistexistsbrowse,
body.prof-sicurezza .pdp-wishlist .yith-wcwl-add-to-wishlist-button__label,
body.prof-sicurezza .pdp-wishlist .yith-wcwl-add-to-wishlist-button-label{
display:none !important; width:0 !important; height:0 !important;
margin:0 !important; padding:0 !important;
}
@media (max-width:520px){
body.prof-sicurezza .info .price-now{ font-size:34px !important; }
body.prof-sicurezza .pdp-buy-row form.cart{ flex-wrap:wrap !important; }
body.prof-sicurezza .pdp-buy-row .single_add_to_cart_button.btn-add{ font-size:14px !important; }
}
/* ============================================================
PRODUCT CARD v2 — design dalla standalone (badge che abbracciano,
stelline SVG, hover lift, cuore allineato, stato esaurito)
============================================================ */
body.prof-sicurezza article.product{
position:relative !important; background:#fff !important;
border:1px solid var(--line) !important; border-radius:14px !important;
display:flex !important; flex-direction:column !important; overflow:hidden !important;
transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .2s !important;
margin:0 !important; padding:0 !important;
}
body.prof-sicurezza article.product:hover{
transform:translateY(-4px) !important;
box-shadow:0 20px 50px rgba(27,33,82,.12), 0 8px 16px rgba(27,33,82,.06) !important;
border-color:var(--line-2) !important;
}
body.prof-sicurezza article.product.product--out:hover{ transform:none !important; box-shadow:none !important; }
/* Media (anchor) */
body.prof-sicurezza article.product .product-media{
position:relative !important; display:grid !important; place-items:center !important;
aspect-ratio:1/1 !important;
background:linear-gradient(155deg,#fff 0%,#F5F6FB 60%,#EAECF4 100%) !important;
overflow:hidden !important; text-decoration:none !important;
}
body.prof-sicurezza article.product .product-media .product-img{
width:78% !important; height:78% !important; object-fit:contain !important;
transition:transform .5s cubic-bezier(.2,.7,.2,1) !important;
filter:drop-shadow(0 12px 22px rgba(27,33,82,.08)) !important;
}
body.prof-sicurezza article.product:hover .product-media .product-img{ transform:scale(1.06) !important; }
body.prof-sicurezza article.product .oos-overlay{
position:absolute !important; inset:0 !important; background:rgba(255,255,255,.55) !important;
backdrop-filter:saturate(.6) blur(1px) !important; pointer-events:none !important; z-index:1 !important;
}
/* Badges (top-left, abbracciano il testo) */
body.prof-sicurezza article.product .badges{
position:absolute !important; top:11px !important; left:11px !important;
display:flex !important; flex-direction:column !important; align-items:flex-start !important;
gap:6px !important; max-width:75% !important; z-index:2 !important; margin:0 !important; padding:0 !important;
}
body.prof-sicurezza article.product .badge{
font-family:'IBM Plex Mono', monospace !important; font-size:10.5px !important; font-weight:700 !important;
letter-spacing:.05em !important; padding:4px 9px !important; border-radius:6px !important; line-height:1 !important;
display:inline-flex !important; align-items:center !important; gap:5px !important;
width:auto !important; align-self:flex-start !important; white-space:nowrap !important;
box-shadow:0 1px 2px rgba(27,33,82,.10) !important;
}
body.prof-sicurezza article.product .badge.b-disc{ background:var(--action) !important; color:#fff !important; box-shadow:0 2px 6px rgba(194,48,38,.28) !important; }
body.prof-sicurezza article.product .badge.b-new{ background:var(--navy) !important; color:#fff !important; box-shadow:0 2px 6px rgba(27,33,82,.20) !important; }
/* Anteprima hover */
body.prof-sicurezza article.product .qview{
position:absolute !important; left:12px !important; bottom:12px !important;
display:inline-flex !important; align-items:center !important; gap:6px !important;
background:rgba(255,255,255,.92) !important; backdrop-filter:blur(6px) !important;
border:1px solid var(--line) !important; padding:6px 11px !important; border-radius:999px !important;
font-size:11.5px !important; font-weight:600 !important; color:var(--ink) !important;
opacity:0 !important; transform:translateY(6px) !important;
transition:opacity .2s, transform .2s !important; z-index:2 !important; pointer-events:none !important;
}
body.prof-sicurezza article.product .qview svg{ width:14px !important; height:14px !important; }
body.prof-sicurezza article.product:hover .qview{ opacity:1 !important; transform:translateY(0) !important; }
/* Wishlist (YITH) → cuore in alto a destra, allineato e centrato */
body.prof-sicurezza article.product .wish-wrap{
position:absolute !important; top:10px !important; right:10px !important; z-index:3 !important;
display:flex !important; align-items:center !important;
}
body.prof-sicurezza article.product .wish-wrap .yith-wcwl-add-to-wishlist-button{
width:36px !important; height:36px !important; box-sizing:border-box !important;
border:1px solid var(--line) !important; border-radius:50% !important;
background:#fff !important; color:var(--ink-2) !important;
display:inline-flex !important; align-items:center !important; justify-content:center !important;
font-size:0 !important; line-height:0 !important; cursor:pointer !important; text-decoration:none !important;
padding:0 !important; margin:0 !important;
transition:border-color .15s, color .15s, background .15s, transform .12s !important;
}
body.prof-sicurezza article.product .wish-wrap .yith-wcwl-add-to-wishlist-button:hover{
border-color:var(--action) !important; color:var(--action) !important; transform:translateY(-1px) !important;
}
body.prof-sicurezza article.product .wish-wrap .yith-wcwl-icon{ width:17px !important; height:17px !important; }
body.prof-sicurezza article.product .wish-wrap .yith-wcwl-add-to-wishlist-button--added,
body.prof-sicurezza article.product .wish-wrap .yith-wcwl-add-to-wishlist-button.added{
border-color:var(--action) !important; color:var(--action) !important; background:var(--danger-soft) !important;
}
body.prof-sicurezza article.product .wish-wrap .yith-wcwl-add-to-wishlist-button--added .yith-wcwl-icon,
body.prof-sicurezza article.product .wish-wrap .yith-wcwl-add-to-wishlist-button.added .yith-wcwl-icon{ fill:var(--action) !important; }
body.prof-sicurezza article.product .wish-wrap .yith-wcwl-add-to-wishlist-button__label,
body.prof-sicurezza article.product .wish-wrap .yith-wcwl-add-to-wishlist-button-label{ display:none !important; }
/* Body */
body.prof-sicurezza article.product .body{
padding:14px 16px 16px !important; display:flex !important; flex-direction:column !important;
gap:7px !important; flex:1 !important;
}
/* Brand + autorizzato */
body.prof-sicurezza article.product .body .brand{
font-family:'IBM Plex Mono', monospace !important; font-size:10.5px !important;
letter-spacing:.12em !important; text-transform:uppercase !important; color:var(--navy) !important;
font-weight:600 !important; display:flex !important; align-items:center !important; gap:6px !important;
flex-wrap:wrap !important; margin:0 !important;
}
body.prof-sicurezza article.product .body .brand .auth{
color:var(--ok) !important; font-size:10px !important; font-weight:600 !important;
display:inline-flex !important; align-items:center !important; gap:4px !important; text-transform:none !important; letter-spacing:0 !important;
font-family:'Inter Tight', system-ui, sans-serif !important;
}
body.prof-sicurezza article.product .body .brand .auth .d{
width:5px !important; height:5px !important; border-radius:50% !important; background:var(--ok) !important;
}
/* Title */
body.prof-sicurezza article.product .body .title{
font-size:14.5px !important; font-weight:600 !important; color:var(--ink) !important;
line-height:1.32 !important; letter-spacing:-.005em !important; margin:0 !important;
display:-webkit-box !important; -webkit-line-clamp:2 !important; line-clamp:2 !important;
-webkit-box-orient:vertical !important; overflow:hidden !important;
text-overflow:ellipsis !important; min-height:38px !important; text-wrap:balance !important;
}
body.prof-sicurezza article.product .body .title a{ color:inherit !important; text-decoration:none !important; }
body.prof-sicurezza article.product .body .title a:hover{ color:var(--navy) !important; }
/* Rating */
body.prof-sicurezza article.product .body .rating{
display:flex !important; align-items:center !important; gap:6px !important;
font-size:12px !important; color:var(--ink-3) !important;
}
body.prof-sicurezza article.product .body .rating .stars{
display:inline-flex !important; gap:1.5px !important; color:#E8A317 !important; line-height:0 !important;
}
body.prof-sicurezza article.product .body .rating .stars svg{ width:13px !important; height:13px !important; display:block !important; }
body.prof-sicurezza article.product .body .rating .stars .half{ position:relative !important; display:inline-block !important; width:13px !important; height:13px !important; }
body.prof-sicurezza article.product .body .rating .stars .half svg{ position:absolute !important; inset:0 !important; }
body.prof-sicurezza article.product .body .rating b{ color:var(--ink-2) !important; font-weight:600 !important; font-variant-numeric:tabular-nums !important; }
/* Stock chip */
body.prof-sicurezza article.product .body .stock{
display:inline-flex !important; align-items:center !important; gap:6px !important;
font-size:11.5px !important; font-weight:600 !important; align-self:flex-start !important;
padding:3px 9px !important; border-radius:999px !important; margin:0 !important;
}
body.prof-sicurezza article.product .body .stock .d{
width:6px !important; height:6px !important; border-radius:50% !important; flex:none !important;
}
body.prof-sicurezza article.product .body .stock.stock--ok{ color:var(--ok) !important; background:var(--ok-soft) !important; }
body.prof-sicurezza article.product .body .stock.stock--ok .d{ background:var(--ok) !important; box-shadow:0 0 0 3px rgba(30,142,84,.18) !important; }
body.prof-sicurezza article.product .body .stock.stock--low{ color:#C77A11 !important; background:#FDF1DD !important; }
body.prof-sicurezza article.product .body .stock.stock--low .d{ background:#C77A11 !important; box-shadow:0 0 0 3px rgba(199,122,17,.20) !important; }
body.prof-sicurezza article.product .body .stock.stock--out{ color:var(--ink-3) !important; background:var(--bg-2) !important; }
body.prof-sicurezza article.product .body .stock.stock--out .d{ background:var(--ink-3) !important; box-shadow:none !important; }
/* Price (WC outputs ins/del/woocommerce-Price-amount) */
body.prof-sicurezza article.product .body .price-row{
display:flex !important; align-items:baseline !important; gap:8px !important;
margin-top:auto !important; padding-top:4px !important; flex-wrap:wrap !important;
}
body.prof-sicurezza article.product .body .price-row .woocommerce-Price-amount,
body.prof-sicurezza article.product .body .price-row .amount{
font-size:22px !important; font-weight:800 !important; color:var(--navy) !important;
letter-spacing:-.025em !important; line-height:1 !important;
}
body.prof-sicurezza article.product .body .price-row del,
body.prof-sicurezza article.product .body .price-row del .woocommerce-Price-amount{
font-size:13px !important; color:var(--ink-2) !important; text-decoration:line-through !important; font-weight:500 !important;
}
body.prof-sicurezza article.product .body .price-row ins{
text-decoration:none !important; background:none !important;
}
body.prof-sicurezza article.product .body .iva{
font-size:11.5px !important; color:var(--ink-2) !important; font-weight:500 !important; margin:-2px 0 0 !important;
}
/* CTA "Aggiungi al carrello" (WC button) */
body.prof-sicurezza article.product .body .add,
body.prof-sicurezza article.product .body .add_to_cart_button,
body.prof-sicurezza article.product .body a.button.product_type_simple,
body.prof-sicurezza article.product .body a.button.product_type_variable,
body.prof-sicurezza article.product .body a.button.product_type_grouped{
display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
background:var(--action) !important; color:#fff !important;
font-family:inherit !important; font-weight:700 !important; font-size:13.5px !important;
border:none !important; border-radius:8px !important; padding:12px 14px !important;
cursor:pointer !important; margin-top:12px !important; text-decoration:none !important; text-align:center !important;
box-shadow:0 4px 12px rgba(194,48,38,.22) !important;
transition:background .15s, box-shadow .2s, transform .12s !important;
width:100% !important;
}
body.prof-sicurezza article.product .body .add::before,
body.prof-sicurezza article.product .body .add_to_cart_button::before{
content:"" !important; width:16px !important; height:16px !important; flex:none !important;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1.5'/%3E%3Ccircle cx='18' cy='21' r='1.5'/%3E%3Cpath d='M2 3h2.2l2.3 12.4a2 2 0 0 0 2 1.6h8.6a2 2 0 0 0 2-1.6L21 7H5.5'/%3E%3C/svg%3E") center/contain no-repeat !important;
}
body.prof-sicurezza article.product .body .add:hover,
body.prof-sicurezza article.product .body .add_to_cart_button:hover{
background:var(--action-ink) !important; transform:translateY(-1px) !important;
box-shadow:0 8px 20px rgba(194,48,38,.32) !important;
}
/* Esaurito → outline neutra "Leggi di più" / fallback */
body.prof-sicurezza article.product.product--out .body .add,
body.prof-sicurezza article.product.product--out .body .add_to_cart_button,
body.prof-sicurezza article.product.product--out .body a.button{
background:#fff !important; color:var(--ink-2) !important;
border:1.5px solid var(--line-2) !important; box-shadow:none !important;
}
body.prof-sicurezza article.product.product--out .body .add::before,
body.prof-sicurezza article.product.product--out .body .add_to_cart_button::before{ display:none !important; }
body.prof-sicurezza article.product.product--out .body .add:hover{
background:var(--bg-2) !important; color:var(--ink) !important; transform:none !important; box-shadow:none !important;
}
/* Accessibilità: focus visibile */
body.prof-sicurezza article.product .product-media:focus-visible,
body.prof-sicurezza article.product .title a:focus-visible{
outline:2px solid var(--navy) !important; outline-offset:3px !important;
}
body.prof-sicurezza article.product .wish-wrap .yith-wcwl-add-to-wishlist-button:focus-visible{
outline:2px solid var(--navy) !important; outline-offset:3px !important;
}
body.prof-sicurezza article.product .body .add:focus-visible{
outline:none !important; box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--navy), 0 4px 12px rgba(194,48,38,.22) !important;
}
/* ============================================================
CATEGORY TILE v2 — usato da .cats-feat (.ctile.hero) e .cats-grid (.ctile)
Stesso pattern della standalone: gradiente per categoria, icona SVG come
pattern di sfondo, eyebrow chip, freccia che ruota su hover.
============================================================ */
body.prof-sicurezza .cats-feat .ctile,
body.prof-sicurezza .cats-grid .ctile{
position:relative !important; display:flex !important; flex-direction:column !important;
justify-content:flex-end !important;
border-radius:20px !important; overflow:hidden !important; text-decoration:none !important; color:#fff !important;
background:var(--cat-bg, linear-gradient(135deg,#0F1438,#1B2152)) !important;
isolation:isolate !important;
transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s !important;
margin:0 !important; padding:0 !important;
}
body.prof-sicurezza .cats-feat .ctile:hover,
body.prof-sicurezza .cats-grid .ctile:hover{
transform:translateY(-4px) !important;
box-shadow:0 20px 50px rgba(27,33,82,.18) !important;
}
body.prof-sicurezza .cats-feat .ctile:focus-visible,
body.prof-sicurezza .cats-grid .ctile:focus-visible{
outline:3px solid var(--navy) !important; outline-offset:3px !important;
}
/* aspect ratios */
body.prof-sicurezza .cats-feat .ctile.hero{ aspect-ratio:16/10 !important; min-height:240px !important; }
body.prof-sicurezza .cats-grid .ctile{ aspect-ratio:1/1 !important; }
/* layered art (decorative icon SVG) */
body.prof-sicurezza .ctile .ctile-art{
position:absolute !important; inset:0 !important;
display:grid !important; place-items:center !important; z-index:0 !important; pointer-events:none !important;
}
body.prof-sicurezza .ctile .ctile-art svg{
width:62% !important; height:62% !important;
color:var(--cat-icon-color, rgba(255,255,255,.10)) !important;
transition:transform .6s cubic-bezier(.2,.7,.2,1) !important;
}
body.prof-sicurezza .ctile:hover .ctile-art svg{ transform:scale(1.08) rotate(-2deg) !important; }
/* dark overlay at bottom for text readability */
body.prof-sicurezza .ctile::after{
content:"" !important; position:absolute !important; inset:0 !important; z-index:1 !important; pointer-events:none !important;
background:linear-gradient(180deg, transparent 35%, rgba(0,0,0,.55) 100%) !important;
}
/* glossy highlight */
body.prof-sicurezza .ctile::before{
content:"" !important; position:absolute !important; inset:0 !important; z-index:0 !important; pointer-events:none !important;
background:radial-gradient(120% 80% at 80% 0%, rgba(255,255,255,.08), transparent 60%) !important;
}
/* eyebrow chip (solo nelle hero) */
body.prof-sicurezza .ctile .eye{
position:absolute !important; top:14px !important; left:14px !important; z-index:3 !important;
display:inline-flex !important; align-items:center !important; gap:7px !important;
background:rgba(255,255,255,.14) !important; backdrop-filter:blur(8px) !important;
border:1px solid rgba(255,255,255,.20) !important;
padding:5px 11px !important; border-radius:999px !important;
font-family:'IBM Plex Mono', monospace !important; font-size:10.5px !important; font-weight:600 !important;
letter-spacing:.08em !important; color:#fff !important;
}
body.prof-sicurezza .ctile .eye .d{ width:6px !important; height:6px !important; border-radius:50% !important; background:#fff !important; box-shadow:0 0 0 3px rgba(255,255,255,.25) !important; }
body.prof-sicurezza .ctile .eye.hot .d{ background:#FFB86A !important; box-shadow:0 0 0 3px rgba(255,184,106,.30) !important; }
body.prof-sicurezza .ctile .eye.pro .d{ background:#88E0FF !important; box-shadow:0 0 0 3px rgba(136,224,255,.30) !important; }
/* arrow circle */
body.prof-sicurezza .ctile .arrow{
position:absolute !important; top:14px !important; right:14px !important; z-index:3 !important;
width:38px !important; height:38px !important; border-radius:50% !important;
background:#fff !important; color:var(--navy) !important;
display:grid !important; place-items:center !important;
transition:transform .25s, background .15s !important;
}
body.prof-sicurezza .ctile .arrow svg{ width:16px !important; height:16px !important; }
body.prof-sicurezza .ctile:hover .arrow{ transform:rotate(-45deg) !important; }
/* info text */
body.prof-sicurezza .ctile .info{ position:relative !important; z-index:3 !important; padding:20px 22px 22px !important; }
body.prof-sicurezza .ctile .info h3{
font-size:24px !important; font-weight:700 !important; letter-spacing:-.02em !important; line-height:1.1 !important;
text-wrap:balance !important; color:#fff !important; margin:0 0 8px !important;
}
body.prof-sicurezza .ctile .info .meta{
display:flex !important; align-items:center !important; gap:8px !important; flex-wrap:wrap !important;
font-family:'IBM Plex Mono', monospace !important; font-size:11.5px !important; font-weight:500 !important;
color:rgba(255,255,255,.78) !important; letter-spacing:.02em !important;
}
body.prof-sicurezza .ctile .info .meta .sep{ opacity:.5 !important; }
body.prof-sicurezza .ctile .info .meta b{ color:#fff !important; font-weight:600 !important; }
/* hero variant: a bit bigger title */
body.prof-sicurezza .cats-feat .ctile.hero .info h3{ font-size:26px !important; }
body.prof-sicurezza .cats-feat .ctile.hero .info{ padding:24px 26px 24px !important; }
/* compact variant: a bit smaller */
body.prof-sicurezza .cats-grid .ctile .info h3{ font-size:18px !important; }
body.prof-sicurezza .cats-grid .ctile .info{ padding:16px 18px 18px !important; }
body.prof-sicurezza .cats-grid .ctile .arrow{ width:32px !important; height:32px !important; top:11px !important; right:11px !important; }
body.prof-sicurezza .cats-grid .ctile .arrow svg{ width:14px !important; height:14px !important; }
/* themed gradients per category (icone già hanno colore via --cat-icon-color) */
body.prof-sicurezza .cat-video { --cat-bg:linear-gradient(135deg,#0E1230 0%,#1B2152 60%,#2E3676 100%); --cat-icon-color:rgba(160,180,255,.16); }
body.prof-sicurezza .cat-antincendio { --cat-bg:linear-gradient(135deg,#3A0F0C 0%,#6B1A14 55%,#9A2620 100%); --cat-icon-color:rgba(255,180,150,.18); }
body.prof-sicurezza .cat-accessi { --cat-bg:linear-gradient(135deg,#0C2A33 0%,#143F4D 55%,#1F5F74 100%); --cat-icon-color:rgba(140,220,240,.18); }
body.prof-sicurezza .cat-antintrus { --cat-bg:linear-gradient(135deg,#101638 0%,#1B2152 100%); --cat-icon-color:rgba(160,180,255,.14); }
body.prof-sicurezza .cat-nebbio { --cat-bg:linear-gradient(135deg,#1E1F2A 0%,#383A4D 100%); --cat-icon-color:rgba(220,220,235,.12); }
body.prof-sicurezza .cat-auto { --cat-bg:linear-gradient(135deg,#1A1F2E 0%,#2B3346 100%); --cat-icon-color:rgba(150,180,210,.15); }
body.prof-sicurezza .cat-domotica { --cat-bg:linear-gradient(135deg,#15203E 0%,#252F58 100%); --cat-icon-color:rgba(180,200,240,.14); }
body.prof-sicurezza .cat-videofonia { --cat-bg:linear-gradient(135deg,#2D0F0E 0%,#5C1A18 100%); --cat-icon-color:rgba(255,200,180,.14); }
body.prof-sicurezza .cat-cavi { --cat-bg:linear-gradient(135deg,#2A1F12 0%,#4A3520 100%); --cat-icon-color:rgba(255,210,150,.14); }
body.prof-sicurezza .cat-cablaggio { --cat-bg:linear-gradient(135deg,#0E2A2A 0%,#1A4444 100%); --cat-icon-color:rgba(160,230,220,.14); }
body.prof-sicurezza .cat-audio { --cat-bg:linear-gradient(135deg,#1B1130 0%,#321C58 100%); --cat-icon-color:rgba(200,170,250,.14); }
/* mobile */
@media (max-width:1024px){
body.prof-sicurezza .cats-feat{ grid-template-columns:repeat(2,1fr) !important; }
body.prof-sicurezza .cats-feat .ctile.hero:last-child{ grid-column:1/-1 !important; aspect-ratio:21/9 !important; min-height:auto !important; }
body.prof-sicurezza .cats-grid{ grid-template-columns:repeat(3,1fr) !important; }
}
@media (max-width:640px){
body.prof-sicurezza .cats-feat{ grid-template-columns:1fr !important; }
body.prof-sicurezza .cats-feat .ctile.hero{ aspect-ratio:16/10 !important; min-height:auto !important; }
body.prof-sicurezza .cats-feat .ctile.hero:last-child{ aspect-ratio:16/10 !important; }
body.prof-sicurezza .cats-grid{ grid-template-columns:repeat(2,1fr) !important; }
body.prof-sicurezza .ctile .info h3{ font-size:20px !important; }
}
/* ============================================================
CATS COMPACT — versione HOME: tutte in una griglia 6-col,
aspect 5:3, card più basse e dense. Card style identico (gradiente
+ icona + arrow), solo proporzioni e padding ridotti.
============================================================ */
body.prof-sicurezza .cats-grid.cats-compact{
grid-template-columns:repeat(6,1fr) !important;
gap:14px !important;
}
body.prof-sicurezza .cats-grid.cats-compact .ctile{
aspect-ratio:5/3 !important;
border-radius:14px !important;
}
body.prof-sicurezza .cats-grid.cats-compact .ctile .info{
padding:12px 14px 14px !important;
}
body.prof-sicurezza .cats-grid.cats-compact .ctile .info h3{
font-size:15px !important; margin:0 0 4px !important; letter-spacing:-.01em !important; line-height:1.15 !important;
}
body.prof-sicurezza .cats-grid.cats-compact .ctile .info .meta{
font-size:10.5px !important;
}
body.prof-sicurezza .cats-grid.cats-compact .ctile .arrow{
width:28px !important; height:28px !important; top:9px !important; right:9px !important;
}
body.prof-sicurezza .cats-grid.cats-compact .ctile .arrow svg{
width:12px !important; height:12px !important;
}
body.prof-sicurezza .cats-grid.cats-compact .ctile .ctile-art svg{
width:46% !important; height:46% !important; /* icona più discreta nelle card piccole */
}
/* responsive compact: 4 → 3 → 2 colonne */
@media (max-width:1100px){
body.prof-sicurezza .cats-grid.cats-compact{ grid-template-columns:repeat(4,1fr) !important; }
}
@media (max-width:760px){
body.prof-sicurezza .cats-grid.cats-compact{ grid-template-columns:repeat(3,1fr) !important; }
body.prof-sicurezza .cats-grid.cats-compact .ctile{ aspect-ratio:1/1 !important; }
}
@media (max-width:480px){
body.prof-sicurezza .cats-grid.cats-compact{ grid-template-columns:repeat(2,1fr) !important; }
}
/* ============================================================
CATS HOME — griglia piccola sotto l'hero in home: 4 colonne × 2 righe
piene (8 cards esatte), card più basse (4:3) del default 1:1.
Bilanciato, niente spazi vuoti.
============================================================ */
body.prof-sicurezza .cats-grid.cats-home{
grid-template-columns:repeat(4,1fr) !important;
gap:18px !important;
}
body.prof-sicurezza .cats-grid.cats-home .ctile{
aspect-ratio:16/10 !important; /* stesso aspect dell'hero ma su 4 col = card piu' piccole */
border-radius:16px !important;
}
body.prof-sicurezza .cats-grid.cats-home .ctile .info{
padding:14px 18px 16px !important;
}
body.prof-sicurezza .cats-grid.cats-home .ctile .info h3{
font-size:17px !important; margin:0 0 5px !important; letter-spacing:-.01em !important; line-height:1.15 !important;
}
body.prof-sicurezza .cats-grid.cats-home .ctile .info .meta{
font-size:11px !important;
}
body.prof-sicurezza .cats-grid.cats-home .ctile .arrow{
width:32px !important; height:32px !important; top:11px !important; right:11px !important;
}
body.prof-sicurezza .cats-grid.cats-home .ctile .arrow svg{
width:13px !important; height:13px !important;
}
body.prof-sicurezza .cats-grid.cats-home .ctile .ctile-art svg{
width:52% !important; height:52% !important;
}
/* responsive: 4 → 2 colonne (4:3 stretto sta bene anche a 2 col, evita 3 che lascerebbe slot vuoti con 8 card) */
@media (max-width:900px){
body.prof-sicurezza .cats-grid.cats-home{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:480px){
body.prof-sicurezza .cats-grid.cats-home{ grid-template-columns:1fr !important; }
body.prof-sicurezza .cats-grid.cats-home .ctile{ aspect-ratio:16/9 !important; }
}
/* ============================================================
CHECKOUT — confina dentro il container del sito (max 1320px)
Pattern identico al carrello: 2:1 grid (form a sx, riepilogo a dx),
width 100% fino al max-width, margin auto per centrare.
============================================================ */
body.prof-sicurezza .wp-block-woocommerce-checkout,
body.prof-sicurezza .wc-block-checkout{
max-width:var(--container-max, 1320px) !important;
margin-left:auto !important;
margin-right:auto !important;
padding-left:var(--container-pad, 32px) !important;
padding-right:var(--container-pad, 32px) !important;
box-sizing:border-box !important;
width:100% !important;
}
body.prof-sicurezza .wc-block-components-sidebar-layout.wc-block-checkout{
display:grid !important;
grid-template-columns:minmax(0, 2fr) minmax(0, 1fr) !important;
gap:32px !important;
align-items:start !important;
width:100% !important;
max-width:100% !important;
}
@media (max-width:1024px){
body.prof-sicurezza .wc-block-components-sidebar-layout.wc-block-checkout{
grid-template-columns:1fr !important;
}
}
/* I due figli (form + sidebar) riempiono le rispettive celle di grid */
body.prof-sicurezza .wc-block-components-sidebar-layout.wc-block-checkout > .wc-block-checkout__main,
body.prof-sicurezza .wc-block-components-sidebar-layout.wc-block-checkout > .wc-block-components-main,
body.prof-sicurezza .wc-block-components-sidebar-layout.wc-block-checkout > .wc-block-checkout__sidebar,
body.prof-sicurezza .wc-block-components-sidebar-layout.wc-block-checkout > .wc-block-components-sidebar{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
flex:none !important;
box-sizing:border-box !important;
}
@media (max-width:768px){
body.prof-sicurezza .wp-block-woocommerce-checkout,
body.prof-sicurezza .wc-block-checkout{
padding-left:16px !important;
padding-right:16px !important;
}
}
/* ============================================================
WISHLIST — titolo NON modificabile
Nasconde il pulsante "Modifica titolo" (matita) e il form di
rinomina, così l'utente non può cambiare il nome della lista.
NB: il bottone ha classe .button → serve un selettore PIÙ forte
della regola esistente ".woocommerce a.button {display:inline-flex
!important}", altrimenti non viene nascosto.
============================================================ */
body.prof-sicurezza .woocommerce .wishlist-title-container a.button.show-title-form,
body.prof-sicurezza .wishlist-title-container a.button.show-title-form,
body.prof-sicurezza .wishlist-title .show-title-form,
body.prof-sicurezza .wishlist-title-container .hidden-title-form,
body.prof-sicurezza .wishlist-title-container .edit-title-buttons{
display:none !important;
}
/* Niente affordance "cliccabile" sul titolo */
body.prof-sicurezza .wishlist-title.wishlist-title-with-form,
body.prof-sicurezza .wishlist-title.wishlist-title-with-form h2{
cursor:default !important;
}
/* ============================================================
PAGINA CATEGORIA GENITORE — chip sottocategorie SENZA icone
Richiesta: togliere le iconcine nei bottoni delle sottocategorie
(incluso "Tutte") per un look più pulito. Nascondiamo .ic e
riportiamo il padding simmetrico (prima era 12px a sinistra per
far posto all'icona, ora 16px su entrambi i lati).
============================================================ */
body.prof-sicurezza .subcat .ic{ display:none !important; }
body.prof-sicurezza .subcat{ padding:10px 16px !important; }
/* ============================================================
MEGA MENU — voci su una riga, distribuite, troncate con "…"
- distribuite su tutta la larghezza (space-between)
- ogni voce su una riga; il nome troppo lungo tronca con "…"
- il chevron (freccia) è staccato dal testo e resta sempre
visibile DOPO i "…" (prima era position:absolute → si
sovrapponeva al testo)
- font un pelo più piccolo (13px) per farle stare tutte
- la nav-list può scorrere su schermi molto stretti senza
tagliare i pannelli del mega (.mega è ancorato a nav.cats)
Solo desktop (≥769px): sotto resta il menu mobile a tendina.
============================================================ */
@media (min-width:769px){
body.prof-sicurezza nav.cats .nav-list{
overflow-x:auto !important;
scrollbar-width:none !important;
justify-content:space-between !important;
gap:2px !important;
}
body.prof-sicurezza nav.cats .nav-list::-webkit-scrollbar{ display:none !important; }
body.prof-sicurezza nav.cats .nav-list .nav-item{
flex:0 1 auto !important;
min-width:0 !important;
}
body.prof-sicurezza nav.cats .nav-list .nav-item > a{
display:flex !important;
align-items:center !important;
min-width:0 !important;
gap:7px !important;
padding:0 10px !important;
letter-spacing:0 !important;
font-size:13px !important;
}
body.prof-sicurezza nav.cats .nav-list .nav-item > a > .nav-label{
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
min-width:0 !important;
}
body.prof-sicurezza nav.cats .nav-list .nav-item.has-mega > a::after{
position:static !important;
flex-shrink:0 !important;
margin-left:0 !important;
}
}
/* ============================================================
MEGA MENU CATALOGO — stile Target (2 colonne)
Sinistra: lista categorie. Hover su una → destra mostra le sue
sottocategorie + "Vedi tutto". Solo "Catalogo" ha questa tendina;
le altre voci della nav sono link semplici (no mega, no chevron).
NB: i selettori sono prefissati con "nav.cats .nav-list" per
BATTERE la regola ".nav-list a {color/padding !important}" che
altrimenti schiaccia colore e padding dei link qui dentro
(causava testo scuro sul bottone + voci ammassate).
============================================================ */
body.prof-sicurezza nav.cats .nav-list .mega-catalog .mc-cols{
max-width:var(--container-max,1320px) !important;
margin:0 auto !important;
padding:0 32px !important;
display:flex !important;
gap:0 !important;
box-sizing:border-box !important;
}
body.prof-sicurezza nav.cats .nav-list .mega-catalog .mc-left{
flex:0 0 300px !important;
border-right:1px solid var(--line) !important;
padding-right:16px !important;
max-height:560px !important;
overflow-y:auto !important;
}
body.prof-sicurezza nav.cats .nav-list .mega-catalog .mc-left-head{
font-family:'IBM Plex Mono',monospace !important;
font-size:11px !important;
color:var(--brand) !important;
letter-spacing:.1em !important;
text-transform:uppercase !important;
font-weight:600 !important;
margin:0 0 12px !important;
padding:0 12px !important;
}
body.prof-sicurezza nav.cats .nav-list .mega-catalog .mc-cat{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:8px !important;
padding:11px 12px !important;
border-radius:8px !important;
color:var(--ink) !important;
text-decoration:none !important;
font-size:13.5px !important;
font-weight:500 !important;
}
body.prof-sicurezza nav.cats .nav-list .mega-catalog .mc-cat svg{
width:15px !important; height:15px !important;
opacity:.45 !important; flex-shrink:0 !important;
}
body.prof-sicurezza nav.cats .nav-list .mega-catalog .mc-cat:hover,
body.prof-sicurezza nav.cats .nav-list .mega-catalog .mc-cat.is-active{ background:var(--bg-2) !important; }
body.prof-sicurezza nav.cats .nav-list .mega-catalog .mc-cat.is-active{ color:var(--brand) !important; font-weight:600 !important; }
body.prof-sicurezza nav.cats .nav-list .mega-catalog .mc-right{
flex:1 !important;
padding-left:36px !important;
min-width:0 !important;
}
body.prof-sicurezza nav.cats .nav-list .mega-catalog .mc-panel{ display:none !important; }
body.prof-sicurezza nav.cats .nav-list .mega-catalog .mc-panel.is-active{ display:block !important; }
body.prof-sicurezza nav.cats .nav-list .mega-catalog .mc-panel-head{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:16px !important;
margin-bottom:18px !important;
}
body.prof-sicurezza nav.cats .nav-list .mega-catalog .mc-panel-head h4{
font-size:18px !important;
font-weight:700 !important;
color:var(--ink) !important;
margin:0 !important;
}
/* "Vedi tutto" = stesso stile dei bottoni del sito (.btn-primary, radius var) */
body.prof-sicurezza nav.cats .nav-list .mega-catalog .mc-explore{
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
background:var(--action) !important;
color:#fff !important;
padding:8px 16px !important;
border-radius:var(--radius) !important;
border:1px solid transparent !important;
font-size:12.5px !important;
font-weight:600 !important;
white-space:nowrap !important;
text-decoration:none !important;
}
body.prof-sicurezza nav.cats .nav-list .mega-catalog .mc-explore:hover{
background:var(--action-ink) !important;
color:#fff !important;
}
body.prof-sicurezza nav.cats .nav-list .mega-catalog .mc-subs{
display:grid !important;
grid-template-columns:repeat(auto-fill,minmax(210px,1fr)) !important;
gap:2px 32px !important;
}
body.prof-sicurezza nav.cats .nav-list .mega-catalog .mc-sub{
display:block !important;
padding:11px 0 !important;
color:var(--ink-2) !important;
text-decoration:none !important;
font-size:13.5px !important;
border-bottom:1px solid var(--line) !important;
}
body.prof-sicurezza nav.cats .nav-list .mega-catalog .mc-sub:hover{ color:var(--brand) !important; }
body.prof-sicurezza nav.cats .nav-list .mega-catalog .mc-empty{ color:var(--ink-3) !important; font-size:13.5px !important; }
/* ============================================================
MENU MOBILE — accordion: ogni categoria apre le sue sottocategorie
Su desktop toggle e sottomenu restano nascosti (le voci sono link
semplici, solo Catalogo ha il mega). Su mobile (≤768px) ogni voce
categoria ha un chevron che espande le sottocategorie sotto.
============================================================ */
body.prof-sicurezza .nav-sub-toggle{ display:none; }
body.prof-sicurezza .nav-sub{ display:none; }
@media (max-width:768px){
body.prof-sicurezza nav.cats .nav-list .nav-item.has-sub{
display:block !important;
position:relative !important;
}
body.prof-sicurezza nav.cats .nav-list .nav-item.has-sub > a{
display:block !important;
padding-right:52px !important;
}
body.prof-sicurezza nav.cats .nav-list .nav-sub-toggle{
display:flex !important;
position:absolute !important;
top:0; right:0;
width:50px; height:51px;
align-items:center; justify-content:center;
background:none !important; border:none !important;
padding:0 !important; margin:0 !important;
color:var(--ink-2) !important; cursor:pointer;
}
body.prof-sicurezza nav.cats .nav-list .nav-sub-toggle svg{
width:18px !important; height:18px !important;
transition:transform .2s ease;
}
body.prof-sicurezza nav.cats .nav-list .nav-item.sub-open .nav-sub-toggle svg{ transform:rotate(180deg); }
body.prof-sicurezza nav.cats .nav-list .nav-item.sub-open .nav-sub{ display:block; }
body.prof-sicurezza nav.cats .nav-list .nav-sub{ padding:0 0 10px 14px !important; }
body.prof-sicurezza nav.cats .nav-list .nav-sub a{
display:block !important;
padding:11px 0 !important;
width:100% !important;
font-size:13.5px !important;
color:var(--ink-2) !important;
font-weight:400 !important;
border-bottom:1px solid var(--line) !important;
}
body.prof-sicurezza nav.cats .nav-list .nav-sub a:last-child{ border-bottom:none !important; }
/* "Vedi tutti i prodotti" — link alla categoria genitore, in evidenza */
body.prof-sicurezza nav.cats .nav-list .nav-sub a.nav-sub-all{
color:var(--brand) !important;
font-weight:600 !important;
}
/* Catalogo: niente chevron desktop fuorviante su mobile (è solo un link) */
body.prof-sicurezza nav.cats .nav-list .nav-item.has-mega > a::after{ display:none !important; }
}
/* ============================================================
FIX MOBILE (≤768px) — blocco autoritativo in fondo al file:
vince per ordine sulle tante @media sparse/ridichiarate sopra.
1) topbar centrata 2) hero ridotta 3) categorie a slider (solo home)
4) prodotti 2 per riga ovunque 5) via il banner-immagine in categoria
============================================================ */
/* base: wrapper categorie trasparente su desktop (lo slider è solo su mobile) */
body.prof-sicurezza .cats-wrap{ display:contents; }
@media (max-width:768px){
/* 1) TOPBAR — centrata, va a capo pulita (non schiacciata a sx) */
body.prof-sicurezza .topbar .container.row{
justify-content:center !important;
flex-wrap:wrap !important;
gap:2px 14px !important;
}
body.prof-sicurezza .topbar .topbar-left{
flex-wrap:wrap !important;
justify-content:center !important;
gap:14px !important;
}
body.prof-sicurezza .topbar .right{ gap:10px !important; }
/* 2) HERO — titolo e altezza ridotti, decorazioni rimosse */
body.prof-sicurezza .hero h1{
font-size:clamp(28px, 8.5vw, 38px) !important;
margin:12px 0 14px !important;
}
body.prof-sicurezza .hero-inner{ padding:44px 0 40px !important; }
body.prof-sicurezza .hero p.lead{ font-size:15px !important; }
body.prof-sicurezza .hero-watermark{ display:none !important; }
body.prof-sicurezza .hero-noise{ display:none !important; }
/* 3) CATEGORIE (solo home) — UN UNICO slider, 2 card alla volta, senza
dettagli. cats-feat + cats-grid uniti in un solo scroll via .cats-wrap
(display:contents fa confluire tutte le card in una sola fila). */
body.prof-sicurezza.home .cats-wrap{
display:flex !important;
overflow-x:auto !important;
scroll-snap-type:x mandatory !important;
gap:10px !important;
scrollbar-width:none !important;
-webkit-overflow-scrolling:touch !important;
}
body.prof-sicurezza.home .cats-wrap::-webkit-scrollbar{ display:none !important; }
body.prof-sicurezza.home .cats-wrap .cats-feat,
body.prof-sicurezza.home .cats-wrap .cats-grid{ display:contents !important; }
body.prof-sicurezza.home .cats-wrap .ctile{
flex:0 0 47% !important;
scroll-snap-align:start !important;
aspect-ratio:5 / 4 !important;
}
/* via i dettagli (conteggio/prezzo) e titolo che sta nello spazio */
body.prof-sicurezza.home .cats-wrap .ctile .info .meta{ display:none !important; }
body.prof-sicurezza.home .cats-wrap .ctile .info h3{
font-size:14px !important;
line-height:1.15 !important;
white-space:normal !important;
}
/* 4) PRODOTTI — 2 alla volta ovunque (home + categoria) */
/* categoria: griglia a 2 colonne (promo a tutta larghezza) */
body.prof-sicurezza .cat-products{ grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
body.prof-sicurezza .cat-products .promo-tile{ grid-column:1 / -1 !important; }
/* griglie prodotto classiche */
body.prof-sicurezza .products.grid,
body.prof-sicurezza ul.products{ grid-template-columns:repeat(2,1fr) !important; }
/* slider prodotti home (flex): ogni card ~47% così se ne vedono 2 */
body.prof-sicurezza .products.bestseller-grid > .bs-item,
body.prof-sicurezza .products > .product,
body.prof-sicurezza .products > li.product{
flex:0 0 47% !important;
width:47% !important;
min-width:0 !important;
scroll-snap-align:start !important;
}
/* card prodotto più pulite: via "Rivenditore aut." e badge disponibilità;
bottone "Aggiungi al carrello" a tutta larghezza (testo non schiacciato) */
body.prof-sicurezza article.product .body .brand .auth{ display:none !important; }
body.prof-sicurezza article.product .body .stock{ display:none !important; }
body.prof-sicurezza article.product .add{
width:100% !important;
padding:11px 8px !important;
font-size:12.5px !important;
gap:6px !important;
white-space:nowrap !important;
justify-content:center !important;
box-sizing:border-box !important;
}
/* 5) PAGINA CATEGORIA — via il banner-immagine dell'hero */
body.prof-sicurezza .cat-hero-img{ display:none !important; }
}
/* ============================================================
FIX MOBILE (≤768px) v2 — margini card/slider prodotto ridotti
(padding interno card, gap tra card, slider più largo ai lati)
============================================================ */
@media (max-width:768px){
/* meno padding DENTRO la card prodotto */
body.prof-sicurezza article.product .body{ padding:12px 12px 14px !important; }
/* meno gap TRA le card + slider più largo (meno margine ai lati) */
body.prof-sicurezza .products.bestseller-grid,
body.prof-sicurezza .products{
gap:8px !important;
margin-left:-6px !important;
margin-right:-6px !important;
}
/* meno gap nella griglia prodotti della pagina categoria */
body.prof-sicurezza .cat-products{ gap:8px !important; }
}
/* ============================================================
READ-MORE (.cf-*) — anteprima testo + "Leggi di più".
Generico: usato sia da "In breve" (.copy.copy-full) sia dalla
descrizione in hero PDP (.pdp-short). Il testo sta in .cf-body,
parte clampato a poche righe con sfumatura; se eccede, il JS
aggiunge il bottone .cf-more e attiva .cf-has-more / .cf-open.
(Niente più lista a spunte nell'hero: è un testo unico.)
============================================================ */
body.prof-sicurezza .cf-body{
position:relative;
max-height:6.5em;
overflow:hidden;
}
body.prof-sicurezza .cf-open .cf-body{ max-height:none; }
body.prof-sicurezza .cf-has-more:not(.cf-open) .cf-body::after{
content:"";
position:absolute; left:0; right:0; bottom:0; height:2.4em;
background:linear-gradient(to bottom, transparent, oklch(0.985 0.004 80));
pointer-events:none;
}
body.prof-sicurezza .cf-more{
display:inline-flex; align-items:center; gap:6px;
background:none; border:none; padding:10px 0 0; margin:0;
color:var(--brand); font-weight:600; font-size:14px; cursor:pointer;
font-family:inherit;
}
body.prof-sicurezza .cf-more::after{
content:""; width:7px; height:7px;
border-right:2px solid currentColor; border-bottom:2px solid currentColor;
transform:rotate(45deg); margin-bottom:3px;
}
body.prof-sicurezza .cf-open .cf-more::after{ transform:rotate(-135deg); margin-bottom:-1px; }
/* Spaziatura descrizione in HERO PDP: testo vicino allo SKU (no margine
in cima al primo paragrafo) e più aria tra "Leggi di più" e il box prezzo. */
body.prof-sicurezza .pdp-short{ margin-bottom:16px !important; }
body.prof-sicurezza .pdp-short .cf-body > :first-child{ margin-top:0 !important; }
body.prof-sicurezza .pdp-short .cf-body > :last-child{ margin-bottom:0 !important; }
/* HOME: via lo spazio tra la hero e la barra dei 4 benefit. È un
artefatto (Oxygen/wpautop) subito dopo la hero nel suo wrapper; lo
nascondiamo così la barra resta attaccata. Vale desktop + mobile. */
body.prof-sicurezza .hero-wrap + br{ display:none !important; }
/* OFFERTA DEL GIORNO — 2 card STATICHE (non slider): griglia a 2 colonne
che riempie il box (niente spazio sbilanciato a destra) + padding interno
ridotto così la CTA "Aggiungi al carrello" non si schiaccia. Solo mobile. */
@media (max-width:768px){
body.prof-sicurezza .deal-products{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:8px !important;
overflow:visible !important;
margin:0 !important;
}
body.prof-sicurezza .deal-products > .product,
body.prof-sicurezza .deal-products > .bs-item{
flex:none !important;
width:auto !important;
max-width:none !important;
min-width:0 !important;
}
body.prof-sicurezza .deal-products .product .body,
body.prof-sicurezza .deal-products .bs-item .body{ padding:11px 10px 12px !important; }
body.prof-sicurezza .deal-products .product .add,
body.prof-sicurezza .deal-products .bs-item .add{
padding:10px 6px !important;
font-size:12.5px !important;
gap:5px !important;
white-space:nowrap !important;
}
}
/* PAGINA CATEGORIA (mobile) — meno spazio tra i tab sottocategoria e la
barra Filtri/ordina. Erano 62px: subcats margin-bottom 24 + gap griglia
listing 24 (la colonna filtri è vuota su mobile, sono nel drawer) +
toolbar padding-top 14. Ridotti tutti e tre. */
@media (max-width:768px){
body.prof-sicurezza .subcats{ margin-bottom:8px !important; }
body.prof-sicurezza .listing{ gap:10px !important; }
body.prof-sicurezza .toolbar{ padding-top:6px !important; }
}
/* ============================================================
CATEGORIE ESPLOSE (sopra il footer) — indice catalogo: ogni categoria
come titolo + sottocategorie come link, su più colonne (auto-fit).
============================================================ */
body.prof-sicurezza .cat-index{
border-top:1px solid #e8e4db !important;
padding:44px 0 40px !important;
background:#ffffff !important; /* banda bianca: distinta dallo sfondo crema della pagina */
}
body.prof-sicurezza .cat-index .container{
max-width:var(--container-max,1320px) !important;
margin:0 auto !important;
padding:0 32px !important;
box-sizing:border-box !important;
}
/* Tipografia allineata al footer: titolo modesto, intestazioni 13px/600,
voci 12.5px/400 (stessi font/peso/colore delle colonne del footer). */
body.prof-sicurezza .cat-index-title{
font-size:16px !important;
font-weight:700 !important;
color:var(--ink) !important;
margin:0 0 22px !important;
}
body.prof-sicurezza .cat-index-grid{
display:grid !important;
grid-template-columns:repeat(auto-fit, minmax(185px, 1fr)) !important;
gap:28px 24px !important;
}
body.prof-sicurezza .cat-index-head{
display:block !important;
font-weight:600 !important;
font-size:13px !important;
color:var(--ink) !important;
text-decoration:none !important;
margin:0 0 10px !important;
}
body.prof-sicurezza .cat-index-head:hover{ color:var(--brand) !important; }
body.prof-sicurezza .cat-index-col ul{ list-style:none !important; margin:0 !important; padding:0 !important; }
body.prof-sicurezza .cat-index-col li{ margin:0 0 7px !important; }
body.prof-sicurezza .cat-index-col li a{
color:var(--ink-2) !important;
text-decoration:none !important;
font-size:12.5px !important;
line-height:1.45 !important;
}
body.prof-sicurezza .cat-index-col li a:hover{ color:var(--brand) !important; text-decoration:underline !important; }
@media (max-width:768px){
body.prof-sicurezza .cat-index{ padding:32px 0 !important; }
body.prof-sicurezza .cat-index .container{ padding:0 16px !important; }
body.prof-sicurezza .cat-index-grid{ grid-template-columns:repeat(2,1fr) !important; gap:22px 16px !important; }
body.prof-sicurezza .cat-index-title{ font-size:15px !important; margin:0 0 18px !important; }
}
/* ============================================================
FIX footer / brand / promo:
1) niente spazio bianco tra la sezione "categorie esplose" e il footer
(il footer aveva margin-top:48px → la banda chiara era il body).
2) loghi pagina /brand/ su sfondo BIANCO (l'area logo era crema).
3) loghi delle promo in home dentro un BOX BIANCO sulla card colorata
(prima erano sfondo trasparente sul colore). Il box compare solo se
il brand ha un logo (vedi renderers.php).
============================================================ */
body.prof-sicurezza footer.ps-footer{ margin-top:0 !important; }
body.prof-sicurezza .brand-card-logo{ background:#fff !important; }
/* Padding attorno al logo: il .ph è absolute inset:0 e ignora il padding del
contenitore, quindi pado il .ph stesso + background-origin:content-box, così
il "contain" resta ma il logo rientra dai bordi. */
body.prof-sicurezza .brand-card-logo .ph.imgbg{
padding:24px !important;
background-origin:content-box !important;
box-sizing:border-box !important;
}
body.prof-sicurezza .banner-strip .banner .ph.imgbg{
background-color:#fff !important;
background-size:auto 56% !important;
background-position:center !important;
border-radius:14px !important;
box-shadow:0 6px 18px rgba(0,0,0,.18) !important;
top:50% !important;
bottom:auto !important;
transform:translateY(-50%) !important;
right:22px !important;
width:210px !important;
height:112px !important;
}
@media (max-width:768px){
body.prof-sicurezza .banner-strip .banner .ph.imgbg{
width:128px !important;
height:74px !important;
right:14px !important;
}
body.prof-sicurezza .brand-card-logo .ph.imgbg{ padding:16px !important; }
}
/* ============================================================
HERO SINGOLO BRAND (/marchio/...): box del logo BIANCO con logo
centrato e contenuto (era nero + cover edge-to-edge). Rimosso
l'overlay scuro ::after e reso leggibile il label su bianco.
============================================================ */
body.prof-sicurezza .brand-hero-img{
background:#fff !important;
border:1px solid var(--line,#e6e2d9) !important;
}
body.prof-sicurezza .brand-hero-img::after{ display:none !important; }
body.prof-sicurezza .brand-hero-img .ph.imgbg{
background-size:contain !important;
background-origin:content-box !important;
box-sizing:border-box !important;
padding:48px !important;
}
body.prof-sicurezza .brand-hero-img .floating-info{ color:var(--ink,#1B2152) !important; }
/* Nota: su mobile (≤768px) il box è già nascosto da `.cat-hero-img{display:none}`
(scelta confermata), quindi qui non servono regole mobile per il logo. */
/* ============================================================
FOOTER NAVY: sfondo blu brand + testi chiari. Si abbina alla banda
BIANCA delle "categorie esplose" sopra (pagina crema → banda bianca →
footer navy). NB: il selettore dello sfondo usa `footer.ps-footer`
per battere la regola esistente (specificità).
============================================================ */
body.prof-sicurezza footer.ps-footer{ background:#1B2152 !important; border-top:0 !important; }
body.prof-sicurezza .ps-footer h2,
body.prof-sicurezza .ps-footer h3,
body.prof-sicurezza .ps-footer h4,
body.prof-sicurezza .ps-footer p,
body.prof-sicurezza .ps-footer span,
body.prof-sicurezza .ps-footer b,
body.prof-sicurezza .ps-footer strong,
body.prof-sicurezza .ps-footer small,
body.prof-sicurezza .ps-footer li{ color:#ffffff !important; }
/* L'email è testo "nudo" dentro .contact-row (eredita un colore scuro):
forzo bianco il contenitore così diventa leggibile sul navy. */
body.prof-sicurezza .ps-footer .contact-row{ color:#ffffff !important; }
body.prof-sicurezza .ps-footer a{ color:rgba(255,255,255,0.74) !important; }
body.prof-sicurezza .ps-footer a:hover{ color:#ffffff !important; }
body.prof-sicurezza .ps-footer svg{ stroke:#ffffff !important; color:#ffffff !important; }
/* Logo footer A COLORI (lo stesso della navbar) dentro un box BIANCO,
così resta leggibile sul footer navy. */
body.prof-sicurezza .ps-footer img.logo-img{ filter:none !important; }
body.prof-sicurezza .ps-footer .footer-brand .logo{
background:#ffffff !important;
padding:12px 18px !important;
border-radius:10px !important;
}
/* ============================================================
CHECKOUT (blocchi WooCommerce) — RIEPILOGO DELL'ORDINE
Pulisce i bordi: UN solo box esterno + 3 separatori netti
(sotto i prodotti, sotto il coupon, sopra il Totale).
Rimuove il doppio box interno e le righe/celle vuote dei
sotto-blocchi nativi (sconto/spedizione/tasse) che lasciavano
dei gap bordati. Vale sia per la sidebar (desktop) sia inline (mobile).
============================================================ */
body.prof-sicurezza .wp-block-woocommerce-checkout-order-summary-block{
border:1px solid var(--line) !important;
border-radius:var(--radius-lg, 12px) !important;
background:#fff !important;
padding:22px !important; /* padding UNICO del box: vale per titolo + contenuto */
}
/* su desktop il box è la sidebar → niente doppio bordo/padding sul blocco interno */
body.prof-sicurezza .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block{
border:none !important;
border-radius:0 !important;
background:transparent !important;
padding:0 !important; /* su desktop il padding lo dà la sidebar (24px) */
}
/* contenitore interno: nessun padding proprio (lo dà il box) → evita doppio inset */
body.prof-sicurezza .checkout-order-summary-block-fill{
border:none !important;
border-radius:0 !important;
background:transparent !important;
padding:0 !important;
}
/* titolo "Riepilogo dell'ordine" allineato al contenuto (non attaccato al bordo) */
body.prof-sicurezza .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-step__heading{
margin:0 0 14px !important;
padding:0 !important;
}
/* riepilogo compatto (mobile, in cima): via i bordi spuri sopra/sotto il titolo */
body.prof-sicurezza .wc-block-components-checkout-order-summary__title{
border:none !important;
}
/* campi del checkout con etichetta flottante: il valore va SOTTO la label, non sovrapposto */
body.prof-sicurezza .wc-block-components-text-input input{
padding-top:24px !important;
padding-bottom:6px !important;
}
/* righe prodotto del riepilogo: layout a GRIGLIA stabile — miniatura a sinistra e
TUTTO il testo (nome, prezzo unitario, totale di riga) allineato a UN solo bordo
a sinistra; più un divisore netto tra un prodotto e l'altro. */
body.prof-sicurezza .wc-block-components-order-summary-item{
display:grid !important;
grid-template-columns:52px 1fr !important;
column-gap:14px !important;
align-items:start !important;
padding-bottom:16px !important;
margin-bottom:16px !important;
border-bottom:1px solid var(--line) !important;
}
body.prof-sicurezza .wc-block-components-order-summary-item:last-child{
padding-bottom:0 !important;
margin-bottom:0 !important;
border-bottom:none !important;
}
body.prof-sicurezza .wc-block-components-order-summary-item__image{
grid-column:1 !important;
grid-row:1 !important;
justify-self:start !important;
}
body.prof-sicurezza .wc-block-components-order-summary-item .screen-reader-text{
grid-column:1 !important;
}
body.prof-sicurezza .wc-block-components-order-summary-item__description{
grid-column:2 !important;
grid-row:1 !important;
justify-self:start !important;
width:100% !important;
min-width:0 !important;
padding-left:0 !important;
}
/* totale di riga SOTTO il prodotto, allineato a sinistra come nome e prezzo unitario */
body.prof-sicurezza .wc-block-components-order-summary-item__total-price{
grid-column:2 !important;
grid-row:2 !important;
justify-self:start !important;
margin:8px 0 0 !important; /* azzera margin-left:auto di WooCommerce */
padding-left:0 !important;
text-align:left !important;
width:auto !important;
}
/* prezzo totale di riga + badge "Risparmia" sulla stessa riga, a sinistra */
body.prof-sicurezza .wc-block-components-order-summary-item__total-price .wc-block-cart-item__total-price-and-sale-badge-wrapper{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:flex-start !important;
gap:10px !important;
text-align:left !important;
}
body.prof-sicurezza .wc-block-components-order-summary-item__total-price .wc-block-components-formatted-money-amount{
font-weight:700 !important;
}
/* CTA finali del checkout come PULSANTI chiari:
"Effettua ordine" = primario (pieno), "Torna al carrello" = secondario (bordato) sotto */
body.prof-sicurezza .wc-block-checkout__actions_row{
display:flex !important;
flex-direction:column-reverse !important; /* "Effettua ordine" sopra, "Torna al carrello" sotto */
gap:12px !important;
align-items:stretch !important;
}
body.prof-sicurezza .wc-block-components-checkout-place-order-button{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
max-width:none !important;
background:var(--ink) !important;
color:#fff !important;
border:1px solid var(--ink) !important;
border-radius:var(--radius, 8px) !important;
padding:16px 24px !important;
font-size:15px !important;
font-weight:700 !important;
text-decoration:none !important;
cursor:pointer !important;
box-shadow:none !important;
}
body.prof-sicurezza .wc-block-components-checkout-place-order-button:hover{
background:oklch(0.22 0.005 250) !important;
}
body.prof-sicurezza .wc-block-components-checkout-return-to-cart-button{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
box-sizing:border-box !important;
background:#fff !important;
color:var(--ink) !important;
border:1px solid var(--line) !important;
border-radius:var(--radius, 8px) !important;
padding:13px 24px !important;
font-size:14px !important;
font-weight:600 !important;
text-decoration:none !important;
}
body.prof-sicurezza .wc-block-components-checkout-return-to-cart-button:hover{
background:var(--bg-2) !important;
border-color:var(--ink) !important;
}
/* striscia "Rivenditore autorizzato" (home): loghi più GRANDI e visibili
(celle più alte + meno padding → il logo "contain" riempie di più) */
body.prof-sicurezza .brands-row .brand-logo,
body.prof-sicurezza .brand-logo{
min-height:80px !important;
height:auto !important;
}
body.prof-sicurezza .brand-logo.has-img{
min-height:80px !important;
padding:8px 10px !important;
}
/* Categorie home: usa l'IMMAGINE assegnata nel backend (thumbnail categoria)
come card intera. L'immagine è già una card completa (sfondo + prodotto +
nome), quindi nascondiamo gradiente/icona/testo. Senza immagine assegnata
resta il gradiente + icona + nome (fallback automatico). */
body.prof-sicurezza .cats-feat .ctile.has-cat-img,
body.prof-sicurezza .cats-grid .ctile.has-cat-img{
background-image:var(--cat-img) !important;
background-size:cover !important;
background-position:center !important;
background-repeat:no-repeat !important;
}
body.prof-sicurezza .ctile.has-cat-img .ctile-art,
body.prof-sicurezza .ctile.has-cat-img .info{ display:none !important; }
body.prof-sicurezza .ctile.has-cat-img::after,
body.prof-sicurezza .ctile.has-cat-img::before{ display:none !important; }
/* le card piccole prendono il rapporto dell'immagine (16:10) per non tagliarla */
body.prof-sicurezza .cats-grid .ctile.has-cat-img{ aspect-ratio:16/10 !important; }
/* freccia card categoria: bordo navy così il cerchio bianco si stacca anche
dagli sfondi chiari (es. card azzurre) */
body.prof-sicurezza .ctile .arrow{
border:1px solid var(--navy) !important;
}
/* chip "Più venduta / Top vendita / Pro": colore più leggibile su ogni sfondo */
body.prof-sicurezza .ctile .eye{
background:rgb(183 183 183 / 70%) !important;
}
/* mobile: niente chip sulle card in evidenza */
@media (max-width:768px){
body.prof-sicurezza .ctile .eye{ display:none !important; }
}
/* azzera bordi e gap di TUTTI i sotto-blocchi del riepilogo */
body.prof-sicurezza .wp-block-woocommerce-checkout-order-summary-coupon-form-block,
body.prof-sicurezza .wp-block-woocommerce-checkout-order-summary-totals-block,
body.prof-sicurezza .wp-block-woocommerce-checkout-order-summary-subtotal-block,
body.prof-sicurezza .wp-block-woocommerce-checkout-order-summary-discount-block,
body.prof-sicurezza .wp-block-woocommerce-checkout-order-summary-fee-block,
body.prof-sicurezza .wp-block-woocommerce-checkout-order-summary-shipping-block,
body.prof-sicurezza .wp-block-woocommerce-checkout-order-summary-taxes-block,
body.prof-sicurezza .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper{
border:none !important;
padding-top:0 !important;
padding-bottom:0 !important;
margin:0 !important;
}
/* separatore 1: sotto la lista prodotti */
body.prof-sicurezza .wp-block-woocommerce-checkout-order-summary-cart-items-block{
border:none !important;
border-bottom:1px solid var(--line) !important;
padding:0 0 14px !important;
margin:0 0 14px !important;
}
/* separatore 2: sotto "Aggiungi codici promozionali" */
body.prof-sicurezza .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon{
border:none !important;
border-bottom:1px solid var(--line) !important;
padding:0 0 14px !important;
margin:0 0 14px !important;
}
/* separatore 3: sopra il Totale */
body.prof-sicurezza .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item{
border-top:1px solid var(--line) !important;
padding-top:14px !important;
margin-top:4px !important;
}
/* ============================================================
v36 — Fix CARRELLO (WooCommerce Cart block)
1) Riepilogo ordine pulito (via le "righe vuote")
2) Recap articoli nel box riepilogo a destra (iniettato via JS)
3) Bottoni "Aggiungi al carrello" dei blocchi prodotti leggibili (difensivo)
NB: l'empty state è gestito nel CONTENUTO della pagina Carrello
(titolo IT + shortcode [ps_new_arrivals] = card come in homepage).
Verificato live (desktop + mobile) prima del salvataggio.
============================================================ */
/* ---------- #1 RIEPILOGO ORDINE (sidebar del carrello) ----------
Subtotale/spedizione/tasse erano stati rimossi dalla pagina, lasciando
solo separatori vuoti (sembrava un riepilogo "rotto"). Azzeriamo i bordi
di tutti i sotto-blocchi e ne rimettiamo solo 2 deliberati. */
body.prof-sicurezza .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-wrapper,
body.prof-sicurezza .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-coupon,
body.prof-sicurezza .wp-block-woocommerce-cart-order-summary-block .wc-block-components-panel,
body.prof-sicurezza .wp-block-woocommerce-cart-order-summary-totals-block,
body.prof-sicurezza .wp-block-woocommerce-cart-order-summary-coupon-form-block{
border:none !important;
padding-top:0 !important;
padding-bottom:0 !important;
margin:0 !important;
}
/* titolo "Riepilogo ordine" sempre visibile (su mobile WC lo nascondeva).
Niente bordo qui: sotto al titolo segue il recap articoli (con il suo separatore). */
body.prof-sicurezza .wc-block-cart__totals-title,
body.prof-sicurezza h2.wc-block-cart__totals-title{
display:block !important;
border-bottom:none !important;
padding-bottom:0 !important;
margin:0 0 14px !important;
}
/* 1 separatore sotto "Aggiungi codici promozionali" */
body.prof-sicurezza .wp-block-woocommerce-cart-order-summary-block .wp-block-woocommerce-cart-order-summary-coupon-form-block{
border-bottom:1px solid var(--line) !important;
padding-bottom:14px !important;
margin-bottom:16px !important;
}
/* riga Totale: nessun bordo extra, solo un po' di respiro */
body.prof-sicurezza .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-footer-item{
border-top:none !important;
padding:2px 0 !important;
}
/* via TUTTI i bordi/righe residui sotto il Totale e attorno al bottone checkout
(il blocco summary, lo spacer vuoto e il submit-container avevano bordi propri) */
body.prof-sicurezza .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block,
body.prof-sicurezza .wc-block-cart__sidebar .wp-block-woocommerce-proceed-to-checkout-block,
body.prof-sicurezza .wc-block-cart__sidebar .wp-block-woocommerce-proceed-to-checkout-block > div,
body.prof-sicurezza .wc-block-cart__sidebar .wc-block-cart__submit,
body.prof-sicurezza .wc-block-cart__sidebar .wc-block-cart__submit-container{
border:none !important;
}
body.prof-sicurezza .wc-block-cart__sidebar .wp-block-woocommerce-proceed-to-checkout-block{
padding-top:0 !important;
margin-top:18px !important;
}
/* ---------- #2 RECAP ARTICOLI nel box riepilogo (iniettato via JS) ----------
Il carrello a blocchi (React) non elenca gli articoli nella colonna riepilogo:
li costruiamo via JS leggendo lo store WooCommerce (wc/store/cart), con
aggiornamento live su modifica quantità/rimozione. Stile qui sotto. */
body.prof-sicurezza .ps-cart-recap{
margin:0 0 16px !important;
padding:0 0 14px !important;
border-bottom:1px solid var(--line) !important;
}
body.prof-sicurezza .ps-cart-recap__list{
list-style:none !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
body.prof-sicurezza .ps-cart-recap__item{
display:flex !important;
align-items:center !important;
gap:10px !important;
}
body.prof-sicurezza .ps-cart-recap__thumb{
flex:0 0 44px !important;
width:44px !important;
height:44px !important;
border:1px solid var(--line) !important;
border-radius:var(--radius, 6px) !important;
overflow:hidden !important;
background:#fff !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
body.prof-sicurezza .ps-cart-recap__thumb img{
width:100% !important;
height:100% !important;
object-fit:contain !important;
}
body.prof-sicurezza .ps-cart-recap__info{
flex:1 1 auto !important;
min-width:0 !important;
display:flex !important;
flex-direction:column !important;
gap:2px !important;
}
body.prof-sicurezza .ps-cart-recap__name{
font-size:13px !important;
font-weight:600 !important;
color:var(--ink) !important;
line-height:1.3 !important;
display:-webkit-box !important;
-webkit-line-clamp:2 !important;
-webkit-box-orient:vertical !important;
overflow:hidden !important;
}
body.prof-sicurezza .ps-cart-recap__qty{
font-size:12px !important;
color:var(--ink-2) !important;
}
body.prof-sicurezza .ps-cart-recap__price{
flex:0 0 auto !important;
font-size:13px !important;
font-weight:700 !important;
color:var(--ink) !important;
white-space:nowrap !important;
}
/* ---------- #3 Bottoni "Aggiungi al carrello" dei blocchi prodotti ----------
I blocchi WooCommerce (.wc-block-grid__product: "Novità in negozio",
correlati, ecc.) usano .wp-block-button__link, di default testo scuro su
sfondo scuro = illeggibile. Allineiamo al CTA rosso del brand.
NB: serve includere .add_to_cart_button per battere la regola di sfondo
inline di WordPress (specificità). */
body.prof-sicurezza .wc-block-grid__product .wp-block-button__link.add_to_cart_button,
body.prof-sicurezza .wc-block-grid__product .wp-block-button__link{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:auto !important;
min-height:0 !important;
padding:11px 20px !important;
background-color:var(--action) !important;
background-image:none !important;
color:#fff !important;
border:1px solid var(--action) !important;
border-radius:var(--radius, 6px) !important;
font-size:13px !important;
font-weight:600 !important;
font-family:inherit !important;
line-height:1.2 !important;
text-decoration:none !important;
text-transform:none !important;
letter-spacing:0 !important;
cursor:pointer !important;
transition:background-color .15s ease !important;
}
body.prof-sicurezza .wc-block-grid__product .wp-block-button__link.add_to_cart_button:hover,
body.prof-sicurezza .wc-block-grid__product .wp-block-button__link:hover{
background-color:var(--action-ink) !important;
color:#fff !important;
}
/* stato "Vedi carrello" dopo l'aggiunta (link .added_to_cart) */
body.prof-sicurezza .wc-block-grid__product .added_to_cart{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
margin-top:8px !important;
padding:8px 14px !important;
background:#fff !important;
color:var(--brand) !important;
border:1px solid var(--line) !important;
border-radius:var(--radius, 6px) !important;
font-size:12.5px !important;
font-weight:600 !important;
text-decoration:none !important;
}
/* ============================================================
v37 — Pagina CARRELLO VUOTO: layout completo
(hero + CTA, scorciatoie categoria, novità, banner assistenza).
I blocchi stanno nel CONTENUTO della pagina (HTML + [ps_new_arrivals]);
qui solo lo stile.
============================================================ */
body.prof-sicurezza .wp-block-woocommerce-empty-cart-block{
max-width:1040px !important;
margin:0 auto !important;
padding:8px 20px 10px !important;
text-align:center !important;
}
/* Meno spazio fra la nav e il titolo: quando il carrello è vuoto azzera il
margine superiore del blocco cart (32px) — resta solo il padding del template. */
body.prof-sicurezza .wp-block-woocommerce-cart:has(.wp-block-woocommerce-empty-cart-block){
margin-top:0 !important;
}
/* Titolo + icona (l'icona è un ::before con mask, la fissiamo in px così non scala col font) */
body.prof-sicurezza .wc-block-cart__empty-cart__title{
padding:0 !important;
margin:0 auto 8px !important;
font-size:25px !important;
font-weight:800 !important;
letter-spacing:-0.02em !important;
color:var(--brand) !important;
}
body.prof-sicurezza .wc-block-cart__empty-cart__title.with-empty-cart-icon::before{
display:none !important;
}
/* Hero: sottotitolo + CTA + rassicurazioni */
body.prof-sicurezza .ps-ec-sub{
font-size:15.5px !important;
color:var(--ink-2) !important;
margin:0 0 18px !important;
}
body.prof-sicurezza .ps-ec-cta{
display:flex !important;
gap:10px !important;
justify-content:center !important;
flex-wrap:wrap !important;
}
body.prof-sicurezza .ps-ec-btn{
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
padding:12px 22px !important;
border-radius:var(--radius, 6px) !important;
font-size:14.5px !important;
font-weight:600 !important;
text-decoration:none !important;
border:1px solid transparent !important;
cursor:pointer !important;
transition:background .15s ease, border-color .15s ease !important;
}
body.prof-sicurezza .ps-ec-btn--red{ background:var(--action) !important; color:#fff !important; border-color:var(--action) !important; }
body.prof-sicurezza .ps-ec-btn--red:hover{ background:var(--action-ink) !important; }
body.prof-sicurezza .ps-ec-btn--out{ background:#fff !important; color:var(--brand) !important; border-color:var(--line) !important; }
body.prof-sicurezza .ps-ec-btn--out:hover{ border-color:var(--brand) !important; }
body.prof-sicurezza .ps-ec-ic{ width:19px !important; height:19px !important; flex:0 0 auto !important; }
body.prof-sicurezza .ps-ec-ic--sm{ width:15px !important; height:15px !important; }
body.prof-sicurezza .ps-ec-trust{
display:flex !important;
gap:22px !important;
justify-content:center !important;
flex-wrap:wrap !important;
margin:18px 0 0 !important;
font-size:12.5px !important;
color:var(--ink-2) !important;
}
body.prof-sicurezza .ps-ec-trust span{ display:inline-flex !important; align-items:center !important; gap:7px !important; }
body.prof-sicurezza .ps-ec-trust .ps-ec-ic{ width:17px !important; height:17px !important; color:var(--ok, oklch(0.55 0.13 150)) !important; }
/* Sezioni (allineate a sinistra) */
body.prof-sicurezza .ps-ec-sec{ margin:34px 0 0 !important; text-align:left !important; }
body.prof-sicurezza .ps-ec-lbl{ display:flex !important; align-items:center !important; justify-content:space-between !important; margin:0 0 14px !important; }
body.prof-sicurezza .ps-ec-lbl h3{ font-size:17px !important; font-weight:700 !important; color:var(--ink) !important; margin:0 !important; }
body.prof-sicurezza .ps-ec-lbl a{ font-size:13px !important; font-weight:600 !important; color:var(--action) !important; text-decoration:none !important; display:inline-flex !important; align-items:center !important; gap:5px !important; }
/* Griglia categorie */
body.prof-sicurezza .ps-ec-cats{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:12px !important; }
body.prof-sicurezza .ps-ec-cat{ display:flex !important; align-items:center !important; gap:12px !important; background:#fff !important; border:1px solid var(--line) !important; border-radius:var(--radius-lg, 10px) !important; padding:14px 16px !important; text-decoration:none !important; transition:border-color .15s ease, transform .15s ease !important; }
body.prof-sicurezza .ps-ec-cat:hover{ border-color:var(--brand) !important; transform:translateY(-1px) !important; }
body.prof-sicurezza .ps-ec-cat .ps-ec-ic{ width:24px !important; height:24px !important; color:var(--brand) !important; }
body.prof-sicurezza .ps-ec-cat b{ display:block !important; font-size:14px !important; font-weight:600 !important; color:var(--ink) !important; line-height:1.3 !important; }
body.prof-sicurezza .ps-ec-cat small{ font-size:12px !important; color:var(--ink-3, oklch(0.6 0.01 250)) !important; }
/* Novità: il blocco [ps_new_arrivals] eredita .section/.container del sito → azzeriamo i padding e allineiamo */
body.prof-sicurezza .wp-block-woocommerce-empty-cart-block .section{ padding:0 !important; margin:34px 0 0 !important; text-align:left !important; }
body.prof-sicurezza .wp-block-woocommerce-empty-cart-block .section .container{ max-width:100% !important; padding-left:0 !important; padding-right:0 !important; }
/* Banner assistenza */
body.prof-sicurezza .ps-ec-help{ margin:34px 0 0 !important; background:var(--brand) !important; border-radius:var(--radius-lg, 10px) !important; padding:22px 24px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:18px !important; flex-wrap:wrap !important; text-align:left !important; }
body.prof-sicurezza .ps-ec-help-txt h3{ font-size:17px !important; font-weight:700 !important; color:#fff !important; margin:0 0 3px !important; }
body.prof-sicurezza .ps-ec-help-txt p{ font-size:13.5px !important; color:rgba(255,255,255,.72) !important; margin:0 !important; }
body.prof-sicurezza .ps-ec-help-btns{ display:flex !important; gap:10px !important; flex-wrap:wrap !important; }
body.prof-sicurezza .ps-ec-hbtn{ display:inline-flex !important; align-items:center !important; gap:8px !important; font-size:13.5px !important; font-weight:600 !important; padding:11px 17px !important; border-radius:var(--radius, 6px) !important; text-decoration:none !important; }
body.prof-sicurezza .ps-ec-hbtn .ps-ec-ic{ width:18px !important; height:18px !important; }
body.prof-sicurezza .ps-ec-hbtn--w{ background:#fff !important; color:var(--brand) !important; }
body.prof-sicurezza .ps-ec-hbtn--g{ background:#25d366 !important; color:#08331b !important; }
/* Responsive */
@media (max-width:760px){
body.prof-sicurezza .ps-ec-cats{ grid-template-columns:repeat(2,1fr) !important; }
body.prof-sicurezza .ps-ec-help{ flex-direction:column !important; align-items:flex-start !important; }
}
@media (max-width:480px){
body.prof-sicurezza .ps-ec-cats{ grid-template-columns:1fr !important; }
body.prof-sicurezza .ps-ec-btn{ width:100% !important; justify-content:center !important; }
}
/* ============================================================
v38 — Hero categoria: mostra l'immagine-banner per intero.
I banner sono 593×370 (16:10); il contenitore si allungava
all'altezza della colonna testo e con `cover` tagliava il titolo
stampato nel banner. Lo blocchiamo sul rapporto del banner +
togliamo overlay scuro ed etichetta che lo coprivano.
============================================================ */
body.prof-sicurezza .cat-hero{ align-items:center !important; }
body.prof-sicurezza .cat-hero-img{
aspect-ratio:593 / 370 !important;
min-height:0 !important;
align-self:center !important;
/* sfondo bianco: i banner categoria (cover) lo coprono; i loghi brand
(contain, con spazio attorno) appoggiano su bianco anziche sul crema. */
background:#fff !important;
}
body.prof-sicurezza .cat-hero-img .ph,
body.prof-sicurezza .cat-hero-img .imgbg{
background-size:cover !important;
background-position:center !important;
}
body.prof-sicurezza .cat-hero-img::after{ display:none !important; }
body.prof-sicurezza .cat-hero-img .floating-info{ display:none !important; }
/* ===== SEZIONE PROF DOG (band) — shortcode [ps_profdog_band] ===== */
.ps-pd-band{--pdr:#C23026;position:relative;overflow:hidden;color:#fff;padding:72px 0;background:radial-gradient(120% 100% at 82% 12%,rgba(194,48,38,.45),transparent 55%),radial-gradient(100% 120% at 8% 95%,rgba(0,174,239,.30),transparent 60%),linear-gradient(135deg,#161a3f,#1B2152 60%,#232a6b)}
.ps-pd-band .container{position:relative;z-index:2}
.ps-pd-band .ps-pd-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.ps-pd-band .ps-pd-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;padding:7px 14px;border-radius:99px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.ps-pd-band .ps-pd-dot{width:8px;height:8px;border-radius:50%;background:var(--pdr);box-shadow:0 0 0 4px rgba(194,48,38,.30)}
.ps-pd-band h2{font-size:34px;line-height:1.12;letter-spacing:-.02em;font-weight:800;margin:18px 0 16px;max-width:18ch;color:#fff}
.ps-pd-band p{color:rgba(255,255,255,.86);font-size:16px;line-height:1.6;margin:0 0 12px;max-width:54ch}
.ps-pd-band .ps-pd-cta{display:inline-flex;align-items:center;gap:9px;margin-top:14px;background:var(--pdr);color:#fff;padding:15px 26px;border-radius:10px;font-weight:700;font-size:15.5px;box-shadow:0 14px 30px rgba(194,48,38,.35);transition:transform .15s}
.ps-pd-band .ps-pd-cta:hover{transform:translateY(-2px);color:#fff}
.ps-pd-band .ps-pd-card{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(140deg,rgba(0,0,0,.25),rgba(27,33,82,.6)),url('https://images.unsplash.com/photo-1557597774-9d273605dfa9?w=900&q=80') center/cover;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.ps-pd-band .ps-pd-live{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.12em;font-weight:600;color:#fff;background:rgba(0,0,0,.45);padding:6px 11px;border-radius:7px}
.ps-pd-band .ps-pd-rec{width:8px;height:8px;border-radius:50%;background:var(--pdr);box-shadow:0 0 0 4px rgba(194,48,38,.30)}
.ps-pd-band .ps-pd-card b{font-size:21px;font-weight:800;position:relative;z-index:2;color:#fff}
.ps-pd-band .ps-pd-card small{font-size:13px;color:rgba(255,255,255,.85);margin-top:4px;position:relative;z-index:2}
@media(max-width:900px){.ps-pd-band .ps-pd-grid{grid-template-columns:1fr;gap:30px}.ps-pd-band h2{font-size:27px}}
/* ============================================================
PRICE GATE — prezzi visibili solo dopo login
Attivo sui marchi pa_brand con flag "Nascondi prezzi agli utenti
non loggati" (vedi inc/price-gate.php).
============================================================ */
/* Sostituto del prezzo nelle card / liste / ricerca */
body.prof-sicurezza .ps-price-locked{ display:inline-flex; max-width:100%; }
body.prof-sicurezza .ps-price-locked a{
display:inline-flex; align-items:center; gap:6px;
font-size:14px; font-weight:700; line-height:1.25;
color:var(--navy); text-decoration:none;
border-bottom:1px dashed var(--line-2);
}
body.prof-sicurezza .ps-price-locked a:hover{
color:var(--action); border-bottom-color:var(--action);
}
body.prof-sicurezza .ps-price-locked .ps-lock{ width:15px; height:15px; flex:0 0 auto; }
/* Bottone al posto di "Aggiungi al carrello" nelle card */
body.prof-sicurezza .ps-btn-login{
display:inline-flex !important; align-items:center; justify-content:center; gap:7px;
width:100%; padding:10px 14px; border-radius:8px;
background:var(--brand-soft) !important; color:var(--navy) !important;
border:1px solid var(--line-2) !important;
font-size:13.5px !important; font-weight:700 !important; text-decoration:none !important;
}
body.prof-sicurezza .ps-btn-login:hover{
background:var(--action) !important; color:#fff !important; border-color:var(--action) !important;
}
body.prof-sicurezza .ps-btn-login .ps-lock{ width:14px; height:14px; flex:0 0 auto; }
/* Pricebox della scheda prodotto */
body.prof-sicurezza .pricebox--locked,
body.prof-sicurezza .info .pricebox--locked{
background:var(--brand-soft) !important;
border:1px solid var(--line-2) !important;
border-radius:var(--radius-lg) !important;
padding:20px 22px !important;
margin-top:6px !important; margin-bottom:18px !important;
box-shadow:none !important;
}
body.prof-sicurezza .pricebox--locked .ps-locked-head{
display:flex; align-items:center; gap:9px;
color:var(--navy); font-size:17px; font-weight:800; letter-spacing:-.01em;
}
body.prof-sicurezza .pricebox--locked .ps-locked-head .ps-lock{
width:20px; height:20px; flex:0 0 auto;
}
body.prof-sicurezza .pricebox--locked .ps-locked-sub{
margin:8px 0 14px; font-size:14px; line-height:1.5; color:var(--ink-2);
}
body.prof-sicurezza .pricebox--locked .ps-locked-cta{
display:inline-flex !important; align-items:center; justify-content:center;
background:var(--action) !important; color:#fff !important;
padding:12px 22px !important; border-radius:8px !important;
font-weight:700 !important; text-decoration:none !important;
}
body.prof-sicurezza .pricebox--locked .ps-locked-cta:hover{
background:var(--action-ink) !important;
}