/** Shopify CDN: Minification failed

Line 1997:6 Expected identifier but found whitespace
Line 1997:7 Unexpected "100%"
Line 2145:26 Expected ")" to end URL token

**/
/* Drawer Builder CSS (legacy UI)
   Source of truth for builder page styling.
*/

/*============================================================================
  Debut custom css
  /*================ Debut custom css================*/

/* ========== Design System Tokens (Drawer Builder) ========== */
:root {
  /* Typography Scale */
  --db-font-2xs: 10px;
  --db-font-xs: 11px;
  --db-font-sm: 12px;
  --db-font-base: 13px;
  --db-font-md: 14px;
  --db-font-lg: 16px;
  --db-font-xl: 18px;

  /* Spacing Scale */
  --db-space-2xs: 4px;
  --db-space-xs: 6px;
  --db-space-sm: 8px;
  --db-space-md: 12px;
  --db-space-lg: 16px;
  --db-space-xl: 20px;
  --db-space-2xl: 24px;

  /* Border Colors (consolidated) */
  --db-border-light: #e8e8e8;
  --db-border-default: #d0d0d0;
  --db-border-strong: #c0c0c0;
  --db-border-dark: #333;
  --db-border-focus: #3F3FF8;

  /* Icon Sizes (standardized) */
  --db-icon-sm: 16px;
  --db-icon-md: 18px;
  --db-icon-lg: 20px;

  /* Button Heights */
  --db-btn-height-sm: 36px;
  --db-btn-height-md: 40px;
  --db-btn-height-lg: 44px;
  --db-btn-height-touch: 44px;  /* Mobile touch target */

  /* Border Radius */
  --db-radius-sm: 4px;
  --db-radius-md: 6px;
  --db-radius-lg: 8px;
  --db-radius-full: 999px;
}

/* Builder-only header padding fixes (moved from inline Liquid for maintainability) */
body.drawer-builder header.header {
  padding-bottom: 15px !important;
}
body.drawer-builder .mega-menu,
body.drawer-builder .header__submenu,
body.drawer-builder .dropdown,
body.drawer-builder [class*="mega-menu"] {
  padding-bottom: 20px !important;
}

/* Smooth initial builder load: avoid "random popping" by hiding the products list
   until products are rendered + filtered. */
body.drawer-builder.db-products-loading #builder-products {
  opacity: 0;
  pointer-events: none;
}
body.drawer-builder.db-products-ready #builder-products {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 180ms ease;
}

/* ============================================================================
   Legacy builder CSS (extracted from drawerFunction.liquid)
   ============================================================================ */
body.drawer-builder .row { width:100%; overflow: visible; }
body.drawer-builder .drawer-builder-custom { display:flex; justify-content:space-between; }
body.drawer-builder li.list-view-item { cursor: pointer; display: flex; }
/* Selected item tick (top-right triangle) removed:
   keep only the blue outline from `li.list-view-item.active:after`. */
body.drawer-builder li.list-view-item.active:before {
  content: none !important;
  display: none !important;
}
body.drawer-builder .list-view-item.mineProList.active:after { border-width: 2px; }
body.drawer-builder li.list-view-item.active:after {
      cursor: grab;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display:block;
      border: 4px solid #3F3FF8;
  }
body.drawer-builder .column {
    float:left;
    width: 50%;
  }
body.drawer-builder .connected-sortable {
    margin: 0;
    list-style: none;
    /* NOTE: do NOT force width:100% here.
       `.fs-canvas__canvas` is also `.connected-sortable` and its pixel width is set by JS;
       forcing width:100% breaks centering vs the drawer background imagery. */
  }

body.drawer-builder li.draggable-item {
    width: inherit;
    background-color: #f5f5f5;
    touch-action: none;  /* Prevents scrolling while dragging */
  -webkit-user-select: none;
  user-select: none;
    
    -webkit-transition: transform .25s ease-in-out;
    -moz-transition: transform .25s ease-in-out;
    -o-transition: transform .25s ease-in-out;
    transition: transform .25s ease-in-out;

    -webkit-transition: box-shadow .25s ease-in-out;
    -moz-transition: box-shadow .25s ease-in-out;
    -o-transition: box-shadow .25s ease-in-out;
    transition: box-shadow .25s ease-in-out;
  }

  li.draggable-item:hover {
    cursor: pointer;
    background-color: #eaeaea;
  }
  /* styles during drag */
  li.draggable-item.ui-sortable-helper {
    background-color: #e5e5e5;
    -webkit-box-shadow: 0 0 8px rgba(53,41,41, .8);
    -moz-box-shadow: 0 0 8px rgba(53,41,41, .8);
    box-shadow: 0 0 8px rgba(53,41,41, .8);
    transform: scale(1.015);
    z-index: 100;
  }
  li.draggable-item.ui-sortable-placeholder {
    background-color: #ddd;
    -moz-box-shadow:    inset 0 0 10px #000000;
     -webkit-box-shadow: inset 0 0 10px #000000;
     box-shadow:         inset 0 0 10px #000000;
  }
  .product-img {
    margin: 0;
    height: 100% !important;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
    width: 100%;
  }
  @media (max-width: 640px) {
    li.list-view-item.active:after {
      border-width: 3px;
    }
    li.list-view-item.active:before {
      padding: 0;
      width: 30px;
      height: 30px;
    }
  }

/* Filter inputs - consistent placeholder */
.search-and-filter input::placeholder,
.product-search-input::placeholder {
  font-size: var(--db-font-base);
  font-weight: 400;
  color: #666;
}

.search-and-filter input,
.product-search-input {
  font-size: var(--db-font-base);
  font-weight: 400;
}

/* Filter checkbox labels - consistent */
.filter-tags-checkbox label.checkbox-wrapper,
.filter-tags-checkbox-2 label.checkbox-wrapper,
label.checkbox-wrapper.filter-apply {
  font-size: var(--db-font-base) !important;
  font-weight: 400 !important;
  line-height: 1.3;
}

.filter-tags-checkbox label.checkbox-wrapper:has(input:checked),
.filter-tags-checkbox-2 label.checkbox-wrapper:has(input:checked) {
  font-weight: 500 !important;
}

/* Filter Clear buttons - consistent */
.filter-clear,
.filter-clear-1,
.filter-clear-2,
.filter-clear-3 {
  font-size: var(--db-font-base) !important;
  font-weight: 500 !important;
}

/* Clear All button */
.filter-clear-all-btn {
  font-size: var(--db-font-base);
  font-weight: 500;
}

/* Product card title */
.db-card__title.h6,
.drawer-page-content .sidebar-products ul.products li.list-view-item .product-card .list-view-item__title span.product-card__title {
  font-size: var(--db-font-md) !important;
  font-weight: 600 !important;
  line-height: 1.3;
}

/* Product card price */
.db-card__price,
.db-card__meta {
  font-size: var(--db-font-base);
  font-weight: 500;
}

/* Filter count badge */
.search-and-filter .filter-count-badge {
  font-size: 11px;
  font-weight: 600;
}

/* ========== End Typography Normalization ========== */

/* ============================================================================
   DRAWER BUILDER LAYOUT - Minimal Safe Changes
   ============================================================================ */

/* Layout CSS Variables */
:root {
  --db-primary-color: #3F3FF8;
  --db-panel-width: 380px;
  --db-panel-expanded-width: 65vw;
  --db-transition-speed: 300ms;
}

/* Hide footer */
body.drawer-builder #shopify-section-footer,
body.drawer-builder footer.footer {
  display: none !important;
}

/* Full viewport - prevent page scroll but allow content to display */
body.drawer-builder {
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overscroll-behavior: none !important;
  /* Disable Mac rubber-band to prevent button disconnect */
}

/* ===== HEADER Z-INDEX FIX FOR DRAWER BUILDER ===== */
/* Header section needs to be above drawer content */
body.drawer-builder [id^="shopify-section-"][id*="header"],
body.drawer-builder #shopify-section-header {
  z-index: 100 !important;
}

/* Main content - low z-index to stay below header */
body.drawer-builder .main-content,
body.drawer-builder main#MainContent,
body.drawer-builder .drawer-page-content,
body.drawer-builder .drawer-parent-wrapper,
body.drawer-builder .drawerImage,
body.drawer-builder .drawerLine.drawerSize {
  position: relative !important;
  z-index: 1 !important;
}

/* Reduce padding/margins on main content */
body.drawer-builder .main-content,
body.drawer-builder main#MainContent {
  padding: 0 !important;
}

