:root { --wine:#6d352f; --rust:#bd6044; --cream:#fff9ed; --paper:#fffdf7; --pink:#efc0ac; --green:#314f40; --ink:#2c211d; --muted:#74665f; --line:#e7d9cb; }
* { box-sizing:border-box; }
:focus-visible { outline:3px solid #0b6fbc; outline-offset:3px; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.5; }
button,input,textarea { font:inherit; } a { color:inherit; }
.demo-ribbon { min-height:34px; padding:7px 24px; display:flex; align-items:center; justify-content:center; gap:12px; color:#fff; background:#29221e; font-size:11px; text-align:center; }.demo-ribbon b { color:#ffce67; text-transform:uppercase; letter-spacing:1px; }.demo-ribbon a { margin-left:10px; font-weight:800; }
.shop-header { height:72px; padding:0 max(22px,calc((100vw - 1120px)/2)); display:flex; align-items:center; gap:38px; border-bottom:1px solid var(--line); background:rgba(255,249,237,.94); position:sticky; top:0; z-index:20; backdrop-filter:blur(10px); }.shop-brand { display:flex; align-items:center; gap:9px; text-decoration:none; font-family:Georgia,serif; }.shop-brand span { width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--wine);font-size:10px; }.shop-brand b { font-size:17px; }.shop-header nav { margin-left:auto;display:flex;gap:25px; }.shop-header nav a { text-decoration:none;font-size:12px;font-weight:750; }.cart-button { padding:9px 14px;border:0;border-radius:30px;color:white;background:var(--green);cursor:pointer;font-size:12px;font-weight:800; }.cart-button span { width:20px;height:20px;margin-left:7px;display:inline-grid;place-items:center;border-radius:50%;color:var(--green);background:white;font-size:10px; }
.shop-hero { min-height:610px;max-width:1200px;margin:auto;padding:60px 40px 80px;display:grid;grid-template-columns:1fr .85fr;gap:70px;align-items:center; }.hero-content { padding-left:18px; }.shop-eyebrow { margin:0 0 14px;color:var(--rust);font-size:10px;font-weight:900;letter-spacing:1.5px; }.hero-content h1 { margin:0;font:500 clamp(49px,6vw,83px)/.94 Georgia,serif;letter-spacing:-3px; }.hero-content h1 em { color:var(--rust);font-weight:inherit; }.hero-content>p:not(.shop-eyebrow) { max-width:520px;color:var(--muted);font-size:17px; }.shop-button { display:inline-flex;margin-top:16px;padding:14px 19px;border:0;border-radius:8px;color:#fff;background:var(--wine);font-weight:850;text-decoration:none;cursor:pointer; }.shop-button:hover { background:#512620; }.hero-art { position:relative;min-height:480px;display:grid;place-items:center; }.arch { width:min(370px,90%);height:460px;display:grid;place-items:center;border-radius:190px 190px 15px 15px;background:var(--pink);box-shadow:45px 28px 0 var(--wine); }.cake { width:190px;height:145px;position:relative;border-radius:20px 20px 8px 8px;background:linear-gradient(#fff3dc 0 28%,#8a493b 29% 63%,#fff3dc 64%);filter:drop-shadow(0 20px 12px rgba(70,35,25,.19)); }.cake::after { content:"";position:absolute;width:218px;height:12px;left:-14px;bottom:-12px;border-radius:50%;background:#93604e; }.cake i { position:absolute;width:7px;height:48px;left:50%;top:-49px;background:#eab63e; }.cake i::before { content:"";position:absolute;width:11px;height:16px;left:-2px;top:-9px;border-radius:60% 40%;background:#ff7848; }.cake span { position:absolute;width:34px;height:34px;top:-16px;border-radius:50%;background:#c5635d; }.cake span:nth-of-type(1){left:28px}.cake span:nth-of-type(2){left:77px;background:#e2ad51}.cake span:nth-of-type(3){right:25px;background:#9a504c}.hero-art>p { position:absolute;right:-15px;bottom:19px;padding:15px 18px;border:1px solid var(--wine);border-radius:50%;font:italic 13px Georgia,serif;text-align:center;transform:rotate(7deg);background:var(--cream); }
.quick-facts { padding:22px max(24px,calc((100vw - 1120px)/2));display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line); }.quick-facts div { padding:7px 22px;border-left:1px solid var(--line); }.quick-facts div:first-child { border:0; }.quick-facts b,.quick-facts span { display:block; }.quick-facts b { font:600 16px Georgia,serif; }.quick-facts span { color:var(--muted);font-size:10px; }
.menu-section { max-width:1120px;margin:auto;padding:95px 24px; }.menu-heading { display:grid;grid-template-columns:1fr .8fr;gap:60px;align-items:end; }.menu-heading h2,.how-section h2,.about-section h2 { margin:0;font:500 clamp(39px,4.5vw,61px)/1 Georgia,serif;letter-spacing:-2px; }.menu-heading>p { color:var(--muted);font-size:13px; }.filters { margin:32px 0 24px;display:flex;gap:8px;flex-wrap:wrap; }.filters button { padding:8px 16px;border:1px solid var(--line);border-radius:30px;background:transparent;cursor:pointer;font-size:11px;font-weight:800; }.filters button.active { color:#fff;background:var(--wine);border-color:var(--wine); }.product-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }.product-card { padding:12px;border:1px solid var(--line);border-radius:15px;background:var(--paper); }.product-art { height:220px;display:grid;place-items:center;position:relative;overflow:hidden;border-radius:10px;background:#efd7b8; }.product-art::before { content:"";width:115px;height:105px;border-radius:12px 12px 4px 4px;background:var(--product-color,#704037);box-shadow:0 -16px 0 #fff0d5,0 11px 0 rgba(71,38,29,.13); }.product-art::after { content:"";position:absolute;width:145px;height:10px;bottom:44px;border-radius:50%;background:rgba(80,43,33,.28); }.product-card[data-category="boxes"] .product-art::before { width:150px;height:95px;border:13px solid #ac6a4b;background:repeating-linear-gradient(90deg,var(--product-color) 0 31px,#e8b982 32px 35px); }.product-card[data-category="jars"] .product-art::before { width:90px;height:130px;border-radius:8px 8px 25px 25px;background:repeating-linear-gradient(#fff3da 0 25px,var(--product-color) 26px 52px); }.product-info { padding:13px 4px 4px; }.product-info h3 { margin:0;font:600 20px Georgia,serif; }.product-info p { min-height:39px;margin:6px 0;color:var(--muted);font-size:11px; }.product-bottom { display:flex;align-items:center;justify-content:space-between;gap:10px; }.product-bottom b { color:var(--rust); }.add-button { padding:8px 12px;border:1px solid var(--wine);border-radius:8px;color:var(--wine);background:white;cursor:pointer;font-size:11px;font-weight:850; }.add-button:hover { color:white;background:var(--wine); }
.how-section { padding:85px max(24px,calc((100vw - 1120px)/2));display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;color:#fff;background:var(--wine); }.how-section .shop-eyebrow { color:#f4c267; }.how-section ol { margin:0;padding:0;list-style:none; }.how-section li { padding:20px 0;display:grid;grid-template-columns:48px 1fr;border-bottom:1px solid rgba(255,255,255,.2); }.how-section li>span { width:30px;height:30px;display:grid;place-items:center;border:1px solid #fff;border-radius:50%;font:600 13px Georgia,serif; }.how-section li p { margin:0;color:#f0d9d2;font-size:12px; }.how-section li b { display:block;margin-bottom:3px;color:#fff;font:600 18px Georgia,serif; }
.about-section { max-width:1050px;margin:auto;padding:105px 24px;display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center; }.about-art { height:440px;display:grid;place-items:center;border-radius:50% 50% 12px 12px;background:var(--green);box-shadow:-22px 22px 0 var(--pink); }.about-art span { color:#fff;font:600 49px/.9 Georgia,serif;text-align:center;transform:rotate(-5deg); }.about-section>div:last-child>p:not(.shop-eyebrow) { color:var(--muted);font-size:15px; }.about-sign { margin-top:30px;font:italic 30px Georgia,serif;color:var(--rust); }.about-sign span { color:var(--muted);font:10px sans-serif; }
footer { padding:40px max(24px,calc((100vw - 1120px)/2));display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center;color:#eadbd2;background:#28221f;font-size:11px; }footer b { color:#fff;font:600 20px Georgia,serif; }footer a { color:#ffcf79;font-weight:850; }
.cart-backdrop { position:fixed;inset:0;z-index:49;background:rgba(26,18,14,.5);backdrop-filter:blur(2px); }.cart-drawer { position:fixed;z-index:50;top:0;right:0;width:min(450px,100vw);height:100dvh;padding:26px;overflow:auto;background:var(--paper);box-shadow:-30px 0 80px rgba(40,20,10,.25);transform:translateX(105%);transition:.25s ease; }.cart-drawer.open { transform:none; }.cart-head { display:flex;justify-content:space-between;align-items:start;padding-bottom:20px;border-bottom:1px solid var(--line); }.cart-head p { margin:0;color:var(--rust);font-size:9px;font-weight:900;letter-spacing:1.5px; }.cart-head h2 { margin:3px 0 0;font:500 31px Georgia,serif; }.cart-head button,.dialog-close { width:37px;height:37px;border:1px solid var(--line);border-radius:50%;background:transparent;cursor:pointer;font-size:24px; }.cart-items { padding-top:10px; }.cart-item { padding:13px 0;display:grid;grid-template-columns:1fr auto;gap:10px;border-bottom:1px solid var(--line); }.cart-item b,.cart-item small { display:block; }.cart-item small { color:var(--muted); }.qty { display:flex;align-items:center;gap:10px; }.qty button { width:25px;height:25px;border:1px solid var(--line);border-radius:50%;background:white;cursor:pointer; }.empty-cart { padding:80px 20px;text-align:center; }.empty-cart span { display:block;color:var(--rust);font:55px Georgia,serif; }.empty-cart b { font:600 20px Georgia,serif; }.empty-cart p { margin:5px;color:var(--muted);font-size:12px; }.cart-drawer form { padding-top:15px; }.cart-total { margin-bottom:18px;padding:13px 0;display:flex;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line); }.cart-total b { font:600 22px Georgia,serif; }.cart-drawer label { display:block;margin-bottom:13px;font-size:10px;font-weight:850; }.cart-drawer label span { color:var(--muted); }.cart-drawer input,.cart-drawer textarea { width:100%;margin-top:5px;padding:11px;border:1px solid var(--line);border-radius:7px;background:white; }.full { width:100%;justify-content:center; }.cart-drawer form>small,dialog>small { display:block;margin-top:10px;color:var(--muted);font-size:9px;text-align:center; }
dialog { width:min(520px,calc(100vw - 28px));padding:34px;border:0;border-radius:18px;background:var(--cream);box-shadow:0 30px 100px rgba(0,0,0,.3); }dialog::backdrop { background:rgba(30,20,15,.6); }.dialog-close { float:right; }.dialog-close+.shop-eyebrow { margin-top:10px; }dialog h2 { margin:0;font:500 34px Georgia,serif; }dialog pre { max-height:280px;padding:17px;overflow:auto;white-space:pre-wrap;border:1px solid var(--line);border-radius:9px;background:white;font:11px/1.5 ui-monospace,monospace; }.demo-toast { position:fixed;z-index:70;left:50%;bottom:20px;padding:11px 16px;border-radius:8px;color:white;background:#23201d;opacity:0;transform:translate(-50%,15px);transition:.2s;font-size:11px; }.demo-toast.show { opacity:1;transform:translate(-50%,0); }
@media(max-width:760px){.demo-ribbon span{display:none}.shop-header{padding:0 14px}.shop-header nav{display:none}.cart-button{margin-left:auto}.shop-hero{grid-template-columns:1fr;padding:55px 20px 45px}.hero-content{padding:0}.hero-content h1{font-size:51px}.hero-art{min-height:430px}.quick-facts{grid-template-columns:1fr 1fr;padding:15px}.quick-facts div:nth-child(3){border-left:0}.menu-section{padding:70px 16px}.menu-heading{grid-template-columns:1fr;gap:10px}.product-grid{grid-template-columns:1fr 1fr}.product-art{height:170px}.how-section,.about-section{grid-template-columns:1fr;gap:45px;padding:70px 22px}.about-art{height:360px}footer{grid-template-columns:1fr;text-align:center}.product-info h3{font-size:17px}}
@media(max-width:430px){.product-grid{grid-template-columns:1fr}.product-art{height:225px}.demo-ribbon{justify-content:space-between}.hero-art{transform:scale(.88);margin:-20px}.quick-facts div{padding:10px}.shop-header{top:0}.about-art{height:320px}.cart-drawer{padding:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cart-drawer,.demo-toast{transition:none}}