:root { --canvas:#f7f2e9; --paper:#fffdfa; --ink:#292d20; --muted:#776f61; --line:#e5d9c8; --rust:#b73515; --olive:#485420; --olive-soft:#edf2de; --display:"DM Serif Display",Georgia,serif; --ui:"Eigerdals","DM Sans",sans-serif; color-scheme:light; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--canvas); color:var(--ink); font:15px/1.5 var(--ui); }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid #b7351580; outline-offset:3px; }
.site-header { height:76px; max-width:1200px; margin:auto; padding:0 clamp(20px,4vw,42px); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.site-header img { width:174px; max-width:55vw; height:42px; object-fit:contain; object-position:left; }
.table-badge { padding:8px 13px; border:1px solid #d7d9c4; border-radius:999px; background:var(--olive-soft); color:var(--olive); font-size:12px; font-weight:700; white-space:nowrap; }
.page { max-width:1200px; margin:auto; padding:0 clamp(16px,3vw,40px) 120px; }
.intro { min-height:270px; padding:clamp(26px,5vw,58px); display:flex; align-items:center; border:1px solid #ead8c1; border-radius:24px; background:#f4dfc6; }
.intro-copy { max-width:650px; }
.eyebrow { margin:0 0 9px; color:var(--rust); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.intro h1,.section-head h2,.dialog-head h2,.success-section h2 { margin:0; font:400 clamp(40px,6vw,70px)/1.02 var(--display); letter-spacing:-.04em; }
.intro p:not(.eyebrow) { max-width:490px; margin:19px 0; color:#524b3b; font-size:15px; }
.intro-link { display:inline-flex; gap:8px; align-items:center; color:var(--rust); font-size:13px; font-weight:700; text-decoration:none; }
.page-error { margin:30px 0; padding:22px; border:1px solid #e1b7a7; border-radius:16px; background:#fff5ee; color:#9b3018; }
.menu-section { margin-top:42px; }
.section-head h2 { font-size:44px; }
.section-head > p:last-child { margin:8px 0 0; color:var(--muted); }
.category-nav { display:flex; gap:9px; overflow:auto; padding:25px 1px 20px; scrollbar-width:thin; }
.category-chip { min-height:44px; padding:9px 17px; flex:none; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--olive); font-size:13px; font-weight:700; transition:background .2s,color .2s,transform .2s; }
.category-chip.active { border-color:var(--olive); background:var(--olive); color:white; }
.category-chip:active,.quantity-control button:active { transform:scale(.93); }
.product-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.product-card { min-width:0; min-height:160px; display:flex; overflow:hidden; border:1px solid var(--line); border-radius:17px; background:var(--paper); box-shadow:0 5px 18px #342b2007; }
.product-info { min-width:0; width:100%; padding:17px 18px 15px; display:flex; flex-direction:column; }
.product-category { color:var(--rust); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.product-info h3 { margin:7px 0 4px; font:400 25px/1.08 var(--display); overflow-wrap:anywhere; }
.product-info p { margin:0; color:var(--muted); font-size:12px; line-height:1.4; }
.product-bottom { margin-top:auto; padding-top:16px; display:flex; align-items:end; justify-content:space-between; gap:8px; }
.product-bottom > span { min-width:0; display:grid; }
.product-bottom small { color:var(--muted); font-size:11px; }
.product-bottom strong { color:var(--olive); font-size:15px; white-space:nowrap; }
.quantity-control { display:flex; align-items:center; gap:6px; }
.quantity-control button { width:42px; height:42px; display:grid; place-items:center; border:0; border-radius:13px; background:var(--rust); color:white; font-size:22px; line-height:1; transition:transform .15s,background .15s; }
.quantity-control button[data-minus] { background:#f1e7dc; color:var(--rust); }
.quantity-control b { min-width:18px; text-align:center; font-size:14px; }
.empty-state { padding:35px; border:1px dashed var(--line); border-radius:18px; color:var(--muted); text-align:center; }
.button { min-height:50px; padding:12px 18px; border:0; border-radius:13px; font-size:13px; font-weight:700; }
.button-primary { background:var(--rust); color:white; box-shadow:0 8px 20px #b7351527; }
.button-secondary { border:1px solid var(--line); background:white; color:var(--olive); }
.button:disabled { opacity:.55; cursor:wait; }
.cart-bar { position:fixed; z-index:5; right:0; bottom:0; left:0; padding:12px max(18px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--line); background:var(--paper); box-shadow:0 -10px 35px #342b2015; }
.cart-bar > span { display:grid; }
.cart-bar small { color:var(--muted); font-size:11px; }
.cart-bar strong { color:var(--olive); font-size:20px; }
.cart-dialog { width:min(500px,calc(100% - 20px)); max-height:calc(100dvh - 28px); padding:24px; border:1px solid var(--line); border-radius:23px; background:var(--paper); color:var(--ink); box-shadow:0 25px 70px #2a211b40; overflow:auto; }
.cart-dialog::backdrop { background:#1f241eb0; backdrop-filter:blur(3px); }
.dialog-head { display:flex; justify-content:space-between; align-items:start; gap:12px; }
.dialog-head h2 { font-size:38px; }
.close-button { width:42px; height:42px; flex:none; border:1px solid var(--line); border-radius:50%; background:white; color:var(--rust); font-size:26px; line-height:1; }
.cart-items { margin:18px 0; border-top:1px solid var(--line); }
.cart-line { padding:11px 0; display:flex; align-items:center; justify-content:space-between; gap:15px; border-bottom:1px solid var(--line); }
.cart-line span { min-width:0; display:grid; }
.cart-line small { color:var(--muted); }
.cart-line b { white-space:nowrap; color:var(--olive); }
#cartForm { display:grid; gap:15px; }
.order-context-step > h3,.offsite-notice > h3,.order-details-step > h3 { margin:0; font:400 27px/1.1 var(--display); letter-spacing:-.025em; }
.order-context-step > p:not(.eyebrow),.offsite-notice > p:not(.eyebrow) { margin:7px 0 15px; color:var(--muted); font-size:12px; }
.location-options { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.location-option { min-height:88px; padding:14px; display:grid; align-content:center; gap:4px; border:1px solid var(--line); border-radius:13px; background:white; color:var(--ink); text-align:left; transition:border-color .16s,background .16s,transform .16s; }
.location-option:hover { border-color:#bd9a73; background:#fffcf6; transform:translateY(-1px); }
.location-option strong { color:var(--olive); font-size:13px; }
.location-option span { color:var(--muted); font-size:11px; line-height:1.35; }
.offsite-notice { padding:4px 0; }
.offsite-notice .button { margin-top:2px; }
.back-link { margin:0 0 12px; padding:0; border:0; background:none; color:var(--muted); font-size:12px; font-weight:700; }
.back-link:hover { color:var(--rust); }
.service-mode-field { min-width:0; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; border:0; }
.service-mode-field legend { width:100%; margin-bottom:1px; font-size:12px; font-weight:700; }
.service-mode-option { position:relative; cursor:pointer; }
.service-mode-option input { position:absolute; width:1px; height:1px; opacity:0; }
.service-mode-option span { min-height:40px; padding:9px 13px; display:flex; align-items:center; border:1px solid var(--line); border-radius:999px; background:white; color:var(--olive); font-size:12px; font-weight:700; }
.service-mode-option input:checked + span { border-color:var(--olive); background:var(--olive); color:white; }
.service-mode-option input:focus-visible + span { outline:3px solid #b7351580; outline-offset:3px; }
.field { display:grid; gap:5px; }
.field span { font-size:12px; font-weight:700; }
.field small { color:var(--muted); font-weight:400; }
.field input,.field textarea { width:100%; min-height:45px; padding:11px 13px; border:1px solid #d8cbbb; border-radius:11px; background:white; color:var(--ink); }
.field textarea { resize:vertical; }
.dialog-total { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dialog-total strong { font-size:23px; color:var(--olive); }
.approval-note { margin:0; padding:11px 13px; border-radius:10px; background:var(--olive-soft); color:var(--olive); font-size:12px; }
.form-error { margin:0; color:var(--rust); font-size:12px; }
.submit-button { width:100%; }
.success-section { max-width:660px; margin:50px auto; padding:clamp(28px,5vw,55px); border:1px solid var(--line); border-radius:24px; background:var(--paper); text-align:center; box-shadow:0 10px 32px #342b2010; }
.success-icon { width:66px; height:66px; margin:0 auto 20px; display:grid; place-items:center; border-radius:50%; background:var(--olive-soft); color:var(--olive); font-size:33px; }
.success-section.is-refused .success-icon { background:#fff0e7; color:var(--rust); }
.success-section h2 { font-size:45px; }
.success-section > p:not(.eyebrow) { color:var(--muted); }
.success-section strong { color:var(--ink); }
.reference { display: inline-block; margin: 12px 0; padding: 10px 16px; border: 1px solid #cbd4ae; border-radius: 12px; background: #f1f3e7; color: #46551d; font-size: 19px; font-weight: 700; letter-spacing: .02em; }
.page-footnote { margin:45px 0; color:var(--muted); font-size:11px; text-align:center; }
.toast { position:fixed; z-index:10; right:18px; bottom:100px; left:18px; max-width:430px; margin:auto; padding:13px 16px; border-radius:12px; background:var(--ink); color:white; text-align:center; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .2s,transform .2s; }
.toast.visible { opacity:1; transform:translateY(0); }
.theme-house { --canvas:#f1f3e9; --paper:#fffef9; --ink:#28331f; --muted:#66705b; --line:#d9dfcf; --olive-soft:#e6eddb; }
.theme-house button:focus-visible,.theme-house a:focus-visible,.theme-house input:focus-visible,.theme-house textarea:focus-visible { outline-color:#6e873d9c; }
.theme-house .table-badge { border-color:#b5c59c; background:#e3ebd4; color:#3c5222; }
.theme-house .intro { position:relative; isolation:isolate; overflow:hidden; border-color:#bdcda9; background:linear-gradient(120deg,#e8eddf 0%,#dbe6cf 100%); }
.theme-house .intro::after { content:""; position:absolute; z-index:-1; right:-70px; bottom:-165px; width:360px; height:430px; border:23px solid #c7d6b67a; border-bottom:0; border-radius:190px 190px 0 0; transform:rotate(-17deg); pointer-events:none; }
.theme-house .intro-copy { position:relative; z-index:1; }
.theme-house .intro .eyebrow,.theme-house .section-head .eyebrow,.theme-house .product-category { color:#4d652b; }
.theme-house .intro h1 { max-width:720px; color:#304322; }
.theme-house .intro p:not(.eyebrow) { color:#475541; }
.theme-house .intro-link { color:#3e5a28; }
.theme-house .intro-link span { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:#cbdab8; }
.theme-house .category-chip.active { border-color:#3f582a; background:#3f582a; }
.theme-house .quantity-control button:not([data-minus]),.theme-house .button-primary { background:#4b612e; color:white; }
.theme-house .quantity-control button[data-minus] { background:#e8eddf; color:#40572a; }
.theme-house .button-primary { box-shadow:0 8px 20px #394f2b29; }
.theme-house .approval-note { background:#e8efde; color:#394f2b; }
.theme-house .cart-bar { border-top-color:#cbd7bc; }
.theme-house .reference { border-color:#abc197; background:#edf3e6; color:#344d24; }
@media (max-width:800px) { .product-list { grid-template-columns:1fr; } }
@media (max-width:500px) { .site-header { height:68px; padding:0 17px; } .site-header img { width:145px; } .page { padding-inline:12px; } .intro { min-height:245px; padding:27px 22px; border-radius:18px; } .intro h1 { max-width:300px; font-size:43px; } .intro p:not(.eyebrow) { max-width:330px; font-size:13px; } .menu-section { margin-top:30px; } .section-head { padding-inline:5px; } .section-head h2 { font-size:37px; } .product-list { gap:10px; } .product-card { min-height:145px; border-radius:15px; } .product-info { padding:13px 13px 12px; } .product-info h3 { font-size:21px; } .product-info p { font-size:11px; } .product-bottom { padding-top:8px; } .quantity-control { gap:3px; } .quantity-control button { width:38px; height:38px; border-radius:11px; } .cart-bar .button { min-width:166px; } .cart-dialog { padding:20px 17px; } .location-options { grid-template-columns:1fr; } .location-option { min-height:70px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; } }
