/* BElham: parked per client request, not in use right now — may be swapped back in for a presentation.
@font-face {
    font-family: 'BElham';
    src: url('../fonts/BElham.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
*/

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-primary: #175366;
    --color-primary-light: #3a8b9c;
    --color-secondary: #99adab;
    --color-base-light: #ffffff;
    --color-base-dark: #000000;
    --color-accent-1: #dbdb96;
    --color-accent-2: #d6a6c2;
    --color-accent-1-text: #4a4a2a;
    --color-accent-2-text: #5c2f47;
    --radius: 8px;
    --font-body: 'Vazirmatn', Tahoma, sans-serif;
}

html[dir="ltr"] {
    --font-body: 'Roboto Condensed', Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-base-dark);
    background: var(--color-base-light);
    line-height: 1.7;
}

a {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3, h4 {
    font-weight: 700;
}

.container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 20px;
}

/* Header */
.site-header {
    background: var(--color-primary);
    position: sticky;
    top: 0;
    z-index: 30;
}

.header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 14px;
}

.logo {
    display: inline-flex;
    align-items: center;
}

.logo-img {
    display: block;
    height: 46px;
    width: auto;
}

.header-account {
    display: flex;
    align-items: center;
    gap: 16px;
}

.main-nav ul {
    display: flex;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav a {
    color: var(--color-base-light);
    font-size: 14px;
}

.main-nav a:hover {
    color: var(--color-accent-1);
}

/* Mega menu */
.has-mega {
    position: relative;
}

.mega-panel {
    display: none;
    position: absolute;
    inset-inline-start: 0;
    top: 100%;
    background: var(--color-base-light);
    border-radius: var(--radius);
    padding: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    z-index: 20;
    min-width: 240px;
}

.has-mega:hover .mega-panel,
.has-mega:focus-within .mega-panel {
    display: block;
}

.mega-panel .mega-list {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-parent-item {
    position: relative;
}

.mega-panel .mega-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-base-dark);
    font-size: 13px;
    padding: 8px;
    border-radius: var(--radius);
}

.mega-item-parent {
    font-weight: 700;
}

.mega-item:hover {
    background: var(--color-secondary);
}

.mega-caret {
    margin-inline-start: auto;
    width: 6px;
    height: 6px;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(-45deg);
    flex-shrink: 0;
}

html[dir="rtl"] .mega-caret {
    transform: rotate(45deg);
}

/* Cascading flyout: a parent's children stay hidden until that
   specific parent row is hovered/focused, so the panel doesn't dump
   every sub-category on screen at once. Opens further along the
   inline-end side, away from the trigger, same side the caret points to. */
.mega-panel .mega-sublist {
    display: none;
    list-style: none;
    margin: 0;
    padding: 8px;
    position: absolute;
    top: 0;
    inset-inline-start: 100%;
    background: var(--color-base-light);
    border-radius: var(--radius);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 21;
}

.mega-parent-item:hover > .mega-sublist,
.mega-parent-item:focus-within > .mega-sublist {
    display: block;
}

.mega-sublist li a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-base-dark);
    font-size: 13px;
    padding: 6px 8px;
    border-radius: var(--radius);
    white-space: nowrap;
}

.mega-sublist li a:hover {
    background: var(--color-secondary);
}

.mega-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-base-light);
    font-size: 13px;
    flex-shrink: 0;
}

.mega-icon-image {
    object-fit: cover;
}

/* Mobile nav toggle */
.mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: var(--color-base-light);
    cursor: pointer;
    padding: 0;
}

.mobile-toggle svg {
    width: 24px;
    height: 24px;
}

/* Search */
.search-form {
    display: flex;
    align-items: stretch;
}

.search-form input {
    border: none;
    border-radius: var(--radius) 0 0 var(--radius);
    padding: 8px 12px;
    font-size: 13px;
    width: 160px;
}

html[dir="rtl"] .search-form input {
    border-radius: 0 var(--radius) var(--radius) 0;
}

