/* MBH SOT Revision: site_designer_shell_6.css
 * Live Path: /assets/css/site_designer_shell.css
 *
 * Public-only structural styles for the Site Designer Header/Footer shell.
 * Deliberately scoped to Builder class names so Cart/Checkout/Account page CSS
 * remains untouched.
 */
.site-designer-live-surface {
    --designer-accent: #2d6cdf;
    --builder-section-gap: 0px;
    position: relative;
    width: 100%;
    overflow: hidden;
    background: transparent;
}

.site-designer-live-surface,
.site-designer-live-surface * {
    box-sizing: border-box;
}

.site-designer-live-surface .builder-section {
    position: relative;
    width: 100%;
    border: 0;
    background: transparent;
}

.site-designer-live-surface .builder-section + .builder-section {
    margin-top: var(--builder-section-gap, 0px);
}

.site-designer-live-surface .builder-section__stage {
    position: relative;
    width: 100%;
    min-height: 32px;
    overflow: visible;
    background: transparent;
}

.site-designer-live-surface .builder-section__stage.is-site-width {
    width: min(calc(100% - 40px), 1180px);
    margin-inline: auto;
}

.site-designer-live-surface .builder-content-box,
.site-designer-live-surface .builder-element {
    position: absolute;
    touch-action: auto;
}

.site-designer-live-surface .builder-content-box {
    min-width: 64px;
    min-height: 32px;
    overflow: visible;
    border: 1px solid #cbd3dd;
    border-radius: 12px;
    background: #fff;
}

.site-designer-live-surface .builder-content-box__inner {
    position: absolute;
    inset: 0;
    overflow: visible;
    border-radius: inherit;
}

.site-designer-live-surface .builder-element {
    min-width: 90px;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.001);
    cursor: inherit;
}

.site-designer-live-surface .builder-element--heading,
.site-designer-live-surface .builder-element--paragraph {
    padding: 0;
    border-width: 0;
}

.site-designer-live-surface .builder-element--heading {
    min-width: 80px;
    min-height: 28px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.08;
}

.site-designer-live-surface .builder-element--paragraph {
    min-width: 80px;
    min-height: 36px;
    color: #48525e;
    font-size: 15px;
    line-height: 1.5;
}

.site-designer-live-surface .builder-element--image {
    min-width: 16px;
    min-height: 16px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #728091;
    text-align: center;
    font-size: 11px;
    font-weight: 750;
}

.site-designer-live-surface .builder-element--image:not(.has-image) {
    border: 1px dashed #aeb9c6;
    background: #f8fafc;
}

.site-designer-live-surface .builder-element--image.has-image {
    overflow: visible;
}

.site-designer-live-surface .builder-image__asset {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
    pointer-events: none;
    user-select: none;
}

.site-designer-live-surface .builder-image__placeholder {
    max-width: 170px;
    padding: 10px;
    line-height: 1.35;
}

.site-designer-live-surface .builder-element--button {
    width: max-content;
    min-width: 80px;
    min-height: 36px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.site-designer-live-surface .builder-element__content {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    white-space: pre-wrap;
}

.site-designer-live-surface .builder-element--button .builder-element__content,
.site-designer-live-surface .builder-element--badge .builder-element__content {
    display: grid;
    place-items: center;
}

.site-designer-live-surface .builder-element--badge {
    min-width: 24px;
    min-height: 24px;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
}

.site-designer-live-surface .builder-element--marquee {
    min-width: 80px;
    min-height: 32px;
    padding: 0;
    overflow: visible;
}

.site-designer-live-surface .builder-marquee__viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
}

