/**
 * Dresium Try-On block styles
 *
 * BEM: .dresium-tryon-* per prefissare tutto (evita collisione con
 * theme CSS del merchant). Le variabili --dresium-tryon-* permettono
 * al theme di override senza !important.
 *
 * 2026-08-02 REDESIGN: allineamento al design system del plugin
 * WooCommerce Dresium (dresium.com/wp-content/plugins/dresium/):
 *  - stessa palette (primary #4362db, gradient viola/blu)
 *  - stessi radius (12px lg)
 *  - stesse font families (League Spartan display + Inter body)
 *  - variante gradient del pulsante principale come .dresium-btn--gradient
 *  - dimensioni --sm/--md/--lg/--xl coerenti (32/36/44/52px)
 *  - hover con shadow-lg + gradient shift come WC
 *
 * M19 (2026-09-02): allineamento Loading + Result modal al design
 * dell'estensione browser Chrome/Firefox (ext/chrome/ui/content-style.css).
 * Font primario delle 2 modali = Poppins (via --ext-dresium-font-primary).
 * Import da Google Fonts qui in cima per garantire disponibilità sui temi
 * che non lo servono già (usa display=swap per non bloccare il render).
 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
/* ============================================================
   M33-1 (2026-09-03): DESIGN TOKENS DRESIUM

   Set canonico di variabili --dresium-tryon-* scoped su .dresium-tryon-block.
   Include palette brand + tipografia + spacing + radius + shadows +
   transitions.

   Regola d'oro: da qui in avanti, ogni valore hardcoded nel CSS delle
   modali va sostituito con una var (o restare come override targeted
   con !important dove serve isolamento dal tema del merchant).

   Il refactor CSS delle modali avviene nelle fasi successive (M33-2+).
   M35 (2026-09-03): eliminato il blocco :root legacy compatibility layer.
   Ogni consumer usa direttamente i token --dresium-tryon-*.
   ============================================================ */
