.puck-app-shell {
--puck-admin-offset: 56px;
--puck-workspace-offset: 44px;
--puck-bottom-offset: 36px;
--puck-rail-width: 72px;
--puck-user-left-side-bar-width: clamp(170px, 14vw, 200px);
--puck-ui-bg: #f5f7fa;
--puck-surface: #ffffff;
--puck-surface-soft: #f8fafc;
--puck-border-soft: #e6ebf2;
--puck-divider-soft: #dce5ef;
--puck-icon: #415166;
--puck-icon-strong: #243447;
--puck-active-bg: #dbeafe;
--puck-active-bg-strong: #e8f1ff;
--puck-active-icon: #234c84;
--puck-danger: #d94b4b;
--puck-shadow-soft: 0 8px 24px rgba(20, 35, 60, 0.08);
--puck-shadow-float: 0 14px 34px rgba(20, 35, 60, 0.12);
height: 100%;
overflow: hidden;
}
body {
background: #f5f7fa;
}
.customer-editor-body .puck-app-shell {
--puck-admin-offset: 0px;
--puck-workspace-offset: 48px;
}
.runtime-customer-editor .puck-app-shell {
--puck-admin-offset: 0px;
--puck-workspace-offset: 48px;
}
.puck-app-shell.puck-left-panel-menu-settings {
--puck-user-left-side-bar-width: clamp(170px, 14vw, 200px);
}
.puck-app-shell.puck-left-panel-page-settings {
--puck-user-left-side-bar-width: clamp(170px, 14vw, 200px);
}

.puck-app-shell.puck-left-panel-styles [class*="_Sidebar--left_"] {
width: clamp(300px, 24vw, 360px) !important;
min-width: clamp(300px, 24vw, 360px) !important;
max-width: clamp(300px, 24vw, 360px) !important;
}
.puck-app-shell.puck-left-panel-styles [class*="_Sidebar--left_"] .puck-theme-panel {
width: 100%;
min-width: 0;
box-sizing: border-box;
}

.puck-app-shell [class*="_Puck_"] {
height: 100%;
}

.puck-app-shell [class*="_PuckLayout_"] {
height: 100% !important;
}

.puck-app-shell [class*="_PuckLayout-inner_"] {
height: 100% !important;
grid-template-rows: min-content 1fr !important;
--puck-user-left-side-bar-width: 0px !important;
transform: translateZ(0) !important;
position: relative !important;
}

.puck-app-shell [class*="_PuckPluginTab-body_"] {
overflow-y: auto !important;
padding: 14px 14px 18px !important;
scrollbar-width: thin;
}

.puck-app-shell [class*="_Sidebar_"] {
min-height: 0 !important;
}
.puck-app-shell [class*="_PuckLayout-nav_"] {
margin-top: var(--puck-workspace-offset) !important;
height: calc(100% - var(--puck-workspace-offset)) !important;
box-sizing: border-box;
opacity: 0 !important;
pointer-events: none !important;
border-right: none !important;
background: transparent !important;
}
.puck-app-shell [class*="_Sidebar--left_"] {
position: absolute !important;
top: var(--puck-workspace-offset) !important;
left: 0 !important;
height: calc(100% - var(--puck-workspace-offset)) !important;
width: 185px !important;
min-width: 185px !important;
max-width: 185px !important;
box-sizing: border-box !important;
background: #ffffff !important;
border-inline-end: 1px solid #e5e7eb !important;
overflow: hidden !important;
isolation: isolate !important;
box-shadow: 12px 0 28px rgba(15, 23, 42, 0.08) !important;
z-index: 1200 !important;
}
.puck-app-shell.puck-left-panel-outline [class*="_Sidebar--left_"] {
width: 240px !important;
min-width: 240px !important;
max-width: 240px !important;
}

.puck-app-shell [class*="_Sidebar--right_"] {
margin-top: var(--puck-workspace-offset) !important;
height: calc(100% - var(--puck-workspace-offset)) !important;
box-sizing: border-box;
display: none !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
}
.puck-app-shell [class*="_Sidebar--left_"] [class*="_PuckPluginTab_"] {
height: 100%;
box-sizing: border-box;
}
.puck-app-shell [class*="_Sidebar--left_"] [class*="_PuckPluginTab-body_"] {
height: 100%;
border: none !important;
background: #ffffff !important;
box-shadow: none !important;
overflow-y: auto !important;
color: #1a2840 !important;
position: relative !important;
isolation: isolate !important;
z-index: 1 !important;
}
.puck-app-shell [class*="_Sidebar--left_"] [class*="_ComponentList_"] {
color: #1a2840 !important;
}
.puck-app-shell [class*="_Sidebar--left_"] [class*="_ComponentList_"] * {
color: #1a2840 !important;
}
.puck-app-shell [class*="_Sidebar--left_"] [class*="_SidebarSection-title_"] {
background: rgba(255, 255, 255, 0.985) !important;
border-top: 0 !important;
border-bottom: 1px solid rgba(214, 221, 234, 0.72) !important;
padding: 14px 18px 12px !important;
}
.puck-app-shell [class*="_Sidebar--left_"] [class*="_SidebarSection-content_"] {
padding: 0 0 10px !important;
}
.puck-app-shell [class*="_Sidebar--left_"] [class*="_ComponentList-title_"] {
border-radius: 16px !important;
}
.puck-app-shell [class*="_Sidebar--left_"] [class*="_Nav-list_"] {
padding-top: 18px !important;
}

.puck-app-shell [class*="_PuckCanvas_"]:not([class*="_PuckCanvas-inner_"]):not([class*="_PuckCanvas-root_"]) {
min-height: 0 !important;
isolation: isolate !important;
z-index: 1 !important;
scroll-behavior: smooth !important;
}
.puck-app-state {
min-height: 60vh;
display: grid;
place-items: center;
text-align: center;
}
.puck-app-state-error {
color: #c43f3f;
}
.puck-header-actions-custom {
display: flex;
align-items: center;
gap: 10px;
}
.puck-status-badge {
display: inline-flex;
align-items: center;
justify-content: center;

min-height: 40px;
padding: 0 14px;
border-radius: 14px;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.02em;
white-space: nowrap;
cursor: pointer;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.puck-status-badge:hover,
.puck-status-badge:focus-visible {
outline: none;
}
.puck-status-badge-draft {
border: 1px solid rgba(245, 158, 11, 0.28);
background: linear-gradient(180deg, rgba(255, 247, 237, 0.98) 0%, rgba(255, 237, 213, 0.98) 100%);
color: #9a3412;
box-shadow: 0 8px 18px rgba(154, 52, 18, 0.08);
}
.puck-status-badge-draft:hover,
.puck-status-badge-draft:focus-visible {
box-shadow: 0 10px 20px rgba(154, 52, 18, 0.14);
}
.puck-status-badge-draft::before {
content: "";
width: 8px;
height: 8px;
margin-right: 8px;
border-radius: 999px;
background: #f59e0b;
box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
}
.puck-status-badge-live {
border: 1px solid rgba(34, 197, 94, 0.26);
background: linear-gradient(180deg, rgba(240, 253, 244, 0.98) 0%, rgba(220, 252, 231, 0.98) 100%);
color: #166534;
box-shadow: 0 8px 18px rgba(22, 101, 52, 0.08);
}
.puck-status-badge-live:hover,
.puck-status-badge-live:focus-visible {
box-shadow: 0 10px 20px rgba(22, 101, 52, 0.14);
}
.puck-status-badge-live::before {
content: "";
width: 8px;
height: 8px;
margin-right: 8px;
border-radius: 999px;
background: #22c55e;
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
}
.puck-status-badge-toggling {
opacity: 0.6;
cursor: wait;
pointer-events: none;
}
.puck-header-side-btn {
height: 36px;
padding: 0 14px;
border: 1px solid rgba(198, 212, 235, 0.9);
border-radius: 8px;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
color: #233650;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.puck-header-side-btn:hover {
background: rgba(255, 255, 255, 0.82);
border-color: rgba(150, 170, 205, 0.95);
}
.puck-header-side-btn.is-active-view,
.puck-header-icon-btn.analytics-active,
.puck-header-icon-btn.is-active-view {
background: #e8f2ff;
color: #1d4f8f;
border-color: rgba(147, 197, 253, 0.85);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.76), 0 8px 18px rgba(30, 80, 143, 0.10);
}
.puck-header-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 36px;
border: 1px solid rgba(198, 212, 235, 0.9);
border-radius: 8px;
background: rgba(255, 255, 255, 0.72);
color: #233650;
cursor: pointer;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.puck-header-icon-btn:hover,
.puck-header-icon-btn:focus-visible {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(150, 170, 205, 0.95);
color: #1d4f8f;
outline: none;
}
.puck-header-icon-btn svg {
width: 20px;
height: 20px;
}

.puck-header-content-add-btn,
.puck-header-chat-btn {
color: #1a4a6b;
border-color: rgba(26, 74, 107, 0.38);
background: rgba(26, 74, 107, 0.07);
}
.puck-header-content-add-btn:hover,
.puck-header-content-add-btn:focus-visible,
.puck-header-chat-btn:hover,
.puck-header-chat-btn:focus-visible {
color: #143b56;
border-color: rgba(26, 74, 107, 0.6);
background: rgba(26, 74, 107, 0.13);
}

