/* ============================================================
   PUBBLISOLUTION — DESIGN SYSTEM (Grafica C · "Modern Visual")
   catalog/catalog.css — skin del catalogo web cliente
   (header/shell/footer sono in ../shared/layout.css)
   ============================================================ */

/* ============================================================
   HERO ad alto contrasto + reveal on-load
   ============================================================ */
.ps-ui .ps-hero {
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(46,107,255,.35), transparent 60%),
    radial-gradient(700px 400px at -10% 110%, rgba(56,189,248,.18), transparent 55%),
    var(--ps-color-primary-dark);
  color: #fff;
  padding: var(--ps-space-8) var(--ps-space-7);
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--ps-space-7);
  align-items: center;
}
.ps-ui .ps-hero .ps-eyebrow { color: var(--ps-color-accent-2); display: block; margin-bottom: var(--ps-space-3); }
.ps-ui .ps-hero-title {
  font-family: var(--ps-font-display);
  font-weight: 800;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.0;
  letter-spacing: -.02em;
}
.ps-ui .ps-hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--ps-color-accent), var(--ps-color-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ps-ui .ps-hero-sub { margin-top: var(--ps-space-4); color: rgba(255,255,255,.7); font-size: 16px; line-height: 1.6; max-width: 480px; }
.ps-ui .ps-hero-stats { display: flex; gap: var(--ps-space-5); margin-top: var(--ps-space-5); flex-wrap: wrap; }
.ps-ui .ps-hero-stat { border-left: 2px solid var(--ps-color-accent); padding-left: 14px; }
.ps-ui .ps-hero-stat b { display: block; font-family: var(--ps-font-display); font-size: 22px; }
.ps-ui .ps-hero-stat span { font-size: 12px; color: rgba(255,255,255,.55); letter-spacing: .08em; text-transform: uppercase; }
.ps-ui .ps-hero-media { position: relative; min-height: 340px; }
.ps-ui .ps-hero-img {
  position: absolute;
  right: 0; top: 50%;
  width: min(460px, 100%);
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--ps-radius-lg);
  box-shadow: var(--ps-shadow-lg);
  border: 1px solid rgba(255,255,255,.15);
  will-change: transform;
  transform: translateY(-50%);
}
.ps-ui .ps-hero-chip {
  position: absolute;
  left: 8%; bottom: 10%;
  background: rgba(255,255,255,.96);
  color: var(--ps-color-primary);
  border-radius: var(--ps-radius-md);
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: var(--ps-shadow-lg);
}
.ps-ui .ps-hero-chip b { font-family: var(--ps-font-display); font-size: 18px; }
.ps-ui .ps-hero-chip span { font-size: 12px; color: var(--ps-color-muted); }

/* reveal on-load (righe mascherate) */
.ps-ui .ps-reveal-line { display: block; overflow: hidden; }
.ps-ui .ps-reveal-line > span { display: block; transform: translateY(110%); animation: psC-rise .8s var(--ps-ease) forwards; }
.ps-ui .ps-reveal-line:nth-child(2) > span { animation-delay: .1s; }
.ps-ui .ps-reveal-line:nth-child(3) > span { animation-delay: .2s; }
@keyframes psC-rise { to { transform: translateY(0); } }

/* ============================================================
   MARQUEE editoriale (lento, decorativo)
   ============================================================ */
