:root {
    --color-ink: #1f1a17;
    --color-brown-900: #2d1909;
    --color-brown-800: #4d3520;
    --color-brown-700: #7b4a14;
    --color-brown-600: #9b642a;
    --color-brown-500: #a36a2f;
    --color-success-700: #207a49;
    --color-success-600: #2d8f5d;
    --color-danger-700: #842029;
    --color-danger-600: #b02a37;
    --color-danger: #dc3545;
    --color-white: #fff;
    --color-surface: #f5f5f5;
    --color-surface-light: #fffdf9;
    --color-surface-muted: #f8f9fa;
    --color-text-muted: #6a5540;
    --color-text-soft: #433423;
    --color-text-dark: #3d2d1f;
    --color-success-text: #0f5132;
    --color-warning-text: #664d03;
    --color-neutral: #6c757d;
    --color-surface-hover: #fffaf3;
    --color-surface-control: #f5f2f2;
    --border-color: rgba(112, 72, 20, 0.2);
    --border-color-soft: rgba(112, 72, 20, 0.18);
    --border-color-control: rgba(112, 72, 20, 0.35);
    --border-color-strong: rgba(112, 72, 20, 0.45);
    --border-color-faint: rgba(112, 72, 20, 0.12);
    --border-color-light: rgba(112, 72, 20, 0.14);
    --border-color-medium: rgba(112, 72, 20, 0.16);
    --border-color-card: rgba(112, 72, 20, 0.22);
    --border-color-dashed: rgba(112, 72, 20, 0.28);
    --focus-ring: 0 0 0 0.2rem rgba(123, 74, 20, 0.16);
    --shadow-color-card: rgba(84, 58, 25, 0.08);
    --shadow-color-soft: rgba(84, 58, 25, 0.07);
    --shadow-color-button: rgba(84, 58, 25, 0.12);
    --shadow-color-image: rgba(84, 58, 25, 0.1);
    --shadow-color-strong: rgba(84, 58, 25, 0.14);
    --shadow-color-subtle: rgba(84, 58, 25, 0.06);
    --shadow-color-hover: rgba(84, 58, 25, 0.15);
    --shadow-color-danger: rgba(176, 42, 55, 0.2);
    --shadow-color-danger-hover: rgba(176, 42, 55, 0.28);
    --brown-hover: rgba(123, 74, 20, 0.08);
    --brown-focus: rgba(123, 74, 20, 0.9);
    --surface-overlay: rgba(245, 245, 245, 0.82);
    --surface-white-20: rgba(255, 255, 255, 0.2);
    --surface-white-35: rgba(255, 255, 255, 0.35);
    --surface-white-38: rgba(255, 255, 255, 0.38);
    --surface-white-50: rgba(255, 255, 255, 0.5);
    --surface-white-70: rgba(255, 255, 255, 0.7);
    --surface-white-72: rgba(255, 255, 255, 0.72);
    --surface-white-75: rgba(255, 255, 255, 0.75);
    --surface-white-82: rgba(255, 255, 255, 0.82);
    --surface-white-90: rgba(255, 255, 255, 0.9);
    --surface-white-98: rgba(255, 253, 249, 0.98);
    --radius-sm: 0.35rem;
    --radius-control: 0.8rem;
    --radius-card: 0.5rem;
    --radius-pill: 999px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;

    --card-background-color: var(--color-surface);
    --card-background-hover-color: color-mix(in srgb, var(--card-background-color) 95%, black);
}