.dresium-tryon-block {

  /* ---------- BRAND: primary + gradient ---------- */
  /* Fonte: dresium-variables.css WP + ext content-style.css:22 */
  --dresium-tryon-primary: #4362db;
  --dresium-tryon-primary-hover: #3451c9;
  --dresium-tryon-primary-light: #6b84e8;
  --dresium-tryon-primary-dark: #2d4aa5;
  --dresium-tryon-secondary: #7C3AED;
  --dresium-tryon-gradient: linear-gradient(90deg, rgb(76, 110, 245) 0%, rgb(155, 81, 224) 100%);
  --dresium-tryon-gradient-hover: linear-gradient(90deg, #4C6EF5 0%, #4C6EF5 100%);
  /* Gradient 135deg — usato per bottoni "modernistic" (WP dresium-buttons.css) */
  --dresium-tryon-gradient-diag: linear-gradient(135deg, #4362db 0%, #7C3AED 100%);
  --dresium-tryon-gradient-diag-hover: linear-gradient(135deg, #3451c9 0%, #6b2adc 100%);
  /* Alpha del primary per shadows/borders soft */
  --dresium-tryon-primary-alpha-08: rgba(76, 110, 245, 0.08);
  --dresium-tryon-primary-alpha-20: rgba(67, 98, 219, 0.2);
  --dresium-tryon-primary-alpha-30: rgba(67, 98, 219, 0.3);
  --dresium-tryon-primary-alpha-32: rgba(76, 110, 245, 0.32);
  --dresium-tryon-primary-alpha-40: rgba(67, 98, 219, 0.4);

  /* ---------- NEUTRAL: gray scale ---------- */
  /* Scala Tailwind-like coerente con WP dresium-variables.css */
  --dresium-tryon-white: #ffffff;
  --dresium-tryon-black: #000000;
  --dresium-tryon-gray-50: #f9fafb;
  --dresium-tryon-gray-100: #f3f4f6;
  --dresium-tryon-gray-200: #e5e7eb;
  --dresium-tryon-gray-300: #d1d5db;
  --dresium-tryon-gray-400: #9ca3af;
  --dresium-tryon-gray-500: #6b7280;
  --dresium-tryon-gray-600: #4b5563;
  --dresium-tryon-gray-700: #374151;
  --dresium-tryon-gray-800: #1f2937;
  --dresium-tryon-gray-900: #111827;
  /* Background sabbioso "Dresium canvas" — F4F5F9 usato per sidebar e
     card interne */
  --dresium-tryon-canvas: #F4F5F9;

  /* ---------- SEMANTIC ---------- */
  --dresium-tryon-success: #10b981;
  --dresium-tryon-warning: #f59e0b;
  --dresium-tryon-error: #ef4444;
  --dresium-tryon-info: #3b82f6;

  /* ---------- BACKDROP ---------- */
  /* Backdrop scuro per modali. blur 4px consistente con ext e WP */
  --dresium-tryon-backdrop: rgba(0, 0, 0, 0.6);
  --dresium-tryon-backdrop-blur: 4px;

  /* ---------- TYPOGRAPHY ---------- */
  /* Font families: Poppins default per titoli/UI, Inter per body.
     League Spartan resta come display fallback per compat legacy.
     Import di Poppins da Google Fonts a inizio file (@import). */
  --dresium-tryon-font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --dresium-tryon-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --dresium-tryon-font-display: 'League Spartan', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* M55E (2026-09-08): Tipografia customizzabile dal merchant. Default =
     system stack. Il JS (applyTypography) sovrascrive queste var con lo
     stack del font Google scelto dal merchant nell'admin Aspetto. */
  --dresium-tryon-font-buttons: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dresium-tryon-font-headings: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dresium-tryon-font-paragraphs: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dresium-tryon-font-links: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Scale font-size (rem-based per accessibility) */
  --dresium-tryon-text-xs: 0.75rem;    /* 12px */
  --dresium-tryon-text-sm: 0.875rem;   /* 14px */
  --dresium-tryon-text-base: 1rem;     /* 16px */
  --dresium-tryon-text-lg: 1.125rem;   /* 18px — h2 modali */
  --dresium-tryon-text-xl: 1.25rem;    /* 20px — h1 modali */
  --dresium-tryon-text-2xl: 1.5rem;    /* 24px */
  --dresium-tryon-text-3xl: 1.75rem;   /* 28px — titolo hero landing */
  /* Weight scale */
  --dresium-tryon-weight-normal: 400;
  --dresium-tryon-weight-medium: 500;
  --dresium-tryon-weight-semibold: 600;
  --dresium-tryon-weight-bold: 700;
  /* Line height */
  --dresium-tryon-leading-tight: 1.25;
  --dresium-tryon-leading-normal: 1.5;
  --dresium-tryon-leading-relaxed: 1.75;

  /* ---------- SPACING ---------- */
  /* Scale multipla di 4px */
  --dresium-tryon-space-1: 0.25rem;   /* 4px */
  --dresium-tryon-space-2: 0.5rem;    /* 8px */
  --dresium-tryon-space-3: 0.75rem;   /* 12px */
  --dresium-tryon-space-4: 1rem;      /* 16px */
  --dresium-tryon-space-5: 1.25rem;   /* 20px */
  --dresium-tryon-space-6: 1.5rem;    /* 24px */
  --dresium-tryon-space-8: 2rem;      /* 32px */
  --dresium-tryon-space-10: 2.5rem;   /* 40px */
  --dresium-tryon-space-12: 3rem;     /* 48px */

  /* ---------- BORDER RADIUS ---------- */
  --dresium-tryon-radius-sm: 4px;
  --dresium-tryon-radius: 8px;
  --dresium-tryon-radius-md: 12px;
  --dresium-tryon-radius-lg: 16px;
  --dresium-tryon-radius-xl: 20px;
  /* Modal radius — 25px come nel WP (dresium-variables.css --dresium-modal-radius: 1.5625rem) */
  --dresium-tryon-modal-radius: 25px;
  --dresium-tryon-modal-radius-sm: 10px; /* modali "compatte" tipo loading/result */
  --dresium-tryon-pill: 9999px;

  /* ---------- SHADOWS ---------- */
  --dresium-tryon-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --dresium-tryon-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --dresium-tryon-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --dresium-tryon-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  /* Modal shadow — 0 20px 60px rgba(0,0,0,0.3) consistente WP+ext */
  --dresium-tryon-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.3);
  /* Button shadows — 0 4px 12px per rest state, 0 6px 18px per hover */
  --dresium-tryon-shadow-btn: 0 4px 12px var(--dresium-tryon-primary-alpha-20);
  --dresium-tryon-shadow-btn-hover: 0 6px 18px var(--dresium-tryon-primary-alpha-30);

  /* ---------- TRANSITIONS ---------- */
  --dresium-tryon-transition-fast: 100ms cubic-bezier(0.4, 0, 0.2, 1);
  --dresium-tryon-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --dresium-tryon-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Z-INDEX ---------- */
  --dresium-tryon-z-modal: 9999;
  --dresium-tryon-z-popover: 10000;
  --dresium-tryon-z-tooltip: 10001;

  /* ---------- BLOCK CONTAINER PROPERTIES ---------- */
  --dresium-tryon-modal-max-width: 480px;
  font-family: var(--dresium-tryon-font-body);
  box-sizing: border-box;
}
.dresium-tryon-block *,
.dresium-tryon-block *::before,
.dresium-tryon-block *::after {
  box-sizing: border-box;
}
/* ============================================
   BOTTONE PRINCIPALE
   Replica di .dresium-btn + .dresium-btn--gradient del WC plugin
   ============================================ */
.dresium-tryon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Padding e height coerenti con .dresium-btn (md default): 36px */
  padding: 12px 24px;
  height: 44px; /* --lg del WC per bottone hero product page */
  border: none;
  border-radius: var(--dresium-tryon-radius);
  background: var(--dresium-tryon-gradient);
  color: #ffffff;
  font-family: var(--dresium-tryon-font-display);
  font-size: 1rem; /* 16px = --dresium-text-base WC */
  font-weight: 600; /* --dresium-weight-semibold */
  line-height: 1.25; /* --dresium-leading-tight */
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: all var(--dresium-tryon-transition);
  width: 100%;
  max-width: 400px;
  outline: none;
}
.dresium-tryon-btn:hover:not(:disabled) {
  background: var(--dresium-tryon-gradient-hover);
  box-shadow: var(--dresium-tryon-shadow-lg);
  color: #ffffff;
}
.dresium-tryon-btn:focus-visible {
  outline: 2px solid var(--dresium-tryon-primary);
  outline-offset: 2px;
}
.dresium-tryon-btn:active:not(:disabled) {
  box-shadow: var(--dresium-tryon-shadow-md);
  transform: scale(0.98);
}
.dresium-tryon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.dresium-tryon-btn__icon {
  font-size: 16px;
  line-height: 1;
}
/* 2026-08-03 M12 commit 3b-fix: variante --settings (icona sola, non
   gradient). Replica di .dresium-btn--settings del WC plugin: bianco
   con bordo, aspetto neutro, complementare al main gradient. */
.dresium-tryon-btn--settings {
  width: 44px;
  height: 44px;
  padding: 0;
  min-width: 44px;
  flex: 0 0 auto;
  background: #ffffff;
  color: #4b5563;
  border: 1px solid #E5E7EB;
  border-radius: var(--dresium-tryon-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--dresium-tryon-transition);
}
.dresium-tryon-btn--settings:hover:not(:disabled) {
  background: #F9FAFB;
  border-color: #D1D5DB;
  color: #111827;
  box-shadow: var(--dresium-tryon-shadow-md);
}
.dresium-tryon-btn--settings:focus-visible {
  outline: 2px solid var(--dresium-tryon-primary);
  outline-offset: 2px;
}
.dresium-tryon-btn--settings svg {
  display: block;
}
/* Wrapper block: due bottoni affiancati con gap */
.dresium-tryon-block {
  /* 2026-09-08 (user report): default NASCOSTO. Il JS
     applyAppearance() aggiunge .dresium-tryon-block--ready dopo
     aver superato tutti i gate (legal + category + settings).
     Se la fetch fallisce o un gate blocca, il block resta invisibile
     e il customer non vede pulsanti che generano solo errori. */
  display: none;
  gap: 8px;
  align-items: stretch;
}
.dresium-tryon-block--ready {
  /* 2026-09-08 (user report round 7): !important per vincere su
     override cascade dai tema del merchant (es. Dawn/Impulse
     applicano display: block a container generici). */
  display: inline-flex !important;
  /* 2026-09-11: spaziatura verticale per staccare il block CTA dai
     bottoni Add to Cart / meta prodotto sopra e sotto. */
  margin-top: 15px;
  margin-bottom: 15px;
}
/* Il main button riprende il width intero come prima, ma se c'e' il
   settings a fianco, il flex naturale li dispone side-by-side. */
.dresium-tryon-btn--main {
  flex: 1;
}
/* M55B (2026-09-07): variante uppercase — applicata da tryon.js quando il
   merchant ha attivato la checkbox nell'admin Aspetto. */
.dresium-tryon-btn--uppercase {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ============================================================
   M55F (2026-09-08): dimensione bottoni principali —
   small / medium / large. Applicata da tryon.js in
   applyAppearanceToBlock come classe --size-* sui bottoni
   .dresium-tryon-btn--main e .dresium-tryon-btn--settings.
   Default (senza classe) = medium 44px (invariato pre-M55F).
   ============================================================ */
.dresium-tryon-btn--main.dresium-tryon-btn--size-small {
  height: 36px;
  padding: 8px 18px;
  font-size: 0.875rem; /* 14px */
}
.dresium-tryon-btn--main.dresium-tryon-btn--size-medium {
  height: 44px;
  padding: 12px 24px;
  font-size: 1rem; /* 16px — default */
}
.dresium-tryon-btn--main.dresium-tryon-btn--size-large {
  height: 56px;
  padding: 16px 32px;
  font-size: 1.125rem; /* 18px */
}
.dresium-tryon-btn--settings.dresium-tryon-btn--size-small {
  width: 36px;
  height: 36px;
  min-width: 36px;
}
.dresium-tryon-btn--settings.dresium-tryon-btn--size-medium {
  width: 44px;
  height: 44px;
  min-width: 44px;
}
.dresium-tryon-btn--settings.dresium-tryon-btn--size-large {
  width: 56px;
  height: 56px;
  min-width: 56px;
}
.dresium-tryon-btn--settings.dresium-tryon-btn--size-small svg {
  width: 16px;
  height: 16px;
}
.dresium-tryon-btn--settings.dresium-tryon-btn--size-large svg {
  width: 22px;
  height: 22px;
}
/* Floating variant */
.dresium-tryon-block[data-position="floating"] .dresium-tryon-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9998;
  width: auto;
  box-shadow: var(--dresium-tryon-shadow-lg);
}
/* Modal */
.dresium-tryon-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: dresium-fade-in 0.2s ease-out;
}
@keyframes dresium-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.dresium-tryon-modal {
  background: #fff;
  border-radius: 12px;
  max-width: var(--dresium-tryon-modal-max-width);
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  animation: dresium-slide-up 0.25s ease-out;
}
@keyframes dresium-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.dresium-tryon-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e5e5;
}
.dresium-tryon-modal__title {
  font-family: var(--dresium-tryon-font-display);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #111;
  line-height: 1.25;
}
.dresium-tryon-modal__close {
  background: none;
  border: 0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #666;
  padding: 4px 8px;
  border-radius: 4px;
}
.dresium-tryon-modal__close:hover {
  background: #f5f5f5;
  color: #111;
}
.dresium-tryon-modal__body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
/* Step: upload photo */
.dresium-tryon-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px;
  border: 2px dashed #d0d0d0;
  border-radius: var(--dresium-tryon-radius);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  text-align: center;
}
.dresium-tryon-upload:hover {
  border-color: var(--dresium-tryon-primary);
  background: #fafafa;
}
.dresium-tryon-upload__icon {
  font-size: 36px;
}
.dresium-tryon-upload__label {
  font-size: 14px;
  color: #333;
}
.dresium-tryon-upload__hint {
  font-size: 12px;
  color: #888;
}
.dresium-tryon-upload__input {
  display: none;
}
/* Step: loading */
.dresium-tryon-loading {
  text-align: center;
  padding: 40px 20px;
}
.dresium-tryon-loading__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e5e5e5;
  border-top-color: var(--dresium-tryon-primary);
  border-radius: 50%;
  animation: dresium-spin 0.8s linear infinite;
  margin: 0 auto 16px;
}
@keyframes dresium-spin {
  to { transform: rotate(360deg); }
}
.dresium-tryon-loading__text {
  font-size: 14px;
  color: #666;
}
/* Step: result */
.dresium-tryon-result {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dresium-tryon-result__image {
  width: 100%;
  border-radius: var(--dresium-tryon-radius);
  display: block;
}
.dresium-tryon-result__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dresium-tryon-result__actions button {
  flex: 1;
  min-width: 120px;
  padding: 10px 12px;
  border-radius: var(--dresium-tryon-radius);
  border: 1px solid #d0d0d0;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.dresium-tryon-result__actions button.primary {
  background: var(--dresium-tryon-primary);
  color: #fff;
  border-color: transparent;
}
/* Error state */
.dresium-tryon-error {
  padding: 16px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: var(--dresium-tryon-radius);
  color: #b91c1c;
  font-size: 13px;
}
/* Footer branding — visible when whitelabel_unlocked=false */
.dresium-tryon-modal__footer {
  padding: 8px 20px;
  border-top: 1px solid #e5e5e5;
  text-align: center;
  font-size: 11px;
  color: #999;
}
.dresium-tryon-modal__footer a {
  color: inherit;
  text-decoration: underline;
}
/* =================================================================
   M8b — Photo management (grid, tiles, picker, camera, toast)
   ================================================================= */
.dresium-tryon-photos__header {
  margin-bottom: 16px;
  text-align: center;
}
.dresium-tryon-photos__title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: #111;
}
.dresium-tryon-photos__hint {
  margin: 0;
  font-size: 12px;
  color: #666;
}
.dresium-tryon-photos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
  min-height: 120px;
}