.ps-ui .ps-marquee {
  background: var(--ps-color-accent);
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  padding: 14px 0;
  font-family: var(--ps-font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.ps-ui .ps-marquee-track { display: inline-flex; gap: 0; animation: psC-marquee 36s linear infinite; }
.ps-ui .ps-marquee span { padding: 0 28px; display: inline-flex; align-items: center; gap: 28px; }
.ps-ui .ps-marquee span::after { content: "·"; opacity: .6; }
@keyframes psC-marquee { to { transform: translateX(-50%); } }

/* ============================================================
   SIDEBAR CATEGORIE (chiara, pill attiva luminosa)
   ============================================================ */
.ps-ui .ps-sidebar {
  width: var(--ps-sidebar-w);
  flex: none;
  background: var(--ps-color-surface);
  border-right: 1px solid var(--ps-color-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: width var(--ps-transition-normal) var(--ps-ease);
  overflow: hidden;
}
.ps-ui .ps-sidebar-head { padding: var(--ps-space-6) var(--ps-space-6) var(--ps-space-3); white-space: nowrap; }
.ps-ui .ps-sidebar-head strong { display: none; }
.ps-ui .ps-sidebar-nav { flex: 1; overflow-y: auto; padding: var(--ps-space-2) var(--ps-space-3); }
.ps-ui .ps-sidebar-nav::-webkit-scrollbar { width: 4px; }
.ps-ui .ps-sidebar-nav::-webkit-scrollbar-thumb { background: var(--ps-color-border-strong); border-radius: 999px; }
.ps-ui .ps-cat-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%;
  padding: 11px 16px;
  color: var(--ps-color-muted);
  font-size: 13.5px;
  font-weight: 500;
  border-radius: 999px;
  white-space: nowrap;
  transition: color var(--ps-transition-fast) var(--ps-ease), background var(--ps-transition-fast) var(--ps-ease), padding var(--ps-transition-fast) var(--ps-ease);
}
.ps-ui .ps-cat-link .ps-count { font-family: var(--ps-font-mono); font-size: 11px; color: #AAB6CE; }
.ps-ui .ps-cat-link:hover { color: var(--ps-color-text); background: var(--ps-color-panel); padding-left: 20px; }
.ps-ui .ps-cat-link.is-active {
  background: var(--ps-color-accent);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--ps-glow);
}
.ps-ui .ps-cat-link.is-active .ps-count { color: rgba(255,255,255,.75); }

.ps-ui .ps-rail-brand { display: none; }
.ps-ui .ps-sidebar.is-collapsed { width: 84px; }
.ps-ui .ps-sidebar.is-collapsed .ps-sidebar-head,
.ps-ui .ps-sidebar.is-collapsed .ps-sidebar-nav,
.ps-ui .ps-sidebar.is-collapsed .ps-collapse-label { display: none; }
.ps-ui .ps-sidebar.is-collapsed .ps-rail-brand {
  display: flex; flex: 1; align-items: center; justify-content: center;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--ps-font-display); font-weight: 800; font-size: 24px;
  letter-spacing: .18em; color: var(--ps-color-accent); opacity: .85; user-select: none;
}

.ps-ui .ps-sidebar-foot { border-top: 1px solid var(--ps-color-border); padding: var(--ps-space-4) var(--ps-space-5); }
.ps-ui .ps-collapse-btn {
  display: flex; align-items: center; gap: 10px;
  color: var(--ps-color-muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  min-height: 44px;
}
.ps-ui .ps-collapse-btn:hover { color: var(--ps-color-accent); }
.ps-ui .ps-collapse-btn svg { width: 16px; height: 16px; transition: transform var(--ps-transition-normal) var(--ps-ease); }
.ps-ui .ps-sidebar.is-collapsed .ps-collapse-btn { justify-content: center; padding: 0; }
.ps-ui .ps-sidebar.is-collapsed .ps-collapse-btn svg { transform: rotate(180deg); }
.ps-ui .ps-sidebar-url { display: none; }

/* ============================================================
   AREA CATALOGO: titolo categoria + strip
   ============================================================ */
.ps-ui .ps-catalog-head { margin-bottom: var(--ps-space-6); }
.ps-ui .ps-catalog-head .ps-eyebrow { display: block; margin-bottom: var(--ps-space-2); }
.ps-ui .ps-title-xl {
  font-family: var(--ps-font-display);
  font-weight: 800;
  font-size: clamp(32px, 4.2vw, 52px);
  letter-spacing: -.02em;
  line-height: 1.02;
}
.ps-ui .ps-catalog-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ps-space-5); margin-top: var(--ps-space-4); flex-wrap: wrap;
}
.ps-ui .ps-count { font-size: 13px; color: var(--ps-color-muted); }
.ps-ui .ps-count b { color: var(--ps-color-accent); font-family: var(--ps-font-mono); }
.ps-ui .ps-strip { display: none; }

