body.public-site .btn {
    border-radius: var(--radius-sm);
    font-weight: 800;
    letter-spacing: 0;
    min-height: 2.75rem;
    padding-inline: 1.1rem;
}

body.public-site .btn-brand {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

body.public-site .btn-brand:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
    transform: translateY(-1px);
}

body.public-site .btn-outline-brand {
    background: transparent;
    border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
    color: var(--color-primary-dark);
}

body.public-site .btn-outline-brand:hover {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

body.public-site .profile-heading {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

body.public-site .profile-heading .section-title {
    margin-bottom: 0;
}

body.public-site .account-orders-link {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 2.75rem;
    width: 100%;
}

body.public-site .account-orders-link:active {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    border-color: var(--color-primary);
}

body.public-site .account-orders-link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
    outline-offset: 3px;
}

@media (min-width: 576px) {
    body.public-site .profile-heading {
        align-items: center;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body.public-site .account-orders-link {
        width: auto;
    }
}

body.public-site .soft-card,
body.public-site .product-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-subtle);
}

body.public-site .tag {
    background: rgba(88, 122, 90, 0.10);
    border: 1px solid rgba(88, 122, 90, 0.20);
    border-radius: 999px;
    color: var(--color-success);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.28rem 0.68rem;
}

body.public-site .form-control,
body.public-site .form-select {
    border-color: var(--color-border);
    border-radius: var(--radius-sm);
    min-height: 2.9rem;
}

body.public-site .form-control:focus,
body.public-site .form-select:focus {
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--color-primary) 14%, transparent);
}

body.public-site .icon-button {
    align-items: center;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-primary-dark);
    display: inline-flex;
    height: 2.75rem;
    justify-content: center;
    position: relative;
    text-decoration: none;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
    width: 2.75rem;
}

body.public-site .icon-button:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    transform: translateY(-1px);
}

body.public-site .icon-button svg {
    fill: none;
    height: 1.22rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 1.22rem;
}

body.public-site .cart-count {
    align-items: center;
    background: var(--color-primary);
    border: 2px solid var(--color-background);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 0.68rem;
    font-weight: 800;
    height: 1.25rem;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0 0.25rem;
    position: absolute;
    right: -0.2rem;
    top: -0.3rem;
}

.about-layout {
    align-items: start;
    display: grid;
    gap: clamp(1.75rem, 4vw, 3.25rem);
}

.about-layout--landscape {
    grid-template-areas:
        "media"
        "copy";
    grid-template-columns: 1fr;
}

.about-layout--landscape .about-layout__copy {
    grid-area: copy;
}

.about-layout--landscape .about-media {
    grid-area: media;
}

.about-layout--portrait {
    align-items: center;
    grid-template-areas: "copy media";
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 28.75rem);
}

.about-layout--portrait .about-layout__copy {
    grid-area: copy;
}

.about-layout--portrait .about-media {
    grid-area: media;
    justify-self: end;
    max-width: 28.75rem;
}