.search-form button {
    border: none;
    background: var(--color-primary-light);
    color: var(--color-base-light);
    padding: 8px 14px;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 13px;
    cursor: pointer;
}

html[dir="rtl"] .search-form button {
    border-radius: var(--radius) 0 0 var(--radius);
}

.lang-flag {
    background: none;
    border: none;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

/* Hero */
.hero {
    position: relative;
    background-color: var(--color-secondary);
    background-size: cover;
    background-position: center;
    padding-block: 60px;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(23, 83, 102, 0.92), rgba(23, 83, 102, 0.75));
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: center;
    justify-content: space-between;
}

.hero-text {
    flex: 1 1 380px;
    color: var(--color-base-light);
}

.hero h1 {
    margin-block-end: 12px;
    font-size: 32px;
    color: var(--color-base-light);
}

.hero p {
    margin-block-end: 20px;
}

.btn-outline-light {
    background: var(--color-base-light);
    color: var(--color-primary);
    border: 1px solid var(--color-base-light);
}

.btn-outline-light:hover {
    background: var(--color-accent-1);
    border-color: var(--color-accent-1);
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-promos {
    flex: 1 1 320px;
    display: grid;
    gap: 12px;
}

.promo-card {
    background: var(--color-base-light);
    border-radius: 12px;
    padding: 14px 18px;
}

.promo-card h3 {
    margin: 0 0 4px;
    color: var(--color-primary);
    font-size: 15px;
}

.promo-card p {
    margin: 0;
    font-size: 13px;
    color: var(--color-base-dark);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 10px 24px;
    border-radius: var(--radius);
    font-weight: bold;
    font-size: 14px;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-base-light);
    border: none;
    cursor: pointer;
}

.btn-accent {
    background: var(--color-primary-light);
    color: var(--color-base-light);
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

/* Breadcrumb */
.breadcrumb {
    padding-block: 12px;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 15px;
    color: var(--color-base-dark);
}

.breadcrumb li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.breadcrumb li:not(:first-child)::before {
    content: "\203A";
    color: var(--color-secondary);
}

.breadcrumb a {
    color: var(--color-primary-light);
}

.breadcrumb a:hover {
    color: var(--color-primary);
}

@media (min-width: 901px) {
    .breadcrumb {
        padding-block-start: 28px;
    }
}

.breadcrumb span[aria-current] {
    color: var(--color-base-dark);
    opacity: 0.7;
}

/* Categories */
.categories-section,
.featured-products,
.page-section {
    padding-block: 50px;
}

.error-page {
    text-align: center;
    padding-block: 90px;
}

.error-page p {
    margin-block-end: 24px;
}

.error-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-block-start: 20px;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 20px 12px;
    border: 1px solid var(--color-secondary);
    border-radius: 12px;
}

.category-card:hover {
    border-color: var(--color-primary-light);
}

.category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-base-light);
    font-size: 18px;
}

.category-image {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

/* Category filter chips */
.category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block: 16px 8px;
}

.chip {
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid var(--color-secondary);
    font-size: 13px;
}

.chip-active {
    background: var(--color-primary);
    color: var(--color-base-light);
    border-color: var(--color-primary);
}

.category-filters-label {
    margin: 10px 0 4px;
    font-size: 12px;
    color: var(--color-base-dark);
    opacity: 0.65;
}

.category-filters-sub {
    margin-block-start: 0;
}

.chip-sub {
    padding: 4px 14px;
    font-size: 12px;
    border-style: dashed;
}

.search-summary {
    color: var(--color-primary-light);
    font-size: 14px;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-block-start: 32px;
}

.pagination-status {
    font-size: 13px;
    color: var(--color-base-dark);
}