/* Base */
@font-face {
    font-family: Rossetti;
    src: url("../fonts/Rossetti.woff") format("woff"),
         url("../fonts/Rossetti.woff2") format("woff2"),
         url("../fonts/Rossetti.svg#rossetti") format("svg"),
         url("../fonts/Rossetti.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

body {
    background-image: url('../../images/oliebollen-min.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/* Components */
.site-footer {
    margin-block: 1.25rem;
    margin-inline: auto;
    padding-block: var(--space-3);
    padding-inline: var(--space-4);
    border: 1px solid var(--border-color-soft);
    border-radius: 0.5rem;
    background: var(--surface-overlay);
    box-shadow: 0 0.25rem 0.75rem var(--shadow-color-soft);
    text-align: center;
}

.site-footer__text {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.site-footer__logo {
    display: inline-block;
    width: 40px;
    height: auto;
    margin-inline-start: 0.65rem;
    margin-inline-end: 0.4rem;
    vertical-align: middle;
}

.site-footer a {
    color: var(--color-brown-700);
    font-weight: 600;
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: var(--color-brown-800);
    text-decoration: underline;
}

.checkout-form .form-control,
.checkout-form .form-select,
.checkout-form textarea.form-control,
.checkout-select,
.checkout-input {
    border: 1px solid var(--border-color-control);
    border-radius: var(--radius-control);
    background-color: var(--color-surface-light);
    box-shadow: 0 0.125rem 0.75rem var(--shadow-color-card);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.checkout-form .form-control,
.checkout-form .form-select,
.checkout-form textarea.form-control,
.checkout-input {
    min-height: 3.1rem;
    padding: 0.8rem 1rem;
    font-size: 1rem;
}

.checkout-form textarea.form-control {
    min-height: 7rem;
}

.checkout-select {
    min-height: 3.1rem;
    padding: 0.8rem 2.5rem 0.8rem 1rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-brown-700) 50%), linear-gradient(135deg, var(--color-brown-700) 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.checkout-form .form-select:focus,
.checkout-form .form-control:focus,
.checkout-form textarea.form-control:focus,
.checkout-select:focus,
.checkout-input:focus {
    border-color: var(--brown-focus);
    box-shadow: var(--focus-ring);
    outline: none;
}

.checkout-card,
.checkout-summary,
.contact-form,
.contact-shell,
.contact-card,
.header-shell {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    box-shadow: 0 0.25rem 0.85rem var(--shadow-color-card);
}

.header-shell {
    background: var(--surface-overlay);
    overflow: hidden;
}

.header-nav {
    padding-block: var(--space-2) var(--space-1);
    padding-inline: var(--space-3);
}

.header-nav > table {
    border-collapse: collapse;
}

/* Header */
.header-title {
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    font-weight: 400;
    color: var(--color-brown-800);
    text-shadow: 0 0.15rem 0.2rem var(--shadow-color-card);
}

.header-logo {
    filter: drop-shadow(0 0.2rem 0.35rem var(--shadow-color-strong));
}

.header-navlist {
    display: flex;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
    padding-inline-start: 0;
    gap: var(--space-2);
}

.header-navlist,
.navbar-nav {
    list-style: none;
}

.header-collapse {
    align-items: center;
    justify-content: space-between;
}

.header-collapse > .d-flex {
    margin-left: auto;
}

.header-collapse .checkout-button {
    min-width: 160px;
    padding: 0.8rem 1.35rem;
}

.header-collapse .checkout-button--secondary {
    background: var(--color-surface-control);
}

.header-nav__link {
    color: var(--color-brown-800);
    border-radius: var(--radius-pill);
    padding: 0.45rem 0.9rem;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.header-nav__link:hover,
.header-nav__link.active {
    background: var(--brown-hover);
    color: var(--color-brown-900);
    transform: translateY(-1px);
}

.header-toggle {
    border: 1px solid var(--border-color-control);
    border-radius: 0.7rem;
    background: var(--surface-white-50);
}

/* Contact */
.contact-shell {
    padding: 1rem;
}

.contact-card {
    background: var(--surface-overlay);
}

.contact-details {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.7rem;
}

.opening-hours-table {
    width: 100%;
    border-collapse: collapse;
}

.opening-hours-table td {
    padding: 0.2rem 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

.opening-hours-table__closed {
    color: var(--color-text-muted);
}

.opening-hours-table tr:last-child td {
    border-bottom: 0;
}

.contact-label {
    width: 140px;
    vertical-align: top;
    font-weight: 600;
    color: var(--color-brown-800);
}

.social-link {
    display: block;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-color-soft);
    border-radius: 0.9rem;
    background: var(--surface-white-38);
    color: var(--color-ink);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.social-link:hover {
    transform: translateY(-1px);
    border-color: rgba(123, 74, 20, 0.45);
    box-shadow: 0 0.25rem 0.7rem var(--shadow-color-card);
}

.contact-intro {
    margin-bottom: 1.2rem;
    font-weight: 500;
    color: var(--color-text-soft);
}

.contact-form {
    background: var(--surface-white-20);
    padding: 1rem;
    border-radius: var(--radius-card);
}

.contact-form .col-form-label {
    color: var(--color-brown-800);
    font-weight: 600;
}

.contact-form .checkout-button--primary {
    color: var(--color-white);
    background: var(--color-brown-600);
}

/* Checkout controls */
.progress {
    display: flex;
    height: 2rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: var(--surface-white-72);
    box-shadow: inset 0 1px 2px var(--shadow-color-card);
}

.progress-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    padding: 0 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-brown-600);
    color: var(--color-white);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    transition: width 0.6s ease;
}

.checkout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 160px;
    padding: 0.8rem 1.35rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 0.35rem 0.8rem var(--shadow-color-button);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.checkout-actions .checkout-button {
    min-width: 150px;
}

.checkout-button svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
}

.checkout-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.45rem 1rem var(--shadow-color-hover);
}

.checkout-button:active {
    transform: translateY(0);
}

.checkout-button--secondary {
    background: var(--surface-white-75);
    border-color: var(--border-color-control);
    color: var(--color-brown-800);
}

.checkout-button--success {
    background: linear-gradient(135deg, var(--color-success-600) 0%, var(--color-success-700) 100%);
    border-color: var(--color-success-700);
    color: var(--color-white);
}

.checkout-terms {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(112, 72, 20, 0.25);
    border-radius: var(--radius-control);
    background: var(--surface-white-70);
    box-shadow: 0 0.125rem 0.5rem var(--shadow-color-subtle);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.checkout-terms:hover {
    border-color: rgba(123, 74, 20, 0.6);
    box-shadow: 0 0.25rem 0.75rem var(--shadow-color-card);
}

.checkout-terms__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkout-terms__box {
    position: relative;
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid rgba(123, 74, 20, 0.75);
    border-radius: 0.35rem;
    background: var(--color-surface-light);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.checkout-terms__box::after {
    content: "";
    position: absolute;
    left: 0.32rem;
    top: 0.08rem;
    width: 0.32rem;
    height: 0.65rem;
    border: solid var(--color-white);
    border-width: 0 0.12rem 0.12rem 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.18s ease;
}

.checkout-terms__input:checked + .checkout-terms__box {
    background: var(--color-brown-700);
    border-color: var(--color-brown-700);
}

.checkout-terms__input:checked + .checkout-terms__box::after {
    transform: rotate(45deg) scale(1);
}

.checkout-terms__input:focus + .checkout-terms__box {
    box-shadow: var(--focus-ring);
}

.checkout-terms__text {
    line-height: 1.5;
    color: var(--color-text-dark);
}

/* Shopping cart */
.numberfield {
    width: 80px;
    padding: 4px;
}

.cart-table .cart-product-image img {
    border-radius: 0.65rem;
    box-shadow: 0 0.2rem 0.55rem var(--shadow-color-image);
}

.cart-product-controls .btn-group {
    display: inline-flex;
    max-width: 100%;
}

.cart-product-controls .form-control {
    width: 3.25rem;
    min-width: 3.25rem;
    text-align: center;
}

.cart-remove-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-danger-600);
    background: var(--color-danger-600);
    color: var(--color-white);
    box-shadow: 0 0.2rem 0.5rem var(--shadow-color-danger);
}

.cart-remove-button:hover,
.cart-remove-button:focus-visible {
    border-color: var(--color-danger-700);
    background: var(--color-danger-700);
    color: var(--color-white);
    box-shadow: 0 0.3rem 0.7rem var(--shadow-color-danger-hover);
}

.cart-remove-button svg {
    width: 1.1rem;
    height: 1.1rem;
}

.cart-table {
    border-collapse: separate;
    border-spacing: 0 0.45rem;
    color: var(--color-text-soft);
}

.cart-table .cart-header > th,
.cart-table .cart-header > td {
    padding: 0.7rem 0.8rem;
    border: 0;
    background: var(--color-brown-700);
    color: var(--color-white);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cart-table .cart-header > :first-child {
    border-radius: 0.7rem 0 0 0.7rem;
}

.cart-table .cart-header > :last-child {
    border-radius: 0 0.7rem 0.7rem 0;
}

.cart-table .cart-row > th,
.cart-table .cart-row > td {
    padding: 0.7rem 0.8rem;
    border-top: 1px solid var(--border-color-faint);
    border-bottom: 1px solid var(--border-color-faint);
    background: var(--surface-white-70);
}

.cart-table .cart-row > :first-child {
    border-left: 1px solid var(--border-color-faint);
    border-radius: 0.75rem 0 0 0.75rem;
}

.cart-table .cart-row > :last-child {
    border-right: 1px solid var(--border-color-faint);
    border-radius: 0 0.75rem 0.75rem 0;
}

.cart-total {
    border: 1px solid var(--border-color-soft);
    border-radius: 0.85rem;
    background: var(--surface-overlay);
    color: var(--color-brown-800);
    box-shadow: 0 0.25rem 0.75rem var(--shadow-color-soft);
}

.cart-total--editable {
    margin-top: 0.65rem;
}

.cart-total--editable > span {
    display: block;
}

.cart-total--editable hr {
    margin: 0.45rem 0;
    border: 0;
    border-top: 1px solid var(--border-color-light);
    opacity: 1;
}

.cart-total--count td,
.cart-total--receipt td,
.cart-total--invoice td {
    padding: 0.65rem 0.85rem;
}

.cart-total--summary {
    margin-top: 0.65rem;
    padding: 0.65rem 0.85rem;
}

/* Business and product views */
.business-shell {
    padding: 1rem;
    background: var(--surface-overlay);
}

.business-content {
    min-width: 0;
}

.product-detail-shell {
    padding: 1rem;
    background: var(--surface-overlay);
}

.product-detail {
    min-width: 0;
}

.product-detail__image-column {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.product-detail__image-frame {
    display: grid;
    flex: 0 0 auto;
    width: min(100%, 360px);
    height: auto;
    aspect-ratio: 1;
    place-items: center;
    overflow: hidden;
    border-radius: 0.9rem;
    background: var(--surface-white-72);
    box-shadow: 0 0.35rem 0.9rem var(--shadow-color-button);
}

.product-detail__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 0;
}

.product-detail__content-column {
    min-width: 0;
}

.product-detail__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.75rem;
    background: var(--surface-white-72);
}

.product-detail__title {
    margin: 0.65rem 0.75rem;
    color: var(--color-brown-800);
    font-size: clamp(1.65rem, 3vw, 2rem);
    font-weight: 600;
}

.product-detail__description {
    margin: 0 0.75rem;
    overflow-wrap: anywhere;
}

.product-detail__price-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin: 0.65rem 0;
}

.product-detail__description + .product-detail__price-row {
    margin-top: auto;
}

.product-detail__price-row > span {
    text-align: right;
}

.product-detail__order-button {
    flex-shrink: 0;
}

.product-detail .product-detail__order-button {
    background: linear-gradient(135deg, var(--color-brown-500) 0%, var(--color-brown-700) 100%);
    border-color: var(--color-brown-700);
    color: var(--color-white);
}

/* Administration */
.admin-product-page {
    max-width: 1100px;
    margin-right: auto;
    margin-left: auto;
    background: var(--surface-white-90);
}

.admin-product-subtitle {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.admin-product-form .form-label {
    color: var(--color-brown-800);
    font-weight: 600;
}

@media (min-width: 768px) {
    .admin-product-pricing-fields > .col-md-4 {
        display: flex;
        flex-direction: column;
    }

    .admin-product-pricing-fields > .col-md-4 .form-label {
        display: flex;
        align-items: flex-start;
        min-height: 3rem;
    }
}

.admin-product-tabs {
    border-bottom-color: var(--border-color);
}

.admin-product-tabs .nav-link {
    color: var(--color-text-muted);
    font-weight: 600;
}

.admin-product-tabs .nav-link.active {
    color: var(--color-brown-800);
    border-color: var(--border-color) var(--border-color) var(--color-white);
}

.admin-page-tabs {
    margin-right: -1.25rem;
    margin-left: -1.25rem;
    padding: 0 1.25rem;
}

.admin-page-tab-content {
    width: 100%;
    min-width: 0;
}

.admin-products-content {
    padding-top: 1rem;
}

.admin-products-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color-light);
}

.admin-products-count {
    margin: 1rem 0 0.35rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.admin-page {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.admin-hours-table,
.admin-products-table {
    width: 100%;
    table-layout: fixed;
}

.admin-hours-table th,
.admin-hours-table td,
.admin-products-table th,
.admin-products-table td {
    overflow-wrap: anywhere;
    border-bottom: 1px solid var(--border-color-light);
}

.admin-hours-table thead th,
.admin-products-table thead th {
    color: var(--color-brown-800);
    font-weight: 600;
}

.admin-products-table tbody tr:hover {
    background: var(--brown-hover);
}

@media (max-width: 575.98px) {
    .admin-page-tabs {
        margin-right: -0.75rem;
        margin-left: -0.75rem;
        padding: 0 0.75rem;
    }

    .admin-hours-table th,
    .admin-hours-table td,
    .admin-products-table th,
    .admin-products-table td {
        padding-right: 0.4rem;
        padding-left: 0.4rem;
    }
}

.admin-property-card {
    padding: 1.25rem;
    border: 1px solid var(--border-color-medium);
    border-radius: 0.85rem;
    background: rgba(255, 253, 249, 0.88);
    box-shadow: 0 0.2rem 0.65rem var(--shadow-color-subtle);
}

.admin-property-card__title {
    margin-bottom: 0.25rem;
    color: var(--color-brown-800);
    font-size: 1.2rem;
}

.admin-property-card__intro {
    margin-bottom: 1rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.admin-product-preview {
    display: block;
    width: 100%;
    max-height: 220px;
    margin-bottom: 1rem;
    border-radius: 0.65rem;
    object-fit: contain;
    background: var(--color-white);
}

.admin-image-editor__controls {
    min-width: 0;
}

.admin-product-preview--empty {
    display: grid;
    min-height: 120px;
    place-items: center;
    padding: 1rem;
    border: 1px dashed var(--border-color-dashed);
    color: var(--color-text-muted);
    font-size: 0.9rem;
    text-align: center;
}

@media (min-width: 1200px) {
    .admin-image-editor {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .admin-image-editor__preview,
    .admin-image-editor__controls {
        flex: 1 1 0;
    }

    .admin-product-preview {
        margin-bottom: 0;
    }
}

.admin-allergy-list {
    display: grid;
    gap: 0.65rem;
}

.admin-allergy-option {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 3.5rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid rgba(112, 72, 20, 0.13);
    border-radius: 0.65rem;
    background: var(--color-white);
    color: var(--color-brown-800);
    cursor: pointer;
}

.admin-allergy-option:hover {
    border-color: rgba(123, 74, 20, 0.45);
    background: var(--color-surface-hover);
}

@media (min-width: 992px) {
    .admin-product-general.show.active {
        display: flex;
        flex-wrap: wrap;
    }

    .admin-product-general > .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.admin-allergy-option img {
    object-fit: contain;
}

.product-detail__unavailable {
    margin: 0.75rem 0;
    text-align: center;
}

.product-detail__unavailable p {
    margin-bottom: 0;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .product-page-container {
        max-width: 100%;
    }

    .product-detail__price-row {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.75rem;
    }

    .product-detail__price-row .product-detail__order-button,
    .product-detail__order-button {
        padding: 0.375rem 0.75rem;
        min-width: 0;
    }

    .product-detail__price-row > span {
        min-width: 0;
        white-space: nowrap;
    }

}

/* Home page */
.home-shell {
    padding: 1rem;
    background: var(--surface-overlay);
}

.home-content {
    min-width: 0;
}

.home-alert__image {
    width: 80px;
    height: 80px;
    margin-right: 0.65rem;
    object-fit: contain;
}

.home-carousel {
    width: min(300px, 100%);
    aspect-ratio: 1;
    overflow: hidden;
}

.home-carousel img {
    aspect-ratio: 1;
    object-fit: cover;
}

.home-new-products {
    width: 100%;
    table-layout: fixed;
}

.home-new-products td {
    padding: 0.4rem;
    vertical-align: middle;
}

.home-new-products td:first-child {
    width: 120px;
}

.home-new-products__image {
    display: block;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    object-fit: contain;
}

.home-ideal__image {
    width: 60px;
    height: 60px;
    margin-right: 0.65rem;
    object-fit: contain;
}

.home-storage__image {
    width: min(150px, 40%);
    height: auto;
    margin: 0.4rem 0.65rem 0.3rem 0;
    float: left;
}

.home-heating-table {
    width: 100%;
}

.home-heating-table td {
    padding: 0.35rem;
    vertical-align: middle;
}

.home-heating-table td:first-child {
    width: 56px;
}

.final-screen {
    padding: 1rem;
    background: var(--surface-overlay);
}

.final-screen__content {
    min-width: 0;
    overflow-wrap: anywhere;
}

.final-screen__image {
    width: 180px;
    height: 148px;
    margin: 0 1.25rem 0.75rem 0;
    float: left;
    object-fit: contain;
}

.final-screen h1 {
    margin-top: 0;
    color: var(--color-brown-800);
    font-size: clamp(1.7rem, 4vw, 2.5rem);
}

.final-screen p {
    line-height: 1.6;
}

.business-carousel {
    width: min(300px, 100%);
    min-width: 0;
    aspect-ratio: 1;
    border: 1px solid var(--border-color-soft);
    border-radius: 0.9rem;
    background: var(--color-surface-light);
    overflow: hidden;
    box-shadow: 0 0.3rem 0.8rem var(--shadow-color-image);
}

.business-carousel .carousel-inner,
.business-carousel .carousel-item {
    width: 100%;
    height: 100%;
}

.business-carousel__image {
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
}

.business-products {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0 0.65rem;
}

.business-products td {
    padding: 0.45rem;
    vertical-align: middle;
}

.business-products__image {
    width: 190px;
    text-align: center;
}

.business-products__image img {
    display: block;
    width: min(100%, 180px);
    height: 100px;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 0.65rem;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.product-card {
    overflow: hidden;
    background: var(--surface-white-82);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.65rem 1.25rem var(--shadow-color-strong);
}

.product-card__table {
    width: 100%;
    height: 100%;
    table-layout: fixed;
}

.product-card__image {
    width: 124px;
    padding: 4px;
    vertical-align: top;
}

.product-card__image img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 0;
    border-radius: var(--radius-control);
    box-shadow: 0 0.25rem 0.7rem var(--shadow-color-image);
}

.product-card__description {
    padding: 8px 8px 8px 4px;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.product-card__description h2 {
    margin: 0 0 0.35rem;
    font-size: 1.35rem;
    color: var(--color-brown-800);
}

.product-card__description p:last-child {
    margin-bottom: 0;
}

.product-card__action {
    width: auto;
}

.product-card__button {
    min-width: 160px;
    padding: 4px;
    text-align: right;
}

.modal-header,
.modal-footer {
    border-color: var(--border-color-light);
}

.modal-header {
    align-items: center;
    background: var(--surface-overlay);
}

.modal-title {
    color: var(--color-brown-800);
    font-weight: 700;
    font-size: 1.25rem;
}

.modal-body {
    color: var(--color-text-soft);
    line-height: 1.6;
    padding: 1rem;
}

.modal-backdrop.show {
    background-color: var(--color-brown-900);
    opacity: 0.55;
}

.card-header {
    border-bottom: 1px solid var(--border-color-soft);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    font-weight: 600;
    font-size: 1.1rem;
}

button,
.btn {
    display: inline-block;
    padding: 0.45rem 0.85rem;
    border: 1px solid transparent;
    /* background: var(--color-surface-control); */
    color: inherit;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.checkout-button--primary {
    background: linear-gradient(135deg, var(--color-brown-500) 0%, var(--color-brown-700) 100%);
    border-color: var(--color-brown-700);
    color: var(--color-white);
}

.checkout-button--secondary {
    background: var(--color-surface-control);
}

button:disabled,
.btn:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.btn,
button {
    background-color: var(--color-surface-control);
    border-radius: var(--radius-pill);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn:hover,
button:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-brown-500) 0%, var(--color-brown-700) 100%);
    border-color: var(--color-brown-700);
    color: var(--color-white);
    box-shadow: 0 0.35rem 0.8rem var(--shadow-color-button);
}

.btn-secondary {
    background: var(--surface-white-50);
    border-color: var(--border-color-control);
    color: var(--color-brown-800);
    box-shadow: 0 0.35rem 0.8rem var(--shadow-color-card);
}

.btn-success {
    background: linear-gradient(135deg, var(--color-success-600) 0%, var(--color-success-700) 100%);
    border-color: var(--color-success-700);
    color: var(--color-white);
    box-shadow: 0 0.35rem 0.8rem var(--shadow-color-button);
}

.btn-outline-danger {
    border-radius: var(--radius-pill);
    border-color: rgba(220, 53, 69, 0.7);
    color: var(--color-danger-600);
}

.form-control,
.form-select,
textarea.form-control {
    border: 1px solid var(--border-color-control);
    border-radius: var(--radius-control);
    background-color: var(--color-surface-light);
    box-shadow: 0 0.125rem 0.75rem var(--shadow-color-card);
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: var(--brown-focus);
    box-shadow: var(--focus-ring);
    outline: none;
}

.checkout-form--page2 .card-body {
    padding: 1.25rem;
}

.checkout-form--page2 .col-form-label {
    color: var(--color-brown-800);
    font-weight: 600;
}

/* Responsive component rules */
@media (max-width: 767.98px) {
    .final-screen {
        padding: 0.75rem;
    }

    .final-screen__content {
        display: flex;
        flex-direction: column;
    }

    .final-screen__image {
        width: min(100%, 12rem);
        height: auto;
        margin: 0 auto 1rem;
        float: none;
        order: 0;
    }

    .final-screen__content > p,
    .final-screen__content > h1 {
        order: 1;
    }

    .home-shell {
        padding: 0.75rem;
    }

    .home-content {
        padding-right: 0;
        padding-left: 0;
    }

    .home-alert {
        margin-right: 0;
        margin-left: 0;
        padding: 0.8rem;
    }

    .home-alert__image {
        width: 3.5rem;
        height: 3.5rem;
    }

    .home-carousel {
        float: none;
        width: 100%;
        max-width: 20rem;
        margin: 0 auto 1rem;
    }

    .home-new-products,
    .home-new-products tbody,
    .home-new-products tr,
    .home-new-products td {
        display: block;
        width: 100%;
    }

    .home-new-products tr {
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--border-color-light);
    }

    .home-new-products tr:last-child {
        border-bottom: 0;
    }

    .home-new-products td {
        padding: 0.25rem 0;
    }

    .home-new-products td:first-child {
        width: 100%;
    }

    .home-new-products__image {
        width: 6rem;
        height: 6rem;
    }

    .home-ideal__image {
        width: 3.5rem;
        height: 3.5rem;
    }

    .home-storage__image {
        width: 7.5rem;
        max-width: 42%;
    }

    .home-heating-table td {
        padding: 0.3rem 0;
    }

    .contact-form {
        padding: 0.75rem;
    }

    .contact-form .row {
        margin-right: 0;
        margin-left: 0;
    }

    .contact-form .row > label,
    .contact-form .row > div {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .contact-form .row > label {
        margin-bottom: 0.35rem;
    }

    .contact-form .row > div + div {
        margin-top: 0.65rem;
    }

    .contact-form textarea.form-control {
        min-height: 9rem;
    }

    .contact-form .offset-4 {
        margin-left: 0;
    }

    .contact-form .checkout-button {
        width: 100%;
        min-width: 0;
    }

    .product-detail-shell {
        padding: 0.75rem;
    }

    .product-detail {
        padding-right: 0;
        padding-left: 0;
    }

    .product-detail__image-column,
    .product-detail__content-column {
        width: 100%;
    }

    .product-detail__image {
        width: 100%;
    }

    .product-detail__content {
        margin-top: 0.9rem;
        padding: 0.6rem;
    }

    .product-detail__price-row {
        justify-content: flex-end;
        gap: 0.75rem;
        margin: 0.75rem 0;
    }

    .checkout-form--page2 .card-body {
        padding: 0.9rem;
    }

    .checkout-form--page2 .row {
        margin-right: 0;
        margin-left: 0;
    }

    .checkout-form--page2 .row > label,
    .checkout-form--page2 .row > div {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .checkout-form--page2 .row > label {
        margin-bottom: 0.35rem;
    }

    .checkout-form--page2 .row > div + div {
        margin-top: 0.65rem;
    }

    .checkout-actions {
        margin: 0.9rem 0 0;
        padding: 0;
    }

    .checkout-actions .row {
        gap: 0.7rem;
    }

    .checkout-actions .col {
        padding: 0;
    }

    .checkout-actions .checkout-button {
        width: 100%;
        min-width: 0;
    }

    .cart-table--editable {
        display: block;
        width: 100%;
        margin-bottom: 0;
    }

    .cart-table--editable thead {
        display: none;
    }

    .cart-table--editable tbody,
    .cart-table--editable .cart-row {
        display: block;
        width: 100%;
    }

    .cart-table--editable .cart-row {
        display: grid;
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 0;
        margin-bottom: 0.7rem;
        padding: 0.75rem;
        border: 1px solid var(--border-color-light);
        border-radius: 0.85rem;
        background: var(--surface-white-70);
        box-shadow: 0 0.2rem 0.55rem var(--shadow-color-subtle);
    }

    .cart-table--editable .cart-row:last-child {
        margin-bottom: 0;
    }

    .cart-table--editable .cart-row > th,
    .cart-table--editable .cart-row > td {
        width: auto;
        min-width: 0;
        padding: 0.1rem;
        border: 0;
        border-radius: 0;
        background: transparent;
        vertical-align: middle;
    }

    .cart-table--editable .cart-product-image {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        padding: 0 !important;
    }

    .cart-table--editable .cart-product-image img {
        width: 50px;
        height: 50px;
        margin: 0 !important;
        border-radius: 0 !important;
        object-fit: cover;
    }

    .cart-table--editable .cart-product-description {
        grid-column: 2;
        grid-row: 1;
        overflow-wrap: anywhere;
        padding-left: 0.5rem;
        margin-left: 0.5rem;
        text-align: left;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .cart-table--editable .cart-product-description strong {
        color: var(--color-brown-800);
        font-size: 1.05rem;
        font-weight: 600;
    }

    .cart-table--editable .cart-product-description > br {
        display: none;
    }

    .cart-table--editable .cart-product-description .text-secondary {
        display: block;
        width: 100%;
        margin-top: 0.15rem;
        text-align: left;
    }

    .cart-table--editable .cart-product-controls {
        grid-column: 1 / -1;
        grid-row: 4;
        padding-top: 0.65rem;
    }

    .cart-table--editable .cart-product-controls .btn-group {
        display: flex;
        width: 100%;
    }

    .cart-table--editable .cart-product-controls .btn {
        min-width: 2.75rem;
    }

    .cart-table--editable .cart-product-controls .btn:hover,
    .cart-table--editable .cart-product-controls .btn:focus-visible {
        transform: translateY(-1px);
    }

    .cart-table--editable .cart-product-controls .cart-remove-button:hover,
    .cart-table--editable .cart-product-controls .cart-remove-button:focus-visible {
        border-color: var(--color-danger-700);
        background: var(--color-danger-700);
        color: var(--color-white);
        box-shadow: 0 0.3rem 0.7rem var(--shadow-color-danger-hover);
    }

    .cart-table--editable .cart-product-controls .form-control {
        flex: 1 1 auto;
        width: auto;
    }

    .cart-table--editable .cart-product-price {
        grid-column: 1 / -1;
        grid-row: 2;
        padding-top: 0.45rem !important;
        text-align: right;
        color: var(--color-text-muted);
    }

    .cart-table--editable .cart-product-total {
        grid-column: 1 / -1;
        grid-row: 3;
        width: auto !important;
        border-radius: 0 !important;
        padding-top: 0.25rem !important;
        border-top: 1px solid var(--border-color-faint) !important;
        text-align: right;
        font-weight: 600;
    }

    .cart-table--editable .cart-product-price::before,
    .cart-table--editable .cart-product-total::before {
        display: inline;
        margin-right: 0.45rem;
        color: var(--color-text-muted);
        content: attr(data-label);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .business-shell {
        padding: 0.75rem;
    }

    .business-carousel {
        float: none;
        width: 100%;
        max-width: 22rem;
        min-width: 0;
        max-height: 22rem;
        margin: 0 auto 1.25rem;
    }

    .business-carousel.ms-md-3 {
        margin-inline: auto;
        margin-block-end: 1.25rem;
    }

    .business-carousel .carousel-inner {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .business-products,
    .business-products tbody,
    .business-products tr,
    .business-products td {
        display: block;
        width: 100%;
    }

    .business-products tr {
        padding: 0.65rem 0;
        border-bottom: 1px solid var(--border-color-light);
    }

    .business-products tr:last-child {
        border-bottom: 0;
    }

    .business-products td {
        padding: 0.25rem 0;
        text-align: left;
    }

    .business-products__image {
        width: 100%;
        text-align: center;
    }

    .business-products__image img {
        width: min(100%, 220px);
        height: auto;
        max-height: 120px;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .product-card__image {
        width: 104px;
    }

    .product-card__image img {
        width: 100px;
        height: 100px;
    }

    .product-card__button {
        width: auto;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .business-carousel {
        float: none;
        width: min(100%, 22rem);
        max-width: 100%;
        margin-inline: auto;
        margin-block-end: 1.25rem;
    }

    .business-carousel.ms-md-3 {
        margin-inline: auto;
    }
}

/* Layout and utility primitives */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    color: var(--color-ink);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.5;
}

img,
svg {
    vertical-align: middle;
}

button,
input,
select,
textarea {
    font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Layout primitives */
.container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--space-3);
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: calc(var(--space-3) * -1);
}

.row > * {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--space-3);
}

.col {
    flex: 1 0 0%;
}

.col-2 { width: 16.666667%; }
.col-3 { width: 25%; }
.col-4 { width: 33.333333%; }
.col-5 { width: 41.666667%; }
.col-6 { width: 50%; }
.col-8 { width: 66.666667%; }
.col-12 { width: 100%; }

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: break-word;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    background-color: var(--surface-overlay);
    box-shadow: 0 0.25rem 0.85rem var(--shadow-color-card);
}

.card-body {
    flex: 1 1 auto;
    padding: 1rem;
}

.card-header,
.card-footer {
    padding: 0.75rem 1rem;
}

/* Feedback */
.alert {
    position: relative;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid transparent;
}

.alert-danger {
    border-color: rgba(176, 42, 55, 0.35);
    background: rgba(248, 215, 218, 0.85);
    color: var(--color-danger-700);
}

.alert-success {
    border-color: rgba(25, 135, 84, 0.35);
    background: rgba(209, 231, 221, 0.85);
    color: var(--color-success-text);
}

.alert-warning {
    border-color: rgba(255, 193, 7, 0.4);
    background: rgba(255, 243, 205, 0.9);
    color: var(--color-warning-text);
}

.alert-dismissible {
    padding-right: 3rem;
}

.btn-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    color: currentColor;
    font-size: 1.25rem;
    line-height: 1;
}

.btn-close::before {
    content: "\00d7";
}

.btn-dark {
    border-color: var(--color-brown-900);
    background: var(--color-brown-900);
    color: var(--color-white);
}

.btn-outline-secondary,
.btn-outline-dark {
    border-color: rgba(77, 53, 32, 0.45);
    background: var(--surface-white-35);
    color: var(--color-brown-800);
}

.btn-sm {
    padding: 0.25rem 0.55rem;
    font-size: 0.875rem;
}

/* Form primitives */
.form-label,
.col-form-label {
    display: inline-block;
    margin-bottom: 0.35rem;
}

.form-control,
.form-select {
    display: block;
    width: 100%;
    min-height: calc(1.5em + 1rem + 2px);
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-ink);
    appearance: none;
}

.form-select {
    padding-right: 2.25rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-brown-700) 50%), linear-gradient(135deg, var(--color-brown-700) 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.form-control-lg,
.form-select-lg {
    min-height: calc(1.5em + 1rem + 2px);
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
}

.form-check-input {
    width: 1em;
    height: 1em;
    margin-top: 0.25em;
    accent-color: var(--color-brown-700);
}

.table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
    vertical-align: top;
}

.table th,
.table td {
    padding: 0.5rem;
    text-align: inherit;
}

.table-sm th,
.table-sm td {
    padding: 0.25rem;
}

.table-hover tbody tr:hover {
    background: var(--card-background-hover-color);
}

.table-borderless th,
.table-borderless td {
    border: 0;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Navigation primitives */
.nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--color-brown-700);
    text-decoration: none;
    cursor: pointer;
}

.nav-item {
    list-style: none;
}

.nav-tabs {
    border-bottom: 1px solid var(--border-color);
}

.nav-tabs .nav-link {
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-radius: 0.65rem 0.65rem 0 0;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active {
    border-color: var(--border-color) var(--border-color) var(--color-white);
    background: var(--surface-white-35);
    color: var(--color-brown-800);
}

.tab-pane {
    display: none;
}

.fade {
    transition: opacity 0.15s linear;
}

.fade:not(.show) {
    opacity: 0;
}

.tab-pane.show.active {
    display: block;
}

.admin-product-form .tab-pane.show.active {
    display: flex;
    flex-wrap: wrap;
}

.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
}

.navbar-toggler {
    width: 56px;
    height: 40px;
    padding: 4px 12px;
}

.navbar-toggler-icon {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    margin: auto;
    background: none;
}

.navbar-toggler-icon::before {
    position: absolute;
    top: 6px;
    left: 4px;
    width: 22px;
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--color-brown-800);
    box-shadow: 0 8px 0 var(--color-brown-800), 0 16px 0 var(--color-brown-800);
    content: "";
}

.collapse:not(.show) {
    display: none;
}

.navbar-collapse.collapsing {
    display: block;
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
}

.carousel,
.carousel-inner {
    position: relative;
}

.carousel-inner {
    width: 100%;
    overflow: hidden;
}

.carousel-item {
    position: relative;
    display: none;
    width: 100%;
    backface-visibility: hidden;
}

.carousel-item.active {
    display: block;
}

.carousel-fade .carousel-item {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.carousel-fade .carousel-item.active {
    opacity: 1;
}

.carousel-fade .carousel-item:first-child {
    position: relative;
}

@media (prefers-reduced-motion: reduce) {
    .carousel-fade .carousel-item {
        transition: none;
    }
}

/* Overlay primitives */
.modal {
    position: fixed;
    z-index: 1055;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

.modal.show {
    display: block;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 1.75rem 0.75rem;
    pointer-events: none;
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--border-color-card);
    border-radius: var(--radius-card);
    background: var(--surface-white-98);
    box-shadow: 0 1rem 2.5rem rgba(45, 25, 9, 0.22);
    pointer-events: auto;
}

.modal-header,
.modal-footer {
    display: flex;
    padding: 0.75rem 1rem;
}

.modal-header {
    border-bottom: 1px solid var(--border-color-light);
}

.modal-header .modal-title {
    flex: 1;
    margin-bottom: 0;
}

.modal-footer {
    justify-content: flex-end;
    gap: 0.5rem;
    border-top: 1px solid var(--border-color-light);
}

.modal-backdrop {
    position: fixed;
    z-index: 1050;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

.modal-backdrop:not(.show) {
    display: none;
}

.spinner-border {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
    vertical-align: -0.125em;
}

.spinner-border-sm {
    width: 0.875rem;
    height: 0.875rem;
}

.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    color: var(--color-white);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
}

@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

/* Utility classes */
.d-block { display: block; }
.d-flex { display: flex; }
.d-none { display: none; }
.flex-wrap { flex-wrap: wrap; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.align-middle { vertical-align: middle; }
.h-100 { height: 100%; }
.w-100 { width: 100%; }
.text-center { text-align: center; }
.text-end { text-align: right; }
.text-light { color: var(--color-white); }
.text-secondary { color: var(--color-text-muted); }
.text-black-50 { color: rgba(0, 0, 0, 0.5); }
.text-bg-light { color: var(--color-ink); background: var(--color-surface-muted); }
.fs-5 { font-size: 1.25rem; }
.link-secondary { color: var(--color-text-muted); }
.bg-secondary { background: var(--color-neutral); }
.bg-danger { background: var(--color-danger); }
.bg-danger-subtle { background: rgba(248, 215, 218, 0.85); }
.border-danger { border-color: rgba(176, 42, 55, 0.45); }
.border-info { border-color: rgba(13, 202, 240, 0.45); }
.border-secondary { border-color: var(--border-color); }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.top-0 { top: 0; }
.start-100 { left: 100%; }
.translate-middle { transform: translate(-50%, -50%); }
.rounded-pill { border-radius: var(--radius-pill); }
.invisible { visibility: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.img-fluid { max-width: 100%; height: auto; }
.img-thumbnail { padding: 0.25rem; border: 1px solid var(--border-color-soft); border-radius: 0.5rem; background: var(--color-white); }
.float-end { float: right; }
.clearfix::after { display: block; clear: both; content: ""; }
.gap-2 { gap: 0.5rem; }
.g-3 { row-gap: 1rem; }
.g-4 { row-gap: 1.5rem; }
.m-1 { margin: 0.25rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-lg-0 { margin-bottom: 0; }
.me-auto { margin-right: auto; }
.mt-4 { margin-top: 1.5rem; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1.5rem; }
.pt-3 { padding-top: 1rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }
.offset-3 { margin-left: 25%; }
.offset-4 { margin-left: 33.333333%; }

@media (min-width: 576px) {
    .container { max-width: 540px; }
    .col-sm-6 { width: 50%; }
    .col-sm-12 { width: 100%; }
    .modal-dialog { max-width: 500px; margin: 1.75rem auto; }
}

@media (min-width: 768px) {
    .container { max-width: 720px; }
    .col-md-4 { width: 33.333333%; }
    .col-md-5 { width: 41.666667%; }
    .col-md-6 { width: 50%; }
    .col-md-7 { width: 58.333333%; }
    .float-md-end { float: right; }
    .float-md-start { float: left; }
    .d-md-block { display: block; }
    .d-md-none { display: none; }
    .ms-md-3 { margin-left: 1rem; }
}

@media (min-width: 992px) {
    .container { max-width: 960px; }
    .col-lg-2 { width: 16.666667%; }
    .col-lg-4 { width: 33.333333%; }
    .col-lg-5 { width: 41.666667%; }
    .col-lg-6 { width: 50%; }
    .col-lg-8 { width: 66.666667%; }
    .d-lg-block { display: block; }
    .d-lg-none { display: none; }
    .navbar-expand-lg .navbar-collapse { display: flex; flex-basis: auto; }
    .navbar-expand-lg .navbar-toggler { display: none; }
}

@media (max-width: 991.98px) {
    .navbar-expand-lg .navbar-collapse {
        flex-basis: 100%;
    }

    .header-navlist {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 0.5rem;
    }

    .header-collapse > .d-flex {
        margin-left: 0;
    }
}

/* Responsive utility rules */
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
    .col-xl-3 { width: 25%; }
}

@media (min-width: 1400px) {
    .container { max-width: 1320px; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .business-carousel.ms-md-3 {
        margin-inline: auto;
    }
}