/* ── Modal v2 : quand le template mobile v2 est chargé, on délègue tout à customize-modal-mobile.css ── */
#customizeModal.mob-modal * { box-sizing: border-box; }
#customizeModal.mob-modal .modal-content { padding: 0 !important; }

/* ── Modal Canvas-First : canvas en haut, bottom sheet en bas (main-design.php sur mobile) ── */
#customizeModal:not(.mob-modal) .modal-body {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
}

/* Canvas : prend tout l'espace disponible */
#customizeModal .visual-zone {
  flex: 1 1 auto;
  min-height: 0;
  order: 1;
  padding: 8px;
  border-radius: 0;
  overflow: hidden;
}

/* Panneau droit caché sur mobile */
#customizeModal .design-right-panel { display: none; }

/* Panneau gauche = bottom sheet, effacé par défaut (juste la tab bar) */
#customizeModal .design-left-panel {
  order: 2;
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  border-right: none;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: none;
  background: #111;
  display: flex;
  flex-direction: column-reverse;
  max-height: 52px;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* Sheet ouvert */
#customizeModal .design-left-panel.sheet-open {
  max-height: 50vh;
}

/* Tab bar compacte en bas du sheet */
#customizeModal .panel-tabs {
  flex-shrink: 0;
  height: 52px;
  width: 100%;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: none;
}

#customizeModal .panel-tab { flex: 1 1 0; height: 100%; }

/* Contenu du tab : scrollable au dessus de la tab bar */
#customizeModal .panel-tab-content {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 16px;
}

/* Bouton valider dans la tab bar (déplacé par JS) */
#customizeModal .panel-tabs #saveDesignButton {
  display: flex !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 8px !important;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

/* Footer desktop uniquement : caché sur mobile (bouton déplacé par JS)
   Les footers mobiles --summary et --actions ne sont pas affectés */
#customizeModal .modal-footer:not(.modal-footer--summary):not(.modal-footer--actions) { display: none; }

#product-sidebar { width: 100%; height: auto; }
#customizeModal #product2DContainer,
#customizeModal #product3DContainer {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
#customizeModal .visual-containers { flex-direction: column; padding: 10px 6px; height: auto; }
#product2DContainer, #product3DContainer { width: 100%; max-width: 100%; }
#product3DContainer { height: auto; aspect-ratio: 1; }
#product3DContainer > canvas { width: 100%; height: 100%; display: block; }
.ratio-filter { padding: 6px 36px 6px 12px; border: 1px solid #666; border-radius: 20px; background-color: #333; color: #000; font-size: var(--text-sm); background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%); background-position: right 12px center, right 6px center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
#customizeModal .visual-header { height: 80px; }
#customizeModal .image-controls {
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 8px 0;
}

#customizeModal.has-active-image .visual-zone .image-controls {
  display: none !important;
}

#customizeModal .footer-image-controls .image-controls button {
  width: calc(70% / 5 - 8px);
  aspect-ratio: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(32, 32, 32, 0.96), rgba(18, 18, 18, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  color: #f0f0f0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#customizeModal .footer-image-controls .image-controls button i {
  font-size: 1rem;
}

#customizeModal .footer-image-controls .image-controls button:active {
  transform: scale(0.92);
  background: linear-gradient(135deg, rgba(26, 188, 156, 0.25), rgba(26, 188, 156, 0.1));
  border-color: rgba(26, 188, 156, 0.45);
}

#customizeModal .footer-image-controls .image-controls button.remove-image-button {
  border-color: rgba(255, 93, 93, 0.45);
  background: linear-gradient(135deg, rgba(178, 59, 59, 0.92), rgba(178, 59, 59, 0.68));
}
/* ── imageSourceModal mobile : full-screen propre ── */
#imageSourceModal .modal-content {
  position: fixed;
  inset: 0;
  transform: none;
  width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0e0e0e;
}

/* column-reverse : .file-library-main (header+grille) s'affiche EN HAUT,
   .file-library-sidebar (tabs+upload) s'affiche EN BAS comme une tab bar */