/* ============================================================
   GRIGLIA + PRODUCT CARD (immagine protagonista)
   ============================================================ */
.ps-ui .ps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ps-space-5); }
.ps-ui .ps-card { overflow: hidden; display: flex; flex-direction: column; }
.ps-ui .ps-card:hover { box-shadow: var(--ps-shadow-md); transform: translateY(-5px); border-color: var(--ps-color-border-strong); }
.ps-ui .ps-card-media { position: relative; display: block; width: 100%; aspect-ratio: 4/5; overflow: hidden; padding: 0; }
.ps-ui .ps-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ps-ease); }
.ps-ui .ps-card:hover .ps-card-media img { transform: scale(1.06); }
.ps-ui .ps-card-media::after {
  content: "Apri scheda";
  position: absolute;
  left: 50%; bottom: 18px;
  transform: translate(-50%, 14px);
  background: #fff;
  color: var(--ps-color-primary);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity var(--ps-transition-normal) var(--ps-ease), transform var(--ps-transition-normal) var(--ps-ease);
  box-shadow: var(--ps-shadow-md);
  pointer-events: none;
}
.ps-ui .ps-card:hover .ps-card-media::after { opacity: 1; transform: translate(-50%, 0); }
.ps-ui .ps-chip-min {
  position: absolute; top: 12px; left: 12px;
  background: rgba(6,13,28,.82);
  backdrop-filter: blur(6px);
  color: #fff;
}
.ps-ui .ps-price-chip {
  position: absolute;
  right: 12px; bottom: 12px;
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--ps-font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ps-color-primary);
  box-shadow: var(--ps-shadow-sm);
}
.ps-ui .ps-card-body { padding: var(--ps-space-4); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ps-ui .ps-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ps-ui .ps-card-cat { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ps-color-accent); font-weight: 700; }
.ps-ui .ps-card-name { font-family: var(--ps-font-display); font-size: 16px; font-weight: 700; line-height: 1.3; min-height: 2.6em; }
.ps-ui .ps-card-bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; }
.ps-ui .ps-price { font-family: var(--ps-font-display); font-weight: 700; font-size: 16px; }
.ps-ui .ps-dots { display: inline-flex; gap: 5px; }
.ps-ui .ps-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--c, #ccc); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }

/* ---------- Barra carrello mobile fissa ---------- */
.ps-ui .ps-cart-fab { display: none; }

/* ============================================================
   SCHEDA PRODOTTO (large dialog)
   ============================================================ */
.ps-ui .ps-product-modal {
  top: 50%; left: 50%;
  transform: translate(-50%, -46%) scale(.98);
  width: min(1060px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border-radius: var(--ps-radius-lg);
  color: var(--ps-color-text);
}
.ps-ui .ps-product-modal.is-open { transform: translate(-50%, -50%) scale(1); }
.ps-ui .ps-product-modal .ps-dialog-close { background: rgba(255,255,255,.2); color: #fff; }
.ps-ui .ps-pm-grid { display: grid; grid-template-columns: 1fr 1fr; }
.ps-ui .ps-pm-gallery {
  background:
    radial-gradient(500px 300px at 70% 20%, rgba(46,107,255,.25), transparent 60%),
    var(--ps-color-primary-dark);
  padding: var(--ps-space-6);
  display: flex; flex-direction: column; gap: var(--ps-space-3);
}
.ps-ui .ps-pm-mainimg { aspect-ratio: 1/1; border-radius: var(--ps-radius-md); overflow: hidden; }
.ps-ui .ps-pm-mainimg img { width: 100%; height: 100%; object-fit: cover; }
.ps-ui .ps-pm-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ps-ui .ps-pm-thumbs button {
  aspect-ratio: 1/1; border-radius: var(--ps-radius-sm); overflow: hidden;
  border: 2px solid transparent; opacity: .6; transition: opacity var(--ps-transition-fast), border-color var(--ps-transition-fast); padding: 0;
}
.ps-ui .ps-pm-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.ps-ui .ps-pm-thumbs button:hover { opacity: 1; }
.ps-ui .ps-pm-thumbs button.is-active { border-color: var(--ps-color-accent-2); opacity: 1; }

.ps-ui .ps-pm-config { padding: var(--ps-space-6); display: flex; flex-direction: column; gap: var(--ps-space-4); }
.ps-ui .ps-pm-toprow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-right: 48px; }
.ps-ui .ps-pm-title { font-family: var(--ps-font-display); font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: -.01em; }
.ps-ui .ps-pm-price { font-family: var(--ps-font-display); font-weight: 800; font-size: 24px; color: var(--ps-color-accent); }
.ps-ui .ps-pm-desc { font-size: 14px; color: var(--ps-color-muted); line-height: 1.65; }
.ps-ui .ps-opt-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ps-color-text); font-weight: 700; margin-bottom: 8px; display: block; }
.ps-ui .ps-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-ui .ps-swatch {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 9px;
  border: 1.5px solid var(--ps-color-border-strong);
  border-radius: 999px; font-size: 13px; min-height: 44px;
  transition: border-color var(--ps-transition-fast), box-shadow var(--ps-transition-fast);
}
.ps-ui .ps-swatch i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); flex: none; }
.ps-ui .ps-swatch:hover { border-color: var(--ps-color-accent); }
.ps-ui .ps-swatch.is-active { border-color: var(--ps-color-accent); box-shadow: 0 0 0 3px rgba(46,107,255,.16); }