body.drawer-builder .drawer-page-content {
  padding: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove any bottom padding/margin from parent containers */
body.drawer-builder .drawer-parent-wrapper {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  /* Top padding handled by main-content */
}

body.drawer-builder .drawerImage {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.drawer-builder .page-width {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.drawer-builder .shopify-section {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* A2 layout is gated in Liquid (`ENABLE_A2_LAYOUT`), so we don't hide it via CSS here. */

/* Ensure legacy wrapper displays */
body.drawer-builder .drawer-parent-wrapper.legacy-wrapper {
  position: relative !important;
  width: 100% !important;
  /* Ensure wrapper spans full width for absolute positioning */
  clip: auto !important;
  white-space: normal !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ===== DESKTOP: Keep side-by-side without breaking grid ===== */
@media (min-width: 1000px) {

  /* Keep flex row layout */
  body.drawer-builder .drawer-parent-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    position: relative !important;
  }

  /* Top bar spans full width - squeezed padding for more usability */
  body.drawer-builder .drawer-parent-wrapper>.drawerLine.drawerSize {
    flex: 0 0 100% !important;
    width: 100% !important;
    order: 1 !important;
    padding: 4px 12px !important;
    background: #fff !important;
    border-bottom: 1px solid #eee !important;
    min-height: auto !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
    /* Low z-index so header dropdowns appear above */
  }

  /* Grid/canvas */
  body.drawer-builder .drawer-parent-wrapper>.grid-wrapper {
    flex: 1 1 auto !important;
    min-width: 400px !important;
    max-width: calc(100% - var(--db-panel-width)) !important;
    order: 2 !important;
    position: relative !important;
    /* White padding around grid:
       - a little more on top (45px)
       - a little less on bottom (15px) to tighten space above Hide/Clear */
    padding: 45px 30px 15px 30px !important;
    /* Cap height so increasing grid length can't push actions out of view */
    height: calc(100vh - var(--db-top-offset, 176px)) !important;
    max-height: calc(100vh - var(--db-top-offset, 176px)) !important;
    /* Keep actions in-bounds: canvas consumes remaining space, actions stay visible */
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    background: #fff !important;
    /* White background */
  }

  /* Canvas area: fill available space and center the canvas over the drawer background */
  body.drawer-builder .drawer-parent-wrapper>.grid-wrapper .drawerBundle {
    flex: 1 1 auto !important;
    min-height: 0 !important; /* required so overflow sizing works in flex containers */
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    /* Allow hover controls (rotate/remove) to render outside the canvas bounds */
    overflow: visible !important;
  }

  body.drawer-builder .drawerBundle .fs-canvas__space {
    width: 100% !important;
    /* Let the space size to content (grid + bottom frame padding) so the handle stays flush */
    height: auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  body.drawer-builder .drawerBundle .fs-canvas__space .canvas-wrapper {
    width: 100% !important;     /* ensures updateGridInfo() reads a stable width */
    /* Do not hard-cap height here; JS scales the grid to the available bundle height */
    max-height: none !important;
  }

  /* Ensure canvas + hover controls aren't clipped by any ancestor overflow */
  body.drawer-builder .drawerBundle .fs-canvas__canvas,
  body.drawer-builder .drawerBundle .draggable-item {
    overflow: visible !important;
  }

  /* Canvas action buttons: keep in normal document flow (below canvas).
     Fixed positioning here can overlap the grid and make it appear “cut off”. */
  body.drawer-builder .grid-wrapper .db-canvas-actions-legacy {
    flex: 0 0 auto !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 40 !important;
    background: transparent !important;
    padding: 12px 0 !important;
    margin-top: 16px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Products panel - scrollable, full height */
  body.drawer-builder .drawer-parent-wrapper>.drawerOptions.drawer-build-custom-image {
    flex: 0 0 var(--db-panel-width) !important;
    width: var(--db-panel-width) !important;
    order: 3 !important;
    border-left: 1px solid #e5e5e5 !important;
    background: #fff !important;
    padding: 0 16px 16px 16px !important;
    /* No top padding - sticky handles spacing */
    box-sizing: border-box !important;
    height: calc(100vh - var(--db-top-offset, 160px)) !important;
    /* Full viewport minus header/topbar */
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    margin-top: 0 !important;
    /* Animation Sync: Smooth transition for width/position changes */
    transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), top 0.3s ease !important;
  }

  /* Canvas dimming when products expanded */
  body.drawer-builder.products-expanded .drawer-parent-wrapper>.grid-wrapper {
    opacity: 0.4 !important;
    filter: blur(2px) !important;
    pointer-events: none !important;
  }

  /* Products panel EXPANDED - overlay style */
  body.drawer-builder.products-expanded .drawer-parent-wrapper>.drawerOptions.drawer-build-custom-image {
    position: fixed !important;
    right: 0 !important;
    top: var(--db-top-offset, 160px) !important;
    /* Match tab top position for smooth transition */
    height: calc(100vh - var(--db-top-offset, 160px)) !important;
    width: 70% !important;
    /* Wider when expanded */
    max-width: 900px !important;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    z-index: 1000 !important;
    /* Above overlay (z-index: 50) */
    /* Animation Sync: Match normal state transition */
    transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), top 0.3s ease !important;
    overflow-y: auto !important;
    /* Keep panel flush to top (no gap above sticky header while scrolling) */
    padding-top: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 16px !important;
    background: #fff !important;
  }

  /* During expand/collapse animation: hide controls that "pop" and can cause perceived jitter.
     (The state is driven by assets/drawer-builder-legacy.js) */
  body.drawer-builder.products-animating .drawerOptions.drawer-build-custom-image .search-and-filter,
  body.drawer-builder.products-animating .drawerOptions.drawer-build-custom-image .search-and-filter-2,
  body.drawer-builder.products-animating .drawerOptions.drawer-build-custom-image .search-and-filter-3,
  body.drawer-builder.products-animating .drawerOptions.drawer-build-custom-image .db-clear-all-filters {
    visibility: hidden !important;
  }

  /* Also avoid any sticky/header clipping while animating */
  body.drawer-builder.products-animating .drawerOptions.drawer-build-custom-image .variantData {
    overflow: visible !important;
  }

/* Prewarm expanded layout (no flash): applied briefly on page load */
body.drawer-builder.products-prewarm .drawer-parent-wrapper>.drawerOptions.drawer-build-custom-image,
body.drawer-builder.products-prewarm .db-expand-tab {
  transition: none !important;
}

body.drawer-builder.products-prewarm .drawer-parent-wrapper>.drawerOptions.drawer-build-custom-image {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.drawer-builder.products-prewarm .db-legacy-overlay {
  display: none !important;
}

/* Avoid dimming effects during prewarm */
body.drawer-builder.products-prewarm.products-expanded .drawer-parent-wrapper>.grid-wrapper {
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
}

  /* =========================================================
     SMOOTH EXPAND/COLLAPSE: freeze reflowing UI during animation
     Uses body classes set in assets/drawer-builder-legacy.js:
     - products-animating
     - products-expanding
     - products-collapsing
     ========================================================= */

  /* Hide header bits that can "pop" while the panel width is transitioning */
  body.drawer-builder.products-animating .layout-filter-status,
  body.drawer-builder.products-animating .product-filter-select-wrapper .my-sem-dbs {
    visibility: hidden !important;
  }

  /* Prevent swatch outlines / controls from being clipped during the transition */
  body.drawer-builder.products-animating .builtbundle > .product-filter-select-wrapper,
  body.drawer-builder.products-animating .variantData,
  body.drawer-builder.products-animating .colorsOption {
    overflow: visible !important;
  }

  /* Freeze product grid density during expand/collapse to avoid mid-animation reflow.
     - While EXPANDING: keep compact (3-per-row) until animation ends
     - While COLLAPSING: keep expanded (5-per-row) until animation ends */
  body.drawer-builder.products-expanding .sidebar-products ul.products li.list-view-item,
  body.drawer-builder.products-expanding #builder-products ul#product-show li.list-view-item {
    flex: 0 0 calc(33.333% - 6px) !important;
    max-width: calc(33.333% - 6px) !important;
    width: calc(33.333% - 6px) !important;
  }

  body.drawer-builder.products-collapsing .sidebar-products ul.products li.list-view-item,
  body.drawer-builder.products-collapsing #builder-products ul#product-show li.list-view-item {
    flex: 0 0 calc(20% - 7px) !important;
    max-width: calc(20% - 7px) !important;
    width: calc(20% - 7px) !important;
  }

  /* Keep color/filter section sticky in expanded mode too
     NOTE: canonical sticky header rules live at the END of the file (desktop + mobile). */

  /* ==== LEGACY EXPANDED FILTER CSS - COMMENTED OUT TO AVOID CONFLICTS ====
   * These rules are now consolidated at the end of the file
   * See: EXPANDED FILTER PANEL - CONSOLIDATED section
   */
  /*
  body.drawer-builder.products-expanded .product-filter-select-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  body.drawer-builder.products-expanded .search-and-filter,
  body.drawer-builder.products-expanded .search-and-filter-2 {
    display: inline-flex !important;
    flex: 0 0 auto !important;
  }

  body.drawer-builder.products-expanded .search-and-filter input,
  body.drawer-builder.products-expanded .search-and-filter-2 input {
    min-width: 140px !important;
    max-width: 180px !important;
    padding: 8px 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    background: #f8f9fa !important;
    transition: border-color 0.2s ease !important;
  }

  body.drawer-builder.products-expanded .search-and-filter input:focus,
  body.drawer-builder.products-expanded .search-and-filter-2 input:focus {
    border-color: #3F3FF8 !important;
    outline: none !important;
    background: #fff !important;
  }

  body.drawer-builder.products-expanded .variantData {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body.drawer-builder.products-expanded .variantData .subLabel {
    font-size: 12px !important;
    color: #666 !important;
    margin-right: 4px !important;
  }

  body.drawer-builder.products-expanded .variantData .colorsOption {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  */

  /* Products container - use flex with 3 items per row */
  body.drawer-builder #builder-products ul#product-show,
  body.drawer-builder .sidebar-products ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Each product item - 3 per row (33% minus gap) */
  body.drawer-builder #builder-products ul#product-show li.list-view-item,
  body.drawer-builder .sidebar-products ul.products li.list-view-item,
  body.drawer-builder .drawer-parent-wrapper .builtbundle .sidebar-products ul.products li.list-view-item {
    flex: 0 0 calc(33.333% - 6px) !important;
    max-width: calc(33.333% - 6px) !important;
    width: calc(33.333% - 6px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Expanded: 5 items per row */
  body.drawer-builder.products-expanded #builder-products ul#product-show li.list-view-item,
  body.drawer-builder.products-expanded .sidebar-products ul.products li.list-view-item,
  body.drawer-builder.products-expanded .drawer-parent-wrapper .builtbundle .sidebar-products ul.products li.list-view-item {
    flex: 0 0 calc(20% - 7px) !important;
    max-width: calc(20% - 7px) !important;
    width: calc(20% - 7px) !important;
  }

  /* Products panel height constraint - NO overflow here, parent scrolls */
  body.drawer-builder .drawerOptions.drawer-build-custom-image .builtbundle {
    flex: 1 !important;
    max-height: none !important;
    overflow: visible !important;
    /* Parent container handles scrolling */
  }

  /* Hide the size/utensil filters in compact mode - only color visible */
  body.drawer-builder .search-and-filter,
  body.drawer-builder .search-and-filter-2 {
    display: none !important;
  }

  /* Show filters when expanded - handled in consolidated section */
}

/* ===== VERTICAL EXPAND TAB ===== */
/* Now a sibling of grid-wrapper, not inside it - proper z-index stacking */

.db-expand-tab {
  position: fixed !important;
  right: var(--db-panel-width) !important;
  /* 380px from viewport right = left edge of panel */
  /* top is controlled in the consolidated STACKING + OFFSET FIXES block via --db-top-offset */
  left: auto !important;
  /* z-index is controlled in consolidated stacking block */
  transform: none !important;
  width: 32px !important;
  height: 120px !important;
  background: #3F3FF8 !important;
  color: #fff !important;
  border-radius: 0 0 0 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  /* Animation sync: only animate positional movement the same way as the panel */
  transition: right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.2s ease !important;
  box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.12) !important;
  border: none !important;
  padding: 10px 4px !important;
}

.db-expand-tab:hover {
  background: #2828c4 !important;
  /* Avoid hover width changes that make the tab feel "out of sync" with the panel animation */
}

.db-expand-tab__icon {
  font-size: 16px !important;
  font-weight: bold !important;
  line-height: 1 !important;
}

.db-expand-tab__text {
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  transform: rotate(180deg) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.db-expand-tab__count {
  font-size: 10px !important;
  font-weight: 500 !important;
  opacity: 0.9 !important;
}

/* Products panel needs relative positioning for tab */
body.drawer-builder .drawerOptions.drawer-build-custom-image {
  position: relative !important;
}

/* When EXPANDED: stay above overlay and position at left edge of expanded panel */
body.drawer-builder.products-expanded .db-expand-tab {
  position: fixed !important;
  right: min(70vw, 900px) !important;
  /* Match expanded panel width */
  left: auto !important;
  /* top is controlled in the consolidated STACKING + OFFSET FIXES block via --db-top-offset */
  transform: none !important;
  /* z-index is controlled in consolidated stacking block */
  background: #333 !important;
}

body.drawer-builder.products-expanded .db-expand-tab:hover {
  background: #555 !important;
}

body.drawer-builder.products-expanded .db-expand-tab__icon::before {
  content: "»" !important;
}

body.drawer-builder.products-expanded .db-expand-tab__icon span {
  display: none !important;
}

body.drawer-builder.products-expanded .db-expand-tab__text span.expand-text {
  display: none !important;
}

body.drawer-builder.products-expanded .db-expand-tab__text span.collapse-text {
  display: inline !important;
}

/* Hide collapse text by default, show expand text */
.db-expand-tab__text span.collapse-text {
  display: none !important;
}

.db-expand-tab__text span.expand-text {
  display: inline !important;
}

/* Hide old bottom expand button */
body.drawer-builder .db-expand-btn,
body.drawer-builder #db-expand-btn {
  display: none !important;
}

/* Collapse button - also hidden, using tab instead */
body.drawer-builder .db-collapse-btn {
  display: none !important;
}

body.drawer-builder.products-expanded .db-collapse-btn {
  display: none !important;
}

/* Hide desktop-screen section */
body.drawer-builder .grid-wrapper .desktop-screen {
  display: none !important;
}

/* Hide duplicate add to cart */
body.drawer-builder .addCartMb.my-cd-card-2 {
  display: none !important;
}

/* ===== STEP 3: Top Bar Styling ===== */
/* Note: Main top bar styles are consolidated at end of file under "TOP ACTION BAR - Refined Layout" */

/* Hide heading elements */
body.drawer-builder .dimension-heading,
body.drawer-builder .share-btns-container {
  display: none !important;
}

body.drawer-builder .dimension-input-area {
  width: 70px !important;
  height: 36px !important;
  padding: 0 10px !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  text-align: center !important;
}

/* Change dimension button */
body.drawer-builder .drawerLine.drawerFunctions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

body.drawer-builder #changeDimension {
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body.drawer-builder #changeDimension .optionTitle {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body.drawer-builder #changeDimension svg {
  width: 18px !important;
  height: 18px !important;
}

body.drawer-builder #changeDimension span {
  font-size: 13px !important;
  white-space: nowrap !important;
}

/* Total and Add to Cart section in top bar */
body.drawer-builder .drawerTotal {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

body.drawer-builder .totalsection {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.drawer-builder .totalsection h3 {
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

body.drawer-builder .totalPrice {
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* Add to cart button styling */
body.drawer-builder .addToCartBtn,
body.drawer-builder .buyNowButtonWrap button {
  height: 36px !important;
  padding: 0 20px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
}

/* ===== STEP 4: Canvas Area Constraints ===== */

/* Hide info dragger */
body.drawer-builder .info-dragger {
  display: none !important;
}

/* ===== HELP ICON (Legacy Layout) ===== */
.db-help-icon-legacy {
  position: absolute;
  top: 10px;
  left: 20px;
  /* Moved to far left as requested */
  z-index: 50;
}

/* Ensure grid-wrapper has position context for help icon */
body.drawer-builder .grid-wrapper {
  position: relative !important;
}

.db-help-icon-legacy__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.db-help-icon-legacy:hover .db-help-icon-legacy__trigger,
.db-help-icon-legacy:focus .db-help-icon-legacy__trigger {
  background: #3F3FF8;
  transform: scale(1.1);
}

.db-help-icon-legacy__tooltip {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  margin-top: 8px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.db-help-icon-legacy__tooltip::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 10px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(0, 0, 0, 0.9);
}

.db-help-icon-legacy:hover .db-help-icon-legacy__tooltip,
.db-help-icon-legacy:focus .db-help-icon-legacy__tooltip {
  display: block;
}

/* ===== CANVAS ACTION BUTTONS (Below Grid) - matches top bar buttons ===== */
.db-canvas-actions-legacy {
  display: flex;
  justify-content: center;
  gap: var(--db-space-md);
  padding: var(--db-space-md) 0;
  background: transparent;
  position: relative;
  z-index: 40;
  margin-top: 10px;
}

.db-canvas-action-btn-legacy {
  display: inline-flex;
  align-items: center;
  gap: var(--db-space-sm);
  padding: var(--db-space-sm) var(--db-space-lg);
  background-color: #f5f5f5;
  border: 1px solid var(--db-border-default);
  border-radius: var(--db-radius-md);
  height: var(--db-btn-height-md);
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 40px;
  height: 40px;
}

.db-canvas-action-btn-legacy:hover {
  background-color: var(--db-border-light);
  border-color: var(--db-border-default);
}

.db-canvas-action-btn-legacy svg {
  width: var(--db-icon-md);
  height: var(--db-icon-md);
  flex-shrink: 0;
}

.db-canvas-action-btn-legacy span {
  font-size: var(--db-font-md);
  font-weight: 500;
}

.db-canvas-action-btn-legacy:hover svg {
  opacity: 1;
}

/* ===== STEP 5: Products Panel Styling ===== */

/* Products list - NO overflow here, parent container scrolls for sticky to work */
body.drawer-builder .builtbundle {
  flex: 1 !important;
  overflow: visible !important;
}

/* Hide duplicate sections */
body.drawer-builder .addCartMb.my-cd-card-2,
body.drawer-builder .desktop-screen {
  display: none !important;
}

/* ===== STEP 9: Responsive Layout ===== */
/* (Using minimal overrides to avoid breaking existing layout) */

/* ===== PRODUCT FILTER WRAPPER - STICKY (contains color section) =====
   NOTE: canonical sticky header rules live at the END of the file (desktop + mobile). */

/* ===== COLOR SECTION - Text stacked above swatches ===== */
body.drawer-builder .variantData {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

body.drawer-builder .variantData .labelData {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 4px 0 !important;
}

body.drawer-builder .variantData .labelTitle {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #555 !important;
}

body.drawer-builder .variantData .colorsName {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111 !important;
}

/* Color swatches - keep original square styling, just ensure proper layout */
body.drawer-builder .variantData .colorsOption {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 4px !important;
  /* Space for highlight ring to not get cut off */
}

/* (New layout CSS removed - using original layout) */

/* ========== Canvas Action Buttons (Rotate/Remove/Size) - Desktop Styles ========== */
/* NOTE: Exact restore of original styles from before design tokens merge */
.canvas-hoverd-item-btn-rotate,
.canvas-hoverd-item-btn-remove {
  position: absolute;
  top: -35px;
  left: -15px;
  padding: 3px;
  background: #fff;
  border: 1px solid #000;
  z-index: 2005;
  width: fit-content;
  height: fit-content;
}

.canvas-hoverd-item-btn-remove {
  left: 20px;
}

.canvas-hoverd-item-btn-rotate:hover,
.canvas-hoverd-item-btn-remove:hover {
  background: #bfbfbf;
  transition: all .3s;
}

/* Size badge - displays product dimensions when module is selected */
/* Matches .canvas-hoverd-item-btn-remove: 24px icon + 6px padding + 2px border = 32px height */
.canvas-hoverd-item-btn-size {
  position: absolute;
  top: -35px;
  left: 55px;
  padding: 3px 8px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 4px;
  z-index: 2005;
  width: fit-content;
  height: 32px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--font-body-family);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

.canvas-image-bottom,
.canvas-image-left,
.canvas-image-right {
  position: absolute;
  /* z-index: 1; */
}

.canvas-image-bottom {
  left: -32px;
  bottom: -71px;
}

.canvas-image-left {
  left: 0;
  bottom: -26px;
}

.canvas-image-right {
  right: -90px;
  bottom: -26px;
}

li.list-view-item.draggable-item.rotated>div {
  transform: translate(-50%, -50%) rotate(-90deg);
}

li.list-view-item.draggable-item>div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #999;
  background-position: center center;
  background-repeat: no-repeat;
  /* JS sets explicit width/height on the inner div to match the li exactly.
     Use 100% 100% to ensure image fills the div without shifting. */
  background-size: 100% 100%;
}

.product-info {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
  /* justify-content: space-between; */
}

/* Removed: .selectedProInfoInr and .prodInfroWrapper (deprecated) */
#proDescription p {
  margin: 0 0 16px 0;
  line-height: 1.3em;
}

#proDescription:first p {
  display: none;
}

body.drawer-builder .main-content {
  margin-left: auto;
  margin-right: auto;
  /* margin-top is set earlier with 15px for header clearance */
  /* padding-inline: var(--page-padding); */
  width: 100%;
  padding-block: 65px;
  padding-inline: max(13.5rem, 50vw - var(--scrollbar-width, 0px) / 2 - var(--page-width) / 2);
}

/* .canvas-wrapper {
  transform: translateX(40px)
  background-image: url('https://modudrawer.com/cdn/shop/files/image_9_2.png');
  background-size: contain;
} */
.canvas-wrapper {
  position: relative;
  /* Ensure the grid canvas is centered over the drawer background */
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Prevent flash of incorrect grid size: hide canvas until JS sizes it */
.drawerBundle .fs-canvas__space .canvas-wrapper {
  visibility: hidden;
}

.grid-wrapper {
  width: 960px;
  height: 50%;
}

.drawerBundle {
  /* width: 100%; */
  max-width: 100%;
  /* Ensure it doesn't exceed the container width */
  max-height: 100%;
  /* Ensure it doesn't exceed the container height */
  position: relative;
}

/* Drawer builder: keep canvas display normal */
body.drawer-builder .drawerOptions.drawer-build-custom-image {
  /* width: 40%; */
  width: 50%;
  padding: 0;
  /* Removed old 95px top padding */
}

.drawerLine.drawerTotal .addToCart a,
.drawerLine.drawerTotal .addToCart button {
  width: 100%;
  height: 100%;
  /* max-height: 52px; */
  max-height: 36px;
  background-color: #3F3FF8;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 33px;
  border-radius: 5px;
  /* font-size: 24px; */
  font-size: 16px;
  color: #fff;
  line-height: 27px;
  /* font-weight: 700; */
  font-weight: 500;
}

.list-view-item.draggable-item div {
  display: block !important;
}

/* .dimension-wrapper {
  margin-top: 25px;
}
.dimension-input {
  display: flex;
  padding-top: 20px;
  gap: 40px;
}
.dimension-input div {
  position: relative;
  width: 50%;
}
.dimension-input-area {
  height: 78px;
  border: 1px solid #C0C0C0;
  border-radius: 4px;
  width: 100%;
  padding: 0 18px;
}
.dimension-input-area:focus {
  border-color: #3F3FF8;
  outline: none;
}
.dimension-input-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 18px;
  font-size: 18px;
  font-weight: 400;
} */
.dimension-wrapper {
  /* margin-top: 25px; */
  margin-bottom: 25px;
}

.dimension-input {
  display: flex;
  gap: 8px;
  align-items: center;
}

.dimension-input div {
  position: relative;
}

.dimension-input-area {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  border: 1px solid #C0C0C0;
  border-radius: 4px;
  width: 100%;
  padding: 8px 12px;
  font-size: 16px;
  display: block;
  background-color: #fff;
}

.dimension-input-area:focus {
  border-color: #3F3FF8;
  outline: none;
}

.dimension-input-label {
  position: absolute;
  left: 10px;
  top: 50%;
  font-size: 14px;
  font-weight: 400;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

.error-message {
  display: none;
  color: red;
  font-size: 11px;
  position: absolute !important;
  bottom: -18px !important;
  width: 100% !important;
}

.dimension-input-area:focus~.dimension-input-label,
.dimension-input-area:not(:placeholder-shown)~.dimension-input-label {
  top: -10px;
  transform: translateY(0);
  font-size: 14px;
  font-weight: 600;
  background: #fff;
  padding: 0 5px;
}

.dimension-heading {
  font-size: 34px;
  font-weight: 700;
}

.drawer-parent-wrapper {
  display: flex;
  /*align-items: start;
  justify-content: space-around;
  flex-direction: row; */
  /* new design changes */
  flex-direction: column;
  align-items: center;
}

.builtbundle {
  display: inline-block;
  width: 100%;
}

.drawerImage .list-view-item {
  background: transparent;
  border: none;
}

span.colorsName {
  text-transform: capitalize;
  /* color: #545454; */
}

.labelData {
  font-size: 18px;
  margin-bottom: 15px;
}

span.labelTitle {
  color: #35312E;
  font-weight: 700;
}

.drawerBundle div#PageContainer {
  background-color: #fbf8f1;
}

.colorsOption span {
  cursor: pointer;
  display: inline-block;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  /* width: 32px;
  height: 32px; */
  border: 1px solid black;
  margin-right: 8px;
}

.colorsOption span.active {
  /* box-shadow: -2px 3px 0 0 #8a8acb; */
  position: relative;
}

.colorsOption span.active:before {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  width: 32px;
  height: 32px;
  /* width: 38px;
  height: 38px; */
  border: 1px solid #000;
  border-radius: 50px;
}

span.bambooData {
  background-image: url(/cdn/shop/files/e4578e17ed0aa351521930f0973c6d57.png?v=1672811864);
  background-position: center;
  background-repeat: no-repeat;
}

span.whiteData {
  background: white;
}

span.blackData {
  background: black;
}

span.yellowData {
  background: #fdec65;
}

span.greenData {
  background: #515234;
}

span.redData {
  background: #f7a6a2;
}

span.orangeData {
  background: #fec685;
}

span.pinkData {
  background: #ffe1f6;
}

span.brownData {
  background: #fed39b;
}

span.blueData {
  background: #062B4D;
}

span.ivoryData {
  background: #eae7da;
}

/* #builder-area {
  width: 70%;
  float: left;
}

#builder-products {
  width: 30%;
  float: right;
} */

.canvas-img-wrapper {
  background-image: url('/cdn/shop/files/image_9_2.png?v=1709562454');
  width: 100%;
  height: 100%;
}

/* ---------------------------------new css--------------------------------- */
/* ---------------------------------new css--------------------------------- */
/* ---------------------------------new css--------------------------------- */
li.list-view-item:empty {
  display: none;

}

body.drawerBundle {
  background-color: #FCFAF6;
}

.drawer-page-content .page-width {
  padding: 0 15px;
  max-width: 1480px;
  width: 100%;
  margin-bottom: 60px;
}

.drawer-page-content .drawerImage {
  flex: 0 0 auto;
  max-width: auto;
  padding: 0;
}

.drawer-page-content .drawerImage .shopify-section {
  width: 980px;
  margin: 0 auto;
}

/* .drawer-page-content .drawerImage .drawerOptions, .drawerOptions.drawer-build-custom-image {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  border: 2px solid #eee;
  padding: 20px;
  border-radius: 8px;
  background: #f9f9f9;
} */
/* Removed: .selectedProInfo and related styles (deprecated mobile info panel) */
.gridInfo {
  display: flex;
  justify-content: start;
  align-items: center;
  /* margin: 23px 0; */
  /* margin: 16px 0; */
  font-size: 12px;
}

.gridInfo .gridQuestion,
.selectedProductBlocks .gridQuestion,
.selectedProductDimensions .gridQuestion {
  width: 16px;
  height: 16px;
  background-color: #000;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  margin-right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

#proDimensionContentRight {
  padding-left: 10px;
}

/* .selected-prod-dimensions {
  margin-top: 30px;
} */
/* Removed: .selectedProductBlocks .gridQuestion (deprecated) */
.selecte-prod-link {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 700;
  color: #3F3FF8;
  margin-top: 16px;
}

.diemnstion-and-drawerfunctions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0 24px 0;
}

.drawerLine.drawerFunctions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.drawerLine.drawerFunctions>div {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  text-align: center;
  width: auto;
  min-width: 80px;
  height: 40px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  color: #333;
}

.drawerLine.drawerFunctions>div:hover {
  background-color: #e8e8e8;
  border-color: #d0d0d0;
}

.drawerLine.drawerFunctions>div:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawerLine.drawerFunctions>div:last-child {
  border: none;
  height: auto;
  width: auto;
  background: transparent;
  padding: 0;
}

.drawerLine.drawerFunctions>div:last-child:hover {
  background: transparent;
  transform: none;
}

.optionImage {
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
}

.optionTitle {
  display: flex;
  align-items: center;
}

.drawerLine.drawerFunctions div img {
  object-fit: contain;
  width: 20px;
  height: 20px;
}

/* Drawer Builder toolbar icons */
body.drawer-builder .my-btns-c .optionImage img,
body.drawer-builder .my-btns-c .optionImage svg {
  width: var(--db-icon-md) !important;
  height: var(--db-icon-md) !important;
}

body.drawer-builder .my-btns-c .optionImage {
  display: flex;
  align-items: center;
}

#selectedProductImage,
#selectedProductImageMobile {
  width: 150px;
  height: fit-content;
  object-fit: contain;
}

.selectedProductButton a {
  background-color: #000;
  border-radius: 5px;
  color: #fff;
  padding: 13px 22px;
  text-transform: uppercase;

}

.gridInfoContent {
  padding: 0 0 0 13px;
}

.drawer-page-content .drawerImage .drawerOptions .drawerLine {
  flex: 0 33.3%;
  max-width: 33.3%;
  justify-content: center;
  display: flex;
}

.drawer-page-content .drawerImage .drawerOptions .drawerSize {
  flex-direction: column;
  align-items: center;
}

.drawer-page-content .drawerImage .drawerOptions .drawerSize .drawerValue {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.drawer-page-content .drawerImage .drawerOptions .drawerSize .drawerValue label,
.drawer-page-content .drawerImage .drawerOptions .drawerSize .drawerValue span {
  margin-bottom: 0;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  color: #35312E;
}

.drawer-page-content .drawerImage .drawerOptions .drawerSize .drawerValue span {
  color: #000000;
}

.drawer-page-content .drawerImage .drawerOptions .drawerSize .drawerValue label {
  width: 100%;
  min-width: 60px;
  text-align: right;
}

.drawer-page-content .drawerImage .drawerFunctions .option .optionTitle {
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  color: #35312E;
}

.drawer-page-content .drawerImage .drawerOptions .drawerSize .drawerValue input {
  background: #FFFFFF;
  border: 1px solid #35312E;
  border-radius: 5px;
  text-align: center;
  margin: 0 7px;
  width: 147px;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  color: #545454;
  padding: 0;
  height: 34px;
}

.drawer-page-content .drawerImage .drawerFunctions .option {
  width: 100%;
  max-width: 78px;
  text-align: center;
  cursor: pointer;
  border-left: 1px solid #000000;
}

.drawer-page-content .drawerImage .drawerFunctions .option:last-child {
  border-right: 1px solid #000000;
}

.drawer-page-content .drawerImage .drawerFunctions .optionImage {
  width: 100%;
  max-width: 100%;
  height: 45px;
}

.drawer-page-content .drawerImage .drawerFunctions .optionImage img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

.drawer-page-content .drawerImage .drawerOptions .drawerTotal {
  flex-direction: column;
  align-items: flex-end;
}

.drawerTotal .totalsection {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.totalprice-and-gridinfo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.addCartMb {
  padding: 20px 0 0 0;
}

.drawerTotal .totalsection h3,
.drawerTotal .totalsection span {
  /* font-size: 48px; */
  /* font-size: 24px; */
  font-size: 16px;
  padding-right: 12px;
}

.drawer-page-content .drawerImage .drawerTotal .totalsection h3 {
  margin-bottom: 0;
  margin-right: 29px;
}

.drawer-page-content .drawerImage .drawerTotal .totalsection span.totalPrice,
.drawer-page-content .drawerImage .drawerTotal .totalsection h3 {
  font-weight: 400;
  font-size: 32px;
  line-height: 44px;
  color: #35312E;
}

.drawer-page-content .drawerImage .drawerTotal .addToCart a {
  margin-top: 5px;
  display: block;
  background: #35312E;
  border-radius: 5px;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  color: #FFFFFF;
  padding: 14px 20px;
  text-transform: uppercase;
}

.drawer-page-content .drawerImage .drawerTotal .addToCart {
  width: 100%;
}

.drawer-page-content .drawerImage .drawerBundle {
  margin-top: 21px;
}

.drawer-page-content .drawerImage .drawerBundle .fs-canvas__space,
.drawerBundle .fs-canvas__space {
  padding: 0 96px 68px !important;
  background: url(/cdn/shop/t/9/assets/drawer_04.png?v=74608833613920309731744980901);
  background-repeat: no-repeat;
  background-position: bottom center;
}

.drawer-page-content .drawerImage .drawerBundle .fs-canvas__space,
.drawerBundle .fs-canvas__space .drawerBundle .fs-canvas__space .horizontal {
  position: absolute;
  /* left: 0px; */
  left: -35px;
  /* left: -60px; */
  top: 57px;
  bottom: 0;
  width: 38px;
  border: 1px solid #000;
  border-right: 0;
  border-left: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawerBundle .fs-canvas__space .vertical {
  width: 100%;
  position: relative;
  height: 38px;
  text-align: center;
  border: 1px solid #000000;
  border-top: 0;
  border-bottom: 0;
  margin-bottom: 19px;
  font-weight: 700;
  font-size: 14px;
  line-height: 38px;
  color: #000000;
}

.drawerBundle .fs-canvas__space .horizontal:before {
  content: " ";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  height: 100%;
  background-color: #000;
  z-index: -1;
  width: 0.5px;
}

.drawerBundle .fs-canvas__space .vertical:before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 0.5px;
  background-color: #000;
  z-index: -1;
}

.drawerBundle .fs-canvas__space .horizontal:after,
.drawerBundle .fs-canvas__space .vertical:after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #FFFFFF;
  border: 1px solid #35312E;
  border-radius: 2px;
  width: 69px;
  height: 23px;
  z-index: -1;
}

#proDescription {
  font-size: 14px;
  color: #000;
  width: 100%;
  margin: 0;
  max-width: 500px;
}

.selecte-prod-desc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  margin-top: 16px;
}

.drawerBundle .fs-canvas__canvas {
  margin: auto;
  display: block !important;
  position: relative;
  background-image: linear-gradient(#000000 1px, transparent 1.01px), linear-gradient(90deg, #000000 1px, transparent 1.01px);
  box-shadow: inset 0 0 0 1px #000;
}

.drawerBundle .fs-canvas__canvas:before,
.drawerBundle .fs-canvas__canvas:after {
  content: '';
  position: absolute;
  right: 100%;
  bottom: -68px;
  width: 96px;
  top: 0;
  background-image: url(/cdn/shop/t/9/assets/drawer_01.jpg?v=74608833613920309731744980901), url(/cdn/shop/t/9/assets/drawer1.jpg?v=74608833613920309731744980901);
  background-color: white;
  background-repeat: no-repeat, repeat-y;
  background-position: bottom, top;
}

.drawerBundle .fs-canvas__canvas:after {
  left: 100%;
  right: auto;
  background-image: url(/cdn/shop/t/9/assets/drawer_03.jpg?v=74608833613920309731744980901), url(/cdn/shop/t/9/assets/drawer2.jpg?v=74608833613920309731744980901);
}

/* Drawer Builder grid: responsive height (page is no-scroll) */
body.drawer-builder .fsGrid {
  background-size: 7.69231% 7.69231%;
  /* IMPORTANT:
     Do NOT hard-force a viewport-based height here.
     JS sets an exact pixel height/width on `.droppable-area1` (same element),
     and forcing height with `!important` can clip the last row (e.g. shows “13.5” rows). */
  background-color: #E9E9E9 !important;
}

.hide {
  display: none;
}

/*.drawer-page-content .drawerImage .drawerBundle .canvas-wrapper {background:white; box-shadow:-5px 5px 0 0 black;}*/
/*.drawerBundle .canvas-wrapper .connected-sortable:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    border: 0;
}/*
.fs-canvas__space {
    position: relative;
}
.canvas-image-wrapper-left, .canvas-image-wrapper-right, .canvas-image-wrapper-bottom {
  width: 60px;
  height: 100%;
  display: block !important;
  position: absolute;
  z-index: -1;
}
.canvas-drawer-wrapper {
  display: block;
  position: absolute;
  width: 100%;
  height: -webkit-fill-available;
}
.canvas-image-wrapper-bottom {
  /* Legacy commented values:
  width: 100%;
  bottom: -65px;
  height: auto;
  left: -85px;
  min-width: 112%; */
width: 100%;
bottom: -61px;
height: auto;
left: -67px;
min-width: 118%;
}

.canvas-image-wrapper-right {
  right: -40px;
  /* right: 22px; */
}

.canvas-image-wrapper-left {
  left: -40px;
  /* left: -30px; */
  transform: rotateY(-190deg)
}

.canvas-image-wrapper {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: -10px;
  /* object-fit: contain; */
  z-index: -1;
  /* left: -15px; */
  /* left: -60px; */
  /* bottom: -110px; */
  /* bottom: -90px; */
  /* width: 100%; */
  /* z-index: 9; */
}

.drawer-page-content .drawerProduct {
  flex: 0 360px;
  max-width: 360px;
  padding: 0 0 0 15px;
}

.variantData {
  /* margin: 40px 0 26px 0; */
  margin: 20px 0 20px 0;
  border: 3px solid #000;
  padding: 5px 16px;
  border-radius: 4px;
}

/* Override for drawer builder - cleaner design */
body.drawer-builder .variantData {
  border: none !important;
  border-radius: 0 !important;
}

.drawer-page-content .drawerProduct .sidebar-products {
  width: 100% !important;
  float: none !important;
}

.drawer-page-content .drawerProduct .sidebar-products ul.products {
  display: flex;
  flex-wrap: wrap;
}

.products.connected-sortable.droppable-area2ddd {
  display: flex;
  justify-content: start;
  /* justify-content: space-between; */
  flex-wrap: wrap;
  /* row-gap: 16px;
  column-gap: 8px; */
}

.list-view-item.mineProList span {
  font-size: 14px;
  text-align: center;
  line-height: 1.2em;
  padding-top: 11px;
}

.drawer-parent-wrapper .builtbundle .sidebar-products ul.products li.list-view-item {
  position: relative;
  /* flex: 0 32.3%;
  max-width: 32.3%; */
  flex: 0 48%;
  max-width: 48%;
  background: #FFFFFF;
  margin: 0 !important;
  margin: 5px 5px;
  padding: 0;
  /* min-height: 220px; */
  /* min-height: 253px; */
  min-height: fit-content;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: center;
  /* border-radius: 4px; */
}

.drawer-page-content .drawerProduct .sidebar-products ul.products li.list-view-item a {
  pointer-events: none;
}

.drawer-page-content .sidebar-products ul.products li.list-view-item .product-card {
  padding: 0;
}

.drawer-page-content .sidebar-products ul.products li.list-view-item .product-card .list-view-item__link {
  display: block;
  margin-bottom: 0px;
  table-layout: unset;
  text-align: center;
}

.drawer-page-content .sidebar-products ul.products li.list-view-item .product-card .list-view-item__link .list-view-item__image-column {
  display: block;
  width: 100%;
  max-width: 144px;
  margin: auto;
  max-height: 108px;
}

.drawer-page-content .sidebar-products ul.products li.list-view-item .product-card .list-view-item__link .list-view-item__image-column .list-view-item__image-wrapper {
  margin-right: 0;
}

.drawer-page-content .sidebar-products ul.products li.list-view-item .product-card .list-view-item__link .list-view-item__image-column img {
  width: 100%;
  max-height: 1;
  object-fit: contain;
  max-block-size: 1;
}

.drawer-page-content .sidebar-products ul.products li.list-view-item .product-card .list-view-item__link>div {
  width: 100%;
  display: block;
}

.drawer-page-content .sidebar-products ul.products li.list-view-item .product-card .list-view-item__title span.product-card__title {
  font-weight: 700;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  color: #929292;
}

.custom__item--text_QnFrKb h4.h3 {
  font-size: 0 !important;
  background-image:url({{ 'infinity.svg' | asset_url }});
  background-repeat: no-repeat;
  background-size: auto 65%;
  background-position: left bottom;
}

.card {
  display: flex;
  background-color: #3f3ff81a;
  border-radius: 4px;
  padding: 16px 24px 16px 16px;
  max-width: 600px;
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  margin: 20px 0;
}

.product-card-icon {
  margin-right: 16px;
}

.title {
  font-size: 18px;
  font-weight: 400;
  color: #1f2937;
  margin: 0;
  margin-bottom: 8px;
}

.description {
  font-size: 14px;
  color: #374151;
  margin: 16px 0;
}

.link {
  color: #3F3FF8;
  text-decoration: none;
  font-weight: 500;
  position: relative;
  line-height: 24px;
  font-size: 14px;
}

.link:hover {
  text-decoration: underline;
}

.arrow {
  width: 20px;
  height: 20px;
}

.link svg {
  position: relative;
  top: 6px;
  margin-left: 4px;
}

/* ==================== Featured Collection CSS ============================ */
body.drawer-builder .product-card-style-card .product-card__image-wrapper {
  border-radius: 0;
}

body.drawer-builder .product-card-style-card .product-card__info {
  padding: 16px 0 0 0;
}

body.drawer-builder .product-card-style-card {
  background-color: transparent;
}

/* ==================== Featured Collection CSS End ============================ */
.mobile-screen {
  display: none !important;
}

.desktop-screen {
  /* uncomment to show pairs well section below the editor grid */
  display: block;
  /* display: none; */
}

/* .dimension-input {
    width: 100%;
} */
.dimension-para {
  margin: 0;
  font-size: 16px;
  padding-bottom: 10px;
}

.product-filter-select-wrapper,
.search-and-filter,
.search-input-with-icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* margin: 0 0 10px 0; */
}

.search-input-with-icon {
  width: 100%;
  justify-content: start;
  margin: 0;
}

.search-and-filter {
  position: relative;
  border: 1px solid #111C2D1A;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
  /* justify-content: start; */
}

/* === Filter Improvements (Option A) === */
/* Active filter count badge */
.search-and-filter .filter-count-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #3F3FF8;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  z-index: 10;
}