#imageSourceModal .file-library-modal {
  display: flex;
  flex-direction: column-reverse;
  height: 100%;
  overflow: hidden;
  gap: 0;
}

/* ── Zone haute : header + grille ── */
.file-library-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
  border-radius: 0;
  overflow: hidden;
}

/* #file-grid legacy (fallback) */
#file-grid.file-library-grid { display: none; }

.file-library-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  background: #0e0e0e;
}
.file-library-title { font-size: 16px; font-weight: 700; }
.file-library-topbar .close-button {
  width: 36px; height: 36px;
  font-size: 22px; font-weight: 300;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: none; color: rgba(255,255,255,0.7); cursor: pointer;
}

/* ── .file-library-body : zone scrollable principale ── */
.file-library-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}
.file-library-body::-webkit-scrollbar { width: 4px; }
.file-library-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 999px; }

/* ── Recherche ── */
.file-controls {
  padding: 10px 12px 0;
}
#searchInput {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 13px;
  outline: none;
}
#searchInput::placeholder { color: rgba(255,255,255,0.35); }

/* ── Filtres ── */
.filter-sort {
  padding: 8px 12px;
  flex-direction: column;
  gap: 0;
}
.filters { width: 100%; }
.filter-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.filter-buttons::-webkit-scrollbar { display: none; }
.filter-buttons .format-main {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.filter-buttons .format-main.active {
  background: rgba(26,188,156,0.15);
  border-color: #1abc9c;
  color: #1abc9c;
}
#format-block { margin: 0; }

/* ── Grille 2 colonnes ── */
#fileList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 8px 12px;
}
/* Tuile carrée fiable : padding-bottom 100% + image absolue */
.file-list.grid-view .file-item {
  position: relative;
  height: 0;
  padding: 0 0 100% 0 !important;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08) !important;
  transform: none !important;
}
.file-list.grid-view .file-item:hover { transform: none !important; box-shadow: none; }
.file-list.grid-view .file-item img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  border: none !important;
  display: block;
}
/* Bouton menu (...) dans la tuile */
.file-list.grid-view .file-item .file-menu-button {
  position: absolute;
  top: 6px; right: 6px;
  z-index: 2;
}

/* ── Pagination ── */
#paginationControls { padding: 8px 12px 12px; }

/* ── Zone basse : tabs + upload (tab bar native) ── */
.file-library-sidebar {
  flex-direction: column;
  flex-shrink: 0;
  width: 100%;
  height: auto;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  gap: 8px;
  border-radius: 0;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: #111;
}

.file-library-sidebar .sidebar-title { display: none; }

.file-library-folders {
  flex-direction: row;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0;
  padding: 0;
}
.file-library-folders::-webkit-scrollbar { display: none; }
.file-library-sidebar button {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 10px;
  font-size: 11px;
  border-radius: 10px;
  white-space: nowrap;
}

/* Zone upload compacte — pas de drag/drop sur mobile */
.file-drop-zone {
  order: unset;
  padding: 0;
  border: none;
  background: none;
  margin: 0;
}
.file-drop-zone .dropzone-default {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
}
/* Cacher le texte "Glisser-déposer" et afficher seulement "parcourir" */
.file-drop-zone .dropzone-default span { display: none; }
.file-drop-zone .dropzone-default::after {
  content: 'Importer une image';
  font-size: 13px;
  font-weight: 600;
}

/* Contrôles filtres */
.file-controls { flex-direction: column; align-items: stretch; gap: 8px; }
.filter-sort { flex-direction: column; align-items: stretch; gap: 8px; }
.filters { width: 100%; }
.filter-buttons { flex-wrap: nowrap; gap: 6px; }
.filter-buttons button { flex: 1; font-size: 11px; padding: 7px 8px; }
.sort-wrapper { width: 100%; justify-content: flex-start; }

