:root {
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-6: 24px;
    --ui-space-8: 32px;
    --ui-space-12: 48px;
    --ui-radius: 12px;
    --ui-radius-lg: 16px;
    --ui-border: #e7e5e0;
    --ui-surface: #fff;
    --ui-surface-muted: #f7f7f5;
    --ui-text: #24231f;
    --ui-text-muted: #6f6d66;
    --ui-primary: #315c45;
    --ui-primary-hover: #254a37;
    --ui-danger: #b42318;
    --ui-focus: rgba(49, 92, 69, .2);
    --ui-shadow: 0 8px 28px rgba(35, 31, 25, .06);
}

html { scroll-behavior: smooth; }
body {
    background: #fbfbfa;
    color: var(--ui-text);
    font-family: Vazirmatn, sans-serif;
    font-size: 15px;
    line-height: 1.75;
}
main { min-height: 55vh; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ui-primary); }
h1, h2, h3, h4, h5, h6 {
    color: var(--ui-text);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: var(--ui-space-4);
}
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.875rem); }
h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); }
p { margin-bottom: var(--ui-space-4); }
.container, .container-xxl { padding-inline: var(--ui-space-4); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--ui-focus);
    outline-offset: 2px;
}

label { color: var(--ui-text); font-size: .875rem; font-weight: 600; margin-bottom: var(--ui-space-2); }
:where(input:not([type="checkbox"], [type="radio"]), select, textarea, .form-control, .form-select) {
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    color: var(--ui-text);
    min-height: 44px;
    padding: var(--ui-space-2) var(--ui-space-3);
}
textarea, textarea.form-control { min-height: 112px; resize: vertical; }
:where(input, select, textarea, .form-control, .form-select):focus {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px var(--ui-focus);
    outline: 0;
}
::placeholder { color: #a09e98; opacity: 1; }
.form-group, .mb-3 { margin-bottom: var(--ui-space-4) !important; }
.field-validation-error, .text-danger {
    color: var(--ui-danger) !important;
    display: block;
    font-size: .8125rem;
    margin-top: var(--ui-space-1);
}

.card, .panel, .tabs-wrap, .cart-summary, .page-wrapper, .category-filter-panel {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow);
}
.card-body, .panel-body, .tabs-wrap, .cart-summary-wrap { padding: var(--ui-space-6); }
.card-header, .card-footer, .panel-heading {
    background: transparent;
    border-color: var(--ui-border);
    padding: var(--ui-space-4) var(--ui-space-6);
}

