/* Palette derived from the 3dagon print logo package:
   brand dark #27500A, brand green #639922, neutral #c2c0b6.
   Backgrounds and borders are dark tints of the same green so the UI stays within the brand family. */
:root {
    color-scheme: dark;

    --brand-dark: #27500a;
    --brand: #639922;
    --brand-hover: #74ad2c;
    --neutral: #c2c0b6;

    --bg: #0d1209;
    --surface: #141b0f;
    --surface-2: #1b2514;
    --surface-3: #22301a;
    --border: #28361e;
    --border-strong: #3a4d2b;
    --text: #e6e4db;
    --text-muted: #9c9c90;
    --on-brand: #0d1209;
    --on-brand-dark: #e6e4db;
    --brand-text: #639922;
    --danger: #d9785f;
    --danger-bg: #2b1812;
    --danger-border: #5a2e22;
    --placeholder: #5f6457;
    --header-bg: rgb(13 18 9 / 92%);
    --shadow-strong: rgb(0 0 0 / 55%);

    --radius: 10px;
    --radius-small: 6px;
    --font-mono: "DejaVu Sans Mono", "Cascadia Mono", "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --hex-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16.2v32.3L28 64.7 0 48.5V16.2ZM28 64.7 56 80.9V97M28 64.7 0 80.9V97' fill='none' stroke='%23182110' stroke-width='1.2'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.6 var(--font-body);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4 { font-family: var(--font-mono); font-weight: 700; line-height: 1.2; margin: 0 0 .6em; color: var(--neutral); letter-spacing: -.01em; }
h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: var(--text); }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
a { color: var(--brand-hover); text-decoration: none; }
a:hover { color: var(--text); }
img { max-width: 100%; display: block; }
code { font-family: var(--font-mono); background: var(--surface-3); color: var(--neutral); padding: 2px 7px; border-radius: 4px; font-size: .92em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }
::selection { background: var(--brand); color: var(--on-brand); }

.container { width: min(1180px, 100% - 32px); margin-inline: auto; }
.page { flex: 1; padding: 32px 0 72px; }
.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); }
.small { font-size: .875rem; }
.lead { font-size: 1.1rem; color: var(--text-muted); max-width: 56ch; }
.accent-text { color: var(--brand-text); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Brand lockup — mirrors poziom_znak_lewo: mark left, 3DAGON bold over spaced PRINT */
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; }
.brand:hover { color: inherit; }
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; }
.logo-mark { width: 42px; height: auto; flex-shrink: 0; }
.wordmark { display: flex; flex-direction: column; font-family: var(--font-mono); line-height: 1; }
.wordmark-main { font-weight: 700; font-size: 1.3rem; color: var(--neutral); letter-spacing: 0; }
.wordmark-sub { font-size: .66rem; color: var(--brand-text); letter-spacing: .38em; margin-top: 5px; }
.admin-badge { font-family: var(--font-mono); font-size: .72rem; border: 1px solid var(--border-strong); color: var(--text-muted); padding: 2px 8px; border-radius: 4px; }

/* Header */
.site-header { background: var(--header-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 70px; flex-wrap: wrap; }
.main-nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-family: var(--font-mono); font-size: .92rem; }
.main-nav a, .site-header .link-button { color: var(--text-muted); }
.main-nav a:hover, .site-header .link-button:hover { color: var(--text); }
.cart-link { display: inline-flex; align-items: center; gap: 8px; }
.cart-badge { background: var(--brand); color: var(--on-brand); border-radius: 4px; font-size: .75rem; font-weight: 700; min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 6px; }

/* Buttons */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--brand); color: var(--on-brand); border: 1px solid var(--brand); border-radius: var(--radius-small);
    padding: 12px 22px; font: 700 .95rem var(--font-mono); cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
}
.button:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); }
.button:active { transform: translateY(1px); }
.button:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: 2px; }
.button-ghost { background: transparent; color: var(--neutral); border-color: var(--border-strong); }
.button-ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--brand); }
.button-wide { width: 100%; }
.button-small { padding: 8px 14px; font-size: .85rem; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--brand-hover); cursor: pointer; }
.link-button:hover { color: var(--text); }
.link-button.danger { color: var(--danger); }
.icon-button { background: none; border: 0; font-size: 1rem; cursor: pointer; color: var(--text-muted); padding: 6px; }
.icon-button:hover { color: var(--danger); }
.inline-form { display: inline; }

