/* ===== Homepage Builder Style System ===== */

:root {
  --section-gap-desktop: 48px;
  --section-gap-tablet: 36px;
  --section-gap-mobile: 24px;
}

/* Base Spacing for Dynamic Sections */
.dynamic-section {
  margin-top: var(--section-gap-desktop);
  margin-bottom: var(--section-gap-desktop);
}
.dynamic-section:not(.container) {
  width: 100%;
}

@media (max-width: 1024px) {
  .dynamic-section {
    margin-top: var(--section-gap-tablet);
    margin-bottom: var(--section-gap-tablet);
  }
}

@media (max-width: 768px) {
  .dynamic-section {
    margin-top: var(--section-gap-mobile);
    margin-bottom: var(--section-gap-mobile);
  }
}

/* ===== PROMO BANNER ===== */
/* Canonical .promo-banner styles live in css/store.css (single source of truth for both
   Builder Preview and Front Store). This file intentionally does NOT redefine them so that
   future banner tweaks in store.css automatically apply to both surfaces. */

/* ===== NEW SECTION: INFINITE MARQUEE ===== */
.promo-marquee {
  background: var(--ink, #111);
  color: var(--paper, #fff);
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-color: inherit;
  overflow: hidden;
  padding: 16px 0;
  width: 100%;
  box-sizing: border-box;
  border-radius: 0 !important;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll var(--speed, 20s) linear infinite;
  white-space: nowrap;
}

.marquee-content {
  font-size: 1.4rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
}

.marquee-sep {
  margin: 0 40px;
  font-weight: 400;
  opacity: 0.5;
}

@keyframes marquee-scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* ===== NEW SECTION: COUNTDOWN ===== */
.promo-countdown {
  border: var(--psb-width, 2px) solid var(--psb-color, var(--ink, #111));
  border-radius: var(--psb-radius, 0px);
  background: var(--paper, #fff);
  padding: 60px 40px;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 280px;
  position: relative;
  overflow: hidden;
}

.promo-countdown h3 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 0.95;
  text-align: center;
  margin: 0 0 14px;
  color: inherit;
}

.countdown-grid {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.countdown-box {
  border: 2px solid var(--ink, #111);
  border-radius: 0px;
  background: rgba(247,247,248,0.75);
  min-width: 68px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown-value {
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
}

.countdown-label {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--muted, #666);
  margin-top: 3px;
}

/* ===== NEW SECTION: RESPONSIVE VIDEO ===== */
.promo-video {
  border: var(--psb-width, 2px) solid var(--psb-color, var(--ink, #111));
  border-radius: var(--psb-radius, 0px);
  background: var(--paper, #fff);
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== VISUAL BUILDER SIDEBAR DRAG CARDS ===== */
.ds-section-card {
  display: flex !important;
  align-items: center !important;
  background: #FFF !important;
  border: 2px solid #111 !important;
  border-radius: 0px !important;
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: background 0.15s ease !important;
  position: relative !important;
  box-shadow: none !important;
  min-height: 60px !important;
}

.ds-section-card:hover {
  background: #faf9f6 !important;
  transform: none !important;
  box-shadow: none !important;
}

.ds-section-card:active {
  transform: none !important;
  box-shadow: none !important;
}

.ds-section-card.reorder-ghost {
  opacity: 1 !important;
  border-style: dashed !important;
  border-color: #ffe600 !important;
  background: #fffbe6 !important;
  box-shadow: none !important;
  transform: none !important;
}

.ds-section-card.reorder-chosen {
  background: #ffe600 !important;
  box-shadow: none !important;
}

/* Active (selected) section card style */
.ds-section-card.active {
  background: #fffbe6 !important;
  border: 2px solid #111 !important;
  box-shadow: none !important;
  transform: none !important;
}

.ds-section-card.active:hover {
  background: #fff8d6 !important;
  transform: none !important;
  box-shadow: none !important;
}

.ds-section-card.active .ds-card-title {
  font-weight: 950 !important;
  color: #000 !important;
}

.ds-section-card.active .ds-card-desc {
  color: #111 !important;
  font-weight: 800 !important;
}

.ds-section-card.active .ds-drag-handle {
  background: #ffe600 !important;
  color: #111 !important;
  border-color: #111 !important;
}

.ds-section-card.active .ds-card-actions .ds-builder-btn:nth-child(2) {
  background: #ffe600 !important;
}

.ds-drag-handle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 12px !important;
  color: #111 !important;
  cursor: grab !important;
  flex-shrink: 0 !important;
  width: 28px !important;
  height: 28px !important;
  border: 2px solid #111 !important;
  background: #f7f7f8 !important;
  border-radius: 0px !important;
}

.ds-drag-handle:active {
  cursor: grabbing !important;
}

.ds-drag-handle svg {
  display: block;
  width: 12px !important;
  height: 12px !important;
}

.ds-card-content {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.ds-card-title {
  font-family: inherit !important;
  font-weight: 950 !important;
  font-size: 15px !important;
  margin: 0 !important;
  color: #111 !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
}

.ds-card-desc {
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  color: #777 !important;
  margin: 0 !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.ds-card-actions {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: 8px !important;
  flex-shrink: 0 !important;
}

/* Styling for hidden/inactive builder sections */
.ds-section-card.ds-card-inactive {
  opacity: 0.6 !important;
  border-style: dashed !important;
  background: #faf9f6 !important;
}

.ds-section-card.ds-card-inactive .ds-card-title {
  color: #777 !important;
  text-decoration: none !important;
}

.ds-builder-btn {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  cursor: pointer !important;
  color: #111 !important;
  border-radius: 0px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  background: #fff !important;
  border: 2px solid #111 !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}

.ds-builder-btn:hover {
  background: #ffe600 !important;
  color: #111 !important;
}

.ds-builder-btn.active {
  background: #ffe600 !important;
  color: #111 !important;
}

.ds-builder-btn.delete:hover {
  background: #ff3b30 !important;
  color: #fff !important;
}

.ds-builder-btn svg {
  width: 12px !important;
  height: 12px !important;
}

/* Builder sidebar header + add button */
#page-homepage-builder .ds-sidebar-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  border-bottom: 2px solid #111 !important;
  background: #faf9f6 !important;
  flex-shrink: 0 !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
}
#page-homepage-builder .ds-sidebar-section-head span {
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #111 !important;
}

/* Builder add-section button (neobrutalist) */
.ds-add-section-btn {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: #fff !important;
  border: 2px solid #111 !important;
  border-radius: 0px !important;
  cursor: pointer !important;
  color: #111 !important;
  box-shadow: none !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
}
.ds-add-section-btn:hover {
  background: #111 !important;
  transform: translate(-1px, -1px) !important;
  color: #fff !important;
}
.ds-add-section-btn:hover svg {
  stroke: #fff !important;
}

/* Sidebar layout and scroll areas */
#page-homepage-builder .builder-tab-panel {
  display: none !important;
  flex-direction: column !important;
  flex: 1 !important;
  overflow: hidden !important;
  height: 100% !important;
}

#page-homepage-builder .builder-tab-panel:target,
#page-homepage-builder #builderSidebar:not(:has(.builder-tab-panel:target)) #builder-create-panel {
  display: flex !important;
}

#page-homepage-builder #builderSectionList,
#page-homepage-builder #builderSavedList {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 14px 14px 10px !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
}

/* PAC.CO minimal scrollbar — thin black thumb, light track, square arrows */
#page-homepage-builder .ds-sidebar-scroll::-webkit-scrollbar,
#page-homepage-builder .ds-right-controls-body::-webkit-scrollbar,
#page-homepage-builder .ds-editor-sidebar::-webkit-scrollbar,
#page-homepage-builder .ds-editor-controls::-webkit-scrollbar,
#page-homepage-builder .builder-frame-body::-webkit-scrollbar {
  width: 4px;
  display: block;
  background: transparent;
}

/* Light track */
#page-homepage-builder .ds-sidebar-scroll::-webkit-scrollbar-track,
#page-homepage-builder .ds-right-controls-body::-webkit-scrollbar-track {
  background: #e9e7e4;
  border-radius: 0;
}

/* Solid black rectangular thumb */
#page-homepage-builder .ds-sidebar-scroll::-webkit-scrollbar-thumb,
#page-homepage-builder .ds-right-controls-body::-webkit-scrollbar-thumb {
  background: #111;
  border-radius: 0;
  min-height: 36px;
}

#page-homepage-builder .ds-sidebar-scroll::-webkit-scrollbar-thumb:hover,
#page-homepage-builder .ds-right-controls-body::-webkit-scrollbar-thumb:hover {
  background: #111;
}

#page-homepage-builder .ds-sidebar-scroll::-webkit-scrollbar-thumb:active,
#page-homepage-builder .ds-right-controls-body::-webkit-scrollbar-thumb:active {
  background: #111;
}

/* Square arrow buttons */
#page-homepage-builder .ds-sidebar-scroll::-webkit-scrollbar-button,
#page-homepage-builder .ds-right-controls-body::-webkit-scrollbar-button {
  display: block;
  width: 4px;
  height: 10px;
  background: #111;
}

#page-homepage-builder .ds-sidebar-scroll::-webkit-scrollbar-button:vertical:decrement,
#page-homepage-builder .ds-right-controls-body::-webkit-scrollbar-button:vertical:decrement {
  background: #111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='6' viewBox='0 0 4 6'%3E%3Cpath d='M2 1 L3 3.5 L1 3.5 Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center;
}

#page-homepage-builder .ds-sidebar-scroll::-webkit-scrollbar-button:vertical:increment,
#page-homepage-builder .ds-right-controls-body::-webkit-scrollbar-button:vertical:increment {
  background: #111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='6' viewBox='0 0 4 6'%3E%3Cpath d='M2 5 L3 2.5 L1 2.5 Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center;
}

