/**
 * DekSmart Canada — Smart Designer Styles
 * Faithfully implementing Figma specs for the Smart Designer tool
 */

/* ==========================================================================
   Page & Layout Framework
   ========================================================================== */

.smart-designer-page {
  background-color: transparent !important;
  color: var(--color-foundation-black, #2a3132);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Header Region: Height sets where the visualizer starts (y: 285 on desktop) */
.header.header--smart-designer {
  position: relative;
  background-color: transparent !important;
  height: 285px;
  min-height: 285px;
  padding: 0;
  margin: 0;
  overflow: visible !important;
  /* Deliberately NOT a stacking context. A z-index here traps the offcanvas
     nav and its backdrop (9998/9999, markup children of the header) inside it,
     so the whole header resolves as one layer and .smart-designer-main (15)
     paints over the open drawer. With z-index:auto the header's descendants
     join the root context: swoop 1 stays behind the scene, nav 50 clears it,
     and the drawer lands on top where it belongs. */
  z-index: auto;
}

/* Unified Background SVG (Blue Swoop + 3 Swoosh Lines) */
.header__bg--smart-designer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1920px;
  height: 800px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.header__bg-swoop-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Nav Bar sits at y: 0 to 87 */
.header--smart-designer .header__nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
}

/* Heading section: h: 70px, so the heading runs y: 160-230 */
.header.header--smart-designer .header__inner--smart-designer {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 160px 20px 0 20px;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box;
  text-align: center;
  z-index: 10;
}

.smart-designer-header__title-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  height: 70px;
}

.smart-designer-header__icon {
  font-size: 38px;
  color: var(--color-foundation-white, #ffffff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.smart-designer-header__title {
  font-family: var(--font-headline, "Playfair Display", serif);
  font-size: clamp(34px, 3.6vw, 50px);
  font-weight: 700;
  color: var(--color-foundation-white, #ffffff);
  letter-spacing: 1.5px;
  margin: 0;
  line-height: 1;
  text-transform: uppercase;
}

/* Main Container: Flows naturally right after Header (at y: 387px), OVERLAYING the background SVG */
.smart-designer-main {
  max-width: 1440px;
  margin: 0 auto 60px auto;
  padding: 0 24px;
  position: relative;
  z-index: 15;
}

/* ==========================================================================
   Visualizer Preview Region
   ========================================================================== */

.smart-designer__visualizer-container {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.smart-designer__visualizer {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 800;
  height: auto;
  border-radius: 200px 20px 200px 20px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  background-color: #1a2228;
  user-select: none;
  -webkit-user-select: none;
  z-index: 15;
}

/* Visualizer Layers */
.smart-designer__pattern-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.smart-designer__stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Foreground Stage: Overlays overtop on ALL scenes and modes */
.smart-designer__foreground-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

/* Image scaling: Scaled at 100% 100% specifically so we get absolutely no visual shift */
.smart-designer__pattern-img,
.smart-designer__bg-img,
.smart-designer__compare-img,
.smart-designer__foreground-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  display: block;
}

.smart-designer__pattern-img,
.smart-designer__bg-img {
  transition: opacity 0.3s ease-in-out;
}

.smart-designer__pattern-img--next {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  display: block;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.4s ease-in-out;
}

.smart-designer__foreground-img {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.3s ease-in-out;
}

.smart-designer__bg-img.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Loading Overlay */
/* One appearance for every wait state: the look must never change mid-fade, or it reads as a flash */
.smart-designer__loader {
  position: absolute;
  inset: 0;
  background: rgba(26, 34, 40, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 25;
  opacity: 0;
  pointer-events: none;
  /* Keep in sync with LOADER_FADE_MS in smart-designer.js */
  transition: opacity 0.26s ease;
}

.smart-designer__loader.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Opaque boot backdrop; JS drops this class only after the fade-out has finished */
.smart-designer__loader.is-solid {
  background: #1a2228;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Initializing State: Hide foreground and pattern layers until system assigns correct pattern */
.smart-designer.is-initializing .smart-designer__pattern-layer,
.smart-designer.is-initializing .smart-designer__foreground-stage,
.smart-designer.is-initializing .smart-designer__badge {
  opacity: 0 !important;
  visibility: hidden !important;
}

.smart-designer__pattern-layer,
.smart-designer__foreground-stage {
  transition: opacity 0.35s ease;
}

.smart-designer__spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--color-accent-medium-blue, #4b738e);
  border-radius: 50%;
  animation: sd-spin 0.8s linear infinite;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

.smart-designer__loader-text {
  color: #ffffff;
  font-family: var(--font-body, "Zalando Sans", sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

@keyframes sd-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   Overlay Pattern Badges (Single & Compare Modes)
   ========================================================================== */

.smart-designer__badge {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 60px 20px 60px 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  z-index: 20;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  padding: 0;
}

.smart-designer__badge:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.smart-designer__badge-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.45) 100%);
  z-index: 1;
}

.smart-designer__badge-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px;
}

.smart-designer__badge-name {
  font-family: var(--font-body, "Zalando Sans", sans-serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75);
}

.smart-designer__badge-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 14px;
  transition: background 0.2s ease;
}

.smart-designer__badge:hover .smart-designer__badge-cta {
  background: rgba(255, 255, 255, 0.5);
}

/* Badge Positioning */
.smart-designer__badge--top-right {
  top: 30px;
  right: 30px;
}

.smart-designer__badge--bottom-left {
  display: none;
  bottom: 30px;
  left: 30px;
}

.smart-designer.is-compare .smart-designer__badge--bottom-left {
  display: flex !important;
}

/* ==========================================================================
   Compare Mode Split-View Slider
   ========================================================================== */

.smart-designer__compare-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  cursor: ew-resize;
}