/* Notices */
.flash { background: var(--surface-2); border: 1px solid var(--border-strong); border-left: 3px solid var(--brand); padding: 12px 16px; border-radius: var(--radius-small); margin-bottom: 24px; font-family: var(--font-mono); font-size: .92rem; }
.form-errors { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger); padding: 12px 16px; border-radius: var(--radius-small); margin-bottom: 16px; }
.form-errors:empty, .form-errors.validation-summary-valid { display: none; }
.form-errors ul { margin: 0; padding-left: 18px; }
.warning-note { background: var(--surface-2); border: 1px solid var(--border-strong); border-left: 3px solid var(--neutral); padding: 10px 14px; border-radius: var(--radius-small); margin: 12px 0; }

/* Shop */
.shop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.shop-head h1 { margin: 0; }

/* Social */
.social-links { display: flex; gap: 8px; }
.social-links a { width: 36px; height: 36px; border-radius: var(--radius-small); display: grid; place-items: center; background: var(--surface-2); color: var(--neutral); border: 1px solid var(--border); transition: background .15s, color .15s, border-color .15s; }
.social-links a:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.social-links svg { width: 18px; height: 18px; }

/* Products */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.product-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; color: inherit; display: flex; flex-direction: column; transition: border-color .2s, transform .2s; }
.product-card:hover { border-color: var(--brand); transform: translateY(-3px); color: inherit; }
.product-card-image { aspect-ratio: 1; background: var(--surface-2); }
.product-card-image img { width: 100%; height: 100%; object-fit: cover; }
.product-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; border-top: 1px solid var(--border); }
.product-card-body h3 { font-size: .98rem; margin: 0; color: var(--text); }
.product-card-body p { margin: 0; font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.price { font-family: var(--font-mono); font-weight: 700; color: var(--brand-text); margin-top: auto; padding-top: 8px; }
.price-large { font-size: 1.8rem; margin-bottom: 12px; }
.image-placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: var(--hex-pattern) center / 56px 97px, var(--surface-2); }
.image-placeholder .logo-mark { width: 34%; }

.breadcrumbs { font-family: var(--font-mono); font-size: .85rem; color: var(--text-muted); margin-bottom: 16px; }
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--text); }

.product-detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
.gallery-main { aspect-ratio: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 12px; }
.gallery-thumbs button { padding: 0; border: 1px solid var(--border); border-radius: var(--radius-small); overflow: hidden; cursor: pointer; aspect-ratio: 1; background: var(--surface); }
.gallery-thumbs button.active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.buy-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin: 20px 0; }
.color-picker { border: 0; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.color-picker legend { font-family: var(--font-mono); font-size: .85rem; color: var(--text-muted); margin-bottom: 8px; padding: 0; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; }
.chip span { display: inline-block; padding: 7px 14px; border-radius: var(--radius-small); border: 1px solid var(--border-strong); cursor: pointer; font-size: .92rem; background: var(--surface-2); }
.chip input:checked + span { border-color: var(--brand); background: var(--brand-dark); color: var(--on-brand-dark); }
.chip input:focus-visible + span { outline: 2px solid var(--brand-hover); outline-offset: 2px; }
.buy-row { display: flex; gap: 12px; }
.quantity input { width: 76px; height: 100%; text-align: center; }
.specs { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 16px 0; }
.specs dt { color: var(--text-muted); font-family: var(--font-mono); font-size: .88rem; padding-top: 1px; }
.specs dd { margin: 0; overflow-wrap: anywhere; }
.description { white-space: pre-line; margin: 16px 0; }
.safety-note { font-size: .88rem; background: var(--surface); border: 1px solid var(--border); padding: 10px 14px; border-radius: var(--radius-small); margin: 16px 0; color: var(--text-muted); }
.safety-note strong { color: var(--neutral); }
.makerworld-link { font-family: var(--font-mono); font-weight: 700; }

/* Forms */
input, select, textarea {
    font: inherit; color: var(--text); background: var(--bg);
    border: 1px solid var(--border-strong); border-radius: var(--radius-small);
    padding: 10px 12px; width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dark); }