#page-homepage-builder .ds-sidebar-scroll::-webkit-scrollbar-button:hover,
#page-homepage-builder .ds-right-controls-body::-webkit-scrollbar-button:hover {
  background-color: #111;
}

/* Corner */
#page-homepage-builder .ds-sidebar-scroll::-webkit-scrollbar-corner,
#page-homepage-builder .ds-right-controls-body::-webkit-scrollbar-corner {
  background: #e9e7e4;
}

/* Firefox */
#page-homepage-builder .ds-sidebar-scroll,
#page-homepage-builder .ds-right-controls-body {
  scrollbar-width: thin;
  scrollbar-color: #111 #e9e7e4;
}

/* Builder sidebar empty state */
#page-homepage-builder .ds-empty-state {
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  color: #888 !important;
  text-align: center !important;
  padding: 40px 12px !important;
}

.ds-card-type-badge {
  display: none !important; /* replaced with subtitles in center column */
}

/* Tab Navigation Rework */
.builder-tab-nav {
  display: flex !important;
  background: #faf9f6 !important;
  flex-shrink: 0 !important;
  border-bottom: 2px solid #111 !important;
}

.builder-tab {
  flex: 1 !important;
  text-align: center !important;
  padding: 14px 10px !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: #888 !important;
  text-decoration: none !important;
  background: #fff !important;
  border: none !important;
  border-bottom: none !important;
  transition: background 0.15s, color 0.15s !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.builder-tab:first-child {
  border-right: 2px solid #111 !important;
}

#builderSidebar:has(#builder-create-panel:target) .builder-tab[href="#builder-create-panel"],
#builderSidebar:has(#builder-saved-panel:target) .builder-tab[href="#builder-saved-panel"],
#builderSidebar:not(:has(.builder-tab-panel:target)) .builder-tab[href="#builder-create-panel"] {
  color: #111 !important;
  background: #ffe600 !important;
}