/* Product grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-block-start: 20px;
}

.product-card {
    border: 1px solid var(--color-secondary);
    border-radius: 12px;
    padding: 16px;
    display: block;
}

.product-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    margin-block-end: 12px;
}

.product-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    margin-block-end: 12px;
    background: var(--color-secondary);
    color: var(--color-primary);
    font-size: 32px;
    font-weight: bold;
}

.product-card-title {
    margin: 0 0 6px;
    color: var(--color-primary);
    font-size: 15px;
}

.product-card p {
    font-size: 13px;
    margin: 0;
}

/* Accessory list: "تجهیزات مرتبط" / "قابل استفاده در" on the product
   detail page — a compact two-column list of rows (small thumbnail +
   code + name/link + short description), not the big image-forward card
   grid used for featured products / category browsing. */
.accessory-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 32px;
    margin-block-start: 20px;
}

@media (max-width: 600px) {
    .accessory-list {
        grid-template-columns: 1fr;
    }
}

.accessory-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-block: 14px;
    border-block-end: 1px solid var(--color-secondary);
    color: inherit;
}

.accessory-thumb {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.accessory-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 6px;
    background: var(--color-secondary);
    color: var(--color-primary);
    font-size: 16px;
    font-weight: bold;
    flex-shrink: 0;
}

.accessory-info {
    min-width: 0;
}

.accessory-name {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    color: var(--color-primary);
    font-weight: bold;
    font-size: 14px;
}

.accessory-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accessory-row:hover .accessory-name-text {
    text-decoration: underline;
}

.accessory-code {
    font-size: 11px;
    font-weight: normal;
    color: var(--color-base-dark);
    opacity: 0.55;
    flex-shrink: 0;
}

.accessory-chevron {
    width: 6px;
    height: 6px;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(-45deg);
    flex-shrink: 0;
}

html[dir="rtl"] .accessory-chevron {
    transform: rotate(45deg);
}

.accessory-desc {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--color-base-dark);
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.product-detail img {
    max-width: 320px;
    border-radius: var(--radius);
    margin-block-end: 16px;
}

/* Contact form */
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-block-end: 12px;
    border: 1px solid var(--color-secondary);
    border-radius: var(--radius);
    font-family: inherit;
}

/* Messages */
.messages {
    padding-block: 12px;
}

.alert {
    padding: 10px 16px;
    border-radius: var(--radius);
    margin-block-end: 8px;
}

.alert-success {
    background: var(--color-accent-1);
    color: var(--color-accent-1-text);
}

.alert-error {
    background: #fbe4e2;
    color: #8c1d13;
    border: 1px solid #b3261e;
}

/* Footer */
.site-footer {
    background: var(--color-primary);
    color: var(--color-base-light);
    margin-block-start: 40px;
    font-size: 13px;
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
    padding-block: 36px;
}

.footer-col h4 {
    color: var(--color-accent-1);
    margin: 0 0 10px;
    font-size: 14px;
}

.footer-col p {
    margin: 0;
    font-size: 13px;
    opacity: 0.9;
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.footer-col a {
    color: var(--color-base-light);
    font-size: 13px;
}

.footer-col a:hover {
    color: var(--color-accent-1);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-block: 16px;
    text-align: center;
}

/* Stats bar */
.stats-bar {
    background: var(--color-primary-light);
    padding-block: 28px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    text-align: center;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--color-base-light);
}

.stat-number {
    font-size: 26px;
    font-weight: bold;
}

.stat-label {
    font-size: 13px;
}

/* Why us */
.why-us-section {
    padding-block: 50px;
}

.why-us-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-block-start: 20px;
}

.why-us-item {
    padding: 20px;
    border-radius: 12px;
    background: var(--color-base-light);
    border: 1px solid var(--color-secondary);
}

.why-us-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-base-light);
    font-weight: bold;
    margin-block-end: 12px;
}

.why-us-item h3 {
    margin: 0 0 6px;
    color: var(--color-primary);
    font-size: 15px;
}

.why-us-item p {
    margin: 0;
    font-size: 13px;
}

/* CTA band */
.cta-band {
    background: var(--color-primary);
    color: var(--color-base-light);
    padding-block: 36px;
    margin-block-start: 10px;
}

.cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cta-inner h2 {
    margin: 0 0 6px;
    font-size: 20px;
}

.cta-inner p {
    margin: 0;
    font-size: 14px;
    opacity: 0.9;
}

/* About page */
.about-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 32px;
    align-items: start;
}

.about-image {
    width: 100%;
    border-radius: 12px;
}

.about-values {
    margin: 16px 0 0;
    padding-inline-start: 20px;
    display: grid;
    gap: 8px;
}

@media (max-width: 720px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
}

.mission-vision-section,
.timeline-section,
.certs-section {
    padding-block: 50px;
}

.mission-vision-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-block-start: 20px;
}

.mission-vision-card {
    padding: 20px;
    border-radius: 12px;
    background: var(--color-base-light);
    border: 1px solid var(--color-secondary);
}

.mission-vision-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-base-light);
    font-weight: bold;
    margin-block-end: 12px;
}

.mission-vision-card h3 {
    margin: 0 0 6px;
    color: var(--color-primary);
    font-size: 15px;
}

.mission-vision-card p {
    margin: 0;
}

/* Timeline */
.timeline {
    margin-block-start: 24px;
    border-inline-start: 2px solid var(--color-secondary);
    display: grid;
    gap: 24px;
    padding-inline-start: 24px;
}

.timeline-item {
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    inset-inline-start: -30px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-primary);
}

.timeline-year {
    display: inline-block;
    font-weight: bold;
    color: var(--color-primary);
    margin-block-end: 4px;
}

.timeline-item p {
    margin: 0;
}

/* Certifications */
.certs-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-start: 20px;
}

.cert-badge {
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    font-size: 13px;
    font-weight: bold;
}

/* Contact page */
.contact-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
    align-items: start;
}

.contact-info {
    display: grid;
    gap: 20px;
}

.contact-info-item h3 {
    margin: 0 0 4px;
    color: var(--color-primary);
    font-size: 14px;
}

.contact-info-item p {
    margin: 0;
    font-size: 14px;
}

@media (max-width: 720px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* Product card price */
.product-card-price {
    display: block;
    margin-block-start: 8px;
    font-weight: bold;
    color: var(--color-primary);
    font-size: 14px;
}


/* Product detail */
.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 32px;
    align-items: start;
}

.product-detail-grid img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
}

.product-detail-placeholder {
    display: flex;
    width: 100%;
    aspect-ratio: 4 / 3;
    font-size: 48px;
}

.product-detail-info h1 {
    margin-block-end: 8px;
}

.product-code {
    font-size: 22px;
    color: var(--color-base-dark);
    opacity: 0.6;
    margin-block-end: 8px;
}

@media (max-width: 900px) {
    .product-code {
        font-size: 16px;
    }
}

.product-variant-title {
    font-size: 0.6em;
    font-weight: normal;
    color: var(--color-primary);
}

.product-variant-title:empty {
    display: none;
}

.product-variant-title:not(:empty)::before {
    content: '— ';
}

.product-price-box {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-block: 12px;
    flex-wrap: wrap;
}

.product-price {
    font-size: 22px;
    font-weight: bold;
    color: var(--color-primary);
}

.product-stock {
    font-size: 13px;
    color: var(--color-primary-light);
}

.variant-selector {
    margin-block: 16px;
    display: grid;
    gap: 14px;
}

.variant-attribute h4 {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--color-primary);
}

.variant-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.variant-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--color-secondary);
    border-radius: 999px;
    font-size: 13px;
    cursor: pointer;
}

.variant-option:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-secondary);
}

.addon-selector {
    margin-block: 20px;
}

.addon-selector h3 {
    font-size: 15px;
    margin: 0 0 10px;
    color: var(--color-primary);
}

.addon-group {
    margin-block-end: 14px;
}

.addon-group h4 {
    margin: 0 0 8px;
    font-size: 13px;
}

.addon-required {
    color: var(--color-accent-2);
    font-weight: normal;
    font-size: 12px;
}