input[type="radio"], input[type="checkbox"] { width: auto; accent-color: var(--brand); }
input[type="file"] { padding: 8px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; flex: 1; }
.field label { font-family: var(--font-mono); font-size: .82rem; color: var(--text-muted); }
.field-row { display: flex; gap: 16px; }
.field-narrow { flex: 0 0 150px; }
.field-error { color: var(--danger); font-size: .85rem; }
.field-error:empty { display: none; }
.input-validation-error { border-color: var(--danger); }
.checkbox { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; margin-bottom: 8px; }
.checkbox input { margin-top: 5px; }
.checkbox-row { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; }
.inline-fields { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-fields select, .inline-fields input { width: auto; }

/* Cart & checkout */
.cart-layout, .checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.cart-lines { display: grid; gap: 10px; }
.cart-line { display: grid; grid-template-columns: 72px 1fr 80px 110px 36px; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--border); padding: 12px; border-radius: var(--radius); }
.cart-thumb { width: 72px; height: 72px; border-radius: var(--radius-small); overflow: hidden; background: var(--surface-2); }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-line-info { display: flex; flex-direction: column; font-size: .92rem; }
.cart-line-info a { color: var(--text); }
.cart-quantity input { text-align: center; padding: 8px; }
.cart-line-total { text-align: right; font-family: var(--font-mono); }
.summary-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; position: sticky; top: 94px; }
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: .93rem; }
.summary-row > :last-child { font-family: var(--font-mono); white-space: nowrap; }
.summary-total { border-bottom: 0; font-size: 1.1rem; padding: 14px 0; }
.summary-total strong { color: var(--brand-text); }
.form-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 18px; }
.option-list { display: grid; gap: 10px; margin-bottom: 12px; }
.option { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--border-strong); border-radius: var(--radius-small); padding: 14px 16px; cursor: pointer; background: var(--bg); transition: border-color .15s; }
.option:hover { border-color: var(--brand); }
.option:has(input:checked) { border-color: var(--brand); background: var(--surface-2); box-shadow: inset 3px 0 0 var(--brand); }
.option input { margin-top: 5px; }
.option-body { display: flex; flex-direction: column; flex: 1; }
.option-price { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; color: var(--neutral); }
.delivery-details { margin-top: 12px; }
.delivery-details[hidden] { display: none; }