.site-designer-live-surface .builder-marquee__track {
    position: absolute;
    display: flex;
    gap: var(--builder-marquee-gap, 48px);
    animation-duration: var(--builder-marquee-duration, 10s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

.site-designer-live-surface .builder-marquee__segment { flex: 0 0 auto; }
.site-designer-live-surface .builder-element--marquee.is-orientation-horizontal .builder-marquee__track {
    top: 0;
    left: 0;
    min-width: max-content;
    height: 100%;
    align-items: center;
    animation-name: builder-marquee-x-forward;
}
.site-designer-live-surface .builder-element--marquee.is-orientation-horizontal .builder-marquee__segment { white-space: nowrap; }
.site-designer-live-surface .builder-element--marquee.is-orientation-horizontal.is-flow-reverse .builder-marquee__track { animation-name: builder-marquee-x-reverse; }
.site-designer-live-surface .builder-element--marquee.is-orientation-vertical .builder-marquee__track {
    top: 0;
    left: 0;
    width: 100%;
    min-height: max-content;
    flex-direction: column;
    align-items: stretch;
    animation-name: builder-marquee-y-forward;
}
.site-designer-live-surface .builder-element--marquee.is-orientation-vertical .builder-marquee__segment {
    min-height: max-content;
    padding-inline: 8px;
    white-space: normal;
}
.site-designer-live-surface .builder-element--marquee.is-orientation-vertical.is-flow-reverse .builder-marquee__track { animation-name: builder-marquee-y-reverse; }

@keyframes builder-marquee-x-forward { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--builder-marquee-half-gap, 24px))); } }
@keyframes builder-marquee-x-reverse { from { transform: translateX(calc(-50% - var(--builder-marquee-half-gap, 24px))); } to { transform: translateX(0); } }
@keyframes builder-marquee-y-forward { from { transform: translateY(0); } to { transform: translateY(calc(-50% - var(--builder-marquee-half-gap, 24px))); } }
@keyframes builder-marquee-y-reverse { from { transform: translateY(calc(-50% - var(--builder-marquee-half-gap, 24px))); } to { transform: translateY(0); } }