@media (max-width: 400px) {
  .dresium-tryon-photos__grid {
      grid-template-columns: repeat(2, 1fr);
    }
}

.dresium-tryon-photo-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--dresium-tryon-radius);
  overflow: hidden;
  background: #f5f5f5;
  border: 2px solid transparent;
  cursor: default;
  transition: border-color 0.2s;
}
.dresium-tryon-photo-tile.is-default {
  border-color: var(--dresium-tryon-primary);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}
.dresium-tryon-photo-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dresium-tryon-photo-tile__badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--dresium-tryon-primary);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  pointer-events: none;
}
.dresium-tryon-photo-tile__actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.dresium-tryon-photo-tile:hover .dresium-tryon-photo-tile__actions,
.dresium-tryon-photo-tile:focus-within .dresium-tryon-photo-tile__actions {
  opacity: 1;
}
.dresium-tryon-photo-tile__action {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.dresium-tryon-photo-tile__action:hover {
  background: rgba(0, 0, 0, 0.9);
}
.dresium-tryon-photo-tile__action:disabled {
  opacity: 0.5;
  cursor: wait;
}
/* Tile "aggiungi foto" — placeholder tratteggiato */
.dresium-tryon-photo-tile--add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  border: 2px dashed #d0d0d0;
  color: #666;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.dresium-tryon-photo-tile--add:hover {
  border-color: var(--dresium-tryon-primary);
  background: #fff;
  color: var(--dresium-tryon-primary);
}
.dresium-tryon-photo-tile__plus {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 4px;
}
.dresium-tryon-photo-tile__add-label {
  font-size: 11px;
  font-weight: 500;
}
/* CTA "Genera try-on" — variante gradient come .dresium-btn--gradient WC */
.dresium-tryon-photos__cta {
  text-align: center;
}
/* Photo source picker (modale interno) */
.dresium-tryon-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 20px;
  border-radius: var(--dresium-tryon-radius);
}
.dresium-tryon-picker {
  position: relative;
  background: #fff;
  border-radius: var(--dresium-tryon-radius);
  padding: 24px;
  max-width: 320px;
  width: 100%;
  box-shadow: var(--dresium-tryon-shadow-lg);
}
.dresium-tryon-picker__close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #999;
  padding: 4px 8px;
}
.dresium-tryon-picker__title {
  margin: 0 0 16px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #111;
}
.dresium-tryon-picker__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dresium-tryon-picker__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: var(--dresium-tryon-radius);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.dresium-tryon-picker__option:hover {
  border-color: var(--dresium-tryon-primary);
  background: #fff;
}
.dresium-tryon-picker__icon {
  font-size: 26px;
}
.dresium-tryon-picker__label {
  font-size: 12px;
  font-weight: 500;
  color: #333;
}
/* Camera live capture modal */
.dresium-tryon-camera-backdrop {
  position: absolute;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11;
  border-radius: var(--dresium-tryon-radius);
}
.dresium-tryon-camera {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dresium-tryon-camera__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* mirror per selfie naturale */
}
.dresium-tryon-camera__controls {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.dresium-tryon-camera__cancel {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 8px 16px;
  border-radius: 20px;
  font-family: inherit;
  cursor: pointer;
  font-size: 13px;
}
.dresium-tryon-camera__shutter {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background 0.15s;
}
.dresium-tryon-camera__shutter:hover {
  background: rgba(255, 255, 255, 0.35);
}
/* =================================================================
   M9 — Modale shell con sidebar navigation
   ================================================================= */
.dresium-tryon-modal--shell {
  --dresium-modal-max-width: 900px;
  max-width: 900px;
  width: 100%;
  height: 600px;
  max-height: 90vh;
  flex-direction: row;
  overflow: hidden;
  padding: 0;
  position: relative;
}
.dresium-tryon-modal--shell .dresium-tryon-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 5;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Sidebar */
.dresium-tryon-shell__sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #0a0a0a;
  color: #f5f5f5;
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
  border-right: 1px solid #1a1a1a;
}
.dresium-tryon-shell__brand {
  padding: 8px 8px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 16px;
  text-align: center;
}
.dresium-tryon-shell__logo {
  max-height: 40px;
  max-width: 140px;
  width: auto;
  height: auto;
  filter: invert(1) brightness(1.2);
}
.dresium-tryon-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
}
.dresium-tryon-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.dresium-tryon-nav__item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.dresium-tryon-nav__item.is-active {
  background: var(--dresium-tryon-gradient);
  color: #ffffff;
  font-weight: 600;
}
.dresium-tryon-nav__icon {
  font-size: 18px;
  line-height: 1;
}
.dresium-tryon-nav__label {
  flex-grow: 1;
}
.dresium-tryon-shell__footer {
  padding: 12px 8px 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.dresium-tryon-shell__footer a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: underline;
}
/* Content area */
.dresium-tryon-shell__content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 24px;
  background: #fff;
}
/* Sezione generica */
.dresium-tryon-section {
  max-width: 500px;
  margin: 0 auto;
}
.dresium-tryon-section__title {
  margin: 0 0 12px;
  font-family: var(--dresium-tryon-font-display);
  font-size: 20px;
  font-weight: 600;
  color: #111;
  line-height: 1.25;
}
.dresium-tryon-section__note {
  font-size: 13px;
  color: #666;
  margin: 12px 0;
  line-height: 1.5;
}
.dresium-tryon-section__cta {
  margin-top: 16px;
  text-align: center;
}
/* Bottone secondario — replica di .dresium-btn--secondary WC */
.dresium-tryon-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  height: 40px;
  border: 1px solid var(--dresium-tryon-primary);
  border-radius: var(--dresium-tryon-radius);
  background: #ffffff;
  color: var(--dresium-tryon-primary);
  font-family: var(--dresium-tryon-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dresium-tryon-transition);
  outline: none;
}
.dresium-tryon-btn-secondary:hover:not(:disabled) {
  background: #f9fafb; /* --dresium-gray-50 */
  border-color: var(--dresium-tryon-primary-hover);
  color: var(--dresium-tryon-primary-hover);
}
.dresium-tryon-btn-secondary:focus-visible {
  outline: 2px solid var(--dresium-tryon-primary);
  outline-offset: 2px;
}
.dresium-tryon-btn-secondary:active:not(:disabled) {
  background: #f3f4f6; /* --dresium-gray-100 */
}
.dresium-tryon-btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
/* Sezione Try-On — product card */
.dresium-tryon-section--tryon {
  text-align: center;
}
.dresium-tryon-product-card {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: #fafafa;
  border-radius: 12px;
  margin-bottom: 24px;
  text-align: left;
}
.dresium-tryon-product-card__img {
  width: 100px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.dresium-tryon-product-card__info {
  flex-grow: 1;
}
.dresium-tryon-product-card__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: #111;
}
.dresium-tryon-product-card__hint {
  margin: 0;
  font-size: 13px;
  color: #666;
}
/* Sezione Account */
.dresium-tryon-account {
  border: 1px solid #e5e5e5;
  border-radius: var(--dresium-tryon-radius);
  overflow: hidden;
  margin-bottom: 12px;
}
.dresium-tryon-account__row {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}
.dresium-tryon-account__row:last-child {
  border-bottom: 0;
}
.dresium-tryon-account__label {
  color: #666;
  font-weight: 500;
}
.dresium-tryon-account__value {
  color: #111;
  font-weight: 500;
}
/* Sezione Supporto — FAQ */
.dresium-tryon-support {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
  margin-bottom: 20px;
}
.dresium-tryon-faq {
  padding: 12px 14px;
  background: #fafafa;
  border-radius: var(--dresium-tryon-radius);
  border-left: 3px solid var(--dresium-tryon-primary);
}
.dresium-tryon-faq__q {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: #111;
}
.dresium-tryon-faq__a {
  margin: 0;
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}
/* Responsive: mobile stack sidebar in cima orizzontale */