/* Status */
.status-page { max-width: 720px; display: grid; gap: 20px; }
.status-head h1 { margin-bottom: 10px; }
.payment-box { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--brand); border-radius: var(--radius); padding: 24px; }
.status-pill { display: inline-block; padding: 3px 10px; border-radius: 4px; font-family: var(--font-mono); font-size: .78rem; font-weight: 700; white-space: nowrap; border: 1px solid var(--border-strong); color: var(--neutral); background: var(--surface-2); }
.status-awaitingpayment { border-color: var(--neutral); color: var(--neutral); background: transparent; }
.status-paid { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.status-inproduction { border-color: var(--brand); color: var(--brand-hover); background: transparent; }
.status-shipped { background: var(--brand-dark); border-color: var(--brand); color: var(--on-brand-dark); }
.status-completed { color: var(--text-muted); }
.status-cancelled { border-color: var(--danger-border); color: var(--danger); background: var(--danger-bg); }
[data-copy] { cursor: copy; }

.empty-state { text-align: center; padding: 64px 0; display: grid; justify-items: center; gap: 12px; }

/* Legal */
.legal { max-width: 780px; background: var(--surface); border: 1px solid var(--border); padding: 32px 40px; border-radius: var(--radius); }
.legal h2 { margin-top: 1.6em; font-size: 1.02rem; }

/* Footer */
.site-footer { background: var(--surface); border-top: 1px solid var(--border); color: var(--text-muted); padding: 48px 0 24px; }
.site-footer a { display: block; color: var(--text-muted); margin-bottom: 6px; }
.site-footer a:hover { color: var(--text); }
.site-footer .social-links a { display: grid; margin: 0; color: var(--neutral); }
.site-footer .social-links a:hover { color: var(--on-brand); }
.site-footer h4 { font-size: .85rem; color: var(--brand-text); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; }
.brand-footer { margin-bottom: 12px; }
.footer-legal { border-top: 1px solid var(--border); margin-top: 32px; padding-top: 16px; font-size: .8rem; }

/* Admin */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; color: inherit; display: grid; gap: 4px; transition: border-color .15s; }
.stat-tile:hover { border-color: var(--brand); color: inherit; }
.stat-tile-accent { border-top: 3px solid var(--brand); }
.stat-label { color: var(--text-muted); font-family: var(--font-mono); font-size: .82rem; }
.stat-value { font-size: 2rem; font-family: var(--font-mono); color: var(--neutral); }
.limit-bar { height: 10px; background: var(--surface-3); border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
.limit-bar-fill { height: 100%; background: var(--brand); }
.limit-bar.near .limit-bar-fill { background: var(--neutral); }
.limit-bar.over .limit-bar-fill { background: var(--danger); }
.data-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; font-size: .92rem; }
.data-table th, .data-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table th { background: var(--surface-2); font-family: var(--font-mono); font-weight: 400; font-size: .8rem; color: var(--text-muted); }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table a { color: var(--text); }
.table-thumb { width: 64px; }
.table-thumb img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.table-actions { white-space: nowrap; text-align: right; }
.table-actions > * { margin-left: 12px; }
.tag { display: inline-block; font-family: var(--font-mono); font-size: .72rem; background: var(--brand-dark); color: var(--on-brand-dark); padding: 1px 7px; border-radius: 3px; margin-left: 6px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.tabs a { padding: 6px 12px; border-radius: var(--radius-small); font-family: var(--font-mono); font-size: .82rem; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); }
.tabs a:hover { color: var(--text); border-color: var(--border-strong); }
.tabs a.active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.admin-edit-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
.admin-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.admin-image { border: 1px solid var(--border-strong); border-radius: var(--radius-small); overflow: hidden; background: var(--surface-2); }
.admin-image.main { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.admin-image img { aspect-ratio: 1; width: 100%; object-fit: cover; }
.admin-image-actions { display: flex; flex-direction: column; gap: 4px; padding: 8px; font-size: .85rem; background: var(--surface); }
.shipping-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.login-box { max-width: 380px; margin: 48px auto; background: var(--surface); border: 1px solid var(--border); padding: 32px; border-radius: var(--radius); }

@media (max-width: 900px) {
    .product-detail, .cart-layout, .checkout-layout, .admin-edit-layout { grid-template-columns: 1fr; }
    .summary-box { position: static; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .page { padding-top: 20px; }
    .header-inner { padding: 10px 0; }
    .main-nav { gap: 16px; font-size: .85rem; }
    .logo-mark { width: 36px; }
    .wordmark-main { font-size: 1.1rem; }
    .field-row { flex-direction: column; gap: 0; }
    .field-narrow { flex-basis: auto; }
    .cart-line { grid-template-columns: 60px 1fr 36px; grid-template-areas: "thumb info remove" "thumb quantity total"; }
    .cart-thumb { grid-area: thumb; width: 60px; height: 60px; }
    .cart-line-info { grid-area: info; }
    .cart-quantity { grid-area: quantity; max-width: 90px; }
    .cart-line-total { grid-area: total; }
    .cart-line > form:last-child { grid-area: remove; }
    .legal { padding: 20px; }
    .data-table { display: block; overflow-x: auto; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .product-card-body { padding: 10px 12px 12px; }
}

/* Contact */
.contact-layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.flash-warning { border-left-color: var(--neutral); }
.flash-warning a { margin-left: 6px; font-weight: 700; }

/* Checkout: parcel locker preview */
.locker-info { font-family: var(--font-mono); font-size: .82rem; color: var(--brand-hover); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-small); padding: 8px 12px; }
.locker-info-invalid { color: var(--danger); border-color: var(--danger-border); }

/* Admin messages */
.message-list { display: grid; gap: 14px; }
.message-item.unread { border-left: 3px solid var(--brand); }
.message-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.message-body { white-space: pre-line; }
.message-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.row-unread td { background: var(--surface-2); }

/* Chat widget */
.chat-widget { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.chat-toggle {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--brand);
    background: var(--brand); color: var(--on-brand); font: 700 .92rem var(--font-mono); cursor: pointer; box-shadow: 0 10px 30px var(--shadow-strong);
}
.chat-toggle:hover { background: var(--brand-hover); }
.chat-toggle svg { width: 18px; height: 18px; }
.chat-unread { background: var(--neutral); color: var(--on-brand); border-radius: 999px; min-width: 20px; height: 20px; font-size: .72rem; display: inline-grid; place-items: center; padding: 0 5px; }
.chat-unread[hidden] { display: none; }
.chat-panel { width: min(370px, calc(100vw - 32px)); height: min(540px, calc(100vh - 110px)); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 18px 50px var(--shadow-strong); display: flex; flex-direction: column; overflow: hidden; }
.chat-panel[hidden] { display: none; }
.chat-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.chat-header strong { font-family: var(--font-mono); color: var(--neutral); display: block; }
.chat-status { font-family: var(--font-mono); font-size: .75rem; color: var(--text-muted); }
.chat-status.online { color: var(--brand-hover); }
.chat-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-messages-admin { max-height: 60vh; min-height: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; }
.chat-intro { color: var(--text-muted); font-size: .9rem; margin: 0; }
.chat-msg { max-width: 85%; display: flex; flex-direction: column; gap: 3px; }
.chat-msg-body { padding: 9px 12px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; }
.chat-msg-meta { font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); }
.chat-msg-customer { align-self: flex-end; align-items: flex-end; }
.chat-msg-customer .chat-msg-body { background: var(--brand-dark); color: var(--on-brand-dark); border-bottom-right-radius: 3px; }
.chat-msg-admin, .chat-msg-bot { align-self: flex-start; }
.chat-msg-admin .chat-msg-body { background: var(--surface-3); border-bottom-left-radius: 3px; }
.chat-msg-bot .chat-msg-body { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-muted); border-bottom-left-radius: 3px; }
.chat-msg-body a { color: var(--brand-hover); text-decoration: underline; }
.admin .chat-msg-customer { align-self: flex-start; align-items: flex-start; }
.admin .chat-msg-admin { align-self: flex-end; align-items: flex-end; }
.admin .chat-msg-admin .chat-msg-body { background: var(--brand-dark); color: var(--on-brand-dark); }
.admin .chat-msg-customer .chat-msg-body { background: var(--surface-3); }
.chat-form { padding: 12px; border-top: 1px solid var(--border); display: grid; gap: 8px; }
.chat-details { display: grid; gap: 6px; }
.chat-details[hidden] { display: none; }
.chat-details input, .chat-input-row textarea { padding: 8px 10px; font-size: .9rem; }
.chat-input-row { display: flex; gap: 8px; align-items: flex-end; }
.chat-input-row textarea { resize: none; }
.chat-error { color: var(--danger); font-size: .82rem; margin: 0; }
.chat-legal { font-size: .7rem; color: var(--text-muted); margin: 0; }
.chat-legal a { color: var(--text-muted); text-decoration: underline; }

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