.search-and-filter .filter-count-badge:empty,
.search-and-filter .filter-count-badge[data-count="0"] {
  display: none;
}

/* Better checkbox styling - applies to BOTH filter dropdowns */
.filter-tags-checkbox label.checkbox-wrapper,
.filter-tags-checkbox-2 label.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin: 2px 0;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s ease;
  font-size: 14px;
  line-height: 1.2;
}

.filter-tags-checkbox label.checkbox-wrapper:hover,
.filter-tags-checkbox-2 label.checkbox-wrapper:hover {
  background: #f5f5f5;
}

.filter-tags-checkbox label.checkbox-wrapper:has(input:checked),
.filter-tags-checkbox-2 label.checkbox-wrapper:has(input:checked) {
  background: #E8E8FF;
  font-weight: 500;
}

.filter-tags-checkbox input[type="checkbox"],
.filter-tags-checkbox-2 input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  accent-color: #3F3FF8;
  cursor: pointer;
  flex-shrink: 0;
}

/* Filter dropdown improvements */
.product-filter-menu,
.product-filter-menu-2 {
  max-height: 320px;
  overflow-y: auto;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  padding: 6px;
}

.filter-tags-checkbox,
.filter-tags-checkbox-2 {
  padding: 0;
  margin: 0;
}

/* Clear All button styling */
.filter-clear-all-btn {
  display: none;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #3F3FF8;
  color: #3F3FF8;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: 8px;
}

.filter-clear-all-btn:hover {
  background: #3F3FF8;
  color: #fff;
}

.filter-clear-all-btn.visible {
  display: inline-flex;
}

/* === End Filter Improvements === */
.product-search-input {
  width: 100%;
  outline: none;
  border: none;
}

.search-input-with-icon input {
  background-color: white;
}

.product-select select {
  padding: 15px;
  border: 1px solid #111C2D1A;
  border-radius: 4px;
  cursor: pointer;
}

.product-select select:focus {
  outline: none;
}

.product-select select option {
  cursor: pointer;
}

.product-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 24px;
  border: 1px solid;
  border-radius: 4px;
  color: #000;
  cursor: pointer;
  user-select: none;
}