/* Saved layouts overrides */
.ds-saved-layout-card {
  border: 2px solid #111 !important;
  border-radius: 0px !important;
  background: #fff !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 0.15s ease !important;
}

.ds-saved-layout-card:hover {
  background: #ffe600 !important;
}

.ds-saved-layout-label {
  font-weight: 900 !important;
  font-size: 13px !important;
  color: #111 !important;
  margin-bottom: 4px !important;
}

.ds-saved-layout-meta {
  font-weight: 700 !important;
  font-size: 10px !important;
  color: #777 !important;
  text-transform: uppercase !important;
}

/* Footer redesign */
#page-homepage-builder .builder-tab-panel .ds-sidebar-footer {
  border-top: 2px solid #111 !important;
  background: #faf9f6 !important;
  padding: 16px 18px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.ds-builder-footer-autosave {
  font-size: 10px !important;
  font-weight: 900 !important;
  color: #111 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  background: #f7f7f8 !important;
  border: 2px solid #111 !important;
  border-radius: 0px !important;
  padding: 8px 12px !important;
  margin-bottom: 12px !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

.ds-builder-btn-row {
  display: flex !important;
  gap: 10px !important;
  width: 100% !important;
  margin-bottom: 12px !important;
}

.ds-btn-builder-revert,
.ds-btn-builder-save {
  flex: 1 !important;
  height: 46px !important;
  border: 2px solid #111 !important;
  padding: 0 !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.ds-btn-builder-revert {
  background: #FFF !important;
  color: #111 !important;
}

.ds-btn-builder-revert:hover {
  background: #dc2626 !important;
  color: #FFF !important;
  transform: scale(1.02) !important;
}

.ds-btn-builder-revert:active {
  background: #b91c1c !important;
  color: #FFF !important;
  transform: scale(0.98) !important;
}

.ds-btn-builder-save {
  background: #FFF !important;
  color: #111 !important;
}

.ds-btn-builder-save:hover {
  background: #f7f7f8 !important;
  color: #111 !important;
}

.ds-btn-builder-publish {
  width: 100% !important;
  height: 46px !important;
  border: 2px solid #111 !important;
  background: #ffe600 !important;
  color: #111 !important;
  padding: 0 !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.ds-btn-builder-publish:hover {
  background: #ffd600 !important;
}

/* Saved layout cards - flat PAC.CO style */
.ds-saved-layout-card {
  border: 2px solid #111;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ds-saved-layout-card:hover {
  background: #faf9f6;
}
.ds-saved-layout-card:active {
  background: #f0f0f2;
}
.ds-saved-layout-label {
  font-weight: 900;
  font-size: 0.75rem;
  margin-bottom: 2px;
  color: #111;
}
.ds-saved-layout-meta {
  font-size: 0.6rem;
  color: #888;
  font-weight: 700;
}


.ds-delete-slide-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #fff !important;
  color: #dc2626 !important;
  border: 2px solid #111 !important;
  padding: 12px 16px !important;
  border-radius: 0px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  box-shadow: none !important;
  width: 100% !important;
}

.ds-delete-slide-btn:hover {
  background: #dc2626 !important;
  color: #fff !important;
}

/* Collapsible setting sections and cards */
.ds-settings-card {
  border: 2px solid #111 !important;
  border-radius: 0px !important;
  background: #fff !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: none !important;
}

.ds-settings-card-title {
  font-family: inherit !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  color: #111 !important;
  padding: 10px 14px !important;
  background: #faf9f6 !important;
  border-bottom: 2px solid #111 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  user-select: none !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
}

.ds-settings-card-body {
  padding: 12px 14px !important;
  background: #fff !important;
}

.ds-collapsible-section {
  border: 2px solid #111 !important;
  border-radius: 0px !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: none !important;
}

.ds-collapsible-section .ds-section-trigger {
  font-weight: 900 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  color: #111 !important;
  padding: 10px 12px !important;
  background: #faf9f6 !important;
  border-bottom: 2px solid #111 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
  user-select: none !important;
  line-height: 1.3 !important;
}

.ds-collapsible-section:not(.collapsed) .ds-section-trigger {
  background: #ffe600 !important;
}

.ds-feature-badge {
  background: #ffe600 !important;
  color: #111 !important;
  border: 2px solid #111 !important;
  padding: 2px 6px !important;
  font-weight: 900 !important;
  font-size: 10px !important;
  display: inline-block !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0px !important;
  transition: all 0.15s ease !important;
}

.ds-collapsible-section:not(.collapsed) .ds-section-trigger .ds-feature-badge {
  background: #111 !important;
  color: #ffe600 !important;
  border-color: #111 !important;
}

.ds-collapsible-section .ds-section-trigger svg {
  transition: transform 0.3s ease !important;
  stroke: #111 !important;
}

.ds-collapsible-section.collapsed .ds-section-trigger svg {
  transform: rotate(0deg) !important;
}

.ds-collapsible-section:not(.collapsed) .ds-section-trigger svg {
  transform: rotate(180deg) !important;
}

.ds-collapsible-section.collapsed .ds-section-content {
  display: none !important;
}

.ds-collapsible-section .ds-section-content {
  padding: 12px !important;
  background: #fff !important;
}

.ds-settings-notice {
  padding: 10px 12px !important;
  background: #faf9f6 !important;
  border: 2px dashed #111 !important;
  border-radius: 0px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #555 !important;
  line-height: 1.5 !important;
}

/* Modal Styling overrides */
.ds-widget-modal-overlay {
  background: rgba(0, 0, 0, 0.4) !important;
  z-index: 10000 !important;
}

.ds-widget-modal {
  border: 2px solid #111 !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  background: #fff !important;
}

.ds-widget-modal-header {
  border-bottom: 2px solid #111 !important;
  padding: 16px !important;
  background: #faf9f6 !important;
}

.ds-widget-modal-header h2 {
  font-size: 0.85rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 !important;
  color: #111 !important;
}

.ds-widget-modal-body {
  padding: 20px !important;
}

.ds-widget-divider {
  border: none !important;
  border-top: 2px solid #111 !important;
  margin: 16px 0 !important;
}

.ds-widget-modal-body .ds-btn {
  border: 2px solid #111 !important;
  border-radius: 0px !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  padding: 10px !important;
  background: #fff !important;
  color: #111 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 0.15s !important;
  height: auto !important;
}

.ds-widget-modal-body .ds-btn:hover {
  background: #ffe600 !important;
}

.ds-builder-modal-btn {
  padding: 12px !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  border: 2px solid #111 !important;
  border-radius: 0px !important;
  background: #FFF !important;
  color: #111 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ds-builder-modal-btn:hover {
  background: #ffe600 !important;
}

/* Inputs & Labels styling */
.ds-label {
  font-weight: 900 !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  color: #111 !important;
  margin-bottom: 5px !important;
  display: block !important;
  letter-spacing: 0.03em !important;
}

.ds-input {
  border: 2px solid #111 !important;
  border-radius: 0px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  color: #111 !important;
  background: #fff !important;
  box-sizing: border-box !important;
  width: 100% !important;
  transition: border-color 0.15s, background-color 0.15s !important;
  margin-bottom: 8px !important;
}

.ds-input:focus {
  outline: none !important;
  border-color: #111 !important;
  background: #ffe600 !important;
  box-shadow: none !important;
}

.ds-input option {
  background: #fff !important;
  color: #111 !important;
}

/* Form section spacing inside settings */
.ds-form-section {
  margin-bottom: 10px !important;
}

/* ===== PREVIEW RESPONSIVE OVERRIDES ===== */

.ds-viewport-scroll-wrapper::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.ds-viewport-scroll-wrapper {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

#builderViewportContainer {
  background: #f0f0f2 !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  flex: 1 !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  overflow-anchor: none !important;
}



@media (max-width: 1200px) {
  #builderViewportContainer {
    padding: 24px !important;
  }
}

@media (max-width: 768px) {
  #builderViewportContainer {
    padding: 24px !important;
  }
}