.puck-header-divider {
width: 1px;
height: 24px;
background: rgba(26, 74, 107, 0.22);
margin: 0 8px;
align-self: center;
flex-shrink: 0;
}
.puck-inline-block-controls {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border: 1px solid rgba(198, 212, 235, 0.9);
border-radius: 12px;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
}
.puck-inline-block-label {
font-size: 0.78rem;
font-weight: 700;
color: #233650;
}
.puck-inline-block-button {
min-height: 30px;
padding: 0 10px;
border: 1px solid rgba(171, 190, 219, 0.6);
border-radius: 8px;
background: #fff;
color: #162a45;
cursor: pointer;
}
.puck-inline-block-select {
min-height: 30px;
padding: 0 8px;
border: 1px solid rgba(171, 190, 219, 0.6);
border-radius: 8px;
background: #fff;
color: #162a45;
}
.puck-legacy-sidebar {
display: grid;
gap: 18px;
padding: 16px;
}
.puck-legacy-sidebar-section {
display: grid;
gap: 12px;
}
.puck-legacy-sidebar-section h3 {
margin: 0;
font-size: 0.95rem;
color: #233650;
}
.puck-live-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 40px;
height: 40px;
padding: 0 14px;
border-radius: 12px;
color: #516278;
text-decoration: none;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(198, 212, 235, 0.9);
transition: background-color 120ms ease, color 120ms ease;
}
.puck-live-link:hover,
.puck-live-link:focus-visible {
background: rgba(255, 255, 255, 0.82);
color: #2f56ea;
outline: none;
}
.puck-publish-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 40px;
height: 40px;
padding: 0 14px;
border: 0;
border-radius: 12px;
background: #2f56ea;
color: #fff;
cursor: pointer;
transition: background-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.puck-publish-button:hover,
.puck-publish-button:focus-visible {
background: #2445c3;
box-shadow: 0 0 0 3px rgba(64, 103, 255, 0.14);
outline: none;
}
.puck-publish-button:disabled {
opacity: 0.72;
cursor: progress;
}
.puck-publish-button.is-published {
box-shadow: 0 0 0 3px rgba(64, 103, 255, 0.18), 0 0 16px rgba(64, 103, 255, 0.24);
}
.puck-header-action-label {
font-size: 0.86rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
.puck-rail-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 12px;
transition: background 140ms ease, box-shadow 140ms ease;
}
.puck-theme-panel {
display: grid;
gap: 14px;
padding: 8px 12px 12px;
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(220, 227, 238, 0.82);
border-radius: 18px;
}
.puck-theme-panel-header h2 {
margin: 0 0 6px;
font-size: 1rem;
}
.puck-theme-panel-header p {
margin: 0;
color: #61708a;
font-size: 0.95rem;
}
.puck-theme-panel-header-compact {
margin-top: 1.4rem;
}
.puck-theme-panel-divider {
height: 1px;
margin: 1.4rem 0;
background: rgba(148, 163, 184, 0.18);
}
.puck-theme-panel-list {
display: grid;
gap: 12px;
}
.puck-theme-panel-note {
margin: 0 0 12px;
color: #61708a;
font-size: 0.9rem;
line-height: 1.4;
}
.puck-theme-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 12px 14px;
border: none;
border-radius: 10px;
background: transparent;
}
.puck-theme-card.is-active {
background: #f0f4ff;
}
.puck-theme-card-copy h3 {
margin: 0;
font-size: 1rem;
cursor: default;
}
.puck-theme-card-copy small {
display: block;
margin-top: 4px;
color: #61708a;
font-size: 0.8rem;
}
.puck-theme-card-action {
border: 1px solid #d1d5db;
border-radius: 6px;
background: #f3f4f6;
color: #374151;
padding: 8px 14px;
font-size: 0.85rem;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease;
}
.puck-theme-card-action:hover,
.puck-theme-card-action:focus-visible {
background: #e5e7eb;
border-color: #9ca3af;
outline: none;
}
.puck-theme-card-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.puck-theme-card-action.is-secondary {
background: #fff;
}
.puck-theme-card-action:disabled {
cursor: not-allowed;
opacity: 0.55;
}
.puck-theme-card-current {
margin-bottom: 2px;
}
.puck-dialog-backdrop {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(17, 24, 39, 0.46);
}
.puck-dialog {
width: min(520px, 100%);
border-radius: 14px;
border: 1px solid rgba(209, 213, 219, 0.95);
background: #fff;
box-shadow: 0 30px 60px rgba(15, 23, 42, 0.24);
}
.puck-dialog-header,
.puck-dialog-body,
.puck-dialog-actions {
padding: 18px 20px;
}
.puck-dialog-header {
border-bottom: 1px solid #e5e7eb;
}
.puck-dialog-header h3 {
margin: 0;
font-size: 1.1rem;
}
.puck-dialog-body {
display: grid;
gap: 10px;
color: #374151;
line-height: 1.5;
}
.puck-dialog-body p {
margin: 0;
}
.puck-dialog-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
border-top: 1px solid #e5e7eb;
}
.puck-theme-panel-header-compact h3 {
margin: 0 0 6px;
font-size: 1rem;
}
.puck-theme-panel-header-compact p {
margin: 0;
color: #61708a;
font-size: 0.92rem;
}
.puck-palette-swatches {
display: flex;
gap: 6px;
margin-top: 10px;
}
.puck-palette-swatches span {
width: 18px;
height: 18px;
border-radius: 999px;
border: 1px solid rgba(17, 35, 64, 0.12);
}
.puck-page-settings {
display: grid;
gap: 14px;
}
.puck-panel-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0 2px;
}
.puck-panel-tab {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 38px;
padding: 0 14px;
border: 1px solid rgba(171, 190, 219, 0.42);
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
color: #516278;
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.puck-panel-tab:hover,
.puck-panel-tab:focus-visible {
border-color: rgba(64, 103, 255, 0.4);
color: #2445c3;
background: #ffffff;
outline: none;
box-shadow: 0 8px 18px rgba(64, 103, 255, 0.1);
}
.puck-panel-tab.is-active {
background: linear-gradient(180deg, #ffffff 0%, #eef3ff 100%);
border-color: rgba(64, 103, 255, 0.36);
color: #2445c3;
box-shadow: 0 10px 20px rgba(64, 103, 255, 0.14);
}
.puck-panel-tab-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
font-size: 0.82rem;
}
.puck-theme-field {
display: grid;
gap: 8px;
}
.puck-theme-field span {
font-size: 0.88rem;
font-weight: 700;
color: #233650;
}
.puck-theme-field input,
.puck-theme-field select {
width: 100%;
min-height: 44px;
padding: 0 14px;
border: 1px solid rgba(171, 190, 219, 0.5);
border-radius: 14px;
background: #fff;
color: #162a45;
}
.puck-menu-builder-launch {
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
margin-top: 6px;
padding: 16px;
border: 1px solid rgba(171, 190, 219, 0.5);
border-radius: 18px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.92));
}
.puck-menu-builder-launch-card {
display: grid;
gap: 10px;
}
.puck-menu-builder-launch-card p {
margin: 6px 0 0;
color: #61708a;
font-size: 0.9rem;
line-height: 1.5;
}
.puck-menu-builder-launch strong {
display: block;
margin-bottom: 4px;
font-size: 0.95rem;
color: #162a45;
}
.puck-menu-builder-launch p {
margin: 0;
color: #61708a;
font-size: 0.88rem;
line-height: 1.45;
}
.puck-menu-builder-launch-button {
border: 0;
border-radius: 999px;
padding: 12px 16px;
background: #4067ff;
color: #fff;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.puck-menu-builder-launch-button:hover,
.puck-menu-builder-launch-button:focus-visible {
background: #2445c3;
outline: none;
}
.puck-menu-builder-modal ~ .puck-image-canvas-overlay,
.puck-menu-builder-modal ~ * .puck-image-canvas-overlay {
display: none !important;
}

[data-puck-overlay] ._ActionBar_1nmyk_1,
[data-puck-overlay-portal] ._ActionBar_1nmyk_1 {
display: none !important;
}

._DraggableComponent_1vaqy_1 {
--overlay-background: transparent !important;
}
._DraggableComponent-overlay_1vaqy_12 {
outline: none !important;
}
._DraggableComponent--isSelected_1vaqy_57 > ._DraggableComponent-overlayWrapper_1vaqy_12 > ._DraggableComponent-overlay_1vaqy_12 {
outline: none !important;
}
.puck-menu-builder-modal {
position: fixed;
top: 56px;
right: 0;
bottom: 0;
left: 0;
z-index: 9020;
display: grid;
place-items: center;
padding: 24px;
}
.puck-menu-builder-modal-backdrop {
position: absolute;
inset: 0;
border: 0;
background: rgba(15, 25, 40, 0.46);
backdrop-filter: blur(8px);
}
.puck-menu-builder-modal-panel {
position: relative;
z-index: 1;
width: min(1180px, calc(100vw - 24px));
height: min(820px, calc(100dvh - 84px));
max-height: min(820px, calc(100dvh - 84px));
overflow: hidden;
padding: 20px 22px 18px;
border-radius: 28px;
border: 1px solid rgba(171, 190, 219, 0.38);
background: rgba(249, 251, 255, 0.98);
box-shadow: 0 24px 70px rgba(17, 35, 64, 0.22);
display: flex;
flex-direction: column;
}
.puck-page-settings-modal-panel {
background:
linear-gradient(180deg, rgba(249, 251, 255, 0.99) 0%, rgba(247, 249, 253, 0.98) 58%, rgba(240, 244, 250, 0.98) 100%);
width: min(1120px, calc(100vw - 40px));
height: min(860px, calc(100vh - 40px));
min-height: 320px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.puck-page-settings-modal-panel .puck-theme-panel {
overflow: hidden;
flex: 1 1 0;
min-height: 0;
}
.puck-logo-builder-modal-panel {
width: min(680px, calc(100vw - 24px));
max-height: min(calc(100dvh - 80px), 700px);
padding: 18px 18px 16px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.puck-logo-builder-modal-panel .puck-theme-panel {
overflow-y: auto;
flex: 1;
min-height: 0;
}
.puck-logo-builder-fields {
display: grid;
gap: 10px;
max-width: 500px;
}
.puck-logo-builder-fields .puck-theme-panel-header-compact {
gap: 4px;
margin-bottom: 2px;
}
.puck-logo-builder-fields .puck-theme-panel-header-compact p {
font-size: 0.92rem;
line-height: 1.45;
}
.puck-logo-builder-fields .puck-theme-field {
gap: 6px;
}
.puck-logo-builder-fields .puck-theme-field small {
font-size: 0.8rem;
line-height: 1.4;
}
.puck-logo-builder-fields .puck-page-logo-field .puck-image-upload-card,
.puck-logo-builder-fields .puck-page-logo-field .puck-image-upload-shell {
padding: 10px;
}
.puck-logo-builder-fields .puck-page-logo-field img {
max-height: 72px;
}
.puck-footer-builder-modal-panel {
width: min(980px, calc(100vw - 24px));
max-height: min(calc(100dvh - 84px), 820px);
}
.puck-footer-builder-modal-panel .puck-footer-builder-scroll {
overflow-y: auto;
flex: 1;
min-height: 0;
padding-right: 4px;
}
.puck-footer-builder-modal-panel .puck-menu-builder-modal-footer {
display: flex;
justify-content: flex-end;
padding-top: 14px;
margin-top: 6px;
border-top: 1px solid rgba(171, 190, 219, 0.32);
}

.module-footer-editor-clickable {
position: relative;
cursor: pointer;
}
.module-footer-editor-clickable:hover {
outline: 2px solid rgba(60, 120, 220, 0.4);
outline-offset: -2px;
}
.module-footer-editor-empty {
cursor: pointer;
min-height: 104px;
display: grid;
place-items: center;
border-top: 1px dashed rgba(120, 140, 170, 0.5);
background: rgba(120, 140, 170, 0.06);
}
.puck-footer-edit-badge {
position: absolute;
top: 10px;
right: 14px;
z-index: 3;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
padding: 6px 13px;
border: 1px solid rgba(120, 140, 170, 0.45);
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: #1d3050;
cursor: pointer;
box-shadow: 0 6px 18px rgba(20, 40, 70, 0.14);
}
.puck-footer-edit-badge span {
font-size: 0.82rem;
font-weight: 700;
line-height: 1.1;
}
.puck-footer-edit-badge small {
font-size: 0.68rem;
color: #5a6b85;
}
.module-footer-editor-empty .puck-footer-edit-badge {
position: static;
}
.puck-menu-builder-modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 10px;
}
.puck-menu-builder-modal-head h2 {
margin: 0;
font-size: 1.4rem;
}
.puck-menu-builder-modal-head p {
margin: 0;
color: #61708a;
}
.puck-menu-builder-modal-close {
border: 0;
border-radius: 999px;
background: #162a45;
color: #fff;
padding: 10px 16px;
font-weight: 700;
cursor: pointer;
}
.puck-menu-builder-modal-close:hover,
.puck-menu-builder-modal-close:focus-visible {
background: #0e1d31;
outline: none;
}
.puck-menu-builder-modal-panel:not(.puck-page-settings-modal-panel) .puck-menu-builder-modal-close {
display: none;
}
.admin-template-save-button {
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: #fff7ea;
font: inherit;
font-weight: 700;
padding: 8px 14px;
cursor: pointer;
transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.admin-template-save-button:hover,
.admin-template-save-button:focus-visible {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.35);
outline: none;
transform: translateY(-1px);
}
.puck-admin-template-modal {
position: fixed;
inset: 0;
z-index: 12000;
display: grid;
place-items: center;
padding: 24px;
}
.puck-admin-template-backdrop {
position: absolute;
inset: 0;
border: 0;
background: rgba(13, 24, 39, 0.45);
backdrop-filter: blur(8px);
cursor: default;
}
.puck-admin-template-panel {
position: relative;
z-index: 1;
width: min(560px, calc(100vw - 32px));
border: 1px solid rgba(174, 191, 215, 0.72);
border-radius: 22px;
background: #fbfdff;
box-shadow: 0 26px 80px rgba(16, 30, 54, 0.24);
padding: 22px;
display: grid;
gap: 16px;
color: #16233a;
}
.puck-admin-template-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.puck-admin-template-head h2 {
margin: 0;
font-size: 1.28rem;
line-height: 1.15;
}
.puck-admin-template-head p {
margin: 6px 0 0;
color: #65738a;
}
.puck-admin-template-close {
border: 0;
border-radius: 999px;
background: #eaf1fb;
color: #20324c;
font-weight: 800;
padding: 8px 12px;
cursor: pointer;
}
.puck-admin-template-field {
display: grid;
gap: 7px;
font-weight: 800;
}
.puck-admin-template-field select {
width: 100%;
border: 1px solid #bfd0e5;
border-radius: 14px;
background: #fff;
color: #15233b;
font: inherit;
padding: 12px 14px;
}
.puck-admin-template-field input {
width: 100%;
box-sizing: border-box;
border: 1px solid #bfd0e5;
border-radius: 14px;
background: #fff;
color: #15233b;
font: inherit;
padding: 12px 14px;
}
.puck-admin-template-mode {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
border-radius: 16px;
background: #edf3fb;
padding: 5px;
}
.puck-admin-template-mode button {
border: 0;
border-radius: 12px;
background: transparent;
color: #42536d;
font: inherit;
font-weight: 850;
padding: 11px 12px;
cursor: pointer;
}
.puck-admin-template-mode button.is-active {
background: #fff;
color: #123965;
box-shadow: 0 8px 22px rgba(45, 81, 128, 0.13);
}
.puck-admin-template-new-fields {
display: grid;
gap: 13px;
}
.puck-admin-template-tagrow {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.puck-admin-template-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 11px;
border: 1px solid #cfd9ea;
border-radius: 999px;
background: #fff;
font-size: 13px;
color: #1b2a41;
cursor: pointer;
}
.puck-admin-template-chip.is-on {
background: #1a4a6b;
border-color: #1a4a6b;
color: #fff;
}
.puck-admin-template-chip input {
margin: 0;
}
.puck-admin-template-card {
display: grid;
gap: 3px;
border: 1px solid #d7e4f3;
border-radius: 16px;
background: #f3f7fc;
padding: 14px;
}
.puck-admin-template-card span {
color: #60708a;
font-size: 0.9rem;
}
.puck-admin-template-warning {
border: 1px solid #f3d59b;
border-radius: 16px;
background: #fff8e7;
color: #6d4a08;
padding: 13px 14px;
line-height: 1.4;
}
.puck-admin-template-confirm {
display: flex;
gap: 10px;
align-items: center;
color: #20324c;
font-weight: 750;
}
.puck-admin-template-confirm input {
width: 18px;
height: 18px;
accent-color: #2f76d2;
}
.puck-admin-template-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.puck-admin-template-secondary,
.puck-admin-template-primary {
border-radius: 999px;
font: inherit;
font-weight: 850;
padding: 11px 16px;
cursor: pointer;
}
.puck-admin-template-secondary {
border: 1px solid #c8d7ea;
background: #fff;
color: #263852;
}
.puck-admin-template-primary {
border: 1px solid #1f63bd;
background: #256fce;
color: #fff;
}
.puck-admin-template-primary:disabled,
.puck-admin-template-secondary:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.puck-admin-template-message {
border-radius: 14px;
padding: 11px 13px;
font-weight: 800;
}
.puck-admin-template-message.is-error {
background: #fff1f1;
color: #9b2020;
border: 1px solid #ffc8c8;
}
.puck-admin-template-message.is-success {
background: #ebfff3;
color: #126435;
border: 1px solid #bce8cc;
}
.puck-menu-builder {
display: flex;
flex-direction: column;
gap: 0;
padding: 12px 0 0;
min-height: 0;
flex: 1 1 0;
overflow: hidden;
}
.puck-menu-tab-scroll {
flex: 1 1 0;
min-height: 0;
overflow-y: auto;
padding: 14px 0 12px;
scrollbar-width: thin;
}
.puck-menu-tab-pane {
display: grid;
gap: 16px;
align-content: start;
padding: 2px 0;
}
.puck-menu-builder-static {
display: grid;
gap: 16px;
flex: 0 0 auto;
}
.puck-menu-builder-scroll {
min-height: 0;
overflow-y: auto;
padding-right: 4px;
}
.puck-menu-builder-head {
display: grid;
gap: 10px;
}
.puck-menu-builder-head h3,
.puck-menu-style-head h4 {
margin: 0;
font-size: 1.05rem;
}
.puck-menu-builder-head p,
.puck-menu-style-head p {
margin: 0;
color: #61708a;
font-size: 0.94rem;
}
.puck-menu-builder-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.puck-menu-builder-add {
min-height: 40px;
padding: 0 14px;
border: 0;
border-radius: 999px;
background: #4067ff;
color: #fff;
font-weight: 700;
cursor: pointer;
}
.puck-menu-builder-add-secondary {
background: #e8eef8;
color: #16314f;
}
.puck-menu-builder-add-full {
width: 100%;
margin-top: 8px;
}
.puck-menu-section-picklist {
display: grid;
gap: 10px;
}
.puck-menu-section-picklist-label {
font-size: 0.85rem;
font-weight: 700;
color: #233650;
}
.puck-menu-section-picklist-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.puck-menu-section-list {
display: grid;
gap: 8px;
}
.puck-menu-section-chip {
display: grid;
gap: 2px;
align-content: start;
min-width: 140px;
max-width: 100%;
padding: 10px 12px;
border: 1px solid rgba(171, 190, 219, 0.55);
border-radius: 14px;
background: #fff;
color: #162a45;
cursor: pointer;
text-align: left;
}
.puck-menu-section-row {
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 10px;
padding: 12px 14px;
}
.puck-menu-section-row input {
margin-top: 4px;
width: 18px;
height: 18px;
accent-color: #4067ff;
}
.puck-menu-section-chip-copy {
display: grid;
gap: 3px;
min-width: 0;
}
.puck-menu-section-chip strong {
font-size: 0.92rem;
}
.puck-menu-section-chip span {
color: #61708a;
font-size: 0.78rem;
}
.puck-menu-section-chip-copy strong {
font-size: 0.92rem;
line-height: 1.35;
}
.puck-menu-section-chip-copy small {
color: #61708a;
font-size: 0.78rem;
}
.puck-menu-section-row.is-selected {
border-color: rgba(64, 103, 255, 0.45);
background: rgba(64, 103, 255, 0.06);
}
.puck-menu-item-list {
display: grid;
gap: 12px;
}
.puck-menu-item-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 12px;
align-items: start;
padding: 14px;
border: 1px solid rgba(171, 190, 219, 0.42);
border-radius: 18px;
background: rgba(255, 255, 255, 0.92);
}
.puck-menu-item-row[open] {
border-color: rgba(64, 103, 255, 0.36);
box-shadow: 0 0 0 3px rgba(64, 103, 255, 0.06);
}
.puck-menu-item-main {
display: grid;
gap: 10px;
}
.puck-menu-item-summary {
list-style: none;
}
.puck-menu-item-drag,
.puck-menu-item-remove {
border: 0;
background: transparent;
color: #61708a;
cursor: pointer;
}
.puck-menu-item-drag {
display: grid;
gap: 3px;
align-self: center;
width: 28px;
padding: 6px 0;
}
.puck-menu-item-drag span {
width: 18px;
height: 2px;
border-radius: 999px;
background: currentColor;
}
.puck-menu-item-remove {
align-self: start;
min-height: 36px;
padding: 0 8px;
border-radius: 12px;
background: #eef3fb;
color: #233650;
}
.puck-menu-style-panel {
display: grid;
gap: 12px;
padding-top: 8px;
border-top: 1px solid rgba(171, 190, 219, 0.24);
}
.puck-menu-style-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.puck-menu-builder-grid {
display: grid;
grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.puck-menu-builder-grid-single {
grid-template-columns: minmax(0, 1fr);
}
.puck-menu-builder-grid-content {
grid-template-columns: minmax(320px, 0.92fr) minmax(420px, 1.08fr);
}
.puck-menu-builder-sidebar,
.puck-menu-builder-main {
display: grid;
gap: 16px;
}
.puck-menu-builder-sidebar {
position: sticky;
top: 0;
align-self: start;
}
.puck-menu-builder-library {
display: grid;
gap: 14px;
}
.puck-menu-builder-library-card,
.puck-menu-builder-structure,
.puck-menu-style-panel {
padding: 18px;
border: 1px solid rgba(171, 190, 219, 0.42);
border-radius: 22px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 18px 48px rgba(17, 35, 64, 0.06);
}
.puck-menu-builder-library-title h4,
.puck-menu-builder-structure .puck-menu-style-head h4,
.puck-menu-style-panel .puck-menu-style-head h4 {
margin: 0 0 6px;
font-size: 1rem;
}
.puck-menu-builder-library-title p,
.puck-menu-builder-structure .puck-menu-style-head p,
.puck-menu-style-panel .puck-menu-style-head p {
margin: 0 0 14px;
color: #61708a;
font-size: 0.9rem;
line-height: 1.45;
}
.puck-menu-builder-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 14px;
border: 1px solid rgba(171, 190, 219, 0.42);
border-radius: 16px;
background: rgba(255, 255, 255, 0.96);
min-height: 0;
}
.puck-menu-builder-top-compact {
padding: 10px 14px;
border-radius: 16px;
}
.puck-menu-builder-top > div {
display: grid;
gap: 2px;
}
.puck-menu-builder-top h3 {
margin: 0;
font-size: 1rem;
line-height: 1.2;
}
.puck-menu-builder-top p {
margin: 0;
color: #61708a;
font-size: 0.9rem;
line-height: 1.2;
}
.puck-menu-builder-save {
border: 0;
border-radius: 999px;
background: #4067ff;
color: #fff;
padding: 12px 16px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.puck-menu-builder-save:hover,
.puck-menu-builder-save:focus-visible {
background: #2445c3;
outline: none;
}
.puck-menu-name-field {
max-width: 420px;
}
.puck-menu-item-list {
display: grid;
gap: 12px;
}
.puck-menu-item-row {
margin: 0;
padding: 0;
border: 1px solid rgba(171, 190, 219, 0.42);
border-radius: 20px;
background: #fff;
overflow: hidden;
}
.puck-menu-item-summary {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
gap: 14px;
align-items: center;
padding: 16px 18px;
list-style: none;
cursor: pointer;
}
.puck-menu-item-summary::-webkit-details-marker {
display: none;
}
.puck-menu-item-summary-copy {
display: grid;
gap: 4px;
min-width: 0;
}
.puck-menu-item-summary-copy strong {
font-size: 0.98rem;
color: #162a45;
}
.puck-menu-item-summary-copy span {
color: #61708a;
font-size: 0.88rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.puck-menu-type-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
border-radius: 999px;
background: rgba(17, 35, 64, 0.08);
color: #233650;
font-size: 0.8rem;
font-weight: 700;
}
.puck-menu-type-badge.is-url {
background: rgba(17, 35, 64, 0.08);
color: #162a45;
}
.puck-menu-item-body {
padding: 0 18px 18px;
border-top: 1px solid rgba(171, 190, 219, 0.28);
background: linear-gradient(180deg, rgba(250, 252, 255, 0.92), rgba(255, 255, 255, 1));
}
.puck-menu-item-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
padding-top: 16px;
}
.puck-menu-item-grid .puck-theme-field:first-child {
grid-column: 1 / -1;
}
.puck-menu-item-note {
margin-top: 14px;
padding: 14px 16px;
border-radius: 16px;
background: rgba(64, 103, 255, 0.06);
color: #162a45;
}
.puck-menu-item-note strong {
display: block;
margin-bottom: 4px;
}
.puck-menu-item-note p,
.puck-menu-item-note span {
margin: 0;
color: #61708a;
font-size: 0.9rem;
line-height: 1.45;
}
.puck-menu-item-note span {
display: block;
margin-top: 6px;
color: #2f56ea;
}
.puck-menu-builder .puck-menu-section-picklist-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.puck-menu-builder .puck-menu-section-chip {
padding: 12px 14px;
min-height: 56px;
text-align: left;
border-radius: 16px;
}
.puck-menu-builder .puck-menu-section-chip strong {
display: block;
line-height: 1.35;
}
.puck-menu-builder-add,
.puck-menu-builder-save,
.puck-menu-builder-launch-button,
.puck-menu-builder-modal-close {
transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.puck-menu-builder-add:hover,
.puck-menu-builder-save:hover,
.puck-menu-builder-launch-button:hover,
.puck-menu-builder-modal-close:hover {
transform: translateY(-1px);
}
.puck-menu-builder-column {
display: grid;
gap: 16px;
}
.puck-menu-builder-intro {
display: grid;
gap: 4px;
}
.puck-menu-builder-intro h3 {
margin: 0;
font-size: 1.15rem;
}
.puck-menu-builder-intro p {
margin: 0;
color: #61708a;
font-size: 0.84rem;
line-height: 1.35;
}
.puck-menu-builder-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
padding-top: 6px;
flex: 0 0 auto;
}
.puck-menu-builder-cancel {
min-height: 44px;
padding: 0 18px;
border: 1px solid rgba(171, 190, 219, 0.56);
border-radius: 999px;
background: #fff;
color: #16314f;
font-weight: 700;
cursor: pointer;
}
.puck-menu-builder-cancel:hover,
.puck-menu-builder-cancel:focus-visible {
background: #f3f6fb;
outline: none;
}
.puck-menu-library-panel,
.puck-menu-structure-panel,
.puck-menu-preview-panel {
display: grid;
gap: 8px;
padding: 12px;
border: 1px solid rgba(171, 190, 219, 0.42);
border-radius: 18px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 12px 32px rgba(17, 35, 64, 0.05);
}
.puck-menu-panel-title h4 {
margin: 0 0 2px;
font-size: 0.96rem;
}
.puck-menu-panel-title p {
margin: 0;
color: #61708a;
font-size: 0.82rem;
line-height: 1.35;
}
.puck-menu-library-list {
display: grid;
gap: 8px;
}
.puck-menu-library-item {
display: grid;
gap: 2px;
padding: 10px 12px;
border: 1px solid rgba(171, 190, 219, 0.52);
border-radius: 14px;
background: #fff;
color: #162a45;
text-align: left;
cursor: grab;
}
.puck-menu-library-item:hover,
.puck-menu-library-item:focus-visible {
border-color: rgba(64, 103, 255, 0.38);
box-shadow: 0 0 0 3px rgba(64, 103, 255, 0.06);
transform: translateY(-1px);
outline: none;
}
.puck-menu-library-item strong {
font-size: 0.88rem;
line-height: 1.2;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.puck-menu-library-item span,
.puck-menu-library-item em {
font-style: normal;
color: #61708a;
font-size: 0.74rem;
line-height: 1.15;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.puck-menu-library-item em {
color: #2f56ea;
font-weight: 700;
}
.puck-menu-library-empty,
.puck-menu-empty-state {
padding: 16px;
border-radius: 16px;
background: rgba(64, 103, 255, 0.06);
color: #2f56ea;
font-weight: 600;
line-height: 1.5;
}
.puck-menu-drop-line {
height: 2px;
background: #4067ff;
border-radius: 2px;
margin: 2px 0;
pointer-events: none;
}
.puck-menu-empty-state.is-drop-target {
background: rgba(64, 103, 255, 0.14);
outline: 2px solid #4067ff;
}
.puck-menu-row.is-drop-into {
outline: 2px dashed #4067ff;
background: rgba(64, 103, 255, 0.05);
}
.puck-menu-row-drop-hint {
padding: 8px 12px;
font-size: 0.78rem;
color: #4067ff;
font-style: italic;
}
.puck-menu-row-children {
display: flex;
flex-direction: column;
gap: 4px;
padding: 6px 12px 10px 32px;
border-top: 1px solid rgba(0,0,0,0.06);
}
.puck-menu-row-child {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 4px 8px;
border-radius: 6px;
background: rgba(64, 103, 255, 0.06);
font-size: 0.8rem;
}
.puck-menu-row-child-label {
flex: 1;
font-weight: 500;
color: #1a1a2e;
}
.puck-menu-row-child-remove {
font-size: 0.72rem;
color: #888;
background: none;
border: none;
cursor: pointer;
padding: 2px 4px;
}
.puck-menu-row-child-remove:hover { color: #e53e3e; }
.puck-menu-name-field {
max-width: 520px;
}
.puck-menu-row-list {
display: grid;
gap: 8px;
}
.puck-menu-row {
display: grid;
gap: 0;
border: 1px solid rgba(171, 190, 219, 0.42);
border-radius: 16px;
background: #fff;
overflow: hidden;
}
.puck-menu-row.is-open {
border-color: rgba(64, 103, 255, 0.36);
box-shadow: 0 0 0 3px rgba(64, 103, 255, 0.06);
}
.puck-menu-row-head {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
gap: 8px;
align-items: center;
padding: 10px 12px;
}
.puck-menu-row-drag {
display: grid;
gap: 3px;
align-self: center;
width: 22px;
padding: 4px 0;
border: 0;
background: transparent;
color: #61708a;
cursor: grab;
}
.puck-menu-row-drag span {
width: 14px;
height: 2px;
border-radius: 999px;
background: currentColor;
}
.puck-menu-row-summary {
display: grid;
gap: 1px;
min-width: 0;
border: 0;
background: transparent;
color: #162a45;
text-align: left;
cursor: pointer;
}
.puck-menu-row-summary strong {
font-size: 0.88rem;
line-height: 1.2;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.puck-menu-row-summary span {
color: #61708a;
font-size: 0.72rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.puck-menu-row-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 8px;
border-radius: 999px;
background: rgba(64, 103, 255, 0.09);
color: #2f56ea;
font-size: 0.68rem;
font-weight: 700;
white-space: nowrap;
}
.puck-menu-row-badge.is-url {
background: rgba(17, 35, 64, 0.08);
color: #162a45;
}
.puck-menu-row-badge.is-page {
background: rgba(22, 120, 80, 0.1);
color: #116040;
}
.puck-menu-row-remove {
min-height: 36px;
padding: 0 10px;
border: 0;
border-radius: 12px;
background: #eef3fb;
color: #233650;
cursor: pointer;
}
.puck-menu-row-body {
padding: 0 16px 16px;
border-top: 1px solid rgba(171, 190, 219, 0.28);
background: linear-gradient(180deg, rgba(250, 252, 255, 0.92), rgba(255, 255, 255, 1));
}
.puck-menu-row-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
padding-top: 16px;
}
.puck-menu-row-grid .puck-theme-field:first-child {
grid-column: 1 / -1;
}
.puck-menu-row-note {
margin-top: 14px;
padding: 14px 16px;
border-radius: 16px;
background: rgba(64, 103, 255, 0.06);
}
.puck-menu-row-note strong {
display: block;
margin-bottom: 4px;
}
.puck-menu-row-note p {
margin: 0;
color: #61708a;
line-height: 1.5;
}
.puck-menu-preview-shell {
display: grid;
gap: 8px;
}
.puck-menu-live-preview {
display: grid;
gap: 6px;
}
.puck-menu-live-preview-label {
font-size: 0.82rem;
font-weight: 700;
color: #61708a;
}
.puck-menu-live-shell {
position: relative;
overflow: hidden;
border: 1px solid rgba(171, 190, 219, 0.36);
border-radius: 16px;
background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
min-height: 96px;
}
.puck-menu-live-shell.is-hero {
background: linear-gradient(180deg, rgba(88, 143, 226, 0.16), rgba(255,255,255,0.08)), linear-gradient(180deg, #82b0ea 0%, #dce9f8 52%, #f5efe3 100%);
}
.puck-menu-live-hero-fill {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(9, 21, 44, 0.18), rgba(9, 21, 44, 0.02)),
linear-gradient(180deg, rgba(88, 143, 226, 0.22), rgba(255,255,255,0.12)),
linear-gradient(180deg, #82b0ea 0%, #dce9f8 52%, #f5efe3 100%);
}
.puck-menu-live-shell .site-header {
box-shadow: none;
}

.puck-site-shell-is-editor .site-header.site-header-variant-transparent,
.puck-site-shell-is-editor .site-header.site-header-variant-overlay,
.puck-site-shell-is-editor .site-header.site-header-variant-glass {

position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.22));
border-bottom: 1px dashed rgba(255, 255, 255, 0.28);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
.puck-site-shell-is-editor .site-header.site-header-variant-transparent .brand-name,
.puck-site-shell-is-editor .site-header.site-header-variant-transparent .site-nav a,
.puck-site-shell-is-editor .site-header.site-header-variant-overlay .brand-name,
.puck-site-shell-is-editor .site-header.site-header-variant-overlay .site-nav a,
.puck-site-shell-is-editor .site-header.site-header-variant-glass .brand-name,
.puck-site-shell-is-editor .site-header.site-header-variant-glass .site-nav a {
color: #ffffff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.puck-site-shell-is-editor .site-header.site-header-variant-transparent::before,
.puck-site-shell-is-editor .site-header.site-header-variant-overlay::before,
.puck-site-shell-is-editor .site-header.site-header-variant-glass::before {
content: "Forhåndsvisning av transparent meny (kun i editor)";
position: absolute;
top: 4px;
left: 12px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.78);
pointer-events: none;
z-index: 2;
}
.puck-menu-live-shell .site-header .container {
min-height: 56px;
}
.puck-menu-live-shell .site-nav {
flex-wrap: wrap;
}
.puck-menu-live-shell .site-nav a {
pointer-events: none;
}
.puck-menu-preview-logo {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 70px;
height: 28px;
padding: 0 10px 0 4px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.88);
border: 1px solid rgba(205, 216, 233, 0.95);
box-shadow: 0 6px 14px rgba(21, 39, 70, 0.08);
flex: 0 0 auto;
}
.puck-menu-preview-logo-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 999px;
background: linear-gradient(135deg, #315678, #5f88b0);
color: #ffffff;
font-size: 0.6rem;
font-weight: 800;
letter-spacing: 0.08em;
}
.puck-menu-preview-logo-word {
font-size: 0.72rem;
line-height: 1;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #27415d;
}
.puck-menu-live-body {
position: relative;
z-index: 1;
padding: 6px 12px 10px;
}
.puck-menu-live-page-copy,
.puck-menu-live-hero-copy {
position: relative;
border-radius: 12px;
}
.puck-menu-live-page-copy {
min-height: 34px;
background: linear-gradient(180deg, rgba(241, 245, 255, 0.9), rgba(255, 255, 255, 0.98));
border: 1px dashed rgba(171, 190, 219, 0.42);
}
.puck-menu-live-hero-copy {
min-height: 78px;
background:
linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)),
linear-gradient(90deg, rgba(255,255,255,0.72) 0 34%, rgba(255,255,255,0.2) 34% 42%, transparent 42%);
border: 1px dashed rgba(255, 255, 255, 0.24);
}
.puck-menu-live-page-copy::before,
.puck-menu-live-hero-copy::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: min(38%, 320px);
border-radius: inherit;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
}
.puck-menu-live-hero-copy::before {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.24));
}
.puck-menu-live-page-copy.is-left::before,
.puck-menu-live-hero-copy.is-left::before {
left: 0;
}
.puck-menu-live-page-copy.is-center::before,
.puck-menu-live-hero-copy.is-center::before {
left: 50%;
transform: translateX(-50%);
}
.puck-menu-live-page-copy.is-right::before,
.puck-menu-live-hero-copy.is-right::before {
right: 0;
}
.puck-menu-live-page-copy.is-split::before,
.puck-menu-live-hero-copy.is-split::before {
left: 0;
width: min(34%, 280px);
}
.puck-menu-type-grid,
.puck-menu-behavior-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.puck-menu-type-card,
.puck-menu-behavior-card {
display: grid;
gap: 6px;
padding: 10px;
border: 1px solid rgba(171, 190, 219, 0.42);
border-radius: 14px;
background: #fff;
text-align: left;
cursor: pointer;
color: #162a45;
}
.puck-menu-type-card.is-active,
.puck-menu-behavior-card.is-active {
border-color: rgba(64, 103, 255, 0.45);
box-shadow: 0 0 0 3px rgba(64, 103, 255, 0.08);
}
.puck-menu-type-card strong,
.puck-menu-behavior-card strong {
font-size: 0.92rem;
}
.puck-menu-type-card p,
.puck-menu-behavior-card p {
margin: 0;
color: #61708a;
font-size: 0.8rem;
line-height: 1.3;
}
.puck-menu-preview-desktop {
display: grid;
gap: 8px;
padding: 12px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(241, 245, 255, 0.9), rgba(255, 255, 255, 1));
border: 1px solid rgba(171, 190, 219, 0.36);
}
.puck-menu-preview-desktop strong {
font-size: 0.88rem;
}
.puck-menu-preview-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.puck-menu-preview-links span {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 10px;
border-radius: 999px;
background: #fff;
border: 1px solid rgba(171, 190, 219, 0.5);
color: #162a45;
font-size: 0.78rem;
}
.puck-menu-preview-mobile {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 12px;
align-items: center;
padding: 12px;
border-radius: 14px;
background: #162a45;
color: #fff;
}
.puck-menu-preview-mobile strong {
display: block;
}
.puck-menu-preview-mobile p {
margin: 4px 0 0;
color: rgba(255, 255, 255, 0.72);
}
.puck-menu-preview-hamburger {
display: grid;
gap: 4px;
width: 28px;
}
.puck-menu-preview-hamburger span {
display: block;
width: 28px;
height: 2px;
border-radius: 999px;
background: currentColor;
}
.puck-menu-appearance-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}

.puck-menu-appearance-panel {
display: grid;
gap: 16px;
align-content: start;
padding: 2px 0;
}

.puck-menu-variant-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 7px;
}
.puck-menu-variant-card {
display: grid;
gap: 3px;
padding: 10px 10px 11px;
border: 1.5px solid rgba(171, 190, 219, 0.5);
border-radius: 12px;
background: #fff;
cursor: pointer;
text-align: left;
transition: border-color 0.13s, box-shadow 0.13s;
}
.puck-menu-variant-card:hover {
border-color: rgba(64, 103, 255, 0.35);
box-shadow: 0 0 0 3px rgba(64, 103, 255, 0.06);
}
.puck-menu-variant-card.is-active {
border-color: #4067ff;
box-shadow: 0 0 0 3px rgba(64, 103, 255, 0.11);
background: rgba(64, 103, 255, 0.04);
}
.puck-menu-variant-card strong {
display: block;
font-size: 0.82rem;
font-weight: 700;
color: #162a45;
}
.puck-menu-variant-card span {
display: block;
font-size: 0.73rem;
color: #61708a;
}
.puck-menu-hint {
display: block;
color: #2a56b0;
background: rgba(64, 103, 255, 0.07);
border-radius: 8px;
padding: 7px 10px;
font-size: 0.79rem;
line-height: 1.4;
}