.about-media {
    background: color-mix(in srgb, var(--color-background) 70%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
    border-radius: var(--radius-card);
    margin: 0;
    overflow: hidden;
}

.about-media--landscape {
    aspect-ratio: 4 / 3;
    max-height: min(30rem, 60vw);
}

.about-media--portrait {
    aspect-ratio: 3 / 4;
    max-height: min(38.5rem, 78vh);
    width: 100%;
}

.about-media__frame {
    display: grid;
    height: 100%;
    isolation: isolate;
    place-items: center;
    position: relative;
    width: 100%;
}

.about-media__frame--has-backdrop {
    background: color-mix(in srgb, var(--color-background) 72%, #fff);
}

.about-media__image--backdrop {
    filter: blur(22px);
    height: 100%;
    inset: 0;
    object-fit: cover;
    opacity: 0.3;
    pointer-events: none;
    position: absolute;
    transform: scale(1.06);
    width: 100%;
    z-index: 0;
}

.about-media__image--foreground {
    height: 100%;
    object-fit: cover;
    object-position: center top;
    position: relative;
    width: 100%;
    z-index: 1;
}

.about-media--portrait .about-media__image--foreground {
    object-position: center 18%;
}

.about-media--portrait .about-media__frame {
    background: transparent;
}

/* A portrait upload that is a poor match for the 3:4 frame (too small, or an unusually wide/tall
   ratio) gets this class added at runtime once product-detail-media.js-style measurement detects
   the mismatch - see about-media.js - so it falls back to the same soft blurred fill used
   elsewhere instead of leaving a bare transparent letterbox gap around a contained image. */
.about-media--portrait .about-media__frame--has-backdrop {
    background: color-mix(in srgb, var(--color-background) 72%, #fff);
}

.about-media--portrait .about-media__image--foreground {
    object-fit: contain;
}

.occasion-card__image {
    border-radius: calc(var(--radius-card) - 0.35rem);
    display: block;
    height: 12rem;
    object-fit: cover;
    width: 100%;
}

/* The card is a link: it needs to look like one and answer to hover, focus and the keyboard. */
.occasion-card {
    color: inherit;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: box-shadow 200ms ease, transform 200ms ease;
}

.occasion-card:hover,
.occasion-card:focus-visible {
    box-shadow: var(--shadow-raised, 0 12px 28px rgba(0, 0, 0, 0.1));
    color: inherit;
    transform: translateY(-2px);
}

.occasion-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* Teaser copy, sized to be read rather than skimmed past. */
.occasion-card__text {
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.occasion-card__more {
    color: var(--color-primary);
    font-weight: 700;
    margin-top: auto;
    padding-top: 0.9rem;
}

.occasion-card:hover .occasion-card__more,
.occasion-card:focus-visible .occasion-card__more {
    text-decoration: underline;
}

/* Reading width for a single occasion. Scoped like the storefront's own .container rule so it
   actually narrows the column rather than losing to it. */
body.public-site .container.occasion-detail {
    max-width: 52rem;
}

/* The detail page is where a visitor goes to actually look at the photo, so it is shown whole:
   scaled down to fit the column and the viewport, never cropped to a fixed frame. Because the
   width follows the picture rather than the column, a portrait shot leaves no empty side panels. */
.occasion-detail__image {
    border-radius: var(--radius-card);
    display: block;
    height: auto;
    margin-inline: auto;
    max-height: min(38rem, 78vh);
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

.occasion-detail__body {
    color: var(--color-text);
    font-size: 1.05rem;
    line-height: 1.75;
    /* Tenant text is plain copy; keep its own paragraph breaks without allowing markup. */
    white-space: pre-line;
}

@media (max-width: 991px) {
    .about-layout--portrait {
        grid-template-areas:
            "media"
            "copy";
        grid-template-columns: 1fr;
    }

    .about-layout--portrait .about-media {
        justify-self: start;
        max-width: min(100%, 22rem);
    }
}

.about-media__placeholder {
    display: block;
    height: 100%;
    width: 100%;
}

.about-media__placeholder {
    align-items: center;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-secondary) 10%, transparent), transparent 55%),
        var(--color-cream, #f7f1ea);
    color: var(--color-text-muted);
    display: flex;
    font-weight: 700;
    justify-content: center;
    min-height: 12rem;
    padding: 1.5rem;
    text-align: center;
}

/* Storefront preview banner -------------------------------------------------------------------
   Rendered directly above the storefront header, and only while a tenant admin is previewing
   their own unpublished site. Both the banner and the header are sticky at the top, so the
   header's offset is pushed down by exactly the banner's height - via the adjacent-sibling
   selector, so the rule applies when the banner is actually present and the public site is
   untouched by it. */
:root {
    --storefront-preview-banner-height: 2.75rem;
}

.storefront-preview-banner {
    background: var(--color-primary-dark);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    min-height: var(--storefront-preview-banner-height);
    position: sticky;
    top: 0;
    z-index: 1090;
}

.storefront-preview-banner__inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1200px;
    min-height: var(--storefront-preview-banner-height);
    padding: 0.5rem 1rem;
}

.storefront-preview-banner__back {
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-sm);
    color: #fff;
    padding: 0.2rem 0.7rem;
    text-decoration: none;
    white-space: nowrap;
}

.storefront-preview-banner__back:hover,
.storefront-preview-banner__back:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.storefront-preview-banner__back:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.storefront-preview-banner + .storefront-header {
    inset-block-start: var(--storefront-preview-banner-height);
    top: var(--storefront-preview-banner-height);
}