#builderViewport {
  background: #fff !important;
  border: var(--psb-width, 2px) solid var(--psb-color, var(--ink, #111)) !important;
  border-radius: var(--psb-radius, 0px) !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  position: relative !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
  min-height: 200px !important;
  container-type: inline-size;
  contain: style paint;
  image-rendering: auto !important;
}

.builder-frame-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 48px !important;
  padding: 0 14px !important;
  border-bottom: 2px solid #111 !important;
  background: #faf9f6 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.viewport-btn-group {
  display: flex !important;
  gap: 3px !important;
}

.builder-frame-toolbar .ds-btn {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #111 !important;
  border-radius: 0px !important;
  background: #fff !important;
  color: #111 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  position: relative !important;
  transition: background 0.1s ease, transform 0.05s ease, box-shadow 0.05s ease !important;
}

.builder-frame-toolbar .ds-btn:hover {
  background: #ffe600 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 0 #111 !important;
}

.builder-frame-toolbar .ds-btn:active {
  background: #ffe600 !important;
  transform: translateY(1px) !important;
  box-shadow: none !important;
}

.builder-frame-toolbar .ds-btn.active {
  background: #ffe600 !important;
}

#builderViewportInfo {
  font-family: monospace !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  border: 2px solid #111 !important;
  border-radius: 0px !important;
  padding: 5px 12px !important;
  background: #fff !important;
  color: #111 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