.product-filter-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 24px;
  border: 1px solid;
  border-radius: 4px;
  color: #000;
  cursor: pointer;
  user-select: none;
}

.product-filter-menu {
  display: none;
  position: absolute;
  right: 0;
  padding: 16px;
  background: #fff;
  box-shadow: 0 2px 6px #0000001A;
  top: 50px;
  z-index: 9;
  width: 100%;
  max-width: 220px;
  border: 1px solid #111C2D1A;
  border-radius: 4px;
}

.product-filter-menu-2 {
  display: none;
  position: absolute;
  right: 0;
  padding: 16px;
  background: #fff;
  box-shadow: 0 2px 6px #0000001A;
  top: 50px;
  z-index: 9;
  width: 100%;
  max-width: 220px;
  border: 1px solid #111C2D1A;
  border-radius: 4px;
}

.product-filter-menu-3 {
  display: none;
  position: absolute;
  right: 0;
  padding: 16px;
  background: #fff;
  box-shadow: 0 2px 6px #0000001A;
  top: 50px;
  z-index: 9;
  width: 100%;
  max-width: 220px;
  border: 1px solid #111C2D1A;
  border-radius: 4px;
}

.filter-tags-checkbox {
  max-height: 280px;
  overflow: auto;
}

.filter-tags-checkbox-2 {
  max-height: 280px;
  overflow: auto;
}

.product-filter-menu p {
  margin: 0 0 5px 0;
  font-weight: 700;
  font-size: 20px;
}

.product-filter-menu-2 p {
  margin: 0 0 5px 0;
  font-weight: 700;
  font-size: 20px;
}

.product-filter-menu-3 p {
  margin: 0 0 5px 0;
  font-weight: 700;
  font-size: 20px;
}

.filter-btn-wrapper {
  padding-top: 10px;
}

.filter-button {
  width: 100%;
  color: #fff;
  padding: 12px;
  font-weight: 600;
  font-size: 18px;
  border-radius: 5px;
  border: 1px solid #3F3FF8;
}

button.filter-apply {
  background: #3F3FF8;
}

.filter-clear {
  color: #3F3FF8;
  margin-top: 10px;
}

.filter-tags-checkbox input:is([type=checkbox], [type=radio]) {
  --active: #3F3FF8;
}

.filter-tags-checkbox-2 input:is([type=checkbox], [type=radio]) {
  --active: #3F3FF8;
}

/* Generic checkbox wrapper - overridden by filter-specific styles */
.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  cursor: pointer;
}

/* Filter option label: always use a span to ensure text renders reliably on mobile.
   This solves the "checkbox-only" rendering bug on mobile Safari. */
.db-filter-option-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}

/* Pagination removed - infinite scroll only */

/* Teksyo new design */
.drawerLine.drawerSize {
  width: 100%;
  /* max-width: 1530px; */
}

.diemnstion-and-drawerfunctions {
  background-color: transparent;
  padding: 0;
  /* Removed padding to optimize space */
  gap: 12px;
}

.dimension-input .dimension-input-area {
  background-color: #fff;
  border: 1px solid var(--db-border-default);
  border-radius: var(--db-radius-md);
  min-height: var(--db-btn-height-md);
  font-size: var(--db-font-md);
}

.dimension-input .dimension-input-label {
  background-color: #fff !important;
}

div#changeDimension {
  background-color: #3F3FF8;
  color: white;
  border: 1px solid #3F3FF8;
  border-radius: 6px;
  gap: 8px;
  align-items: center;
  display: flex;
  justify-content: center;
  font-size: 14px;
  min-height: 40px;
  height: 40px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

div#changeDimension:hover {
  background-color: #2E2EE6;
}

div#changeDimension svg {
  width: 20px;
  height: 20px;
}

/* div#changeDimension::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 29.3333H20C26.6667 29.3333 29.3334 26.6667 29.3334 20V12C29.3334 5.33332 26.6667 2.66666 20 2.66666H12C5.33335 2.66666 2.66669 5.33332 2.66669 12V20C2.66669 26.6667 5.33335 29.3333 12 29.3333Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 8L8 24' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 13.3333V8H18.6667' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 18.6667V24H13.3333' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
} */
.my-btns-c {
  background-color: #f5f5f5;
  border: 1px solid var(--db-border-default);
  border-radius: var(--db-radius-md);
  padding: var(--db-space-sm) var(--db-space-lg);
  min-height: var(--db-btn-height-md);
  height: var(--db-btn-height-md) !important;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--db-space-sm);
  width: auto;
  max-width: fit-content;
  font-size: var(--db-font-md);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #333;
}

.my-btns-c:hover {
  background-color: var(--db-border-light);
  border-color: var(--db-border-strong);
}

button.btn.btn--primary.get-dimensions.get-item-info.my-btns-c {
  display: flex;
  flex-direction: row;
  color: #333;
  padding: 8px 16px;
  border: 1px solid #e0e0e0;
}

button.btn.btn--primary.get-dimensions.get-item-info.my-btns-c span {
  display: flex;
  flex-direction: row;
}

.my-btns-c .img-sct {
  width: var(--db-icon-md);
  height: var(--db-icon-md);
  object-fit: contain !important;
}

input#searchTagInput {
  padding-right: 21px;
}

button.btn.btn--primary.get-dimensions.get-item-info.my-btns-c .optionImage {
  height: auto;
  display: flex;
  align-items: center;
}

button.btn.btn--primary.get-dimensions.get-item-info.my-btns-c .optionTitle span {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-size: 14px;
  font-weight: 500 !important;
}

button.btn.btn--primary.get-dimensions.get-item-info.my-btns-c svg.img-sct {
  width: 20px;
  height: 20px;
}

button.btn.btn--primary.get-dimensions.get-item-info.my-btns-c:hover:before {
  content: none !important;
  background-color: transparent !important;
}

button.btn.btn--primary.get-dimensions.get-item-info.my-btns-c:hover:after {
  content: none !important;
  background-color: transparent !important;
}

button.btn.btn--primary.get-dimensions.get-item-info.my-btns-c:hover {
  color: #333;
  background-color: #e8e8e8 !important;
  border-color: #d0d0d0 !important;
}

button.btn.btn--primary.get-dimensions.get-item-info.my-btns-c:before {
  content: none;
}

button.btn.btn--primary.get-dimensions.get-item-info.my-btns-c:after {
  content: none;
}

button.btn.btn--primary.get-dimensions.get-item-info.my-btns-c {
  background-color: #f5f5f5 !important;
}

input.dimension-input-area:focus {
  color: var(--db-border-focus);
  border-color: var(--db-border-focus);
  outline: none;
}

.addCartMb {
  margin-left: auto;
}

.addCartMb .drawerLine.drawerTotal {
  display: flex;
}

.drawerLine.drawerFunctions {
  align-items: center;
}

did.totalsection span {
  font-size: 25px !important;
  color: #35312E
}


did.totalsection {
  margin-right: 18px;
}

.addToCart.mu-ads button {
  min-width: 170px;
  min-height: 50px !important;
  font-size: 18px !important;
}


div#changeDimension .optionTitle {
  display: flex;
  gap: 6px;
  align-items: center;
}

.my-selected-opt {
  background-color: white;
  border: 1px solid var(--db-border-default) !important;
  margin: 0;
  min-height: var(--db-btn-height-lg);
  height: 100%;
  max-width: 200px;
  width: 100%;
  border-radius: var(--db-radius-sm) !important;
}

.my-selected-opt select {
  border: 0;
  width: 100%;
}

.builtbundle {
  /* max-width: 1530px; */
  width: 100%;
}

body.drawer-builder .drawerOptions.drawer-build-custom-image {
  width: 100%;
  /* max-width: 1530px; */
}

body.drawer-builder .product-filter-select-wrapper {
  background-color: #f8f8f8;
  padding-inline: 15px;
  border-radius: 4px;
  flex-wrap: wrap;
  /* gap: 16px; */
}

body.drawer-builder .search-and-filter.search-and-filter-2 {
  max-width: 320px;
  background-color: white;
  width: 100%;
  flex-shrink: 0;
}


body.drawer-builder .my-sem-dbs {
  display: flex;
  gap: var(--db-space-lg);
  width: max-content;
  flex-grow: 1;
  flex-wrap: wrap;
}

/* Removed empty ruleset: .search-and-filter.search-and-filter-2 {} */

body.drawer-builder .variantData {
  display: flex;
  align-items: center;
  gap: 36px;
  border: 0;
  flex-wrap: wrap;
  margin: 0;
}

div#builder-products {
  margin-top: 2rem;
}


.variantData .colorsName {
  font-size: 17px !important;
  color: #545454 !important;
}

.colorsOption span {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  border: 0;
}

.colorsOption span.active:before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0;
  width: 32px;
  height: 32px;
  border: 3px solid #000;
  border-radius: 4px;
}

.builtbundle {
  /* max-width: 1530px; */
  width: 100%;
}

body.drawer-builder .drawerOptions.drawer-build-custom-image {
  width: 100%;
  /* max-width: 1530px; */
}

body.drawer-builder .product-filter-select-wrapper {
  background-color: #f8f8f8;
  padding-inline: 15px;
  border-radius: 4px;
  flex-wrap: wrap;
  /* gap: 16px; */
  padding-block: 12px;
}

body.drawer-builder .search-and-filter.search-and-filter-2 {
  max-width: 200px;
  background-color: white;
  width: 100%;
  flex-shrink: 0;
}


body.drawer-builder .my-sem-dbs {
  display: flex;
  gap: var(--db-space-lg);
  width: max-content;
  flex-grow: 1;
}

/* Removed empty ruleset: .search-and-filter.search-and-filter-2 {} */

body.drawer-builder .variantData {
  display: flex;
  align-items: center;
  gap: 36px;
  border: 0;
}

.variantData div {
  margin: 0;
  line-height: 0;
}

.variantData .colorsName {
  font-size: 17px !important;
  color: #545454 !important;
}

.colorsOption span {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  border: 0;
}

/* Removed empty ruleset: .my-selected-opt {} */

.product-select.my-selected-opt,
.search-and-filter.my-selected-opt {
  position: relative;
}

/* .product-select.my-selected-opt:before, .search-and-filter.my-selected-opt:before {
     content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 10px;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg width='17' height='10' viewBox='0 0 17 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.5 9.25L0 0.75H17L8.5 9.25Z' fill='%23D9D9D9'/></svg>");

} */
body.drawer-builder input:is([type=checkbox], [type=radio]):checked {
  --active: #3F3FF8;
}

div#prd-1 svg {
  /* display: none; */
  cursor: pointer;
}

body.drawer-builder div#prd-1 {
  cursor: pointer;
}


.product-select.my-selected-opt select::-ms-expand {
  display: none;
}

select#productOptionsTagselect::-ms-expand {
  display: none;
}

select#productOptionsTag {
  appearance: none;
}

.colorsOption span:before {
  content: '';
  position: absolute;
  top: -4px !important;
  left: -4px !important;
  width: 36px !important;
  height: 36px !important;
  border: 2px solid #000 !important;
  border-radius: 4px !important;
}

p.info-dragger {
  margin: 0;
  margin-block: 15px 12px;
  font-size: 14px;
  color: white;
  background-color: black;
  padding: 0 8px;
  width: fit-content;
  border: 5px;
  display: flex;
  gap: 8px;
  border-radius: 2px;
  align-items: center;
  margin-left: 38px;
}

p.info-dragger svg {
  width: 7.5px;
  height: 7.5px;
  cursor: pointer;
}

div#prd-3 {
  max-width: 100%;
  border: 0 !important;
  border-radius: 0;
}

@media (max-width: 1435px) {
  did.totalsection span {
    font-size: 27px !important;
    color: #35312E;
  }

  did.totalsection {
    margin-right: 0px;
  }

  div#changeDimension {
    font-size: 15px;
    max-width: 196px;
    gap: 1px;
  }

  .diemnstion-and-drawerfunctions {
    gap: 12px;
  }

  .dimension-input {
    gap: 12px;
  }
}

/* new design end  */




@media (max-width: 1399px) {
  .drawerLine.drawerFunctions {
    justify-content: flex-end;
  }

  did.totalsection span {
    font-size: 25px !important;
    color: #35312E;
  }

  .my-btns-c {
    width: auto !important;
    min-width: 80px;
  }

  .product-filter-select-wrapper {
    padding-block: 18px;
  }

  .my-sem-dbs {
    gap: 15px
  }
}

@media (max-width: 1280px) {
  .my-btns-c {
    flex-shrink: 0;
    width: auto !important;
    min-width: 80px;
  }

  .my-btns-c .img-sct {
    width: 20px;
    height: 20px;
    object-fit: contain !important;
  }

  .my-sem-dbs {
    padding-block: 0px
  }
}

@media (max-width: 1250px) and (min-width: 1152px) {
  .drawerBundle {
    /*width: 85%;*/
  }

  .grid-wrapper {
    /* display: flex; */
    justify-content: center;
  }

  .grid-wrapper {
    /*width: 65%;*/
  }
}

@media (max-width: 1025px) {

  .diemnstion-and-drawerfunctions {
    flex-wrap: wrap;
  }

  .dimension-input {
    width: 100%;
  }

  .drawerValue {
    width: 50%;
  }

  p.info-dragger svg {
    width: 15.5px;
    height: 15.5px;
  }

  div#changeDimension .optionTitle svg {
    flex-shrink: 0;
    width: 25px;
  }
}

@media (max-width: 825px) {
  .my-btns-c {
    flex-shrink: 0;
    width: auto !important;
    min-width: 80px;
  }

  .drawerLine.drawerFunctions {
    flex-wrap: wrap;
  }

  div#changeDimension {
    max-width: 100%;
    width: 100%;
    flex-wrap: wrap;
    min-height: 45px;
    height: 45px;
  }

  .addCartMb {
    width: 100% !important;
    max-width: 100%;
  }

  .addCartMb .drawerLine.drawerTotal {
    justify-content: space-between;
  }

  p.info-dragger {
    margin-left: 0;
  }

  div#shideButton,
  .get-dimensions.get-item-info.my-btns-c,
  .option.clear.my-btns-c {
    width: 100% !important;
    max-width: 100%;
    flex: 1 1 0;
    min-height: 45px;
    height: 45px !important;
    gap: 0.6rem;
  }

  .dimension-heading {
    font-size: 24px;
  }

  .dimension-para {
    font-size: 16px;
  }

  .addCartMb div {
    flex-direction: column-reverse;
  }

  .addToCart.mu-ads button {
    min-height: 45px !important;
  }

  .dimension-input .dimension-input-area {
    min-height: 45px;
    height: 45px;
  }

  did.totalsection span {
    font-size: 22px;
  }

  .my-sem-dbs>div:nth-of-type(-n+2) {
    /* your styles here */
    max-width: 100%;
    /* margin: auto; */
    width: 48%;
  }


  .my-sem-dbs {
    gap: 7px;
    justify-content: space-between;
  }

  .search-and-filter.search-and-filter-2 {
    max-width: 100%;
  }


  .variantData {
    margin: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 7px;
    align-items: center;
    padding: 0;
    justify-content: space-between;
    width: 100%;
  }

  .colorsOption span {
    width: 18px;
    height: 18px;
  }

  .colorsOption span:before {
    width: 26px !important;
    height: 26px !important;
    border-width: 1px !important;
  }

  div#productOptionsTagWrapper {
    height: 45px;
  }

  div#productOptionsTagWrapper .dropdown-label {
    padding-block: 19px;
  }

  /* .custom-dropdown .dropdown-options {
    top: 65px !important;
} */

  div#prd-1 {
    margin: 0;
    height: 45px;
  }

  .search-input-with-icon {
    height: 100%;
  }

  /* .product-filter-menu.product-filter-size-selector {
    top: 65px;
} */

  .search-and-filter.search-and-filter-2 {
    height: 45px;
  }

  /* .product-filter-menu-2 {
    top: 65px;
} */
  .colorsOption span {
    margin-right: 7px;
  }

  .variantData .colorsName {
    font-size: 15px !important;
    color: #545454 !important;
  }

  button.addToCartBTN.product-form__submit.btn.btn--primary {
    font-size: 15px !important;
  }

  .addToCart.mu-ads button {
    padding: 22px !important;
  }

  .variantData .labelData span {
    font-size: 14px !important;
  }

  .addCartMb.my-cd-card-2 {
    width: 100vw !important;
    max-width: 100vw;
    margin-left: -1.5rem;
    margin-bottom: 1rem;
  }

  .addCartMb.my-cd-card-2 button.addToCartBTN.product-form__submit.btn.btn--primary {
    border-radius: 0;
  }
}

.my-cd-card-2 {
  display: none !important;
}

.my-cd-card-1 {
  display: block !important;
}

/* Hide unused "Select Option" filter and its parent container */
.search-and-filter-3.custom-dropdown,
.my-sem-dbs>.product-select.my-selected-opt:first-child {
  display: none !important;
}

