/* Core Homepage Builder v2 — shared visual editor. Normal storefront layout stays theme-owned. */
[data-home-layout-root] { position: relative; }
[data-home-layout-root] > [data-home-section] { min-width: 0; }
[data-home-layout-root] > [data-home-section][data-home-enabled="0"] { display: none !important; }
[data-home-layout-root].hb-editing > [data-home-section][data-home-enabled="0"] {
    display: block !important;
    opacity: .46;
    filter: saturate(.45) grayscale(.12);
}

/* Grid/Swiper semantic contract. */
[data-home-section][data-home-display-mode="grid"] [data-home-carousel] { overflow: visible !important; }
[data-home-section][data-home-display-mode="grid"] [data-home-carousel] > .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(var(--hb-grid-columns, 4), minmax(0, 1fr)) !important;
    gap: var(--hb-grid-gap, 16px) !important;
    transform: none !important;
    transition: none !important;
    width: 100% !important;
    height: auto !important;
}
[data-home-section][data-home-display-mode="grid"] [data-home-carousel] > .swiper-wrapper > .swiper-slide {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
}
[data-home-section][data-home-display-mode="grid"] [data-home-carousel-nav] { display: none !important; }
[data-home-section][data-home-display-mode="carousel"] [data-home-carousel-nav] { display: flex; }
[data-home-section][data-home-size="compact"] { --hb-grid-gap: 10px; }
[data-home-section][data-home-size="normal"]  { --hb-grid-gap: 16px; }
[data-home-section][data-home-size="large"]   { --hb-grid-gap: 20px; }

/* Edit surface. */
[data-home-layout-root].hb-editing > [data-home-section] {
    position: relative !important;
    overflow: visible !important;
    outline: 2px solid rgba(59, 130, 246, .18);
    outline-offset: -2px;
    transition: opacity .18s ease, outline-color .18s ease, box-shadow .18s ease, filter .18s ease;
}
[data-home-layout-root].hb-editing > [data-home-section]:hover { outline-color: rgba(59, 130, 246, .62); }
[data-home-layout-root].hb-editing > [data-home-section].hb-drag-source {
    opacity: .32 !important;
    outline-color: rgba(59, 130, 246, .85);
    filter: saturate(.7);
}
[data-home-layout-root].hb-editing > [data-home-section].hb-section-pulse {
    animation: hbSectionPulse .42s ease;
}
@keyframes hbSectionPulse {
    0% { box-shadow: inset 0 0 0 0 rgba(37, 99, 235, 0); }
    45% { box-shadow: inset 0 0 0 4px rgba(37, 99, 235, .24); }
    100% { box-shadow: inset 0 0 0 0 rgba(37, 99, 235, 0); }
}

