/* The storefront stylesheet supplies the design. These rules connect it to the
   demo's native controls, which have no dependency on the live application. */
[hidden] { display: none !important; }

#top { scroll-margin-top: var(--storefront-menu-height, 64px); }

.gate-grid > button.product-card {
    position: relative;
    gap: 0 !important;
    font: inherit;
    color: inherit;
    text-transform: none;
    appearance: none;
}

.gate-grid > button.product-card:focus-visible {
    outline: 2px solid #855a22;
    outline-offset: 2px;
}

.demo-dialog {
    border: 0;
    background: transparent;
    padding: 0;
    overflow: auto;
    max-width: calc(100% - 16px);
    max-height: calc(100% - 32px);
}

.demo-dialog::backdrop { background: rgba(15, 23, 42, .7); }
body:has(.demo-dialog[open]) { overflow: hidden; }
.demo-dialog .modal-card { margin: 0; box-sizing: border-box; }
.demo-dialog figure { margin-inline: 0; }
.demo-dialog .studio-btn-main:disabled { cursor: default; opacity: .55; }

#contact .guest-storefront-columns {
    color: var(--guest-header-text-color, #0c0c0e);
    padding-inline: clamp(0px, 1.6vw, 20px);
}