@media (max-width: 600px) {
    .chat-widget { right: 12px; bottom: 12px; }
    .chat-toggle span:not(.chat-unread) { display: none; }
    .chat-panel { height: calc(100vh - 90px); }
}

.ask-button { margin-top: 10px; }
.reveal-phone { color: var(--brand-hover); text-align: left; }

/* Promotions */
.discount-row > :last-child { color: var(--brand-hover); }
.discount-code { margin: 14px 0 8px; display: grid; gap: 6px; }
.discount-code input { text-transform: uppercase; }
.discount-ok { color: var(--brand-hover); font-family: var(--font-mono); }
.promo-form { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--border); }
.product-picker { border: 1px solid var(--border); border-radius: var(--radius-small); padding: 12px 16px; margin: 0 0 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; }
.product-picker legend { font-family: var(--font-mono); font-size: .82rem; color: var(--text-muted); padding: 0 6px; }

/* Admin security */
.otp-input { font-family: var(--font-mono); font-size: 1.3rem; letter-spacing: .3em; text-align: center; max-width: 200px; }
.setup-steps { display: grid; gap: 14px; padding-left: 20px; }
.qr-code { margin: 12px 0 6px; width: 220px; }
.qr-code svg { width: 100%; height: auto; border-radius: var(--radius-small); display: block; }

