/* ============================================
   TweakIT Shop — stile marketplace (catalogo, scheda prodotto, configuratore, carrello)
   ============================================ */

:root {
  --sh-bg: #0b0e13;
  --sh-surface: #141922;
  --sh-surface-2: #1b2230;
  --sh-border: rgba(255, 255, 255, 0.08);
  --sh-border-strong: rgba(255, 255, 255, 0.16);
  --sh-text: #f1f5f9;
  --sh-muted: #94a3b8;
  --sh-primary: #fff600;
  --sh-primary-ink: #0e1116;
  --sh-red: #ed254e;
  --sh-green: #4ade80;
  --sh-amber: #fbbf24;
  --sh-radius: 12px;
  --sh-font: 'DM Sans', system-ui, sans-serif;
  --sh-head: 'Orbitron', 'DM Sans', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body.shop {
  background: var(--sh-bg);
  color: var(--sh-text);
  font-family: var(--sh-font);
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
:where(.shop) a { color: inherit; text-decoration: none; }
.shop img { max-width: 100%; display: block; }
:where(.shop) :is(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.shop) button { cursor: pointer; border: 0; background: none; }
.shop main { flex: 1; }
.sh-wrap { max-width: 1320px; margin: 0 auto; padding: 0 16px; }
.sh-hidden, .shop [hidden] { display: none !important; }
.sh-muted { color: var(--sh-muted); }

/* ---------- Header (stile marketplace) ---------- */
#shopHeader { position: sticky; top: 0; z-index: 50; }
.sh-header { background: #07090d; border-bottom: 1px solid var(--sh-border); }
.sh-header__top { display: flex; align-items: center; gap: 16px; padding: 10px 16px; max-width: 1320px; margin: 0 auto; }
.sh-logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sh-logo img.mark { width: 34px; height: 34px; }
.sh-logo img.word { height: 22px; width: auto; }
.sh-logo small { font-family: var(--sh-head); font-size: 0.62rem; letter-spacing: 0.18em; color: var(--sh-primary); border: 1px solid rgba(255,246,0,.4); border-radius: 4px; padding: 1px 5px; }
.sh-search { flex: 1; display: flex; min-width: 0; border-radius: 10px; border: 2px solid transparent; background: #fff; position: relative; }
.sh-search:focus-within { border-color: var(--sh-primary); }
.sh-search select { background: #e8ebf0; color: #111; border: 0; padding: 0 10px; font-size: 0.85rem; max-width: 140px; border-radius: 8px 0 0 8px; }
.sh-search input { flex: 1; min-width: 0; border: 0; padding: 10px 12px; color: #111; background: #fff; outline: none; }
.sh-search button { background: var(--sh-primary); color: var(--sh-primary-ink); padding: 0 16px; display: flex; align-items: center; border-radius: 0 8px 8px 0; }
.sh-head-links { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sh-head-link { display: flex; flex-direction: column; line-height: 1.15; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px; font-size: 0.78rem; color: var(--sh-muted); }
.sh-head-link strong { color: var(--sh-text); font-size: 0.9rem; }
.sh-head-link:hover { border-color: var(--sh-border-strong); }
.sh-cart-link { flex-direction: row; align-items: center; gap: 10px; position: relative; }
.sh-cart-link strong { font-size: .95rem; }
.sh-cart-icon { position: relative; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--sh-border); transition: background .2s, border-color .2s; }
.sh-cart-link:hover .sh-cart-icon { background: rgba(255,246,0,.1); border-color: rgba(255,246,0,.45); }
.sh-cart-icon svg { width: 24px; height: 24px; color: var(--sh-text); }
.sh-cart-link:hover .sh-cart-icon svg { color: var(--sh-primary); }
.sh-cart-badge { position: absolute; top: -7px; right: -8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--sh-primary); color: var(--sh-primary-ink); font-size: .72rem; font-weight: 800; line-height: 20px; text-align: center; border: 2px solid #07090d; box-sizing: content-box; transform: scale(1); transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s; }
.sh-cart-badge[data-count="0"] { transform: scale(0); opacity: 0; }
.sh-cart-icon.is-bump { animation: sh-cart-wiggle .6s cubic-bezier(.36,.07,.19,.97); }
.sh-cart-icon.is-bump .sh-cart-badge { animation: sh-badge-pop .5s cubic-bezier(.34,1.56,.64,1); }
.sh-cart-plus { position: absolute; left: 50%; top: -4px; transform: translateX(-50%); color: var(--sh-primary); font-weight: 800; font-size: .8rem; pointer-events: none; animation: sh-plus-up .9s ease-out forwards; }
.sh-fly { position: fixed; z-index: 200; width: 72px; height: 72px; border-radius: 14px; overflow: hidden; pointer-events: none; box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 2px var(--sh-primary); background: #0b0e13; will-change: transform; }
.sh-fly img { width: 100%; height: 100%; object-fit: cover; }
.sh-fly__dot { display: block; width: 100%; height: 100%; background: radial-gradient(circle, var(--sh-primary) 35%, transparent 36%); }
@keyframes sh-cart-wiggle {
  0% { transform: scale(1) rotate(0); }
  25% { transform: scale(1.18) rotate(-12deg); }
  50% { transform: scale(1.1) rotate(9deg); }
  75% { transform: scale(1.04) rotate(-4deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes sh-badge-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes sh-plus-up { 0% { opacity: 0; transform: translate(-50%, 0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -28px); } }
@media (prefers-reduced-motion: reduce) { .sh-cart-icon.is-bump, .sh-cart-icon.is-bump .sh-cart-badge, .sh-cart-plus { animation: none; } .sh-cart-badge { transition: none; } }
@media (max-width: 760px) { .sh-cart-link strong { display: none; } }
.sh-avatar { width: 28px; height: 28px; border-radius: 50%; }
.sh-subnav { background: var(--sh-surface); border-top: 1px solid var(--sh-border); }
.sh-subnav ul { list-style: none; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 0 16px; max-width: 1320px; margin: 0 auto; }
.sh-subnav ul::-webkit-scrollbar { display: none; }
.sh-subnav a { display: block; padding: 9px 10px; font-size: 0.88rem; white-space: nowrap; border-bottom: 2px solid transparent; color: #cbd5e1; }
.sh-subnav a:hover, .sh-subnav a.is-active { color: var(--sh-primary); border-bottom-color: var(--sh-primary); }
.sh-subnav a.sh-subnav__cta { color: var(--sh-primary); font-weight: 700; }

@media (max-width: 760px) {
  .sh-header__top { flex-wrap: wrap; gap: 10px; }
  .sh-search { order: 3; flex-basis: 100%; }
  .sh-search select { display: none; }
  .sh-search input { border-radius: 8px 0 0 8px; }
  .sh-logo img.word { display: none; }
  .sh-head-links { margin-left: auto; }
  .sh-head-link.sh-hide-sm { display: none; }
}

/* ---------- Bottoni ---------- */
.sh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 999px; font-weight: 700; font-size: 0.95rem; transition: background .15s, transform .1s, color .15s; text-align: center; }
.sh-btn:active { transform: translateY(1px); }
.sh-btn--primary { background: var(--sh-primary); color: var(--sh-primary-ink); }
.sh-btn--primary:hover { background: #fffb7a; }
.sh-btn--buy { background: #ff9f1c; color: #111; }
.sh-btn--buy:hover { background: #ffb44d; }
.sh-btn--ghost { border: 1px solid var(--sh-border-strong); color: var(--sh-text); }
.sh-btn--ghost:hover { border-color: var(--sh-primary); color: var(--sh-primary); }
.sh-btn--block { width: 100%; }
.sh-btn[disabled] { opacity: .45; cursor: not-allowed; }
.sh-link { color: #7dd3fc; }
.sh-link:hover { text-decoration: underline; }

/* ---------- Hero / promo ---------- */
.sh-hero { position: relative; overflow: hidden; background: radial-gradient(1200px 400px at 85% -10%, rgba(255,246,0,.18), transparent 60%), linear-gradient(180deg, #11151d, var(--sh-bg)); border-bottom: 1px solid var(--sh-border); }
.sh-hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: center; padding: 40px 16px 36px; max-width: 1320px; margin: 0 auto; }
.sh-eyebrow { font-family: var(--sh-head); font-size: .72rem; letter-spacing: .2em; color: var(--sh-primary); text-transform: uppercase; }
.sh-hero h1 { font-family: var(--sh-head); font-size: clamp(1.7rem, 4vw, 2.8rem); line-height: 1.12; margin: 10px 0 12px; text-wrap: balance; }
.sh-hero h1 span { color: var(--sh-primary); }
.sh-hero p { color: #cbd5e1; max-width: 560px; }
.sh-hero__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.sh-hero__art { display: flex; justify-content: center; gap: 10px; }
.sh-hero__art svg { width: 44%; max-width: 220px; filter: drop-shadow(0 20px 40px rgba(0,0,0,.5)); }
.sh-hero__art svg:nth-child(2) { transform: translateY(18px); }
.sh-perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 1320px; margin: 0 auto; padding: 0 16px 24px; }
.sh-perk { display: flex; gap: 10px; align-items: center; background: var(--sh-surface); border: 1px solid var(--sh-border); border-radius: 10px; padding: 10px 12px; font-size: .85rem; color: #cbd5e1; }
.sh-perk svg { width: 22px; height: 22px; color: var(--sh-primary); flex-shrink: 0; }
@media (max-width: 860px) {
  .sh-hero__inner { grid-template-columns: 1fr; padding-top: 28px; }
  .sh-hero__art { display: none; }
  .sh-perks { grid-template-columns: 1fr 1fr; }
}

.sh-promos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px auto 8px; }
.sh-promo { position: relative; display: flex; justify-content: space-between; gap: 12px; overflow: hidden; border-radius: var(--sh-radius); padding: 22px; border: 1px solid var(--sh-border); background: var(--sh-surface); min-height: 160px; transition: border-color .15s; }
.sh-promo:hover { border-color: var(--sh-primary); }
.sh-promo h2 { font-family: var(--sh-head); font-size: 1.15rem; margin: 6px 0; }
.sh-promo p { color: var(--sh-muted); font-size: .92rem; max-width: 340px; }
.sh-promo .sh-link { display: inline-block; margin-top: 10px; font-weight: 700; }
.sh-promo svg.art { width: 120px; flex-shrink: 0; align-self: center; }
.sh-promo--config { background: linear-gradient(135deg, rgba(255,246,0,.12), transparent 55%), var(--sh-surface); }
@media (max-width: 760px) { .sh-promos { grid-template-columns: 1fr; } .sh-promo svg.art { width: 80px; } }

/* ---------- Catalogo ---------- */
.sh-catalog { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 24px 16px 48px; max-width: 1320px; margin: 0 auto; }
.sh-filters { position: sticky; top: 130px; align-self: start; display: flex; flex-direction: column; gap: 20px; font-size: .92rem; }
.sh-filters h3 { font-size: .95rem; margin-bottom: 8px; }
.sh-filters label { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; color: #cbd5e1; }
.sh-filters input[type="radio"], .sh-filters input[type="checkbox"] { accent-color: var(--sh-primary); width: 16px; height: 16px; }
.sh-filters input[type="range"] { width: 100%; accent-color: var(--sh-primary); }
.sh-results-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--sh-border); }
.sh-results-bar select { background: var(--sh-surface); border: 1px solid var(--sh-border-strong); border-radius: 8px; padding: 7px 10px; }
.sh-filter-toggle { display: none; }
@media (max-width: 860px) {
  .sh-catalog { grid-template-columns: 1fr; }
  .sh-filters { position: static; display: none; background: var(--sh-surface); border: 1px solid var(--sh-border); border-radius: var(--sh-radius); padding: 16px; }
  .sh-filters.is-open { display: flex; }
  .sh-filter-toggle { display: inline-flex; }
}

.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.sh-card { display: flex; flex-direction: column; background: var(--sh-surface); border: 1px solid var(--sh-border); border-radius: var(--sh-radius); overflow: hidden; transition: border-color .15s, transform .15s; }
.sh-card:hover { border-color: var(--sh-border-strong); transform: translateY(-2px); }
.sh-card__media { position: relative; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--accent, #fff600) 22%, transparent), transparent 65%), #0f131a; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 16px; }
.sh-card__media svg, .sh-card__media img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.sh-badge { position: absolute; top: 10px; left: 10px; background: var(--sh-red); color: #fff; font-size: .72rem; font-weight: 800; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: .04em; }
.sh-card__body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sh-card__cat { font-size: .75rem; color: var(--sh-muted); text-transform: uppercase; letter-spacing: .08em; }
.sh-card__title { font-family: var(--sh-head); font-size: 1.02rem; }
.sh-card__title a:hover { color: var(--sh-primary); }
.sh-card__tag { color: #cbd5e1; font-size: .9rem; }
.sh-specs-mini { list-style: none; font-size: .82rem; color: var(--sh-muted); display: grid; gap: 2px; margin: 4px 0; }
.sh-specs-mini li { display: flex; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-specs-mini b { color: #cbd5e1; font-weight: 600; min-width: 38px; }
.sh-price { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.sh-price sup { font-size: .55em; font-weight: 700; vertical-align: .7em; margin-right: 1px; }
.sh-price-note { font-size: .8rem; color: var(--sh-green); }
.sh-stock { font-size: .82rem; color: var(--sh-green); }
.sh-stock--out { color: var(--sh-red); }
.sh-card__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; }
.sh-card__actions .sh-btn { flex: 1; padding: 9px 10px; font-size: .86rem; }
.sh-empty { text-align: center; color: var(--sh-muted); padding: 48px 16px; border: 1px dashed var(--sh-border-strong); border-radius: var(--sh-radius); }

/* ---------- Scheda prodotto ---------- */
.sh-breadcrumb { font-size: .85rem; color: var(--sh-muted); padding: 14px 0; }
.sh-breadcrumb a:hover { color: var(--sh-primary); }
.sh-product { display: grid; grid-template-columns: 1.1fr 1fr 320px; gap: 28px; align-items: start; padding-bottom: 32px; }
.sh-product__media { position: sticky; top: 130px; border-radius: var(--sh-radius); border: 1px solid var(--sh-border); background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--accent, #fff600) 25%, transparent), transparent 65%), #0f131a; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 32px; }
.sh-product__media svg, .sh-product__media img { height: 100%; width: auto; object-fit: contain; }
.sh-product h1 { font-family: var(--sh-head); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.2; }
.sh-product__tagline { color: #cbd5e1; margin: 6px 0 14px; font-size: 1.05rem; }
.sh-product hr { border: 0; border-top: 1px solid var(--sh-border); margin: 16px 0; }
.sh-highlights { list-style: none; display: grid; gap: 6px; }
.sh-highlights li { display: flex; gap: 8px; }
.sh-highlights li::before { content: '✓'; color: var(--sh-primary); font-weight: 800; }
.sh-spec-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.sh-spec-table th, .sh-spec-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--sh-border); vertical-align: top; }
.sh-spec-table th { color: var(--sh-muted); font-weight: 600; width: 34%; }
.sh-spec-table td small { display: block; color: var(--sh-muted); }
.sh-buybox { position: sticky; top: 130px; border: 1px solid var(--sh-border-strong); border-radius: var(--sh-radius); padding: 18px; background: var(--sh-surface); display: flex; flex-direction: column; gap: 10px; }
.sh-buybox select { background: var(--sh-surface-2); border: 1px solid var(--sh-border-strong); border-radius: 8px; padding: 7px 10px; }
.sh-buybox__row { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; }
.sh-buybox__secure { font-size: .8rem; color: var(--sh-muted); display: grid; gap: 4px; }
@media (max-width: 1080px) {
  .sh-product { grid-template-columns: 1fr 1fr; }
  .sh-buybox { position: static; grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .sh-product { grid-template-columns: 1fr; }
  .sh-product__media { position: static; aspect-ratio: 4/3; }
}

/* ---------- Configuratore ---------- */
.sh-config { display: grid; grid-template-columns: 250px 1fr 320px; gap: 20px; padding: 20px 16px 48px; max-width: 1320px; margin: 0 auto; align-items: start; }
.sh-config > *, .sh-steps li, .sh-summary__lines li { min-width: 0; }
.sh-steps { position: sticky; top: 130px; list-style: none; display: grid; gap: 6px; }
.sh-step { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--sh-border); background: var(--sh-surface); width: 100%; text-align: left; }
.sh-step:hover { border-color: var(--sh-border-strong); }
.sh-step.is-active { border-color: var(--sh-primary); box-shadow: inset 3px 0 0 var(--sh-primary); }
.sh-step__icon { width: 30px; height: 30px; flex-shrink: 0; color: var(--sh-muted); }
.sh-step.is-done .sh-step__icon { color: var(--sh-primary); }
.sh-step__txt { min-width: 0; flex: 1; }
.sh-step__label { display: flex; font-weight: 700; font-size: .9rem; display: flex; justify-content: space-between; gap: 6px; }
.sh-step__label em { font-style: normal; font-size: .72rem; color: var(--sh-muted); font-weight: 500; }
.sh-step__value { display: block; font-size: .78rem; color: var(--sh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-step.has-error { border-color: var(--sh-red); }
.sh-options-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sh-options-head h2 { font-family: var(--sh-head); font-size: 1.25rem; }
.sh-options-head label { font-size: .85rem; color: var(--sh-muted); display: flex; gap: 6px; align-items: center; }
.sh-options-head input[type="checkbox"] { accent-color: var(--sh-primary); }
.sh-options { display: grid; gap: 10px; }
.sh-option { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--sh-border); background: var(--sh-surface); text-align: left; width: 100%; transition: border-color .15s; }
.sh-option:hover:not([disabled]) { border-color: var(--sh-border-strong); }
.sh-option.is-selected { border-color: var(--sh-primary); background: linear-gradient(90deg, rgba(255,246,0,.07), transparent 60%), var(--sh-surface); }
.sh-option[disabled] { opacity: .5; cursor: not-allowed; }
.sh-option__icon { width: 52px; height: 52px; padding: 10px; border-radius: 10px; background: var(--sh-surface-2); color: var(--sh-primary); }
.sh-option__name { display: block; font-weight: 700; }
.sh-option > span { min-width: 0; }
.sh-option__name small { color: var(--sh-muted); font-weight: 500; margin-right: 4px; }
.sh-option__specs { font-size: .82rem; color: var(--sh-muted); display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; }
.sh-option__warn { display: block; font-size: .8rem; color: #fca5a5; margin-top: 4px; }
.sh-option__price { font-weight: 800; white-space: nowrap; text-align: right; }
.sh-option__price small { display: block; font-weight: 500; color: var(--sh-muted); font-size: .75rem; }
.sh-option--none { grid-template-columns: 52px 1fr; }
.sh-summary { min-width: 0; position: sticky; top: 130px; border: 1px solid var(--sh-border-strong); border-radius: var(--sh-radius); background: var(--sh-surface); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.sh-summary__art { height: 150px; display: flex; justify-content: center; }
.sh-summary__art svg { height: 100%; width: auto; }
.sh-summary h3 { font-family: var(--sh-head); font-size: 1rem; }
.sh-summary input[type="text"] { background: var(--sh-surface-2); border: 1px solid var(--sh-border-strong); border-radius: 8px; padding: 8px 10px; width: 100%; }
.sh-summary__lines { list-style: none; font-size: .83rem; display: grid; gap: 4px; }
.sh-summary__lines li { display: flex; justify-content: space-between; gap: 8px; }
.sh-summary__lines li span:first-child { min-width: 0; color: var(--sh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-meter { height: 8px; border-radius: 999px; background: var(--sh-surface-2); overflow: hidden; }
.sh-meter > span { display: block; height: 100%; background: var(--sh-green); transition: width .3s; }
.sh-meter.is-warn > span { background: var(--sh-amber); }
.sh-meter.is-bad > span { background: var(--sh-red); }
.sh-alerts { display: grid; gap: 6px; font-size: .82rem; }
.sh-alert { padding: 8px 10px; border-radius: 8px; border: 1px solid; }
.sh-alert--error { border-color: rgba(237,37,78,.5); background: rgba(237,37,78,.1); color: #fecdd3; }
.sh-alert--warn { border-color: rgba(251,191,36,.45); background: rgba(251,191,36,.08); color: #fde68a; }
.sh-alert--ok { border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.08); color: #bbf7d0; }
.sh-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--sh-border); padding-top: 12px; }
.sh-total > span:first-child { color: var(--sh-muted); font-size: .85rem; }
@media (max-width: 1100px) {
  .sh-config { grid-template-columns: 1fr 300px; }
  .sh-steps { position: static; grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
  .sh-config { grid-template-columns: 1fr; }
  .sh-steps { grid-template-columns: repeat(2, 1fr); }
  .sh-summary { position: static; }
  .sh-option { grid-template-columns: 40px 1fr; }
  .sh-option__icon { width: 40px; height: 40px; padding: 7px; }
  .sh-option__price { grid-column: 2; text-align: left; }
}

/* ---------- Carrello / checkout ---------- */
.sh-page-title { font-family: var(--sh-head); font-size: 1.6rem; margin: 22px 0 16px; }
.sh-cart { display: grid; grid-template-columns: 1fr 440px; gap: 24px; align-items: start; padding-bottom: 48px; }
.sh-panel { background: var(--sh-surface); border: 1px solid var(--sh-border); border-radius: var(--sh-radius); padding: 18px; }
.sh-cart-line { display: grid; grid-template-columns: 110px 1fr auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--sh-border); }
.sh-cart-line:last-child { border-bottom: 0; }
.sh-cart-line__media { height: 110px; border-radius: 10px; background: #0f131a; display: flex; justify-content: center; align-items: center; padding: 8px; }
.sh-cart-line__media svg { height: 100%; width: auto; }
.sh-cart-line h3 { font-size: 1.02rem; }
.sh-cart-line details { font-size: .82rem; color: var(--sh-muted); margin-top: 4px; }
.sh-cart-line details ul { list-style: none; margin-top: 4px; display: grid; gap: 2px; }
.sh-cart-line__ctrl { display: flex; gap: 12px; align-items: center; margin-top: 8px; font-size: .85rem; flex-wrap: wrap; }
.sh-cart-line__ctrl select { background: var(--sh-surface-2); border: 1px solid var(--sh-border-strong); border-radius: 8px; padding: 4px 8px; }
.sh-cart-line__ctrl button { color: #7dd3fc; }
.sh-cart-line__ctrl button:hover { text-decoration: underline; }
.sh-cart-line__price { font-weight: 800; font-size: 1.1rem; text-align: right; white-space: nowrap; }
.sh-form { display: grid; gap: 10px; }
.sh-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sh-form label { display: grid; gap: 4px; font-size: .82rem; color: var(--sh-muted); }
.sh-form input, .sh-form textarea { background: var(--sh-surface-2); border: 1px solid var(--sh-border-strong); border-radius: 8px; padding: 9px 10px; color: var(--sh-text); width: 100%; }
.sh-form input:focus, .sh-form textarea:focus { outline: 2px solid var(--sh-primary); outline-offset: -1px; }
.sh-orders { display: grid; gap: 10px; margin-top: 12px; }
.sh-order { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--sh-border); border-radius: 10px; background: var(--sh-surface); font-size: .9rem; }
.sh-status { font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--sh-surface-2); text-transform: uppercase; letter-spacing: .04em; }
.sh-status--completed { color: var(--sh-green); }
.sh-status--pending { color: var(--sh-amber); }
.sh-status--shipped { color: #60a5fa; }
.sh-status--cancelled { color: var(--sh-red); }
@media (max-width: 900px) { .sh-cart { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .sh-cart-line { grid-template-columns: 76px 1fr; }
  .sh-cart-line__media { height: 76px; }
  .sh-cart-line__price { grid-column: 2; text-align: left; }
  .sh-form .row2 { grid-template-columns: 1fr; }
}

/* ---------- Footer & toast ---------- */
.sh-footer { border-top: 1px solid var(--sh-border); background: #07090d; color: var(--sh-muted); font-size: .85rem; }
.sh-footer .sh-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 22px; padding-bottom: 22px; }
.sh-footer nav { display: flex; gap: 14px; flex-wrap: wrap; }
.sh-footer a:hover { color: var(--sh-primary); }
.sh-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 100; background: var(--sh-surface-2); border: 1px solid var(--sh-border-strong); border-left: 4px solid var(--sh-primary); padding: 12px 16px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: opacity .2s, transform .2s; max-width: calc(100% - 32px); display: flex; gap: 12px; align-items: center; }
.sh-toast.is-show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.sh-toast--error { border-left-color: var(--sh-red); }
.sh-toast a { color: var(--sh-primary); font-weight: 700; white-space: nowrap; }
.sh-loading { color: var(--sh-muted); padding: 32px 0; text-align: center; }

/* ---------- Foto (generate con OpenArt) ---------- */
.sh-card__media:has(.sh-photo), .sh-product__media:has(.sh-photo), .sh-cart-line__media:has(.sh-photo) { padding: 0; overflow: hidden; background: #0b0e13; }
.sh-card__media .sh-photo, .sh-product__media .sh-photo, .sh-cart-line__media .sh-photo { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.sh-card:hover .sh-photo { transform: scale(1.04); }
.sh-product__media:has(.sh-photo) { border-color: color-mix(in srgb, var(--accent, #fff600) 35%, transparent); box-shadow: 0 20px 60px -30px var(--accent, #fff600); }
.sh-hero--photo { background: linear-gradient(90deg, var(--sh-bg) 0%, rgba(11,14,19,.92) 34%, rgba(11,14,19,.35) 62%, rgba(11,14,19,.1) 100%), url('/shop/img/hero.webp') right center / cover no-repeat, var(--sh-bg); }
.sh-hero--photo .sh-hero__inner { min-height: 420px; }
.sh-hero--photo .sh-hero__art { display: none; }
.sh-hero--photo::after { content: ''; position: absolute; inset: auto 0 0 0; height: 90px; background: linear-gradient(transparent, var(--sh-bg)); pointer-events: none; }
.sh-hero--photo .sh-perks { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .sh-hero--photo { background: linear-gradient(180deg, rgba(11,14,19,.55) 0%, rgba(11,14,19,.92) 55%, var(--sh-bg) 100%), url('/shop/img/hero.webp') 70% top / auto 340px no-repeat, var(--sh-bg); }
  .sh-hero--photo .sh-hero__inner { min-height: 0; padding-top: 170px; }
}
.sh-promo__photo { width: 150px; height: 150px; flex-shrink: 0; align-self: center; border-radius: 12px; overflow: hidden; }
.sh-promo__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .sh-promo__photo { width: 96px; height: 96px; } }
.sh-option__icon:has(img), .sh-step__icon:has(img) { padding: 0; overflow: hidden; background: #0b0e13; }
.sh-option__icon img { width: 100%; height: 100%; object-fit: cover; }
.sh-option__icon { width: 64px; height: 64px; }
.sh-option { grid-template-columns: 64px 1fr auto; }
.sh-option--none { grid-template-columns: 64px 1fr; }
.sh-option--none .sh-option__icon img { opacity: .35; filter: grayscale(1); }
@media (max-width: 760px) { .sh-option { grid-template-columns: 52px 1fr; } .sh-option__icon { width: 52px; height: 52px; } }
.sh-spec-table td.sh-spec-with-img { display: flex; gap: 12px; align-items: center; }
.sh-spec-thumb { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: #0b0e13; }
.sh-spec-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Strumenti di ricerca nel configuratore */
.sh-option-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.sh-option-tools input, .sh-option-tools select { background: var(--sh-surface); border: 1px solid var(--sh-border-strong); border-radius: 8px; padding: 8px 10px; color: var(--sh-text); }
.sh-option-tools input { flex: 1; min-width: 180px; }
.sh-option-tools input:focus, .sh-option-tools select:focus { outline: 2px solid var(--sh-primary); outline-offset: -1px; }

/* ---------- Indirizzo con completamento automatico ---------- */
.sh-ac-wrap { position: relative; display: block; }
.sh-ac__list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); list-style: none; background: var(--sh-surface-2); border: 1px solid var(--sh-border-strong); border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.5); max-height: 280px; overflow-y: auto; padding: 4px; }
.sh-ac__item { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 7px; cursor: pointer; color: var(--sh-text); font-size: .92rem; }
.sh-ac__item small { color: var(--sh-muted); font-size: .76rem; }
.sh-ac__item:hover, .sh-ac__item.is-active { background: rgba(255,246,0,.12); }
.sh-ac__item.is-active span { color: var(--sh-primary); }
.sh-ac__empty { padding: 8px 10px; color: var(--sh-muted); font-size: .85rem; }
.sh-form input[readonly] { opacity: .75; cursor: default; }
.sh-addr__street { display: grid; grid-template-columns: 1fr 120px; gap: 10px; }
.sh-addr__check:empty { display: none; }
.sh-addr__chip { display: inline-block; font-size: .82rem; color: var(--sh-muted); padding: 4px 10px; border-radius: 999px; background: var(--sh-surface-2); }
.sh-addr__chip--ok { color: var(--sh-green); background: rgba(74,222,128,.1); }
.sh-addr__sugg { display: inline-block; margin: 4px 4px 0 0; padding: 4px 10px; border-radius: 999px; background: var(--sh-primary); color: var(--sh-primary-ink); font-weight: 700; font-size: .85rem; }
.sh-addr__hint { margin-top: 6px; color: #fde68a; opacity: .9; }
.sh-addr__keep { font-size: inherit; }
@media (max-width: 560px) { .sh-addr__street { grid-template-columns: 1fr 96px; } }

/* ---------- Pagina account ---------- */
.sh-account { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; padding-bottom: 48px; }
.sh-account h2 { font-family: var(--sh-head); font-size: 1.05rem; margin-bottom: 4px; }
.sh-account__user { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.sh-account__user img { width: 48px; height: 48px; border-radius: 50%; }
.sh-saved { color: var(--sh-green); font-size: .88rem; }
@media (max-width: 900px) { .sh-account { grid-template-columns: 1fr; } }
.sh-addr__caps { margin-top: 6px; font-size: .85rem; color: var(--sh-muted); }

/* ---------- Pacchetto ottimizzazione ---------- */
.sh-included { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--sh-primary); }
.sh-optbox { margin: 16px 0 4px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255,246,0,.35); background: linear-gradient(135deg, rgba(255,246,0,.10), rgba(255,246,0,.02)); }
.sh-optbox__head { display: flex; gap: 12px; align-items: center; }
.sh-optbox__head strong { display: block; }
.sh-optbox__head span:not(.sh-optbox__icon) { color: #cbd5e1; font-size: .9rem; }
.sh-optbox__icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--sh-primary); color: var(--sh-primary-ink); flex-shrink: 0; }
.sh-optbox ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 10px; font-size: .85rem; color: #cbd5e1; }
.sh-optbox li::before { content: '✓ '; color: var(--sh-primary); font-weight: 800; }
@media (max-width: 560px) { .sh-optbox ul { grid-template-columns: 1fr; } }
.sh-opt-toggle { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,246,0,.35); background: rgba(255,246,0,.06); cursor: pointer; }
.sh-opt-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.sh-switch { width: 38px; height: 22px; border-radius: 999px; background: #3a4558; position: relative; transition: background .2s; }
.sh-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.sh-opt-toggle input:checked + .sh-switch { background: var(--sh-primary); }
.sh-opt-toggle input:checked + .sh-switch::after { transform: translateX(16px); background: var(--sh-primary-ink); }
.sh-opt-toggle input:focus-visible + .sh-switch { outline: 2px solid var(--sh-primary); outline-offset: 2px; }
.sh-opt-toggle__txt strong { display: block; font-size: .88rem; }
.sh-opt-toggle__txt small { color: var(--sh-muted); font-size: .76rem; }
.sh-opt-toggle__price { font-weight: 800; font-size: .9rem; white-space: nowrap; }
.sh-opt-toggle:has(input:not(:checked)) { border-color: var(--sh-border); background: transparent; }
.sh-opt-toggle:has(input:not(:checked)) .sh-opt-toggle__price { color: var(--sh-muted); text-decoration: line-through; }
.sh-cart-opt { display: flex; gap: 6px; align-items: center; font-size: .82rem; color: #cbd5e1; margin-top: 6px; cursor: pointer; }
.sh-cart-opt input { accent-color: var(--sh-primary); }

/* ---------- Suggerimenti di ricerca ---------- */
.sh-suggest { position: absolute; left: -2px; right: -2px; top: calc(100% + 6px); z-index: 60; background: var(--sh-surface); border: 1px solid var(--sh-border-strong); border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.6); max-height: min(70vh, 560px); overflow-y: auto; padding: 6px; color: var(--sh-text); }
.sh-suggest__group { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sh-muted); padding: 10px 10px 4px; font-weight: 700; }
.sh-suggest__group span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.sh-suggest__item { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 7px 10px; border-radius: 9px; }
.sh-suggest__item:hover, .sh-suggest__item.is-active { background: rgba(255,246,0,.09); }
.sh-suggest__img { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: #0b0e13; }
.sh-suggest__img img { width: 100%; height: 100%; object-fit: cover; }
.sh-suggest__txt { min-width: 0; display: flex; flex-direction: column; }
.sh-suggest__title { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-suggest__title mark { background: none; color: var(--sh-primary); font-weight: 800; }
.sh-suggest__txt small { color: var(--sh-muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-suggest__price { font-weight: 800; font-size: .9rem; white-space: nowrap; }
.sh-suggest__empty { padding: 12px 10px; color: var(--sh-muted); font-size: .88rem; }
.sh-suggest__all { display: block; margin-top: 4px; padding: 10px; border-top: 1px solid var(--sh-border); color: #7dd3fc; font-size: .88rem; font-weight: 600; border-radius: 0 0 9px 9px; }
.sh-suggest__all:hover, .sh-suggest__all.is-active { background: rgba(125,211,252,.08); }
@media (max-width: 560px) { .sh-suggest__item { grid-template-columns: 38px 1fr; } .sh-suggest__img { width: 38px; height: 38px; } .sh-suggest__price { grid-column: 2; font-size: .82rem; } }

/* Componenti nei risultati di ricerca */
.sh-part-results { margin-top: 28px; }
.sh-part-results h2 { font-family: var(--sh-head); font-size: 1.1rem; margin-bottom: 4px; }
.sh-part-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.sh-part { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--sh-border); background: var(--sh-surface); transition: border-color .15s; }
.sh-part:hover { border-color: var(--sh-primary); }
.sh-part__img { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: #0b0e13; }
.sh-part__img img { width: 100%; height: 100%; object-fit: cover; }
.sh-part__txt { min-width: 0; display: flex; flex-direction: column; }
.sh-part__txt small { color: var(--sh-muted); font-size: .75rem; }
.sh-part__txt strong { font-size: .92rem; font-weight: 600; }
.sh-part__txt mark { background: none; color: var(--sh-primary); font-weight: 800; }
.sh-part__price { font-weight: 800; text-align: right; white-space: nowrap; }
.sh-part__price small { display: block; color: #7dd3fc; font-weight: 600; font-size: .74rem; }

/* ---------- I miei ordini ---------- */
.sh-orders-page { padding-bottom: 48px; }
.sh-orders-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 6px 0 14px; }
.sh-orders-search { display: flex; gap: 8px; flex: 0 1 460px; }
.sh-orders-search input { flex: 1; min-width: 0; background: var(--sh-surface); border: 1px solid var(--sh-border-strong); border-radius: 999px; padding: 10px 16px; color: var(--sh-text); }
.sh-orders-search input:focus { outline: 2px solid var(--sh-primary); outline-offset: -1px; }
.sh-orders-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--sh-border); overflow-x: auto; }
.sh-orders-tabs button { padding: 10px 14px; color: #cbd5e1; border-bottom: 2px solid transparent; white-space: nowrap; }
.sh-orders-tabs button.is-active { color: var(--sh-primary); border-bottom-color: var(--sh-primary); font-weight: 700; }
.sh-ocard { border: 1px solid var(--sh-border-strong); border-radius: 14px; overflow: hidden; margin-bottom: 18px; background: var(--sh-surface); }
.sh-ocard__head { display: grid; grid-template-columns: auto auto 1fr auto; gap: 12px 40px; align-items: end; padding: 14px 22px; background: var(--sh-surface-2); border-bottom: 1px solid var(--sh-border); }
.sh-ocard__head small { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; color: var(--sh-muted); }
.sh-ocard__head span, .sh-ocard__head summary { font-size: .98rem; }
.sh-ocard__id { text-align: right; }
.sh-ocard__id .sh-link { font-size: .92rem; }
.sh-ocard__ship { position: relative; }
.sh-ocard__ship summary { cursor: pointer; color: #7dd3fc; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.sh-ocard__ship summary::-webkit-details-marker { display: none; }
.sh-ocard__ship summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .15s; }
.sh-ocard__ship details[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.sh-ocard__pop { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; min-width: 240px; padding: 12px 14px; border-radius: 10px; background: var(--sh-surface); border: 1px solid var(--sh-border-strong); box-shadow: 0 16px 40px rgba(0,0,0,.5); font-size: .88rem; line-height: 1.5; }
.sh-ocard__body { display: grid; grid-template-columns: 1fr 300px; gap: 24px; padding: 18px 22px 22px; }
.sh-ocard__side { display: flex; flex-direction: column; gap: 10px; }
.sh-ostatus { font-family: var(--sh-font); font-size: 1.35rem; font-weight: 800; margin-bottom: 2px; }
.sh-ostatus--green { color: var(--sh-green); }
.sh-ostatus--yellow { color: var(--sh-primary); }
.sh-ostatus--amber { color: var(--sh-amber); }
.sh-track { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); margin: 4px 0 18px; font-size: .76rem; color: var(--sh-muted); }
.sh-track li { position: relative; padding-top: 18px; text-align: center; }
.sh-track li span { position: absolute; top: 0; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #3a4558; z-index: 1; }
.sh-track li::before { content: ''; position: absolute; top: 5px; left: -50%; width: 100%; height: 2px; background: #3a4558; }
.sh-track li:first-child::before { display: none; }
.sh-track li.is-done span, .sh-track li.is-done::before, .sh-track li.is-current::before { background: var(--sh-green); }
.sh-track li.is-done { color: #cbd5e1; }
.sh-track li.is-current { color: var(--sh-text); font-weight: 700; }
.sh-track li.is-current span { background: var(--sh-primary); box-shadow: 0 0 0 4px rgba(255,246,0,.2); }
.sh-oitem { display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding: 10px 0; }
.sh-oitem + .sh-oitem { border-top: 1px solid var(--sh-border); padding-top: 16px; }
.sh-oitem__img { display: block; width: 130px; height: 130px; border-radius: 12px; overflow: hidden; background: #0b0e13; }
.sh-oitem__img img, .sh-oitem__img svg { width: 100%; height: 100%; object-fit: cover; }
.sh-oitem__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sh-oitem__title { color: #7dd3fc; font-size: 1.05rem; font-weight: 600; }
a.sh-oitem__title:hover { text-decoration: underline; }
.sh-oitem__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.sh-buyagain { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px 9px 12px; border-radius: 999px; background: var(--sh-primary); color: var(--sh-primary-ink); font-weight: 700; transition: background .15s, transform .1s; }
.sh-buyagain:hover { background: #fffb7a; }
.sh-buyagain:active { transform: translateY(1px); }
.sh-odetails { border-top: 1px dashed var(--sh-border-strong); padding: 16px 22px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; background: rgba(255,255,255,.015); }
.sh-odetails__block strong { display: block; margin-bottom: 6px; }
.sh-odetails__block ul { list-style: none; display: grid; gap: 3px; font-size: .85rem; }
.sh-odetails__block li { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.sh-odetails__block li span { color: var(--sh-muted); }
.sh-odetails[hidden] { display: none; }
.sh-odetails__block p { font-size: .88rem; line-height: 1.55; }
@media (max-width: 900px) {
  .sh-ocard__head { grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 12px 16px; }
  .sh-ocard__id { text-align: left; grid-column: 1 / -1; }
  .sh-ocard__body { grid-template-columns: 1fr; padding: 16px; }
}
@media (max-width: 560px) {
  .sh-oitem { grid-template-columns: 88px 1fr; gap: 12px; }
  .sh-oitem__img { width: 88px; height: 88px; }
  .sh-track { font-size: .66rem; }
}
.sh-head-link.is-active strong { color: var(--sh-primary); }

/* ---------- Chat di assistenza (collegata a Discord) ---------- */
.tc { position: fixed; right: 20px; bottom: 20px; z-index: 90; font-family: var(--sh-font); }
.tc-fab { position: relative; width: 58px; height: 58px; border-radius: 50%; background: var(--sh-primary); color: var(--sh-primary-ink); display: grid; place-items: center; box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 0 4px rgba(255,246,0,.15); transition: transform .15s; }
.tc-fab:hover { transform: scale(1.06); }
.tc.is-open .tc-fab { transform: scale(.9); }
.tc-fab__badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--sh-red); color: #fff; font-size: .75rem; font-weight: 800; line-height: 22px; border: 2px solid var(--sh-bg); animation: sh-badge-pop .5s cubic-bezier(.34,1.56,.64,1); }
.tc-panel { position: absolute; right: 0; bottom: 72px; width: 380px; height: min(600px, calc(100vh - 120px)); display: flex; flex-direction: column; background: var(--sh-surface); border: 1px solid var(--sh-border-strong); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.6); overflow: hidden; animation: tc-in .2s ease-out; }
@keyframes tc-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.tc-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 16px; background: linear-gradient(135deg, rgba(255,246,0,.14), transparent 70%), var(--sh-surface-2); border-bottom: 1px solid var(--sh-border); }
.tc-head__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tc-head__txt strong { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-head__txt small { color: var(--sh-muted); font-size: .76rem; }
.tc-back, .tc-close { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--sh-text); }
.tc-back:hover, .tc-close:hover { background: rgba(255,255,255,.08); }
.tc-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.tc-empty { color: var(--sh-muted); font-size: .88rem; text-align: center; padding: 20px 8px; }
.tc-new { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px dashed rgba(255,246,0,.5); color: var(--sh-primary); font-weight: 700; text-align: left; }
.tc-new span { font-size: 1.2rem; }
.tc-new:hover { background: rgba(255,246,0,.07); }
.tc-list { list-style: none; display: grid; gap: 6px; }
.tc-conv { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 10px; border-radius: 12px; text-align: left; background: rgba(255,255,255,.02); border: 1px solid var(--sh-border); }
.tc-conv:hover { border-color: var(--sh-border-strong); background: rgba(255,255,255,.04); }
.tc-conv.is-unread { border-color: rgba(255,246,0,.45); }
.tc-conv__img { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: #0b0e13; display: grid; place-items: center; font-size: 1.2rem; }
.tc-conv__img img { width: 100%; height: 100%; object-fit: cover; }
.tc-conv__txt { min-width: 0; display: flex; flex-direction: column; }
.tc-conv__top { display: flex; justify-content: space-between; gap: 8px; }
.tc-conv__top strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-conv__top small, .tc-conv__sub { color: var(--sh-muted); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-conv__prev { color: #cbd5e1; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-conv.is-unread .tc-conv__prev { color: var(--sh-text); font-weight: 700; }
.tc-conv__dot { min-width: 20px; height: 20px; border-radius: 999px; background: var(--sh-primary); color: var(--sh-primary-ink); font-size: .72rem; font-weight: 800; display: grid; place-items: center; padding: 0 5px; }
.tc-sys { align-self: center; max-width: 92%; text-align: center; font-size: .76rem; color: var(--sh-muted); background: rgba(255,255,255,.04); border-radius: 10px; padding: 8px 10px; }
.tc-sys--small { font-size: .72rem; background: none; padding: 2px 8px; }
.tc-msg { display: flex; flex-direction: column; max-width: 82%; }
.tc-msg--me { align-self: flex-end; align-items: flex-end; }
.tc-msg--staff { align-self: flex-start; }
.tc-msg__meta { font-size: .7rem; color: var(--sh-muted); margin: 0 6px 3px; }
.tc-msg__bubble { padding: 9px 12px; border-radius: 16px; font-size: .9rem; line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere; }
.tc-msg--me .tc-msg__bubble { background: var(--sh-primary); color: var(--sh-primary-ink); border-bottom-right-radius: 5px; }
.tc-msg--staff .tc-msg__bubble { background: var(--sh-surface-2); border: 1px solid var(--sh-border); border-bottom-left-radius: 5px; }
.tc-msg__bubble a { text-decoration: underline; color: inherit; }
.tc-compose { display: flex; gap: 8px; align-items: flex-end; padding: 10px; border-top: 1px solid var(--sh-border); background: var(--sh-surface); }
.tc-compose textarea { flex: 1; resize: none; max-height: 120px; background: var(--sh-surface-2); border: 1px solid var(--sh-border-strong); border-radius: 12px; padding: 10px 12px; color: var(--sh-text); font: inherit; font-size: .92rem; }
.tc-compose textarea:focus { outline: 2px solid var(--sh-primary); outline-offset: -1px; }
.tc-send { width: 42px; height: 42px; border-radius: 12px; background: var(--sh-primary); color: var(--sh-primary-ink); display: grid; place-items: center; flex-shrink: 0; }
.tc-newform { display: grid; gap: 10px; }
.tc-newform label { display: grid; gap: 4px; font-size: .82rem; color: var(--sh-muted); }
.tc-newform input, .tc-newform textarea { background: var(--sh-surface-2); border: 1px solid var(--sh-border-strong); border-radius: 10px; padding: 9px 10px; color: var(--sh-text); font: inherit; }
.tc-newform input:focus, .tc-newform textarea:focus { outline: 2px solid var(--sh-primary); outline-offset: -1px; }
.tc-hint { font-size: .76rem; color: var(--sh-muted); }
@media (max-width: 560px) {
  .tc { right: 14px; bottom: 14px; }
  .tc.is-open { inset: 0; }
  .tc.is-open .tc-fab { display: none; }
  .tc-panel { position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .tc-panel, .tc-fab__badge { animation: none; } }

.sh-ostatus--blue { color: #60a5fa; }
.sh-trackbox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: -4px 0 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(96,165,250,.35); background: rgba(96,165,250,.07); }
.sh-trackbox small { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sh-muted); }
.sh-trackbox strong { font-size: .95rem; }
.sh-trackbox__num { font-family: ui-monospace, monospace; letter-spacing: .03em; }
.sh-trackbox__icon { font-size: 1.4rem; }

/* ---------- Recensioni ---------- */
.sh-stars { position: relative; display: inline-block; font-size: 1rem; line-height: 1; letter-spacing: 1px; color: #3a4558; vertical-align: middle; }
.sh-stars::before { content: '★★★★★'; }
.sh-stars__fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: #ffb703; }
.sh-stars__fill::before { content: '★★★★★'; }
.sh-stars--big { font-size: 1.5rem; }
.sh-card__rating { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: #7dd3fc; }
.sh-product__rating { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: #7dd3fc; margin: -6px 0 10px; }
.sh-reviews { border-top: 1px solid var(--sh-border); padding: 28px 0 48px; }
.sh-reviews h2 { font-family: var(--sh-head); font-size: 1.3rem; margin-bottom: 16px; }
.sh-reviews__grid { display: grid; grid-template-columns: 340px 1fr; gap: 36px; align-items: start; }
.sh-reviews__summary { position: sticky; top: 130px; display: grid; gap: 10px; }
.sh-reviews__avg { display: flex; align-items: center; gap: 10px; }
.sh-reviews__avg strong { font-size: 1.15rem; }
.sh-rbar { display: grid; grid-template-columns: 62px 1fr 40px; gap: 10px; align-items: center; font-size: .85rem; color: #7dd3fc; }
.sh-rbar span:last-child { text-align: right; }
.sh-rbar__track { height: 18px; border-radius: 4px; background: var(--sh-surface-2); border: 1px solid var(--sh-border); overflow: hidden; }
.sh-rbar__track span { display: block; height: 100%; background: #ffb703; }
.sh-reviews__cta, .sh-reviews__form { border-top: 1px solid var(--sh-border); padding-top: 14px; margin-top: 6px; display: grid; gap: 10px; }
.sh-reviews__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sh-reviews__head select { background: var(--sh-surface); border: 1px solid var(--sh-border-strong); border-radius: 8px; padding: 6px 10px; }
.sh-review { padding: 16px 0; border-bottom: 1px solid var(--sh-border); }
.sh-review__author { display: flex; align-items: center; gap: 10px; font-size: .9rem; margin-bottom: 6px; }
.sh-review__avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--sh-surface-2); color: var(--sh-primary); font-weight: 800; }
.sh-review__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sh-review__meta { font-size: .8rem; margin: 4px 0 8px; }
.sh-verified { color: #fb923c; font-weight: 700; }
.sh-review__body { color: #e2e8f0; line-height: 1.6; }
.sh-starpick { border: 0; display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.sh-starpick legend { width: 100%; margin-bottom: 4px; }
.sh-starpick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sh-starpick label { font-size: 2rem; line-height: 1; color: #3a4558; cursor: pointer; transition: color .1s, transform .1s; }
.sh-starpick label:hover, .sh-starpick label:hover ~ label, .sh-starpick input:checked ~ label { color: #ffb703; }
.sh-starpick input:focus-visible + label { outline: 2px solid var(--sh-primary); outline-offset: 2px; border-radius: 4px; }
.sh-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 860px) { .sh-reviews__grid { grid-template-columns: 1fr; } .sh-reviews__summary { position: static; } }