@media (max-width: 640px) {
  .my-cd-card-2 {
    display: block !important;
  }

  .my-cd-card-1 {
    display: none !important;
  }

  .drawerLine.drawerFunctions>div:last-child {
    width: 100%;
  }

  .drawer-parent-wrapper .builtbundle .sidebar-products ul.products li.list-view-item {
    flex: 0 33.333% !important;
    max-width: 33.333% !important;
  }

  .drawerLine.drawerFunctions {
    flex-wrap: wrap;
  }

  .drawer-page-content .drawerImage .drawerBundle .fs-canvas__space,
  .drawerBundle .fs-canvas__space {
    /* padding: 0 12px 0 60px !important; */
    padding: 0 12px 0 12px !important;
  }

  .canvas-image-wrapper-bottom {
    bottom: -23px !important;
    left: -21px !important;
    min-width: 113% !important;
    /* left: -25px !important;
    min-width: 114% !important; */
  }

  .canvas-image-wrapper-left,
  .canvas-image-wrapper-right {
    width: 30px;
  }

  .canvas-image-wrapper-left {
    /* left: -20px !important; */
    /* left: -14px !important; */
    /* left: -10px !important; */
    left: -9px !important;
  }

  .canvas-image-wrapper-right {
    /* right: -5px !important; */
    right: -10px !important;
  }

  .drawerBundle .fs-canvas__space .horizontal,
  .drawerBundle .fs-canvas__space .vertical {
    font-size: 10px;
    /* width: 28px; */
  }

  .drawerLine.drawerFunctions {
    width: 100%;
    justify-content: space-between;
  }

  .drawerBundle .fs-canvas__space .horizontal {
    left: 0;
  }

  body.drawer-builder .main-content {
    /* padding: 44px 16px; */
    padding: 44px 10px;
  }

  body.drawer-builder .shopify-section:has(.section--featured-collection) {
    padding-inline: 0;
  }

  /* Removed: .selectedProInfoInr responsive styles (deprecated) */
  #selectedProductImage {
    width: 100px;
  }

  .selecte-prod-link,
  .selectedProductDimensions {
    font-size: 16px;
  }

  #proDescription p {
    line-height: 1.3em;
  }

  .selectedProductBlocks {
    margin-top: 10px;
  }

  .canvas-image-wrapper {
    bottom: -35px;
    left: 40px;
  }

  .fsGrid {
    height: 300px;
  }

  .drawerBundle .fs-canvas__space .horizontal:after,
  .drawerBundle .fs-canvas__space .vertical:after,
  .drawerBundle .fs-canvas__space .vertical:after {
    /* width: 42px; */
    width: 52px;
    /* width: 55px; */
    font-size: 12px;
  }

  /* Removed: .selectedProInfo responsive styles (deprecated) */
  /* .grid-wrapper {
    flex-direction: column-reverse !important;
  } */
  p.info-dragger {
    font-size: 12px;
  }

  p.info-dragger svg {
    width: 9.5px;
    height: 9.5px;
  }
}

/* Remove legacy help icon (?) from the builder UI */
body.drawer-builder .db-help-icon-legacy {
  display: none !important;
}

.confirmation-message .confirm-btn {
  background: black;
  color: #fff;
  border-radius: 6px;
  height: fit-content;
  padding: 6px 24px;
}

.confirmation-message .cancel-btn {
  padding: 0;
  margin-left: 20px;
  border: 0;
}

@media (max-width:375px) {
  .canvas-image-wrapper-right {
    right: -9px !important;
  }

  .canvas-image-wrapper-bottom {
    left: -20px !important;
    min-width: 112% !important;
  }

  .canvas-image-wrapper-left,
  .canvas-image-wrapper-right {
    width: 10px !important;
  }
}

@media (max-width:625px) and (min-width:320px) {
  .drawer-parent-wrapper .builtbundle .sidebar-products ul.products li.list-view-item {
    min-height: unset;
    /* aspect-ratio: 7/8; */
  }
}

@media (max-width:425px) and (min-width:376px) {

  .canvas-image-wrapper-left,
  .canvas-image-wrapper-right {
    width: 10px !important;
  }

  .canvas-image-wrapper-right {
    /* right: -10px !important; */
    right: -10px !important;
  }

  .canvas-image-wrapper-bottom {
    /* left: -21px !important;
    min-width: 109% !important; */
    left: -21px !important;
    min-width: 113% !important;
    z-index: -1;
  }
}

@media (min-width: 1152px) {
  .drawerLine.drawerFunctions {
    flex-wrap: nowrap;
  }

  .drawerLine.drawerFunctions>div {
    width: auto;
  }
}

@media (max-width: 1000px) {
  .grid-wrapper {
    width: 672px;
    text-align: center;
  }

  .drawer-page-content .drawerImage .drawerBundle .fs-canvas__space,
  .drawerBundle .fs-canvas__space {
    padding: 0 67.2px 48.3px !important;
    background-size: auto 48.3px;
  }

  .drawerBundle .fs-canvas__canvas:before,
  .drawerBundle .fs-canvas__canvas:after {
    width: 67.2px;
    bottom: -48.3px;
    background-size: 67.2px auto;
  }

  p.info-dragger {
    margin-left: 31px;
  }

  .dimension-wrapper {
    margin-bottom: 10px;
  }

}

@media (max-width: 600px) {
  .grid-wrapper {
    width: 408px; /* 480px × 0.85 = 408px (~15% smaller) */
  }

  .drawer-page-content .drawerImage .drawerBundle .fs-canvas__space,
  .drawerBundle .fs-canvas__space {
    padding: 0 40.8px 29.3px !important; /* scaled ~15% smaller */
    background-size: auto 29.3px;
  }

  .drawerBundle .fs-canvas__canvas:before,
  .drawerBundle .fs-canvas__canvas:after {
    width: 40.8px;
    bottom: -29.3px;
    background-size: 40.8px auto;
  }

  p.info-dragger {
    margin-left: 17px; /* scaled ~15% smaller */
  }
}

@media (max-width: 480px) {
  .grid-wrapper {
    width: 326px; /* 384px × 0.85 = 326.4px (~15% smaller) */
  }

  .drawer-page-content .drawerImage .drawerBundle .fs-canvas__space,
  .drawerBundle .fs-canvas__space {
    padding: 0 32.6px 17.6px !important; /* scaled ~15% smaller */
    background-size: auto 23.5px;
  }

  .drawerBundle .fs-canvas__canvas:before,
  .drawerBundle .fs-canvas__canvas:after {
    width: 32.6px;
    bottom: -17.6px;
    background-size: 32.6px auto;
  }

  p.info-dragger {
    margin-left: 11px; /* scaled ~15% smaller */
  }
}

@media (max-width: 1152px) {
  .drawer-parent-wrapper .builtbundle .sidebar-products ul.products li.list-view-item {
    flex: 48%;
    max-width: 48%;
  }

  .dimension-heading {
    font-size: 28px;
  }

  .drawerOptions.drawer-build-custom-image {
    width: 100%;
    padding: 0;
  }

  .drawer-parent-wrapper {
    flex-direction: column;
  }

  .mobile-screen {
    display: block !important;
  }

  .desktop-screen {
    display: none !important;
  }

  .drawerOptions.drawer-build-custom-image {
    margin-top: 20px;
  }
}

.drawer-parent-wrapper .builtbundle .sidebar-products ul.products li.list-view-item {
  /* flex: 0 33.333%;
  max-width: 33.333%; */
  flex: 0 20%;
  max-width: 20%;
}

@media (min-width:1250px) {
  .drawerLine.drawerFunctions {
    flex-wrap: nowrap;
  }

  .dimension-heading {
    font-size: 34px;
    font-weight: 700;
  }
}

@media (max-width:1024px) and (min-width:781px) {
  .custom__item--text_QnFrKb h4.h3 {
    background-size: 100% auto;
    background-position: left center;
  }
}

@media (max-width:780px) {
  .diemnstion-and-drawerfunctions {
    flex-wrap: wrap;
  }

  .custom__item--text_QnFrKb h4.h3 {
    background-size: 70px auto;
    background-position: left center;
    flex: 0 0 82px;
  }
}

@media (max-width:1280px) {
  .canvas-image-wrapper-bottom {
    bottom: -45px;
    left: -55px;
    min-width: 119%;
  }

  .canvas-image-wrapper-right {
    right: -30px
  }

  .canvas-image-wrapper-left {
    left: -35px;
  }

  div#changeDimension svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
}

#shopify-section-custom_content_jEiF49 .page-width {
  margin-bottom: 0 !important;
}

.shipingMarquee {
  display: flex;
  justify-content: space-between;
  align-items: center;
  animation: shipingMarquee 10s linear infinite;
  animation-duration: 50s;
}

.shipingMarquee img {
  padding-right: 30px;
}

@keyframes shipingMarquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}


.drawer-page-content .drawerProduct .sidebar-products ul.products {
  max-height: 840px;
  overflow: auto;
}

@media only screen and (max-width: 1535px) {
  body.drawer-builder .main-content {
    padding-inline: 3.7rem;
    padding-block: 50px;
  }
}

@media only screen and (max-width: 1500px) {

  .drawer-page-content .drawerImage {
    padding: 0 15px;
    margin: auto;
  }

  .drawer-page-content .drawerProduct {
    max-width: 980px;
    width: 980px;
    flex: 0 0 980px;
    margin: auto;
    padding: 50px 0 0 !important;
  }

  .drawer-page-content .drawerProduct .sidebar-products ul.products li.list-view-item {
    flex: 0 180px;
    background: #fff;
    max-width: 180px;
  }

  .drawer-page-content .drawerImage .drawerFunctions .option .optionTitle {
    font-size: 15px;
    line-height: 20px;
  }

  .drawer-page-content .drawerImage .drawerTotal .addToCart {
    width: 100%;
    max-width: 209px;
  }

  .drawer-page-content .drawerImage .drawerBundle .fs-canvas__space .vertical {

    left: -12px;
    font-size: 17px;
  }

  .drawer-page-content .drawerImage .drawerBundle .fs-canvas__space .horizontal:after,
  .drawer-page-content .drawerImage .drawerBundle .fs-canvas__space .vertical:after {
    width: 57px;

  }

  /* .selectedProInfo {
      margin-left: 60px;
  } */
  .drawer-page-content .drawerImage .drawerTotal .totalsection span.totalPrice,
  .drawer-page-content .drawerImage .drawerTotal .totalsection h3 {
    font-size: 27px;
    line-height: 40px;

  }
}

@media only screen and (max-width: 1280px) {
  body.drawer-builder .main-content {
    padding-inline: 1.5rem;
    padding-block: 30px;
  }
}

@media only screen and (max-width: 1000px) {
  .drawer-page-content .drawerImage .shopify-section {
    width: 660px;
  }

  .drawer-page-content .drawerProduct {
    max-width: 660px;
    width: 660px;
  }

  .drawer-page-content .drawerProduct .sidebar-products ul.products li.list-view-item {
    flex: 0 120px;
    background: #fff;
    max-width: 120px;
  }

  #shopify-section-drawerImage .drawerLength label,
  #shopify-section-drawerImage .drawerWidth label {
    font-size: 15px !important;
  }

  .drawer-page-content .drawerImage .drawerOptions .drawerSize .drawerValue label,
  .drawer-page-content .drawerImage .drawerOptions .drawerSize .drawerValue span {
    font-size: 13px;
  }

  .drawer-page-content .drawerImage .drawerOptions .drawerSize .drawerValue input {
    width: 80px;
  }

  .drawer-page-content .drawerImage .drawerTotal .totalsection span.totalPrice,
  .drawer-page-content .drawerImage .drawerTotal .totalsection h3 {
    font-size: 22px;
  }

  .drawer-page-content .drawerImage .drawerTotal .addToCart a {
    font-size: 16px;
  }

  /* Mobile: Rotate, Remove, Size buttons in same row */
  .canvas-hoverd-item-btn-rotate,
  .canvas-hoverd-item-btn-remove,
  .canvas-hoverd-item-btn-size {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 10px 4px 0 4px;
    min-width: 28%;
    max-width: 32%;
    height: 44px;
    box-sizing: border-box;
    vertical-align: top;
    padding: 8px 12px;
  }

  .canvas-hoverd-item-btn-rotate span,
  .canvas-hoverd-item-btn-remove span {
    display: inline !important;
    font-size: var(--db-font-base);
    font-weight: 400;
    font-family: var(--font-body-family);
    margin-left: 4px;
  }

  .canvas-hoverd-item-btn-size {
    justify-content: center;
    font-size: var(--db-font-base);
    font-weight: 400;
  }
}

@media only screen and (max-width: 700px) {
  .drawer-page-content .drawerImage .shopify-section {
    width: 100%;
  }

  .drawer-page-content .drawerProduct {
    max-width: 100%;
    width: 100%;
  }

  .drawer-page-content .drawerImage .drawerBundle .fs-canvas__space .vertical:after {
    transform: rotate(90deg) translate(-50%, -50%);
    transform-origin: left;
    margin: -10px;
  }

  .drawer-page-content .drawerImage .drawerBundle .fs-canvas__space .vertical .vertValue {
    transform: rotate(90deg);
    transform-origin: center;
  }

  .drawer-page-content .drawerImage .drawerBundle .fs-canvas__space {
    padding: 0 0 0 25px !important;
  }

  .drawer-page-content .drawerImage {
    padding: 0;
  }

  .drawer-page-content .drawerImage .drawerTotal .totalsection h3 {
    margin-right: 5px;
  }

  .drawer-page-content .drawerImage .drawerOptions .drawerLine {
    margin-top: 0 !important;
  }

  .drawer-page-content .drawerImage .drawerTotal .addToCart a {
    padding-left: 5px;
    padding-right: 5px;
  }

  .drawer-page-content .drawerImage .drawerOptions {
    margin: 0 -30px;
    border-radius: 0;
  }

  .drawer-page-content .drawerImage .drawerFunctions .option {
    margin-top: 10px;
  }

  .drawer-page-content .drawerProduct {
    margin-top: 0 !important;
  }

  .drawer-page-content .drawerProduct .sidebar-products ul.products li.list-view-item {
    width: 33.33%;
    flex: 0 0 33.33%;
  }

  .canvas-hoverd-item-btn-rotate,
  .canvas-hoverd-item-btn-remove,
  .canvas-hoverd-item-btn-size {
    top: -35px;
  }

}

@media only screen and (max-width:480px) {
  #shopify-section-header .announcement-bar__message {
    font-size: 14px !important;
  }

  .shipingMarquee {
    animation-duration: 10s;
  }

  .shipingMarquee .img-main-sec:nth-child(3n+1) {
    height: 32px;
  }

  .shipingMarquee .img-main-sec:nth-child(3n+2) {
    height: 43px;
  }

  .shipingMarquee .img-main-sec:nth-child(3n+3) {
    height: 38px;
  }
}


/* ========================= ====================== */
.share-btns-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.share-btns-container .get-dimensions.get-item-info {
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: #3f3ff8;
  text-decoration: underline;
  padding-inline: 10px;
  font-size: 15px;
  height: fit-content;
  margin-top: 11px;
}

p.copied-to-clipboard {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #e7e8ea;
  padding: 10px 16px 10px 15px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px -4px #0000005c;
  background-color: #000000;
  color: #ffffff;
  width: 100%;
  font-size: 14px;
  font-weight: 300;
  margin: 0;
  position: fixed;
  top: 114px;
  opacity: 0;
  visibility: hidden;
  transition: all .5s ease-in-out;
  font-weight: 400;
  z-index: 9;
  width: fit-content;
}

p.copied-to-clipboard.active {
  opacity: 1;
  visibility: visible;
  top: calc(114px + 8px)
}

p.copied-to-clipboard svg {
  width: 23px;
  height: 23px;
  color: #ffffff;
  margin-top: 0px;
}

.custom-dropdown .dropdown-options {
  display: none;
  position: absolute;
  width: 100%;
  background: white;
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  display: none;
  position: absolute;
  right: 0;
  padding: 16px;
  background: #fff;
  box-shadow: 0 2px 6px #0000001A;
  top: 50px;
  z-index: 9;
  width: 100%;
  max-width: 220px;
  border: 1px solid #111C2D1A;
  border-radius: 4px;
}

.custom-dropdown.open .dropdown-options {
  display: block;
}

.custom-dropdown .dropdown-options li {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  cursor: pointer;
}


div#productOptionsTagWrapper {
  display: flex;
  align-items: center;
}

div#productOptionsTagWrapper .dropdown-label {
  height: fit-content;
  font-size: 14px;
  color: #838383;
  cursor: pointer;
  padding: 10px;
  padding-top: 13px;
  width: 100%;
}

label.checkbox-wrapper.filter-apply {
  font-size: 14px;
  line-height: 1.2;
  padding: 8px 10px;
  margin: 2px 0;
}


@media (max-width:768px) {
  li.list-view-item.active:before {
    display: none !important;
  }
}

/* Drawer Builder: force square color swatches to 23x23px on all breakpoints */
body.drawer-builder .colorsOption span {
  width: 22px !important;
  height: 22px !important;
  border-radius: 3px !important;
}

/* Hide ring for non-selected swatches */
body.drawer-builder .colorsOption span:not(.active):before {
  display: none !important;
}

/* Selected ring: add gap by increasing to 30x30 */
body.drawer-builder .colorsOption span.active:before {
  width: 30px !important;
  height: 30px !important;
  border-width: 2px !important;
  border-radius: 4px !important;
  top: -4px !important;
  left: -4px !important;
}

/* Drawer Builder swatch alignment with global rules */
body.drawer-builder .colorsOption span {
  width: 20px !important;
  height: 20px !important;
  border-radius: 3px !important;
}

body.drawer-builder .colorsOption span:before {
  display: none !important;
}

body.drawer-builder .colorsOption span.active {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
}

/* Drawer Builder product grid → collections-like */
#builder-products ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 768px) {
  #builder-products ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  #builder-products ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Card */
.db-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.db-card__image {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
}

.db-card__img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Ensure hidden state collapses image properly */
.db-card__img.hide {
  display: none !important;
}

/* ===== Drawer Builder grid + card hard overrides ===== */
body.drawer-builder .drawer-page-content .drawerProduct .sidebar-products ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  /* Force 3 columns */
  gap: 10px !important;
  justify-content: start !important;
}

/* Neutralize legacy flex widths and reversed column on tiles */
body.drawer-builder .drawer-page-content .drawerProduct .sidebar-products ul.products li.list-view-item {
  flex: initial !important;
  max-width: initial !important;
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Square image wrapper and layered images */
.db-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
}

.db-card__image .db-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.drawer-builder .db-card__image .db-card__img,
body.drawer-builder img.product-img.db-card__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.db-card__info {
  display: grid;
  gap: 6px;
}

.db-card__title.h6 {
  margin: 0;
}