/* Price calculator */
.calc-result { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--border); }
.calc-price { font-size: 1.6rem; color: var(--brand-text); }
.summary-row[hidden] { display: none; }

/* Product pricing */
.pricing-box { border: 1px solid var(--border-strong); border-radius: var(--radius-small); padding: 14px 16px 6px; margin: 0 0 16px; background: var(--bg); }
.pricing-box legend { font-family: var(--font-mono); font-size: .82rem; color: var(--brand-text); padding: 0 6px; }
.pricing-preview { display: flex; gap: 20px; flex-wrap: wrap; align-items: baseline; padding: 10px 0 8px; font-family: var(--font-mono); font-size: .9rem; }
.pricing-preview[hidden] { display: none; }
input[readonly] { opacity: .75; cursor: not-allowed; }
.table-scroll { overflow-x: auto; }
.pricing-table td, .pricing-table th { white-space: nowrap; }
.pricing-table tfoot td { background: var(--surface-2); font-weight: 700; border-bottom: 0; }
.row-muted td { opacity: .6; }
.price-outdated { color: var(--neutral); font-weight: 700; }
.filament-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.filament-row input { width: auto; flex: 1 1 160px; padding: 7px 10px; }
.filament-row .filament-material { flex: 0 1 110px; }
.filament-row .filament-price { flex: 0 1 100px; }

/* Light theme - same brand colors on a warm light neutral derived from #c2c0b6.
   The wordmark/headings switch from the light neutral to brand dark green so they stay readable. */
:root[data-theme="light"] {
    color-scheme: light;

    --brand-hover: #456e13;
    --brand-text: #456e13;
    --neutral: #27500a;

    --bg: #f3f2ec;
    --surface: #ffffff;
    --surface-2: #ebe9e1;
    --surface-3: #dfddd3;
    --border: #dcd9cf;
    --border-strong: #c2c0b6;
    --text: #1a2212;
    --text-muted: #5b5e54;
    --on-brand: #0d1209;
    --danger: #b3432a;
    --danger-bg: #fbe9e4;
    --danger-border: #eec2b6;
    --placeholder: #9a9c92;
    --header-bg: rgb(243 242 236 / 92%);
    --shadow-strong: rgb(40 50 30 / 18%);
    --hex-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16.2v32.3L28 64.7 0 48.5V16.2ZM28 64.7 56 80.9V97M28 64.7 0 80.9V97' fill='none' stroke='%23e3e1d8' stroke-width='1.2'/%3E%3C/svg%3E");
}

:root[data-theme="light"] .site-footer .social-links a:hover { color: var(--on-brand); }

/* Theme toggle */
.theme-toggle { background: none; border: 1px solid var(--border-strong); color: var(--text-muted); border-radius: var(--radius-small); width: 34px; height: 34px; display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.theme-toggle:hover { color: var(--text); border-color: var(--brand); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }
/* Add-on suggestions */
.suggestions { margin: 24px 0; }
.suggestions h2 { font-size: 1rem; }
.suggestion-list { display: grid; gap: 10px; }
.suggestion-card { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
.suggestion-image { width: 72px; height: 72px; border-radius: var(--radius-small); overflow: hidden; background: var(--surface-2); display: block; }
.suggestion-image img { width: 100%; height: 100%; object-fit: cover; }
.suggestion-body { display: grid; gap: 4px; font-size: .92rem; }
.suggestion-body a { color: var(--text); }
.suggestion-body .price { padding-top: 0; margin-top: 0; }
.suggestion-hint { font-family: var(--font-mono); font-size: .78rem; color: var(--brand-text); }
.suggestion-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.suggestion-form select { width: auto; padding: 6px 10px; font-size: .88rem; }