.ps-ui .ps-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-ui .ps-size {
  min-width: 50px; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--ps-color-border-strong);
  border-radius: var(--ps-radius-md); font-weight: 700; font-size: 13px;
  transition: all var(--ps-transition-fast) var(--ps-ease);
}
.ps-ui .ps-size:hover { border-color: var(--ps-color-accent); color: var(--ps-color-accent); }
.ps-ui .ps-size.is-active { background: var(--ps-color-accent); border-color: var(--ps-color-accent); color: #fff; box-shadow: var(--ps-glow); }
.ps-ui .ps-minnote { font-family: var(--ps-font-mono); font-size: 12px; color: var(--ps-color-warning); }

.ps-ui .ps-qty-row { display: flex; gap: var(--ps-space-3); align-items: stretch; flex-wrap: wrap; }
.ps-ui .ps-qty { display: flex; align-items: center; border: 1.5px solid var(--ps-color-border-strong); border-radius: var(--ps-radius-md); overflow: hidden; }
.ps-ui .ps-qty button { width: 46px; height: 48px; font-size: 18px; font-weight: 700; transition: background var(--ps-transition-fast); }
.ps-ui .ps-qty button:hover { background: var(--ps-color-panel); }
.ps-ui .ps-qty output { width: 56px; text-align: center; font-family: var(--ps-font-mono); font-weight: 500; }
.ps-ui .ps-upload {
  flex: 1; min-width: 180px;
  border: 1.5px dashed var(--ps-color-border-strong);
  border-radius: var(--ps-radius-md);
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px; color: var(--ps-color-muted); font-size: 13px; min-height: 48px;
  transition: border-color var(--ps-transition-fast), color var(--ps-transition-fast);
}
.ps-ui .ps-upload:hover { border-color: var(--ps-color-accent); color: var(--ps-color-accent); }
.ps-ui .ps-pm-cta { display: flex; gap: 10px; margin-top: var(--ps-space-2); }

/* ============================================================
   CARRELLO (drawer, raggruppato per modello)
   ============================================================ */
.ps-ui .ps-cart {
  top: 0; right: 0; height: 100vh;
  width: min(460px, 100vw);
  transform: translateX(105%);
  display: flex; flex-direction: column;
}
.ps-ui .ps-cart.is-open { transform: translateX(0); }
.ps-ui .ps-cart .ps-dialog-close { background: var(--ps-color-panel); color: var(--ps-color-primary); }
.ps-ui .ps-cart-head {
  padding: var(--ps-space-5);
  background: var(--ps-color-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: space-between;
}
.ps-ui .ps-cart-head h2 { font-family: var(--ps-font-display); font-weight: 800; font-size: 20px; }
.ps-ui .ps-cart-head .ps-count { color: rgba(255,255,255,.65); }
.ps-ui .ps-cart-body { flex: 1; overflow-y: auto; padding: var(--ps-space-5); display: flex; flex-direction: column; gap: var(--ps-space-4); background: var(--ps-color-background); }
.ps-ui .ps-cart-group { background: var(--ps-color-surface); border: 1px solid var(--ps-color-border); border-radius: var(--ps-radius-lg); overflow: hidden; box-shadow: var(--ps-shadow-sm); }
.ps-ui .ps-cart-group-head { padding: 14px var(--ps-space-4); border-bottom: 1px solid var(--ps-color-border); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ps-ui .ps-cart-group-head h3 { font-family: var(--ps-font-display); font-size: 15px; font-weight: 700; }
.ps-ui .ps-cart-variants { display: flex; flex-direction: column; }
.ps-ui .ps-variant {
  display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center;
  padding: 10px var(--ps-space-4);
  border-bottom: 1px solid var(--ps-color-border);
  font-size: 13px;
}
.ps-ui .ps-variant:last-child { border-bottom: 0; }
.ps-ui .ps-variant i { width: 14px; height: 14px; border-radius: 50%; background: var(--c, #ccc); box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.ps-ui .ps-variant .ps-vmeta { display: flex; flex-direction: column; gap: 2px; }
.ps-ui .ps-variant .ps-vqty { color: var(--ps-color-muted); font-size: 12px; }
.ps-ui .ps-variant .ps-vsub { font-weight: 700; font-variant-numeric: tabular-nums; }
.ps-ui .ps-cart-foot { border-top: 1px solid var(--ps-color-border); padding: var(--ps-space-5); display: flex; flex-direction: column; gap: 10px; background: var(--ps-color-surface); }
.ps-ui .ps-sumrow { display: flex; justify-content: space-between; font-size: 14px; }
.ps-ui .ps-sumrow span:last-child { font-variant-numeric: tabular-nums; font-weight: 700; }
.ps-ui .ps-sumrow.ps-discount span:last-child { color: var(--ps-color-success); }
.ps-ui .ps-sumrow.ps-grand {
  background: var(--ps-color-primary);
  color: #fff;
  margin: 6px -8px 0;
  padding: 14px 16px;
  border-radius: var(--ps-radius-md);
  font-weight: 700; font-size: 15px;
}
.ps-ui .ps-sumrow.ps-grand span:last-child { color: var(--ps-color-accent-2); }

/* ============================================================
   CHECKOUT / VERIFICA ORDINE
   ============================================================ */
.ps-ui .ps-checkout { max-width: 1140px; margin: 0 auto; }
.ps-ui .ps-steps { display: flex; gap: 10px; margin-bottom: var(--ps-space-5); flex-wrap: wrap; }
.ps-ui .ps-step {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--ps-color-surface);
  border: 1px solid var(--ps-color-border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ps-color-muted);
}
.ps-ui .ps-step b {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ps-color-panel);
  display: grid; place-items: center;
  font-family: var(--ps-font-mono); font-size: 11px;
}
.ps-ui .ps-step.is-active { border-color: var(--ps-color-accent); color: var(--ps-color-accent); box-shadow: var(--ps-glow); }
.ps-ui .ps-step.is-active b { background: var(--ps-color-accent); color: #fff; }
.ps-ui .ps-checkout h2 { font-family: var(--ps-font-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.01em; margin: var(--ps-space-2) 0 var(--ps-space-6); }
.ps-ui .ps-checkout-grid { display: grid; grid-template-columns: 1.2fr .9fr; gap: var(--ps-space-6); align-items: start; }
.ps-ui .ps-co-stack { display: flex; flex-direction: column; gap: var(--ps-space-5); }
.ps-ui .ps-coupon-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.ps-ui .ps-coupon-row .ps-field { flex: 1; min-width: 200px; }
.ps-ui .ps-coupon-feedback { font-size: 13px; margin-top: 8px; display: none; }
.ps-ui .ps-coupon-feedback.is-ok { display: flex; gap: 6px; color: var(--ps-color-success); font-weight: 600; }
.ps-ui .ps-coupon-feedback.is-ko { display: flex; gap: 6px; color: var(--ps-color-danger); font-weight: 600; }

/* Riepilogo scuro ad alto contrasto */
.ps-ui .ps-riepilogo {
  background: var(--ps-color-primary);
  border-radius: var(--ps-radius-lg);
  overflow: hidden;
  color: #fff;
  box-shadow: var(--ps-shadow-md);
}
.ps-ui .ps-riepilogo-head { padding: var(--ps-space-5); border-bottom: 1px solid rgba(255,255,255,.14); }
.ps-ui .ps-riepilogo-head .ps-panel-title { color: #fff; margin: 0; }
.ps-ui .ps-riepilogo .ps-sumrow { padding: 13px var(--ps-space-5); border-bottom: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.85); }
.ps-ui .ps-riepilogo .ps-sumrow span:last-child { color: #fff; }
.ps-ui .ps-riepilogo .ps-discount span:last-child { color: var(--ps-color-accent-2); }
.ps-ui .ps-riepilogo .ps-grand { border-radius: 0; margin: 0; padding: 16px var(--ps-space-5); background: rgba(46,107,255,.16); color: #fff; }
.ps-ui .ps-riepilogo .ps-grand span:last-child { color: var(--ps-color-accent-2); font-family: var(--ps-font-display); font-size: 20px; }
.ps-ui .ps-co-confirm {
  border: 1px solid var(--ps-color-border);
  border-radius: var(--ps-radius-lg);
  padding: var(--ps-space-8) var(--ps-space-6);
  text-align: center;
  background: var(--ps-color-surface);
  display: flex; flex-direction: column; align-items: center; gap: var(--ps-space-3);
  box-shadow: var(--ps-shadow-sm);
}
.ps-ui .ps-checkmark {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--ps-color-accent);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--ps-glow);
  margin-bottom: 6px;
}
.ps-ui .ps-checkmark svg { width: 30px; height: 30px; }
.ps-ui .ps-ordernum { font-family: var(--ps-font-mono); font-size: 14px; color: var(--ps-color-accent); font-weight: 500; }

/* ============================================================
   RESPONSIVE CATALOGO
   ============================================================ */
@media (max-width: 1200px) { .ps-ui .ps-grid { grid-template-columns: repeat(3, 1fr); gap: var(--ps-space-4); } }
@media (max-width: 1100px) {
  .ps-ui .ps-hero { grid-template-columns: 1fr; padding: var(--ps-space-7) var(--ps-space-5); }
  .ps-ui .ps-hero-media { min-height: 300px; }
}
@media (max-width: 992px) {
  .ps-ui .ps-pm-grid { grid-template-columns: 1fr; }
  .ps-ui .ps-checkout-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .ps-ui .ps-sidebar {
    position: fixed; left: 0; top: 0; height: 100vh; z-index: 110;
    transform: translateX(-105%);
    transition: transform var(--ps-transition-normal) var(--ps-ease);
    box-shadow: var(--ps-shadow-lg);
  }
  .ps-ui .ps-sidebar.is-open-mobile { transform: translateX(0); }
  .ps-ui .ps-sidebar.is-collapsed { width: var(--ps-sidebar-w); }
  .ps-ui .ps-sidebar.is-collapsed .ps-rail-brand { display: none; }
  .ps-ui .ps-sidebar.is-collapsed .ps-sidebar-head,
  .ps-ui .ps-sidebar.is-collapsed .ps-sidebar-nav { display: block; }
  .ps-ui .ps-cart-fab {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
    background: var(--ps-color-accent); color: #fff;
    align-items: center; justify-content: center; gap: 12px;
    padding: 16px; font-weight: 700;
    box-shadow: var(--ps-shadow-lg), var(--ps-glow);
  }
  .ps-ui .ps-page-pad { padding-bottom: 76px; }
}
@media (max-width: 640px) {
  .ps-ui .ps-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ps-ui .ps-pm-config, .ps-ui .ps-pm-gallery { padding: var(--ps-space-4); }
  .ps-ui .ps-hero { padding: var(--ps-space-6) var(--ps-space-4); }
  .ps-ui .ps-hero-img { position: relative; width: 100%; top: 0; }
  .ps-ui .ps-hero-media { min-height: 0; }
}