.smart-designer.is-compare .smart-designer__compare-wrap {
  display: block;
}

.smart-designer.is-compare .smart-designer__stage--single {
  display: none;
}

.smart-designer__compare-side {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.smart-designer__compare-side--left {
  z-index: 2;
  width: 100%;
  clip-path: inset(0 calc(100% - var(--sd-split, 50%)) 0 0);
  -webkit-clip-path: inset(0 calc(100% - var(--sd-split, 50%)) 0 0);
}

.smart-designer__compare-side--right {
  z-index: 1;
  width: 100%;
}

.smart-designer__compare-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Slider Handle: ONLY shown when Compare mode is active */
.smart-designer__compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--sd-split, 50%);
  width: 80px;
  transform: translateX(-50%);
  z-index: 15;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.smart-designer.is-compare .smart-designer__compare-handle {
  display: flex;
}

.smart-designer__compare-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background-color: #ffffff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.smart-designer__compare-knob {
  position: relative;
  z-index: 2;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-primary-blue, #273d4c);
  font-size: 16px;
  pointer-events: auto;
  cursor: grab;
  transition: transform 0.15s ease;
}

.smart-designer__compare-knob:active {
  cursor: grabbing;
  transform: scale(1.08);
}

/* ==========================================================================
   Controls Toolbar
   ========================================================================== */

.smart-designer__toolbar-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: -27px;
  z-index: 25;
}

.smart-designer__toolbar {
  background-color: var(--color-primary-blue, #273d4c);
  border-radius: 30px;
  padding: 7px 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  max-width: 100%;
  position: relative;
  overflow: visible;
}

.smart-designer__toolbar::-webkit-scrollbar {
  display: none;
}

.smart-designer__control-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: var(--font-body, "Zalando Sans", sans-serif);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.smart-designer__control-btn:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.12);
}

/* No ring on click, but keyboard focus stays visible */
.smart-designer__control-btn:focus,
.smart-designer__scene-item:focus {
  outline: none;
}

.smart-designer__control-btn:focus-visible,
.smart-designer__scene-item:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

.smart-designer__control-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.smart-designer__control-btn i {
  font-size: 16px;
}

/* Compare Button: Matches other buttons by default */
.smart-designer__control-btn--compare {
  background-color: transparent;
}