#paginationControls { padding: 8px 0 0; }
body { overflow: hidden; }
#header { position: sticky; top: 0; width: 100%; z-index: 1000; }
.container { flex-direction: column; height: calc(100dvh - var(--header-height, 50px)); padding-top: 0; padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box; }
.main-content { flex-direction: column; overflow-y: auto; height: calc(100dvh - var(--header-height, 50px) - env(safe-area-inset-bottom, 0px)); }
.background { padding: 0; height: auto; align-items: center; }
.background-image { display: none; }
.product-info, .product-details { position: static; width: 100%; padding: 10px; text-align: center; }
.product-details { align-items: center; padding-bottom: env(safe-area-inset-bottom, 0px); }
.product-name { font-size: var(--text-lg); margin: 10px 0; }
.product-variant-options, .product-description, .product-actions { justify-content: center; display: flex; flex-direction: column; align-items: stretch; }
.product-variant-options, .product-description { max-width: 420px; width: 100%; margin-left: auto; margin-right: auto; }
.product-variant-options .product-option-group { width: 100%; }
.product-variant-options .option-values-container { justify-content: center; flex-wrap: wrap; }
.product-variant-options .option-select,
.product-variant-options .size-select-wrapper { width: 100%; }
.product-variant-options .option-btn.size-option { min-height: 40px; min-width: 44px; }
.product-actions.product-actions--primary { width: 100%; max-width: 420px; margin: 16px auto 12px; }
.product-actions.product-actions--primary .design-button { width: 100%; }
.product-description { order: 2; }
.product-details__cards { gap: 16px; }
.product-details__card { margin: 0 auto; max-width: 420px; text-align: left; }
.product-actions.product-actions--secondary { max-width: 420px; width: 100%; margin: 0 auto; margin-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.product-actions.product-actions--bottom { display: flex; flex-direction: row; align-items: center; gap: 12px; width: 100%; padding: 0 12px 12px; }
.product-actions.product-actions--bottom .design-button { flex: 1; width: auto; border-radius: 12px; }
.product-actions.product-actions--bottom .add-to-cart-button { width: 48px; height: 48px; padding: 0; border-radius: 12px; flex: 0 0 auto; font-size: 0; letter-spacing: normal; }
.product-actions.product-actions--bottom .add-to-cart-button i { font-size: 18px; }
.product-actions.product-actions--bottom.is-hidden { display: none; }
.product-visual-container { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; touch-action: pan-y; }
.product-visual-container.is-3d-active { touch-action: none; }
.product-image { position: relative !important; top: auto !important; left: auto !important; transform: none !important; margin: 20px auto; display: block; max-width: 100%; }
.image-thumbnails { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; gap: 8px; padding: 0; margin: 0; background: transparent; border: none; box-shadow: none; backdrop-filter: none; z-index: 10; max-width: 90%; flex-wrap: wrap; }
.image-thumbnails::-webkit-scrollbar { display: none; }
.image-thumbnails .thumbnail { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #000000; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); cursor: pointer; flex-shrink: 0; transition: background 0.2s ease, border-color 0.2s ease, width 0.2s ease, height 0.2s ease; margin: 0; padding: 0; filter: none; transform: none !important; object-fit: none; object-position: 9999px 9999px; }.image-thumbnails .thumbnail:hover { transform: none !important; }
.image-thumbnails .thumbnail.selected { width: 13px; height: 13px; background: #3a3a3a; border-color: #ffffff; box-shadow: none; }
.image-thumbnails .thumbnail.three-d-thumb { order: 99; font-size: 0; display: flex; align-items: center; justify-content: center; }
.image-thumbnails .thumbnail.three-d-thumb::after { content: "3D"; font-size: 5px; color: inherit; font-weight: bold; }
.options-list { top: 45px; left: 0; width: 100%; }
.product-selector { width: 100%; margin-top: 10px; align-items: center; }
.custom-select { width: 100%; max-width: 420px; min-height: 64px; }
.selected-item { padding: 14px 18px; }
.options-list { left: 0; right: 0; width: 100%; }
.bottom-bar { display: none; }