.addon-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--color-secondary);
    cursor: pointer;
}

.addon-item .addon-price {
    margin-inline-start: auto;
    color: var(--color-primary-light);
    font-weight: bold;
}

.product-total-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: var(--color-secondary);
    border-radius: var(--radius);
    font-weight: bold;
    margin-block-start: 16px;
}

.product-total {
    color: var(--color-primary);
    font-size: 16px;
}

@media (max-width: 720px) {
    .product-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Add to cart */
.add-to-cart-form {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block-start: 24px;
    padding-block-start: 20px;
    border-top: 1px solid var(--color-secondary);
    flex-wrap: wrap;
}

.quantity-field {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.quantity-field input {
    width: 70px;
    padding: 8px;
    border: 1px solid var(--color-secondary);
    border-radius: var(--radius);
    font-family: inherit;
}

/* Cart link in header */
.cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-base-light);
    font-size: 14px;
}

.cart-icon {
    width: 20px;
    height: 20px;
    color: var(--color-accent-1);
    flex-shrink: 0;
}

.cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    margin-inline-start: 4px;
    border-radius: 999px;
    background: var(--color-accent-2);
    color: var(--color-accent-2-text);
    font-size: 11px;
    font-weight: bold;
}

/* Cart page */
.cart-items {
    display: grid;
    gap: 16px;
    margin-block-start: 16px;
}

.cart-item {
    display: grid;
    grid-template-columns: 80px 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border: 1px solid var(--color-secondary);
    border-radius: 12px;
}

.cart-item img,
.cart-item-placeholder {
    width: 80px;
    height: 80px;
    border-radius: var(--radius);
    object-fit: cover;
}

.cart-item-placeholder {
    display: flex;
    font-size: 24px;
}

.cart-item-info a {
    color: var(--color-primary);
    font-weight: bold;
}

.cart-item-variant,
.cart-item-addons,
.cart-item-qty {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--color-base-dark);
}

.cart-item-price {
    font-weight: bold;
    color: var(--color-primary);
    white-space: nowrap;
}

.cart-total-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--color-secondary);
    border-radius: var(--radius);
    font-weight: bold;
    margin-block: 20px;
}

.cart-checkout h3 {
    font-size: 15px;
    color: var(--color-primary);
    margin: 0 0 12px;
}

@media (max-width: 600px) {
    .cart-item {
        grid-template-columns: 60px 1fr;
    }

    .cart-item-price,
    .cart-item-remove {
        grid-column: 2;
    }
}

/* Datasheet */
.datasheet-section {
    margin-block-start: 40px;
    padding-block-start: 24px;
    border-top: 1px solid var(--color-secondary);
}

.datasheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-end: 16px;
}

.datasheet-header h2 {
    margin: 0;
    font-size: 18px;
    color: var(--color-primary);
}

.datasheet-downloads {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.datasheet-html {
    overflow-x: auto;
}

.datasheet-html table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.datasheet-html th,
.datasheet-html td {
    padding: 10px 14px;
    border: 1px solid var(--color-secondary);
    text-align: start;
}

.datasheet-html th {
    background: var(--color-secondary);
    color: var(--color-base-dark);
    white-space: nowrap;
}

/* Responsive header */
@media (max-width: 900px) {
    .header-inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas:
            "lang logo account"
            "search search search";
        align-items: center;
        gap: 8px 10px;
    }

    .logo {
        grid-area: logo;
        justify-self: center;
    }

    .logo-img {
        height: 34px;
    }

    .cart-link {
        display: none;
    }

    .header-account {
        grid-area: account;
        justify-self: end;
        gap: 8px;
    }

    .lang-switch {
        grid-area: lang;
        justify-self: start;
    }

    .lang-flag {
        font-size: 18px;
    }

    .main-nav {
        display: none;
    }

    .search-form {
        grid-area: search;
    }

    .search-form input {
        flex: 1;
    }

    body {
        padding-block-end: 64px;
    }
}