@media (max-width: 700px) {
  .dresium-tryon-modal--shell {
      flex-direction: column;
      height: 90vh;
      max-height: 90vh;
    }
  .dresium-tryon-shell__sidebar {
      width: 100%;
      padding: 12px;
      border-right: 0;
      border-bottom: 1px solid #1a1a1a;
      flex-direction: row;
      align-items: center;
      gap: 8px;
    }
  .dresium-tryon-shell__brand {
      padding: 0;
      border-bottom: 0;
      margin-bottom: 0;
      margin-right: 8px;
      flex-shrink: 0;
    }
  .dresium-tryon-shell__logo {
      max-height: 28px;
      max-width: 90px;
    }
  .dresium-tryon-nav {
      flex-direction: row;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
      flex-grow: 1;
    }
  .dresium-tryon-nav::-webkit-scrollbar {
      display: none;
    }
  .dresium-tryon-nav__item {
      padding: 6px 10px;
      font-size: 12px;
      white-space: nowrap;
    }
  .dresium-tryon-nav__label {
      display: none;
    }
  .dresium-tryon-nav__item.is-active .dresium-tryon-nav__label {
      display: inline;
    }
  .dresium-tryon-shell__footer {
      display: none;
    }
  .dresium-tryon-shell__content {
      padding: 16px;
    }
  .dresium-tryon-product-card__img {
      width: 72px;
      height: 90px;
    }
}

/* =================================================================
   M9b — Gallery generations customer (grid + filters + share/preview)
   ================================================================= */
.dresium-tryon-section--gallery {
  max-width: 720px;
}
.dresium-tryon-gallery-filters {
  padding: 12px 14px;
  background: #fafafa;
  border-radius: var(--dresium-tryon-radius);
  border: 1px solid #e5e5e5;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dresium-tryon-gallery-filters__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
}
.dresium-tryon-gallery-filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #555;
}
.dresium-tryon-gallery-filters__row label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dresium-tryon-gallery-filters__row input[type=date],
.dresium-tryon-gallery-filters__row select {
  padding: 4px 6px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  background: var(--dresium-tryon-white, #ffffff);
}
.dresium-tryon-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  min-height: 140px;
  margin-bottom: 16px;
}

