:root { --ink:#26362d; --green:#536b5a; --green-dark:#30483b; --sage:#e8ede4; --cream:#f8f4ed; --paper:#fffdf9; --rose:#c9817c; --line:#d9ded4; --muted:#718078; --danger:#9f3e42; }
* { box-sizing: border-box; }
small { font-size: 14px; }
html { min-width:320px; min-height:100%; background:var(--cream); }
body { margin:0; color:var(--ink); font-family:Arial,sans-serif; }
[hidden] { display:none !important; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
button { cursor:pointer; border:0; border-radius:10px; background:var(--green-dark); color:#fff; padding:12px 18px; font-weight:700; }
header { display:flex; align-items:center; justify-content:space-between; height:108px; padding:0 clamp(20px,6vw,90px); border-bottom:1px solid var(--line); background:rgba(255,253,249,.86); }
header img { width:185px; height:85px; object-fit:contain; }
header nav { display:flex; gap:30px; font-size:14px; }
main { padding:clamp(55px,8vw,110px) clamp(20px,7vw,110px); }
.eyebrow { margin:0 0 9px; color:var(--rose); font-size:14px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
h1,h2 { margin:0; font-family:Georgia,serif; font-weight:400; }
.login-state { min-height:55vh; display:grid; align-content:center; justify-items:center; text-align:center; }
.login-state h1 { font-size:clamp(46px,7vw,78px); line-height:.98; }
.login-state h1 em { color:var(--green); font-weight:400; }
.login-state > p:not(.eyebrow) { max-width:570px; margin:26px 0; color:var(--muted); line-height:1.7; }
[data-google-button] { min-height:44px; display:grid; justify-content:center; }
.google-login-disabled { opacity:.42; filter:grayscale(1); pointer-events:none; }
.auth-shell { width:min(480px,100%); margin-top:4px; border:1px solid var(--line); border-radius:18px; background:var(--paper); padding:clamp(22px,4vw,34px); box-shadow:0 12px 38px rgba(38,54,45,.07); }
.auth-pane h2 { margin-bottom:10px; font-size:30px; }
.auth-pane > p { margin:0 0 20px; color:var(--muted); line-height:1.55; }
.auth-form { display:grid; text-align:left; }
.auth-form label { margin-bottom:14px; }
.auth-form label small { color:var(--muted); font-weight:400; }
.auth-form label small.field-error { color:#9f3e42; font-weight:700; }
.auth-form > button { width:100%; margin-top:4px; }
.captcha-field { margin:2px 0 16px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--cream); }
.captcha-label { display:block; margin-bottom:9px; color:var(--green-dark); font-size:14px; font-weight:700; }
.captcha-challenge { display:flex; align-items:stretch; gap:8px; margin-bottom:12px; }
.captcha-challenge img { width:min(230px, calc(100% - 50px)); min-height:66px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.captcha-challenge button { width:44px; padding:8px; font-size:23px; }
.captcha-field label { margin-bottom:0; }
.captcha-field input { text-transform:uppercase; letter-spacing:.12em; }
.auth-links { display:flex; justify-content:space-between; gap:15px; margin-top:14px; }
.auth-links button,.auth-text-button { padding:5px 0; background:transparent; color:var(--green-dark); text-decoration:underline; font-size:14px; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--muted); font-size:13px; text-transform:uppercase; }
.auth-divider::before,.auth-divider::after { content:""; flex:1; height:1px; background:var(--line); }
.auth-pane .terms-consent { margin:0 0 14px; }
.auth-pane [data-google-button] { margin:auto; }
.auth-pane > .auth-text-button { margin-top:14px; }
.terms-consent { display:flex; align-items:flex-start; gap:9px; max-width:560px; margin:0 0 14px; text-align:left; font-size:14px; line-height:1.55; }
.terms-consent input { width:auto; margin-top:2px; }
.terms-consent a { color:var(--green-dark); text-decoration:underline; }
.service-area-note { margin:0 0 16px !important; color:var(--rose) !important; font-size:14px; font-weight:700; }
.message { min-height:18px; color:var(--danger); font-size:14px; }
.account-heading { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:38px; }
.account-heading h1 { font-size:clamp(44px,6vw,72px); }
.secondary { background:var(--sage); color:var(--green-dark); }
.account-tabs { display:flex; gap:8px; margin:0 0 22px; border-bottom:1px solid var(--line); }
.account-tab { border-radius:10px 10px 0 0; background:transparent; color:var(--muted); padding:13px 18px; }
.account-tab.active { background:var(--green-dark); color:#fff; }
.tab-panel { width:100%; }
.account-grid { display:grid; grid-template-columns:minmax(330px,.8fr) minmax(430px,1.2fr); gap:22px; }
.card { border:1px solid var(--line); border-radius:18px; background:var(--paper); padding:clamp(24px,4vw,45px); box-shadow:0 8px 30px rgba(38,54,45,.05); }
.card h2 { font-size:32px; }
.profile-intro { display:flex; align-items:center; gap:17px; margin-bottom:35px; }
.profile-intro img { width:64px; height:64px; border-radius:50%; object-fit:cover; background:var(--sage); }
.profile-intro p:last-child { margin:6px 0 0; color:var(--muted); font-size:14px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
label { display:grid; gap:7px; margin-bottom:17px; color:var(--green-dark); font-size:14px; font-weight:700; }
label.wide { grid-column:1/-1; }
input,textarea { width:100%; border:1px solid var(--line); border-radius:9px; padding:12px; color:var(--ink); outline:none; resize:vertical; }
input:focus,textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(83,107,90,.12); }
.password-field { position:relative; display:block; }
.password-field input { padding-right:48px; }
.password-toggle { position:absolute; top:50%; right:5px; width:38px; height:38px; margin:0; padding:8px; border-radius:8px; background:transparent; color:var(--green-dark); transform:translateY(-50%); }
.password-toggle:hover { background:var(--sage); }
.password-toggle:focus-visible { outline:2px solid var(--green-dark); outline-offset:1px; }
.password-toggle svg { display:block; width:22px; height:22px; fill:currentColor; }
.privacy-note { color:var(--muted); font-size:14px; line-height:1.6; }
.profile-card > button { width:100%; }
.orders-card > div:first-child { margin-bottom:25px; }
.order { padding:18px 0; border-top:1px solid var(--line); }
.order:first-child { border-top:0; }
.order-head { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.order h3 { margin:0; font-family:Georgia,serif; font-size:18px; font-weight:400; }
.order p { margin:7px 0 0; color:var(--muted); font-size:14px; }
.order-products { display:grid; gap:5px; margin-top:13px; color:var(--muted); font-size:14px; }
.order-products span { display:flex; justify-content:space-between; gap:15px; }
.order-values { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:13px 0; }
.order-values div { border-radius:9px; background:var(--cream); padding:10px; }
.order-values dt { color:var(--muted); font-size:14px; text-transform:uppercase; }
.order-values dd { margin:4px 0 0; font-family:Georgia,serif; font-size:14px; }
.delivery-recipient,.delivery-forecast { display:grid; gap:4px; margin-top:10px; border-left:3px solid var(--green); padding:8px 11px; font-size:14px; }
.delivery-recipient span,.delivery-recipient small,.delivery-forecast small { color:var(--muted); line-height:1.45; }
.order-timeline { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; margin:16px 0 4px; padding:0; list-style:none; }
.order-timeline li { position:relative; border-top:3px solid var(--line); padding-top:7px; color:var(--muted); font-size:14px; line-height:1.3; }
.order-timeline li.done { border-color:var(--green); color:var(--green-dark); font-weight:700; }
.order-status { border-radius:999px; background:var(--sage); padding:6px 9px; color:var(--green); font-size:14px; font-weight:700; text-transform:uppercase; }
.confirm-order { margin-top:12px; padding:8px 12px; font-size:14px; }
.payment-link { display:inline-block; margin-top:12px; border-radius:9px; background:var(--green-dark); color:#fff; padding:9px 13px; font-size:14px; font-weight:700; }
.tracking-link { display:inline-block; margin-top:12px; border:1px solid var(--green-dark); border-radius:9px; padding:9px 13px; color:var(--green-dark); font-size:14px; font-weight:700; }
.confirm-delivery { display:block; margin-top:10px; background:var(--green-dark); color:#fff; padding:10px 14px; font-size:14px; }
.payment-note { display:block; margin-top:9px; color:var(--rose); font-size:14px; }
.empty { padding:30px 0; color:var(--muted); font-size:14px; }
.addresses-card { grid-column:1/-1; }
.chat-card { grid-column:1/-1; }
.chat-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.chat-presence { border-radius:999px; background:var(--sage); padding:7px 10px; color:var(--green-dark); font-size:14px; font-weight:700; }
.chat-intro { margin:10px 0 22px; color:var(--muted); font-size:14px; line-height:1.6; }
.chat-protocol { display:inline-block; margin:0 0 14px; border-radius:999px; background:var(--sage); padding:8px 12px; color:var(--green-dark); font-size:14px; font-weight:700; }
.chat-messages { height:360px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; border:1px solid var(--line); border-radius:14px; background:var(--cream); padding:18px; }
.chat-bubble { align-self:flex-start; max-width:min(78%,620px); border-radius:5px 14px 14px; background:#fff; padding:11px 13px; box-shadow:0 2px 8px rgba(38,54,45,.05); }
.chat-bubble.customer { align-self:flex-end; border-radius:14px 5px 14px 14px; background:var(--green-dark); color:#fff; }
.chat-bubble p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.5; }
.chat-bubble time { display:block; margin-top:5px; color:var(--muted); font-size:14px; text-align:right; }
.chat-bubble.customer time { color:rgba(255,255,255,.68); }
.chat-attachment { display:block; margin-top:9px; border:1px solid var(--line); border-radius:9px; overflow:hidden; color:var(--green-dark); font-size:14px; font-weight:700; text-decoration:none; }
.chat-attachment img { display:block; width:min(340px,100%); max-height:280px; object-fit:cover; }
.chat-attachment span { display:block; padding:9px 11px; background:#fff; }
.chat-form { margin-top:15px; }
.chat-form label { margin-bottom:7px; }
.chat-form > div { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:8px; }
.chat-form small { color:var(--muted); font-size:14px; }
.chat-close { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:18px; border-top:1px solid var(--line); padding-top:18px; }
.chat-close label { display:flex; align-items:center; gap:9px; margin:0; font-weight:400; }
.chat-close input { width:auto; }
.card-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:20px; }
.address-item { display:grid; grid-template-columns:1fr auto; gap:18px; padding:18px 0; border-top:1px solid var(--line); }
.address-item strong { font-family:Georgia,serif; font-size:17px; font-weight:400; }
.address-item p { color:var(--muted); font-size:14px; line-height:1.6; }
.address-item > div:last-child { display:flex; gap:7px; align-items:start; }
.address-item button { padding:8px 10px; font-size:14px; }
.remove-address { background:#f4e4e4; color:var(--danger); }
dialog { width:min(650px,calc(100% - 24px)); max-height:calc(100dvh - 24px); overflow:auto; border:0; border-radius:18px; padding:28px; color:var(--ink); }
dialog::backdrop { background:rgba(26,39,31,.56); backdrop-filter:blur(3px); }
.dialog-heading { display:flex; align-items:start; justify-content:space-between; margin-bottom:22px; }
.default-address { display:flex; align-items:center; gap:8px; }
.default-address input { width:auto; }
.toast { position:fixed; right:25px; bottom:25px; max-width:360px; border-radius:10px; background:var(--green-dark); color:#fff; padding:14px 18px; box-shadow:0 10px 35px rgba(38,54,45,.22); font-size:14px; }
@media(max-width:850px){.account-grid{grid-template-columns:1fr}.orders-card{min-height:250px}}
@media(max-width:520px){header{height:85px;padding:0 15px}header img{width:140px;height:65px}header nav{gap:15px;font-size:14px}main{padding:50px 15px}.login-state h1{font-size:42px}.auth-shell{padding:20px 16px}.auth-links{align-items:center;flex-direction:column;gap:4px}.account-heading{align-items:flex-start;flex-direction:column}.account-tabs{overflow-x:auto}.account-tab{white-space:nowrap;padding:11px 13px}.form-grid{grid-template-columns:1fr}label.wide{grid-column:auto}.card{padding:23px}.address-item{grid-template-columns:1fr}.address-item>div:last-child{justify-content:flex-start}.order-values{grid-template-columns:1fr}.order-timeline{grid-template-columns:1fr}.order-timeline li{border-top:0;border-left:3px solid var(--line);padding:4px 0 4px 9px}.order-timeline li.done{border-color:var(--green)}.chat-heading{align-items:flex-start;flex-direction:column}.chat-messages{height:320px;padding:12px}.chat-bubble{max-width:90%}.chat-form>div,.chat-close{align-items:stretch;flex-direction:column}.chat-form button,.chat-close button{width:100%}}