:root { color-scheme: light; --ink:#17201d; --muted:#68716d; --cream:#f7f4ed; --gold:#9b7842; --line:#ddd7cb; --white:#fff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:linear-gradient(145deg,#f4f0e7,#fbfaf7 48%,#eee8dc); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
.shell { width:min(1100px,calc(100% - 32px)); margin:0 auto; padding:54px 0; display:grid; grid-template-columns:minmax(260px,.7fr) minmax(420px,1.3fr); gap:56px; align-items:start; }
.masthead { position:sticky; top:54px; padding:32px 0; }
.eyebrow { color:var(--gold); font-size:.72rem; font-weight:750; letter-spacing:.16em; }
h1 { margin:.3em 0; font-family:Georgia,serif; font-size:clamp(2.5rem,5vw,4.8rem); line-height:.98; font-weight:400; }
.masthead>p:last-child { color:var(--muted); line-height:1.7; max-width:40ch; }
.chat { background:rgba(255,255,255,.88); border:1px solid rgba(155,120,66,.2); border-radius:0; box-shadow:0 24px 70px rgba(45,38,25,.12); overflow:hidden; backdrop-filter:blur(16px); }
.messages { min-height:480px; max-height:68vh; overflow-y:auto; padding:28px; display:flex; flex-direction:column; gap:16px; }
.bubble { flex:0 0 auto; max-width:82%; padding:13px 17px; border-radius:18px; line-height:1.5; }
.bubble p { margin:0; }
.assistant { align-self:flex-start; background:var(--cream); border-bottom-left-radius:5px; }
.user { align-self:flex-end; color:#fff; background:var(--ink); border-bottom-right-radius:5px; }
.loading { color:var(--muted); animation:pulse 1.2s infinite alternate; }
@keyframes pulse { to { opacity:.45; } }
.suggestions { padding:0 28px 18px; display:flex; gap:8px; flex-wrap:wrap; }
.suggestions button { border:1px solid var(--line); border-radius:999px; background:#fff; padding:9px 12px; color:var(--ink); cursor:pointer; }
.composer { margin:0 18px; padding:8px; border:1px solid var(--line); border-radius:16px; display:flex; align-items:end; gap:8px; background:#fff; }
textarea { flex:1; border:0; outline:0; resize:none; padding:10px; font:inherit; min-height:42px; }
.composer button,.product-link { border:0; border-radius:11px; background:var(--gold); color:#fff; font-weight:700; padding:12px 17px; cursor:pointer; text-decoration:none; }
.composer button:disabled { opacity:.5; }
.disclaimer { padding:8px 28px 18px; font-size:.72rem; color:var(--muted); }
.product-carousel { flex:0 0 auto; width:100%; min-width:0; background:#fff; border:0; border-radius:0; padding:18px 0 10px; }
.carousel-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 2px 14px; }
.carousel-heading>p { margin:0; color:var(--ink); font-size:.78rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
.carousel-controls { display:flex; gap:6px; }
.carousel-controls button { width:34px; height:34px; border:1px solid var(--line); border-radius:0; background:#fff; color:var(--ink); cursor:pointer; font-size:1.1rem; }
.carousel-track { display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:12px; cursor:grab; user-select:none; }
.carousel-track::-webkit-scrollbar { display:none; }
.carousel-track.is-dragging { cursor:grabbing; scroll-snap-type:none; }
.product-card { flex:0 0 42%; min-width:230px; scroll-snap-align:start; display:grid; grid-template-rows:auto 1fr; box-sizing:border-box; border:1px solid #dddddd; border-radius:0; overflow:hidden; background:#fff; font-size:14px; }
.product-image-link { display:block; width:100%; aspect-ratio:1/1; background:#fff; }
.product-image { display:block; width:100%; height:100%; object-fit:contain; background:#fff; }
.product-content { display:grid; grid-template-rows:1fr auto auto 18px; padding:10px; }
.product-name-link { color:inherit; text-decoration:none; }
.product-name-link:hover { text-decoration:underline; text-underline-offset:3px; }
.product-name { margin:0 0 12px; font-family:Arial,sans-serif; font-size:14px; line-height:1.7; font-weight:400; }
.product-selection { margin:-6px 0 10px; color:var(--muted); font-size:12px; font-style:italic; line-height:1.45; }
.product-selection:empty { display:none; }
.product-price { margin:0 0 8px; padding-right:10px; font-weight:400; font-size:14px; }
.product-rating { min-height:1.2em; margin:0; color:var(--muted); font-size:.76rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:800px) { .shell { grid-template-columns:1fr; padding:20px 0; gap:18px; } .masthead { position:static; padding:8px; } h1 { font-size:2.8rem; } .messages { max-height:none; min-height:420px; } }
@media (max-width:560px) { .shell { width:100%; padding:0; } .masthead { padding:24px 20px; } .chat { border-radius:0; } .messages { padding:18px; } .product-card { flex-basis:82%; min-width:250px; } }