.card-layout {
    background: #f4f1ed;
}

.card-header {
    position: relative;
    z-index: 10;
    padding: .7rem 0;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid rgba(43, 31, 22, .1);
    box-shadow: 0 4px 20px rgba(43, 31, 22, .06);
}

.card-brand {
    display: inline-flex;
}

.card-back-link {
    color: var(--oncoto-brown);
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
}

    .card-back-link:hover {
        color: #08763d;
    }

    .card-back-link:focus-visible,
    .card-footer a:focus-visible,
    .business-card-page a:focus-visible,
    .business-card-page button:focus-visible,
    .business-card-page input:focus-visible {
        outline: 3px solid #ff8a4c;
        outline-offset: 3px;
    }

.card-footer {
    padding: 1.5rem 0;
    color: #6d625a;
    background: white;
    border-top: 1px solid var(--oncoto-border);
    font-size: .9rem;
}

    .card-footer a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        font-weight: 700;
    }

.business-card-page {
    background: #f4f1ed;
}

    .business-card-page .business-hero {
        min-height: 285px;
        padding: 2.75rem 0 2rem;
    }

.business-hero-copy {
    text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
}

    .business-hero-copy h1 {
        margin-bottom: .45rem;
    }

.business-description {
    max-width: 42rem;
    margin-bottom: .35rem;
    font-size: 1.08rem;
    font-weight: 600;
}

.business-message {
    max-width: 42rem;
    margin: 0;
    color: rgba(255, 255, 255, .9);
}

.card-content {
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
}

.public-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 1rem;
    align-items: start;
}

.public-card-main,
.public-card-aside {
    display: grid;
    gap: 1rem;
}

.public-card-aside {
    position: sticky;
    top: 1rem;
}

.card-section,
.attendance-card,
.updates-card {
    border-radius: 1rem;
}

.card-section {
    padding: 1.35rem;
}