/* Highlighted Compare Button ONLY when Compare is active ("EXIT COMPARE") */
.smart-designer.is-compare .smart-designer__control-btn--compare {
  background-color: var(--color-accent-medium-blue, #4b738e);
  color: #ffffff;
}

.smart-designer.is-compare .smart-designer__control-btn--compare:hover:not(:disabled) {
  background-color: var(--color-accent-medium-blue-hover, #5d8199);
}

/* Toolbar Separator */
.smart-designer__toolbar-divider {
  width: 1px;
  height: 22px;
  background-color: rgba(255, 255, 255, 0.25);
  margin: 0 4px;
}

/* Scene Dropdown Wrap */
.smart-designer__scene-dropdown-wrap {
  position: relative;
}

.smart-designer__scene-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background-color: var(--color-primary-blue, #273d4c);
  border-radius: 12px;
  /* Inset so hover/selected fills stay clear of the rounded corners */
  padding: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 50;
  display: none;
  flex-direction: column;
}

.smart-designer__scene-menu.is-open {
  display: flex;
}

.smart-designer__scene-item {
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: var(--font-body, "Zalando Sans", sans-serif);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  width: 100%;
  white-space: nowrap;
}

.smart-designer__scene-item:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.smart-designer__scene-item.is-selected {
  background-color: var(--color-accent-medium-blue, #4b738e);
  font-weight: 700;
}

/* Bookmark Wrap & Discrete Popover */
.smart-designer__bookmark-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.smart-designer__bookmark-popover {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 280px;
  background: rgba(26, 34, 40, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  padding: 16px;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.smart-designer__bookmark-popover.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.smart-designer__bookmark-popover-arrow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #1a2228;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.smart-designer__bookmark-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.smart-designer__bookmark-popover-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body, "Zalando Sans", sans-serif);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.smart-designer__bookmark-popover-title i {
  color: #f5b335;
  font-size: 14px;
}

.smart-designer__bookmark-popover-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.smart-designer__bookmark-popover-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.smart-designer__bookmark-popover-body p {
  font-family: var(--font-body, "Zalando Sans", sans-serif);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 10px 0;
  line-height: 1.4;
  text-align: center;
}

.smart-designer__bookmark-shortcut {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

.smart-designer__bookmark-shortcut kbd {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 8px;
  min-width: 24px;
  text-align: center;
  display: inline-block;
}

.smart-designer__bookmark-subtext {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin-top: 4px;
}

.smart-designer__bookmark-popover-actions {
  margin-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 12px;
}

.smart-designer__bookmark-copy-btn {
  width: 100%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border-radius: 8px;
  padding: 8px 12px;
  font-family: var(--font-body, "Zalando Sans", sans-serif);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.smart-designer__bookmark-copy-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
}

.smart-designer__bookmark-copy-btn.is-copied {
  background: #2ea44f;
  border-color: #2ea44f;
}

/* Hidden items in Compare mode */
.smart-designer.is-compare .sd-hide-on-compare {
  display: none !important;
}

/* ==========================================================================
   Scale Disclaimer (between the toolbar and the pattern card)
   ========================================================================== */

.smart-designer__disclaimer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 28px 0 0 0;
  font-family: var(--font-body, "Zalando Sans", sans-serif);
  font-size: 13px;
  line-height: 1.4;
  color: rgba(39, 61, 76, 0.65);
}

.smart-designer__disclaimer i {
  font-size: 14px;
  color: var(--color-primary-blue, #273d4c);
  opacity: 0.55;
  flex: 0 0 auto;
}

/* Match the gap above, so the line sits centred between the toolbar and the card. */
.smart-designer__disclaimer + .smart-designer__patterns-card {
  margin-top: 28px;
}

/* ==========================================================================
   Pattern Selector Card (Bottom)
   ========================================================================== */

.smart-designer__patterns-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.07);
  padding: 40px 48px;
  margin: 32px 0 50px 0;
  transition: opacity 0.25s ease;
}

.smart-designer.is-compare .smart-designer__patterns-card {
  display: none;
}

.smart-designer__patterns-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.smart-designer__patterns-card-header i {
  font-size: 24px;
  color: var(--color-primary-blue, #273d4c);
}

.smart-designer__patterns-card-title {
  font-family: var(--font-body, "Zalando Sans", sans-serif);
  font-size: 24px;
  font-weight: 800;
  color: var(--color-primary-blue, #273d4c);
  margin: 0;
}

.smart-designer__category-group {
  margin-bottom: 32px;
}

.smart-designer__category-group:last-child {
  margin-bottom: 0;
}

.smart-designer__category-title {
  font-family: var(--font-body, "Zalando Sans", sans-serif);
  font-size: 18px;
  font-weight: 800;
  color: var(--color-primary-blue, #273d4c);
  margin: 0 0 16px 0;
}

.smart-designer__swatches-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 20px;
}

/* Swatch Item */
.smart-designer__swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
}

.smart-designer__swatch-img-wrap {
  width: 100px;
  height: 100px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.smart-designer__swatch-img {
  width: 100px;
  height: 100px;
  border-radius: 30px 12px 30px 12px;
  object-fit: cover;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.smart-designer__swatch:hover .smart-designer__swatch-img {
  transform: translateY(-2px);
}

/* Active Swatch Requirement: 2px white space + 1px colored ring */
.smart-designer__swatch.is-active .smart-designer__swatch-img {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3.5px var(--color-accent-medium-blue, #4b738e);
}

.smart-designer__swatch-label {
  margin-top: 10px;
  font-family: var(--font-body, "Zalando Sans", sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-foundation-black, #2a3132);
  text-align: center;
  line-height: 1.25;
  transition: color 0.15s ease, font-weight 0.15s ease;
}

.smart-designer__swatch.is-active .smart-designer__swatch-label {
  color: var(--color-accent-medium-blue, #4b738e);
  font-weight: 800;
}

/* ==========================================================================
   Modals (Pattern Chooser & Share)
   ========================================================================== */

.smart-designer-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.smart-designer-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Lock page scroll behind any open modal */
html:has(.smart-designer-modal.is-open) {
  overflow: hidden;
}

.smart-designer-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 28, 35, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.smart-designer-modal__dialog {
  position: relative;
  z-index: 2;
  background: var(--color-foundation-lightest-beige, #f8f7f7);
  border-radius: 20px;
  box-shadow: 2px 4px 20px rgba(76, 88, 95, 0.35);
  width: 100%;
  max-width: 900px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 36px 40px;
  transform: scale(0.95);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.smart-designer-modal.is-open .smart-designer-modal__dialog {
  transform: scale(1);
}

.smart-designer-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.smart-designer-modal__title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.smart-designer-modal__title-wrap i {
  font-size: 24px;
  color: var(--color-primary-blue, #273d4c);
}

.smart-designer-modal__title {
  font-family: var(--font-body, "Zalando Sans", sans-serif);
  font-size: 24px;
  font-weight: 800;
  color: var(--color-primary-blue, #273d4c);
  margin: 0;
}

.smart-designer-modal__close {
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--color-foundation-black, #2a3132);
  cursor: pointer;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  max-width: 36px;
  max-height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.smart-designer-modal__close i {
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
}

.smart-designer-modal__close:hover {
  background-color: rgba(0, 0, 0, 0.08);
  transform: rotate(90deg);
}

/* Modal Swatches Active State (2px gap + 1px colored ring) */
.smart-designer-modal .smart-designer__swatch.is-active .smart-designer__swatch-img {
  box-shadow: 0 0 0 2px var(--color-foundation-lightest-beige, #f8f7f7), 0 0 0 3.5px var(--color-accent-medium-blue, #4b738e);
}

/* Custom Modal Scrollbar */
.smart-designer-modal__dialog::-webkit-scrollbar {
  width: 6px;
}

.smart-designer-modal__dialog::-webkit-scrollbar-track {
  background: transparent;
}

.smart-designer-modal__dialog::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
}

/* Share Modal Specifics */
.smart-designer-modal--share .smart-designer-modal__dialog {
  max-width: 480px;
}

.smart-designer-share__link-box {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.smart-designer-share__input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #d0d7dc;
  font-family: var(--font-body, "Zalando Sans", sans-serif);
  font-size: 14px;
  background: #ffffff;
  color: var(--color-foundation-black, #2a3132);
}

.smart-designer-share__copy-btn {
  background-color: var(--color-primary-blue, #273d4c);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-family: var(--font-body, "Zalando Sans", sans-serif);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.smart-designer-share__copy-btn:hover {
  background-color: var(--color-accent-medium-blue, #4b738e);
}

.smart-designer-share__actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.smart-designer-share__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 8px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8ec;
  color: var(--color-primary-blue, #273d4c);
  text-decoration: none;
  font-family: var(--font-body, "Zalando Sans", sans-serif);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.smart-designer-share__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background: #ffffff;
}

.smart-designer-share__btn i {
  font-size: 24px;
}

.smart-designer-share__btn--messenger i { color: #0084ff; }
.smart-designer-share__btn--whatsapp i { color: #25d366; }
.smart-designer-share__btn--email i { color: #4b738e; }

/* Toast Notifications */
.smart-designer-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--color-primary-blue, #273d4c);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 30px;
  font-family: var(--font-body, "Zalando Sans", sans-serif);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10000;
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  pointer-events: none;
}

.smart-designer-toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.smart-designer-toast i {
  color: #55d688;
  font-size: 16px;
}

/* ==========================================================================
   Mobile (< 1200px)
   --------------------------------------------------------------------------
   The tool becomes a one-viewport app shell: a compact header, the scene, the
   control bar tucked under it, and a single inner scroller holding the
   swatches. Scroll chaining is left ON — once the swatch list bottoms out, the
   same gesture carries the page down to the footer.

   Every scene layer is inset:0 / object-fit:fill, so foreground and background
   registration is bound to the container box, not to any pixel size. That is
   what makes it safe to cap the scene by height: the box shrinks, the pattern
   alignment cannot drift.
   ========================================================================== */

@media (max-width: 1199px) {
  :root {
    --sd-nav-h: clamp(64px, 6vw, 72px);
    --sd-title-h: 34px;
    --sd-header-h: calc(var(--sd-nav-h) + var(--sd-title-h) + 14px);
    --sd-scene-max-h: 40dvh;
  }

  /* --- Header: small, left-aligned, pulled tight to the nav --- */
  .header.header--smart-designer {
    height: var(--sd-header-h);
    min-height: var(--sd-header-h);
  }

  .header.header--smart-designer .header__inner--smart-designer {
    max-width: none;
    padding: calc(var(--sd-nav-h) + 4px) 16px 0 16px;
    text-align: left;
  }

  /* preserveAspectRatio="none" on the swoop SVG, so width and height are free
     to be set independently — the curve just restretches to the new box. */
  .header__bg--smart-designer {
    left: 0;
    transform: none;
    width: 100%;
    height: calc(var(--sd-header-h) + 20dvh);
  }

  .smart-designer-header__title-wrap {
    display: flex;
    justify-content: flex-start;
    height: var(--sd-title-h);
    gap: 10px;
  }

  .smart-designer-header__icon {
    font-size: 18px;
  }

  .smart-designer-header__title {
    font-size: 22px;
    letter-spacing: 1px;
  }

  /* --- App shell --- */
  .smart-designer-page {
    min-height: 0;
  }

  .smart-designer-main {
    max-width: none;
    height: calc(100dvh - var(--sd-header-h));
    margin: 0 auto;
    padding: 0;
  }

  .smart-designer {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .smart-designer__visualizer-container,
  .smart-designer__toolbar-wrap {
    flex: 0 0 auto;
  }

  /* Cap the scene through the container's WIDTH, never its height: with
     aspect-ratio set, a max-height would clamp the height while width stayed
     at 100%, squashing the scene. Bounding the width keeps the ratio exact. */
  .smart-designer__visualizer-container {
    max-width: min(100%, calc(var(--sd-scene-max-h) * 1.8));
  }

  .smart-designer__visualizer {
    border-radius: 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  }

  /* --- Pattern badge: sized off the scene, not a fixed px --- */
  .smart-designer__badge {
    width: clamp(78px, 24%, 116px);
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 26px 10px 26px 10px;
  }

  .smart-designer__badge-name {
    font-size: 12px;
  }

  .smart-designer__badge-cta {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .smart-designer__badge--top-right {
    top: 10px;
    right: 10px;
  }

  /* The bar rides 18px up into the scene, so a 10px offset puts the compare
     badge 8px underneath it. Clear the overlap plus a gap. */
  .smart-designer__badge--bottom-left {
    bottom: 30px;
    left: 10px;
  }

  .smart-designer__compare-knob {
    width: 46px;
    height: 46px;
    font-size: 12px;
    gap: 4px;
  }

  /* --- Control bar: stays under the scene, in flow --- */
  .smart-designer__toolbar-wrap {
    margin-top: -18px;
    padding: 0 10px;
  }

  .smart-designer__toolbar {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 4px 8px;
    gap: 0;
    border-radius: 24px;
  }

  .smart-designer__control-btn {
    font-size: 11px;
    padding: 6px 7px;
    gap: 4px;
  }

  .smart-designer__control-btn i {
    font-size: 14px;
  }

  .smart-designer__toolbar-divider {
    display: none;
  }

  /* Open the scene menu UPWARD over the scene. Downward puts it below the bar,
     which in compare mode is outside .smart-designer-main (height:auto once the
     swatch card is hidden) and gets eaten by .smart-designer-page -- its
     overflow-x:hidden forces overflow-y to auto, so that box clips it. Upward
     always has the scene's height to land in, and in normal mode it also stops
     the menu covering the "Choose Pattern" heading. */
  /* The base rule pins the menu to the button via left:0/right:0, but the
     items are nowrap inside an overflow:hidden box -- so a narrow button
     clipped "Zoomed Out". Size to content, never narrower than the button. */
  .smart-designer__scene-menu {
    top: auto;
    bottom: calc(100% + 10px);
    right: auto;
    width: max-content;
    min-width: 100%;
    max-width: 60vw;
  }

  .smart-designer__scene-item {
    font-size: 13px;
  }

  /* Icon-only — every one of these already carries an aria-label, so the
     accessible name survives dropping the visible text. */
  #sd-bookmark span,
  #sd-download span,
  #sd-share span,
  .smart-designer__scene-prefix {
    display: none;
  }

  /* Compact on the fixed mobile shell -- the swatch scroller owns the space. */
  .smart-designer__disclaimer {
    flex: 0 0 auto;
    margin: 8px 0 0 0;
    padding: 0 16px;
    font-size: 11px;
    text-align: center;
    gap: 6px;
  }

  .smart-designer__disclaimer i {
    font-size: 12px;
  }

  .smart-designer__disclaimer + .smart-designer__patterns-card {
    margin-top: 8px;
  }

  /* --- Swatches: the only inner scroller --- */
  .smart-designer__patterns-card {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 16px;
    margin: 12px 0 0 0;
    border-radius: 0;
    /* Fades the bottom edge while more patterns remain below -- a scroller
       inside a fixed shell has no native affordance on a phone. JS clears it
       via .is-at-end once the list bottoms out (or never overflowed). */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 38px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 38px), transparent);
  }

  .smart-designer__patterns-card.is-at-end {
    -webkit-mask-image: none;
    mask-image: none;
    box-shadow: none;
    background: #ffffff;
  }

  .smart-designer__patterns-card-header {
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
  }

  .smart-designer__patterns-card-header i {
    font-size: 14px;
  }

  .smart-designer__patterns-card-title {
    font-size: 14px;
  }

  .smart-designer__category-group {
    margin-bottom: 12px;
  }

  /* Full-bleed inside the padded scroller so nothing shows through as rows
     slide underneath. */
  .smart-designer__category-title {
    position: sticky;
    top: -12px;
    z-index: 2;
    background: #ffffff;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin: 0 -16px 6px -16px;
    padding: 4px 16px;
  }

  /* Grid, not flex-wrap: keeps rows aligned when a label wraps to two lines
     ("Antique Beige", "Venetian Taupe"). */
  .smart-designer__swatches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 10px;
  }

  .smart-designer__swatch {
    width: 100%;
  }

  .smart-designer__swatch-img-wrap,
  .smart-designer__swatch-img {
    width: 100%;
    max-width: 58px;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 16px 7px 16px 7px;
  }

  .smart-designer__swatch-img-wrap {
    margin: 0 auto;
  }

  .smart-designer__swatch-label {
    width: 100%;
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.2;
    overflow-wrap: break-word;
  }

  /* --- Compare mode: the swatch card is hidden, so release the shell rather
         than leaving a dead gap where it used to be. --- */
  .smart-designer-main:has(.smart-designer.is-compare) {
    height: auto;
  }

  .smart-designer-main:has(.smart-designer.is-compare) .smart-designer__visualizer-container {
    max-width: 100%;
  }

  /* --- Pattern modal as a bottom sheet (compare mode only reaches it now) --- */
  .smart-designer-modal {
    padding: 0;
    align-items: flex-end;
  }

  .smart-designer-modal__dialog {
    max-height: 80dvh;
    border-radius: 18px 18px 0 0;
    padding: 16px;
    transform: translateY(24px);
  }

  .smart-designer-modal.is-open .smart-designer-modal__dialog {
    transform: translateY(0);
  }

  .smart-designer-modal__header {
    margin-bottom: 14px;
    padding-bottom: 10px;
  }

  .smart-designer-modal__title,
  .smart-designer-modal__title-wrap i {
    font-size: 17px;
  }

  .smart-designer-modal--share .smart-designer-modal__dialog {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   Landscape phones (< 1200px, short viewport)
   Height is the scarce axis here, so the page title goes and the scene takes
   the full remaining height, with its width following from the aspect ratio.
   Whatever width is left becomes a panel: control bar on top, swatches under.
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) and (max-height: 500px) {
  :root {
    --sd-nav-h: 56px;
    --sd-header-h: var(--sd-nav-h);
    --sd-shell-h: calc(100dvh - var(--sd-header-h));
  }

  .header--smart-designer .header__nav-row {
    padding: 10px 16px;
  }

  /* The heading is the first thing to go when vertical space is the constraint. */
  .header.header--smart-designer .header__inner--smart-designer {
    display: none;
  }

  .smart-designer {
    display: grid;
    /* Scene width is derived, not measured: full height x 1.8 keeps the ratio
       exact with no grid circularity. The panel floor is 220px -- enough for
       3 swatch columns, and low enough that an 844x390 phone still gets a
       full-height scene. Below that the scene letterboxes rather than
       squeezing the swatches out. */
    grid-template-columns:
      min(calc(var(--sd-shell-h) * 1.8), calc(100% - 220px))
      minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "scene toolbar"
      "scene patterns";
    column-gap: 0;
  }

  /* When the panel floor clamps the scene below full height, the leftover is
     split evenly above and below rather than pooling at the bottom, and the
     letterbox reads as a deliberate surround instead of stray white. At full
     height the scene covers this completely, so it costs nothing. */
  .smart-designer__visualizer-container {
    grid-area: scene;
    max-width: none;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: var(--color-foundation-light-beige, #f3f1f1);
  }

  .smart-designer__toolbar-wrap {
    grid-area: toolbar;
    margin-top: 0;
    padding: 0;
    /* Without this the bar stretches to fill its grid row. */
    align-items: flex-start;
  }

  .smart-designer__toolbar {
    /* Flush into the top corner of the panel; only the bottom edge is rounded. */
    border-radius: 0 0 20px 20px;
    padding: 5px 6px;
  }

  .smart-designer__control-btn {
    padding: 6px 5px;
  }

  /* "ZOOMED OUT" is 88px on its own once uppercased and letter-spaced, which
     alone blows a ~228px bar. The caret still reads as a dropdown, so the
     leading scene icon is the cheapest 21px to give back; past that the bar
     wraps to a second row rather than overflowing or truncating the label. */
  #sd-scene-btn > i.fa-image {
    display: none;
  }

  .smart-designer__toolbar {
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 2px;
    row-gap: 2px;
  }

  /* The panel is ~228px wide, so the bar sheds its lowest-value controls.
     Undo/redo go entirely; COMPARE keeps its icon only -- the button carries
     an aria-label that JS keeps in step with the toggled state. */
  #sd-undo,
  #sd-redo,
  #sd-compare span {
    display: none;
  }

  /* The bar now sits at the TOP of the panel, so an upward menu would open off
     the top of the shell -- send it back down over the swatches. */
  .smart-designer__scene-menu {
    top: calc(100% + 8px);
    bottom: auto;
  }

  .smart-designer__patterns-card {
    grid-area: patterns;
    margin: 0;
    border-radius: 0;
  }

  .smart-designer__swatches-grid {
    grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  }

  /* Compare hides the swatch panel -- one column, and the scene stays
     height-bound rather than reverting to the portrait full-width rule. */
  .smart-designer.is-compare {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "scene"
      "toolbar";
  }

  .smart-designer-main:has(.smart-designer.is-compare) {
    height: var(--sd-shell-h);
  }

  .smart-designer-main:has(.smart-designer.is-compare) .smart-designer__visualizer-container {
    max-width: calc((var(--sd-shell-h) - 46px) * 1.8);
    margin: 0 auto;
  }
}

/* Narrow phones: measured at 390px the seven controls need ~393px but only
   347px exists, and COMPARE's label is 65px of that. Below 420px it goes
   icon-only — the button carries an aria-label that JS keeps in step with the
   toggled state, so nothing is lost but the glyph. */

@media (max-width: 419px) {
  #sd-compare span {
    display: none;
  }
}

/* The tool shell ends flush at the viewport, so the footer's own standalone
   spacing (60px margin + 50px padding) reads as dead air here. Pulled up
   roughly 130px on this template only. */

@media (max-width: 1199px) {
  body:has(.smart-designer-page) .footer {
    margin-top: 40px;
  }
}