.builder-draft-badge {
  background: #ffe600 !important;
  color: #111 !important;
  font-weight: 900 !important;
  padding: 5px 12px !important;
  font-size: 10px !important;
  border: 2px solid #111 !important;
  border-radius: 0px !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

.builder-frame-body {
  flex: 1 1 auto !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  background: #fff !important;
  height: auto !important;
}

#builderPreviewMount {
  padding: 24px 0 !important;
  box-sizing: border-box !important;
  background: #fff !important;
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: auto !important;
  touch-action: auto !important;
}

.homepage-preview-sandbox {
  overflow: hidden !important;
  overscroll-behavior: auto !important;
  touch-action: auto !important;
}

.homepage-preview-sandbox img {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  -webkit-user-select: none !important;
}

.preview-section-wrapper {
  padding: 0 !important;
  box-sizing: border-box !important;
  width: min(1240px, calc(100% - 32px)) !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible !important;
}

/* Header widgets and Settings panel overrides */
.ds-widget-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 16px !important;
  height: 48px !important;
  border-bottom: 2px solid #111 !important;
  background: #faf9f6 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.ds-widget-section-head span {
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #111 !important;
}

.ds-widget-modal-close {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: #fff !important;
  border: 2px solid #111 !important;
  border-radius: 0px !important;
  cursor: pointer !important;
  color: #111 !important;
  transition: background 0.15s !important;
  box-shadow: none !important;
}

