#customizeModal .modal-body { flex-direction: column; overflow-y: hidden; }
#customizeModal .modal-header {
  align-items: stretch;
  padding: 8px 16px;
}
#customizeModal .modal-header .close-button {
  align-self: stretch;
  height: auto;
  min-width: 44px;
  padding: 0 16px;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  font-size: 1.6rem;
  line-height: 1;
}
#customizeModal .modal-header .close-button:hover,
#customizeModal .modal-header .close-button:focus-visible {
  transform: none;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
#customizeModal .modal-sidebar { flex-direction: row; justify-content: center; align-items: stretch; width: 100%; min-width: 0; padding: 10px 6px; gap: 12px; }
#customizeModal .sidebar-btn { flex: 1 1 0; }
#product-sidebar { width: 100%; height: auto; }
#customizeModal .visual-zone { padding: 10px 6px; }
#customizeModal .visual-zone { width: 100%; flex-grow: 1; height: 100%; overflow-y: auto; }
#customizeModal .visual-zone { border-radius: 0; }
#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: 14px; 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 .modal-content { position: fixed; inset: 0; transform: none; width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; padding: 16px; box-sizing: border-box; display: flex; flex-direction: column; overflow-y: auto; }
#imageSourceModal .file-library-modal { flex-direction: column; gap: 16px; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.file-library-sidebar { flex-direction: column; width: 100%; height: auto; padding: 16px; gap: 12px; border-radius: 20px; border: 1px solid var(--file-library-border); background: rgba(20, 20, 20, 0.92); }
.file-library-sidebar .sidebar-title { flex-basis: auto; text-align: left; margin-bottom: 0; }
.file-library-folders { flex-direction: row; gap: 10px; overflow-x: auto; padding-bottom: 6px; margin: 0 -4px; padding-left: 4px; padding-right: 4px; }
.file-library-folders::-webkit-scrollbar { height: 6px; }
.file-library-folders::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 999px; }
.file-library-sidebar button { flex: 0 0 auto; white-space: nowrap; padding: 10px 18px; }
.file-drop-zone { order: 3; margin-top: 4px; padding: 14px; }
.file-library-main { padding: 16px; gap: 16px; border-radius: 20px; flex: 1; min-height: 0; }
.file-library-topbar { padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.file-library-title { font-size: 1.1rem; }
.file-library-topbar .close-button { width: 38px; height: 38px; font-size: 1.35rem; }
.file-library-body { gap: 16px; flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; -webkit-overflow-scrolling: touch; }
.file-library-body::-webkit-scrollbar { width: 6px; }
.file-library-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 999px; }
.file-controls { flex-direction: column; align-items: stretch; gap: 10px; }
.filter-sort { flex-direction: column; align-items: stretch; gap: 12px; }
.filters { width: 100%; }
.filter-buttons { flex-wrap: nowrap; gap: 8px; }
.filter-buttons button { flex: 1; }
.sort-wrapper { width: 100%; justify-content: flex-start; }
#fileList { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.file-list.grid-view .file-item { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.file-list.grid-view .file-item img { width: 100%; height: 100%; object-fit: contain; }
#paginationControls { padding-top: 4px; }
body { overflow: hidden; }
#header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; }
.container { flex-direction: column; height: 100dvh; padding-top: var(--header-height, 88px); 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, 88px) - 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: 1.3rem; margin: 10px 0; }
.product-sizes, .product-colors, .product-description, .product-actions { justify-content: center; display: flex; flex-direction: column; align-items: stretch; }
.product-sizes, .product-description { max-width: 420px; width: 100%; }
.product-colors { max-width: 420px; width: 100%; margin-left: auto; margin-right: auto; }
.product-colors .colors-container { justify-content: center; }
.product-sizes .sizes-container { justify-content: center; }
.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; }