.site-designer-live-surface .builder-element--divider {
    min-width: 40px;
    min-height: 8px;
    padding: 0;
    background: transparent;
}
.site-designer-live-surface .builder-divider__line { position: absolute; pointer-events: none; }
.site-designer-live-surface .builder-element--divider.is-orientation-horizontal .builder-divider__line {
    top: 50%;
    right: 0;
    left: 0;
    border-top: var(--builder-divider-thickness, 1px) var(--builder-divider-style, solid) var(--builder-divider-color, #cbd3dd);
    transform: translateY(-50%);
}
.site-designer-live-surface .builder-element--divider.is-orientation-vertical .builder-divider__line {
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: var(--builder-divider-thickness, 1px) var(--builder-divider-style, solid) var(--builder-divider-color, #cbd3dd);
    transform: translateX(-50%);
}

.site-designer-live-surface .builder-menu-component {
    overflow: visible;
}

@media (hover: hover) and (pointer: fine) {
    .site-designer-live-surface .builder-element--button:hover {
        border-color: var(--builder-button-hover-border, currentColor);
        background-color: var(--builder-button-hover-background, #1f57bd) !important;
        color: var(--builder-button-hover-color, #fff) !important;
        box-shadow: var(--builder-button-hover-shadow, none);
    }
}

@media (max-width: 620px) {
    .site-designer-live-surface .builder-section__stage.is-site-width {
        width: min(calc(100% - 28px), 1180px);
    }
}

/* Policy/menu runtime uses the exact same class contract as Site Designer Preview. */
/* MBH SOT Revision: menu_component_1.css
 * Live Path: /admin/modules/site_designer/assets/css/menu_component.css
 */
.builder-menu-component {
    display: inline-block;
    width: max-content;
    height: max-content;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    vertical-align: top;
}

.builder-menu {
    --builder-menu-color: #202833;
    --builder-menu-font-family: inherit;
    --builder-menu-font-size: 14px;
    --builder-menu-font-weight: 600;
    --builder-menu-font-style: normal;
    --builder-menu-line-height: 1.2;
    --builder-menu-letter-spacing: 0px;
    --builder-menu-submenu-color: #202833;
    --builder-menu-submenu-font-family: inherit;
    --builder-menu-submenu-font-size: 13px;
    --builder-menu-submenu-font-weight: 500;
    --builder-menu-submenu-font-style: normal;
    --builder-menu-submenu-line-height: 1.25;
    --builder-menu-submenu-letter-spacing: 0px;
    --builder-menu-submenu-hover-color: #202833;
    --builder-menu-submenu-indent: 14px;
    --builder-menu-container-background: transparent;
    --builder-menu-container-border-color: #d7dde5;
    --builder-menu-container-border-width: 0px;
    --builder-menu-container-radius: 8px;
    --builder-menu-container-shadow: none;
    --builder-menu-container-padding: 0px;
    --builder-menu-background: transparent;
    --builder-menu-border-color: #d7dde5;
    --builder-menu-border-width: 0px;
    --builder-menu-radius: 6px;
    --builder-menu-hover-background: #f1f5f9;
    --builder-menu-hover-color: #202833;
    --builder-menu-hover-border-color: #9bb9ef;
    --builder-menu-gap: 8px;
    --builder-menu-shadow: none;
    --builder-menu-hover-shadow: none;
    --builder-menu-text-align: left;
    position: relative;
    width: max-content;
    height: auto;
    box-sizing: border-box;
    padding: var(--builder-menu-container-padding);
    border: var(--builder-menu-container-border-width) solid var(--builder-menu-container-border-color);
    border-radius: var(--builder-menu-container-radius);
    background: var(--builder-menu-container-background);
    box-shadow: var(--builder-menu-container-shadow);
    color: var(--builder-menu-color);
    font-family: var(--builder-menu-font-family);
    font-size: var(--builder-menu-font-size);
    font-weight: var(--builder-menu-font-weight);
    font-style: var(--builder-menu-font-style);
    line-height: var(--builder-menu-line-height);
    letter-spacing: var(--builder-menu-letter-spacing);
    opacity: var(--builder-menu-opacity, 1);
    overflow: visible;
}

.builder-menu__nav {
    width: max-content;
    height: auto;
    min-width: 0;
    overflow: visible;
}

.builder-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.builder-menu__list--root {
    display: flex;
    width: max-content;
    min-width: 0;
    gap: var(--builder-menu-gap);
}

.builder-menu--horizontal .builder-menu__list--root {
    flex-direction: row;
    align-items: center;
}

.builder-menu--vertical .builder-menu__list--root {
    flex-direction: column;
    align-items: stretch;
}

.builder-menu--align-left .builder-menu__list--root { justify-content: flex-start; }
.builder-menu--align-center .builder-menu__list--root { justify-content: center; }
.builder-menu--align-right .builder-menu__list--root { justify-content: flex-end; }
.builder-menu--vertical.builder-menu--align-left .builder-menu__list--root,
.builder-menu--vertical.builder-menu--align-center .builder-menu__list--root,
.builder-menu--vertical.builder-menu--align-right .builder-menu__list--root { justify-content: flex-start; }
.builder-menu--vertical.builder-menu--align-left .builder-menu__list--root { align-items: flex-start; }
.builder-menu--vertical.builder-menu--align-center .builder-menu__list--root { align-items: center; }
.builder-menu--vertical.builder-menu--align-right .builder-menu__list--root { align-items: flex-end; }
.builder-menu--vertical.builder-menu--align-left .builder-menu__item,
.builder-menu--vertical.builder-menu--align-center .builder-menu__item,
.builder-menu--vertical.builder-menu--align-right .builder-menu__item { max-width: 100%; }

.builder-menu__item {
    position: relative;
    min-width: 0;
}

.builder-menu__item-row {
    display: flex;
    align-items: center;
    min-width: 0;
}

.builder-menu__link,
.builder-menu__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    color: var(--builder-menu-color);
    font: inherit;
    text-align: var(--builder-menu-text-align);
    text-decoration: none;
    white-space: nowrap;
}

.builder-menu__heading {
    font-weight: 800;
}

.builder-menu__action-form {
    display: block;
    margin: 0;
    padding: 0;
}

button.builder-menu__action {
    appearance: none;
    width: auto;
    margin: 0;
    cursor: pointer;
}

.builder-menu__cart-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.builder-menu__cart-label {
    min-width: 0;
}

.builder-menu__cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--builder-menu-cart-badge-background, #d92d20);
    color: var(--builder-menu-cart-badge-color, #ffffff);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}

.builder-menu--style-text .builder-menu__link,
.builder-menu--style-text .builder-menu__heading {
    padding: 5px 3px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.builder-menu--style-buttons .builder-menu__link,
.builder-menu--style-buttons .builder-menu__heading,
.builder-menu--style-tiles .builder-menu__link,
.builder-menu--style-tiles .builder-menu__heading {
    padding: 9px 12px;
    border: var(--builder-menu-border-width) solid var(--builder-menu-border-color);
    border-radius: var(--builder-menu-radius);
    background: var(--builder-menu-background);
    box-shadow: var(--builder-menu-shadow);
}


.builder-menu--style-tiles .builder-menu__link,
.builder-menu--style-tiles .builder-menu__heading {
    min-width: 72px;
    min-height: 54px;
    justify-content: center;
    text-align: center;
}

.builder-menu__link:hover,
.builder-menu__link:focus-visible {
    color: var(--builder-menu-hover-color);
    background: var(--builder-menu-hover-background);
    border-color: var(--builder-menu-hover-border-color);
    box-shadow: var(--builder-menu-hover-shadow);
    outline: none;
}

.builder-menu__caret {
    display: inline-block;
    font-size: 0.78em;
    opacity: 0.7;
}

.builder-menu__item--divider {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.builder-menu__divider {
    display: block;
    box-sizing: border-box;
    opacity: var(--builder-menu-divider-opacity);
}

.builder-menu--horizontal > .builder-menu__nav > .builder-menu__list--root > .builder-menu__item--divider {
    margin-left: var(--builder-menu-divider-before);
    margin-right: var(--builder-menu-divider-after);
}

.builder-menu--horizontal > .builder-menu__nav > .builder-menu__list--root > .builder-menu__item--divider .builder-menu__divider {
    width: 0;
    height: var(--builder-menu-divider-length);
    border-left: var(--builder-menu-divider-thickness) var(--builder-menu-divider-style) var(--builder-menu-divider-color);
}

.builder-menu--vertical .builder-menu__item--divider,
.builder-menu__submenu .builder-menu__item--divider {
    align-self: stretch;
    justify-content: var(--builder-menu-divider-justify, center);
    margin-top: var(--builder-menu-divider-before);
    margin-bottom: var(--builder-menu-divider-after);
}

.builder-menu--vertical .builder-menu__item--divider .builder-menu__divider,
.builder-menu__submenu .builder-menu__item--divider .builder-menu__divider {
    width: min(100%, var(--builder-menu-divider-length));
    height: 0;
    border-top: var(--builder-menu-divider-thickness) var(--builder-menu-divider-style) var(--builder-menu-divider-color);
}

.builder-menu__submenu {
    min-width: 180px;
    gap: 3px;
    color: var(--builder-menu-submenu-color);
    font-family: var(--builder-menu-submenu-font-family);
    font-size: var(--builder-menu-submenu-font-size);
    font-weight: var(--builder-menu-submenu-font-weight);
    font-style: var(--builder-menu-submenu-font-style);
    line-height: var(--builder-menu-submenu-line-height);
    letter-spacing: var(--builder-menu-submenu-letter-spacing);
}

.builder-menu__submenu .builder-menu__link,
.builder-menu__submenu .builder-menu__heading {
    color: var(--builder-menu-submenu-color);
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.builder-menu__submenu .builder-menu__link:hover,
.builder-menu__submenu .builder-menu__link:focus-visible {
    color: var(--builder-menu-submenu-hover-color);
}

/* Horizontal Dropdown and Flyout are overlay menus. Vertical Dropdown is
   intentionally handled separately below so opening it participates in layout
   and pushes later menu items downward. */
.builder-menu--horizontal.builder-menu--submenu-dropdown .builder-menu__submenu,
.builder-menu--submenu-flyout .builder-menu__submenu {
    display: none;
    position: absolute;
    z-index: 5000;
    padding: 6px;
    border: var(--builder-menu-border-width) solid var(--builder-menu-border-color);
    border-radius: var(--builder-menu-radius);
    background: var(--builder-menu-background);
    box-shadow: var(--builder-menu-shadow);
}

.builder-menu--horizontal.builder-menu--submenu-dropdown > .builder-menu__nav > .builder-menu__list--root > .builder-menu__item > .builder-menu__submenu {
    top: 100%;
    left: 0;
}

.builder-menu--horizontal.builder-menu--submenu-dropdown .builder-menu__submenu .builder-menu__submenu,
.builder-menu--submenu-flyout .builder-menu__submenu {
    top: 0;
    left: 100%;
}

.builder-menu--horizontal.builder-menu--submenu-dropdown .builder-menu__item:hover > .builder-menu__submenu,
.builder-menu--horizontal.builder-menu--submenu-dropdown .builder-menu__item:focus-within > .builder-menu__submenu,
.builder-menu--submenu-flyout .builder-menu__item:hover > .builder-menu__submenu,
.builder-menu--submenu-flyout .builder-menu__item:focus-within > .builder-menu__submenu {
    display: flex;
    flex-direction: column;
}

.builder-menu--vertical.builder-menu--submenu-dropdown .builder-menu__submenu {
    display: none;
    position: static;
    min-width: 0;
    width: max-content;
    max-width: 100%;
    margin-top: 3px;
    padding: 0 0 0 var(--builder-menu-submenu-indent);
    border: 0;
    background: transparent;
    box-shadow: none;
}

.builder-menu--vertical.builder-menu--submenu-dropdown .builder-menu__item:hover > .builder-menu__submenu,
.builder-menu--vertical.builder-menu--submenu-dropdown .builder-menu__item:focus-within > .builder-menu__submenu {
    display: flex;
    flex-direction: column;
}

.builder-menu--submenu-flat .builder-menu__submenu {
    display: flex;
    flex-direction: column;
    margin-top: 3px;
    padding-left: var(--builder-menu-submenu-indent);
}

.builder-menu--submenu-accordion .builder-menu__submenu {
    display: none;
    flex-direction: column;
    margin-top: 3px;
    padding-left: var(--builder-menu-submenu-indent);
}

.builder-menu--submenu-accordion .builder-menu__item.is-submenu-open > .builder-menu__submenu {
    display: flex;
}

.builder-menu__submenu-toggle,
.builder-menu__toggle {
    border: var(--builder-menu-border-width) solid var(--builder-menu-border-color);
    border-radius: var(--builder-menu-radius);
    background: var(--builder-menu-background);
    color: var(--builder-menu-color);
    font: inherit;
    cursor: pointer;
}

.builder-menu__submenu-toggle {
    flex: 0 0 auto;
    margin-left: 4px;
    padding: 5px 7px;
}

.builder-menu__submenu-toggle[aria-expanded="true"] span[aria-hidden="true"] {
    display: inline-block;
    transform: rotate(180deg);
}

.builder-menu.is-collapsible .builder-menu__nav {
    display: none;
}

.builder-menu.is-collapsible.is-open .builder-menu__nav {
    display: block;
}

.builder-menu__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 36px;
    min-height: 34px;
    padding: 7px 9px;
    margin-bottom: 6px;
}

.builder-menu__toggle:hover,
.builder-menu__toggle:focus-visible,
.builder-menu__submenu-toggle:hover,
.builder-menu__submenu-toggle:focus-visible {
    color: var(--builder-menu-hover-color);
    background: var(--builder-menu-hover-background);
    border-color: var(--builder-menu-hover-border-color);
    outline: none;
}

.builder-menu__toggle-icon {
    font-size: 18px;
    line-height: 1;
}

.builder-menu-empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    width: 220px;
    height: auto;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px dashed #aeb9c6;
    border-radius: 6px;
    color: #66717e;
    background: rgba(255, 255, 255, 0.72);
    font-size: 12px;
}

.builder-menu-empty strong {
    color: #202833;
    font-size: 13px;
}

.builder-menu__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.builder-policy-modal-open {
    overflow: hidden;
}

.builder-policy-modal[hidden] {
    display: none;
}

.builder-policy-modal {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.builder-policy-modal__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(20, 27, 36, 0.66);
    cursor: pointer;
}

.builder-policy-modal__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(760px, 100%);
    max-height: min(82vh, 820px);
    overflow: hidden;
    border: 1px solid #d7dde5;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(20, 27, 36, 0.28);
    color: #202833;
}

.builder-policy-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #e2e7ed;
}

.builder-policy-modal__header h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
}

.builder-policy-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #d7dde5;
    border-radius: 8px;
    background: #ffffff;
    color: #202833;
    font: inherit;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.builder-policy-modal__close:hover,
.builder-policy-modal__close:focus-visible {
    background: #f3f6f9;
    outline: none;
}

.builder-policy-modal__body {
    overflow: auto;
    padding: 20px 22px 24px;
    font-size: 15px;
    line-height: 1.6;
}

.builder-policy-modal__body > :first-child {
    margin-top: 0;
}

.builder-policy-modal__body > :last-child {
    margin-bottom: 0;
}

.builder-policy-modal__body a {
    color: inherit;
    text-decoration: underline;
}

@media (max-width: 720px) {
    .builder-policy-modal {
        align-items: flex-end;
        padding: 12px;
    }
    .builder-policy-modal__dialog {
        max-height: 88vh;
    }
    .builder-menu--horizontal .builder-menu__list--root {
        flex-wrap: wrap;
    }
    .builder-menu--style-tiles .builder-menu__link,
    .builder-menu--style-tiles .builder-menu__heading {
        min-width: 58px;
        min-height: 46px;
    }
}


.site-designer-live-surface .builder-element--menu {
    z-index: 80;
    width: max-content;
    height: max-content;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border-color: transparent;
    background: transparent;
    overflow: visible;
}

.site-designer-live-surface .builder-element--menu:hover {
    border-color: transparent;
}

/* Smart bakery components use the same shared component stylesheet as the
   Site Designer Editor and Preview. Keep the live host transparent so the
   component itself, not the generic Builder element shell, owns presentation. */
.site-designer-live-surface .builder-element--category_cards,
.site-designer-live-surface .builder-element--product_grid,
.site-designer-live-surface .builder-element--product_scroller,
.site-designer-live-surface .builder-element--blog_articles {
    min-width: 180px;
    min-height: 120px;
    padding: 0;
    overflow: visible;
    border-color: transparent;
    background: transparent;
}


/* Header menus must be able to fly out across the page surface in full draft Preview. */
.storefront-preview-shell {
    position: relative;
    isolation: isolate;
    overflow: visible;
}

.storefront-preview-page.storefront-preview-page--header {
    position: relative;
    z-index: 100;
    overflow: visible;
}

.storefront-preview-page.storefront-preview-page--page {
    position: relative;
    z-index: 1;
}

.storefront-preview-page.storefront-preview-page--footer {
    position: relative;
    z-index: 2;
}

.storefront-preview-page--header .builder-section,
.storefront-preview-page--header .builder-section__stage {
    overflow: visible;
}

/* Text menus use typography only for item hover. Their links do not grow
   individual hover boxes; the optional Menu Container supplies shared contrast. */
.builder-menu--style-text .builder-menu__link:hover,
.builder-menu--style-text .builder-menu__link:focus-visible {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}


/* Preserve the existing storefront cart feedback on Site Designer system menus. */
[data-storefront-cart-count][hidden] {
    display: none !important;
}

[data-storefront-cart-link].is-cart-updated [data-storefront-cart-count] {
    animation: cart-count-pop .42s ease;
}

@media (prefers-reduced-motion: reduce) {
    [data-storefront-cart-link].is-cart-updated [data-storefront-cart-count] {
        animation: none;
    }
}