/* Ensure breakpoints do not re-clamp tile widths in Drawer Builder */
@media (max-width: 1535px),
(max-width: 1280px),
(max-width: 1000px),
(max-width: 640px) {
  body.drawer-builder .drawer-page-content .drawerProduct .sidebar-products ul.products li.list-view-item {
    flex: initial !important;
    max-width: initial !important;
    width: auto !important;
  }
}

/* Normalize product card heights and image area alignment */
body.drawer-builder #builder-products ul.products,
body.drawer-builder .drawer-page-content .drawerProduct .sidebar-products ul.products {
  align-items: start !important;
  align-content: start !important;
}

body.drawer-builder .drawer-page-content .drawerProduct .sidebar-products ul.products li.list-view-item {
  display: flex !important;
}

body.drawer-builder .db-card {
  width: 100%;
  display: flex;
  flex-direction: column;
}

body.drawer-builder .db-card__image {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1/1;
}

body.drawer-builder .db-card__info {
  flex: 0 0 auto;
  min-height: 44px;
  align-content: start;
}

body.drawer-builder .db-card__title.h6 {
  line-height: 1.3;
  min-height: calc(1.3em * 2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ===== Strong, ID-based overrides to match actual DOM (#builder-products > #product-show) ===== */
body.drawer-builder #builder-products.sidebar-products {
  width: 100% !important;
  max-width: none !important;
}

body.drawer-builder #builder-products.sidebar-products ul#product-show.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  /* Force 3 columns */
  gap: 10px !important;
  justify-content: start !important;
  align-items: start !important;
  align-content: start !important;
}

body.drawer-builder #builder-products.sidebar-products ul#product-show.products>li.list-view-item {
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* As a catch‑all, trump legacy flex rule bound to the class trio */
body.drawer-builder .products.connected-sortable.droppable-area2ddd {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)) !important;
  gap: 4px !important;
  justify-content: start !important;
  align-items: start !important;
  align-content: start !important;
}

/* Mobile: force 2-column grid on small viewports */
@media (max-width: 640px) {

  body.drawer-builder #builder-products.sidebar-products ul#product-show.products,
  body.drawer-builder .products.connected-sortable.droppable-area2ddd,
  body.drawer-builder .drawer-page-content .drawerProduct .sidebar-products ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    align-content: start !important;
  }
}

/* Info: inherit theme product fonts; .h6 applies theme typography */
.db-card__info {
  display: grid;
  gap: 6px;
}

.db-card__title.h6 {
  margin: 0;
}

.db-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
}

.db-card__price {
  font-weight: 600;
}

/* ===== Expanded Products Panel: 5 columns ===== */
body.drawer-builder.products-expanded #builder-products.sidebar-products ul#product-show.products,
body.drawer-builder.products-expanded .drawer-page-content .drawerProduct .sidebar-products ul.products {
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 12px !important;
}

/* ===== A2 LAYOUT (GATED) =====
 * The A2 markup is gated in Liquid via `ENABLE_A2_LAYOUT`.
 * We intentionally do NOT hide it here to avoid "half-enabled" states.
 */

/* Products Panel Container - right side */
body.drawer-builder .drawerOptions.drawer-build-custom-image {
  background: #fff;
  border-left: 1px solid #e5e5e5;
  padding: 16px !important;
  box-sizing: border-box;
}

/* ===== COLOR SECTION - Sticky Header ===== */
body.drawer-builder .variantData {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  background: #fff !important;
  padding: 10px 0 8px 0 !important;
  border-bottom: 1px solid #eee !important;
  margin-bottom: 8px !important;
}

body.drawer-builder .variantData .labelData {
  display: block !important;
  margin-bottom: 8px;
}

body.drawer-builder .variantData .labelTitle {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

body.drawer-builder .variantData .colorsName {
  font-size: 13px;
  font-weight: 500;
  color: #333;
}

body.drawer-builder .variantData .colorsOption {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

body.drawer-builder .colorsOption span {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  /* User mentioned square, ensuring it looks nice */
  cursor: pointer;
  border: 1px solid #e0e0e0;
  /* Visibility for white swatch */
  transition: all 0.2s ease;
}

body.drawer-builder .colorsOption span:hover {
  transform: scale(1.1);
}

body.drawer-builder .colorsOption span.active {
  outline: 2px solid #333 !important;
  outline-offset: 2px !important;
}

/* Hide grey background from filter wrapper */
body.drawer-builder .product-filter-select-wrapper {
  background: transparent !important;
  background-color: #fff !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide the filter dropdowns (my-sem-dbs) in compact mode, but keep color visible */
body.drawer-builder .product-filter-select-wrapper .my-sem-dbs {
  display: none !important;
}

/* Show filter dropdowns in expanded mode.
   Use a stable grid to avoid wrap/un-wrap jitter during the panel width transition. */
body.drawer-builder.products-expanded .product-filter-select-wrapper .my-sem-dbs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  align-items: center !important;
}

/* Utensil (search-and-filter-2) spans full width under the 2-up row */
body.drawer-builder.products-expanded .product-filter-select-wrapper .search-and-filter-2 {
  grid-column: 1 / -1 !important;
}

/* Show filter dropdowns as inline-flex in expanded mode */
body.drawer-builder.products-expanded .search-and-filter,
body.drawer-builder.products-expanded .search-and-filter-2 {
  display: inline-flex !important;
  position: relative !important;
}

/* Make color section sticky within products panel */
body.drawer-builder .drawerOptions.drawer-build-custom-image .variantData {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  background: #fff !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  border: none !important;
}

/* Hide filter status bar in compact mode - only show when expanded */
body.drawer-builder .layout-filter-status {
  display: none !important;
}

/* Show filter status bar only when expanded */
body.drawer-builder.products-expanded .layout-filter-status {
  display: flex !important;
  background: #f5f5f5 !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  margin-bottom: 6px !important;
  font-size: 12px !important;
  flex-wrap: nowrap !important;
  gap: 6px 12px !important;
  align-items: center !important;
}

body.drawer-builder .layout-filter-status__pill {
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
  background: #e8e8ff !important;
  color: #3F3FF8 !important;
  font-weight: 600 !important;
}

body.drawer-builder .layout-filter-status__hint {
  font-size: 11px !important;
  color: #888 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  order: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 640px) {
  body.drawer-builder.products-expanded .layout-filter-status {
    flex-wrap: wrap !important;
  }
  body.drawer-builder .layout-filter-status__hint {
    flex: 1 1 100% !important;
    white-space: normal !important;
  }
}

body.drawer-builder .layout-filter-status__toggle {
  font-size: 12px !important;
  gap: 4px !important;
  white-space: nowrap !important;
  color: #3F3FF8 !important;
}

/* =========================================================
   STACKING + OFFSET FIXES (Drawer Builder only)
   - Prevent Expand/Collapse tab from clipping under header
   - Ensure cart drawer sits above builder header/topbar
   ========================================================= */

/* One source of truth for top offset (uses theme var if present) */
body.drawer-builder {
  /* Stable offset for builder layout; avoids theme-specific --header-height quirks */
  /* Align expand/collapse tab to bottom edge of `.drawerLine.drawerSize.db-topbar` */
  --db-top-offset: calc(176px + env(safe-area-inset-top, 0px));
}

/* Desktop-only geometry: mobile uses bottom-sheet */
@media (min-width: 641px) {
  /* Expand/collapse tab: keep it below header/topbar */
  body.drawer-builder .db-expand-tab,
  body.drawer-builder.products-expanded .db-expand-tab {
    top: var(--db-top-offset) !important;
  }

  /* Micro-nudge: in expanded state the darker tab can appear ~1–2px higher due to shadows/border.
     Align visually with the bottom edge of `.drawerLine.drawerSize.db-topbar`. */
  body.drawer-builder.products-expanded .db-expand-tab {
    top: calc(var(--db-top-offset) + 2px) !important;
  }

  /* Expanded products panel: match the same offset */
  body.drawer-builder.products-expanded .drawer-parent-wrapper > .drawerOptions.drawer-build-custom-image {
    top: var(--db-top-offset) !important;
    height: calc(100vh - var(--db-top-offset)) !important;
  }
}

/* Cart drawer should always be above builder header/topbar on the builder page */
body.drawer-builder .drawer[open],
body.drawer-builder .drawer[active] {
  z-index: 6000 !important;
}
body.drawer-builder .drawer[open] > .drawer__inner,
body.drawer-builder .drawer[active] > .drawer__inner {
  z-index: 6001 !important;
}
body.drawer-builder .drawer[open] > .fixed-overlay,
body.drawer-builder .drawer[active] > .fixed-overlay {
  z-index: 5999 !important;
}

/* =========================================================
   Drawer Builder: force true no-page-scroll layout
   - Removes tiny vertical scroll caused by later .main-content padding rules
   - Keeps internal panels scrollable (they have their own overflow)
   ========================================================= */

html.drawer-builder-page,
body.drawer-builder {
  height: 100%;
  overflow: hidden !important; /* kill tiny page scroll */
}

/* Override later rule that re-adds padding-block: 65px + huge inline padding */
body.drawer-builder .main-content,
body.drawer-builder main#MainContent {
  padding: 0 !important;
  margin: 0 !important;
}

/* NOTE: `--db-top-offset` is defined once above; avoid redefining it elsewhere. */

/* Products list container */
body.drawer-builder .builtbundle {
  position: relative;
}

body.drawer-builder #builder-products.sidebar-products {
  padding: 0 !important;
}

/* ===== PRODUCT CARDS - Clean Modern Design ===== */
body.drawer-builder .db-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s ease;
  border: 1px solid #f0f0f0;
  cursor: pointer;
}

body.drawer-builder .db-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: #e0e0e0;
}

body.drawer-builder .db-card__image {
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  background: #f9f9f9;
}

body.drawer-builder .db-card__info {
  padding: 8px 6px 6px;
}

body.drawer-builder .db-card__title.h6 {
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: #333 !important;
  margin: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 28px;
}

body.drawer-builder .db-card__price {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #3F3FF8 !important;
  margin-top: 4px !important;
}

/* ===== TOP ACTION BAR - Two-Section Layout ===== */
/* Structure: Left (Dimensions + Apply) | Right (Actions + Total + Cart) */

/* Main container - flexbox with space-between for left/right sections */
body.drawer-builder .drawerLine.drawerSize,
body.drawer-builder .db-topbar {
  background: #fff !important;
  border-bottom: 1px solid #e8e8e8 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  min-height: 64px !important;
  max-height: 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 24px !important;
  gap: 24px !important;
  /* Topbar Fix: Raise above overlay (99) to be clickable in expanded mode */
  position: relative !important;
  z-index: 200 !important;
}

/* ===== LEFT SECTION: Dimensions + Apply ===== */
.db-topbar__left {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-shrink: 0 !important;
}

.db-topbar__dimensions {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}

.db-topbar__field {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
}

.db-topbar__label {
  font-size: var(--db-font-md) !important;
  font-weight: 500 !important;
  color: #333 !important;
  white-space: nowrap !important;
}