.hb-section-toolbar {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    left: 12px;
    z-index: 10030;
    direction: rtl;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 6px 7px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 14px;
    background: rgba(10, 15, 24, .92);
    color: #f8fafc;
    box-shadow: 0 14px 40px rgba(2, 6, 23, .24);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    font-family: inherit;
}
.hb-editing .hb-section-toolbar { display: flex; }
.hb-section-identity,
.hb-section-controls,
.hb-move-group { display: flex; align-items: center; }
.hb-section-identity { min-width: 0; gap: 7px; }
.hb-section-controls { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.hb-move-group { gap: 2px; padding: 2px; border-radius: 9px; background: rgba(255,255,255,.06); }
.hb-section-toolbar button,
.hb-section-toolbar select,
.hb-section-toolbar input {
    min-height: 34px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 9px;
    background: rgba(30, 41, 59, .86);
    color: #f8fafc;
    font: inherit;
    font-size: 11.5px;
    line-height: 1;
    outline: none;
}
.hb-section-toolbar button { cursor: pointer; }
.hb-section-toolbar button:hover,
.hb-section-toolbar select:hover,
.hb-section-toolbar input:hover { border-color: rgba(96,165,250,.58); background: rgba(51,65,85,.94); }
.hb-section-toolbar button:focus-visible,
.hb-section-toolbar select:focus-visible,
.hb-section-toolbar input:focus-visible { box-shadow: 0 0 0 3px rgba(59,130,246,.22); border-color: #60a5fa; }
.hb-section-toolbar svg,
.hb-builder-dock svg,
.hb-builder-modal svg,
.hb-drag-ghost svg {
    width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.hb-drag-handle {
    width: 38px;
    min-width: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: grab !important;
    touch-action: none;
    user-select: none;
    color: #bfdbfe !important;
    background: rgba(37,99,235,.16) !important;
    border-color: rgba(96,165,250,.34) !important;
}
.hb-drag-handle:active,
.hb-drag-handle.is-dragging { cursor: grabbing !important; background: rgba(37,99,235,.3) !important; }
.hb-drag-handle svg { fill: currentColor; stroke: none; }
.hb-section-index {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 26px; padding: 0 5px;
    border-radius: 8px; background: rgba(255,255,255,.075); color: #94a3b8;
    font-size: 10px; font-weight: 800; direction: ltr;
}
.hb-section-name {
    max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12.5px; font-weight: 900; color: #f8fafc;
}
.hb-icon-btn {
    width: 32px; min-width: 32px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent !important; border-color: transparent !important; color: #cbd5e1 !important;
}
.hb-icon-btn:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.hb-settings-btn { color: #93c5fd !important; }
.hb-compact-field {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    padding-right: 8px;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 9px;
    background: rgba(255,255,255,.035);
    color: #94a3b8;
    font-size: 9.5px;
    white-space: nowrap;
}
.hb-compact-field select,
.hb-compact-field input { border: 0; border-radius: 7px; min-height: 30px; background: rgba(30,41,59,.9); }
.hb-compact-field select { padding: 0 8px; cursor: pointer; }
.hb-limit-input { width: 54px; padding: 0 7px; text-align: center; direction: ltr; }
.hb-enable-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 0 10px;
    font-weight: 850 !important; white-space: nowrap;
}
.hb-enable-btn .hb-switch-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.12); }
.hb-enable-btn[data-enabled="0"] { color: #fda4af; }
.hb-enable-btn[data-enabled="0"] .hb-switch-dot { background: #fb7185; box-shadow: 0 0 0 4px rgba(251,113,133,.12); }

/* Drag preview + insertion marker. */
.hb-dragging-page { user-select: none !important; cursor: grabbing !important; }
.hb-drag-ghost {
    position: fixed;
    top: 0; left: 0;
    z-index: 13020;
    width: min(260px, calc(100vw - 24px));
    min-height: 58px;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(96,165,250,.5);
    border-radius: 14px;
    background: rgba(10,15,24,.96);
    color: #fff;
    box-shadow: 0 24px 70px rgba(2,6,23,.38);
    pointer-events: none;
    direction: rtl;
    will-change: transform;
}
.hb-drag-ghost > svg { width: 22px; height: 22px; flex: 0 0 auto; color: #93c5fd; fill: currentColor; stroke: none; }
.hb-drag-ghost div { min-width: 0; }
.hb-drag-ghost strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.hb-drag-ghost small { display: block; margin-top: 2px; color: #94a3b8; font-size: 10px; }
.hb-drop-indicator {
    position: relative;
    z-index: 10025;
    height: 10px;
    margin: 2px 0;
    pointer-events: none;
}
.hb-drop-indicator::before {
    content: "";
    position: absolute;
    inset-inline: max(18px, calc((100% - 1300px) / 2));
    top: 4px;
    height: 2px;
    border-radius: 2px;
    background: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}
.hb-drop-indicator span,
.hb-drop-indicator::after {
    content: "";
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3b82f6;
}
.hb-drop-indicator span { right: max(13px, calc((100% - 1300px) / 2 - 5px)); }
.hb-drop-indicator::after { left: max(13px, calc((100% - 1300px) / 2 - 5px)); }

/* Bottom command bar. */
.hb-builder-dock {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 11000;
    direction: rtl;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translateX(-50%);
    min-height: 58px;
    max-width: calc(100vw - 24px);
    padding: 7px;
    border: 1px solid rgba(148,163,184,.26);
    border-radius: 17px;
    background: rgba(10,15,24,.94);
    color: #f8fafc;
    box-shadow: 0 22px 70px rgba(2,6,23,.34);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    font-family: inherit;
}
.hb-dock-brand { display: none; align-items: center; gap: 9px; min-width: 190px; padding: 0 6px 0 10px; }
.hb-builder-dock.is-editing .hb-dock-brand { display: flex; }
.hb-dock-brand__icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; color: #bfdbfe; background: rgba(37,99,235,.18); }
.hb-dock-brand__icon svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.hb-dock-brand strong { display: block; font-size: 12.5px; }
.hb-dock-brand small { display: block; margin-top: 2px; color: #94a3b8; font-size: 9.5px; }
.hb-builder-dock button {
    min-height: 42px;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid transparent;
    border-radius: 11px;
    padding: 0 14px;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.hb-builder-dock button:hover { transform: translateY(-1px); }
.hb-builder-dock button:disabled { opacity: .55; cursor: progress; transform: none; }
.hb-builder-dock .hb-edit-btn { background: #2563eb; color: #fff; box-shadow: 0 8px 24px rgba(37,99,235,.28); }
.hb-builder-dock .hb-edit-btn:hover { background: #1d4ed8; }
.hb-builder-dock .hb-save-btn { background: #16a34a; color: #fff; }
.hb-builder-dock .hb-save-btn:hover { background: #15803d; }
.hb-builder-dock .hb-cancel-btn { background: rgba(255,255,255,.07); border-color: rgba(148,163,184,.2); color: #e2e8f0; }
.hb-builder-dock .hb-cancel-btn:hover { background: rgba(255,255,255,.12); }
.hb-status { display: none; align-items: center; gap: 7px; min-width: 106px; color: #cbd5e1; font-size: 10.5px; white-space: nowrap; }
.hb-builder-dock.is-editing .hb-status { display: inline-flex; }
.hb-status i { width: 7px; height: 7px; border-radius: 50%; background: #60a5fa; }
.hb-status[data-state="dirty"] i { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.12); }
.hb-status[data-state="saving"] i { background: #38bdf8; animation: hbStatusPulse 1s infinite; }
.hb-status[data-state="saved"] i { background: #22c55e; }
.hb-status[data-state="error"] i { background: #fb7185; }
@keyframes hbStatusPulse { 50% { opacity: .35; } }
.hb-builder-dock:not(.is-editing) .hb-save-btn,
.hb-builder-dock:not(.is-editing) .hb-cancel-btn { display: none; }
.hb-builder-dock.is-editing .hb-edit-btn { display: none; }

/* Settings dialog. */
.hb-builder-modal {
    position: fixed; inset: 0; z-index: 12000;
    display: none; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(2,6,23,.68);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    direction: rtl;
    font-family: inherit;
}
.hb-builder-modal.is-open { display: flex; }
.hb-builder-modal__card {
    width: min(620px, 100%);
    max-height: min(760px, 88vh);
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid #283241;
    border-radius: 20px;
    background: #111722;
    color: #eef2f7;
    box-shadow: 0 30px 90px rgba(2,6,23,.5);
}
.hb-builder-modal__head,
.hb-builder-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.hb-builder-modal__head { border-bottom: 1px solid #283241; }
.hb-builder-modal__foot { border-top: 1px solid #283241; }
.hb-builder-modal__head strong { display: block; font-size: 14px; }
.hb-builder-modal__head small { display: block; margin-top: 4px; color: #94a3b8; font-size: 10.5px; }
.hb-builder-modal__head button { width: 36px; min-width: 36px; padding: 0; }
.hb-builder-modal__tools { display: flex; align-items: end; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #222c3a; background: #0e141e; }
.hb-builder-modal__tools label { flex: 1; display: grid; gap: 5px; color: #94a3b8; font-size: 9.5px; }
.hb-builder-modal__tools input { width: 100%; min-height: 40px; border: 1px solid #2b3747; border-radius: 10px; padding: 0 11px; background: #161f2c; color: #f8fafc; font: inherit; outline: none; }
.hb-builder-modal__tools input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.14); }
.hb-builder-modal__tools > div { display: flex; gap: 5px; }
.hb-builder-modal__body { overflow: auto; padding: 14px 16px; }
.hb-builder-modal button {
    min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid #2b3747; border-radius: 9px; padding: 0 11px;
    background: #1a2432; color: #e2e8f0; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer;
}
.hb-builder-modal button:hover { background: #223044; border-color: #3b4b60; }
.hb-builder-modal .hb-modal-apply { min-width: 116px; background: #2563eb; border-color: #2563eb; color: #fff; }
.hb-builder-modal .hb-modal-apply:hover { background: #1d4ed8; }
.hb-option-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.hb-option-item {
    position: relative;
    display: flex; align-items: center; gap: 9px;
    min-height: 46px;
    padding: 8px 10px;
    border: 1px solid #273344;
    border-radius: 11px;
    background: #151d29;
    font-size: 11.5px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.hb-option-item:hover { background: #1a2534; border-color: #3a4a60; }
.hb-option-item input { position: absolute; opacity: 0; pointer-events: none; }
.hb-option-check { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 1px solid #3b4a5f; border-radius: 7px; color: transparent; background: #0f1620; }
.hb-option-item input:checked + .hb-option-check { border-color: #3b82f6; background: #2563eb; color: #fff; }
.hb-option-check svg { width: 14px; height: 14px; }
.hb-option-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-selected-count { color: #94a3b8; font-size: 10.5px; }
.hb-modal-loading { grid-column: 1/-1; padding: 34px 10px; text-align: center; color: #94a3b8; font-size: 11px; }
.hb-modal-loading.is-error { color: #fda4af; }

@media (max-width: 900px) {
    .hb-section-toolbar { align-items: flex-start; }
    .hb-section-controls { flex: 1; }
    .hb-section-name { max-width: 145px; }
    .hb-dock-brand { display: none !important; }
}
@media (max-width: 767px) {
    [data-home-section][data-home-display-mode="grid"] [data-home-carousel] > .swiper-wrapper {
        grid-template-columns: repeat(var(--hb-mobile-columns, 2), minmax(0,1fr)) !important;
        gap: 10px !important;
    }
    .hb-section-toolbar { top: 7px; right: 7px; left: 7px; gap: 6px; padding: 5px; }
    .hb-section-identity { width: 100%; }
    .hb-section-controls { width: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 1px; scrollbar-width: none; }
    .hb-section-controls::-webkit-scrollbar { display: none; }
    .hb-section-name { max-width: calc(100vw - 145px); }
    .hb-move-group { margin-right: auto; }
    .hb-compact-field > span { display: none; }
    .hb-compact-field { padding-right: 2px; grid-template-columns: auto; }
    .hb-builder-dock { bottom: 9px; min-height: 52px; max-width: calc(100vw - 14px); padding: 5px; }
    .hb-builder-dock button { min-height: 40px; padding: 0 10px; font-size: 11px; }
    .hb-status { min-width: auto; }
    .hb-status span { display: none; }
    .hb-builder-modal { padding: 10px; align-items: flex-end; }
    .hb-builder-modal__card { max-height: 88vh; border-radius: 20px 20px 12px 12px; }
    .hb-builder-modal__tools { align-items: stretch; flex-direction: column; }
    .hb-option-list { grid-template-columns: 1fr; }
    .hb-drop-indicator::before { inset-inline: 18px; }
    .hb-drop-indicator span { right: 13px; }
    .hb-drop-indicator::after { left: 13px; }
}

/* Homepage Builder v3 — composer controls and readable native selects. */
.hb-section-toolbar select,
.hb-builder-modal select,
.hb-builder-modal option,
.hb-builder-dock select {
    color-scheme: light !important;
}
.hb-section-toolbar select,
.hb-builder-modal select {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    -webkit-text-fill-color: #0f172a !important;
}
.hb-section-toolbar select option,
.hb-builder-modal select option {
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}
.hb-section-toolbar input[type="number"] {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    -webkit-text-fill-color: #0f172a !important;
}
.hb-delete-btn { color: #fda4af !important; }
.hb-delete-btn:hover { color: #fff !important; background: rgba(225,29,72,.22) !important; border-color: rgba(251,113,133,.35) !important; }

.hb-add-section-point {
    display: none;
    position: relative;
    z-index: 15;
    width: min(1300px, calc(100% - 32px));
    margin: 26px auto 34px;
    padding: 0;
    direction: rtl;
}
.hb-editing > .hb-add-section-point { display: block; }
.hb-add-section-point button {
    width: 100%;
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 18px;
    border: 1.5px dashed #60a5fa;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(239,246,255,.96), rgba(248,250,252,.96));
    color: #1d4ed8;
    box-shadow: 0 12px 32px rgba(37,99,235,.08);
    cursor: pointer;
    font: inherit;
    transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hb-add-section-point button:hover {
    transform: translateY(-2px);
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 16px 38px rgba(37,99,235,.14);
}
.hb-add-section-point svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.hb-add-section-point span { text-align: right; }
.hb-add-section-point strong { display: block; font-size: 14px; font-weight: 900; }
.hb-add-section-point small { display: block; margin-top: 4px; color: #64748b; font-size: 11px; font-weight: 700; }

.hb-composer-card { width: min(760px, 100%); }
.hb-composer-body { padding: 18px; }
.hb-composer-intro { margin-bottom: 14px; }
.hb-composer-intro strong { display: block; font-size: 15px; color: #f8fafc; }
.hb-composer-intro p { margin: 5px 0 0; color: #94a3b8; font-size: 11px; line-height: 1.9; }
.hb-section-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.hb-section-type-card {
    min-height: 100px !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0,1fr) 20px;
    align-items: center;
    gap: 11px !important;
    padding: 13px !important;
    text-align: right;
    border-radius: 14px !important;
    background: #151d29 !important;
    border-color: #2c394a !important;
}
.hb-section-type-card:hover { background: #1b2736 !important; border-color: #3b82f6 !important; }
.hb-section-type-card > span:nth-child(2) { min-width: 0; }
.hb-section-type-card strong { display: block; color: #f8fafc; font-size: 13px; }
.hb-section-type-card small { display: block; margin-top: 5px; color: #94a3b8; font-size: 10px; line-height: 1.75; }
.hb-section-type-card > i { color: #60a5fa; font-style: normal; font-size: 17px; }
.hb-section-type-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(37,99,235,.16); color: #93c5fd; font-size: 14px; font-weight: 950; direction: ltr; }

.hb-composer-form { display: grid; gap: 13px; }
.hb-form-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.hb-form-field { display: grid; gap: 6px; min-width: 0; color: #cbd5e1; }
.hb-form-label { font-size: 10.5px; font-weight: 850; color: #cbd5e1; }
.hb-form-field > small { color: #7f8b9c; font-size: 9.5px; line-height: 1.7; }
.hb-form-control {
    width: 100%;
    min-height: 44px;
    border: 1px solid #cbd5e1 !important;
    border-radius: 11px !important;
    padding: 0 12px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font: inherit !important;
    font-size: 12px !important;
    outline: none !important;
    box-shadow: none !important;
    color-scheme: light !important;
}
textarea.hb-form-control { min-height: 90px; padding-top: 10px !important; }
.hb-form-control:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59,130,246,.14) !important; }
.hb-form-control option { background: #fff !important; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; }
.hb-conditional-config { display: grid; gap: 12px; }
.hb-picker-shell { overflow: hidden; border: 1px solid #2b3747; border-radius: 13px; background: #0f151f; }
.hb-picker-tools { display: flex; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid #253142; }
.hb-picker-tools .hb-form-control { min-height: 38px; }
.hb-picker-tools > div { display: flex; gap: 5px; }
.hb-picker-tools button { min-height: 36px !important; white-space: nowrap; }
.hb-picker-list { max-height: 250px; overflow: auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; padding: 9px; }
.hb-picker-item { position: relative; display: flex; align-items: center; gap: 8px; min-height: 43px; padding: 7px 9px; border: 1px solid #273344; border-radius: 10px; background: #151d29; color: #dbe4ef; font-size: 11px; cursor: pointer; }
.hb-picker-item:hover { border-color: #3b82f6; background: #182334; }
.hb-picker-item input { position: absolute; opacity: 0; pointer-events: none; }
.hb-picker-item .hb-option-check { width: 22px; height: 22px; flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #405069; border-radius: 7px; color: transparent; background: #0f151f; }
.hb-picker-item input:checked + .hb-option-check { background: #2563eb; border-color: #2563eb; color: #fff; }
.hb-picker-item .hb-option-check svg { width: 14px; height: 14px; }
.hb-composer-hint { max-width: 390px; color: #94a3b8; font-size: 9.5px; line-height: 1.7; }
.hb-builder-modal__foot > div { display: flex; gap: 7px; }

@media (max-width: 760px) {
    .hb-section-type-grid, .hb-picker-list, .hb-form-row { grid-template-columns: 1fr; }
    .hb-composer-body { padding: 13px; }
    .hb-picker-tools { align-items: stretch; flex-direction: column; }
    .hb-add-section-point { width: calc(100% - 20px); margin: 18px auto 24px; }
}

/* ================================================================
   Homepage Builder 5.0 — Django Daisy-inspired admin workspace
   Shared editor UI stays intentionally light and theme-independent.
   ================================================================ */
:root {
    --hb-daisy-base-100: #ffffff;
    --hb-daisy-base-200: #f7f7f8;
    --hb-daisy-base-250: #f1f2f4;
    --hb-daisy-base-300: #e3e5e8;
    --hb-daisy-base-content: #20242b;
    --hb-daisy-muted: #6b7280;
    --hb-daisy-muted-2: #9097a2;
    --hb-daisy-primary: #6366f1;
    --hb-daisy-primary-hover: #5558e8;
    --hb-daisy-primary-soft: #eef2ff;
    --hb-daisy-success: #16a34a;
    --hb-daisy-success-soft: #ecfdf3;
    --hb-daisy-error: #dc2626;
    --hb-daisy-error-soft: #fff1f2;
    --hb-daisy-warning: #d97706;
    --hb-daisy-radius: 10px;
    --hb-daisy-radius-lg: 14px;
    --hb-daisy-shadow: 0 1px 2px rgba(16,24,40,.04), 0 7px 20px rgba(16,24,40,.06);
    --hb-daisy-shadow-lg: 0 18px 55px rgba(16,24,40,.15);
}

.hb-section-toolbar,
.hb-builder-dock,
.hb-drag-ghost,
.hb-add-section-point,
.hb-swal-container,
.hb-swal-popup,
.hb-swal-popup *,
.hb-builder-modal,
.hb-builder-modal * {
    color-scheme: light !important;
    box-sizing: border-box;
}

/* Section edit toolbar — compact admin bar. */
.hb-section-toolbar {
    min-height: 46px !important;
    gap: 8px !important;
    padding: 5px 6px !important;
    border: 1px solid var(--hb-daisy-base-300) !important;
    border-radius: 12px !important;
    background: var(--hb-daisy-base-100) !important;
    color: var(--hb-daisy-base-content) !important;
    box-shadow: var(--hb-daisy-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.hb-section-identity { gap: 6px !important; }
.hb-section-name {
    max-width: 220px !important;
    color: var(--hb-daisy-base-content) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}
.hb-section-index {
    min-width: 26px !important;
    height: 25px !important;
    border: 1px solid var(--hb-daisy-base-300) !important;
    border-radius: 7px !important;
    background: var(--hb-daisy-base-200) !important;
    color: var(--hb-daisy-muted) !important;
    font-size: 9.5px !important;
}
.hb-section-controls { gap: 5px !important; }
.hb-move-group {
    gap: 1px !important;
    padding: 2px !important;
    border: 1px solid var(--hb-daisy-base-300) !important;
    border-radius: 9px !important;
    background: var(--hb-daisy-base-200) !important;
}

.hb-section-toolbar button,
.hb-section-toolbar select,
.hb-section-toolbar input,
.hb-builder-dock button,
.hb-builder-dock select,
.hb-builder-dock input {
    min-height: 34px !important;
    border: 1px solid var(--hb-daisy-base-300) !important;
    border-radius: 8px !important;
    background: var(--hb-daisy-base-100) !important;
    color: var(--hb-daisy-base-content) !important;
    -webkit-text-fill-color: var(--hb-daisy-base-content) !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    outline: none !important;
}
.hb-section-toolbar select,
.hb-builder-dock select {
    min-width: 86px;
    padding: 0 10px !important;
    cursor: pointer;
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-left: 30px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 8px center !important;
    background-size: 14px 14px !important;
}
.hb-section-toolbar select option,
.hb-builder-dock select option,
.hb-swal-popup select option {
    background: #fff !important;
    color: #20242b !important;
    -webkit-text-fill-color: #20242b !important;
}
.hb-section-toolbar button:hover,
.hb-section-toolbar select:hover,
.hb-section-toolbar input:hover,
.hb-builder-dock button:hover {
    border-color: #c6c9cf !important;
    background: var(--hb-daisy-base-200) !important;
}
.hb-section-toolbar button:focus-visible,
.hb-section-toolbar select:focus-visible,
.hb-section-toolbar input:focus-visible,
.hb-builder-dock button:focus-visible {
    border-color: var(--hb-daisy-primary) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.13) !important;
}

.hb-drag-handle {
    width: 36px !important;
    min-width: 36px !important;
    color: var(--hb-daisy-primary) !important;
    border-color: #d9dcff !important;
    background: var(--hb-daisy-primary-soft) !important;
}
.hb-drag-handle:hover,
.hb-drag-handle:active,
.hb-drag-handle.is-dragging {
    border-color: #c8cbff !important;
    background: #e3e7ff !important;
}
.hb-icon-btn {
    width: 32px !important;
    min-width: 32px !important;
    border-color: transparent !important;
    background: transparent !important;
    color: #646b76 !important;
}
.hb-icon-btn:hover {
    border-color: transparent !important;
    background: var(--hb-daisy-base-250) !important;
    color: #20242b !important;
}
.hb-settings-btn { color: var(--hb-daisy-primary) !important; }
.hb-delete-btn { color: #b42318 !important; }
.hb-delete-btn:hover { background: var(--hb-daisy-error-soft) !important; color: var(--hb-daisy-error) !important; }

.hb-compact-field {
    min-height: 34px !important;
    gap: 4px !important;
    padding-right: 8px !important;
    border: 1px solid var(--hb-daisy-base-300) !important;
    border-radius: 8px !important;
    background: var(--hb-daisy-base-200) !important;
    color: var(--hb-daisy-muted) !important;
    font-size: 9.5px !important;
}
.hb-compact-field select,
.hb-compact-field input {
    min-height: 30px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: var(--hb-daisy-base-100) !important;
}
.hb-limit-input { width: 56px !important; }

.hb-enable-btn {
    gap: 7px !important;
    padding: 0 10px !important;
    border-color: #cdebd7 !important;
    background: var(--hb-daisy-success-soft) !important;
    color: #12733a !important;
}
.hb-enable-btn .hb-switch-dot {
    width: 7px !important;
    height: 7px !important;
    background: var(--hb-daisy-success) !important;
    box-shadow: none !important;
}
.hb-enable-btn[data-enabled="0"] {
    border-color: #fecdd3 !important;
    background: var(--hb-daisy-error-soft) !important;
    color: #b42318 !important;
}
.hb-enable-btn[data-enabled="0"] .hb-switch-dot { background: #e11d48 !important; box-shadow: none !important; }

/* Drag state. */
[data-home-layout-root].hb-editing > [data-home-section] {
    outline: 1px dashed rgba(99,102,241,.32) !important;
    outline-offset: -1px !important;
}
[data-home-layout-root].hb-editing > [data-home-section]:hover { outline-color: rgba(99,102,241,.72) !important; }
.hb-drag-ghost {
    min-height: 54px !important;
    border: 1px solid #d8dafe !important;
    border-radius: 11px !important;
    background: var(--hb-daisy-base-100) !important;
    color: var(--hb-daisy-base-content) !important;
    box-shadow: var(--hb-daisy-shadow-lg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.hb-drag-ghost > svg { color: var(--hb-daisy-primary) !important; }
.hb-drag-ghost small { color: var(--hb-daisy-muted) !important; }
.hb-drop-indicator::before,
.hb-drop-indicator span,
.hb-drop-indicator::after { background: var(--hb-daisy-primary) !important; }
.hb-drop-indicator::before { box-shadow: 0 0 0 3px rgba(99,102,241,.1) !important; }

/* Fixed command dock — resembles a compact Django admin action bar. */
.hb-builder-dock {
    min-height: 54px !important;
    gap: 6px !important;
    padding: 6px !important;
    border: 1px solid var(--hb-daisy-base-300) !important;
    border-radius: 13px !important;
    background: var(--hb-daisy-base-100) !important;
    color: var(--hb-daisy-base-content) !important;
    box-shadow: 0 9px 26px rgba(16,24,40,.12) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.hb-dock-brand { min-width: 185px !important; }
.hb-dock-brand__icon {
    width: 36px !important;
    height: 36px !important;
    border: 1px solid #d9dcff !important;
    border-radius: 9px !important;
    background: var(--hb-daisy-primary-soft) !important;
    color: var(--hb-daisy-primary) !important;
}
.hb-dock-brand strong { color: var(--hb-daisy-base-content) !important; font-size: 12px !important; }
.hb-dock-brand small { color: var(--hb-daisy-muted) !important; font-size: 9.5px !important; }
.hb-builder-dock button { min-height: 40px !important; padding: 0 12px !important; }
.hb-builder-dock .hb-save-layout {
    border-color: var(--hb-daisy-primary) !important;
    background: var(--hb-daisy-primary) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
.hb-builder-dock .hb-save-layout:hover { border-color: var(--hb-daisy-primary-hover) !important; background: var(--hb-daisy-primary-hover) !important; }
.hb-status { color: var(--hb-daisy-muted) !important; }

/* Add section — subtle empty-state action, no glass effect. */
.hb-add-section-point { margin-top: 22px !important; margin-bottom: 30px !important; }
.hb-add-section-point button {
    min-height: 72px !important;
    gap: 11px !important;
    padding: 12px 16px !important;
    border: 1px dashed #c5c8cf !important;
    border-radius: 12px !important;
    background: var(--hb-daisy-base-200) !important;
    color: #343943 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.hb-add-section-point button:hover {
    transform: none !important;
    border-color: #b8bbef !important;
    background: var(--hb-daisy-primary-soft) !important;
    color: #4547c7 !important;
    box-shadow: none !important;
}
.hb-add-section-point svg {
    width: 22px !important;
    height: 22px !important;
    padding: 3px;
    border: 1px solid #d7d9df;
    border-radius: 7px;
    background: #fff;
}
.hb-add-section-point strong { font-size: 13px !important; font-weight: 800 !important; }
.hb-add-section-point small { margin-top: 2px !important; color: var(--hb-daisy-muted) !important; font-size: 10px !important; font-weight: 600 !important; }

/* SweetAlert2 composer — Daisy-style modal-box. */
.hb-swal-container {
    z-index: 14050 !important;
    direction: rtl !important;
    font-family: inherit !important;
}
.hb-swal-popup {
    width: min(760px, calc(100vw - 28px)) !important;
    max-height: min(88vh, 820px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #dfe1e5 !important;
    border-radius: 14px !important;
    background: var(--hb-daisy-base-100) !important;
    color: var(--hb-daisy-base-content) !important;
    box-shadow: 0 24px 70px rgba(16,24,40,.18) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.hb-swal-html { margin: 0 !important; padding: 0 !important; color: var(--hb-daisy-base-content) !important; overflow: hidden !important; }
.hb-swal-close {
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
    width: 34px !important;
    height: 34px !important;
    border: 1px solid var(--hb-daisy-base-300) !important;
    border-radius: 8px !important;
    background: var(--hb-daisy-base-100) !important;
    color: #707782 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    box-shadow: none !important;
}
.hb-swal-close:hover { background: var(--hb-daisy-base-200) !important; color: #20242b !important; }
.hb-swal-shell { display: flex; flex-direction: column; max-height: min(88vh, 820px); text-align: right; }
.hb-swal-head {
    min-height: 70px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 11px !important;
    padding: 13px 16px 13px 54px !important;
    direction: rtl !important;
    text-align: right !important;
    border-bottom: 1px solid var(--hb-daisy-base-300) !important;
    background: var(--hb-daisy-base-200) !important;
}
.hb-swal-head__icon {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #d9dcff !important;
    border-radius: 9px !important;
    background: var(--hb-daisy-primary-soft) !important;
    color: var(--hb-daisy-primary) !important;
}
.hb-swal-head__icon svg {
    width: 19px !important;
    height: 19px !important;
    display: block !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}
.hb-swal-head__copy {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
    direction: rtl !important;
    text-align: right !important;
}
.hb-swal-head strong {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    color: var(--hb-daisy-base-content) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.55 !important;
    text-align: right !important;
}
.hb-swal-head small {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    color: var(--hb-daisy-muted) !important;
    font-size: 10px !important;
    line-height: 1.7 !important;
    text-align: right !important;
}
.hb-composer-body {
    overflow: auto;
    padding: 16px !important;
    background: var(--hb-daisy-base-100) !important;
}
.hb-swal-foot {
    gap: 12px !important;
    padding: 10px 16px !important;
    border-top: 1px solid var(--hb-daisy-base-300) !important;
    background: var(--hb-daisy-base-200) !important;
}
.hb-composer-hint { color: var(--hb-daisy-muted) !important; font-size: 9.5px !important; }
.hb-swal-actions { gap: 7px !important; }
.hb-swal-actions button {
    min-height: 38px !important;
    padding: 0 14px !important;
    border: 1px solid var(--hb-daisy-base-300) !important;
    border-radius: 8px !important;
    background: var(--hb-daisy-base-100) !important;
    color: #3b4049 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}
.hb-swal-actions button:hover { border-color: #c5c7cd !important; background: #f5f5f6 !important; }
.hb-swal-actions .hb-modal-apply {
    min-width: 112px !important;
    border-color: var(--hb-daisy-primary) !important;
    background: var(--hb-daisy-primary) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
.hb-swal-actions .hb-modal-apply:hover { border-color: var(--hb-daisy-primary-hover) !important; background: var(--hb-daisy-primary-hover) !important; }

/* Composer selection menu. */
.hb-composer-intro {
    margin-bottom: 12px !important;
    padding: 0 0 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--hb-daisy-base-300) !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.hb-composer-intro strong { color: #2b3038 !important; font-size: 13px !important; font-weight: 800 !important; }
.hb-composer-intro p { margin-top: 3px !important; color: var(--hb-daisy-muted) !important; font-size: 10px !important; line-height: 1.75 !important; }
.hb-section-type-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 8px !important; }
.hb-section-type-card {
    min-height: 84px !important;
    grid-template-columns: 38px minmax(0,1fr) 18px !important;
    gap: 10px !important;
    padding: 11px !important;
    border: 1px solid var(--hb-daisy-base-300) !important;
    border-radius: 10px !important;
    background: var(--hb-daisy-base-100) !important;
    color: var(--hb-daisy-base-content) !important;
    box-shadow: none !important;
    transition: border-color .15s ease, background .15s ease, color .15s ease !important;
}
.hb-section-type-card:hover {
    transform: none !important;
    border-color: #bec1f2 !important;
    background: #f7f7ff !important;
    box-shadow: none !important;
}
.hb-section-type-card strong { color: #2b3038 !important; font-size: 12px !important; font-weight: 850 !important; }
.hb-section-type-card small { margin-top: 3px !important; color: var(--hb-daisy-muted) !important; font-size: 9.5px !important; line-height: 1.65 !important; }
.hb-section-type-card > i { color: #9aa0aa !important; font-style: normal !important; display: inline-flex; align-items: center; justify-content: center; }
.hb-section-type-card > i svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; }
.hb-section-type-card:hover > i { color: var(--hb-daisy-primary) !important; }
.hb-section-type-icon {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid var(--hb-daisy-base-300) !important;
    border-radius: 9px !important;
    background: var(--hb-daisy-base-200) !important;
    color: #4f5661 !important;
}
.hb-section-type-icon svg { width: 19px; height: 19px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hb-section-type-card:hover .hb-section-type-icon { border-color: #d5d7ff !important; background: var(--hb-daisy-primary-soft) !important; color: var(--hb-daisy-primary) !important; }

/* Daisy-like form controls. */
.hb-composer-form { gap: 12px !important; }
.hb-form-row { gap: 10px !important; }
.hb-form-field {
    gap: 6px !important;
    color: #343943 !important;
}
.hb-form-label {
    color: #343943 !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
}
.hb-form-field > small {
    color: var(--hb-daisy-muted) !important;
    font-size: 9.5px !important;
    line-height: 1.65 !important;
}
.hb-form-control,
.hb-swal-popup select,
.hb-swal-popup input,
.hb-swal-popup textarea {
    min-height: 42px !important;
    padding: 0 12px !important;
    border: 1px solid #d5d7dc !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #20242b !important;
    -webkit-text-fill-color: #20242b !important;
    caret-color: var(--hb-daisy-primary) !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.03) !important;
    color-scheme: light !important;
    font-family: inherit !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    outline: none !important;
}
.hb-swal-popup select,
.hb-form-control:is(select) {
    cursor: pointer;
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-left: 34px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 10px center !important;
    background-size: 15px 15px !important;
}
.hb-form-control::placeholder,
.hb-swal-popup input::placeholder,
.hb-swal-popup textarea::placeholder {
    color: #9ba1aa !important;
    -webkit-text-fill-color: #9ba1aa !important;
    opacity: 1 !important;
}
.hb-form-control:hover,
.hb-swal-popup select:hover,
.hb-swal-popup input:hover,
.hb-swal-popup textarea:hover { border-color: #c2c5cb !important; }
.hb-form-control:focus,
.hb-swal-popup select:focus,
.hb-swal-popup input:focus,
.hb-swal-popup textarea:focus {
    border-color: var(--hb-daisy-primary) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
}
.hb-form-control option,
.hb-swal-popup select option { background: #fff !important; color: #20242b !important; -webkit-text-fill-color: #20242b !important; }
.hb-swal-popup input[type="number"] { direction: ltr; text-align: center; }

/* Pickers look like a Django admin related-object chooser. */
.hb-picker-shell {
    border: 1px solid var(--hb-daisy-base-300) !important;
    border-radius: 10px !important;
    background: #fff !important;
    overflow: hidden !important;
}
.hb-picker-tools {
    gap: 8px !important;
    padding: 8px !important;
    border-bottom: 1px solid var(--hb-daisy-base-300) !important;
    background: var(--hb-daisy-base-200) !important;
}
.hb-picker-tools .hb-form-control { min-height: 38px !important; }
.hb-picker-tools button {
    min-height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid var(--hb-daisy-base-300) !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: #4b515b !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}
.hb-picker-tools button:hover { background: #f4f4f5 !important; }
.hb-picker-list { gap: 5px !important; padding: 8px !important; background: #fff !important; }
.hb-picker-item {
    min-height: 39px !important;
    gap: 9px !important;
    padding: 7px 9px !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: #343943 !important;
    font-size: 10.5px !important;
}
.hb-picker-item:hover { border-color: var(--hb-daisy-base-300) !important; background: var(--hb-daisy-base-200) !important; }
.hb-option-check {
    width: 18px !important;
    height: 18px !important;
    border: 1px solid #c7cbd1 !important;
    border-radius: 5px !important;
    background: #fff !important;
}
.hb-picker-item input:checked + .hb-option-check {
    border-color: var(--hb-daisy-primary) !important;
    background: var(--hb-daisy-primary) !important;
    color: #fff !important;
}
.hb-picker-empty { color: var(--hb-daisy-muted) !important; }

/* SweetAlert confirmations follow the same admin component tokens. */
.hb-swal-confirm-popup {
    padding: 22px !important;
    border: 1px solid var(--hb-daisy-base-300) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: var(--hb-daisy-shadow-lg) !important;
    text-align: center !important;
}
.hb-swal-confirm-popup .swal2-icon { margin: 4px auto 12px !important; transform: scale(.78); }
.hb-swal-confirm-popup .swal2-title { margin: 0 !important; padding: 0 !important; color: #20242b !important; font-family: inherit !important; font-size: 17px !important; font-weight: 850 !important; }
.hb-swal-confirm-popup .swal2-html-container { margin: 7px 0 0 !important; padding: 0 !important; color: var(--hb-daisy-muted) !important; font-family: inherit !important; font-size: 11px !important; line-height: 1.85 !important; }
.hb-swal-confirm-popup .swal2-actions { margin: 17px 0 0 !important; gap: 7px !important; }
.hb-swal-confirm-popup .swal2-actions button { min-height: 39px !important; margin: 0 !important; padding: 0 14px !important; border-radius: 8px !important; box-shadow: none !important; font-family: inherit !important; font-size: 11px !important; font-weight: 800 !important; }
.hb-swal-confirm-danger { border: 1px solid #dc2626 !important; background: #dc2626 !important; color: #fff !important; }
.hb-swal-confirm-cancel { border: 1px solid var(--hb-daisy-base-300) !important; background: #fff !important; color: #3d434c !important; }

/* Never let storefront dark mode recolor the editor. */
html.bf-dark .hb-section-toolbar,
html.bf-dark .hb-builder-dock,
html.bf-dark .hb-drag-ghost,
html.bf-dark .hb-add-section-point button,
html.bf-dark .hb-swal-popup,
[data-theme="dark"] .hb-section-toolbar,
[data-theme="dark"] .hb-builder-dock,
[data-theme="dark"] .hb-swal-popup {
    color-scheme: light !important;
}

@media (max-width: 900px) {
    .hb-section-toolbar { align-items: flex-start !important; }
    .hb-section-controls { flex: 1; }
    .hb-section-name { max-width: 145px !important; }
    .hb-dock-brand { display: none !important; }
}
@media (max-width: 767px) {
    .hb-section-toolbar { top: 7px !important; right: 7px !important; left: 7px !important; gap: 5px !important; padding: 5px !important; }
    .hb-section-identity { width: 100%; }
    .hb-section-controls { width: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 1px; scrollbar-width: none; }
    .hb-section-controls::-webkit-scrollbar { display: none; }
    .hb-section-name { max-width: calc(100vw - 145px) !important; }
    .hb-move-group { margin-right: auto; }
    .hb-compact-field > span { display: none; }
    .hb-compact-field { padding-right: 2px !important; grid-template-columns: auto; }
    .hb-builder-dock { bottom: 8px !important; min-height: 50px !important; max-width: calc(100vw - 14px) !important; padding: 5px !important; }
    .hb-builder-dock button { min-height: 38px !important; padding: 0 9px !important; font-size: 10.5px !important; }
    .hb-status { min-width: auto; }
    .hb-status span { display: none; }
    .hb-add-section-point { width: calc(100% - 20px) !important; margin: 18px auto 24px !important; }
    .hb-add-section-point button { min-height: 66px !important; border-radius: 10px !important; }
    .hb-section-type-grid { grid-template-columns: 1fr !important; }
    .hb-swal-popup { width: calc(100vw - 14px) !important; border-radius: 12px !important; }
    .hb-swal-head { min-height: 64px !important; padding: 11px 12px 11px 48px !important; }
    .hb-swal-head__icon { width: 34px !important; height: 34px !important; }
    .hb-composer-body { padding: 12px !important; }
    .hb-swal-foot { align-items: stretch !important; flex-direction: column !important; padding: 9px 12px !important; }
    .hb-swal-actions { width: 100%; }
    .hb-swal-actions button { flex: 1; }
    .hb-form-row { grid-template-columns: 1fr !important; }
}

/* ============================================================
   Homepage Builder v6 — Daisy form fidelity + fast drag path
   ============================================================ */

/* SweetAlert action row: one baseline, one height, no theme leakage. */
.hb-swal-foot {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.hb-swal-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    direction: rtl !important;
    line-height: 1 !important;
}
.hb-swal-actions .hb-modal-cancel,
.hb-swal-actions .hb-modal-apply {
    box-sizing: border-box !important;
    width: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    gap: 7px !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: none !important;
}
.hb-swal-actions .hb-modal-cancel { min-width: 82px !important; }
.hb-swal-actions .hb-modal-apply { min-width: 118px !important; }
.hb-swal-actions .hb-modal-apply .hb-check-icon {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.25 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}
.hb-swal-actions button:disabled {
    opacity: .62 !important;
    cursor: wait !important;
}

/* DaisyUI-style native checkbox. The actual <input> is the visual control. */
.hb-picker-item > input[type="checkbox"].hb-daisy-checkbox {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: inline-grid !important;
    place-content: center !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #a6adbb !important;
    border-radius: 5px !important;
    background-color: #fff !important;
    background-image: none !important;
    color: #fff !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(31, 41, 55, .04) !important;
    outline: none !important;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease, transform .08s ease !important;
    color-scheme: light !important;
}
.hb-picker-item > input[type="checkbox"].hb-daisy-checkbox:hover {
    border-color: #6b7280 !important;
}
.hb-picker-item > input[type="checkbox"].hb-daisy-checkbox:focus-visible {
    border-color: var(--hb-daisy-primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15) !important;
}
.hb-picker-item > input[type="checkbox"].hb-daisy-checkbox:checked {
    border-color: var(--hb-daisy-primary) !important;
    background-color: var(--hb-daisy-primary) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.1 4.1L19 6.7'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
}
.hb-picker-item > input[type="checkbox"].hb-daisy-checkbox:active { transform: scale(.94) !important; }
.hb-picker-item > input[type="checkbox"].hb-daisy-checkbox:disabled {
    border-color: #d4d4d8 !important;
    background-color: #f4f4f5 !important;
    opacity: .62 !important;
    cursor: not-allowed !important;
}
.hb-picker-item__text {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.7 !important;
}
/* Old synthetic check node is no longer emitted; keep it inert if cached markup exists. */
.hb-picker-item > .hb-option-check { display: none !important; }

/* Drag 2.0: overlay marker never enters storefront flow, so pointermove causes no section reflow. */
.hb-drop-indicator--overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    z-index: 13018 !important;
    height: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    will-change: transform !important;
    contain: layout style paint !important;
}
.hb-drop-indicator--overlay::before {
    inset-inline: 8px !important;
    top: -1px !important;
    height: 2px !important;
}
.hb-drop-indicator--overlay span,
.hb-drop-indicator--overlay::after {
    top: -5px !important;
    width: 10px !important;
    height: 10px !important;
}
.hb-drop-indicator--overlay span { right: 3px !important; }
.hb-drop-indicator--overlay::after { left: 3px !important; }
.hb-drag-ghost {
    contain: layout style paint !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
}
.hb-dragging-page [data-home-layout-root].hb-editing > [data-home-section] {
    transition: none !important;
}
.hb-dragging-page [data-home-layout-root].hb-editing > [data-home-section].hb-drag-source {
    opacity: .48 !important;
    filter: none !important;
}
.hb-dragging-page .hb-section-toolbar { pointer-events: none !important; }
.hb-dragging-page .hb-drag-handle.is-dragging { pointer-events: auto !important; }

@media (max-width: 767px) {
    .hb-swal-actions { width: 100% !important; }
    .hb-swal-actions .hb-modal-cancel,
    .hb-swal-actions .hb-modal-apply { flex: 1 1 0 !important; min-width: 0 !important; }
}

/* Builder v7 — system Hero side-banner controls */
.hb-hero-side-toggle {
    display: flex !important;
    align-items: flex-start !important;
    gap: 11px !important;
    padding: 13px 14px !important;
    border: 1px solid #d9dde5 !important;
    border-radius: 9px !important;
    background: #f8f9fb !important;
    color: #20242b !important;
    cursor: pointer !important;
}
.hb-hero-side-toggle > span {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
    text-align: right !important;
}
.hb-hero-side-toggle strong { font-size: 13px !important; font-weight: 750 !important; color: #20242b !important; }
.hb-hero-side-toggle small { font-size: 11px !important; line-height: 1.75 !important; color: #6b7280 !important; }
.hb-hero-side-toggle > input[type="checkbox"].hb-daisy-checkbox {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    opacity: 1 !important;
    display: inline-grid !important;
    place-content: center !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    margin: 1px 0 0 !important;
    padding: 0 !important;
    border: 1px solid #a6adbb !important;
    border-radius: 5px !important;
    background: #fff !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(31,41,55,.04) !important;
    color-scheme: light !important;
}
.hb-hero-side-toggle > input[type="checkbox"].hb-daisy-checkbox:checked {
    border-color: var(--hb-daisy-primary) !important;
    background-color: var(--hb-daisy-primary) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.1 4.1L19 6.7'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
}
.hb-hero-side-toggle > input[type="checkbox"].hb-daisy-checkbox:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
}
.hb-hero-side-fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    transition: opacity .15s ease !important;
}
.hb-hero-side-fields.is-disabled { opacity: .45 !important; }
.hb-hero-side-fields .hb-form-field { margin: 0 !important; }
@media (max-width: 640px) {
    .hb-hero-side-fields { grid-template-columns: 1fr !important; }
}