@media (max-width: 700px) {
  .dresium-tryon-gallery-grid {
      grid-template-columns: repeat(2, 1fr);
    }
}

.dresium-tryon-gallery-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  background: #f5f5f5;
  border-radius: var(--dresium-tryon-radius);
  overflow: hidden;
  cursor: default;
}
.dresium-tryon-gallery-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dresium-tryon-gallery-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 40%);
  opacity: 0;
  transition: opacity 0.15s;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 8px;
}
.dresium-tryon-gallery-tile:hover .dresium-tryon-gallery-tile__overlay,
.dresium-tryon-gallery-tile:focus-within .dresium-tryon-gallery-tile__overlay {
  opacity: 1;
}
.dresium-tryon-gallery-tile__action {
  background: rgba(255, 255, 255, 0.9);
  color: #111;
  border: 0;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-decoration: none;
  line-height: 1;
}
.dresium-tryon-gallery-tile__action:hover {
  background: var(--dresium-tryon-white, #ffffff);
  transform: scale(1.1);
}
.dresium-tryon-gallery-tile__action--danger {
  background: rgba(255, 100, 100, 0.9);
  color: var(--dresium-tryon-white, #ffffff);
}
.dresium-tryon-gallery-tile__action--danger:hover {
  background: #d13434;
}
.dresium-tryon-gallery-tile__meta {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--dresium-tryon-white, #ffffff);
  font-size: 10px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.dresium-tryon-gallery-tile:hover .dresium-tryon-gallery-tile__meta {
  opacity: 1;
}
.dresium-tryon-gallery-tile__product {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dresium-tryon-gallery-tile__date {
  opacity: 0.85;
}
.dresium-tryon-gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 16px;
  color: #666;
  font-size: 13px;
}
.dresium-tryon-gallery-empty__icon {
  display: block;
  font-size: 32px;
  margin-bottom: 8px;
}
.dresium-tryon-gallery-empty__hint {
  font-size: 12px;
  color: #999;
  margin: 4px 0 0;
}
.dresium-tryon-gallery-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #555;
}
.dresium-tryon-gallery-pagination__info {
  font-weight: 500;
}
/* Preview fullscreen */
.dresium-tryon-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dresium-tryon-radius);
}
.dresium-tryon-preview {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}
.dresium-tryon-preview__close {
  position: absolute;
  top: -12px;
  right: -12px;
  background: var(--dresium-tryon-white, #ffffff);
  border: 0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.dresium-tryon-preview__img {
  max-width: 100%;
  max-height: 85vh;
  display: block;
  border-radius: 8px;
}
/* Share dialog */
.dresium-tryon-share {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dresium-tryon-share__btn {
  display: block;
  padding: 10px 14px;
  background: #f5f5f5;
  color: #111;
  border: 0;
  border-radius: var(--dresium-tryon-radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s;
}
.dresium-tryon-share__btn:hover {
  background: #e5e5e5;
}
.dresium-tryon-share__btn--copy {
  background: var(--dresium-tryon-primary);
  color: var(--dresium-tryon-white, #ffffff);
}
/* =================================================================
   M10 — Guest trial disabled state (login required)
   ================================================================= */
.dresium-tryon-login-required {
  padding: 32px 20px;
  text-align: center;
}
.dresium-tryon-login-required__icon {
  font-size: 40px;
  margin-bottom: 12px;
}
.dresium-tryon-login-required__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: #111;
}
.dresium-tryon-login-required__text {
  margin: 0 0 20px;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}
/* Toast non-blocking */
.dresium-tryon-toast {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: var(--dresium-tryon-white, #ffffff);
  padding: 10px 16px;
  border-radius: 20px;
  font-size: 13px;
  z-index: 20;
  animation: dresium-toast-in 0.2s ease-out;
  max-width: 90%;
  text-align: center;
}
@keyframes dresium-toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
/* =====================================================================
   M12 (2026-08-03) — Modale settings customer (dresium-tryon-main-modal)
   Replica visiva del dialog#dresium-main-modal del plugin WooCommerce
   Dresium (client/wp/wp-content/plugins/dresium/assets/css/dresium-main-modal.css).
   Le regole usano il selector .dresium-main-modal (identico WC) applicato
   al <dialog id="dresium-tryon-main-modal">. Scope aumentato con
   #dresium-tryon-main-modal per battere gli stili base del theme merchant
   che potrebbero sovrascrivere button/input reset.
   ===================================================================== */
/* Container ---------------------------------------------------------- */
/* Neutralize theme box-shadow overrides on buttons */
/* Sidebar ------------------------------------------------------------ */
/* Nav */
/* Sidebar footer credits */
/* Content area ------------------------------------------------------- */
/* Sections */
/* Dismissible info boxes -------------------------------------------- */
/* Style form -------------------------------------------------------- */
/* M20 (2026-09-02): primary "Save Settings" button — porting letterale da
   client/wp/wp-content/plugins/dresium/assets/css/dresium-main-modal.css:544-570.
   Nel DOM Shopify il bottone salvataggio ha classe .dresium-tryon-btn-primary
   (legacy naming, non BEM), quindi elenchiamo entrambi i selettori (WP-style
   + Shopify-current) per non spezzare compatibilità futura. */
/* Photo grid -------------------------------------------------------- */
/* Photo grid empty */
/* Photo grid loading spinner */
@keyframes dresium-main-modal-spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Outfit gallery grid ---------------------------------------------- */
/* Gallery pagination nav */
/* Gallery scope toggle (Questo prodotto / Tutte le mie prove) */
/* ============================================================
   Result Modal — 2026-08-05
   Modale finale dedicata alla generation completata. Indipendente
   dalla settings modal: pattern ispirato dall'estensione browser
   (focus totale sul risultato, no rumore dalla sidebar/nav).
   ============================================================ */
/* M15-r2: valori matching ext content-style.css:238-278 */
/* M15-fix-3: title logo allineato a sinistra (coerenza con Loading modal). */
/* M19: image-wrapper come .ext-dresium-result-image-wrapper
   (content-style.css:1311-1315) — bianco/trasparente, no gradient card,
   no min-height, no padding: la foto dimensiona il wrapper. Il radius
   e l'ombra sono sull'immagine, non sul wrapper. */
/* [hidden] attribute deve prevalere sui display sopra (alcuni temi
   Shopify hanno reset CSS che sovrascrivono display:none del browser). */
/* M15-r3: soft-disabled = look disabled ma click cattura per showAnimateInfoModal */
/* Share overlay: copre tutta l'immagine on hover con backdrop dark 40% +
   3 icone (48x48) centrate. Pattern letterale da
   ext/chrome/ui/content-style.css:1361-1375.
   M19: rimosso offset 12px (era per compensare padding del wrapper, ora
   il wrapper non ha più padding). Radius allineato a --radius-xl 16px
   dell'immagine sottostante. */
/* M14-H: Ingrandisci come icona floating bottom-right immagine, sempre visibile */
/* M15-fix-4b: zoom btn sempre cliccabile — z-index maggiore di
   share-overlay (5 vs 3). Prima veniva nascosto durante hover, ma
   utente si lamentava non poter zoomare mentre share overlay attivo. */
/* M15: Video element (M12d Anima). Absolute posizionato sopra l'img,
   stessi dim + border-radius. Reso visibile da JS quando c'e' un video. */
/* M15: Video play/pause toggle button (pattern ext content-script:629-634). */
/* ============================================================
   Zoom Modal (M14-B) — lightbox fullscreen per ingrandire il
   risultato try-on. Dialog indipendente dalla ResultModal.
   Pinch-to-zoom nativo via touch-action.
   ============================================================ */
/* M15-r4: zoom lightbox fullscreen — riscritto per fixare sovrapposizione
   bg. Prima problema: dialog default aveva padding/border/margin +
   container aveva flex duplicato del dialog → 2 layer visibili +
   backdrop scuro NON copriva bene i bordi.

   Fix: dialog senza padding/border/margin (regola reset esplicita
   per tutti i browser), 100vw x 100vh, backdrop nero pieno, container
   diventa solo un wrapper di flex-centering, image gia' contain nel
   viewport. */
/* ============================================================
   Loading Modal (trivia) — 2026-08-05
   Port da ext/chrome/content-script.js:593-621 e :1214-1301.
   Overlay full-screen mostrato durante la generation AI:
     - immagine prodotto in pulse (contesto visivo)
     - progress bar fake gradient viola-indaco (0→95% in 55s)
     - curiosita' rotanti ogni 8s con fade
   Chiusa dal JS al completamento/errore.
   ============================================================ */
/* M15-r2: valori matching ext content-style.css:238-278 */
/* M15-fix-3: brand logo grafico allineato a sinistra (feedback utente).
   Bg trasparente garantito da PNG RGBA 580x202 ext-source (verificato). */
/* Content row: img prod (small) a sinistra + info stack a destra.
   M19: replica .ext-dresium-generation-content-enhanced dell'estensione
   (content-style.css:1119-1130) — bianco pulito con border sottile,
   NON gradient background. */
/* ============================================================
   Event Preset Modal (M14-C) — modale intermedia tra 'Genera' e
   Loading. 4 preset occasione + toggle custom scene + Continua.
   Design coerente con ResultModal/LoadingModal (rounded 20px,
   backdrop blur, brand gradient).
   ============================================================ */
/* Responsive (mobile: fullscreen + sidebar orizzontale) */
/* ================================================================
   M24 (2026-09-02, rivisto post-M24-fix): CATEGORIA A rifinita.
   
   Contiene SOLO le regole utili senza effetti collaterali:
     1. :root con 92 CSS custom properties (design tokens Dresium)
     2. Cascade completa .dresium-main-modal__nav-item (10 regole)
     3. .dresium-btn--reset (bottone Ripristina) + .dresium-btn--disabled
     4. .dresium-logo (dimensioni logo in sidebar)
     5. Media query mobile per nav items
   
   RIMOSSO dal M24 originale (causava close-button e altri bottoni
   di collassare a size auto/padding 0):
     - Reset intra-modale su #dresium-tryon-main-modal button/input/p/h1-6/a
     - Era pensato per isolare il DOM dal tema del merchant, ma il WP
       aveva regole di override successive con !important per ripristinare
       width/height/padding dei bottoni specifici (close, save, reset) —
       io avevo scartato quelle regole come "buy-credits stuff". Errore.
       Meglio non applicare il reset se non ripristiniamo le proprietà.
   
   Fonte: /tmp/wp-css-category-a.css.
   ================================================================ */
/* ================================================================
   M35 (2026-09-03): Rimosso blocco :root legacy con ~90 var
   --dresium-* (senza prefix tryon-). Solo 7 var erano ancora
   referenziate (in crop.css) e sono state migrate direttamente
   al fallback numerico o al token --dresium-tryon-* equivalente.
   Il resto era dead code residuo del port WP.
   ================================================================ */
.dresium-logo {
    width: 100px;
    height: auto;
    display: block
    }
/* ================================================================
   M27 (2026-09-03): Tipografia forzata dei titoli — port letterale
   da dresium-base.css del plugin WP (righe 405-447).

   Il plugin WP applica queste override con !important sui titoli
   della Setting modal per neutralizzare l'ereditarietà dai temi
   WordPress aggressivi. Nel Shopify il problema equivalente è
   l'ereditarietà dal tema del merchant (font sistema, size heading
   del tema, weight bold dei tema Shopify).

   Risultato visivo:
     - h1..h6 dentro #dresium-tryon-main-modal:
         Poppins 18px semibold var(--dresium-tryon-black, #000000) line-height 1.5, margin 0
     - p dentro #dresium-tryon-main-modal:
         Inter 14px normal, line-height 1.5, margin 0

   Selettore rimappato #dresium-main-modal → #dresium-tryon-main-modal.
   Selettori #dresium-upload-modal del WP omessi (modale non presente
   nel Shopify — la logica upload usa <input> nascosto programmatico).

   Prima di M27:
     .dresium-main-modal__title era font-size 28px + League Spartan
     700 → titolo grosso e diverso dal WP.
   Dopo M27:
     La regola h1..h6 con !important vince → titolo 18px Poppins 600
     come nel WP.

   Rollback: rimuovere questo blocco fino a EOF.
   ================================================================ */
/* ================================================================
   M29 (2026-09-03): vibrate animation per feedback "foto già default"
   Port letterale da dresium-main-modal.css:1353-1362 del plugin WP.
   Usata dal handler click del bottone #dresium-tryon-select-photo-btn
   quando la foto selezionata è già la default corrente.
   ================================================================ */
/* ================================================================
   M32 (2026-09-03): Crop modal CSS — PORT LETTERALE da dresium-crop.css
   del plugin WP (client/wp/wp-content/plugins/dresium/assets/css/
   dresium-crop.css, 663 righe).

   Sostituisce il blocco M30 precedente (CSS scritto a mano).
   Selettori rimappati per matching DOM Shopify:
     #dresium-crop-modal              → #dresium-tryon-crop-modal
     .dresium-modal__header/body/... → .dresium-tryon-crop-modal__...
     .dresium-crop-warning/container → .dresium-tryon-crop-warning/container
     .dresium-crop-controls/-control → .dresium-tryon-crop-controls/-control
     .dresium-btn--reset             → .dresium-tryon-crop-modal__cancel-btn
     .dresium-btn--gradient          → .dresium-tryon-crop-modal__save-btn

   Regole scartate: .dresium-crop-overlay__* (variante inline non usata),
   #dresium-main-modal/#dresium-upload-modal (modali WP non presenti),
   .dresium-modal--large / .dresium-btn--lg / .dresium-btn--icon (variant
   button WP), regole con tag globali (body/html/*/
/* ================================================================
   M32-fix3 (2026-09-03): patch chirurgiche crop modal dopo diagnostic
   via getComputedStyle. Il port letterale WP CSS non copriva:
     1. .dresium-tryon-crop-modal__save-btn (era in dresium-buttons.css,
        non in dresium-crop.css, quindi il port l'ha saltato).
        Risultato: bottone "Carica foto ritagliata" appariva come
        pulsante browser default (bordo outset, background grigio).
     2. .dresium-tryon-crop-modal__title font-family Inter invece di
        Poppins (M27 copre solo #dresium-tryon-main-modal h1..h6).
   ================================================================ */
/* Save button "Carica foto ritagliata" — gradient primary WP */
/* Title crop modal — Poppins come titoli main modal */
/* Rinforzo dialog !important (già presente in M32-fix2, replicato in fondo
   per essere ultimo nella cascade in caso di regole successive del tema) */

/* ================================================================
   M55E (2026-09-08): Tipografia merchant-customizable.
   Il JS applyTypography setta 4 CSS var sul :root con il font
   scelto dal merchant. Le var vengono applicate a tutti i 7 root
   modali della extension:
     - .dresium-main-modal        (Setting/MSS: foto, stile, galleria)
     - .dresium-loading-modal     (generazione in corso)
     - .dresium-result-modal      (risultato + share)
     - .dresium-tryon-crop-modal  (crop pre-upload)
     - .dresium-event-preset-modal (scelta scenario)
     - .dresium-zoom-modal        (zoom immagine)
     - .dresium-tryon-confirm-modal (dialog conferma/alert)
   Ambito ristretto ai modali (non tocca il tema store). !important
   perche' regole storiche dichiarano font-family con !important.
   ================================================================ */
.dresium-main-modal button,
.dresium-loading-modal button,
.dresium-result-modal button,
.dresium-tryon-crop-modal button,
.dresium-event-preset-modal button,
.dresium-zoom-modal button,
.dresium-tryon-confirm-modal button,
.dresium-tryon-btn--main {
  font-family: var(--dresium-tryon-font-buttons) !important;
}

.dresium-main-modal h1,
.dresium-main-modal h2,
.dresium-main-modal h3,
.dresium-main-modal h4,
.dresium-main-modal h5,
.dresium-main-modal h6,
.dresium-loading-modal h1,
.dresium-loading-modal h2,
.dresium-loading-modal h3,
.dresium-loading-modal h4,
.dresium-loading-modal h5,
.dresium-loading-modal h6,
.dresium-result-modal h1,
.dresium-result-modal h2,
.dresium-result-modal h3,
.dresium-result-modal h4,
.dresium-result-modal h5,
.dresium-result-modal h6,
.dresium-tryon-crop-modal h1,
.dresium-tryon-crop-modal h2,
.dresium-tryon-crop-modal h3,
.dresium-tryon-crop-modal h4,
.dresium-tryon-crop-modal h5,
.dresium-tryon-crop-modal h6,
.dresium-event-preset-modal h1,
.dresium-event-preset-modal h2,
.dresium-event-preset-modal h3,
.dresium-event-preset-modal h4,
.dresium-event-preset-modal h5,
.dresium-event-preset-modal h6,
.dresium-zoom-modal h1,
.dresium-zoom-modal h2,
.dresium-zoom-modal h3,
.dresium-zoom-modal h4,
.dresium-zoom-modal h5,
.dresium-zoom-modal h6,
.dresium-tryon-confirm-modal h1,
.dresium-tryon-confirm-modal h2,
.dresium-tryon-confirm-modal h3,
.dresium-tryon-confirm-modal h4,
.dresium-tryon-confirm-modal h5,
.dresium-tryon-confirm-modal h6,
/* Titoli/subtitle "custom" delle modali che non usano h1..h6 */
.dresium-event-preset-modal__title,
.dresium-event-preset-modal__subtitle,
.dresium-tryon-crop-modal__title {
  font-family: var(--dresium-tryon-font-headings) !important;
}

.dresium-main-modal p,
.dresium-main-modal span,
.dresium-main-modal div,
.dresium-main-modal label,
.dresium-main-modal li,
.dresium-loading-modal p,
.dresium-loading-modal span,
.dresium-loading-modal div,
.dresium-loading-modal label,
.dresium-loading-modal li,
.dresium-result-modal p,
.dresium-result-modal span,
.dresium-result-modal div,
.dresium-result-modal label,
.dresium-result-modal li,
.dresium-tryon-crop-modal p,
.dresium-tryon-crop-modal span,
.dresium-tryon-crop-modal div,
.dresium-tryon-crop-modal label,
.dresium-tryon-crop-modal li,
.dresium-event-preset-modal p,
.dresium-event-preset-modal span,
.dresium-event-preset-modal div,
.dresium-event-preset-modal label,
.dresium-event-preset-modal li,
.dresium-zoom-modal p,
.dresium-zoom-modal span,
.dresium-zoom-modal div,
.dresium-zoom-modal label,
.dresium-zoom-modal li,
.dresium-tryon-confirm-modal p,
.dresium-tryon-confirm-modal span,
.dresium-tryon-confirm-modal div,
.dresium-tryon-confirm-modal label,
.dresium-tryon-confirm-modal li {
  font-family: var(--dresium-tryon-font-paragraphs);
}

.dresium-main-modal a,
.dresium-loading-modal a,
.dresium-result-modal a,
.dresium-tryon-crop-modal a,
.dresium-event-preset-modal a,
.dresium-zoom-modal a,
.dresium-tryon-confirm-modal a {
  font-family: var(--dresium-tryon-font-links) !important;
}

/* ============================================================
   2026-09-10: Override globale border-radius quando merchant lo
   configura dall'admin app Aspetto.

   Problema: la maggior parte dei componenti CSS delle modali usa
   `border-radius: XXpx` hardcoded (14, 18, 20, 24 ecc), ignorando
   la CSS var --dresium-tryon-radius. Impostare radius=0 dall'admin
   non aveva effetto su bottoni secondari, card, tile, notice, box
   dei dialog e delle sezioni interne.

   Fix: quando il JS setta `.dresium-tryon-radius-locked` sul <html>
   (dopo aver ricevuto appearance.button_radius_px dal backend),
   forziamo tutti i border-radius interni a `var(--dresium-tryon-radius)`
   con `!important` — batte anche i valori hardcoded.

   Eccezioni preservate: elementi circolari (avatar/badge/icona X)
   che usano `border-radius: 50%` o `999px`. Queste vengono lasciate
   invariate perche' semanticamente NON sono corner radius ma forma
   circolare/pill.

   Scope: solo `.dresium-tryon-block *` e dialoghi standalone (le
   modali sono fuori dal block container ma dentro <dialog>).
   ============================================================ */
.dresium-tryon-radius-locked .dresium-tryon-block *:not([style*="border-radius: 50%"]):not([style*="border-radius:999px"]):not([style*="border-radius: 999px"]),
.dresium-tryon-radius-locked dialog[id^="dresium-tryon-"],
.dresium-tryon-radius-locked dialog[id^="dresium-tryon-"] *,
.dresium-tryon-radius-locked .dresium-tryon-guest-modal,
.dresium-tryon-radius-locked .dresium-tryon-guest-modal *,
.dresium-tryon-radius-locked .dresium-loading-modal,
.dresium-tryon-radius-locked .dresium-loading-modal *,
.dresium-tryon-radius-locked .dresium-result-modal,
.dresium-tryon-radius-locked .dresium-result-modal *,
.dresium-tryon-radius-locked .dresium-event-preset-modal,
.dresium-tryon-radius-locked .dresium-event-preset-modal *,
.dresium-tryon-radius-locked .dresium-main-modal,
.dresium-tryon-radius-locked .dresium-main-modal *,
.dresium-tryon-radius-locked .dresium-tryon-confirm-modal,
.dresium-tryon-radius-locked .dresium-tryon-confirm-modal * {
  border-radius: var(--dresium-tryon-radius) !important;
}
/* Preserva la forma circolare/pill dove semanticamente richiesta:
   avatar, X close, step badge, checkbox, chip. Sono elementi che
   dovrebbero restare circolari indipendentemente dalla scelta radius
   del merchant. Overriamo di nuovo con selettori piu' specifici. */
.dresium-tryon-radius-locked .dresium-tryon-guest-modal__step-badge,
.dresium-tryon-radius-locked .dresium-tryon-guest-modal__close,
.dresium-tryon-radius-locked .dresium-tryon-guest-modal__notice-icon,
.dresium-tryon-radius-locked .dresium-result-modal__close,
.dresium-tryon-radius-locked .dresium-loading-modal__close,
.dresium-tryon-radius-locked .dresium-main-modal__close,
.dresium-tryon-radius-locked [class*="__badge"],
.dresium-tryon-radius-locked [class*="__avatar"],
.dresium-tryon-radius-locked [class*="__chip"] {
  border-radius: 50% !important;
}
/* Preserva pill button (preview replace) */
.dresium-tryon-radius-locked .dresium-tryon-guest-modal__preview-replace {
  border-radius: 999px !important;
}
/* 2026-09-10 (round 3): il main CTA storefront e il settings btn hanno
   il border-radius applicato INLINE con !important dal JS
   applyAppearanceToBlock. Non serve piu' il cascade lock su questi
   elementi — anzi, escluderli evita conflict di specificity in edge
   case. Reset esplicito: lascia che l'inline vinca senza interferenza. */
.dresium-tryon-radius-locked .dresium-tryon-btn--main,
.dresium-tryon-radius-locked .dresium-tryon-btn--settings {
  border-radius: inherit; /* Ereditato dal cascade, ma inline lo batte */
}

/* 2026-09-11 (user report): il cascade `.dresium-*-modal *` applicava il
   radius del merchant anche ai loghi Dresium (<img class="dresium-logo">,
   __brand-logo, __title-logo) — con radius alto (es. 32px) i corner
   "mangiavano" parte del logo dando l'impressione di taglio a destra.
   Il radius non ha senso semantico su un'immagine logo: e' un elemento
   grafico con edges gia' definiti dal PNG. Override esplicito a 0.

   2026-09-11 round 3: specificity fix. Il cascade
   `.dresium-tryon-radius-locked .dresium-main-modal *` ha specificity
   (0,2,1) — combinando `.dresium-tryon-radius-locked` + un altro
   discendente di classe + `.dresium-logo` (0,3,0) raggiungiamo (0,3,0)
   che batte sicuramente il cascade a `*`. Uso `unset` come richiesto
   dall'utente cosi' il logo eredita il valore neutro dal computed style
   dell'<img>. */
.dresium-tryon-radius-locked .dresium-main-modal .dresium-logo,
.dresium-tryon-radius-locked .dresium-main-modal [data-dresium-brand-logo],
.dresium-tryon-radius-locked .dresium-loading-modal .dresium-loading-modal__brand-logo,
.dresium-tryon-radius-locked .dresium-loading-modal [data-dresium-brand-logo],
.dresium-tryon-radius-locked .dresium-result-modal .dresium-result-modal__title-logo,
.dresium-tryon-radius-locked .dresium-result-modal [data-dresium-brand-logo],
.dresium-tryon-radius-locked [data-dresium-brand-logo].dresium-logo,
.dresium-tryon-radius-locked img.dresium-logo,
.dresium-tryon-radius-locked img[data-dresium-brand-logo] {
  border-radius: unset !important;
}

/* 2026-09-11: escludere .dresium-result-modal__share-overlay (e i suoi
   figli) dal cascade radius-locked. L'overlay social share ha share-btn
   circolari (border-radius: 50%) e il container overlay stesso non deve
   ricevere il radius del merchant — altera il layout del posizionamento
   assoluto sopra l'immagine.
   Specificity boost con `.dresium-result-modal` prefisso per battere il
   selettore wildcard `.dresium-tryon-radius-locked .dresium-result-modal *`
   (0,2,1) → il nostro (0,3,0) vince. */
.dresium-tryon-radius-locked .dresium-result-modal .dresium-result-modal__share-overlay,
.dresium-tryon-radius-locked .dresium-result-modal .dresium-result-modal__share-overlay * {
  border-radius: unset !important;
}
/* Ma i singoli share-btn dentro l'overlay DEVONO restare circolari
   (canonico 50%). Ripristina esplicitamente. */
.dresium-tryon-radius-locked .dresium-result-modal .dresium-result-modal__share-overlay .dresium-result-modal__share-btn {
  border-radius: 50% !important;
}

/* 2026-09-11 (user report, round 2): il vero problema del "logo tagliato
   a destra" era il container esterno. `.dresium-main-modal__container`
   ha `overflow: hidden` e riceve dal cascade radius-locked il radius del
   merchant. Con radius alto (es. 32px) il corner top-left del container
   diventa un quarto di cerchio grande che clippa la sidebar (dove sta il
   logo). Cap del radius del container a 12px max: il corner resta pulito
   ma non mangia mai i contenuti della sidebar. Idem per gli altri dialog
   container principali per coerenza. */
.dresium-tryon-radius-locked .dresium-main-modal__container,
.dresium-tryon-radius-locked .dresium-loading-modal__container,
.dresium-tryon-radius-locked .dresium-result-modal__container {
  border-radius: min(12px, var(--dresium-tryon-radius, 12px)) !important;
}

/* Sidebar del setting modal: mai border-radius applicato dal cascade.
   La sidebar sta appiccicata al bordo sinistro del container e non ha
   corners visibili propri — il radius verrebbe mangiato dall'overflow
   hidden del container comunque, ma esplicitamente = 0 evita edge case
   di rendering (sub-pixel gap tra sidebar-bg e container-bg). */
.dresium-tryon-radius-locked .dresium-main-modal__sidebar,
.dresium-tryon-radius-locked .dresium-main-modal__sidebar-header,
.dresium-tryon-radius-locked .dresium-main-modal__logo {
  border-radius: 0 !important;
}