.db-topbar__input {
  width: 75px !important;
  height: var(--db-btn-height-md) !important;
  min-height: var(--db-btn-height-md) !important;
  max-height: var(--db-btn-height-md) !important;
  padding: 0 var(--db-space-md) !important;
  border: 1px solid var(--db-border-default) !important;
  border-radius: var(--db-radius-md) !important;
  font-size: var(--db-font-md) !important;
  font-weight: 400 !important;
  text-align: center !important;
  color: #333 !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

.db-topbar__input:focus {
  border-color: var(--db-border-focus) !important;
  outline: none !important;
}

/* Apply button */
.db-topbar__apply,
body.drawer-builder .option.changeDimension {
  height: var(--db-btn-height-md) !important;
  min-height: var(--db-btn-height-md) !important;
  max-height: var(--db-btn-height-md) !important;
  padding: 0 var(--db-space-lg) !important;
  background: var(--db-primary-color) !important;
  border: 1px solid var(--db-primary-color) !important;
  border-radius: var(--db-radius-md) !important;
  font-size: var(--db-font-md) !important;
  font-weight: 500 !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--db-space-sm) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.db-topbar__apply:hover,
body.drawer-builder .option.changeDimension:hover {
  background: #2828c4 !important;
  border-color: #2828c4 !important;
}

.db-topbar__apply .optionTitle {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.db-topbar__apply svg {
  width: var(--db-icon-md) !important;
  height: var(--db-icon-md) !important;
  flex-shrink: 0 !important;
}

/* ===== RIGHT SECTION: Actions + Total + Cart ===== */
.db-topbar__right {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Action buttons group (Share, Save, etc.) */
.db-topbar__actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Icon buttons (Share, Save, etc.) */
.db-topbar__btn {
  height: var(--db-btn-height-md) !important;
  width: var(--db-btn-height-md) !important;
  min-height: var(--db-btn-height-md) !important;
  min-width: var(--db-btn-height-md) !important;
  padding: 0 !important;
  background: #f5f5f5 !important;
  border: 1px solid var(--db-border-default) !important;
  border-radius: var(--db-radius-md) !important;
  color: #555 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.db-topbar__btn:hover {
  background: var(--db-border-light) !important;
  border-color: var(--db-border-strong) !important;
  color: #333 !important;
}

.db-topbar__btn svg {
  width: var(--db-icon-lg) !important;
  height: var(--db-icon-lg) !important;
}

/* Checkout section: Total + Cart */
.db-topbar__checkout {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

/* Total display */
.db-topbar__total {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.db-topbar__total-label {
  font-size: var(--db-font-md) !important;
  font-weight: 500 !important;
  color: #555 !important;
}

.db-topbar__total-price,
body.drawer-builder .totalPrice {
  font-size: var(--db-font-lg) !important;
  font-weight: 600 !important;
  color: #333 !important;
}

/* Add to Cart button */
.db-topbar__cart,
body.drawer-builder .addToCartBTN {
  height: var(--db-btn-height-md) !important;
  min-height: var(--db-btn-height-md) !important;
  max-height: var(--db-btn-height-md) !important;
  padding: 0 var(--db-space-xl) !important;
  background: var(--db-primary-color) !important;
  border: 1px solid var(--db-primary-color) !important;
  border-radius: var(--db-radius-md) !important;
  font-size: var(--db-font-md) !important;
  font-weight: 600 !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--db-space-sm) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.db-topbar__cart:hover,
body.drawer-builder .addToCartBTN:hover {
  background: #2828c4 !important;
  border-color: #2828c4 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(63, 63, 248, 0.3) !important;
}

/* Hide error messages by default */
body.drawer-builder .error-message {
  display: none !important;
}

/* Hide legacy hidden wrapper */
body.drawer-builder .dimension-wrapper[style*="display: none"] {
  display: none !important;
}

/* Hide instruction paragraph - shown via labels with (mm) instead */
body.drawer-builder .dimension-para {
  display: none !important;
}

/* Hide heading */
body.drawer-builder .dimension-heading {
  display: none !important;
}

/* Dimension wrapper - contains inputs and buttons */
body.drawer-builder .dimension-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 !important;
}

/* Container for dimension + functions - proper spacing */
body.drawer-builder .diemnstion-and-drawerfunctions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 16px !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
}

/* Left section: Dimension inputs */
body.drawer-builder .dimension-input {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* Each dimension field container */
body.drawer-builder .drawerValue {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
}

/* ===== TYPOGRAPHY SYSTEM ===== */
/* Labels - consistent styling with (mm) indicator */
body.drawer-builder .dimension-input-label {
  position: static !important;
  transform: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #333 !important;
  background: transparent !important;
  padding: 0 !important;
  white-space: nowrap !important;
  order: -1 !important;
  line-height: 1.2 !important;
}

/* Input fields - consistent with buttons */
body.drawer-builder .dimension-input-area {
  width: 75px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-align: center !important;
  color: #333 !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

body.drawer-builder .dimension-input-area:focus {
  border-color: #3F3FF8 !important;
  outline: none !important;
}

/* Hide error messages by default */
body.drawer-builder .error-message {
  display: none !important;
}

/* ===== BUTTON HEIGHT STANDARDIZATION (40px) ===== */
/* All buttons: 40px height, consistent padding and typography */

/* Middle section: Buttons container */
body.drawer-builder .drawerLine.drawerFunctions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* Change Dimension button - PRIMARY */
body.drawer-builder .option.changeDimension,
body.drawer-builder div#changeDimension {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 16px !important;
  background: #3F3FF8 !important;
  border: 1px solid #3F3FF8 !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

body.drawer-builder .option.changeDimension:hover,
body.drawer-builder div#changeDimension:hover {
  background: #2828c4 !important;
  border-color: #2828c4 !important;
}

body.drawer-builder .option.changeDimension .optionTitle,
body.drawer-builder div#changeDimension .optionTitle {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.drawer-builder .option.changeDimension .optionTitle span,
body.drawer-builder div#changeDimension .optionTitle span {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

body.drawer-builder .option.changeDimension svg,
body.drawer-builder div#changeDimension svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

/* Share button - SECONDARY (icon only) */
body.drawer-builder .get-dimensions,
body.drawer-builder button.my-btns-c {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 12px !important;
  background: #f5f5f5 !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #333 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

body.drawer-builder .get-dimensions:hover,
body.drawer-builder button.my-btns-c:hover {
  background: #e8e8e8 !important;
  border-color: #c0c0c0 !important;
}

/* Share button - icon only, hide text */
body.drawer-builder .get-dimensions .optionTitle {
  display: none !important;
}

body.drawer-builder .get-dimensions .optionImage {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

body.drawer-builder .get-dimensions .optionImage svg,
body.drawer-builder .get-dimensions .img-sct {
  width: 20px !important;
  height: 20px !important;
}

/* ===== RIGHT SECTION: Total + Add to Cart ===== */
body.drawer-builder .addCartMb,
body.drawer-builder .addCartMb.my-cd-card-1 {
  margin-left: auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

body.drawer-builder .drawerLine.drawerTotal {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
}

body.drawer-builder .totalprice-and-gridinfo {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Total text styling - baseline aligned for consistent vertical positioning */
body.drawer-builder .totalsection {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}

body.drawer-builder .totalsection>span:first-child {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: #555 !important;
}

body.drawer-builder .totalPrice {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #333 !important;
}

/* Add to Cart button - PRIMARY CTA */
body.drawer-builder .addToCart,
body.drawer-builder .addToCart.mu-ads {
  margin: 0 !important;
}

body.drawer-builder .addToCartBTN {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 20px !important;
  background: #3F3FF8 !important;
  border: 1px solid #3F3FF8 !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

body.drawer-builder .addToCartBTN:hover {
  background: #2828c4 !important;
  border-color: #2828c4 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(63, 63, 248, 0.3) !important;
}

body.drawer-builder .addToCartBTN span {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

/* ===== PRODUCTS PANEL Polish ===== */
body.drawer-builder .drawerOptions.drawer-build-custom-image {
  background: #fafafa !important;
}

body.drawer-builder #builder-products {
  background: #fff !important;
  border-radius: 8px !important;
  padding: 12px !important;
}

/* ===== EXPAND/COLLAPSE BUTTON ===== */
#db-expand-btn,
.db-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  margin-top: 12px;
  background: #3F3FF8;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.3px;
}

#db-expand-btn:hover,
.db-expand-btn:hover {
  background: #2828c4;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(63, 63, 248, 0.25);
}

#db-expand-btn svg,
.db-expand-btn svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

/* Rotate arrow when expanded */
body.drawer-builder.products-expanded #db-expand-btn svg,
body.drawer-builder.products-expanded .db-expand-btn svg {
  transform: rotate(180deg);
}

/* Change button text when expanded */
body.drawer-builder.products-expanded #db-expand-btn span,
body.drawer-builder.products-expanded .db-expand-btn span {
  display: none;
}

body.drawer-builder.products-expanded #db-expand-btn::after,
body.drawer-builder.products-expanded .db-expand-btn::after {
  content: "Collapse";
}

/* ===== EXPANDED STATE ===== */
/* NOTE: Expanded panel geometry is defined earlier in this file using a header-aware
 * `top: 160px` / `height: calc(100vh - 160px)` rule. Do not duplicate it here.
 */

/* Overlay when expanded - dims canvas, NOT the products panel */
/* Now positioned OUTSIDE drawerOptions in HTML, so products remain clickable */
.db-legacy-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 99;
  /* Below expand tab (200) and panel (1000) */
}

body.drawer-builder.products-expanded .db-legacy-overlay {
  display: block;
}

/* ===== FIX: Remove legacy padding that causes white space ===== */
body.drawer-builder .drawerOptions.drawer-build-custom-image {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Fix: Product filter wrapper should not add extra space */
body.drawer-builder .product-filter-select-wrapper {
  padding: 0 !important;
  margin: 0 !important;
}

/* Fix: Builtbundle should fill available space with no extra padding */
body.drawer-builder .builtbundle {
  padding-bottom: 60px !important;
  /* Space for expand button */
  margin: 0 !important;
}

/* Drawer wrapper inherits spacing from main-content */
body.drawer-builder .drawer-parent-wrapper {
  margin-top: 0 !important;
  /* main-content handles the top spacing */
  padding-top: 0 !important;
}

/* Ensure drawer content doesn't overlap header */
body.drawer-builder .drawer-page-content {
  position: relative !important;
  z-index: 1 !important;
}

/* Center all items in top bar vertically */
body.drawer-builder .drawerLine.drawerSize .diemnstion-and-drawerfunctions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* Consolidated stacking + animation sync (avoid "nuclear z-index") */
body.drawer-builder .drawerLine.drawerSize.db-topbar,
body.drawer-builder .db-topbar {
  position: relative !important;
  z-index: 2001 !important; /* above overlay (99) */
  background: #fff !important;
  pointer-events: auto !important;
}

body.drawer-builder .db-expand-tab,
body.drawer-builder.products-expanded .db-expand-tab {
  z-index: 2002 !important; /* above topbar (2001) + panel (1000) */
  transition: right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background 0.2s ease !important;
}

body.drawer-builder .drawerOptions.drawer-build-custom-image,
body.drawer-builder .drawer-parent-wrapper>.drawerOptions.drawer-build-custom-image {
  transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ===== STATUS BAR STYLES (Moved from drawer-builder.js) ===== */
.layout-filter-hidden {
  display: none !important;
}

.layout-filter-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.layout-filter-status {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  align-items: center !important;
  margin-bottom: 1rem !important;
  font-size: 0.875rem !important;
  color: #1a1a1a !important;
}

.layout-filter-status__hint {
  flex: 1 1 240px !important;
}

.layout-filter-status__pill {
  background-color: #f0f0ff !important;
  border-radius: 9999px !important;
  padding: 0.25rem 0.75rem !important;
  font-weight: 600 !important;
  color: #1c1c80 !important;
  white-space: nowrap !important;
}

.layout-filter-status__toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
}

.layout-filter-status__toggle input[type="checkbox"] {
  accent-color: #3f3ff8 !important;
}

.layout-filter-status__info {
  background: none !important;
  border: none !important;
  color: #3f3ff8 !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  font-size: 0.85rem !important;
  padding: 0 !important;
}

.layout-filter-status__info:focus-visible {
  outline: 2px solid #1c1c80 !important;
  outline-offset: 2px !important;
}

.layout-filter-status__empty {
  display: none !important;
  background-color: #f8f8fb !important;
  border: 1px solid #d4d4e1 !important;
  border-radius: 0.75rem !important;
  padding: 1rem !important;
  font-size: 0.95rem !important;
  color: #23233b !important;
}

.layout-filter-status__empty button {
  margin-top: 0.75rem !important;
  background-color: #3f3ff8 !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 0.5rem 1.25rem !important;
  color: #fff !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.layout-filter-status__empty button:focus-visible {
  outline: 2px solid #1c1c80 !important;
  outline-offset: 2px !important;
}

.layout-filter-status__empty[aria-hidden="false"] {
  display: block !important;
}

.layout-filter-status__tooltip {
  display: none !important;
  flex-basis: 100% !important;
  background-color: #fff !important;
  border: 1px solid #d4d4e1 !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem !important;
  font-size: 0.85rem !important;
  color: #23233b !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
}

.layout-filter-status__tooltip[aria-hidden="false"] {
  display: block !important;
}

/* =========================================================
   EXPANDED FILTERS (CANONICAL)
   Consolidates expanded filter styling to avoid conflicts.
   This block should remain the final authority for expanded filters.
   ========================================================= */

/* Show filters when expanded */
body.drawer-builder.products-expanded .product-filter-select-wrapper .my-sem-dbs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Color row: tight + sticky */
body.drawer-builder.products-expanded .drawerOptions.drawer-build-custom-image .variantData {
  /* Keep color row visually consistent with compact mode and avoid clipping */
  position: relative !important; /* wrapper handles stickiness */
  top: auto !important;
  z-index: auto !important;
  background: transparent !important;
  padding: 4px 0 !important;
  margin: 0 0 4px 0 !important;
  border-bottom: 1px solid #eee !important;
  overflow: visible !important;
}

body.drawer-builder.products-expanded .variantData .labelData {
  margin-bottom: 6px !important;
}

body.drawer-builder.products-expanded .variantData .labelTitle,
body.drawer-builder.products-expanded .variantData .colorsName {
  font-size: 13px !important;
}

body.drawer-builder.products-expanded .variantData .colorsOption {
  gap: 8px !important;
}

body.drawer-builder.products-expanded .colorsOption span {
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px !important;
}

/* Match compact selection styling (use outline), and remove expanded-only pseudo ring. */
body.drawer-builder.products-expanded .colorsOption span:before {
  content: none !important;
}
body.drawer-builder.products-expanded .colorsOption span.active {
  outline: 2px solid #333 !important;
  outline-offset: 2px !important;
}

/* Filter wrappers: remove outer box chrome; let the input carry the boundary */
body.drawer-builder.products-expanded .my-selected-opt {
  min-height: 34px !important;
  border: none !important;
  background: transparent !important;
}

body.drawer-builder.products-expanded .search-and-filter,
body.drawer-builder.products-expanded .search-and-filter-2,
body.drawer-builder.products-expanded .search-and-filter-3 {
  display: inline-flex !important;
  position: relative !important;
  border: none !important;
  padding: 0 !important;
}

/* Inputs: compact + consistent */
body.drawer-builder.products-expanded .search-and-filter input,
body.drawer-builder.products-expanded .search-and-filter-2 input,
body.drawer-builder.products-expanded .search-and-filter-3 input {
  height: 30px !important;
  padding: 5px 28px 5px 10px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  background: #f8f8fa !important;
  border: 1px solid #e0e0e5 !important;
  cursor: text !important;
}

body.drawer-builder.products-expanded .search-and-filter input:focus,
body.drawer-builder.products-expanded .search-and-filter-2 input:focus,
body.drawer-builder.products-expanded .search-and-filter-3 input:focus {
  border-color: #3F3FF8 !important;
  box-shadow: 0 0 0 3px rgba(63, 63, 248, 0.10) !important;
  outline: none !important;
}

/* Ensure clicking the icon doesn't block focusing/typing */
body.drawer-builder.products-expanded .product-filter-select-wrapper .search-input-with-icon svg {
  pointer-events: none;
}

/* Filter icons: compact */
body.drawer-builder.products-expanded .product-filter,
body.drawer-builder.products-expanded .product-filter-2,
body.drawer-builder.products-expanded .product-filter-3 {
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
}

/* Dropdown containers: compact chrome */
body.drawer-builder.products-expanded .product-filter-menu,
body.drawer-builder.products-expanded .product-filter-menu-2,
body.drawer-builder.products-expanded .product-filter-menu-3 {
  padding: 8px !important;
  border-radius: 10px !important;
  border: 1px solid #e6e6ee !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10) !important;
  top: 44px !important;
  max-height: 280px !important;
}

/* Space-optimized grid for short tokens (Size + Type) */
body.drawer-builder.products-expanded .filter-tags-checkbox-1,
body.drawer-builder.products-expanded .filter-tags-checkbox-3 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important;
  gap: 6px 8px !important;
}

/* Keep Utensil single-column */
body.drawer-builder.products-expanded .filter-tags-checkbox-2 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
}

/* Options: lightweight rows */
body.drawer-builder.products-expanded .product-filter-menu .checkbox-wrapper,
body.drawer-builder.products-expanded .product-filter-menu-2 .checkbox-wrapper,
body.drawer-builder.products-expanded .product-filter-menu-3 .checkbox-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 6px !important;
  margin: 0 !important;
  min-height: 24px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  font-size: 12px !important;
  color: #333 !important;
}

/* Ensure option label text renders reliably across mobile browsers */
body.drawer-builder.products-expanded .product-filter-menu .db-filter-option-label,
body.drawer-builder.products-expanded .product-filter-menu-2 .db-filter-option-label,
body.drawer-builder.products-expanded .product-filter-menu-3 .db-filter-option-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}

body.drawer-builder.products-expanded .product-filter-menu .checkbox-wrapper:hover,
body.drawer-builder.products-expanded .product-filter-menu-2 .checkbox-wrapper:hover,
body.drawer-builder.products-expanded .product-filter-menu-3 .checkbox-wrapper:hover {
  background: #f5f5f8 !important;
}

body.drawer-builder.products-expanded .product-filter-menu .checkbox-wrapper:has(input:checked),
body.drawer-builder.products-expanded .product-filter-menu-2 .checkbox-wrapper:has(input:checked),
body.drawer-builder.products-expanded .product-filter-menu-3 .checkbox-wrapper:has(input:checked) {
  background: #e8e8ff !important;
  color: #1c1c80 !important;
  font-weight: 600 !important;
}

@media (min-width: 641px) {
  /* Checkbox: force native square (avoid theme toggle/pill appearance) */
  body.drawer-builder.products-expanded .product-filter-menu input[type="checkbox"],
  body.drawer-builder.products-expanded .product-filter-menu-2 input[type="checkbox"],
  body.drawer-builder.products-expanded .product-filter-menu-3 input[type="checkbox"] {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    background: initial !important;
    border: initial !important;
    box-shadow: none !important;
    outline: none !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
  }

  body.drawer-builder.products-expanded .product-filter-menu input[type="checkbox"]::after,
  body.drawer-builder.products-expanded .product-filter-menu-2 input[type="checkbox"]::after,
  body.drawer-builder.products-expanded .product-filter-menu-3 input[type="checkbox"]::after {
    content: none !important;
  }

  /* Ensure jQuery hide/show actually hides when other rules use display:flex !important */
  body.drawer-builder.products-expanded .product-filter-menu .checkbox-wrapper[style*="display: none"],
  body.drawer-builder.products-expanded .product-filter-menu-2 .checkbox-wrapper[style*="display: none"],
  body.drawer-builder.products-expanded .product-filter-menu-3 .checkbox-wrapper[style*="display: none"] {
    display: none !important;
  }

  /* Clear All: compact */
  body.drawer-builder.products-expanded .db-clear-all-filters.is-active {
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }
}

@media (min-width: 641px) {
  /* ============================================================================
     FORCE expanded Color header to match collapsed sizing (source-of-truth)
     Prevents conflicts between early expanded overrides and the canonical block.
     Desktop/tablet only (mobile uses the bottom-sheet canonical block).
     ============================================================================ */

  /* Match wrapper padding (collapsed uses 4px 0) */
  body.drawer-builder.products-expanded .builtbundle > .product-filter-select-wrapper {
    padding: 4px 0 !important;
    margin: 0 !important;
    /* Keep header height stable between collapsed/expanded */
    min-height: 66.5px !important;
    box-sizing: border-box !important;
  }

  /* Match collapsed typography (collapsed uses 14px) */
  body.drawer-builder.products-expanded .variantData .labelTitle,
  body.drawer-builder.products-expanded .variantData .colorsName {
    font-size: 14px !important;
  }

  /* Match collapsed spacing/layout for the color row */
  body.drawer-builder.products-expanded .drawerOptions.drawer-build-custom-image .variantData {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
  }
}

/* ============================================================================
   MOBILE BOTTOM SHEET (CANONICAL)
   Keep this at the END of the file so it wins the cascade.
   - Bottom sheet for products panel (75vh expanded => ~25% canvas visible)
   - Persistent full-width cart bar pinned to bottom
   - Canvas actions float on the canvas (top-left)
   ============================================================================ */
@media (max-width: 640px) {
  body.drawer-builder {
    --db-cartbar-h: 66px;
    /* Show the Color row even when collapsed (peek state) */
    --db-sheet-peek-h: 220px;
    --db-sheet-expanded-h: 75vh;
    --db-mobile-control-h: 40px; /* compact but still tappable */
    --db-mobile-control-radius: 9px;
  }

  /* Real-device safe viewport sizing:
     JS sets --db-viewport-h via visualViewport (preferred) / innerHeight fallback. */
  body.drawer-builder {
    height: var(--db-viewport-h, 100vh) !important;
    min-height: var(--db-viewport-h, 100vh) !important;
  }

  /* Mobile topbar: one row for Length + Width + Apply */
  body.drawer-builder .db-topbar__left {
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;
  }

  body.drawer-builder .db-topbar__dimensions {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: end !important;
  }

  body.drawer-builder .db-topbar__field {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body.drawer-builder .db-topbar__label {
    font-size: var(--db-font-sm) !important;
    line-height: 1.1 !important;
  }

  body.drawer-builder .db-topbar__input {
    width: 100% !important;
    height: var(--db-mobile-control-h) !important;
    min-height: var(--db-mobile-control-h) !important;
    max-height: var(--db-mobile-control-h) !important;
    font-size: var(--db-font-lg) !important;
    border-radius: var(--db-mobile-control-radius) !important;
  }

  /* Ensure legacy `.dimension-input-area` sizing doesn't shrink topbar inputs */
  body.drawer-builder .db-topbar__input.dimension-input-area {
    width: 100% !important;
  }

  /* Hard override: some legacy rules force `.dimension-input-area` to 75px wide.
     Ensure the TOPBAR dimension inputs expand to fill the row. */
  body.drawer-builder #length.db-topbar__input.dimension-input-area,
  body.drawer-builder #width.db-topbar__input.dimension-input-area {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    display: block !important;
  }

  body.drawer-builder .db-topbar__apply,
  body.drawer-builder #changeDimension {
    height: var(--db-mobile-control-h) !important;
    min-height: var(--db-mobile-control-h) !important;
    max-height: var(--db-mobile-control-h) !important;
    border-radius: var(--db-mobile-control-radius) !important;
    padding: 0 var(--db-space-md) !important;
    width: 104px !important;
    min-width: 104px !important;
  }

  /* Reduce topbar outer padding on mobile so inputs get more width */
  body.drawer-builder .drawerLine.drawerSize.db-topbar,
  body.drawer-builder .db-topbar {
    padding: var(--db-space-sm) var(--db-space-md) !important;
    gap: var(--db-space-sm) !important;
  }

  /* Keep checkout in DOM so the fixed bottom cart bar can render.
     Hide only the share/action icons to avoid crowding. */
  body.drawer-builder .db-topbar__right {
    display: contents !important;
  }

  body.drawer-builder .db-topbar__actions {
    display: none !important;
  }

  /* Hide legacy moved containers if present */
  body.drawer-builder .db-topbar__actions-row,
  body.drawer-builder .db-topbar__canvas-actions {
    display: none !important;
  }

  /* ===== MOBILE: expanded panel fixes ===== */
  /* Keep products at 3 columns even when expanded */
  body.drawer-builder.products-expanded #builder-products.sidebar-products ul#product-show.products,
  body.drawer-builder.products-expanded #builder-products ul#product-show.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Remove "Largest space / filtered by current layout" status box on mobile */
  body.drawer-builder .layout-filter-status,
  body.drawer-builder .layout-filter-status__empty,
  body.drawer-builder .layout-filter-status__tooltip {
    display: none !important;
  }
  body.drawer-builder .layout-filter-status * {
    display: none !important;
  }

  /* Filters: Size + Utensil + Clear All on one row; Type on the next row (mobile expanded) */
  body.drawer-builder.products-expanded .product-filter-select-wrapper .my-sem-dbs {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(72px, 92px) !important;
    gap: 6px !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.drawer-builder.products-expanded .product-filter-select-wrapper .search-and-filter {
    display: inline-flex !important;
    grid-column: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    border: 0 !important;
    padding: 0 !important;
  }

  body.drawer-builder.products-expanded .product-filter-select-wrapper .search-and-filter-2 {
    display: inline-flex !important;
    grid-column: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
    border: 0 !important;
    padding: 0 !important;
  }

  body.drawer-builder.products-expanded .product-filter-select-wrapper .search-and-filter-3 {
    display: inline-flex !important;
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    width: 100% !important;
    border: 0 !important;
    padding: 0 !important;
  }

  body.drawer-builder.products-expanded .product-filter-select-wrapper .search-and-filter input,
  body.drawer-builder.products-expanded .product-filter-select-wrapper .search-and-filter-2 input,
  body.drawer-builder.products-expanded .product-filter-select-wrapper .search-and-filter-3 input {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Mobile expanded: make the filter input + icon layout stable (avoid “Se” clipping) */
  body.drawer-builder.products-expanded .product-filter-select-wrapper .search-input-with-icon,
  body.drawer-builder.products-expanded .product-filter-select-wrapper .search-input-with-icon-2,
  body.drawer-builder.products-expanded .product-filter-select-wrapper .search-input-with-icon-3 {
    position: relative !important;
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
  }

  body.drawer-builder.products-expanded .product-filter-select-wrapper .search-input-with-icon input,
  body.drawer-builder.products-expanded .product-filter-select-wrapper .search-input-with-icon-2 input,
  body.drawer-builder.products-expanded .product-filter-select-wrapper .search-input-with-icon-3 input {
    height: var(--db-mobile-control-h) !important;
    min-height: var(--db-mobile-control-h) !important;
    max-height: var(--db-mobile-control-h) !important;
    padding: 0 38px 0 10px !important; /* room for icon */
    border: 1px solid #d0d0d0 !important;
    border-radius: var(--db-mobile-control-radius) !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  /* Icon becomes an overlay (not a separate boxed element) */
  body.drawer-builder.products-expanded .product-filter-select-wrapper .search-input-with-icon svg,
  body.drawer-builder.products-expanded .product-filter-select-wrapper .search-input-with-icon-2 svg,
  body.drawer-builder.products-expanded .product-filter-select-wrapper .search-input-with-icon-3 svg {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    color: #111 !important;
    border: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  /* Dropdown menus: anchor to the filter field and use full width on mobile */
  body.drawer-builder.products-expanded .product-filter-menu,
  body.drawer-builder.products-expanded .product-filter-menu-2,
  body.drawer-builder.products-expanded .product-filter-menu-3 {
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 6px) !important;
    width: 100% !important;
    max-width: none !important;
    z-index: 3000 !important;
    max-height: calc(var(--db-viewport-h, 100vh) - var(--db-cartbar-h, 66px) - 220px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important; /* prevent horizontal scroll on narrow screens */
  }

  /* Mobile dropdown: prevent grid-item min-width overflow that hides label text */
  body.drawer-builder.products-expanded .product-filter-menu .checkbox-wrapper,
  body.drawer-builder.products-expanded .product-filter-menu-2 .checkbox-wrapper,
  body.drawer-builder.products-expanded .product-filter-menu-3 .checkbox-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  body.drawer-builder.products-expanded .product-filter-menu .db-filter-option-label,
  body.drawer-builder.products-expanded .product-filter-menu-2 .db-filter-option-label,
  body.drawer-builder.products-expanded .product-filter-menu-3 .db-filter-option-label {
    display: inline-block !important;
    flex: 1 1 auto !important;
  }

  /* Mobile: hide checkbox, use text-only with highlight/checkmark */
  body.drawer-builder .product-filter-menu input[type="checkbox"],
  body.drawer-builder .product-filter-menu-2 input[type="checkbox"],
  body.drawer-builder .product-filter-menu-3 input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
  }

  body.drawer-builder .product-filter-menu .checkbox-wrapper,
  body.drawer-builder .product-filter-menu-2 .checkbox-wrapper,
  body.drawer-builder .product-filter-menu-3 .checkbox-wrapper {
    display: flex !important;
    width: 100% !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    background: #f8f8fa !important;
    border: 1px solid transparent !important;
    font-size: 14px !important;
    color: #333 !important;
    cursor: pointer !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  body.drawer-builder .product-filter-menu .checkbox-wrapper:has(input:checked),
  body.drawer-builder .product-filter-menu-2 .checkbox-wrapper:has(input:checked),
  body.drawer-builder .product-filter-menu-3 .checkbox-wrapper:has(input:checked) {
    background: #e8e8ff !important;
    border-color: #3F3FF8 !important;
    color: #1c1c80 !important;
    font-weight: 600 !important;
  }

  /* Checkmark indicator for selected items */
  body.drawer-builder .product-filter-menu .checkbox-wrapper:has(input:checked)::after,
  body.drawer-builder .product-filter-menu-2 .checkbox-wrapper:has(input:checked)::after,
  body.drawer-builder .product-filter-menu-3 .checkbox-wrapper:has(input:checked)::after {
    content: '✓' !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #3F3FF8 !important;
  }

  /* CRITICAL: Ensure jQuery hide/show actually hides pruned filter options on mobile.
     The display:flex !important rules above would otherwise override jQuery's display:none. */
  body.drawer-builder .product-filter-menu .checkbox-wrapper[style*="display: none"],
  body.drawer-builder .product-filter-menu-2 .checkbox-wrapper[style*="display: none"],
  body.drawer-builder .product-filter-menu-3 .checkbox-wrapper[style*="display: none"],
  body.drawer-builder .product-filter-menu .checkbox-wrapper.db-filter-empty,
  body.drawer-builder .product-filter-menu-2 .checkbox-wrapper.db-filter-empty,
  body.drawer-builder .product-filter-menu-3 .checkbox-wrapper.db-filter-empty {
    display: none !important;
  }

  /* Prevent products from ever painting above the sticky color/filter header on mobile
     Apply in BOTH collapsed + expanded sheet states (collapsed used to lose stickiness). */
  body.drawer-builder .builtbundle {
    position: relative !important;
    isolation: isolate !important; /* new stacking context */
  }

  body.drawer-builder .builtbundle > .product-filter-select-wrapper {
    position: sticky !important;
    top: 0 !important;
    background: #fff !important;
    z-index: 10 !important; /* above products (z-index: 1) within .builtbundle stacking context */
    isolation: isolate !important;
    /* Add a shadow to visually separate from scrolling content below */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  }

  /* Ensure product grid is below sticky header */
  body.drawer-builder .builtbundle > #builder-products,
  body.drawer-builder .builtbundle > .sidebar-products {
    position: relative !important;
    z-index: 1 !important;
  }

  body.drawer-builder.products-expanded .filter-tags-checkbox-1,
  body.drawer-builder.products-expanded .filter-tags-checkbox-2,
  body.drawer-builder.products-expanded .filter-tags-checkbox-3 {
    overflow-x: hidden !important;
  }

  /* Mobile dropdown: vertical list with gap between items */
  body.drawer-builder .filter-tags-checkbox,
  body.drawer-builder .filter-tags-checkbox-1,
  body.drawer-builder .filter-tags-checkbox-2,
  body.drawer-builder .filter-tags-checkbox-3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  /* Clear All button goes in the 3rd column on the top row */
  body.drawer-builder.products-expanded .product-filter-select-wrapper .db-clear-all-filters {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    height: var(--db-mobile-control-h) !important;
    min-height: var(--db-mobile-control-h) !important;
    max-height: var(--db-mobile-control-h) !important;
    border-radius: var(--db-mobile-control-radius) !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* Mobile expanded: put Color row ABOVE filters (Size/Utensil/Clear/Type) */
  body.drawer-builder.products-expanded .product-filter-select-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  body.drawer-builder.products-expanded .product-filter-select-wrapper .variantData {
    order: 1 !important;
  }

  body.drawer-builder.products-expanded .product-filter-select-wrapper .my-sem-dbs {
    order: 2 !important;
  }

  /* Mobile expanded: restore padding on the sticky header (otherwise controls clip at the edges) */
  body.drawer-builder.products-expanded .builtbundle > .product-filter-select-wrapper {
    padding: 10px 12px 8px !important;
    box-sizing: border-box !important;
  }

  /* Mobile expanded: ensure sticky header is an opaque layer ABOVE product tiles (no bleed-through)
     NOTE: main stacking context is set on .builtbundle earlier; z-index is relative within that context */

  /* Canvas actions row (under the drawer): Hide/Show + Clear */
  /* Match the width/padding of .db-topbar__left for consistent alignment */
  body.drawer-builder .db-mobile-canvas-actions-row {
    display: flex !important;
    gap: var(--db-space-sm) !important;
    padding: var(--db-space-sm) 0 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  /* Selection row (Rotate/Remove + size) - only populated when selected */
  /* Match the width/padding of .db-topbar__left for consistent alignment */
  body.drawer-builder .db-mobile-selection-actions-row {
    display: flex !important;
    gap: var(--db-space-sm) !important;
    padding: var(--db-space-sm) 0 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  /* If selection row has no buttons, don't reserve height */
  body.drawer-builder .db-mobile-selection-actions-row:empty {
    display: none !important;
    padding: 0 !important;
  }

  /* Mobile action buttons: unified styling for all tool buttons */
  body.drawer-builder .db-mobile-tool-btn,
  body.drawer-builder .canvas-hoverd-item-btn-rotate,
  body.drawer-builder .canvas-hoverd-item-btn-remove,
  body.drawer-builder .canvas-hoverd-item-btn-size {
    position: static !important;
    height: var(--db-mobile-control-h) !important;
    min-height: var(--db-mobile-control-h) !important;
    border: 1px solid #ccc !important;
    border-radius: var(--db-mobile-control-radius) !important;
    background: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
  }

  /* Restore text for Rotate/Remove */
  body.drawer-builder .canvas-hoverd-item-btn-rotate span,
  body.drawer-builder .canvas-hoverd-item-btn-remove span {
    display: inline !important;
  }

  /* Icon sizing for mobile buttons */
  body.drawer-builder .db-mobile-tool-btn svg,
  body.drawer-builder .canvas-hoverd-item-btn-rotate svg,
  body.drawer-builder .canvas-hoverd-item-btn-remove svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }

  /* Pin checkout bar to bottom, full width */
  body.drawer-builder .db-topbar__checkout {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 6002 !important; /* above panel + overlay; below cart drawer */
    background: rgba(255, 255, 255, 0.98) !important;
    border-top: 1px solid #e6e6ee !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
  }

  body.drawer-builder .db-topbar__checkout .addToCart {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  body.drawer-builder .db-topbar__checkout .db-topbar__cart {
    width: 100% !important;
    max-width: none !important;
    height: var(--db-mobile-control-h) !important;
    min-height: var(--db-mobile-control-h) !important;
    max-height: var(--db-mobile-control-h) !important;
    border-radius: var(--db-mobile-control-radius) !important;
  }

  /* Ensure canvas area isn't hidden behind the fixed cart bar */
  body.drawer-builder .drawer-parent-wrapper > .grid-wrapper {
    padding-bottom: calc(var(--db-cartbar-h) + 16px) !important;
  }

  /* Hide legacy canvas action container on mobile (buttons are moved into the tools row via JS) */
  body.drawer-builder .grid-wrapper .db-canvas-actions-legacy {
    display: none !important;
  }

  /* Mobile expand control becomes a bottom handle above the cart bar */
  body.drawer-builder .db-expand-tab,
  body.drawer-builder.products-expanded .db-expand-tab {
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(var(--db-cartbar-h) + 8px) !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    min-width: 128px !important;
    max-width: calc(100vw - 24px) !important;
    height: 30px !important;
    border-radius: 999px !important;
    flex-direction: row !important;
    gap: 8px !important;
    padding: 0 12px !important;
    opacity: 0.88 !important;
    z-index: 5002 !important; /* above expanded sheet */
  }

  /* Restore label text on mobile for clarity */
  body.drawer-builder .db-expand-tab__text {
    display: inline-flex !important;
    font-size: 11px !important;
    letter-spacing: 0.4px !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    transform: none !important;
  }

  /* Mobile: force Expand/Collapse label toggle */
  body.drawer-builder .db-expand-tab__text span.expand-text { display: inline !important; }
  body.drawer-builder .db-expand-tab__text span.collapse-text { display: none !important; }
  body.drawer-builder.products-expanded .db-expand-tab__text span.expand-text { display: none !important; }
  body.drawer-builder.products-expanded .db-expand-tab__text span.collapse-text { display: inline !important; }

  body.drawer-builder .db-expand-tab__count {
    font-size: 11px !important;
    font-weight: 600 !important;
    opacity: 0.92 !important;
  }

  /* Keep a subtle “grab handle” bar */
  body.drawer-builder .db-expand-tab::before {
    content: none !important;
    display: none !important;
  }

  body.drawer-builder .db-expand-tab__icon {
    font-size: 14px !important;
  }

  /* Products panel becomes bottom sheet (collapsed peek by default) */
  body.drawer-builder .drawer-parent-wrapper > .drawerOptions.drawer-build-custom-image {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: var(--db-cartbar-h) !important;
    width: 100% !important;
    max-width: none !important;
    height: var(--db-sheet-expanded-h) !important;
    max-height: var(--db-sheet-expanded-h) !important;
    border-left: 0 !important;
    border-top: 1px solid #e6e6ee !important;
    border-radius: 14px 14px 0 0 !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.10) !important;
    z-index: 1000 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    transform: translateY(calc(100% - var(--db-sheet-peek-h))) !important;
    transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  }

  body.drawer-builder.products-expanded .drawer-parent-wrapper > .drawerOptions.drawer-build-custom-image {
    transform: translateY(0) !important;
  }

  /* Expanded: cover the topbar area for maximum usable space */
  body.drawer-builder.products-expanded .drawer-parent-wrapper > .drawerOptions.drawer-build-custom-image {
    top: var(--db-site-top-chrome, calc(var(--header-offset-top, 0px) + var(--header-height, 0px))) !important;
    bottom: var(--db-cartbar-h) !important;
    height: calc(var(--db-viewport-h, 100vh) - var(--db-cartbar-h) - var(--db-site-top-chrome, calc(var(--header-offset-top, 0px) + var(--header-height, 0px)))) !important;
    max-height: calc(var(--db-viewport-h, 100vh) - var(--db-cartbar-h) - var(--db-site-top-chrome, calc(var(--header-offset-top, 0px) + var(--header-height, 0px)))) !important;
    border-radius: 0 !important;
    z-index: 5000 !important; /* above topbar; below cart drawer */
    padding-top: 0 !important; /* no gap at top—white background handles clipping */
    background: #fff !important; /* solid white to prevent bleed-through */
  }

  /* Solid white bar above color/filters to block any scroll bleed-through */
  body.drawer-builder.products-expanded .builtbundle {
    background: #fff !important;
  }

  body.drawer-builder.products-expanded .builtbundle > .product-filter-select-wrapper {
    background: #fff !important;
    padding-top: 12px !important; /* space above Color row */
  }

  body.drawer-builder.products-expanded .drawerLine.drawerSize.db-topbar,
  body.drawer-builder.products-expanded .db-topbar {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Keep the fixed bottom cart bar visible/clickable even while expanded */
  body.drawer-builder.products-expanded .db-topbar__checkout {
    visibility: visible !important;
    pointer-events: auto !important;
    display: flex !important;
  }

  /* Products list: 3-column scroll grid (override older 2-col mobile rules) */
  body.drawer-builder #builder-products ul#product-show.products,
  body.drawer-builder #builder-products.sidebar-products ul#product-show.products,
  body.drawer-builder .drawer-parent-wrapper .sidebar-products ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 12px 12px !important;
    margin: 0 !important;
    list-style: none !important;
    align-content: start !important;
  }

  body.drawer-builder #builder-products ul#product-show.products > li,
  body.drawer-builder .drawer-parent-wrapper .sidebar-products ul.products > li {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* =========================================================
     CANONICAL STICKY HEADER + STACKING CONTEXT (MOBILE)
     One place to control bleed/clipping and z-index ordering.
     Z-index scale inside sheet:
     - products grid: 1
     - sticky header: 10
     ========================================================= */
  body.drawer-builder.products-expanded .builtbundle {
    position: relative !important;
    isolation: isolate !important; /* create local stacking context */
    background: #fff !important;   /* solid white to block any bleed */
  }

  body.drawer-builder.products-expanded .builtbundle > .product-filter-select-wrapper {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    box-sizing: border-box !important;
  }

  body.drawer-builder.products-expanded .builtbundle > #builder-products,
  body.drawer-builder.products-expanded .builtbundle > .sidebar-products {
    position: relative !important;
    z-index: 1 !important;
  }

  /* Mobile overlay: only cover visible canvas area above the sheet */
  body.drawer-builder.products-expanded .db-legacy-overlay {
    bottom: calc(var(--db-cartbar-h) + var(--db-sheet-expanded-h)) !important;
  }

  /* Don’t disable canvas interaction on mobile */
  body.drawer-builder.products-expanded .drawer-parent-wrapper > .grid-wrapper {
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
  }
}

/* =========================================================
   CANONICAL STICKY HEADER (DESKTOP/TABLET)
   Keep this late in the file to override earlier legacy blocks.
   Z-index scale (builder page):
   - overlay: 99
   - panel: 1000
   - topbar: 2001
   - expand tab: 2002
   - cart drawer: 6000
   ========================================================= */
@media (min-width: 641px) {
  body.drawer-builder .builtbundle > .product-filter-select-wrapper {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }
}