.ds-widget-modal-close:hover {
  background: #ff3b30 !important;
  color: #fff !important;
}

.ds-widget-modal-close svg {
  stroke: currentColor !important;
}

#builderSectionSettingsContent {
  flex: 1 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: #fff !important;
}

.ds-right-controls {
  width: 320px !important;
  border-left: 2px solid #111 !important;
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.ds-right-controls-body {
  padding: 14px !important;
  flex: 1 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: #fff !important;
}

.ds-right-controls .ds-widget-section-head {
  height: 48px !important;
  flex-shrink: 0 !important;
}

/* ===== FEATURE BOX CATEGORY TABS ===== */
.category-tab-row {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
}

.category-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffe600;
  color: #111;
  border: 3px solid #111;
  padding: 8px 20px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}

.category-tab + .category-tab {
  border-left: none;
}

.category-tab:first-child {
  border-right: none;
}

.category-tab.active,
.category-tab[aria-selected="true"] {
  background: #111;
  color: #fff;
  border: 3px solid #111;
}

.category-tab:hover:not(.active):not([aria-selected="true"]) {
  background: #fff5b0;
}



/* ===== ISOLATED PREVIEW RESPONSIVE RULES ===== */
/* Uses #builderViewport mode classes (set by setViewport()) — real grid reflow, not fake scaling.
   Desktop is the default (no class needed). Tablet/mobile classes override grid columns + hero layout. */