.puck-menu-tone-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
}
.puck-menu-tone-card {
display: grid;
gap: 4px;
padding: 10px 10px 11px;
border: 1.5px solid rgba(171, 190, 219, 0.42);
border-radius: 14px;
background: #fff;
cursor: pointer;
text-align: left;
transition: border-color 0.14s, box-shadow 0.14s;
}
.puck-menu-tone-card:hover {
border-color: rgba(64, 103, 255, 0.35);
box-shadow: 0 0 0 3px rgba(64, 103, 255, 0.07);
}
.puck-menu-tone-card.is-active {
border-color: #4067ff;
box-shadow: 0 0 0 3px rgba(64, 103, 255, 0.12);
background: rgba(64, 103, 255, 0.04);
}
.puck-menu-tone-swatch {
display: block;
width: 24px;
height: 24px;
border-radius: 50%;
border: 1.5px solid rgba(0,0,0,0.1);
}
.puck-menu-tone-swatch-default {
background: linear-gradient(135deg, #1a2a4a 50%, #fff 50%);
}
.puck-menu-tone-swatch-dark_soft {
background: #1a2a4a;
}
.puck-menu-tone-swatch-light_soft {
background: #fff;
border-color: rgba(0,0,0,0.18);
}
.puck-menu-tone-swatch-accent {
background: linear-gradient(135deg, #4067ff, #a855f7);
}
.puck-menu-tone-swatch-custom {
background: linear-gradient(135deg, #f59e0b, #ef4444, #8b5cf6);
}
.puck-menu-tone-card strong {
display: block;
font-size: 0.82rem;
font-weight: 700;
color: #162a45;
line-height: 1.2;
}
.puck-menu-tone-card small {
display: block;
font-size: 0.72rem;
color: #61708a;
line-height: 1.3;
}

.puck-menu-mobile-cards {
display: grid;
gap: 8px;
}
.puck-menu-mobile-card {
display: grid;
gap: 4px;
padding: 12px 14px;
border: 1.5px solid rgba(171, 190, 219, 0.42);
border-radius: 14px;
background: #fff;
cursor: pointer;
text-align: left;
transition: border-color 0.14s, box-shadow 0.14s;
}
.puck-menu-mobile-card:hover {
border-color: rgba(64, 103, 255, 0.35);
box-shadow: 0 0 0 3px rgba(64, 103, 255, 0.07);
}
.puck-menu-mobile-card.is-active {
border-color: #4067ff;
box-shadow: 0 0 0 3px rgba(64, 103, 255, 0.12);
background: rgba(64, 103, 255, 0.04);
}
.puck-menu-mobile-card strong {
font-size: 0.86rem;
font-weight: 700;
color: #162a45;
}
.puck-menu-mobile-card span {
font-size: 0.77rem;
color: #61708a;
line-height: 1.4;
}
.puck-menu-preview-panel-compact {
gap: 8px;
padding-bottom: 12px;
}
.puck-menu-workspace-modal {
padding: 6px;
}
.puck-menu-workspace-panel {
width: calc(100vw - 12px);
height: calc(100dvh - 68px);
max-height: calc(100dvh - 68px);
padding: 14px 16px 12px;
border-radius: 18px;
gap: 10px;
}
.puck-menu-workspace-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
flex: 0 0 auto;
}
.puck-menu-workspace-header h2 {
margin: 0;
font-size: 1.35rem;
color: #162a45;
}
.puck-menu-workspace-header p {
margin: 4px 0 0;
color: #61708a;
font-size: 0.92rem;
}
.puck-menu-workspace-help {
min-height: 38px;
padding: 0 14px;
border: 1px solid rgba(171, 190, 219, 0.5);
border-radius: 999px;
background: #fff;
color: #233650;
font-weight: 700;
}
.puck-menu-workspace-preview {
position: relative;
flex: 0 0 auto;
height: clamp(132px, 22dvh, 210px);
min-height: 132px;
border: 1px solid rgba(171, 190, 219, 0.5);
border-radius: 18px;
background-size: cover !important;
background-position: center !important;
overflow: hidden;
box-shadow: 0 12px 32px rgba(17, 35, 64, 0.08);
}
.puck-menu-workspace-preview-toolbar {
position: absolute;
top: 8px;
left: 50%;
z-index: 3;
transform: translateX(-50%);
}
.puck-menu-preview-switch {
display: inline-flex;
padding: 4px;
border: 1px solid rgba(171, 190, 219, 0.52);
border-radius: 999px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 8px 20px rgba(17, 35, 64, 0.12);
}
.puck-menu-preview-switch button {
min-height: 30px;
padding: 0 16px;
border: 0;
border-radius: 999px;
background: transparent;
color: #61708a;
font-weight: 800;
cursor: pointer;
}
.puck-menu-preview-switch button.is-active {
background: #fff;
color: #2f56ea;
box-shadow: 0 6px 16px rgba(64, 103, 255, 0.16);
}
.puck-menu-workspace-preview-bar {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(170px, auto) minmax(0, 1fr) auto;
gap: 22px;
align-items: center;
min-height: 64px;
margin: 46px 34px 18px;
padding: 10px 18px;
border-radius: 16px;
}
.puck-menu-workspace-preview-bar.is-solid,
.puck-menu-workspace-preview-bar.is-panel {
background: rgba(255, 255, 255, 0.94);
color: #162a45 !important;
}
.puck-menu-workspace-preview-bar.is-glass {
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.28);
backdrop-filter: blur(14px);
}
.puck-menu-workspace-preview-bar.is-gradient {
background: linear-gradient(180deg, rgba(9, 21, 44, 0.58), rgba(9, 21, 44, 0.05));
}
.puck-menu-workspace-brand {
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.puck-menu-workspace-brand img {
width: 34px;
height: 34px;
object-fit: contain;
}
.puck-menu-workspace-brand strong {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: currentColor;
}
.puck-menu-workspace-brand-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 999px;
background: #4067ff;
color: #fff;
font-weight: 900;
}
.puck-menu-workspace-preview-links {
display: flex;
justify-content: center;
gap: 22px;
min-width: 0;
overflow: hidden;
}
.puck-menu-workspace-preview-links span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: 800;
font-size: 0.9rem;
}
.puck-menu-workspace-preview-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 18px;
border-radius: 999px;
background: #4067ff;
color: #fff;
font-weight: 850;
white-space: nowrap;
}
.puck-menu-workspace-preview-cta.is-outline {
border: 1px solid currentColor;
background: transparent;
}
.puck-menu-workspace-mobile-shell {
justify-self: end;
position: relative;
}
.puck-menu-workspace-hamburger {
display: grid;
gap: 5px;
width: 32px;
}
.puck-menu-workspace-hamburger i {
display: block;
height: 2px;
border-radius: 999px;
background: currentColor;
}
.puck-menu-workspace-mobile-menu {
position: absolute;
top: 42px;
right: 0;
display: grid;
gap: 8px;
width: 230px;
padding: 16px;
border-radius: 16px;
background: rgba(16, 30, 54, 0.92);
color: #fff;
box-shadow: 0 18px 46px rgba(12, 25, 45, 0.25);
}
.puck-menu-workspace-mobile-menu.is-bottom_sheet {
width: 270px;
min-height: 128px;
border-top-right-radius: 0;
}
.puck-menu-workspace-mobile-menu.is-fullscreen {
position: fixed;
inset: 112px 42px auto auto;
width: min(360px, calc(100vw - 84px));
min-height: 190px;
}
.puck-menu-workspace-mobile-menu span {
font-weight: 750;
}
.puck-menu-workspace-preview-fallback {
position: absolute;
left: 14px;
bottom: 10px;
z-index: 2;
max-width: calc(100% - 28px);
padding: 7px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.88);
color: #61708a;
font-size: 0.78rem;
font-weight: 700;
}
.puck-menu-workspace-grid {
display: grid;
grid-template-columns: minmax(260px, 0.88fr) minmax(360px, 1fr) minmax(310px, 1fr);
gap: 14px;
min-height: 0;
overflow: hidden;
flex: 1 1 0;
}
.puck-menu-workspace-column {
display: grid;
align-content: start;
gap: 12px;
height: 100%;
min-height: 0;
overflow-y: auto;
padding: 14px;
border: 1px solid rgba(171, 190, 219, 0.42);
border-radius: 18px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 12px 32px rgba(17, 35, 64, 0.05);
}
.puck-menu-workspace-add-types {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.puck-menu-workspace-add-types button,
.puck-menu-workspace-structure-title button {
min-height: 42px;
border: 1px solid rgba(171, 190, 219, 0.52);
border-radius: 14px;
background: #fff;
color: #2f56ea;
font-weight: 800;
cursor: pointer;
}
.puck-menu-workspace-add-types button.is-active,
.puck-menu-workspace-structure-title button.is-active {
border-color: #4067ff;
background: rgba(64, 103, 255, 0.06);
box-shadow: 0 0 0 3px rgba(64, 103, 255, 0.1);
}
.puck-menu-workspace-subtitle {
color: #233650;
font-size: 0.88rem;
}
.puck-menu-workspace-library-row {
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
}
.puck-menu-workspace-marker {
grid-row: span 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 10px;
background: #eef3fb;
color: #61708a;
font-weight: 900;
}
.puck-menu-workspace-form,
.puck-menu-workspace-settings-stack {
display: grid;
gap: 12px;
}
.puck-menu-workspace-structure-title {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.puck-menu-workspace-row.is-open {
border-color: rgba(64, 103, 255, 0.44);
background: rgba(64, 103, 255, 0.035);
}
.puck-menu-workspace-row-actions {
display: inline-flex;
gap: 6px;
}
.puck-menu-workspace-row-actions button {
width: 32px;
height: 32px;
border: 0;
border-radius: 10px;
background: #eef3fb;
color: #233650;
font-weight: 900;
cursor: pointer;
}
.puck-menu-workspace-selected-note {
padding: 10px 12px;
border-radius: 14px;
background: rgba(64, 103, 255, 0.07);
color: #233650;
font-size: 0.86rem;
}
.puck-menu-workspace-variant-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.puck-menu-workspace-danger {
min-height: 40px;
border: 1px solid rgba(229, 62, 62, 0.24);
border-radius: 999px;
background: #fff5f5;
color: #b42323;
font-weight: 800;
cursor: pointer;
}
.puck-menu-workspace-footer {
position: sticky;
bottom: 0;
flex: 0 0 auto;
padding-top: 2px;
background: transparent;
}
@media (max-width: 1100px) {
.puck-menu-workspace-panel {
height: calc(100dvh - 68px);
}
.puck-menu-workspace-grid {
grid-template-columns: 1fr;
overflow-y: auto;
}
.puck-menu-workspace-column {
overflow: visible;
}
.puck-menu-workspace-preview-bar {
grid-template-columns: 1fr auto;
margin: 58px 18px 24px;
}
.puck-menu-workspace-preview-links {
grid-column: 1 / -1;
justify-content: flex-start;
}
}
.puck-palette-builder {
padding-top: 10px;
}
.puck-palette-editor-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.puck-palette-editor-field {
padding: 16px;
border: 1px solid rgba(171, 190, 219, 0.42);
border-radius: 18px;
background: rgba(255, 255, 255, 0.94);
}
.puck-palette-editor-field small {
color: #61708a;
font-size: 0.82rem;
line-height: 1.45;
}
.puck-palette-preview-panel {
display: grid;
gap: 8px;
padding: 12px;
border: 1px solid rgba(171, 190, 219, 0.42);
border-radius: 18px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 12px 32px rgba(17, 35, 64, 0.05);
}
.puck-palette-preview-frame {
display: grid;
gap: 0;
overflow: hidden;
border-radius: 20px;
border: 1px solid var(--palette-border, rgba(171, 190, 219, 0.42));
background: var(--palette-page-bg, #f5efe3);
color: var(--palette-text, #162a45);
}
.puck-palette-preview-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 58px;
padding: 0 18px;
background: var(--palette-header-bg, rgba(251, 247, 240, 0.92));
color: var(--palette-header-text, #162a45);
border-bottom: 1px solid var(--palette-border, rgba(171, 190, 219, 0.42));
}
.puck-palette-preview-header strong {
font-size: 0.95rem;
}
.puck-palette-preview-header span {
font-size: 0.82rem;
color: inherit;
opacity: 0.8;
}
.puck-palette-preview-body {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr);
gap: 14px;
padding: 18px;
}
.puck-palette-preview-copy {
display: grid;
gap: 10px;
align-content: start;
}
.puck-palette-preview-copy small {
color: var(--palette-accent, #4067ff);
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.puck-palette-preview-copy h5 {
margin: 0;
font-size: 1.15rem;
line-height: 1.2;
}
.puck-palette-preview-copy p,
.puck-palette-preview-card p {
margin: 0;
color: var(--palette-muted, #61708a);
line-height: 1.55;
}
.puck-palette-preview-copy button {
justify-self: start;
min-height: 42px;
padding: 0 16px;
border: 0;
border-radius: 999px;
background: var(--palette-accent, #4067ff);
color: var(--palette-accent-contrast, #ffffff);
font-weight: 700;
}
.puck-palette-preview-card {
display: grid;
gap: 8px;
align-content: start;
padding: 16px;
border-radius: 18px;
background: var(--palette-card-bg, rgba(255, 255, 255, 0.82));
border: 1px solid var(--palette-border, rgba(171, 190, 219, 0.42));
}
.puck-palette-preview-card strong {
font-size: 0.9rem;
}
@media (max-width: 1120px) {
.puck-menu-builder-grid {
grid-template-columns: 1fr;
}
.puck-menu-builder-grid-content {
grid-template-columns: 1fr;
}
.puck-menu-builder-sidebar {
position: static;
}
.puck-menu-item-summary {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.puck-menu-row-head {
grid-template-columns: auto minmax(0, 1fr) auto;
}
}
@media (max-width: 760px) {
.puck-menu-builder-modal {
padding: 12px;
}
.puck-menu-builder-modal-panel {
width: calc(100vw - 24px);
max-height: calc(100vh - 56px - 24px);
padding: 16px;
}
.puck-menu-builder-footer {
flex-direction: column-reverse;
}
.puck-menu-builder-footer .puck-menu-builder-save,
.puck-menu-builder-footer .puck-menu-builder-cancel {
width: 100%;
}
.puck-menu-item-grid,
.puck-menu-builder .puck-menu-section-picklist-grid,
.puck-menu-style-grid {
grid-template-columns: 1fr;
}
.puck-menu-item-summary {
grid-template-columns: auto minmax(0, 1fr);
}
.puck-menu-type-badge,
.puck-menu-item-remove {
grid-column: 2;
justify-self: start;
}
.puck-menu-item-summary .puck-menu-item-remove {
grid-column: 4;
}
.puck-menu-row-grid,
.puck-menu-appearance-grid,
.puck-palette-editor-grid,
.puck-menu-type-grid,
.puck-menu-behavior-grid {
grid-template-columns: 1fr;
}
.puck-menu-tone-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.puck-palette-preview-body {
grid-template-columns: 1fr;
}
.puck-menu-row-head {
grid-template-columns: auto minmax(0, 1fr);
}
.puck-menu-row-badge,
.puck-menu-row-remove {
grid-column: 2;
justify-self: start;
}
}
.puck-menu-style-grid .puck-theme-field {
min-width: 0;
}
.puck-palette-color-field {
display: grid;
gap: 10px;
}
.puck-palette-color-swatches {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.puck-palette-color-swatch {
width: 28px;
height: 28px;
border-radius: 999px;
border: 1px solid rgba(17, 35, 64, 0.14);
cursor: pointer;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.puck-palette-color-swatch.is-active {
box-shadow: 0 0 0 3px rgba(47, 122, 109, 0.18);
border-color: rgba(47, 122, 109, 0.5);
}
.puck-palette-color-custom {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
gap: 10px;
align-items: center;
}
.puck-palette-color-custom input[type="color"] {
width: 52px;
min-width: 52px;
height: 44px;
padding: 4px;
border: 1px solid rgba(171, 190, 219, 0.5);
border-radius: 14px;
background: #fff;
cursor: pointer;
}
.puck-palette-color-custom input[type="text"] {
width: 100%;
min-height: 44px;
padding: 0 14px;
border: 1px solid rgba(171, 190, 219, 0.5);
border-radius: 14px;
background: #fff;
color: #162a45;
}
.puck-app-shell [class*="_PuckLayout-header_"],
.puck-app-shell [class*="_PuckHeader_"] {
display: none !important;
}
.puck-app-shell [class*="_PuckLayout-inner_"] {
grid-template-rows: 1fr !important;
}
.puck-page-root {
background: var(--fb-page-bg, #f5efe3);
}
.puck-site-shell-has-bg-image .puck-page-root {
background: transparent;
}
.puck-site-shell .site-main:has(.module-footer:last-child) {
padding-bottom: 0 !important;
}
.puck-site-shell .site-main:has(.module-footer:last-child) + ._DropZone_1i2sv_1,
.puck-site-shell .site-main:has(.module-footer:last-child) [data-puck-dropzone]:has(> .module-footer:last-child) {
min-height: 0 !important;
}

.puck-site-shell .module-footer ~ [class*="_DropZone_"],
.puck-site-shell .module-footer ~ [data-puck-dropzone],
.puck-site-shell .module-footer + * [class*="_DropZone_"] {
display: none !important;
}
.puck-site-shell [class*="_DropZone_"]:has(> .module-footer:last-child)::after,
.puck-site-shell [data-puck-dropzone]:has(> .module-footer:last-child)::after {
display: none !important;
}

.puck-page-content,
.puck-page-content > [class*="_DropZone_"],
.puck-page-content > [data-puck-dropzone] {
min-height: 0 !important;
}
.puck-page-content > [class*="_DropZone_"]::after,
.puck-page-content > [data-puck-dropzone]::after {
display: none !important;
}

.puck-page-content:not(:has(> [class*="_DropZone_"] [data-editor-selection-target])):not(:has(> [class*="_DropZone_"] .module)) > [class*="_DropZone_"],
.puck-page-content:not(:has(> [data-puck-dropzone] [data-editor-selection-target])):not(:has(> [data-puck-dropzone] .module)) > [data-puck-dropzone] {
display: flex !important;
align-items: center;
justify-content: center;
min-height: 240px !important;
margin: 24px auto;
max-width: var(--site-container, 980px);
border: 2px dashed #c6d4eb !important;
border-radius: 10px;
background: rgba(241, 245, 250, 0.6) !important;
color: #64748b;
font-size: 0.92rem;
position: relative;
}
.puck-page-content:not(:has(> [class*="_DropZone_"] [data-editor-selection-target])):not(:has(> [class*="_DropZone_"] .module)) > [class*="_DropZone_"]::before,
.puck-page-content:not(:has(> [data-puck-dropzone] [data-editor-selection-target])):not(:has(> [data-puck-dropzone] .module)) > [data-puck-dropzone]::before {
content: "Dra en blokk hit fra venstre panel";
display: block !important;
pointer-events: none;
position: absolute;
inset: 0;
display: flex !important;
align-items: center;
justify-content: center;
}

.puck-site-shell .site-main {
padding-bottom: 0 !important;
}

.puck-site-shell ._DropZone--isAreaSelected_1i2sv_24,
.puck-site-shell ._DropZone--hoveringOverArea_1i2sv_25:not(._DropZone--isRootZone_1i2sv_25) {
background: transparent !important;
outline: none !important;
}
.puck-site-shell ._DropZone_1i2sv_1:empty {
background: transparent !important;
outline: none !important;
}

.puck-site-shell [class*="_DropZone_"]:not([class*="_DropZone--isAreaSelected_"]):not([class*="_DropZone--hoveringOverArea_"]),
.puck-site-shell [data-puck-dropzone],
.puck-site-shell .puck-section-band [class*="DropZone"],
.puck-site-shell .module-section-band [class*="DropZone"] {
outline: none !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
.puck-site-shell [class*="_DropZone_"]:not([class*="_DropZone--isAreaSelected_"]):not([class*="_DropZone--hoveringOverArea_"]) > * {
outline: none !important;
}

.puck-site-shell [class*="_DropZone-item_"],
.puck-site-shell [class*="_DropZoneItem_"] {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
.puck-width-narrow {
max-width: var(--site-module-narrow-container, 840px);
margin: 0 auto;
}
.puck-width-normal {
max-width: var(--site-container, 980px);
margin: 0 auto;
}
.puck-width-wide {
max-width: var(--site-module-wide-container, 1320px);
margin: 0 auto;
}
.puck-width-full {
width: 100%;
}
.puck-align-left {
text-align: left;
}
.puck-align-center {
text-align: center;
}
.puck-align-right {
text-align: right;
}
.puck-kicker {
margin: 0 0 12px;
color: #4067ff;
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.puck-hero,
.puck-text,
.puck-image,
.puck-button-row,
.puck-text-image,
.puck-card-grid {
margin: 0 auto 32px;
}
.puck-hero {
position: relative;
min-height: 420px;
border-radius: 32px;
overflow: hidden;
color: #fff;
}
.puck-hero-image,
.puck-hero-overlay {
position: absolute;
inset: 0;
}
.puck-hero-image,
.puck-text-image-media img,
.puck-image img,
.puck-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.puck-hero-overlay {
background: rgba(11, 23, 43, 0.42);
}
.puck-hero-content {
position: relative;
z-index: 1;
max-width: 760px;
padding: 72px 48px;
margin: 0 auto;
}
.puck-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 24px;
border-radius: 999px;
background: #4067ff;
color: #fff;
text-decoration: none;
font-weight: 700;
}
.puck-image-placeholder {
min-height: 220px;
display: grid;
place-items: center;
border-radius: 24px;
background: rgba(255, 255, 255, 0.5);
border: 1px dashed rgba(64, 103, 255, 0.32);
color: #4067ff;
font-weight: 700;
}
.puck-image img {
border-radius: 24px;
}
.puck-image-frame {
position: relative;
overflow: hidden;
border-radius: 24px;
}
.puck-image-caption {
margin: 0;
}
.puck-image-caption-below {
margin-top: 0.85rem;
color: var(--site-muted, #61708a);
}
.puck-image-caption-overlay {
position: absolute;
z-index: 1;
max-width: min(80%, 26rem);
padding: 0;
border-radius: 0;
background: transparent;
color: #fff;
backdrop-filter: none;
-webkit-backdrop-filter: none;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42);
font-weight: 700;
}
.puck-image-caption-size-small .puck-image-caption {
font-size: clamp(1rem, 2vw, 1.35rem);
line-height: 1.2;
}
.puck-image-caption-size-normal .puck-image-caption {
font-size: clamp(1.25rem, 3vw, 2rem);
line-height: 1.15;
}
.puck-image-caption-size-large .puck-image-caption {
font-size: clamp(1.9rem, 5vw, 3rem);
line-height: 1.02;
}
.puck-image-caption-center .puck-image-caption-overlay {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.puck-image-caption-left .puck-image-caption-overlay {
top: 50%;
left: 1rem;
transform: translateY(-50%);
text-align: left;
}
.puck-image-caption-right .puck-image-caption-overlay {
top: 50%;
right: 1rem;
transform: translateY(-50%);
text-align: right;
}
.puck-image-caption-top-left .puck-image-caption-overlay {
top: 1rem;
left: 1rem;
text-align: left;
}
.puck-image-caption-top-right .puck-image-caption-overlay {
top: 1rem;
right: 1rem;
text-align: right;
}
.puck-image-caption-bottom-left .puck-image-caption-overlay {
bottom: 1rem;
left: 1rem;
text-align: left;
}
.puck-image-caption-bottom-right .puck-image-caption-overlay {
right: 1rem;
bottom: 1rem;
text-align: right;
}
.puck-text-image {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
.puck-media-left .puck-text-image-copy {
order: 2;
}
.puck-media-left .puck-text-image-media {
order: 1;
}
.puck-text-image-media {
border-radius: 28px;
overflow: hidden;
min-height: 320px;
}
.puck-image-size-small {
max-width: 360px;
}
.puck-image-size-normal {
max-width: 520px;
}
.puck-image-size-large {
max-width: 680px;
}
.puck-card-grid {
display: grid;
gap: 24px;
}
.puck-card-grid-1 {
grid-template-columns: minmax(0, 1fr);
}
.puck-card-grid-1x2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.puck-card-grid-2x2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.puck-card-grid-3x2,
.puck-card-grid-3x3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.puck-card-grid-4x3 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.puck-card {
padding: 24px;
border-radius: 28px;
background: rgba(255, 255, 255, 0.76);
border: 1px solid rgba(171, 190, 219, 0.45);
}
.puck-card img {
aspect-ratio: 4 / 3;
border-radius: 20px;
margin-bottom: 20px;
}
.puck-card-empty {
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
}
.puck-card-empty img {
margin-bottom: 16px;
}
.puck-spacer-small {
height: 32px;
}
.puck-spacer-medium {
height: 64px;
}
.puck-spacer-large {
height: 96px;
}
.puck-section-band {
position: relative;
overflow: hidden;
}

.admin-body-puck .puck-site-shell .puck-section-band {
outline: 4px dashed rgba(99, 102, 241, 0.85);
outline-offset: -2px;
min-height: 80px;
}
.admin-body-puck .puck-site-shell .puck-section-band::before {

content: "Section band";
position: absolute;
top: 8px;
left: 12px;
z-index: 100;
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #ffffff;
background: rgba(99, 102, 241, 0.95);
padding: 8px 16px;
border-radius: 8px;
box-shadow: 0 6px 14px rgba(99, 102, 241, 0.32);
pointer-events: auto;
cursor: pointer;
}
.admin-body-puck .puck-site-shell .puck-section-band:hover::before {
background: rgba(79, 82, 221, 1);
box-shadow: 0 8px 18px rgba(99, 102, 241, 0.42);
}
.puck-section-band-overlay {
position: absolute;
inset: 0;
background: #09111d;
}
.puck-section-band-overlay-soft {
background: #1b2f4c;
}
.puck-section-band-overlay-strong {
background: #07101a;
}
.puck-section-band-inner {
position: relative;
z-index: 1;
min-height: 120px;
width: 100%;
max-width: 100%;
}
.puck-unsupported {
padding: 24px;
border-radius: 20px;
border: 1px dashed rgba(255, 196, 56, 0.42);
background: rgba(255, 244, 211, 0.72);
}
.puck-gallery {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.puck-image-upload-field {
display: grid;
gap: 12px;
}
.puck-image-upload-field-with-library {
height: 100%;
min-height: 0;
grid-template-rows: auto minmax(0, 1fr);
}
.puck-image-upload-preview,
.puck-image-upload-empty {
min-height: 160px;
border-radius: 18px;
overflow: hidden;
background: rgba(255, 255, 255, 0.6);
border: 1px dashed rgba(64, 103, 255, 0.28);
}
.puck-image-upload-preview img {
width: 100%;
height: 160px;
object-fit: cover;
display: block;
}
.puck-page-logo-field .puck-image-upload-preview,
.puck-page-logo-field .puck-image-upload-empty {
min-height: 88px;
}
.puck-page-logo-field .puck-image-upload-preview img {
height: 88px;
object-fit: contain;
padding: 8px;
background: #fff;
}
.puck-image-upload-empty {
display: grid;
place-items: center;
color: #4067ff;
font-weight: 700;
}
.puck-image-upload-actions {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.puck-upload-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
border-radius: 999px;
background: #4067ff;
color: #fff;
font-weight: 700;
cursor: pointer;
}
.puck-upload-button input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.puck-upload-button.is-disabled {
opacity: 0.6;
cursor: not-allowed;
}
.puck-upload-clear {
padding: 10px 16px;
border-radius: 999px;
border: 1px solid rgba(17, 35, 64, 0.16);
background: #fff;
cursor: pointer;
}
.puck-upload-clear-inline {
position: absolute;
top: 6px;
right: 6px;
padding: 4px 10px;
font-size: 12px;
border-radius: 999px;
border: 1px solid rgba(17, 35, 64, 0.16);
background: rgba(255,255,255,0.9);
cursor: pointer;
}
.puck-image-library-toolbar {
display: grid;
gap: 8px;
}
.puck-image-library-tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 0;
}
.puck-image-library-tab {
flex: 1 1 120px;
min-height: 44px;
padding: 10px 12px;
font-size: 15px;
border: 1px solid rgba(198, 212, 235, 0.92);
border-radius: 12px;
background: rgba(255, 255, 255, 0.76);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
cursor: pointer;
color: #4e5f78;
}
.puck-image-library-tab.is-active {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(154, 175, 200, 0.96);
color: #233650;
font-weight: 600;
}
.puck-image-library-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
min-height: 0;
height: 100%;
max-height: none;
overflow-y: auto;
align-content: start;
padding-right: 6px;
}
.puck-image-library-grid-comfortable {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.puck-image-library-grid-compact {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.puck-image-library-grid-list {
grid-template-columns: 1fr;
}
.puck-image-library-item-shell {
position: relative;
}
.puck-image-library-item {
aspect-ratio: 1;
border: 2px solid transparent;
border-radius: 14px;
overflow: hidden;
cursor: pointer;
padding: 0;
width: 100%;
text-align: left;
border: 2px solid transparent;
background:
radial-gradient(circle at center, rgba(255, 255, 255, 0.92) 0%, rgba(244, 247, 252, 0.92) 58%, rgba(228, 235, 245, 0.96) 100%),
linear-gradient(45deg, rgba(70, 96, 132, 0.08) 25%, transparent 25%, transparent 75%, rgba(70, 96, 132, 0.08) 75%),
linear-gradient(45deg, rgba(70, 96, 132, 0.08) 25%, transparent 25%, transparent 75%, rgba(70, 96, 132, 0.08) 75%),
#eef3f9;
background-position: 0 0, 0 0, 10px 10px, 0 0;
background-size: auto, 20px 20px, 20px 20px, auto;
box-shadow: inset 0 0 0 1px rgba(184, 197, 214, 0.5);
}
.puck-image-library-item-list {
aspect-ratio: auto;
min-height: 92px;
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
align-items: stretch;
}
.puck-image-library-item img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.95)) drop-shadow(0 0 10px rgba(85, 102, 130, 0.2));
}
.puck-image-library-item-list img {
height: 92px;
}
.puck-image-library-item-shell.is-selected .puck-image-library-item {
border-color: #233650;
box-shadow: inset 0 0 0 1px rgba(35, 54, 80, 0.12), 0 10px 24px rgba(15, 23, 42, 0.12);
}
.puck-image-library-delete {
position: absolute;
top: 6px;
right: 6px;
z-index: 2;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1.5px solid #dc2626;
border-radius: 6px;
background: #fff;
color: #b42318;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: all 120ms ease;
padding: 0;
}
.puck-image-library-delete svg {
width: 16px;
height: 16px;
}
.puck-image-library-delete:hover:not(:disabled) {
background: #dc2626;
color: #fff;
border-color: #dc2626;
transform: scale(1.08);
}
.puck-image-library-delete:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.puck-image-library-delete:disabled {
opacity: 0.55;
cursor: wait;
}
.puck-image-library-item-shell.is-multi-selected {
outline: 3px solid #4067ff;
outline-offset: -3px;
border-radius: 8px;
}
.puck-image-library-multi-badge {
position: absolute;
top: 6px;
left: 6px;
z-index: 3;
width: 26px;
height: 26px;
border-radius: 50%;
background: #4067ff;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.95rem;
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
pointer-events: none;
}
.puck-image-library-multi-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.6rem;
padding-top: 0.6rem;
margin-top: 0.6rem;
border-top: 1px solid #e5e7eb;
}
.puck-image-library-multi-count {
font-size: 0.85rem;
color: rgba(0,0,0,0.6);
font-weight: 500;
}
.puck-image-library-multi-confirm {
padding: 0.55rem 1rem;
border-radius: 0.45rem;
border: none;
background: #4067ff;
color: #fff;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
}
.puck-image-library-multi-confirm:disabled {
background: #cbd5e1;
cursor: not-allowed;
}
.puck-image-library-item-meta {
display: grid;
align-content: center;
gap: 4px;
padding: 12px 14px;
text-align: left;
background: rgba(255, 255, 255, 0.85);
}
.puck-image-library-item-meta strong,
.puck-image-library-item-meta small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.puck-image-library-item-meta small {
color: #61708a;
}
.puck-image-library-loading,
.puck-image-library-empty {
grid-column: 1 / -1;
padding: 16px;
text-align: center;
font-size: 13px;
color: #888;
}
.puck-image-library-tab-upload {
background: rgba(255, 255, 255, 0.76);
color: #233650;
border-color: rgba(198, 212, 235, 0.92);
}
.puck-image-library-tab-upload:hover:not(.is-disabled) {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(154, 175, 200, 0.96);
}
.puck-image-library-tab-upload.is-disabled {
opacity: 0.6;
cursor: not-allowed;
}
.puck-image-library-viewmodes {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.puck-image-library-viewmode {
border: 1px solid rgba(17, 35, 64, 0.14);
background: rgba(255, 255, 255, 0.88);
color: #4e5f78;
min-height: 36px;
padding: 0 12px;
border-radius: 999px;
font-size: 0.9rem;
cursor: pointer;
}
.puck-image-library-viewmode.is-active {
background: #233650;
border-color: #233650;
color: #fff;
}
.puck-theme-opacity-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
font-size: 13px;
}
.puck-theme-row-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-weight: 600;
color: #233650;
}
.puck-theme-opacity-row input[type="range"] {
flex: 1;
accent-color: #3b5bdb;
}
.puck-theme-opacity-value {
min-width: 36px;
text-align: right;
color: #555;
font-weight: 500;
}
.puck-theme-field-inline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 8px;
font-size: 13px;
}
.puck-theme-field-inline > span {
flex: 0 0 auto;
}
.puck-theme-attachment-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
font-size: 13px;
}
.puck-theme-attachment-row > span {
flex: 0 0 auto;
}
.puck-theme-attachment-btns {
display: flex;
gap: 4px;
}
.puck-theme-attachment-btn {
padding: 3px 10px;
border-radius: 6px;
border: 1px solid #d1d5db;
background: #f9fafb;
color: #374151;
font-size: 12px;
cursor: pointer;
font-weight: 500;
transition: background 0.12s, color 0.12s;
}
.puck-theme-attachment-btn.is-active {
background: #233650;
color: #fff;
border-color: #233650;
}

.puck-ws-save-status {
flex: 0 0 auto;
font-size: 0.72rem;
font-weight: 600;
padding: 0 10px;
white-space: nowrap;
}
.puck-ws-save-status-saving { color: #64748b; }
.puck-ws-save-status-saved { color: #16a34a; }
.puck-ws-save-status-error { color: #c43f3f; font-weight: 700; }
.puck-workspace-spacer {
flex: 1 1 0;
min-width: 8px;
}
.puck-ws-btn-preview {
background: #1e3a5f;
color: #fff;
border-color: #1e3a5f;
padding: 0 14px;
}
.puck-ws-btn-preview:hover:not(:disabled) {
background: #162a45;
border-color: #162a45;
color: #fff;
}
.puck-ws-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid rgba(198, 212, 235, 0.9);
border-radius: 12px;
background: rgba(255, 255, 255, 0.9);
color: #415166;
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.puck-ws-icon-btn:hover,
.puck-ws-icon-btn:focus-visible {
background: rgba(255, 255, 255, 1);
border-color: rgba(47, 86, 234, 0.34);
color: #2f56ea;
box-shadow: 0 0 0 3px rgba(64, 103, 255, 0.12);
outline: none;
}


[data-puck-component] [contenteditable] {
pointer-events: auto !important;
user-select: text !important;
-webkit-user-select: text !important;
cursor: text !important;
}
.puck-inline-editable {
outline: 2px dashed rgba(64, 103, 255, 0.6) !important;
outline-offset: 4px !important;
border-radius: 3px;
white-space: pre-wrap;
}
.puck-inline-editable:focus {
outline-color: #4067ff !important;
}

[data-placeholder]:empty::before,
[data-inline-placeholder]:empty::before {
content: attr(data-inline-placeholder);
color: rgba(255, 255, 255, 0.38);
font-style: italic;
font-weight: normal;
pointer-events: none;
}
[data-placeholder]:empty::before {
content: attr(data-placeholder);
}

[data-placeholder] {
min-height: 1em;
}

.hero2-field-placeholder {
display: inline-block !important;
font-style: italic !important;
cursor: text !important;
opacity: 1 !important;
color: #ffffff !important;
background: rgba(12, 15, 22, 0.64) !important;
border: 1.5px dashed rgba(255, 255, 255, 0.5) !important;
outline: none !important;
border-radius: 10px !important;
padding: 0.45rem 0.8rem !important;
min-height: 1.4em !important;
min-width: 100px !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
}

a.hero2-field-placeholder,
.button.hero2-field-placeholder {
border-style: dashed !important;
opacity: 1 !important;
outline: none !important;
min-width: 80px !important;
}

.text-image-placeholder {
display: block !important;
font-style: italic !important;
font-size: 0.9em !important;
cursor: text !important;
color: #ffffff !important;
background: rgba(12, 15, 22, 0.64) !important;
border: 1.5px dashed rgba(255, 255, 255, 0.5) !important;
outline: none !important;
border-radius: 10px !important;
padding: 0.45rem 0.8rem !important;
min-height: 1.4em !important;
min-width: 120px !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
}
.text-image-placeholder.text-image-placeholder-inline {
display: inline-block !important;
}
.module-editor-placeholder-text {
display: block !important;
width: fit-content !important;
max-width: min(100%, 42rem) !important;
padding: 0.45rem 0.8rem !important;
border: 1.5px dashed rgba(255, 255, 255, 0.5) !important;
border-radius: 10px !important;
background: rgba(12, 15, 22, 0.64) !important;
color: #ffffff !important;
font-style: italic !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
}
.module-editor-placeholder-inline {
display: inline-block !important;
}
.module-title-inner .module-editor-placeholder-text,
.module-text-inner .module-editor-placeholder-text,
.module-title-inner .module-editor-placeholder-text.module-editor-placeholder-inline,
.module-text-inner .module-editor-placeholder-text.module-editor-placeholder-inline {
color: #ffffff !important;
}
.module-image-caption-placeholder {
display: inline-block !important;
color: #ffffff !important;
background: rgba(12, 15, 22, 0.64) !important;
border: 1.5px dashed rgba(255, 255, 255, 0.5) !important;
border-radius: 10px !important;
padding: 0.45rem 0.8rem !important;
font-style: italic !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
}
.hero2-field-placeholder,
.text-image-placeholder,
.gallery-inline-placeholder,
.module-image-caption-placeholder {
color: #ffffff !important;
background: rgba(12, 15, 22, 0.64) !important;
border: 1.5px dashed rgba(255, 255, 255, 0.5) !important;
border-radius: 10px !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
}
.hero2-field-placeholder,
.text-image-placeholder,
.gallery-inline-placeholder,
.module-image-caption-placeholder,
.module-card-grid-editor-placeholder,
.card-grid-inline-placeholder {
color: #ffffff !important;
font-style: italic !important;
}
a.hero2-field-placeholder,
.button.hero2-field-placeholder,
.button.is-editor-placeholder,
.module-hero-button.is-editor-placeholder,
.module-text-image-button.is-editor-placeholder {
color: #ffffff !important;
}
.puck-site-shell .module-card-inner .module-card-button.is-editor-placeholder,
.module-card-inner .module-card-button.is-editor-placeholder {
display: inline-flex !important;
width: auto !important;
max-width: fit-content !important;
min-width: 0 !important;
flex: 0 0 auto !important;
align-self: flex-start !important;
}
.button.is-editor-placeholder,
.module-hero-button.is-editor-placeholder,
.module-text-image-button.is-editor-placeholder {
color: #ffffff !important;
}

.module-text-image-media-placeholder,
.module-text-image-placeholder,
.module-image-placeholder {
display: grid !important;
place-items: center !important;
align-content: center !important;
justify-items: center !important;
gap: 0.5rem !important;
min-height: 160px !important;
padding: 1.25rem !important;
border: 1.5px dashed rgba(120, 128, 140, 0.5) !important;
border-radius: 14px !important;
background: rgba(244, 245, 247, 0.55) !important;
color: #5b6472 !important;
text-align: center !important;
box-shadow: none !important;
}

.fb-ph-note {
font-size: 0.68rem !important;
font-weight: 400 !important;
color: #5b6472 !important;
letter-spacing: 0.01em !important;
line-height: 1.3 !important;
max-width: 90% !important;
}
.module-text-image-media-placeholder {
font-weight: 400 !important;
min-height: 100% !important;
}


.puck-selected-module-top-marker {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(180deg, rgba(64, 103, 255, 0.95), rgba(64, 103, 255, 0.78));
border-top-left-radius: inherit;
border-top-right-radius: inherit;
pointer-events: none;
z-index: 2;
}


.puck-canvas-minibar { display: none; }

.puck-module-toolbar {
position: fixed;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 8px 6px;
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(230, 235, 242, 0.9);
border-radius: 22px;
box-shadow: var(--puck-shadow-soft);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
pointer-events: all;
transition: top 320ms ease, left 320ms ease;
}

.puck-delete-toast {
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
z-index: 2000;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
background: #1e293b;
color: #f1f5f9;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0,0,0,0.28);
font-size: 0.875rem;
white-space: nowrap;
animation: puck-toast-in 180ms ease;
}
@keyframes puck-toast-in {
from { opacity: 0; transform: translateX(-50%) translateY(10px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.puck-delete-toast-undo {
background: transparent;
border: 1px solid #94a3b8;
border-radius: 6px;
color: #93c5fd;
font-size: 0.8rem;
padding: 3px 10px;
cursor: pointer;
font-weight: 600;
}
.puck-delete-toast-undo:hover {
background: rgba(147,197,253,0.12);
}

.mbt-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--puck-icon);
cursor: pointer;
transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
flex-shrink: 0;
}
.mbt-btn:hover:not(:disabled) {
background: #eef3f8;
color: var(--puck-icon-strong);
}
.mbt-btn:disabled {
opacity: 0.32;
cursor: default;
}
.mbt-btn.is-active {
background: var(--puck-active-bg);
color: var(--puck-active-icon);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 1px 2px rgba(20, 35, 60, 0.05);
}
.mbt-btn.is-muted {
color: #9daab9;
}
.mbt-btn-danger {
color: var(--puck-danger);
}
.mbt-btn-danger:hover:not(:disabled) {
background: #fff1f1;
color: #bf3d3d;
}

.mbt-sep {
width: 20px;
height: 1px;
background: var(--puck-divider-soft);
margin: 1px 0;
flex-shrink: 0;
}
.mbt-btn svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}

.mbt-flyout {
position: fixed;
z-index: 1001;
background: #fff;
border: 1px solid #dde2ea;
border-radius: 10px;
box-shadow: 0 4px 18px rgba(17, 35, 64, 0.13);
padding: 8px;
width: 220px;
pointer-events: all;
animation: mbt-flyout-in 120ms ease;
}
@keyframes mbt-flyout-in {
from { opacity: 0; transform: translateX(-4px); }
to { opacity: 1; transform: translateX(0); }
}
.mbt-flyout-title {
font-size: 0.7rem;
font-weight: 600;
color: #9aa5b4;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 2px 6px 8px;
}
.mbt-flyout-opt {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
border-radius: 6px;
padding: 7px 10px;
font-size: 0.84rem;
color: #2d3748;
cursor: pointer;
transition: background 80ms;
}
.mbt-flyout-opt:hover {
background: #f0f3ff;
color: #3d52d5;
}
.mbt-flyout-opt.is-active {
background: #eef1ff;
color: #3d52d5;
font-weight: 600;
}
.mbt-flyout-sub {
font-size: 0.7rem;
font-weight: 600;
color: #b0bac9;
padding: 4px 6px 4px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.mbt-flyout-chips {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 0 4px 6px;
}
.mbt-flyout-chip {
background: #f4f6f9;
border: 1px solid #e2e7ef;
border-radius: 5px;
padding: 4px 8px;
font-size: 0.78rem;
color: #4b5563;
cursor: pointer;
transition: background 80ms, color 80ms, border-color 80ms;
}
.mbt-flyout-chip:hover {
background: #eef1ff;
color: #3d52d5;
border-color: #c0caff;
}
.mbt-flyout-chip.is-active {
background: #eef1ff;
color: #3d52d5;
border-color: #3d52d5;
font-weight: 600;
}


.mbt-flyout-bg { width: 240px; }
.mbt-flyout-bg--image { width: 360px; }
.mbt-flyout-cp { width: 190px; }

.mbt-flyout-bg-tabs {
display: flex;
gap: 4px;
padding: 0 2px 10px;
}
.mbt-flyout-bg-tab {
flex: 1;
background: #f4f6f9;
border: 1px solid #e2e7ef;
border-radius: 6px;
padding: 5px 6px;
font-size: 0.78rem;
color: #4b5563;
cursor: pointer;
white-space: nowrap;
transition: background 80ms, color 80ms, border-color 80ms;
}
.mbt-flyout-bg-tab:hover {
background: #eef1ff;
color: #3d52d5;
border-color: #c0caff;
}
.mbt-flyout-bg-tab.is-active {
background: #eef1ff;
color: #3d52d5;
border-color: #3d52d5;
font-weight: 600;
}

.mbt-flyout-bg-color {
padding: 0 2px 4px;
display: flex;
flex-direction: column;
gap: 10px;
}
.mbt-flyout-color-preview-row {
display: flex;
align-items: center;
gap: 8px;
padding: 0 2px;
}
.mbt-flyout-color-dot {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid rgba(0,0,0,0.10);
flex-shrink: 0;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.mbt-flyout-color-hex {
font-size: 0.8rem;
font-family: monospace;
color: #4b5563;
letter-spacing: 0.03em;
}
.mbt-flyout-swatches {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0 2px;
}
.mbt-flyout-swatch {
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
transition: transform 80ms, border-color 80ms;
outline: 1px solid rgba(0,0,0,0.12);
flex-shrink: 0;
}
.mbt-flyout-swatch:hover {
transform: scale(1.15);
}
.mbt-flyout-swatch.is-active {
border-color: #3d52d5;
outline-color: #3d52d5;
}
.mbt-flyout-palette-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1px solid #e2e7ef;
border-radius: 6px;
background: #f4f6f9;
color: #64748b;
cursor: pointer;
flex-shrink: 0;
margin-left: auto;
transition: background 80ms, border-color 80ms, color 80ms;
}
.mbt-flyout-palette-btn:hover,
.mbt-flyout-palette-btn.is-active {
background: #eef1ff;
border-color: #3d52d5;
color: #3d52d5;
}

.mbt-cp-row {
display: flex;
align-items: center;
gap: 8px;
padding: 2px 2px 10px;
}
.mbt-cp-preview {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid rgba(0,0,0,0.10);
flex-shrink: 0;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.mbt-cp-hex-input {
flex: 1;
border: 1px solid #dde2ea;
border-radius: 5px;
padding: 5px 7px;
font-size: 0.8rem;
font-family: monospace;
color: #2d3748;
min-width: 0;
background: #f9fafc;
}
.mbt-cp-hex-input:focus {
outline: none;
border-color: #3d52d5;
background: #fff;
}
.mbt-cp-picker {
display: block;
width: 100%;
height: 36px;
border: 1px solid #dde2ea;
border-radius: 6px;
cursor: pointer;
padding: 2px;
background: none;
}

.mbt-bg-image-panel {
display: flex;
flex-direction: column;
gap: 8px;
}
.mbt-bg-img-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
padding: 0 2px;
}
.mbt-bg-img-tabs {
display: flex;
gap: 3px;
}
.mbt-bg-img-tab {
background: #f4f6f9;
border: 1px solid #e2e7ef;
border-radius: 5px;
padding: 4px 7px;
font-size: 0.75rem;
color: #4b5563;
cursor: pointer;
white-space: nowrap;
transition: background 80ms, color 80ms, border-color 80ms;
}
.mbt-bg-img-tab:hover {
background: #eef1ff;
color: #3d52d5;
border-color: #c0caff;
}
.mbt-bg-img-tab.is-active {
background: #eef1ff;
color: #3d52d5;
border-color: #3d52d5;
font-weight: 600;
}
.mbt-bg-img-tab.is-disabled {
opacity: 0.5;
cursor: not-allowed;
}
.mbt-bg-img-viewmodes {
display: flex;
gap: 2px;
}
.mbt-bg-img-viewmode {
background: none;
border: 1px solid #e2e7ef;
border-radius: 5px;
padding: 3px 7px;
font-size: 0.72rem;
color: #9aa5b4;
cursor: pointer;
transition: background 80ms, color 80ms;
}
.mbt-bg-img-viewmode.is-active {
background: #eef1ff;
color: #3d52d5;
border-color: #c0caff;
}

.mbt-bg-img-grid--grid {
display: grid;
grid-template-rows: repeat(2, 96px);
grid-auto-flow: column;
grid-auto-columns: 96px;
gap: 5px;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 4px;
scrollbar-width: thin;
scrollbar-color: #c8d3e2 transparent;
}

.mbt-bg-img-grid--list {
display: flex;
flex-direction: column;
gap: 4px;
overflow-y: auto;
overflow-x: hidden;
max-height: 240px;
scrollbar-width: thin;
scrollbar-color: #c8d3e2 transparent;
}
.mbt-bg-img-item {
display: block;
background: #f9fafc;
border: 2px solid #edf0f5;
border-radius: 8px;
padding: 0;
cursor: pointer;
overflow: hidden;
transition: border-color 80ms, box-shadow 80ms;
flex-shrink: 0;
text-align: left;
}
.mbt-bg-img-grid--grid .mbt-bg-img-item {
width: 96px;
height: 96px;
border-radius: 6px;
}
.mbt-bg-img-grid--list .mbt-bg-img-item {
width: 100%;
height: auto;
display: grid;
grid-template-columns: 80px minmax(0, 1fr);
align-items: stretch;
border-radius: 8px;
}
.mbt-bg-img-item:hover {
border-color: #c0caff;
box-shadow: 0 2px 8px rgba(61,82,213,0.08);
}
.mbt-bg-img-item.is-selected {
border-color: #3d52d5;
box-shadow: 0 0 0 1px #3d52d5;
}
.mbt-bg-img-grid--grid .mbt-bg-img-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 4px;
}
.mbt-bg-img-grid--list .mbt-bg-img-item img {
width: 80px;
height: 72px;
object-fit: cover;
display: block;
border-radius: 0;
}
.mbt-bg-img-item-meta {
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
padding: 10px 12px;
background: rgba(255,255,255,0.9);
overflow: hidden;
}
.mbt-bg-img-item-meta strong {
font-size: 0.78rem;
font-weight: 600;
color: #2d3748;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
.mbt-bg-img-item-meta small {
font-size: 0.7rem;
color: #61708a;
display: block;
}
.mbt-bg-img-msg {
font-size: 0.78rem;
color: #9aa5b4;
padding: 12px 4px;
text-align: center;
}
.mbt-bg-img-error {
font-size: 0.75rem;
color: #c8363e;
margin: 0;
padding: 4px 2px 0;
}
.mbt-bg-img-controls {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 4px;
border-top: 1px solid #f0f3f8;
margin-top: 2px;
}

.mbt-flyout-opacity-row {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
color: #4b5563;
}
.mbt-flyout-opacity-row input[type="range"] {
flex: 1;
min-width: 0;
accent-color: #3d52d5;
}
.mbt-flyout-opacity-val {
font-size: 0.75rem;
color: #9aa5b4;
min-width: 30px;
text-align: right;
}
.mbt-flyout-remove-btn {
background: none;
border: 1px solid #f0c4c6;
border-radius: 5px;
padding: 5px 8px;
font-size: 0.78rem;
color: #c8363e;
cursor: pointer;
transition: background 80ms;
}
.mbt-flyout-remove-btn:hover {
background: #fff0f1;
}

.puck-ws-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 14px;
border: 1px solid transparent;
border-radius: 14px;
background: transparent;
color: var(--puck-icon);
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
letter-spacing: 0.04em;
transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.puck-ws-toggle.is-active {
background: var(--puck-active-bg);
color: var(--puck-active-icon);
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 1px 2px rgba(20, 35, 60, 0.05);
}

.puck-panel-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 0;
background: transparent;
border-radius: 12px;
color: var(--puck-icon);
cursor: pointer;
flex-shrink: 0;
transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.puck-panel-toggle:hover { background: #eef3f8; color: var(--puck-icon-strong); }
.puck-panel-toggle.is-active {
background: var(--puck-active-bg);
color: var(--puck-active-icon);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}
.puck-left-shell {
position: fixed;
top: calc(var(--puck-admin-offset) + var(--puck-workspace-offset));
left: 0;
bottom: var(--puck-bottom-offset);
width: var(--puck-rail-width);
z-index: 56;
pointer-events: none;
}
.puck-left-rail {
pointer-events: auto;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0px;
height: 100%;
padding: 8px 10px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(230, 235, 242, 0.9);
box-shadow: var(--puck-shadow-soft);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
margin: 10px 0 10px 8px;
box-sizing: border-box;
}
.puck-left-rail-button {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 5px 4px 4px;
width: 100%;
border: 0;
border-radius: 14px;
background: transparent;
color: var(--puck-icon);
cursor: pointer;
transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.puck-left-rail-button:hover,
.puck-left-rail-button:focus-visible {
background: #eef3f8;
color: var(--puck-icon-strong);
outline: none;
}
.puck-left-rail-button.is-active {
background: var(--puck-active-bg);
color: var(--puck-active-icon);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 1px 2px rgba(20, 35, 60, 0.05);
}
.puck-left-rail-label {
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.01em;
text-align: center;
line-height: 1;
white-space: nowrap;
}
.puck-left-rail-button svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.puck-rail-spacer {
flex: 1 1 auto;
min-height: 8px;
}
.puck-rail-avatar {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
color: #ffffff;
font-size: 0.8rem;
font-weight: 700;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(79, 70, 229, 0.30);
align-self: center;
margin-top: 4px;
}

.puck-workspace-bar {
position: fixed;
top: 56px;
left: 0;
right: 0;
z-index: 200;
display: flex;
align-items: center;
gap: 0;
background: rgba(245, 247, 250, 0.94);
border-bottom: 1px solid rgba(230, 235, 242, 0.9);
min-height: 60px;
padding: 0 14px;
box-shadow: 0 10px 28px rgba(20, 35, 60, 0.06);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.customer-editor-body .puck-workspace-bar {
top: 0;
}
.runtime-customer-editor .puck-workspace-bar {
top: 0;
}
.guest-draft-editor-body .puck-app-shell {
--puck-workspace-offset: calc(var(--guest-draft-banner-height, 0px) + 60px);
}
.guest-draft-editor-body .puck-workspace-bar {
top: var(--guest-draft-banner-height, 0px) !important;
z-index: 9000;
background: rgba(255, 255, 255, 0.98);
}
.puck-workspace-panel-toggles {
display: inline-flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
}
.puck-workspace-modules {
display: flex;
align-items: center;
gap: 4px;
overflow-x: auto;
flex: 0 1 auto;
min-width: 0;
padding: 7px 0;
scrollbar-width: none;
}
.puck-workspace-modules::-webkit-scrollbar {
display: none;
}
.analytics-view {
position: fixed;
top: calc(var(--puck-admin-offset) + 60px);
left: 0;
right: 0;
bottom: var(--puck-bottom-offset);
z-index: 180;
overflow: auto;
padding: 28px;
background: #f8fafc;
color: #0f172a;
}
.puck-page-settings-liveurl {
display: inline-block;
margin-top: 4px;
font-size: 0.85rem;
color: rgba(0,0,0,0.6);
text-decoration: none;
font-weight: 500;
}
.puck-page-settings-liveurl:hover { color: rgba(0,0,0,0.85); text-decoration: underline; }
.puck-lang-switcher {
display: inline-flex;
gap: 4px;
align-items: center;
margin-left: 8px;
padding-left: 8px;
border-left: 1px solid rgba(0,0,0,0.1);
}
.puck-lang-btn {
border: 1px solid transparent;
background: transparent;
cursor: pointer;
padding: 3px 5px;
border-radius: 6px;
line-height: 0;
opacity: 0.55;
display: inline-flex;
align-items: center;
justify-content: center;
transition: opacity 0.15s, background 0.15s;
}
.puck-lang-btn svg { display: block; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,0.18); }
.puck-lang-btn:hover { opacity: 0.85; background: rgba(0,0,0,0.06); }
.puck-lang-btn.is-active { opacity: 1; background: rgba(0,0,0,0.1); border-color: rgba(0,0,0,0.18); }
.rental-view {
position: fixed;
top: calc(var(--puck-admin-offset) + 60px);
left: 0;
right: 0;
bottom: var(--puck-bottom-offset);
z-index: 180;
display: flex;
flex-direction: column;
background: #f8fafc;
color: #0f172a;
}
.customer-editor-body .rental-view,
.runtime-customer-editor .rental-view { top: 60px; }
.rental-view .analytics-header { padding: 28px 28px 16px; max-width: 1180px; margin: 0 auto; width: 100%; }
.rental-view-frame {
flex: 1;
width: 100%;
border: 0;
background: transparent;
}
.customer-editor-body .analytics-view,
.runtime-customer-editor .analytics-view {
top: 60px;
}
.guest-draft-editor-body .analytics-view {
top: calc(var(--guest-draft-banner-height, 0px) + 60px);
}
.analytics-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
max-width: 1180px;
margin: 0 auto 24px;
}
.analytics-title {
margin: 0;
font-size: 24px;
font-weight: 760;
letter-spacing: 0;
color: #0f172a;
}
.analytics-subtitle {
margin: 5px 0 0;
font-size: 14px;
color: #64748b;
}
.analytics-close-button {
width: 38px;
height: 38px;
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: 999px;
background: #ffffff;
color: #475569;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
font-size: 26px;
line-height: 1;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.analytics-close-button:hover {
background: #e8f2ff;
border-color: rgba(29, 79, 143, 0.22);
color: #1d4f8f;
transform: translateY(-1px);
}
.analytics-close-button:focus-visible {
outline: 3px solid rgba(59, 130, 246, 0.28);
outline-offset: 2px;
}
.analytics-card-grid,
.analytics-secondary-grid {
display: grid;
max-width: 1180px;
margin: 0 auto 18px;
gap: 16px;
}
.content-add-view {
position: fixed;
top: calc(var(--puck-admin-offset) + 60px);
left: 0;
right: 0;
bottom: var(--puck-bottom-offset);
z-index: 180;
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
gap: 14px;
overflow: hidden;
padding: 22px 32px;
background: #f8fafc;
color: #0f172a;
}
.customer-editor-body .content-add-view,
.runtime-customer-editor .content-add-view {
top: 60px;
}
.guest-draft-editor-body .content-add-view {
top: calc(var(--guest-draft-banner-height, 0px) + 60px);
}
.content-add-view-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
max-width: 1180px;
width: 100%;
margin: 0 auto;
}
.content-add-view-actions {
display: inline-flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
}
.content-add-header-submit {
min-height: 42px;
padding: 0 18px;
border: 0;
border-radius: 999px;
background: #d0782b;
color: #ffffff;
font: inherit;
font-size: 14px;
font-weight: 800;
cursor: pointer;
box-shadow: 0 12px 28px rgba(208, 120, 43, 0.18);
}
.content-add-header-submit:disabled {
opacity: 0.58;
cursor: wait;
}
.content-add-view-title {
margin: 0;
font-size: 24px;
font-weight: 760;
letter-spacing: 0;
color: #0f172a;
}
.content-add-view-subtitle {
margin: 5px 0 0;
font-size: 14px;
color: #64748b;
}
.content-add-view-note {
display: grid;
gap: 4px;
max-width: 1180px;
width: 100%;
margin: 0 auto;
padding: 13px 16px;
border: 1px solid rgba(196, 142, 77, 0.34);
border-radius: 14px;
background: #fff7ed;
color: #633c17;
}
.content-add-view-note strong {
font-size: 14px;
}
.content-add-view-note span {
font-size: 13px;
color: #7c4f22;
}
.content-add-mode-grid {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 12px;
max-width: 1180px;
width: 100%;
margin: 0 auto 2px;
}
.content-add-mode-button {
display: inline-grid;
grid-template-columns: 24px auto;
align-items: center;
gap: 9px;
min-height: 46px;
padding: 0 16px 0 13px;
border: 1px solid rgba(148, 163, 184, 0.34);
border-radius: 14px;
background: #ffffff;
color: #334155;
font: inherit;
font-size: 14px;
font-weight: 800;
cursor: pointer;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
.content-add-mode-button svg {
width: 24px;
height: 24px;
}
.content-add-mode-button:hover,
.content-add-mode-button:focus-visible,
.content-add-mode-button.is-active {
border-color: rgba(92, 157, 227, 0.78);
background: #eef6ff;
color: #153a62;
}
.content-add-post-list {
min-height: 0;
overflow: auto;
display: grid;
align-content: start;
gap: 12px;
max-width: 760px;
width: min(100%, 760px);
margin: 0 auto;
padding: 4px 0 40px;
scrollbar-width: thin;
}
.content-add-post-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 16px;
border: 1px solid rgba(203, 213, 225, 0.82);
border-radius: 16px;
background: #ffffff;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}
.content-add-post-card div {
display: grid;
gap: 4px;
min-width: 0;
}
.content-add-post-card strong {
color: #0f172a;
font-size: 15px;
}
.content-add-post-card span {
color: #64748b;
font-size: 13px;
}
.content-add-post-card a {
flex: 0 0 auto;
color: #9a541c;
font-weight: 800;
text-decoration: none;
}
.content-add-post-card a:hover {
text-decoration: underline;
}
.content-add-empty {
margin: 0;
padding: 18px;
border: 1px dashed rgba(148, 163, 184, 0.58);
border-radius: 16px;
background: #ffffff;
color: #64748b;
text-align: center;
}
.content-add-form {
min-height: 0;
overflow: auto;
display: grid;
align-content: start;
gap: 16px;
max-width: 760px;
width: min(100%, 760px);
margin: 0 auto;
padding: 4px 0 40px;
scrollbar-width: thin;
}
.content-add-form label,
.content-add-upload {
display: grid;
gap: 7px;
}
.content-add-form label span,
.content-add-upload label span {
color: #475569;
font-size: 13px;
font-weight: 780;
}
.content-add-form input,
.content-add-form textarea,
.content-add-form select {
width: 100%;
min-height: 48px;
border: 1px solid rgba(203, 213, 225, 0.94);
border-radius: 14px;
background: #ffffff;
color: #0f172a;
font: inherit;
padding: 11px 13px;
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}
.content-add-form textarea {
resize: vertical;
}
.content-add-upload {
padding: 14px;
border: 1px dashed rgba(196, 142, 77, 0.34);
border-radius: 16px;
background: #fffaf5;
}
.content-add-upload p {
margin: 0;
color: #64748b;
font-size: 13px;
}
.content-add-file-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.content-add-file-list span {
display: inline-flex;
max-width: 100%;
padding: 5px 9px;
border-radius: 999px;
background: #eef4fb;
color: #334155;
font-size: 12px;
}
.content-add-form-message {
padding: 12px 14px;
border-radius: 14px;
font-weight: 700;
}
.content-add-form-message.is-saved {
background: #e8f7ee;
color: #17633b;
}
.content-add-form-message.is-error {
background: #feecec;
color: #9f2d1f;
}
.content-add-submit {
min-height: 48px;
border: 0;
border-radius: 999px;
background: #d0782b;
color: #ffffff;
font: inherit;
font-weight: 800;
cursor: pointer;
box-shadow: 0 12px 28px rgba(208, 120, 43, 0.18);
}
.content-add-submit:disabled {
opacity: 0.58;
cursor: wait;
}
.analytics-card-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.analytics-secondary-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.analytics-card,
.analytics-chart-card,
.analytics-state-card {
background: #ffffff;
border: 1px solid rgba(148, 163, 184, 0.18);
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.07);
}
.analytics-card {
border-radius: 18px;
padding: 18px;
}
.analytics-card-label {
display: block;
font-size: 13px;
color: #64748b;
}
.analytics-card-value {
display: block;
margin-top: 8px;
font-size: 28px;
line-height: 1;
font-weight: 760;
color: #0f172a;
}
.analytics-chart-card {
max-width: 1180px;
margin: 0 auto 18px;
border-radius: 22px;
padding: 20px;
}
.analytics-secondary-grid .analytics-chart-card {
min-width: 0;
margin: 0;
}
.analytics-chart-card h3 {
margin: 0 0 16px;
font-size: 15px;
line-height: 1.2;
font-weight: 760;
color: #172033;
}
.analytics-line-chart {
width: 100%;
min-height: 230px;
}
.analytics-line-chart svg {
display: block;
width: 100%;
height: auto;
}
.analytics-grid-line {
stroke: rgba(148, 163, 184, 0.24);
stroke-width: 1;
}
.analytics-chart-area {
fill: rgba(96, 165, 250, 0.14);
}
.analytics-chart-line {
fill: none;
stroke: #60a5fa;
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
}
.analytics-chart-dot {
fill: #1d4ed8;
stroke: #ffffff;
stroke-width: 2;
}
.analytics-axis-label {
fill: #94a3b8;
font-size: 11px;
font-weight: 650;
}
.analytics-bar-list,
.analytics-device-chart {
display: grid;
gap: 14px;
}
.analytics-bar-row-head,
.analytics-device-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 13px;
color: #334155;
}
.analytics-bar-row-head strong,
.analytics-device-row strong {
font-size: 13px;
color: #0f172a;
}
.analytics-bar-track,
.analytics-device-track {
height: 9px;
overflow: hidden;
border-radius: 999px;
background: #edf2f7;
}
.analytics-bar-track {
margin-top: 8px;
}
.analytics-device-track {
flex: 1 1 auto;
}
.analytics-bar-track span,
.analytics-device-track span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #93c5fd, #3b82f6);
}
.analytics-state-card {
max-width: 1180px;
margin: 0 auto 18px;
border-radius: 18px;
padding: 24px;
color: #64748b;
font-size: 14px;
}
.analytics-state-card.is-error {
color: #b42318;
background: #fff7f7;
border-color: rgba(248, 113, 113, 0.35);
}
.analytics-empty-note {
margin: 0;
padding: 4px 0 2px;
color: #64748b;
font-size: 13px;
line-height: 1.5;
}
@media (max-width: 980px) {
.analytics-card-grid,
.analytics-secondary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 680px) {
.analytics-view {
padding: 20px 14px;
}
.analytics-card-grid,
.analytics-secondary-grid {
grid-template-columns: 1fr;
}
.analytics-card-value {
font-size: 24px;
}
}
.puck-workspace-chip {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 16px;
min-height: 44px;
border: 1px solid rgba(230, 235, 242, 0.9);
border-radius: 14px;
background: rgba(255, 255, 255, 0.94);
color: var(--puck-icon-strong);
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
line-height: 1;
box-shadow: var(--puck-shadow-soft);
transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.puck-workspace-chip:hover {
background: #f8fafd;
border-color: var(--puck-border-soft);
color: var(--puck-icon-strong);
}
.puck-workspace-chip.is-active {
background: var(--puck-active-bg);
color: var(--puck-active-icon);
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 6px 18px rgba(35, 76, 132, 0.12);
}
.puck-workspace-chip-num {
font-size: 0.65rem;
opacity: 0.5;
}
.puck-workspace-divider {
display: none;
}
.puck-workspace-actions {
display: flex;
align-items: center;
gap: 4px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}

.puck-active-modbar {
display: flex;
align-items: center;
gap: 4px;
position: relative;
width: 100%;
}
.puck-active-modbar-name {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 12px 0 0;
font-size: 0.9rem;
font-weight: 600;
color: var(--puck-icon-strong);
white-space: nowrap;
margin-right: 1px;
}
.puck-active-modbar-compact {
gap: 10px;
padding-right: 10px;
}
.puck-active-modbar-note {
color: #748298;
font-size: 0.78rem;
font-weight: 650;
white-space: nowrap;
}

.puck-right-inspector {
position: fixed;
top: calc(var(--puck-admin-offset) + 60px);
right: 0;
bottom: var(--puck-bottom-offset);
z-index: 165;
width: 360px;
display: flex;
flex-direction: column;
min-height: 0;
border-left: 1px solid rgba(213, 222, 235, 0.95);
background: rgba(248, 251, 255, 0.98);
box-shadow: -18px 0 34px rgba(15, 23, 42, 0.08);
color: #162a45;
}
.customer-editor-body .puck-right-inspector,
.runtime-customer-editor .puck-right-inspector {
top: 60px;
}
.guest-draft-editor-body .puck-right-inspector {
top: calc(var(--guest-draft-banner-height, 0px) + 60px);
}
.puck-right-inspector-open [class*="_PuckCanvas-inner_"] {
padding-right: 0 !important;
}
.puck-right-inspector-open .puck-bottom-bar {
padding-right: 0;
}
.puck-inspector-head {
display: grid;
grid-template-columns: 58px minmax(0, 1fr) 36px;
gap: 12px;
align-items: center;
padding: 16px 16px 14px;
border-bottom: 1px solid rgba(220, 228, 239, 0.95);
}
.puck-inspector-close-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
border-radius: 6px;
background: transparent;
color: #64748b;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.puck-inspector-close-btn:hover {
background: rgba(203, 213, 225, 0.4);
color: #1b2a41;
}
.puck-inspector-thumb {
width: 58px;
height: 42px;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid rgba(203, 213, 225, 0.86);
border-radius: 8px;
background: linear-gradient(135deg, #ffffff, #edf3fb);
color: #31506f;
font-size: 0.82rem;
font-weight: 900;
}
.puck-inspector-thumb img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.puck-inspector-eyebrow {
display: block;
margin-bottom: 2px;
color: #748298;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.puck-inspector-head h2 {
margin: 0;
overflow: hidden;
color: #13233a;
font-size: 1.08rem;
font-weight: 820;
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.puck-inspector-tabs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
padding: 12px 14px;
border-bottom: 1px solid rgba(220, 228, 239, 0.75);
}
.puck-inspector-tabs button,
.puck-inspector-segmented button {
min-height: 34px;
border: 1px solid rgba(196, 207, 224, 0.82);
border-radius: 8px;
background: #ffffff;
color: #516278;
font: inherit;
font-size: 0.82rem;
font-weight: 760;
cursor: pointer;
}
.puck-inspector-tabs button:hover,
.puck-inspector-tabs button:focus-visible,
.puck-inspector-tabs button.is-active,
.puck-inspector-segmented button:hover,
.puck-inspector-segmented button:focus-visible,
.puck-inspector-segmented button.is-active {
border-color: rgba(92, 157, 227, 0.78);
background: #eaf4ff;
color: #173e67;
outline: none;
}
.puck-inspector-body {
display: grid;
align-content: start;
gap: 14px;
min-height: 0;
overflow: auto;
padding: 14px;
scrollbar-width: thin;
}
.puck-inspector-section {
display: grid;
gap: 10px;
}
.puck-inspector-section h3 {
margin: 0;
color: #263850;
font-size: 0.82rem;
font-weight: 840;
letter-spacing: 0.01em;
}
.puck-inspector-variant-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.puck-inspector-variant-card {
display: grid;
gap: 7px;
align-content: start;
min-height: 116px;
padding: 10px;
border: 1px solid rgba(198, 210, 226, 0.88);
border-radius: 8px;
background: #ffffff;
color: #17253a;
text-align: left;
cursor: pointer;
}
.puck-inspector-variant-card:hover,
.puck-inspector-variant-card:focus-visible {
border-color: rgba(92, 157, 227, 0.82);
box-shadow: 0 10px 24px rgba(32, 87, 145, 0.1);
outline: none;
}
.puck-inspector-variant-preview {
position: relative;
height: 34px;
overflow: hidden;
border-radius: 6px;
background: #e8eef7;
}
.puck-inspector-variant-preview i,
.puck-inspector-variant-preview b {
position: absolute;
display: block;
border-radius: 999px;
}
.puck-inspector-variant-preview i {
left: 10px;
top: 9px;
width: 58%;
height: 6px;
background: currentColor;
}
.puck-inspector-variant-preview b {
left: 10px;
top: 20px;
width: 36%;
height: 5px;
background: rgba(22, 42, 69, 0.3);
}
.puck-inspector-variant-preview.is-calm { color: #31506f; background: #eef5f3; }
.puck-inspector-variant-preview.is-contrast { color: #ffffff; background: #17253a; }
.puck-inspector-variant-preview.is-editorial { color: #9a541c; background: #fff7ed; }
.puck-inspector-variant-preview.is-image { color: #ffffff; background: linear-gradient(135deg, #7a8797, #263850); }
.puck-inspector-variant-card strong {
font-size: 0.86rem;
font-weight: 840;
}
.puck-inspector-variant-card small {
color: #64748b;
font-size: 0.72rem;
line-height: 1.25;
}
.puck-inspector-segmented {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
gap: 6px;
}
.puck-inspector-swatches {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 7px;
}
.puck-inspector-swatches button {
display: grid;
gap: 5px;
justify-items: center;
min-height: 58px;
padding: 7px 4px;
border: 1px solid rgba(198, 210, 226, 0.9);
border-radius: 8px;
background: #ffffff;
color: #516278;
cursor: pointer;
}
.puck-inspector-swatches button:hover,
.puck-inspector-swatches button:focus-visible,
.puck-inspector-swatches button.is-active {
border-color: rgba(92, 157, 227, 0.88);
background: #eef6ff;
outline: none;
}
.puck-inspector-swatches span {
width: 24px;
height: 24px;
border: 1px solid rgba(15, 23, 42, 0.14);
border-radius: 999px;
background-image:
linear-gradient(45deg, rgba(148, 163, 184, 0.35) 25%, transparent 25%),
linear-gradient(-45deg, rgba(148, 163, 184, 0.35) 25%, transparent 25%);
}
.puck-inspector-swatches small {
font-size: 0.68rem;
font-weight: 760;
}
.puck-inspector-image-field {
min-width: 0;
}
.puck-inspector-image-field .puck-image-upload-shell,
.puck-inspector-image-field .puck-image-upload-card {
padding: 10px;
border-radius: 8px;
}
.puck-inspector-image-field .puck-image-library-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-height: 220px;
}
.puck-inspector-align-row {
display: grid;
grid-template-columns: repeat(3, 42px);
gap: 8px;
}
.puck-inspector-align-row button {
width: 42px;
height: 38px;
border: 1px solid rgba(196, 207, 224, 0.88);
border-radius: 8px;
background: #ffffff;
cursor: pointer;
}
.puck-inspector-align-row button:hover,
.puck-inspector-align-row button:focus-visible,
.puck-inspector-align-row button.is-active {
border-color: rgba(92, 157, 227, 0.82);
background: #eaf4ff;
outline: none;
}
.puck-inspector-align-icon {
display: grid;
gap: 3px;
width: 22px;
margin: 0 auto;
}
.puck-inspector-align-icon > span {
display: block;
height: 2px;
border-radius: 999px;
background: #415166;
}
.puck-inspector-align-icon > span:nth-child(1) { width: 22px; }
.puck-inspector-align-icon > span:nth-child(2) { width: 14px; }
.puck-inspector-align-icon > span:nth-child(3) { width: 18px; }
.puck-inspector-align-icon > span:nth-child(4) { width: 10px; }
.puck-inspector-align-icon.is-left > span { justify-self: start; }
.puck-inspector-align-icon.is-center > span { justify-self: center; }
.puck-inspector-align-icon.is-right > span { justify-self: end; }
.puck-inspector-fields {
display: grid;
gap: 10px;
}
.puck-inspector-field {
display: grid;
gap: 6px;
}
.puck-inspector-field span,
.puck-inspector-check span {
color: #40536d;
font-size: 0.78rem;
font-weight: 800;
}
.puck-inspector-field input,
.puck-inspector-field textarea {
width: 100%;
min-height: 38px;
box-sizing: border-box;
border: 1px solid rgba(196, 207, 224, 0.92);
border-radius: 8px;
background: #ffffff;
color: #162a45;
font: inherit;
font-size: 0.86rem;
padding: 8px 10px;
}
.puck-inspector-field textarea {
resize: vertical;
line-height: 1.4;
}
.puck-inspector-field input:focus,
.puck-inspector-field textarea:focus {
border-color: rgba(92, 157, 227, 0.88);
outline: 3px solid rgba(92, 157, 227, 0.16);
}
.puck-inspector-empty {
padding: 14px;
border: 1px dashed rgba(148, 163, 184, 0.58);
border-radius: 8px;
background: #ffffff;
color: #64748b;
font-size: 0.88rem;
line-height: 1.45;
}
.puck-inspector-advanced {
margin-top: 2px;
border-top: 1px solid rgba(220, 228, 239, 0.86);
padding-top: 10px;
}
.puck-inspector-advanced > button {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 38px;
border: 0;
border-radius: 8px;
background: transparent;
color: #263850;
font: inherit;
font-size: 0.84rem;
font-weight: 830;
cursor: pointer;
}
.puck-inspector-advanced > button:hover,
.puck-inspector-advanced > button:focus-visible {
background: #eef4fb;
outline: none;
}
.puck-inspector-advanced-body {
display: grid;
gap: 10px;
padding-top: 8px;
}
.puck-inspector-check {
display: flex;
align-items: center;
gap: 8px;
}
.puck-inspector-check input {
width: 16px;
height: 16px;
accent-color: #4067ff;
}
@media (max-width: 1120px) {
.puck-right-inspector {
width: 320px;
}
.puck-right-inspector-open [class*="_PuckCanvas-inner_"] {
padding-right: 0 !important;
}
.puck-right-inspector-open .puck-bottom-bar {
padding-right: 0;
}
.puck-active-modbar-note {
display: none;
}
}
.puck-ws-control-group {
display: inline-flex;
align-items: center;
gap: 1px;
}
.puck-ws-control-group-content {
gap: 4px;
}
.puck-ws-control-group-settings {
margin-left: 8px;
}
.puck-ws-push {
flex: 1 1 auto;
min-width: 16px;
}
.puck-ws-dropdown {
position: absolute;
top: calc(100% + 10px);
left: 0;
z-index: 9020;
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(230, 235, 242, 0.92);
border-radius: 18px;
box-shadow: var(--puck-shadow-float);
padding: 8px;
display: flex;
flex-wrap: wrap;
gap: 6px;
min-width: 148px;
white-space: nowrap;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.puck-workspace-sep {
display: block;
width: 1px;
height: 28px;
background: var(--puck-divider-soft);
margin: 0 1px;
flex: 0 0 auto;
}
.puck-ws-sep {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
color: rgba(112, 129, 151, 0.48);
font-size: 1rem;
font-weight: 500;
line-height: 1;
pointer-events: none;
user-select: none;
}
.puck-ws-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 40px;
min-width: 36px;
padding: 0 7px;
border: 1px solid transparent;
border-radius: 14px;
background: transparent;
color: var(--puck-icon);
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
line-height: 1;
box-shadow: none;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.puck-ws-control-group .puck-ws-btn,
.puck-ws-control-group .puck-modbar-btn {
min-width: 36px;
border-color: transparent;
box-shadow: none;
}
.puck-ws-btn:hover:not(:disabled) {
background: #eef3f8;
border-color: transparent;
color: var(--puck-icon-strong);
box-shadow: none;
}
.puck-ws-btn:disabled {
opacity: 0.35;
cursor: default;
}
.puck-ws-btn.is-active {
background: var(--puck-active-bg);
color: var(--puck-active-icon);
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 1px 2px rgba(20, 35, 60, 0.05);
}

.puck-ws-btn.puck-ws-btn-preview {
background: #1e3a5f;
color: #fff;
border-color: #1e3a5f;
padding: 0 18px;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
}
.puck-ws-btn.puck-ws-btn-preview:hover:not(:disabled) {
background: #162a45;
border-color: #162a45;
color: #fff;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.24);
}
.puck-ws-control-group .puck-toolbar-icon-trigger {
width: 42px;
min-width: 42px;
height: 40px;
}
.puck-toolbar-toggle.is-muted {
color: #8293a8;
opacity: 0.72;
}
.puck-toolbar-toggle.is-muted svg {
opacity: 0.86;
}
.puck-ws-btn-danger {
color: #b83030;
border-color: #e0b8b8;
}
.puck-ws-btn-danger:hover:not(:disabled) {
background: #fff0f0;
border-color: #c43f3f;
color: #c43f3f;
}
.puck-ws-label {
font-size: 0.8rem;
color: #708197;
white-space: nowrap;
padding: 0 4px;
}

.puck-ws-btn-link {
font-size: 1.08rem;
padding: 0 10px;
min-width: 44px;
}
.puck-align-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.puck-link-btn-wrap {
position: relative;
}
.puck-text-tone-wrap {
position: relative;
}
.puck-ws-btn-tone {
min-width: 44px;
padding: 0 10px;
}
.puck-ws-tone-icon {
width: 18px;
height: 18px;
}
.puck-text-a-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
min-width: 22px;
min-height: 22px;
font-size: 1.18rem;
font-weight: 800;
line-height: 1;
}
.puck-text-a-icon--outline {
width: 22px;
height: 22px;
min-width: 22px;
min-height: 22px;
color: transparent;
font-size: 1.16rem;
font-weight: 700;
-webkit-text-stroke: 1.35px #334155;
text-stroke: 1.35px #334155;
paint-order: stroke fill;
letter-spacing: -0.025em;
transform: translateY(0.15px);
}
.puck-text-a-icon--template {
width: 22px;
height: 22px;
min-width: 22px;
min-height: 22px;
}
.puck-text-a-icon--tone {
width: 22px;
height: 22px;
min-width: 22px;
min-height: 22px;
}
.puck-text-a-icon--light {
color: #ffffff;
}
.puck-text-a-icon--dark {
color: #1f2937;
}
.puck-text-a-tone-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 6px;
}
.puck-text-a-tone-badge--template {
background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
border: 1px solid #a9b7c9;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}
.puck-text-a-tone-badge--light {
background: #1f2937;
border: 1px solid #1f2937;
}
.puck-text-a-tone-badge--dark {
background: #ffffff;
border: 1px solid #94a3b8;
box-shadow: inset 0 0 0 1px rgba(248, 250, 252, 0.95);
}
.puck-text-a-tone-letter {
position: relative;
top: 0.15px;
font-size: 1.1rem;
font-weight: 800;
line-height: 1;
}
.puck-text-a-tone-letter--template {
color: #334155;
}
.puck-text-a-tone-letter--light {
color: #ffffff;
}
.puck-text-a-tone-letter--dark {
color: #1f2937;
}
.puck-text-tone-popup {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
z-index: 220;
width: 280px;
background: #fff;
border: 1px solid #d5dde9;
border-radius: 14px;
box-shadow: 0 8px 32px rgba(17, 35, 64, 0.16);
overflow: hidden;
}
.puck-text-tone-popup-head {
display: grid;
gap: 2px;
padding: 10px 14px 9px;
border-bottom: 1px solid #eef1f6;
background: #f8fafc;
}
.puck-text-tone-popup-head strong {
font-size: 0.82rem;
color: #162a45;
}
.puck-text-tone-popup-head span {
font-size: 0.72rem;
color: #64748b;
}
.puck-text-tone-popup-list {
display: grid;
gap: 6px;
padding: 10px;
}
.puck-text-tone-option {
display: grid;
gap: 4px;
text-align: left;
padding: 10px 12px;
border: 1px solid #d5dde9;
border-radius: 10px;
background: #fff;
color: #2d3d52;
cursor: pointer;
}
.puck-text-tone-option:hover {
border-color: #4067ff;
background: #f8faff;
}
.puck-text-tone-option.is-active {
border-color: #1e3a5f;
background: #eef4ff;
}
.puck-text-tone-option strong {
font-size: 0.78rem;
}
.puck-text-tone-option span {
font-size: 0.72rem;
line-height: 1.45;
color: #64748b;
}
.puck-link-popup {
position: absolute;
top: 0;
left: calc(100% + 8px);
z-index: 200;
width: 300px;
background: #fff;
border: 1px solid #d5dde9;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(17,35,64,0.16);
overflow: hidden;
}
.puck-link-popup--left {
left: auto;
right: calc(100% + 8px);
}
.puck-link-popup-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px 8px;
border-bottom: 1px solid #eef1f6;
background: #f8fafc;
}
.puck-link-popup-title {
font-size: 0.82rem;
font-weight: 700;
color: #162a45;
flex: 1;
}
.puck-link-popup-tabs {
display: flex;
gap: 4px;
}
.puck-link-tab {
font-size: 0.72rem;
padding: 2px 8px;
border: 1px solid #d5dde9;
border-radius: 20px;
background: #fff;
color: #64748b;
cursor: pointer;
}
.puck-link-tab.is-active {
background: #2f7a6d;
border-color: #2f7a6d;
color: #fff;
}
.puck-link-popup-close {
background: none;
border: none;
cursor: pointer;
color: #64748b;
font-size: 0.9rem;
padding: 2px 4px;
line-height: 1;
}
.puck-link-popup-body {
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.puck-link-type-row {
display: flex;
gap: 6px;
}
.puck-link-type-btn {
flex: 1;
font-size: 0.76rem;
padding: 5px 8px;
border: 1px solid #d5dde9;
border-radius: 8px;
background: #fff;
color: #516278;
cursor: pointer;
transition: all 100ms;
}
.puck-link-type-btn.is-active {
background: #2f7a6d;
border-color: #2f7a6d;
color: #fff;
}
.puck-link-input {
width: 100%;
box-sizing: border-box;
padding: 7px 10px;
border: 1px solid #d5dde9;
border-radius: 8px;
font-size: 0.82rem;
color: #162a45;
outline: none;
pointer-events: auto !important;
}
.puck-link-input:focus {
border-color: #2f56ea;
box-shadow: 0 0 0 3px rgba(47,86,234,0.1);
}
.puck-link-newtab {
font-size: 0.78rem;
color: #516278;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
user-select: none;
}
.puck-link-newtab input {
pointer-events: auto !important;
}
.puck-link-clear {
background: none;
border: none;
color: #c43f3f;
font-size: 0.76rem;
cursor: pointer;
padding: 0;
text-align: left;
}

.puck-outline-list {
display: flex;
flex-direction: column;
gap: 3px;
padding: 8px;
}
.puck-outline-empty {
padding: 24px 16px;
color: #94a3b8;
font-size: 0.82rem;
text-align: center;
}
.puck-theme-opacity-row-stacked,
.puck-theme-attachment-row-stacked {
display: grid;
gap: 8px;
}
.puck-theme-field-stacked {
align-items: stretch;
}
.puck-page-settings {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: 18px;
min-height: 0;
overflow: hidden;
padding-right: 0;
}
.puck-page-settings-tabs {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.puck-page-settings-tab {
min-height: 44px;
padding: 10px 18px;
border: 1px solid rgba(198, 212, 235, 0.92);
border-radius: 999px;
background: rgba(255, 255, 255, 0.76);
color: #516277;
font-size: 15px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.puck-page-settings-tab.is-active {
background: #233650;
border-color: #233650;
color: #fff;
}
.puck-page-settings-content {
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding-right: 6px;
display: grid;
align-content: start;
}
.puck-page-settings-bg-none,
.puck-page-settings-bg-color {
grid-template-rows: auto minmax(0, 1fr);
align-content: start;
}
.puck-page-settings-bg-none .puck-theme-field,
.puck-page-settings-bg-color .puck-theme-field {
align-content: start;
}
.puck-page-settings-page-grid {
display: grid;
gap: 14px;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: start;
align-content: start;
}
.puck-page-settings-workspace {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(280px, 340px);
gap: 20px;
align-items: start;
min-height: 0;
}
.puck-page-settings-workspace-main,
.puck-page-settings-workspace-sidebar {
min-width: 0;
}
.puck-page-settings-workspace-main {
min-height: 0;
display: grid;
gap: 14px;
align-content: start;
}
.puck-page-settings-workspace-main-library {
height: 100%;
}
.puck-page-settings-workspace-main-library .puck-theme-field {
min-height: 0;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
}
.puck-page-settings-workspace-main-sharing .puck-theme-field {
gap: 8px;
}
.puck-page-settings-workspace-main-sharing .puck-theme-field textarea {
min-height: 132px;
resize: vertical;
}
.puck-page-settings-workspace-sidebar {
position: sticky;
top: 0;
overflow: visible;
align-self: start;
}
.puck-page-settings-sidebar-card {
display: grid;
gap: 12px;
padding: 14px 16px;
border-radius: 20px;
border: 1px solid rgba(171, 190, 219, 0.32);
background: rgba(255, 255, 255, 0.72);
box-shadow: 0 10px 24px rgba(17, 35, 64, 0.08);
}
.puck-page-settings-sidebar-card .puck-theme-attachment-row-stacked {
grid-template-columns: auto 1fr;
align-items: center;
gap: 10px 12px;
}
.puck-page-settings-sidebar-card .puck-theme-field-stacked {
gap: 8px;
}
.puck-page-settings-sidebar-card .puck-palette-color-field {
gap: 8px;
}
.puck-page-settings-sidebar-card .puck-palette-color-swatches {
gap: 6px;
}
.puck-page-settings-sidebar-preview {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 4px;
}
.puck-page-settings-sidebar-preview-thumb {
width: 112px;
height: 72px;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(64, 103, 255, 0.2);
background: rgba(255, 255, 255, 0.82);
flex: 0 0 auto;
}
.puck-page-settings-sidebar-preview-thumb-large {
width: 100%;
height: 180px;
}
.puck-page-settings-sidebar-preview-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.puck-page-settings-sidebar-preview-share-block {
display: grid;
align-items: stretch;
justify-items: stretch;
gap: 10px;
padding-top: 0;
}
.puck-page-share-candidate-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.puck-page-share-candidate {
display: grid;
gap: 8px;
padding: 8px;
border: 1px solid rgba(198, 212, 235, 0.92);
border-radius: 16px;
background: rgba(255, 255, 255, 0.82);
color: #233650;
text-align: left;
cursor: pointer;
}
.puck-page-share-candidate img {
width: 100%;
aspect-ratio: 1.2;
object-fit: cover;
border-radius: 12px;
background: rgba(232, 239, 248, 0.8);
}
.puck-page-share-candidate span {
font-size: 13px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.puck-page-share-candidate.is-selected {
border-color: #233650;
box-shadow: inset 0 0 0 1px rgba(35, 54, 80, 0.14), 0 10px 24px rgba(15, 23, 42, 0.1);
}
.puck-page-share-empty {
grid-column: 1 / -1;
padding: 14px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.72);
color: #61708a;
font-size: 13px;
text-align: center;
}
.puck-page-settings-sidebar-preview-share {
min-height: 120px;
}
.puck-page-settings-empty-state {
display: grid;
gap: 8px;
padding: 18px 20px;
border: 1px solid rgba(171, 190, 219, 0.32);
border-radius: 20px;
background: rgba(255, 255, 255, 0.72);
color: #516277;
}
.puck-page-settings-empty-state strong {
color: #233650;
font-size: 16px;
}
.puck-page-settings-empty-state p {
margin: 0;
line-height: 1.6;
}
@media (max-height: 920px) {
.puck-page-settings {
gap: 14px;
}
.puck-page-settings-page-grid {
gap: 10px;
}
.puck-page-settings-workspace {
gap: 16px;
}
.puck-page-settings-sidebar-card {
gap: 10px;
padding: 12px 14px;
}
.puck-page-settings-sidebar-preview-thumb {
width: 104px;
height: 66px;
}
.puck-image-library-tab {
min-height: 40px;
padding: 8px 12px;
}
.puck-image-library-item-list {
min-height: 84px;
grid-template-columns: 96px minmax(0, 1fr);
}
.puck-image-library-item-list img {
height: 84px;
}
}
@media (max-width: 980px) {
.puck-page-settings-modal-panel {
width: min(900px, calc(100vw - 24px));
height: min(860px, calc(100vh - 24px));
}
.puck-page-settings-page-grid,
.puck-page-settings-workspace {
grid-template-columns: 1fr;
}
.puck-page-settings-workspace-sidebar {
position: static;
}
.puck-page-share-candidate-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.puck-page-settings-modal-panel {
width: calc(100vw - 16px);
height: calc(100vh - 16px);
padding: 16px;
border-radius: 22px;
}
.puck-menu-builder-modal {
padding: 8px;
}
.puck-image-library-grid-comfortable,
.puck-image-library-grid-compact {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.puck-image-library-item-list {
grid-template-columns: 88px minmax(0, 1fr);
min-height: 88px;
}
.puck-image-library-item-list img {
height: 88px;
}
}
.puck-outline-item {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 8px;
border-radius: 8px;
cursor: pointer;
border: 1px solid transparent;
background: #fff;
transition: background 80ms, border-color 80ms;
user-select: none;
}
.puck-outline-item:hover {
background: #f1f5fa;
border-color: #d5dde9;
}
.puck-outline-item.is-selected {
background: #eff3ff;
border-color: #b8c8fa;
}
.puck-outline-item.is-hidden {
opacity: 0.45;
}
.puck-outline-item.is-dragging {
opacity: 0.35;
background: #f1f5fa;
}
.puck-outline-drop-line {
height: 2px;
background: #2f56ea;
border-radius: 2px;
margin: 0 4px;
pointer-events: none;
}
.puck-outline-drop-line-child {
margin-left: 24px;
}
.puck-outline-item.is-drop-into {
outline: 2px dashed #2f56ea;
background: rgba(47, 86, 234, 0.05);
}
.puck-outline-item.is-sectionband {
border-left: 3px solid #64748b;
}
.puck-outline-expand {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: #f8fafc;
border: 1px solid #d9e2ee;
border-radius: 5px;
cursor: pointer;
font-size: 0.8rem;
line-height: 1;
color: #64748b;
padding: 0;
flex-shrink: 0;
font-family: ui-monospace, monospace;
font-weight: 700;
}
.puck-outline-expand:hover {
background: #eef3f8;
color: #334155;
}
.puck-outline-children {
margin-left: 20px;
border-left: 2px solid #e2e8f0;
padding-left: 4px;
margin-bottom: 2px;
}
.puck-outline-child {
padding-left: 8px !important;
font-size: 0.82rem;
}
.puck-outline-child-empty {
padding: 6px 12px;
font-size: 0.78rem;
color: #94a3b8;
font-style: italic;
}
.puck-outline-child-empty.is-drop-target {
color: #2f56ea;
background: rgba(47, 86, 234, 0.06);
border-radius: 4px;
}
.puck-outline-section-end {
width: 34px;
height: 8px;
margin: 0 0 7px 0;
border-left: 2px solid #e2e8f0;
border-bottom: 2px solid #e2e8f0;
border-bottom-left-radius: 8px;
}
.puck-outline-drag {
display: flex;
align-items: center;
cursor: grab;
flex-shrink: 0;
opacity: 0.5;
padding: 2px;
}
.puck-outline-item:hover .puck-outline-drag {
opacity: 1;
}
.puck-outline-drag:active {
cursor: grabbing;
}
.puck-outline-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.puck-outline-label {
font-size: 0.8rem;
font-weight: 600;
color: #162a45;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.puck-outline-preview {
font-size: 0.72rem;
color: #64748b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.puck-outline-badge {
font-size: 0.65rem;
padding: 1px 5px;
border-radius: 4px;
background: #e2e8f0;
color: #64748b;
flex-shrink: 0;
}

[class*="_PuckCanvas-inner_"] {
height: auto !important;
min-height: 0 !important;
padding: 0 16px 0 16px !important;
box-sizing: border-box !important;
background: var(--fb-page-bg, #f5efe3) !important;
overflow: visible !important;
align-items: center !important;
}

.puck-app-shell [class*="_PuckCanvas_"]:not([class*="_PuckCanvas-"]) {
padding-top: 0 !important;
}

.puck-app-shell [class*="_PuckCanvas_"]:not([class*="_PuckCanvas-inner_"]):not([class*="_PuckCanvas-root_"]) {
background: var(--fb-page-bg, #f5efe3) !important;
}

.puck-workspace-active [class*="_PuckCanvas-inner_"] {
padding-top: var(--puck-workspace-offset) !important;
}

#puck-canvas-root {
position: relative !important;
top: auto !important;
bottom: auto !important;
align-self: flex-start !important;
width: 100% !important;
height: auto !important;
overflow: visible !important;
box-shadow: 0 2px 16px 0 rgba(0,0,0,0.13);
background: transparent !important;
}

#puck-zoom-wrapper {
margin-bottom: 120px;
}

.puck-bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 50;
height: 36px;
display: flex;
align-items: center;
gap: 10px;
background: #f1f5fa;
border-top: 1px solid #d5dde9;
padding: 0 14px;
font-size: 0.78rem;
}
.puck-bottom-spacer { flex: 1; }
.puck-bottom-save {
font-size: 0.75rem;
white-space: nowrap;
color: #64748b;
}
.puck-bottom-save-saving { color: #64748b; }
.puck-bottom-save-saved { color: #16a34a; font-weight: 600; }
.puck-bottom-save-error { color: #c43f3f; font-weight: 700; }
.puck-bottom-zoom {
display: flex;
align-items: center;
gap: 6px;
}
.puck-zoom-btn {
width: 22px;
height: 22px;
border: 1px solid #d5dde9;
border-radius: 5px;
background: #fff;
color: #162a45;
font-size: 1rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.puck-zoom-btn:hover { background: #e8eef7; }
.puck-zoom-slider {
width: 180px;
accent-color: #516278;
cursor: pointer;
}
.puck-zoom-label {
font-size: 0.75rem;
color: #516278;
min-width: 36px;
text-align: right;
}
.puck-zoom-reset {
background: none;
border: none;
color: #2f56ea;
font-size: 0.85rem;
cursor: pointer;
padding: 0 2px;
line-height: 1;
}
.puck-bottom-help {
width: 22px;
height: 22px;
border-radius: 50%;
background: #2f56ea;
color: #fff;
font-size: 0.75rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
flex-shrink: 0;
}
.puck-bottom-help:hover { background: #2445c3; }

.puck-bottom-pages {
display: flex;
align-items: center;
gap: 6px;
background: #fff;
border: 1px solid #d5dde9;
border-radius: 6px;
padding: 2px 4px;
}
.puck-page-nav-btn {
width: 24px;
height: 24px;
border: none;
border-radius: 4px;
background: transparent;
color: #162a45;
font-size: 0.95rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.puck-page-nav-btn:hover:not(:disabled) { background: #e8eef7; }
.puck-page-nav-btn:disabled {
color: #b8c1d0;
cursor: not-allowed;
}
.puck-page-nav-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
padding: 0 4px;
}
.puck-page-nav-count {
color: #64748b;
font-variant-numeric: tabular-nums;
}
.puck-page-nav-title {
color: #162a45;
font-weight: 600;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.puck-image-upload-error {
margin: 0;
color: #c43f3f;
font-size: 0.92rem;
}


.puck-element-mini-toolbar {
pointer-events: all;
}
.puck-element-mini-toolbar-inner {
position: relative;
display: inline-flex;
align-items: flex-start;
gap: 4px;
background: rgba(255, 255, 255, 0.76);
border: 1px solid rgba(198, 212, 235, 0.92);
border-radius: 10px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
padding: 4px 6px;
}
.puck-element-mini-btn {
display: inline-flex;
align-items: center;
gap: 5px;
height: 30px;
padding: 0 10px;
border: 1px solid rgba(198, 212, 235, 0.9);
border-radius: 7px;
background: rgba(255, 255, 255, 0.62);
color: #233650;
font-size: 0.83rem;
font-weight: 600;
cursor: pointer;
transition: background 100ms, border-color 100ms;
white-space: nowrap;
}
.puck-element-mini-btn:hover { background: rgba(255, 255, 255, 0.78); border-color: #9aafc8; }
.puck-element-mini-btn.is-active { background: #2f7a6d; color: #fff; border-color: #2f7a6d; }
.puck-inline-link-toolbar {
display: grid;
grid-template-columns: 1fr;
gap: 6px;
min-width: 220px;
}
.puck-inline-link-toolbar-label {
font-size: 0.76rem;
font-weight: 700;
color: #42526b;
}
.puck-inline-link-input {
width: 100%;
min-width: 0;
height: 30px;
border: 1px solid #cfdae7;
border-radius: 8px;
padding: 0 10px;
font-size: 0.82rem;
color: #22344e;
background: #fff;
}
.puck-inline-link-input-label {
font-weight: 600;
}
.puck-inline-link-check {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.79rem;
color: #42526b;
}
.puck-inline-link-clear {
display: inline-flex;
align-items: center;
justify-content: center;
height: 28px;
border: 1px solid #f5c0c0;
border-radius: 8px;
background: #fff5f5;
color: #c43f3f;
font-size: 0.79rem;
font-weight: 600;
cursor: pointer;
}

.puck-image-canvas-overlay {
display: inline-flex;
align-items: center;
gap: 6px;
position: relative;
background: rgba(255, 255, 255, 0.66);
border: 1px solid rgba(198, 212, 235, 0.92);
border-radius: 10px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
padding: 5px 8px;
pointer-events: all;
}
.puck-img-overlay-btn {
display: inline-flex;
align-items: center;
gap: 5px;
height: 28px;
padding: 0 10px;
border: 1px solid rgba(198, 212, 235, 0.9);
border-radius: 7px;
background: rgba(255, 255, 255, 0.5);
color: #233650;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: background 100ms;
white-space: nowrap;
}
.puck-img-overlay-btn:hover { background: rgba(255, 255, 255, 0.64); }
.puck-img-overlay-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.puck-img-overlay-btn-danger { color: #c43f3f; border-color: #f5c0c0; background: #fff5f5; }
.puck-img-overlay-btn-danger:hover { background: #ffe0e0; }
.puck-img-overlay-btn.is-active { color: #fff; background: #2f7a6d; border-color: #2f7a6d; }

.puck-img-library-backdrop {
position: fixed;
inset: 0;
z-index: 99998;
background: rgba(15, 23, 42, 0.55);
}

.puck-img-overlay-library-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99999;
width: min(720px, calc(100vw - 120px));
max-width: calc(100vw - 40px);
max-height: min(calc(100dvh - 80px), 85vh);
background: #fff;
border: 1px solid #d5dde9;
border-radius: 14px;
box-shadow: 0 16px 48px rgba(15, 23, 42, 0.32);
padding: 16px;
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
}
@media (max-width: 900px) {
.puck-img-overlay-library-popup {
width: calc(100vw - 24px);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.puck-img-overlay-library-popup .puck-image-library-tab {
min-height: 34px;
font-size: 13px;
padding: 6px 12px;
border-radius: 8px;
}
.puck-img-overlay-library-popup .puck-image-upload-field-with-library {
display: flex;
flex-direction: column;
min-height: 0;
flex: 1;
overflow: hidden;
}
.puck-img-overlay-library-popup .puck-image-library-toolbar {
flex-shrink: 0;
}
.puck-img-overlay-library-popup .puck-image-library-grid {
flex: 1;
min-height: 0;
height: auto !important;
overflow-y: auto;
}
.puck-img-overlay-library-popup .puck-image-library-grid-compact {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.puck-bg-badge-wrap {
position: relative;
display: inline-flex;
align-items: center;
pointer-events: all;
}
.puck-bg-badge {
gap: 6px;
min-width: 0;
padding-inline: 10px;
font-size: 0.76rem;
font-weight: 600;
}
.puck-bg-badge.is-active {
background: var(--puck-active-bg);
color: var(--puck-active-icon);
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 1px 2px rgba(20, 35, 60, 0.05);
}
.puck-bg-badge:hover:not(:disabled) {
border-color: transparent;
color: var(--puck-icon-strong);
}
.puck-bg-badge.is-active:hover:not(:disabled) {
color: var(--puck-active-icon);
border-color: transparent;
}
.puck-bg-badge-popup {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 220;
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(198, 212, 235, 0.92);
border-radius: 10px;
padding: 8px;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
flex-direction: column;
gap: 6px;
min-width: 180px;
width: min(420px, calc(100vw - 48px));
max-height: min(520px, calc(100vh - 110px));
overflow: auto;
}
.puck-bg-badge-icon {
font-size: 0.72rem;
line-height: 1;
color: currentColor;
}
.puck-bg-badge-popup-row {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.puck-bg-badge-popup .puck-modbar-btn {
color: var(--puck-icon);
background: transparent;
border: 1px solid transparent;
}
.puck-bg-badge-popup .puck-modbar-btn:hover:not(:disabled) {
background: #eef3f8;
color: var(--puck-icon-strong);
}
.puck-bg-badge-popup .puck-modbar-btn.is-active {
background: var(--puck-active-bg);
border-color: transparent;
color: var(--puck-active-icon);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 1px 2px rgba(20, 35, 60, 0.05);
}
.puck-bg-badge-library {
padding-top: 2px;
}
.puck-bg-badge-library .puck-image-library-toolbar {
gap: 6px;
}
.puck-bg-badge-library .puck-image-library-tab {
min-height: 38px;
padding: 8px 12px;
font-size: 0.95rem;
}
.puck-bg-badge-library .puck-image-library-viewmode {
min-height: 34px;
font-size: 0.82rem;
padding: 0 10px;
}
.puck-bg-badge-library .puck-image-library-grid {
max-height: 280px;
padding-right: 4px;
}
.puck-bg-badge-library .puck-image-library-grid-compact {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.puck-bg-badge-library .puck-image-library-item-meta {
padding: 10px 12px;
}
.puck-bg-badge-library .puck-image-library-delete {
width: 28px;
height: 28px;
}
.puck-bg-badge-swatches {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 4px 0;
align-items: center;
}
.puck-bg-swatch {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
padding: 0;
flex: 0 0 auto;
box-shadow: 0 0 0 1px rgba(198, 212, 235, 0.92);
transition: border-color 0.1s;
}
.puck-bg-swatch:hover { border-color: rgba(81, 98, 120, 0.45); }
.puck-bg-swatch.is-active { border-color: #516278; }
.puck-bg-color-input {
width: 28px;
height: 22px;
border-radius: 4px;
border: none;
cursor: pointer;
padding: 0;
background: none;
flex: 0 0 auto;
}
.puck-bg-badge-opacity-row {
display: flex;
align-items: center;
gap: 6px;
padding: 2px 0;
color: #233650;
font-size: 0.75rem;
}
.puck-bg-badge-opacity-row input[type="range"] {
flex: 1;
accent-color: #516278;
cursor: pointer;
}
.puck-bg-badge-opacity-value {
min-width: 34px;
text-align: right;
font-size: 0.75rem;
color: #516278;
}
.puck-modbar-btn-danger {
color: #f87171;
background: rgba(239,68,68,0.15);
}
.puck-img-overlay-sep {
width: 1px;
height: 20px;
background: #d8e0ed;
margin: 0 2px;
flex: 0 0 auto;
}

.puck-module-bar,
.puck-textimage-module-bar {
display: flex;
flex-direction: column;
gap: 4px;
pointer-events: all;
}

.puck-module-bar-row {
display: flex;
align-items: center;
gap: 3px;
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(230, 235, 242, 0.92);
border-radius: 18px;
padding: 7px 7px;
min-height: 56px;
box-shadow: var(--puck-shadow-float);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}

.puck-module-bar-sep {
width: 1px;
height: 28px;
background: var(--puck-divider-soft);
flex: 0 0 auto;
margin: 0 1px;
}

.puck-modbar-btn {
color: var(--puck-icon);
cursor: pointer;
white-space: nowrap;
background: transparent;
border: 1px solid transparent;
border-radius: 14px;
align-items: center;
justify-content: center;
height: 40px;
min-width: 40px;
padding: 0 8px;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1;
box-shadow: none;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
display: inline-flex;
gap: 3px;
}
.puck-modbar-btn:hover:not(:disabled) {
background: #eef3f8;
border-color: transparent;
color: var(--puck-icon-strong);
box-shadow: none;
}
.puck-modbar-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.puck-modbar-btn.is-active {
background: var(--puck-active-bg);
color: var(--puck-active-icon);
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 1px 2px rgba(20, 35, 60, 0.05);
}

.puck-modbar-btn-add {
background: rgba(255, 255, 255, 0.72);
}
.puck-modbar-btn-add:hover:not(:disabled) { background: #eef3f8; }

.puck-modbar-btn svg,
.puck-ws-btn svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.puck-modbar-pattern-menu {
display: flex;
flex-wrap: wrap;
gap: 6px;
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(230, 235, 242, 0.92);
border-radius: 18px;
padding: 10px;
box-shadow: var(--puck-shadow-float);
}
.puck-toolbar-icon-menu {
position: relative;
display: inline-flex;
margin-right: 6px;
}
.puck-toolbar-icon-menu:last-child {
margin-right: 0;
}
.puck-toolbar-icon-trigger {
min-width: 46px;
width: 46px;
padding: 0 2px;
gap: 3px;
}
a.puck-toolbar-icon-trigger {
text-decoration: none;
}
.puck-toolbar-choice-icon {
width: 20px;
height: 20px;
flex: 0 0 auto;
}
.puck-gallery-size-icon {
width: 22px;
height: 22px;
flex: 0 0 auto;
}
.puck-toolbar-icon-chevron {
width: 12px;
height: 12px;
opacity: 0.68;
margin-left: 0;
}
.puck-toolbar-icon-popover {
position: absolute;
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
z-index: 20;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
width: 58px;
padding: 8px 7px;
border: 1px solid rgba(214, 224, 239, 0.92);
border-radius: 16px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.98));
box-shadow: 0 16px 38px rgba(20, 35, 60, 0.14);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.puck-toolbar-icon-option {
position: relative;
width: 100%;
min-width: 0;
height: 44px;
padding: 0;
}
.puck-toolbar-icon-option:hover:not(:disabled),
.puck-toolbar-icon-option:focus-visible {
background: rgba(236, 243, 251, 0.96);
border-color: rgba(183, 201, 228, 0.34);
color: var(--puck-icon-strong);
outline: none;
}
.puck-toolbar-icon-option.is-active,
.puck-toolbar-icon-trigger.is-active {
background: linear-gradient(180deg, #edf5ff, #dcecff);
border-color: rgba(146, 180, 225, 0.56);
color: #224b84;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.72),
0 3px 10px rgba(64, 103, 255, 0.12);
}
.puck-toolbar-icon-option::after {
content: attr(data-tooltip);
position: absolute;
top: 50%;
left: calc(100% + 10px);
transform: translateY(-50%) translateX(-4px);
opacity: 0;
pointer-events: none;
padding: 6px 8px;
border-radius: 9px;
background: rgba(25, 36, 54, 0.94);
color: #fff;
font-size: 0.74rem;
font-weight: 600;
line-height: 1.1;
white-space: nowrap;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.2);
transition: opacity 120ms ease, transform 120ms ease;
}
.puck-toolbar-icon-option:hover::after,
.puck-toolbar-icon-option:focus-visible::after {
opacity: 1;
transform: translateY(-50%) translateX(0);
}

.puck-workspace-history {
display: flex;
align-items: center;
gap: 4px;
padding: 0 6px;
border-left: 1px solid rgba(220, 229, 239, 0.9);
border-right: 1px solid rgba(220, 229, 239, 0.9);
margin: 0 6px;
}
.puck-ws-btn-history {
font-size: 1.06rem;
min-width: 40px;
}

.admin-body-puck .puck-site-shell .module-spacing.is-editor-preview .module-spacing-block {
min-height: 24px;
}
.admin-body-puck .puck-site-shell .module-spacing.module-spacing-compact.is-editor-preview .module-spacing-block {
min-height: 24px;
height: 24px;
}
.admin-body-puck .puck-site-shell .module-spacing.module-spacing-normal.is-editor-preview .module-spacing-block {
min-height: 64px;
height: 64px;
}
.admin-body-puck .puck-site-shell .module-spacing.module-spacing-airy.is-editor-preview .module-spacing-block {
min-height: 128px;
height: 128px;
}

.module-gallery-overlay-editor-hint {
opacity: 1 !important;
background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.40) 60%, rgba(0,0,0,0.08) 100%) !important;
}

.gallery-inline-placeholder {
color: #ffffff !important;
font-style: italic !important;
font-weight: 400 !important;
background: rgba(12, 15, 22, 0.64) !important;
border: 1.5px dashed rgba(255, 255, 255, 0.5) !important;
border-radius: 10px !important;
padding: 0.45rem 0.8rem !important;
display: inline-block !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
}

.gallery-inline-editing-active [data-gallery-inline] {
display: block !important;
color: #ffffff !important;
background: rgba(12, 15, 22, 0.64) !important;
padding: 0.45rem 0.8rem !important;
border-radius: 10px !important;
border: 1.5px dashed rgba(255, 255, 255, 0.5) !important;
cursor: text !important;
min-width: 60px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
}

[data-gallery-inline][contenteditable="true"] {
cursor: text !important;
min-width: 40px;
display: inline-block;
}
[data-gallery-inline][contenteditable="true"]:focus {
outline: 2px dashed rgba(96, 165, 250, 0.95) !important;
outline-offset: 3px;
border-radius: 10px;
}

[contenteditable="true"]:focus {
outline: 2px solid rgba(47, 86, 234, 0.3) !important;
outline-offset: 2px;
border-radius: 3px;
}

[data-gallery-inline][contenteditable="true"]:focus {
outline: 2px dashed rgba(96, 165, 250, 0.95) !important;
outline-offset: 1px;
}

.puck-site-shell .module-card-grid-item {
overflow: hidden;
}

.module-card-grid-editor-placeholder {
display: block !important;
opacity: 1 !important;
}
h2.module-card-grid-editor-placeholder {
font-size: 1.1rem !important;
font-weight: 600 !important;
font-style: italic;
color: #ffffff !important;
border: 1.5px dashed rgba(255, 255, 255, 0.5) !important;
border-radius: 10px !important;
background: rgba(12, 15, 22, 0.64) !important;
padding: 0.45rem 0.8rem !important;
min-height: 1.6em;
margin: 0 !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
}
p.module-card-grid-editor-placeholder {
font-size: 0.84rem !important;
font-weight: 400 !important;
font-style: italic;
color: #ffffff !important;
border: 1.5px dashed rgba(255, 255, 255, 0.5) !important;
border-radius: 10px !important;
background: rgba(12, 15, 22, 0.64) !important;
padding: 0.45rem 0.8rem !important;
min-height: 1.4em;
margin: 0 !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
}

.module-text-outline,
.module-text-outline h1,
.module-text-outline h2,
.module-text-outline h3,
.module-text-outline p,
.module-text-outline span,
.module-text-outline strong,
.module-text-outline small {
text-shadow:
-1px -1px 0 rgba(0,0,0,0.85),
1px -1px 0 rgba(0,0,0,0.85),
-1px 1px 0 rgba(0,0,0,0.85),
1px 1px 0 rgba(0,0,0,0.85) !important;
}


.card-grid-inline-placeholder {
color: #ffffff !important;
font-style: italic !important;
}

.card-grid-inline-editing-active [data-card-grid-inline] {
display: block !important;
cursor: text !important;
margin-bottom: 4px !important;
min-height: 1.4em !important;
}
.card-grid-inline-editing-active [data-card-grid-inline].card-grid-inline-placeholder {
color: #ffffff !important;
background: rgba(12, 15, 22, 0.64) !important;
border: 1.5px dashed rgba(255, 255, 255, 0.5) !important;
border-radius: 10px !important;
padding: 0.45rem 0.8rem !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
}

[data-card-grid-inline][contenteditable="true"]:focus {
outline: none !important;
border: 2px dashed rgba(96, 165, 250, 0.95) !important;
border-radius: 10px !important;
}

.puck-pages-panel {
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
}
.puck-pages-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px 8px;
border-bottom: 1px solid #e8edf5;
}
.puck-pages-panel-title {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #7a8aaa;
}
.puck-pages-add-btn {
width: 24px;
height: 24px;
border-radius: 6px;
border: 1px solid #d0daea;
background: #f7f8fa;
color: #233650;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 100ms;
}
.puck-pages-add-btn:hover { background: #eceff3; }
.puck-pages-list {
list-style: none;
margin: 0;
padding: 6px 0;
overflow-y: auto;
flex: 1;
}
.puck-pages-item { margin: 0; position: relative; }
.puck-pages-rename-btn {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
border: none;
background: transparent;
color: #9aaac4;
border-radius: 4px;
cursor: pointer;
font-size: 0.85rem;
opacity: 0;
transition: opacity 80ms, background 80ms;
}
.puck-pages-item:hover .puck-pages-rename-btn,
.puck-pages-item.is-active .puck-pages-rename-btn { opacity: 1; }
.puck-pages-rename-btn:hover { background: #dfe5ee; color: #4b5b73; }
.puck-pages-bg-btn {
position: absolute;
right: 34px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
border: none;
background: transparent;
color: #9aaac4;
border-radius: 4px;
cursor: pointer;
font-size: 0.85rem;
opacity: 0;
transition: opacity 80ms, background 80ms;
}
.puck-pages-item:hover .puck-pages-bg-btn,
.puck-pages-item.is-active .puck-pages-bg-btn { opacity: 1; }
.puck-pages-bg-btn:hover { background: #dfe5ee; color: #4b5b73; }

.puck-page-bg-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.puck-page-bg-modal {
background: #fff;
border-radius: 12px;
width: min(720px, 100%);
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
}
.puck-page-bg-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 24px;
border-bottom: 1px solid #e5eaf2;
}
.puck-page-bg-modal-header h2 { margin: 0; font-size: 1.05rem; color: #162a45; }
.puck-page-bg-modal-close {
background: #162a45;
color: #fff;
border: none;
border-radius: 100px;
padding: 6px 16px;
font-size: 0.85rem;
cursor: pointer;
}
.puck-page-bg-modal-close:hover { background: #233650; }
.puck-page-bg-modal-body {
padding: 20px 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.puck-pages-item-btn {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
padding: 8px 14px;
border: none;
background: transparent;
cursor: pointer;
text-align: left;
border-radius: 0;
transition: background 80ms;
}
.puck-pages-item-btn:hover { background: #eef1f5; }
.puck-pages-item.is-active .puck-pages-item-btn {
background: #eef1f5;
border-left: 3px solid #4b5b73;
padding-left: 11px;
}
.puck-pages-item-title {
font-size: 0.88rem;
font-weight: 600;
color: #1a2a44;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.puck-pages-item.is-active .puck-pages-item-title { color: #233650; }
.puck-pages-item-slug {
font-size: 0.73rem;
color: #9aaac4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.puck-pages-rename-input {
width: calc(100% - 28px);
margin: 4px 14px;
padding: 4px 8px;
font-size: 0.88rem;
border: 1.5px solid #2f56ea;
border-radius: 6px;
outline: none;
background: #fff;
}
.puck-header-edit-toolbar {
position: absolute;
left: 50%;
top: 0.35rem;
transform: translateX(-50%);
z-index: 3;
}
.puck-menu-edit-badge {
border: 1px solid rgba(148, 163, 184, 0.55);
background: rgba(255, 255, 255, 0.92);
color: #0f172a;
border-radius: 999px;
padding: 0.45rem 0.8rem;
font-size: 0.82rem;
font-weight: 700;
line-height: 1;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
cursor: pointer;
}
.puck-menu-edit-badge:hover,
.puck-menu-edit-badge:focus-visible {
background: #ffffff;
border-color: rgba(96, 117, 144, 0.75);
}
.puck-brand-edit-slot {
position: relative;
display: inline-flex;
align-items: center;
}
.puck-brand-edit-slot.is-editor {
padding-top: 2.4rem;
}
.puck-logo-edit-badge {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -10%);
z-index: 3;
display: grid;
gap: 2px;
min-width: 132px;
padding: 0.42rem 0.8rem 0.48rem;
border: 1px solid rgba(148, 163, 184, 0.55);
border-radius: 16px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
color: #0f172a;
cursor: pointer;
text-align: center;
}
.puck-logo-edit-badge span {
font-size: 0.8rem;
font-weight: 700;
line-height: 1.1;
}
.puck-logo-edit-badge small {
font-size: 0.68rem;
line-height: 1.1;
color: #5b6d86;
}
.puck-logo-edit-badge:hover,
.puck-logo-edit-badge:focus-visible {
background: #ffffff;
border-color: rgba(96, 117, 144, 0.75);
}

.puck-site-shell .module-card-grid-copy,
.module-card-grid-copy {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
align-items: stretch !important;
}
.puck-site-shell .module-card-grid-copy h2,
.module-card-grid-copy h2 {
font-size: 2rem !important;
line-height: 1.15 !important;
display: block !important;
order: 1 !important;
margin-bottom: 0.4em !important;
width: 100% !important;
}
.puck-site-shell .module-card-grid-copy p,
.module-card-grid-copy p {
font-size: 0.9rem !important;
line-height: 1.55 !important;
display: block !important;
order: 2 !important;
width: 100% !important;
}
.puck-site-shell .module-card-grid-item.module-text-tone-light .module-card-grid-copy h2,
.puck-site-shell .module-card-grid-item.module-text-tone-light .module-card-grid-copy p,
.module-card-grid-item.module-text-tone-light .module-card-grid-copy h2,
.module-card-grid-item.module-text-tone-light .module-card-grid-copy p,
.puck-site-shell .module-text-tone-light .module-card-grid-item .module-card-grid-copy h2,
.puck-site-shell .module-text-tone-light .module-card-grid-item .module-card-grid-copy p,
.module-text-tone-light .module-card-grid-item .module-card-grid-copy h2,
.module-text-tone-light .module-card-grid-item .module-card-grid-copy p {
color: #ffffff !important;
}
.puck-site-shell .module-card-grid-item.module-text-tone-dark .module-card-grid-copy h2,
.puck-site-shell .module-card-grid-item.module-text-tone-dark .module-card-grid-copy p,
.module-card-grid-item.module-text-tone-dark .module-card-grid-copy h2,
.module-card-grid-item.module-text-tone-dark .module-card-grid-copy p,
.puck-site-shell .module-text-tone-dark .module-card-grid-item .module-card-grid-copy h2,
.puck-site-shell .module-text-tone-dark .module-card-grid-item .module-card-grid-copy p,
.module-text-tone-dark .module-card-grid-item .module-card-grid-copy h2,
.module-text-tone-dark .module-card-grid-item .module-card-grid-copy p {
color: #162a45 !important;
}
.puck-site-shell .module-card-grid-item.module-text-tone-accent .module-card-grid-copy h2,
.puck-site-shell .module-card-grid-item.module-text-tone-accent .module-card-grid-copy p,
.module-card-grid-item.module-text-tone-accent .module-card-grid-copy h2,
.module-card-grid-item.module-text-tone-accent .module-card-grid-copy p,
.puck-site-shell .module-text-tone-accent .module-card-grid-item .module-card-grid-copy h2,
.puck-site-shell .module-text-tone-accent .module-card-grid-item .module-card-grid-copy p,
.module-text-tone-accent .module-card-grid-item .module-card-grid-copy h2,
.module-text-tone-accent .module-card-grid-item .module-card-grid-copy p {
color: var(--fb-accent, #4067ff) !important;
}
.puck-site-shell .module-card-grid-copy h2.module-card-grid-editor-placeholder,
.module-card-grid-copy h2.module-card-grid-editor-placeholder,
.puck-site-shell .module-card-grid-copy p.module-card-grid-editor-placeholder,
.module-card-grid-copy p.module-card-grid-editor-placeholder,
.puck-site-shell .module-card-grid-copy .card-grid-inline-placeholder,
.module-card-grid-copy .card-grid-inline-placeholder {
color: #ffffff !important;
background: rgba(12, 15, 22, 0.64) !important;
border: 1.5px dashed rgba(255, 255, 255, 0.5) !important;
border-radius: 10px !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
}
.puck-site-shell .module-text-tone-light .module-editor-placeholder-text,
.puck-site-shell .module-text-tone-dark .module-editor-placeholder-text,
.puck-site-shell .module-text-tone-accent .module-editor-placeholder-text,
.puck-site-shell .module-text-tone-light .hero2-field-placeholder,
.puck-site-shell .module-text-tone-dark .hero2-field-placeholder,
.puck-site-shell .module-text-tone-accent .hero2-field-placeholder,
.puck-site-shell .module-text-tone-light .gallery-inline-placeholder,
.puck-site-shell .module-text-tone-dark .gallery-inline-placeholder,
.puck-site-shell .module-text-tone-accent .gallery-inline-placeholder,
.puck-site-shell .module-text-tone-light .module-image-caption-placeholder,
.puck-site-shell .module-text-tone-dark .module-image-caption-placeholder,
.puck-site-shell .module-text-tone-accent .module-image-caption-placeholder {
color: #ffffff !important;
background: rgba(12, 15, 22, 0.64) !important;
border: 1.5px dashed rgba(255, 255, 255, 0.5) !important;
}
.puck-site-shell .module-gallery-overlay .module-editor-placeholder-text,
.puck-site-shell .module-gallery-overlay .gallery-inline-placeholder,
.puck-site-shell .module-hero-copy .module-editor-placeholder-text,
.puck-site-shell .module-hero-2-copy .module-editor-placeholder-text,
.puck-site-shell .module-title-inner .module-editor-placeholder-text,
.puck-site-shell .module-text-inner .module-editor-placeholder-text,
.puck-site-shell .module-card-inner .module-editor-placeholder-text,
.puck-site-shell .module-text-image-copy .module-editor-placeholder-text {
color: #ffffff !important;
}
.puck-page-settings-info-list {
display: grid;
gap: 0.45rem;
margin-top: 0.8rem;
padding-top: 0.8rem;
border-top: 1px solid rgba(148, 163, 184, 0.35);
color: #334155;
font-size: 0.95rem;
}
.puck-site-shell .module-card-grid-textsize-small .module-card-grid-copy h2,
.module-card-grid-textsize-small .module-card-grid-copy h2 {
font-size: 1.5rem !important;
}
.puck-site-shell .module-card-grid-textsize-small .module-card-grid-copy p,
.module-card-grid-textsize-small .module-card-grid-copy p {
font-size: 0.82rem !important;
}
.puck-site-shell .module-card-grid-textsize-normal .module-card-grid-copy h2,
.module-card-grid-textsize-normal .module-card-grid-copy h2 {
font-size: 2rem !important;
}
.puck-site-shell .module-card-grid-textsize-normal .module-card-grid-copy p,
.module-card-grid-textsize-normal .module-card-grid-copy p {
font-size: 0.9rem !important;
}
.puck-site-shell .module-card-grid-textsize-large .module-card-grid-copy h2,
.module-card-grid-textsize-large .module-card-grid-copy h2 {
font-size: 2.45rem !important;
}
.puck-site-shell .module-card-grid-textsize-large .module-card-grid-copy p,
.module-card-grid-textsize-large .module-card-grid-copy p {
font-size: 1.02rem !important;
}
.puck-site-shell .module-card-grid-content-left .module-card-grid-copy,
.module-card-grid-content-left .module-card-grid-copy {
text-align: left !important;
}
.puck-site-shell .module-card-grid-content-center .module-card-grid-copy,
.module-card-grid-content-center .module-card-grid-copy {
text-align: center !important;
}
.puck-site-shell .module-card-grid-content-right .module-card-grid-copy,
.module-card-grid-content-right .module-card-grid-copy {
text-align: right !important;
}
.puck-site-shell .module-card-grid-content-left .module-card-grid-copy h2,
.puck-site-shell .module-card-grid-content-left .module-card-grid-copy p,
.module-card-grid-content-left .module-card-grid-copy h2,
.module-card-grid-content-left .module-card-grid-copy p {
text-align: left !important;
}
.puck-site-shell .module-card-grid-content-center .module-card-grid-copy h2,
.puck-site-shell .module-card-grid-content-center .module-card-grid-copy p,
.module-card-grid-content-center .module-card-grid-copy h2,
.module-card-grid-content-center .module-card-grid-copy p {
text-align: center !important;
}
.puck-site-shell .module-card-grid-content-right .module-card-grid-copy h2,
.puck-site-shell .module-card-grid-content-right .module-card-grid-copy p,
.module-card-grid-content-right .module-card-grid-copy h2,
.module-card-grid-content-right .module-card-grid-copy p {
text-align: right !important;
}
.puck-site-shell .module-card-grid-placement-left,
.module-card-grid-placement-left {
align-items: flex-start !important;
}
.puck-site-shell .module-card-grid-placement-center,
.module-card-grid-placement-center {
align-items: center !important;
}
.puck-site-shell .module-card-grid-placement-right,
.module-card-grid-placement-right {
align-items: flex-end !important;
}

.puck-site-shell .module-title-size-small h2,
.module-title-size-small h2 {
font-size: clamp(1.9rem, 3.2vw, 2.5rem) !important;
}
.puck-site-shell .module-title-size-medium h2,
.module-title-size-medium h2 {
font-size: clamp(2.4rem, 4vw, 3.4rem) !important;
}
.puck-site-shell .module-title-size-large h2,
.module-title-size-large h2 {
font-size: clamp(3rem, 5vw, 4.5rem) !important;
}
.puck-site-shell .module-title-size-xlarge h2,
.module-title-size-xlarge h2 {
font-size: clamp(3.8rem, 6.5vw, 5.8rem) !important;
}
.puck-site-shell .module-text-size-small p,
.module-text-size-small p {
font-size: 0.92rem !important;
line-height: 1.72 !important;
}
.puck-site-shell .module-text-size-normal p,
.module-text-size-normal p {
font-size: 1.12rem !important;
line-height: 1.72 !important;
}
.puck-site-shell .module-text-size-large p,
.module-text-size-large p {
font-size: 1.38rem !important;
line-height: 1.72 !important;
}
.puck-site-shell .module-text-size-xlarge p,
.module-text-size-xlarge p {
font-size: 1.7rem !important;
line-height: 1.66 !important;
}
.puck-site-shell .module-footer-inner,
.module-footer-inner {
width: 100% !important;
}
.puck-site-shell .module-footer-inner-full,
.module-footer-inner-full {
width: 100% !important;
margin: 0 !important;
padding-inline: 0.25rem !important;
}
.puck-site-shell .module-footer-cols,
.module-footer-cols {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: clamp(0.75rem, 2vw, 1.4rem) !important;
align-items: start !important;
}
.puck-site-shell .module-footer-single,
.module-footer-single {
display: grid !important;
grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) !important;
gap: clamp(0.75rem, 2vw, 1.4rem) !important;
align-items: start !important;
}
.puck-site-shell .module-footer-cols,
.module-footer-cols {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.puck-site-shell .module-footer-editor-preview .module-footer-cols,
.module-footer-editor-preview .module-footer-cols {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: clamp(0.75rem, 2vw, 1.4rem) !important;
}
.puck-site-shell .module-footer-col,
.module-footer-col,
.puck-site-shell .module-footer-single,
.module-footer-single {
min-width: 0 !important;
}
.puck-site-shell .module-footer:not(.module-footer-editor-preview) .module-footer-col,
.puck-site-shell .module-footer:not(.module-footer-editor-preview) .module-footer-single {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
.puck-site-shell .module-footer-editor-preview .module-footer-col,
.puck-site-shell .module-footer-editor-preview .module-footer-single {
outline: 1px dashed rgba(99, 135, 255, 0.32);
outline-offset: -1px;
}
.puck-site-shell .module-footer-col {
display: grid !important;
align-content: start !important;
gap: 0.8rem !important;
}
.puck-site-shell .module-footer-single-copy {
display: grid !important;
align-content: start !important;
gap: 0.8rem !important;
min-width: 0 !important;
}
@media (max-width: 768px) {
.puck-site-shell .module-footer-layout-three .module-footer-cols {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: clamp(1rem, 3vw, 2rem) !important;
}
}
.module-gallery-item-empty {
aspect-ratio: 1 / 1;
border: 2px dashed #c8d0db !important;
border-radius: 6px;
background: rgba(248, 249, 251, 0.85);
display: flex !important;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.module-gallery-item-empty:hover {
border-color: #6c7cdb !important;
background: rgba(240, 242, 255, 0.95);
}
.module-gallery-item-empty-label {
font-size: 1.5rem;
font-weight: 600;
color: #162a45;
pointer-events: none;
display: flex;
align-items: center;
gap: 0.4rem;
}
.module-gallery-item-empty:hover .module-gallery-item-empty-label {
color: #4f5fcc;
}
.puck-site-shell .module-gallery-grid.module-gallery-image-size-large {
max-width: none;
}
.puck-site-shell .module-gallery-grid.module-gallery-image-size-medium {
max-width: min(100%, 980px);
margin-inline: auto;
}
.puck-site-shell .module-gallery-grid.module-gallery-image-size-small {
max-width: min(100%, 760px);
margin-inline: auto;
}

.puck-inspector-gallery-manager { display: flex; flex-direction: column; gap: 0.5rem; }
.puck-inspector-gallery-thumbs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.4rem;
}
.puck-inspector-gallery-thumb {
position: relative;
aspect-ratio: 1 / 1;
border-radius: 6px;
overflow: hidden;
background: #f3f4f6;
border: 1px solid rgba(0,0,0,0.08);
}
.puck-inspector-gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.puck-inspector-gallery-thumb-empty {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: rgba(0,0,0,0.4);
}
.puck-inspector-gallery-thumb-actions {
position: absolute;
inset: auto 2px 2px auto;
display: flex;
gap: 2px;
}
.puck-inspector-gallery-thumb-actions button {
width: 22px;
height: 22px;
border-radius: 4px;
border: none;
background: rgba(0,0,0,0.65);
color: #fff;
cursor: pointer;
font-size: 12px;
line-height: 1;
padding: 0;
}
.puck-inspector-gallery-thumb-actions button:disabled {
opacity: 0.35;
cursor: not-allowed;
}

.puck-site-shell .module-gallery-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.puck-site-shell .module-gallery-style-natural {
grid-auto-rows: auto;
}
.puck-site-shell .module-gallery-style-natural.module-gallery-count-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.puck-site-shell .module-gallery-style-square {
grid-auto-rows: 1fr;
}
.puck-site-shell .module-gallery-style-square .module-gallery-item img {
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
height: 100%;
}
.puck-site-shell .module-gallery-style-collage {
grid-auto-flow: dense;
}
.puck-site-shell .module-gallery-style-collage.module-gallery-count-3 {
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
grid-auto-rows: minmax(8rem, 1fr);
}
.puck-site-shell .module-gallery-style-collage .module-gallery-item:nth-child(5n + 1) {
grid-column: span 2;
}
.puck-site-shell .module-gallery-style-masonry {
display: block;
column-count: 3;
column-gap: 1rem;
}
.puck-site-shell .module-gallery-style-masonry .module-gallery-item {
display: inline-block;
width: 100%;
margin-bottom: 1rem;
break-inside: avoid;
}
.puck-site-shell .module-gallery-style-stripe {
display: flex !important;
overflow-x: auto;
gap: 1rem;
scroll-snap-type: x mandatory;
padding-bottom: 0.5rem;
}
.puck-site-shell .module-gallery-style-stripe .module-gallery-item {
flex: 0 0 auto;
width: clamp(220px, 28vw, 360px);
aspect-ratio: 4 / 3;
scroll-snap-align: start;
}
.puck-site-shell .module-gallery-style-stripe .module-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.puck-site-shell .module-gallery-style-polaroid {
grid-auto-rows: auto;
}
.puck-site-shell .module-gallery-style-polaroid .module-gallery-item {
background: #fff;
padding: 12px 12px 36px 12px;
box-shadow: 0 6px 20px rgba(0,0,0,0.14), 0 2px 4px rgba(0,0,0,0.08);
border-radius: 4px;
transform: rotate(-1deg);
}
.puck-site-shell .module-gallery-style-polaroid .module-gallery-item:nth-child(even) {
transform: rotate(1.2deg);
}
.puck-site-shell .module-gallery-style-polaroid .module-gallery-item img {
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
}
.puck-site-shell .module-gallery-style-carousel {
display: block !important;
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--site-image-radius, 12px);
background: #000;
}
.puck-site-shell .module-gallery-style-carousel .module-gallery-item {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
border-radius: 0;
box-shadow: none;
transition: opacity 0.5s ease;
}
.puck-site-shell .module-gallery-style-carousel .module-gallery-item.is-active {
opacity: 1;
pointer-events: auto;
}
.puck-site-shell .module-gallery-style-carousel:not(:has(.module-gallery-item.is-active)) .module-gallery-item:first-of-type {
opacity: 1;
pointer-events: auto;
}
.puck-site-shell .module-gallery-style-carousel .module-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.puck-site-shell .module-gallery-carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(0,0,0,0.5);
color: #fff;
border: none;
font-size: 28px;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
cursor: pointer;
}
.puck-site-shell .module-gallery-carousel-prev { left: 12px; }
.puck-site-shell .module-gallery-carousel-next { right: 12px; }
.puck-site-shell .module-gallery-carousel-dots {
position: absolute;
bottom: 12px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 8px;
z-index: 5;
}
.puck-site-shell .module-gallery-carousel-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.5);
cursor: pointer;
padding: 0;
}
.puck-site-shell .module-gallery-carousel-dot:first-of-type {
background: #fff;
}

.puck-width-popover {
position: absolute;
left: calc(100% + 8px);
top: 50%;
transform: translateY(-50%);
background: #fff;
border: 1px solid #e2e5ea;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
padding: 6px;
min-width: 130px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 2px;
}
.puck-width-popover-title {
font-size: 0.72rem;
font-weight: 600;
color: #8b95a8;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 4px 8px 6px;
}
.puck-width-popover-btn {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
border-radius: 5px;
padding: 6px 10px;
font-size: 0.85rem;
color: #2d3240;
cursor: pointer;
transition: background 0.1s;
}
.puck-width-popover-btn:hover {
background: #f0f2ff;
color: #4f5fcc;
}
.puck-width-popover-btn.is-active {
background: #eef0fd;
color: #4f5fcc;
font-weight: 600;
}
.module-content-feed {
padding-block: var(--site-section-padding-top, 4rem) var(--site-section-padding-bottom, 2rem);
}
.module-content-feed-inner {
display: grid;
gap: 1.4rem;
}
.module-content-feed-head {
align-items: end;
display: flex;
gap: 1rem;
justify-content: space-between;
}
.module-content-feed-head h2 {
font-family: var(--site-font-heading);
font-size: clamp(2rem, 4vw, 3.4rem);
letter-spacing: 0;
line-height: 1.08;
margin: 0;
}
.module-content-feed-head p {
color: var(--site-muted);
margin: 0.35rem 0 0;
max-width: 620px;
}
.module-content-feed-admin-link {
background: color-mix(in srgb, var(--site-accent) 12%, var(--site-surface-strong));
border: 1px solid color-mix(in srgb, var(--site-accent) 30%, var(--site-border));
border-radius: 999px;
color: var(--site-link);
flex: 0 0 auto;
font-size: 0.9rem;
font-weight: 800;
padding: 0.58rem 0.9rem;
text-decoration: none;
}
.module-content-feed-editor-help {
margin: 0;
padding: 0.78rem 0.9rem;
border: 1px solid color-mix(in srgb, var(--site-accent) 18%, var(--site-border));
border-radius: 14px;
background: color-mix(in srgb, var(--site-accent) 8%, var(--site-surface-strong));
color: var(--site-muted);
font-size: 0.92rem;
line-height: 1.45;
}
.module-content-feed-editor-help a {
color: var(--site-link);
font-weight: 800;
text-decoration: none;
overflow-wrap: anywhere;
}
.module-content-feed-editor-help a:hover {
text-decoration: underline;
}
.module-content-feed-grid,
.module-content-feed-list,
.module-content-feed-compact {
display: grid;
gap: 1rem;
}
.module-content-feed-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.module-content-feed-grid.is-small {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.module-content-feed-list {
grid-template-columns: 1fr;
}
.module-content-feed-featured {
display: grid;
gap: 1rem;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.module-content-feed-skeleton { display: grid; gap: 1rem; margin-top: 1rem; }
.module-content-feed-skeleton-grid,
.module-content-feed-skeleton-featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.module-content-feed-skeleton-list,
.module-content-feed-skeleton-compact { grid-template-columns: 1fr; }
.module-content-feed-skeleton-card {
border: 1px dashed color-mix(in srgb, var(--site-text) 20%, transparent);
border-radius: var(--site-card-radius, 14px);
background: color-mix(in srgb, var(--site-surface) 55%, transparent);
overflow: hidden;
}
.module-content-feed-skeleton-list .module-content-feed-skeleton-card,
.module-content-feed-skeleton-compact .module-content-feed-skeleton-card {
display: grid; grid-template-columns: 160px 1fr; align-items: stretch;
}
.module-content-feed-skeleton-media { aspect-ratio: 16 / 10; background: color-mix(in srgb, var(--site-text) 12%, transparent); }
.module-content-feed-skeleton-list .module-content-feed-skeleton-media,
.module-content-feed-skeleton-compact .module-content-feed-skeleton-media { aspect-ratio: auto; height: 100%; min-height: 88px; }
.module-content-feed-skeleton-body { padding: 1rem; display: grid; gap: 0.65rem; align-content: center; }
.module-content-feed-skeleton-line { height: 0.8rem; border-radius: 6px; background: color-mix(in srgb, var(--site-text) 16%, transparent); }
.module-content-feed-skeleton-line.is-short { width: 55%; }
.module-content-feed-card {
background: var(--site-surface-strong);
border: 1px solid var(--site-border);
border-radius: var(--site-card-radius);
box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
display: grid;
overflow: hidden;
}
.module-content-feed-list .module-content-feed-card {
grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
}
.module-content-feed-card.is-compact {
background: transparent;
border-left: 0;
border-right: 0;
border-radius: 0;
box-shadow: none;
padding: 0.85rem 0;
}
.module-content-feed-media {
background: color-mix(in srgb, var(--site-surface) 84%, var(--site-accent) 16%);
display: block;
min-height: 190px;
overflow: hidden;
}
.module-content-feed-media img {
aspect-ratio: 16 / 10;
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
.module-content-feed-card-body {
display: grid;
gap: 0.65rem;
padding: 1rem;
}
.module-content-feed-meta {
color: var(--site-muted);
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
font-size: 0.8rem;
font-weight: 800;
}
.module-content-feed-card h3 {
font-family: var(--site-font-heading);
font-size: clamp(1.18rem, 2vw, 1.55rem);
letter-spacing: 0;
line-height: 1.15;
margin: 0;
}
.module-content-feed-card h3 a {
color: var(--site-heading);
text-decoration: none;
}
.module-content-feed-card p {
color: var(--site-muted);
margin: 0;
}
.module-content-feed-link {
color: var(--site-link);
font-weight: 800;
text-decoration: none;
}
.module-content-feed-state {
background: var(--site-surface-strong);
border: 1px dashed var(--site-border);
border-radius: var(--site-card-radius);
color: var(--site-muted);
padding: 1.5rem;
}
.module-content-feed-state.is-error {
color: #b91c1c;
}
@media (max-width: 860px) {
.module-content-feed-head,
.module-content-feed-featured {
align-items: stretch;
grid-template-columns: 1fr;
}
.module-content-feed-head {
flex-direction: column;
}
.module-content-feed-grid,
.module-content-feed-grid.is-small,
.module-content-feed-list .module-content-feed-card {
grid-template-columns: 1fr;
}
}

.module-hero-style-editorial,
.module-hero-style-cinematic {
--editorial-serif: var(--site-font-heading), Georgia, serif;
}
.module-hero-style-editorial .container,
.module-hero-style-cinematic .container {
max-width: none !important;
padding-inline: 0 !important;
width: 100% !important;
}
.module-hero-surface-style-editorial,
.module-hero-surface-style-cinematic {
border-radius: 0 !important;
min-height: clamp(640px, 84vh, 980px);
overflow: hidden;
}
.puck-site-shell .module-hero-style-editorial .module-hero-surface,
.puck-site-shell .module-hero-style-cinematic .module-hero-surface,
.site-template-editorial-villa .module-hero-style-editorial .module-hero-surface,
.site-template-editorial-villa .module-hero-style-cinematic .module-hero-surface,
.site-template-editorial-villa .module-hero-surface-style-editorial,
.site-template-editorial-villa .module-hero-surface-style-cinematic {
border-radius: 0 !important;
}
.module-hero-style-editorial,
.module-hero-style-cinematic {

border-radius: 0 !important;
}
.module-hero-style-editorial.module-width-full,
.module-hero-style-cinematic.module-width-full {

width: 100% !important;
max-width: none !important;
padding-bottom: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.site-main .module.module-hero-style-editorial.module-width-full > .container,
.site-main .module.module-hero-style-cinematic.module-width-full > .container,
.puck-page-content > .module-hero-style-editorial.module-width-full > .container,
.puck-page-content > .module-hero-style-cinematic.module-width-full > .container {
width: 100% !important;
}
.module-hero-style-editorial,
.module-hero-style-editorial *,
.module-hero-style-cinematic,
.module-hero-style-cinematic * {
--fb-radius-image: 0px;
}
.module-hero-style-editorial > .container,
.module-hero-style-cinematic > .container,
.module-hero-style-editorial .module-hero-inner,
.module-hero-style-cinematic .module-hero-inner,
.module-hero-style-editorial .module-hero-surface,
.module-hero-style-cinematic .module-hero-surface,
.module-hero-style-editorial .module-hero-media,
.module-hero-style-cinematic .module-hero-media,
.module-hero-style-editorial .module-hero-overlay,
.module-hero-style-cinematic .module-hero-overlay {
border-radius: 0 !important;
}
.editor-preview-module-shell:has(.module-hero-style-editorial),
.editor-preview-module-shell:has(.module-hero-style-cinematic) {
border-radius: 0 !important;
}
.module-hero-surface-style-editorial .module-hero-copy,
.module-hero-surface-style-cinematic .module-hero-copy {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #fff !important;

max-width: min(1500px, 92vw);
padding: clamp(5rem, 9vw, 9rem) clamp(2rem, 6vw, 6rem);
transform: none !important;
width: min(100%, 1500px) !important;
}
.module-hero-surface-style-editorial .module-hero-copy h2,
.module-hero-surface-style-cinematic .module-hero-copy h2 {
color: #fff !important;
font-family: var(--editorial-serif);
font-size: clamp(4.2rem, 9vw, 10.5rem);
font-weight: 500;
letter-spacing: 0;

line-height: 0.95;
padding-bottom: 0.06em;
}
.module-hero-surface-style-editorial .module-hero-copy p,
.module-hero-surface-style-cinematic .module-hero-copy p {
color: rgba(255, 255, 255, 0.9) !important;

font-size: clamp(1.2rem, 1.9vw, 1.95rem);
line-height: 1.5;
max-width: 720px;
}
.module-hero-surface-style-editorial .module-eyebrow,
.module-hero-surface-style-cinematic .module-eyebrow {
color: rgba(255, 255, 255, 0.88) !important;
letter-spacing: 0.22em;
font-size: clamp(0.82rem, 0.95vw, 1rem);
}
.module-hero-style-cinematic .module-hero-overlay-strong .module-hero-overlay,
.module-hero-style-editorial .module-hero-overlay-normal .module-hero-overlay {
background:
linear-gradient(90deg, rgba(8, 12, 18, 0.62), rgba(8, 12, 18, 0.16) 58%, rgba(8, 12, 18, 0.34)),
linear-gradient(180deg, rgba(8, 12, 18, 0.12), rgba(8, 12, 18, 0.72)) !important;
}
.module-title-style-statement .container,
.module-text-style-editorial .container {
max-width: none;
}
.module-title-inner-style-statement,
.module-title-inner-style-editorial,
.module-text-inner-style-editorial {
margin-inline: auto;
max-width: min(1180px, calc(100vw - 4rem));
}
.module-title-inner-style-statement h2,
.module-title-inner-style-editorial h2 {
font-family: var(--site-font-heading), Georgia, serif;
font-size: clamp(4rem, 8vw, 8.5rem);
font-weight: 500;
letter-spacing: 0;
line-height: 0.9;
}
.module-title-inner-style-statement p,
.module-title-inner-style-editorial p,
.module-text-inner-style-editorial p {
font-size: clamp(1.1rem, 1.5vw, 1.45rem);
line-height: 1.55;
max-width: 720px;
}
.module-text-image-style-editorial .container,
.module-text-image-style-immersive .container {
max-width: none;
}
.module-text-image-layout-style-editorial,
.module-text-image-layout-style-immersive {
gap: clamp(3rem, 7vw, 8rem);
margin-inline: auto;
max-width: min(1500px, calc(100vw - 4rem));
}
.module-text-image-layout-style-editorial .module-text-image-copy h2,
.module-text-image-layout-style-immersive .module-text-image-copy h2 {
font-family: var(--site-font-heading), Georgia, serif;
font-size: clamp(3rem, 5.5vw, 6.8rem);
font-weight: 500;
letter-spacing: 0;
line-height: 0.92;
}
.module-text-image-layout-style-immersive {
align-items: stretch;
display: grid;
gap: clamp(2rem, 4vw, 5rem);
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
margin-inline: auto;
max-width: none;
min-height: clamp(460px, 54vw, 760px);
width: min(100%, calc(100vw - clamp(2rem, 5vw, 6rem)));
}
.module-text-image-style-immersive {

padding-block: clamp(2rem, 4vw, 3.5rem) !important;
}
.module-text-image-style-immersive > .container,
.site-main .module.module-text-image-style-immersive > .container,
.puck-page-content > .module-text-image-style-immersive > .container {

max-width: none !important;
}
.module-text-image-layout-style-immersive .module-text-image-copy {
align-content: center;
box-sizing: border-box;
justify-self: stretch;
max-width: none;
min-width: 0;
padding: clamp(4rem, 8vw, 8rem) 0;
width: 100%;
}
.module-text-image-layout-style-immersive .module-text-image-copy > * {
max-width: min(100%, 680px);
min-width: 0;
}
.module-text-image-layout-style-immersive.module-text-image-media-left .module-text-image-copy > * {
margin-left: auto;
}
.module-text-image-layout-style-immersive .module-text-image-copy h2 {
font-size: clamp(3.4rem, 5.6vw, 7.5rem);
line-height: 0.92;
overflow-wrap: break-word;
text-wrap: balance;
}
.module-text-image-layout-style-immersive .module-text-image-copy p {
font-size: clamp(1.15rem, 1.35vw, 1.55rem);
line-height: 1.65;
}
.module-text-image-layout-style-immersive .module-text-image-media-shell {
min-height: inherit;
min-width: 0;
}
.module-text-image-layout-style-immersive .module-text-image-figure,
.module-text-image-layout-style-immersive .module-text-image-media,
.module-text-image-layout-style-immersive .module-text-image-media-placeholder {
height: 100%;
min-height: inherit;
width: 100%;
}
.module-text-image-layout-style-immersive .module-text-image-figure,
.module-text-image-layout-style-immersive .module-text-image-media {
border-radius: 0 !important;
box-shadow: none;
overflow: hidden;
}
.module-text-image-layout-style-immersive .module-text-image-media {
object-fit: cover;
}
.module-card-grid-mode-metrics .container,
.module-card-grid-mode-editorial-rows .container {
max-width: none;
}
.module-card-grid-metrics {
display: grid;
gap: clamp(1.5rem, 4vw, 5rem);
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.module-card-grid-metric {
border-left: 1px solid color-mix(in srgb, var(--site-text) 14%, transparent);
display: grid;
gap: 0.55rem;
padding: 0.5rem 1.4rem 1rem;
}
.module-card-grid-metric span,
.module-card-grid-editorial-row > span:not(.module-card-grid-editorial-row-number) {
color: var(--site-muted);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.module-card-grid-metric h2 {
font-family: var(--site-font-heading), Georgia, serif;
font-size: clamp(4rem, 7vw, 8rem);
font-weight: 500;
letter-spacing: 0;
line-height: 0.9;
margin: 0;
}
.module-card-grid-metric em {
color: var(--site-accent);
font-family: var(--site-font-heading), Georgia, serif;
font-size: clamp(1rem, 1.4vw, 1.45rem);
line-height: 1;
}
.module-card-grid-metric p {
color: var(--site-muted);
line-height: 1.55;
margin: 0;
max-width: 24ch;
}
.module-card-grid-editorial-rows {
border-top: 1px solid color-mix(in srgb, var(--site-text) 12%, transparent);
display: grid;
list-style: none;
margin: 0;
padding: 0;
}
.module-card-grid-editorial-row {
border-bottom: 1px solid color-mix(in srgb, var(--site-text) 12%, transparent);
display: grid;
gap: clamp(1rem, 3vw, 4rem);
grid-template-columns: 72px minmax(120px, 0.35fr) minmax(0, 1fr);
padding: clamp(1.4rem, 3vw, 2.8rem) 0;
}
.module-card-grid-editorial-row-number {
color: var(--site-accent);
font-family: var(--site-font-heading), Georgia, serif;
font-size: clamp(1.3rem, 2vw, 2rem);
font-style: italic;
}
.module-card-grid-editorial-row h2 {
font-family: var(--site-font-heading), Georgia, serif;
font-size: clamp(2.4rem, 4.4vw, 5.25rem);
font-weight: 500;
letter-spacing: 0;
line-height: 0.94;
margin: 0;
}
.module-card-grid-editorial-row p {
color: var(--site-muted);
font-size: clamp(1rem, 1.2vw, 1.2rem);
line-height: 1.55;
margin: 0.6rem 0 0;
max-width: 720px;
}
.puck-section-band {
overflow: hidden;
}

.puck-section-band.puck-section-band-width-full { max-width: none !important; width: auto !important; }
.puck-section-band.puck-section-band-width-wide { max-width: min(1500px, 88%) !important; width: 88% !important; }
.puck-section-band.puck-section-band-width-normal { max-width: min(1180px, 70%) !important; width: 70% !important; }
.puck-section-band.puck-section-band-width-narrow { max-width: min(880px, 50%) !important; width: 50% !important; }
.puck-section-band.puck-section-band-align-left { margin-left: 0 !important; margin-right: auto !important; }
.puck-section-band.puck-section-band-align-center { margin-left: auto !important; margin-right: auto !important; }
.puck-section-band.puck-section-band-align-right { margin-left: auto !important; margin-right: 0 !important; }
.puck-section-band-radius-none {
border-radius: 0;
}
.puck-section-band-radius-soft {
border-radius: clamp(18px, 3vw, 36px);
}
.puck-section-band-radius-round {
border-radius: clamp(28px, 5vw, 64px);
}
.puck-section-band-style-editorial {
border-top: none;
border-bottom: none;
}
.puck-section-band-style-cinematic {
min-height: clamp(620px, 82vh, 920px);
}
.puck-section-band-style-cinematic .puck-section-band-inner {
min-height: inherit;
}
@media (max-width: 900px) {
.module-hero-surface-style-editorial .module-hero-copy,
.module-hero-surface-style-cinematic .module-hero-copy {
max-width: none;
padding-inline: 1.4rem;
}
.module-text-image-layout-style-editorial,
.module-text-image-layout-style-immersive,
.module-card-grid-metrics,
.module-card-grid-editorial-row {
grid-template-columns: 1fr;
}
.module-text-image-layout-style-immersive {
gap: 0;
min-height: 0;
width: 100%;
}
.module-text-image-layout-style-immersive .module-text-image-copy {
padding: clamp(3rem, 12vw, 5rem) 1.25rem;
}
.module-text-image-layout-style-immersive .module-text-image-media-shell,
.module-text-image-layout-style-immersive .module-text-image-figure,
.module-text-image-layout-style-immersive .module-text-image-media {
min-height: 340px;
}
.module-card-grid-metric {
border-left: 0;
border-top: 1px solid color-mix(in srgb, var(--site-text) 12%, transparent);
padding-inline: 0;
}
}

.puck-accent-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.puck-accent-color-input::-webkit-color-swatch { border: none; border-radius: 50%; }
.puck-accent-color-input::-moz-color-swatch { border: none; border-radius: 50%; }

.puck-spacing-panel {
padding: 14px 16px 18px;
}
.puck-spacing-section-title {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #6b7280;
margin-bottom: 12px;
}
.puck-spacing-control {
margin-bottom: 22px;
}
.puck-spacing-control-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 8px;
}
.puck-spacing-control-label {
font-size: 0.9rem;
font-weight: 600;
color: #1d3050;
}
.puck-spacing-control-value {
font-size: 0.8rem;
font-weight: 700;
color: #4067ff;
}
.puck-spacing-range {
width: 100%;
accent-color: #4067ff;
cursor: pointer;
}
.puck-spacing-control-ticks {
display: flex;
justify-content: space-between;
margin-top: 4px;
}
.puck-spacing-control-ticks span {
font-size: 0.66rem;
color: #9aa5b4;
}
.puck-spacing-control-ticks span.is-active {
color: #4067ff;
font-weight: 700;
}
.puck-spacing-control-hint {
margin: 8px 0 0;
font-size: 0.74rem;
line-height: 1.4;
color: #6b7280;
}

.puck-stil-body { padding: 14px 16px 22px; }
.puck-stil-field { display: block; margin-bottom: 18px; }
.puck-stil-label { display: block; font-size: 0.82rem; font-weight: 600; color: #1d3050; margin-bottom: 6px; }
.puck-stil-select {
width: 100%; padding: 7px 10px; border: 1px solid #d6dde7; border-radius: 8px;
background: #fff; font-size: 0.88rem; color: #1d3050; cursor: pointer;
}
.puck-stil-hint { display: block; margin-top: 6px; font-size: 0.72rem; line-height: 1.4; color: #6b7280; }
.puck-stil-group {
font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
color: #9aa5b4; margin: 8px 0 14px; padding-top: 14px; border-top: 1px solid #eef2f6;
}
.puck-stil-seg { display: flex; gap: 4px; }
.puck-stil-seg button {
flex: 1; padding: 7px 2px; border: 1px solid #d6dde7; border-radius: 7px; background: #fff;
font-size: 0.78rem; color: #4b5563; cursor: pointer;
}
.puck-stil-seg button.is-active { background: #4067ff; border-color: #4067ff; color: #fff; font-weight: 700; }


.fb-ph-chip {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
padding: 0.45rem 0.9rem !important;
color: #ffffff !important;
background: rgba(12, 15, 22, 0.64) !important;
border: 1.5px dashed rgba(255, 255, 255, 0.5) !important;
border-radius: 999px !important;
font-size: 0.8rem !important;
font-weight: 500 !important;
font-style: normal !important;
letter-spacing: 0.01em !important;
line-height: 1.2 !important;
cursor: pointer !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
white-space: nowrap !important;
}

.fb-ph-chip::before,
.module-gallery-item-empty-label::before {
content: "" !important;
flex: 0 0 auto !important;
width: 15px !important;
height: 15px !important;
background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/><circle cx='12' cy='13' r='4'/></svg>") center / contain no-repeat !important;
opacity: 0.92 !important;
}

.module-editor-placeholder-text::before,
.hero2-field-placeholder::before,
.text-image-placeholder::before,
.module-image-caption-placeholder::before,
.card-grid-inline-placeholder::before,
.module-card-grid-editor-placeholder::before {
content: "" !important;
display: inline-block !important;
width: 13px !important;
height: 13px !important;
margin-right: 6px !important;
vertical-align: -1px !important;
background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/></svg>") center / contain no-repeat !important;
opacity: 0.9 !important;
}

a.hero2-field-placeholder,
.button.hero2-field-placeholder,
.button.is-editor-placeholder,
.module-hero-button.is-editor-placeholder,
.module-text-image-button.is-editor-placeholder {
color: #ffffff !important;
background: rgba(12, 15, 22, 0.64) !important;
border: 1.5px dashed rgba(255, 255, 255, 0.5) !important;
}

.module-banner-image-placeholder {
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(120, 125, 135, 0.14) !important;
}

.module-card-grid-ba-media-placeholder {
display: grid !important;
place-items: center !important;
gap: 0.5rem !important;
width: 100% !important;
height: 100% !important;
min-height: 120px !important;
background: rgba(120, 125, 135, 0.14) !important;
border-radius: inherit !important;
}

.module-gallery-item-empty-label {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
padding: 0.4rem 0.85rem !important;
color: #ffffff !important;
background: rgba(12, 15, 22, 0.64) !important;
border: 1.5px dashed rgba(255, 255, 255, 0.5) !important;
border-radius: 999px !important;
font-size: 0.78rem !important;
font-weight: 500 !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
}

.module-card-grid-ba-media-placeholder,
.module-text-image-media-placeholder,
.module-text-image-placeholder,
.module-image-placeholder,
.module-gallery-item-empty {
background: rgba(244, 245, 247, 0.55) !important;
border: 1.5px dashed rgba(120, 128, 140, 0.5) !important;
border-radius: 14px !important;
box-shadow: none !important;
}

.module-text-image-layout-style-immersive .module-text-image-media-placeholder,
.module-text-image-layout-style-cinematic .module-text-image-media-placeholder,
.module-text-image-layout-style-editorial .module-text-image-media-placeholder {
border-radius: 14px !important;
}


.module-gallery-carousel-edit-banner {
display: flex !important;
flex-direction: column !important;
gap: 0.45rem !important;
margin: 0 0 1.1rem !important;
padding: 1.15rem 1.5rem !important;
background: #eff6ff !important;
border: 1px solid #bfdbfe !important;
border-left: 6px solid #2563eb !important;
border-radius: 12px !important;
text-align: left !important;
}
.module-gallery-carousel-edit-banner-title {
font-size: 1.75rem !important;
font-weight: 700 !important;
line-height: 1.2 !important;
color: #1e3a8a !important;
}
.module-gallery-carousel-edit-banner-text {
font-size: 1.2rem !important;
line-height: 1.55 !important;
color: #1d4ed8 !important;
}
.module-gallery-carousel-edit-banner-text a {
font-size: 1.2rem !important;
font-weight: 700 !important;
color: #1d4ed8 !important;
text-decoration: underline !important;
cursor: pointer !important;
}

.module-gallery-filmstrip-wrap { display: contents; }
.module-gallery-filmstrip-wrap.is-carousel-edit {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 0.5rem !important;
}
.module-gallery-filmstrip-wrap.is-carousel-edit > .module-gallery-carousel-edit {
flex: 1 1 auto !important;
min-width: 0 !important;
}

.module-gallery-grid.module-gallery-carousel-edit {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
grid-template-columns: none !important;
gap: 0.6rem !important;
align-items: stretch !important;
overflow-x: auto !important;
scroll-behavior: smooth !important;
scrollbar-width: none !important;
padding: 0.15rem 0.1rem 0.5rem !important;
}
.module-gallery-grid.module-gallery-carousel-edit::-webkit-scrollbar { display: none !important; }
.module-gallery-grid.module-gallery-carousel-edit > .module-gallery-item {
flex: 0 0 auto !important;
width: clamp(210px, 44%, 330px) !important;
height: auto !important;
aspect-ratio: 4 / 3 !important;
margin: 0 !important;
}

.module-gallery-filmstrip-arrow {
flex: 0 0 auto !important;
width: 42px !important;
height: 42px !important;
border-radius: 50% !important;
border: 1px solid #cbd5e1 !important;
background: #ffffff !important;
color: #1e293b !important;
font-size: 1.5rem !important;
line-height: 1 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14) !important;
transition: background 0.12s ease !important;
}
.module-gallery-filmstrip-arrow:hover { background: #f1f5f9 !important; }
.module-gallery-filmstrip-arrow.is-hidden {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}