/* Bottom nav (mobile) */
.bottom-nav {
    display: none;
}

@media (max-width: 900px) {
    .bottom-nav {
        display: block;
        position: fixed;
        inset-block-end: 0;
        inset-inline: 0;
        z-index: 50;
        background: var(--color-base-light);
        border-top: 1px solid var(--color-secondary);
    }

    .bottom-nav ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .bottom-nav li {
        flex: 1;
    }

    .bottom-nav a {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 8px 0 6px;
        color: var(--color-base-dark);
        font-size: 11px;
    }

    .bottom-nav a.active {
        color: var(--color-primary);
    }

    .bottom-nav svg {
        width: 22px;
        height: 22px;
    }

    .bottom-nav .cart-badge {
        position: absolute;
        top: 2px;
        inset-inline-start: 55%;
    }
}

/* Account link + logout in header */
.account-link {
    color: var(--color-base-light);
    font-size: 14px;
}

.account-link-btn {
    background: var(--color-accent-1);
    color: var(--color-accent-1-text);
    padding: 4px 10px;
    font-size: 12px;
    border-radius: var(--radius);
    font-weight: 600;
}

.account-link-btn:hover {
    background: var(--color-base-light);
}

.logout-form {
    display: inline-flex;
}

.logout-form button {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-base-light);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
}

/* Auth pages (login / signup / password reset) */
.auth-page {
    display: flex;
    justify-content: center;
}

.auth-card {
    width: 100%;
    max-width: 420px;
}

.auth-alt-link {
    font-size: 14px;
    margin-block-start: 8px;
}

.auth-alt-link a {
    color: var(--color-primary);
    font-weight: bold;
}

/* Customer panel */
.panel-layout {
    display: block;
}

.panel-nav {
    margin-block-end: 24px;
    padding-block-end: 16px;
    border-bottom: 1px solid var(--color-secondary);
    overflow-x: auto;
}

.panel-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
}

.panel-nav a {
    display: block;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    font-size: 13px;
    white-space: nowrap;
}

.panel-nav a.active,
.panel-nav a:hover {
    background: var(--color-primary);
    color: var(--color-base-light);
}

.panel-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-block-end: 28px;
}

.stat-card {
    background: var(--color-base-light);
    border: 1px solid var(--color-secondary);
    border-radius: 12px;
    padding: 16px 18px;
}

.stat-card-value {
    display: block;
    font-size: 26px;
    font-weight: bold;
    color: var(--color-primary);
}

.stat-card-label {
    font-size: 13px;
    color: var(--color-base-dark);
}

.order-list {
    display: grid;
    gap: 16px;
    margin-block-start: 16px;
}

.order-card {
    border: 1px solid var(--color-secondary);
    border-radius: 12px;
    padding: 14px 16px;
}

.order-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    cursor: pointer;
    list-style: none;
}

.order-card-head::-webkit-details-marker {
    display: none;
}

.order-card-head::after {
    content: '\002B';
    font-weight: normal;
    color: var(--color-base-dark);
    margin-inline-start: 8px;
}

.order-card[open] > .order-card-head::after {
    content: '\2212';
}

.order-card-body {
    margin-block-start: 8px;
}

.order-card-excel {
    display: inline-block;
    margin-block-start: 10px;
    font-size: 13px;
    padding: 6px 14px;
}

.order-status {
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 999px;
}

.order-status-pending {
    background: var(--color-base-light);
    border: 1px solid var(--color-secondary);
    color: var(--color-base-dark);
}

.order-status-done {
    background: var(--color-accent-1);
    color: var(--color-accent-1-text);
}

.order-card-date {
    font-size: 13px;
    color: var(--color-base-dark);
    margin: 4px 0;
}

.order-card-items {
    margin: 8px 0;
    padding-inline-start: 20px;
    font-size: 14px;
}

.order-card-total {
    font-weight: bold;
    color: var(--color-primary);
    margin: 4px 0 0;
}