.alert {
    border: 0;
    border-radius: var(--ui-radius);
    line-height: 1.7;
    padding: var(--ui-space-3) var(--ui-space-4);
}
.alert-info { background: #eef5f1; color: #254a37; }
.alert-warning { background: #fff7e8; color: #7a4e00; }
.alert-danger { background: #fff0ef; color: var(--ui-danger); }
.alert-success { background: #edf7f0; color: #24613d; }
.badge, .badge-soft {
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    padding: var(--ui-space-1) var(--ui-space-2);
}

.site-header {
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--ui-border);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.site-header .navbar { min-height: 72px; }
.topbar { font-size: .8125rem; }
.action-btn, .panel-entry {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    min-height: 44px;
}

.page-hero {
    align-items: center;
    background: transparent;
    border: 0;
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--ui-space-8);
    padding: var(--ui-space-6) 0;
}
.coffee-breadcrumb, .breadcrumb-area { margin-block: var(--ui-space-6); }
.breadcrumb-area .breadcrumb-wrapper { background: transparent; padding: 0; }
.breadcrumb-content__page-map { margin: 0; }

.product-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}
.product-card:hover { box-shadow: var(--ui-shadow); transform: translateY(-2px); }
.product-img { aspect-ratio: 1; background: var(--ui-surface-muted); overflow: hidden; position: relative; }
.product-img img { height: 100%; object-fit: cover; transition: transform .3s; width: 100%; }
.product-card:hover .product-img img { transform: scale(1.02); }
.product-body { display: flex; flex: 1; flex-direction: column; padding: var(--ui-space-4); }
.product-title { font-size: 1rem; margin: var(--ui-space-2) 0; min-height: 2.8em; }
.product-features { color: var(--ui-text-muted); font-size: .8125rem; margin: 0 0 var(--ui-space-4); padding: 0; }
.product-features li { display: inline; }
.product-features li + li::before { content: " · "; }
.price { color: var(--ui-text); font-size: 1.125rem; font-weight: 800; }
.old { color: var(--ui-text-muted); font-size: .8125rem; text-decoration: line-through; }
.price-context { color: var(--ui-text-muted); font-size: .75rem; margin-top: var(--ui-space-1); }
.add-btn {
    background: var(--ui-primary);
    border: 0;
    border-radius: var(--ui-radius);
    color: #fff;
    height: 44px;
    min-height: 44px;
    padding: 0 var(--ui-space-3);
    white-space: nowrap;
}

.category-layout { row-gap: var(--ui-space-6); }
.category-filter-panel { overflow: hidden; }
.category-tools { padding: var(--ui-space-4); }
.category-filter-scroll { display: grid; gap: var(--ui-space-6); }
.feature-filter { border: 0; margin: 0; padding: 0; }
.feature-filter legend { font-size: .9375rem; font-weight: 700; margin-bottom: var(--ui-space-3); }
.feature-filter label, .quick-filters label {
    align-items: center;
    display: flex;
    gap: var(--ui-space-2);
    margin: 0;
    min-height: 40px;
}
.feature-filter label small { color: var(--ui-text-muted); margin-right: auto; }
.category-filter-actions {
    background: var(--ui-surface);
    border-top: 1px solid var(--ui-border);
    display: grid;
    gap: var(--ui-space-2);
    grid-template-columns: 1fr 1fr;
    padding-top: var(--ui-space-4);
}

.table-responsive { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); }
.table { color: var(--ui-text); margin: 0; vertical-align: middle; }
.table > :not(caption) > * > * { border-bottom-color: var(--ui-border); padding: var(--ui-space-3) var(--ui-space-4); }
.table thead th {
    background: var(--ui-surface-muted);
    color: var(--ui-text-muted);
    font-size: .8125rem;
    font-weight: 700;
    white-space: nowrap;
}
.table tbody tr:hover { background: #fafaf8; }
.table tbody tr:last-child td { border-bottom: 0; }
.cart-table img { border-radius: var(--ui-radius); height: 72px; object-fit: cover; width: 72px; }

.checkout-step-nav {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    display: grid;
    gap: var(--ui-space-2);
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: var(--ui-space-6);
    padding: var(--ui-space-3);
}
.checkout-step-nav button {
    background: transparent;
    border: 0;
    color: var(--ui-text-muted);
}
.checkout-step-nav button.active { background: #eef5f1; color: var(--ui-primary); }
.checkout-step-nav button span {
    align-items: center;
    background: var(--ui-surface-muted);
    border-radius: 50%;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    width: 28px;
}
.checkout-step-nav > span {
    align-items: center;
    border-radius: var(--ui-radius);
    color: var(--ui-text-muted);
    display: flex;
    font-weight: 600;
    gap: var(--ui-space-2);
    justify-content: center;
    min-height: 44px;
    padding: var(--ui-space-2) var(--ui-space-3);
}
.checkout-step-nav > span b {
    align-items: center;
    background: var(--ui-surface-muted);
    border-radius: 50%;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    width: 28px;
}
.checkout-step-nav > span.active { background: #eef5f1; color: var(--ui-primary); }
.checkout-step-nav > span.completed { color: var(--ui-primary); }
.checkout-review-page .page-content-wrapper { display: grid; gap: var(--ui-space-6); }
.checkout-review-page .cart-table { margin: 0; }
.checkout { gap: var(--ui-space-6) 0; margin-top: var(--ui-space-6); }
.cart-summary { height: fit-content; overflow: hidden; width: 100%; }
.cart-summary-wrap p {
    border-bottom: 1px solid var(--ui-border);
    display: flex;
    gap: var(--ui-space-4);
    justify-content: space-between;
    margin: 0;
    padding-block: var(--ui-space-3);
}
.cart-summary-wrap p span { color: var(--ui-text-muted); text-align: left; }
.cart-summary-wrap h2 {
    display: flex;
    font-size: 1.125rem;
    justify-content: space-between;
    margin: var(--ui-space-6) 0 0;
}
.cart-summary-button { padding: 0 var(--ui-space-6) var(--ui-space-6); }
.cart-summary-button .btn { width: 100%; }
.modal-content { border: 0; border-radius: var(--ui-radius-lg); box-shadow: 0 24px 64px rgba(0,0,0,.16); }
.modal-header, .modal-body, .modal-footer { border-color: var(--ui-border); padding: var(--ui-space-4) var(--ui-space-6); }

@media (min-width: 992px) {
    .category-sidebar { position: sticky; top: 96px; }
}
@media (max-width: 991.98px) {
    .topbar { display: none; }
    .site-header .navbar { min-height: 64px; }
    .page-hero { align-items: flex-start; flex-direction: column; gap: var(--ui-space-4); }
    .category-filter-panel { border-radius: var(--ui-radius-lg) 0 0 var(--ui-radius-lg); }
    .category-filter-actions { bottom: 0; position: sticky; z-index: 10; }
}
@media (max-width: 767.98px) {
    body { font-size: 14px; }
    .container, .container-xxl { padding-inline: var(--ui-space-3); }
    .page-hero { margin-bottom: var(--ui-space-4); padding-block: var(--ui-space-4); }
    .product-body { padding: var(--ui-space-3); }
    .product-title { min-height: 2.8em; }
    .add-btn span { display: none; }
    .add-btn { padding: 0; width: 44px; }
    .checkout-step-nav { grid-template-columns: 1fr; }
    .cart-table.table-responsive { border: 0; overflow: visible; }
    .cart-table .table thead { display: none; }
    .cart-table .table, .cart-table tbody { display: block; }
    .cart-table .carttabletr {
        background: var(--ui-surface);
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-lg);
        display: grid;
        gap: var(--ui-space-2);
        grid-template-columns: 80px 1fr;
        margin-bottom: var(--ui-space-3);
        padding: var(--ui-space-3);
    }
    .cart-table .carttabletr td {
        border: 0;
        display: flex;
        grid-column: 2;
        justify-content: space-between;
        padding: var(--ui-space-1) 0;
        text-align: right;
    }
    .cart-table .carttabletr .pro-thumbnail { grid-column: 1; grid-row: 1 / span 8; }
    .cart-table .carttabletr .pro-title { display: block; font-weight: 700; }
    .cart-table .mobileview { color: var(--ui-text-muted); display: inline; }
}