:root { --cream:#f7f1e8; --paper:#fffdf9; --ink:#2c241f; --brown:#543c2f; --orange:#c66f3d; --sage:#a6ad8e; --line:#ded3c5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
body.drawer-open { overflow:hidden; }
button, a { font:inherit; } a { color:inherit; text-decoration:none; } button { color:inherit; }
.is-hidden { display:none !important; }
.announcement { height:36px; background:var(--brown); color:#fff8ec; position:relative; overflow:hidden; font-size:12px; letter-spacing:.07em; }
.announcement-track { position:absolute; top:0; left:0; height:36px; display:flex; align-items:center; width:max-content; white-space:nowrap; animation:announcement-pass 12s linear infinite; will-change:transform; }
@keyframes announcement-pass { from { transform:translateX(-100%); } to { transform:translateX(100vw); } }
.site-header { height:86px; max-width:1240px; margin:auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand,.footer-brand { display:flex; align-items:center; gap:12px; }
.brand-logo { width:54px; height:54px; border-radius:50%; object-fit:cover; }
.brand-words,.footer-brand>div { display:flex; flex-direction:column; }
.brand-words strong,.footer-brand strong { font-family:Georgia,serif; font-size:21px; }
.brand-words small,.footer-brand small { font-size:9px; text-transform:uppercase; letter-spacing:.14em; color:#76685d; }
nav { display:flex; gap:34px; font-size:14px; } nav a { border-bottom:1px solid transparent; padding:8px 0; } nav a:hover { border-color:var(--orange); }
nav a[aria-current="page"] { color:var(--orange); border-color:var(--orange); }
.cart-button { border:0; background:transparent; display:flex; align-items:center; gap:8px; cursor:pointer; }
.cart-button b { min-width:22px; height:22px; border-radius:50%; background:var(--orange); color:#fff; display:grid; place-items:center; font-size:11px; }
.hero { min-height:650px; position:relative; background:var(--cream); overflow:hidden; }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(247,241,232,.99) 0%,rgba(247,241,232,.94) 30%,rgba(247,241,232,.58) 46%,rgba(247,241,232,.08) 68%,transparent 82%); }
.hero-copy { position:relative; z-index:2; min-height:650px; max-width:680px; padding:90px 40px 75px max(calc((100vw - 1180px)/2),32px); display:flex; flex-direction:column; justify-content:center; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; text-transform:uppercase; letter-spacing:.17em; font-size:11px; font-weight:700; color:var(--orange); }
.hero h1 { margin:22px 0 24px; font-family:Georgia,serif; font-size:clamp(55px,6vw,88px); line-height:.95; letter-spacing:-.045em; font-weight:500; }
.hero h1 em { color:var(--orange); font-weight:400; }
.hero-copy>p { max-width:540px; font-family:Georgia,serif; font-size:19px; line-height:1.7; color:#6c5f55; }
.hero-actions { display:flex; align-items:center; gap:26px; margin-top:34px; flex-wrap:wrap; }
.button { min-height:49px; padding:0 22px; border:0; display:inline-flex; align-items:center; justify-content:center; gap:12px; cursor:pointer; font-size:13px; font-weight:700; }
.button.primary { background:var(--brown); color:#fff; } .button.primary:hover { background:#39271f; } .button.light { background:#fffaf1; color:var(--brown); }
.text-link { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; border-bottom:1px solid var(--ink); padding:8px 0; }
.benefits { max-width:1180px; margin:0 auto; min-height:120px; display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line); }
.benefits>div { display:flex; align-items:center; justify-content:center; gap:16px; padding:25px; border-right:1px solid var(--line); } .benefits>div:last-child { border:0; }
.benefit-icon { color:var(--orange); font-size:24px; line-height:1; } .benefits span { display:flex; flex-direction:column; gap:4px; } .benefits strong { font-family:Georgia,serif; font-size:15px; } .benefits small { color:#85776b; font-size:11px; }
.shop-section { max-width:1180px; margin:0 auto; padding:100px 0 120px; }
.shop-page-hero { background:var(--cream); border-top:1px solid #eee4d7; }
.shop-page-hero-inner { max-width:1180px; margin:0 auto; padding:78px 0 72px; display:grid; grid-template-columns:1.25fr .75fr; gap:90px; align-items:center; }
.shop-page-hero h1 { margin:16px 0 20px; font-family:Georgia,serif; font-size:clamp(48px,6vw,76px); line-height:.98; letter-spacing:-.045em; font-weight:500; }
.shop-page-hero p { max-width:650px; margin:0; color:#74665c; font-family:Georgia,serif; font-size:18px; line-height:1.7; }
.shop-page-note { padding:28px; background:#fffaf3; border:1px solid var(--line); }
.shop-page-note strong { display:block; margin-bottom:14px; font-family:Georgia,serif; font-size:19px; font-weight:500; }
.shop-page-note span { display:flex; align-items:center; gap:10px; margin:10px 0; color:#6d6056; font-size:11px; line-height:1.5; }
.shop-page-note b { flex:0 0 22px; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:var(--brown); color:#fff; font-size:9px; }
.shop-catalogue { padding-top:78px; }
.section-heading { display:grid; grid-template-columns:1.2fr .8fr; gap:70px; align-items:end; margin-bottom:44px; }
.section-heading h2,.custom-section h2,.story-copy h2 { font-family:Georgia,serif; font-size:clamp(35px,4vw,54px); line-height:1.04; font-weight:500; letter-spacing:-.035em; margin:14px 0 0; }
.section-heading p,.custom-section p,.story-copy p { color:#74665c; line-height:1.8; font-size:14px; margin:0; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.empty-catalogue { grid-column:1/-1; padding:55px 28px; background:var(--cream); text-align:center; }
.empty-catalogue h3 { margin:0 0 10px; font-family:Georgia,serif; font-size:24px; font-weight:500; }
.empty-catalogue p { margin:0; color:#74665c; font-size:13px; }
.product-card { border:1px solid var(--line); background:#fff; overflow:hidden; transition:.25s ease; } .product-card:hover { transform:translateY(-4px); box-shadow:0 20px 45px #4e382311; }
.product-art { height:330px; position:relative; overflow:hidden; background:var(--cream); } .product-art img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; } .product-card:hover .product-art img { transform:scale(1.025); }
.product-art.fit-contain img { object-fit:contain; padding:10px; }
.gallery-arrow { position:absolute; z-index:5; top:50%; width:34px; height:42px; transform:translateY(-50%); border:0; background:#fffdf0e6; color:var(--brown); display:grid; place-items:center; font-size:25px; line-height:1; cursor:pointer; box-shadow:0 5px 18px #2c241f20; }
.gallery-prev { left:10px; } .gallery-next { right:10px; }
.gallery-dots { position:absolute; z-index:5; left:50%; bottom:12px; transform:translateX(-50%); display:flex; gap:6px; padding:7px 9px; background:#fffdf0db; border-radius:20px; }
.gallery-dots button { width:7px; height:7px; padding:0; border:0; border-radius:50%; background:#b7aa9d; cursor:pointer; }
.gallery-dots button[aria-current="true"] { background:var(--orange); }
.personal-badge { position:absolute; z-index:4; top:16px; left:16px; background:#fffaf1; padding:8px 10px; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.product-info { padding:24px; } .product-info>small { color:var(--orange); text-transform:uppercase; letter-spacing:.12em; font-size:9px; }
.product-info h3 { font-family:Georgia,serif; font-size:21px; font-weight:500; margin:10px 0; } .product-info p { color:#796d63; line-height:1.6; font-size:12px; min-height:38px; }
.product-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:20px; } .product-bottom>strong { font-family:Georgia,serif; font-size:18px; }
.product-bottom button { border:0; background:transparent; font-size:11px; font-weight:700; cursor:pointer; } .product-bottom button span { display:inline-grid; place-items:center; width:24px; height:24px; margin-left:7px; background:var(--brown); color:#fff; border-radius:50%; }
.custom-section { background:var(--brown); color:#fff9ef; padding:86px max(calc((100vw - 1180px)/2),32px); display:flex; justify-content:center; text-align:center; }
.custom-content { width:min(720px,100%); display:flex; flex-direction:column; align-items:center; }
.custom-section .eyebrow { color:#e7a879; } .custom-section h2 { margin-bottom:24px; } .custom-section p { color:#ded0c4; margin-bottom:28px; max-width:650px; }
.story-section { max-width:1180px; margin:110px auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:center; }
.story-card { min-height:430px; background:var(--cream); display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--brown); font-family:Georgia,serif; text-align:center; gap:25px; position:relative; }
.story-card:after { content:""; position:absolute; inset:18px; border:1px solid #bda890; } .story-jt { font-size:100px; font-weight:bold; letter-spacing:-.1em; line-height:.8; }
.story-card>span:last-child { font-size:18px; line-height:1.5; font-style:italic; } .story-copy p { margin:25px 0 18px; } .story-copy .text-link { color:var(--orange); border-color:var(--orange); }
footer { background:#f0e8dc; padding:65px max(calc((100vw - 1180px)/2),32px) 30px; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:50px; }
footer>div:not(.footer-brand) { display:flex; flex-direction:column; gap:13px; font-size:12px; color:#76685d; } footer>div>strong { color:var(--ink); margin-bottom:7px; } footer p { grid-column:1/-1; padding-top:30px; border-top:1px solid var(--line); font-size:10px; color:#8b7e72; }
.drawer-shell { position:fixed; inset:0; z-index:50; background:#21181199; display:flex; justify-content:flex-end; }
.cart-drawer { width:min(470px,100%); height:100%; background:var(--paper); display:flex; flex-direction:column; box-shadow:-20px 0 70px #0002; }
.drawer-head { padding:30px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; } .drawer-head small { text-transform:uppercase; color:var(--orange); letter-spacing:.15em; font-size:9px; } .drawer-head h2 { font-family:Georgia,serif; margin:6px 0 0; font-size:31px; } .drawer-head button { border:0; background:transparent; font-size:30px; cursor:pointer; }
.cart-view { flex:1; min-height:0; display:flex; flex-direction:column; }
.cart-items { flex:1; overflow:auto; padding:14px 30px; } .cart-item { display:grid; grid-template-columns:78px 1fr 25px; gap:15px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }
.cart-thumb { width:78px; height:78px; overflow:hidden; background:var(--cream); }
.cart-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.cart-item-details { min-width:0; display:flex; flex-direction:column; gap:5px; } .cart-item strong { font-family:Georgia,serif; font-size:14px; line-height:1.25; } .cart-item small { font-size:9px; line-height:1.4; color:#83756a; } .cart-item b { font-size:12px; white-space:nowrap; } .cart-item>button { border:0; background:transparent; cursor:pointer; color:#9a8a7e; font-size:20px; }
.cart-line { margin-top:5px; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.cart-line label { display:flex; flex-direction:column; gap:3px; color:#83756a; font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.cart-line input { width:58px; height:31px; border:1px solid var(--line); background:#fff; color:var(--ink); padding:4px 6px; text-align:center; font-size:11px; }
.drawer-bottom { border-top:1px solid var(--line); padding:22px 30px; background:#f8f2ea; } .cart-total { display:flex; justify-content:space-between; font-family:Georgia,serif; margin-bottom:15px; } .cart-total strong { font-size:21px; }
.order-flow { display:flex; align-items:center; gap:10px; color:#65594f; font-size:10px; margin:8px 0; } .order-flow span { width:21px; height:21px; display:grid; place-items:center; background:#e5d7c7; border-radius:50%; color:var(--brown); font-weight:bold; }
.drawer-bottom p { color:#75685e; font-size:10px; line-height:1.6; } .button.full { width:100%; margin:8px 0; } .secure-note { display:block; text-align:center; color:#807166; font-size:9px; }
.empty-cart { text-align:center; padding:70px 10px; } .empty-cart-icon { display:block; color:var(--orange); font-size:34px; } .empty-cart h3 { font-family:Georgia,serif; font-size:21px; } .empty-cart p { color:#7f7268; font-size:12px; margin-bottom:22px; }
.checkout-view { flex:1; overflow-y:auto; padding:24px 30px 35px; }
.checkout-back { border:0; background:transparent; padding:0; color:var(--orange); font-size:11px; font-weight:700; cursor:pointer; }
.checkout-summary { margin:20px 0 14px; padding:16px 18px; background:var(--cream); display:flex; justify-content:space-between; align-items:center; font-family:Georgia,serif; }
.checkout-summary span { font-size:13px; } .checkout-summary strong { font-size:20px; }
.checkout-intro { margin:0 0 20px; color:#74665c; font-size:11px; line-height:1.6; }
.order-form { display:flex; flex-direction:column; gap:13px; }
.bot-field { position:absolute; overflow:hidden; clip:rect(0 0 0 0); width:1px; height:1px; margin:-1px; padding:0; border:0; }
.order-form label { display:flex; flex-direction:column; gap:6px; font-size:10px; font-weight:700; color:#55493f; }
.order-form label>span { color:#96877b; font-weight:400; }
.order-form input,.order-form textarea { width:100%; border:1px solid var(--line); background:#fff; padding:12px 13px; border-radius:0; color:var(--ink); font-size:12px; outline:none; resize:vertical; }
.order-form input:focus,.order-form textarea:focus { border-color:var(--orange); box-shadow:0 0 0 3px #c66f3d18; }
.form-row { display:grid; grid-template-columns:.7fr 1.3fr; gap:12px; }
.order-honey { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; }
.submit-order:disabled { cursor:wait; opacity:.7; }
.form-note { display:block; text-align:center; color:#807166; font-size:9px; line-height:1.5; }
.form-error { margin:0; padding:10px 12px; background:#fff0eb; color:#9a3f2f; font-size:10px; line-height:1.5; }
.order-success { margin:auto; padding:60px 38px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.success-mark { width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:#e6eadb; color:#59634b; font-size:24px; margin-bottom:18px; }
.order-success>small { color:var(--orange); text-transform:uppercase; letter-spacing:.12em; font-size:9px; }
.order-success h3 { font-family:Georgia,serif; font-size:27px; font-weight:500; line-height:1.15; margin:12px 0; }
.order-success p { color:#74665c; font-size:12px; line-height:1.7; margin:0 0 24px; }
.legal-page { min-height:100vh; background:var(--paper); }
.legal-header { min-height:86px; padding:14px max(calc((100vw - 980px)/2),28px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:#fff; }
.legal-header .brand { display:flex; } .legal-back { color:var(--orange); font-size:12px; font-weight:700; }
.legal-hero { padding:80px max(calc((100vw - 880px)/2),28px) 45px; background:var(--cream); }
.legal-hero h1 { margin:14px 0 12px; font-family:Georgia,serif; font-weight:500; font-size:clamp(42px,6vw,68px); letter-spacing:-.04em; }
.legal-hero p { margin:0; max-width:680px; color:#74665c; line-height:1.7; font-size:13px; }
.legal-content { max-width:880px; margin:0 auto; padding:55px 28px 90px; }
.legal-content section { padding:0 0 30px; margin:0 0 30px; border-bottom:1px solid var(--line); }
.legal-content section:last-child { border:0; margin-bottom:0; }
.legal-content h2 { margin:0 0 12px; font-family:Georgia,serif; font-weight:500; font-size:24px; }
.legal-content p,.legal-content li { color:#65594f; font-size:13px; line-height:1.75; }
.legal-content ul { padding-left:20px; margin:10px 0; } .legal-content a { color:var(--orange); text-decoration:underline; text-underline-offset:3px; }
.legal-footer { padding:30px 28px; background:#f0e8dc; text-align:center; color:#83756a; font-size:11px; } .legal-footer a { color:var(--orange); }
.toast { position:fixed; z-index:60; bottom:25px; left:50%; transform:translateX(-50%); background:var(--brown); color:#fff; padding:13px 20px; box-shadow:0 12px 30px #0002; font-size:12px; }
@media (max-width:900px) { nav { display:none; } .hero { min-height:720px; } .hero-image { object-position:67% center; } .hero-shade { background:linear-gradient(180deg,rgba(247,241,232,.99) 0%,rgba(247,241,232,.94) 43%,rgba(247,241,232,.58) 62%,rgba(247,241,232,.08) 100%); } .hero-copy { min-height:720px; max-width:620px; padding:62px 28px 270px; justify-content:flex-start; } .shop-page-hero-inner { padding:60px 28px; grid-template-columns:1fr; gap:32px; } .benefits { grid-template-columns:1fr; } .benefits>div { border-right:0; border-bottom:1px solid var(--line); justify-content:flex-start; } .shop-section { padding:75px 24px; } .section-heading { grid-template-columns:1fr; gap:20px; } .product-grid { grid-template-columns:repeat(2,1fr); } .custom-section { padding:65px 28px; } .story-section { margin:75px 24px; grid-template-columns:1fr; gap:45px; } footer { grid-template-columns:1fr 1fr; } .footer-brand { grid-column:1/-1; } }
@media (max-width:560px) { .site-header { height:74px; padding:0 17px; } .brand-logo { width:46px; height:46px; } .brand-words small { display:none; } .cart-button span { display:inline; font-size:11px; } .hero { min-height:690px; } .hero h1 { font-size:52px; } .hero-copy { min-height:690px; padding:50px 22px 260px; } .hero-copy>p { font-size:16px; line-height:1.55; } .hero-actions { gap:15px; margin-top:22px; } .product-grid { grid-template-columns:1fr; } .product-art { height:320px; } .story-card { min-height:330px; } footer { grid-template-columns:1fr; } .footer-brand { grid-column:auto; } }
@media (max-width:400px) { .checkout-view { padding-inline:20px; } .form-row { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .product-card { transition:none; } .announcement { display:flex; justify-content:center; } .announcement-track { position:static; animation:none; } }