.attendance-card {
    padding: 1.5rem;
    color: #1f392a;
    background: linear-gradient(135deg, #f1fff6, #fff);
    border: 2px solid #17834a;
    box-shadow: 0 12px 30px rgba(0, 93, 46, .1);
}

.attendance-heading {
    text-align: end;
}

    .attendance-heading h2,
    .section-heading h2,
    .contact-card h2,
    .updates-card h2 {
        margin: .12rem 0 .8rem;
    }

.section-eyebrow {
    display: block;
    color: #516159;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.attendance-status,
.availability-badge,
.location-current-label {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-height: 28px;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
}

    .attendance-status.status-ActiveNow {
        color: var(--status-active-color);
        background: var(--status-active-bg);
    }

    .attendance-status.status-Closed {
        color: var(--status-closed-color);
        background: var(--status-closed-bg);
    }

    .attendance-status.status-ArrivingSoon {
        color: var(--status-arriving-color);
        background: var(--status-arriving-bg);
    }

    .attendance-status.status-UpcomingAttendance {
        color: var(--status-upcoming-color);
        background: var(--status-upcoming-bg);
    }

.attendance-location h3 {
    margin: .25rem 0 .35rem;
    font-size: 1.25rem;
}

.attendance-location p,
.location-item p,
.product-item p {
    margin-bottom: .2rem;
}

.location-reference {
    color: #665c55;
    font-size: .92rem;
}

.location-schedule {
    margin-top: .45rem;
    color: #075b2d;
    font-size: .9rem;
    font-weight: 700;
}

.attendance-time {
    margin: 1rem 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.primary-actions,
.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

    .primary-actions .btn {
        min-width: 160px;
        padding: .72rem 1rem;
    }

.btn-route {
    color: #fff;
    background: #08763d;
    border-color: #08763d;
}

    .btn-route:hover,
    .btn-route:focus {
        color: #fff;
        background: #065d30;
        border-color: #065d30;
    }

.btn-whatsapp {
    color: #075b2d;
    background: #dff7e8;
    border-color: #6cc991;
}

    .btn-whatsapp:hover,
    .btn-whatsapp:focus {
        color: #fff;
        background: #08763d;
        border-color: #08763d;
    }

.empty-message {
    margin: .5rem 0 1rem;
    color: #665c55;
}

.product-list,
.location-list {
    display: grid;
}

.product-item,
.location-item {
    display: flex;
    gap: .9rem;
    padding: 1rem 0;
    border-top: 1px solid #e8e3df;
}

    .product-item:first-child,
    .location-item:first-child {
        border-top: 0;
    }

    .product-info,
    .location-item > div {
        min-width: 0;
        flex: 1;
    }

.product-image {
    width: 72px;
    height: 72px;
    flex: none;
    object-fit: cover;
    border-radius: .75rem;
}

.product-title-row h3,
.location-name-row h3 {
    margin: 0 0 .25rem;
    font-size: 1.05rem;
}

.availability-Available {
    color: #075b2d;
    background: #dff7e8;
}

.availability-LowStock {
    color: #6e3b06;
    background: #fff0c7;
}

.availability-SoldOut {
    color: #5d5149;
    background: #e9e5e2;
}

.availability-PreOrder,
.availability-ComingSoon {
    color: #70400e;
    background: #ffe2cf;
}

.product-price {
    margin-top: .4rem;
    color: #075b2d;
    font-weight: 800;
}

.product-detail,
.product-note {
    color: #665c55;
    font-size: .9rem;
}

.location-item {
    align-items: center;
}

    .location-item .btn {
        min-width: 105px;
    }

.location-current {
    margin: 0 -.6rem;
    padding-right: .6rem;
    padding-left: .6rem;
    background: #f5fbf7;
    border-radius: .75rem;
}

.location-current-label {
    color: #075b2d;
    background: #dff7e8;
}

.contact-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 1rem;
}

    .contact-actions .btn:first-child:last-child,
    .contact-actions .contact-prefered {
        grid-column: 1 / -1;
        min-height: 3.25rem;
        font-size: 1rem;
    }

.updates-card {
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--oncoto-border);
    box-shadow: 0 8px 24px rgba(43, 31, 22, .04);
}

    .updates-card > p {
        color: #665c55;
    }

    .updates-card .collapse form {
        padding-top: 1.2rem;
    }

    .updates-card .form-check-input {
        width: 1.15rem;
        height: 1.15rem;
        margin-right: .35rem;
    }

    .updates-card:target {
        scroll-margin-top: 1rem;
    }

@media (max-width: 520px) {
    .card-back-link {
        max-width: 9rem;
        text-align: right;
    }

    .business-card-page .business-hero {
        min-height: 0;
        padding: 1.4rem 0;
    }

    .business-card-page .business-hero-content {
        display: grid;
        grid-template-columns: 78px 1fr;
        gap: .85rem;
        align-items: start;
    }

    .business-card-page .business-logo {
        width: 78px;
        height: 78px;
    }

    .business-hero-copy h1 {
        margin-top: .1rem;
        font-size: 1.85rem;
    }

    .business-description {
        font-size: .96rem;
    }

    .business-message {
        grid-column: 1 / -1;
    }

    .attendance-heading,
    .product-title-row,
    .location-name-row {
        display: block;
    }

    .attendance-status,
    .availability-badge,
    .location-current-label {
        margin-top: .35rem;
    }

    .primary-actions,
    .contact-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

        .primary-actions .btn {
            width: 100%;
        }

    .product-item {
        align-items: start;
    }

    .location-item {
        display: grid;
    }

        .location-item .btn {
            width: 100%;
        }
}

.notification-location-choice {
    padding: .85rem;
    border: 1px solid #d7d1cb;
    border-radius: .75rem;
}

    .notification-location-choice legend {
        float: none;
        width: auto;
        margin-bottom: .45rem;
        font-weight: 700;
    }

.notification-location-options {
    margin: .5rem 0 0 1rem;
    padding: .65rem;
    border-left: 3px solid #2fbf71;
    background: #f5fff9;
}

@media (max-width: 900px) {
    .public-card-grid {
        grid-template-columns: 1fr;
    }

    .public-card-aside {
        position: static;
    }
}