/* Desktop Preview (default mode) — 4 products per row to match storefront */
.homepage-preview-sandbox .products-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.homepage-preview-sandbox .feature-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Builder preview: custom uploaded icons display directly without gray circle frame */
.homepage-preview-sandbox .feature-icon {
  background: transparent;
  border-radius: 0;
}

/* Ensure hero frame wraps its contents properly without collapsing */
.homepage-preview-sandbox .hero-frame {
  height: auto !important;
}


/* Inherit border styles and hide internal borders to prevent double-outline artifacting.
   NOTE: .promo-banner is intentionally NOT in this list — it shows its own border from
   store.css so the Builder Preview matches the Front Store (WYSIWYG). The other promo
   section types still use the wrapper border because they don't define their own. */
.homepage-preview-sandbox .promo-newsletter,
.homepage-preview-sandbox .promo-countdown,
.homepage-preview-sandbox .promo-video,
.homepage-preview-sandbox .promo-faq {
  border: none !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}
.homepage-preview-sandbox .promo-marquee {
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
/* ===== COMPREHENSIVE PREVIEW RESPONSIVE RULES ===== */

/* Desktop Grid Rules */
#builderViewport:not(.mode-tablet):not(.mode-mobile) .homepage-preview-sandbox .products-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
#builderViewport:not(.mode-tablet):not(.mode-mobile) .homepage-preview-sandbox .feature-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Tablet Preview */
#builderViewport.mode-tablet .homepage-preview-sandbox .products-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
#builderViewport.mode-tablet .homepage-preview-sandbox .feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
#builderViewport.mode-tablet .homepage-preview-sandbox .hero-frame {
  flex-direction: column-reverse !important;
  padding: 36px 40px !important;
  gap: 24px !important;
  text-align: center !important;
  align-items: center !important;
}
#builderViewport.mode-tablet .homepage-preview-sandbox .hero-copy {
  align-items: center !important;
}
#builderViewport.mode-tablet .homepage-preview-sandbox .hero-title {
  max-width: none !important;
  font-size: clamp(1.9rem, 8vw, 2.6rem) !important;
}
#builderViewport.mode-tablet .homepage-preview-sandbox .hero-media {
  width: 100% !important;
  max-width: 400px !important;
}

/* Mobile Preview */
#builderViewport.mode-mobile .homepage-preview-sandbox .products-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px 12px !important;
}
#builderViewport.mode-mobile .homepage-preview-sandbox .feature-grid {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
#builderViewport.mode-mobile .homepage-preview-sandbox .hero-frame {
  flex-direction: column-reverse !important;
  text-align: center !important;
  padding: 24px 20px !important;
  gap: 16px !important;
  min-height: auto !important;
}
#builderViewport.mode-mobile .homepage-preview-sandbox .hero-copy {
  align-items: center !important;
}
#builderViewport.mode-mobile .homepage-preview-sandbox .hero-title {
  max-width: none !important;
  font-size: clamp(1.9rem, 11vw, 2.6rem) !important;
}
#builderViewport.mode-mobile .homepage-preview-sandbox .hero-media {
  width: 100% !important;
  max-width: 260px !important;
}
#builderViewport.mode-mobile .homepage-preview-sandbox .promo-banner {
  padding: 40px 20px !important;
}
#builderViewport.mode-mobile .homepage-preview-sandbox .pacbb-shell {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
#builderViewport.mode-mobile .homepage-preview-sandbox .pacbb-action-row-v2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}