:root { --ink: #17251f; --muted: #66736c; --cream: #f6f4ed; --leaf: #2c614d; --coral: #d96f4e; --line: #d9dfd8; }
* { box-sizing: border-box; } body { margin: 0; color: var(--ink); background: var(--cream); font-family: Georgia, 'Times New Roman', serif; } a { color: inherit; text-decoration: none; }
.site-header, .site-footer, main { max-width: 1180px; margin: auto; padding-left: 5vw; padding-right: 5vw; }.site-header { display: flex; align-items: center; justify-content: space-between; padding-top: 25px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }.logo { font-size: 1.45rem; font-weight: bold; }.logo span { color: var(--coral); } nav { display: flex; gap: 24px; font-family: Arial, sans-serif; font-size: .9rem; } nav a:hover { color: var(--coral); }
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 7vw; align-items: center; min-height: 420px; padding-top: 55px; padding-bottom: 55px; }.eyebrow { color: var(--coral); font: 700 .75rem Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }.hero h1 { max-width: 620px; margin: 12px 0; font-size: clamp(3rem, 7vw, 6.6rem); line-height: .88; font-weight: normal; }.hero p { max-width: 480px; color: var(--muted); font: 1.05rem/1.6 Arial, sans-serif; }.hero-art { min-height: 310px; background: #d6e1d2; border-radius: 50% 50% 8px 8px; position: relative; overflow: hidden; }.hero-art:after { content: ''; position: absolute; width: 210px; height: 260px; background: #e2aa76; border-radius: 48% 48% 10% 10%; left: 28%; bottom: -45px; transform: rotate(8deg); }.hero-art:before { content: 'BB'; position: absolute; z-index: 1; right: 18%; top: 18%; font-size: 5rem; color: var(--leaf); }.button { display: inline-block; border: 0; padding: 13px 20px; margin-top: 13px; background: var(--leaf); color: white; font: 700 .85rem Arial, sans-serif; cursor: pointer; }.button.alt { background: var(--coral); }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin: 30px 0 20px; }.section-heading h2 { font-size: 2.2rem; font-weight: normal; margin: 0; }.muted { color: var(--muted); font-family: Arial, sans-serif; }.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-bottom: 65px; }.product-card { background: white; border: 1px solid var(--line); padding: 12px; }.product-image { width: 100%; height: 200px; display: block; object-fit: cover; background: #e5ded0; color: var(--leaf); font-size: 3rem; }.product-card h3 { margin: 14px 0 6px; font-size: 1.15rem; }.price { font-family: Arial, sans-serif; font-weight: bold; }.product-meta { display: flex; justify-content: space-between; gap: 8px; font-family: Arial, sans-serif; font-size: .82rem; }.page-title { padding: 50px 0 25px; }.page-title h1 { font-size: 3.5rem; font-weight: normal; margin: 8px 0; }.filters { display: flex; gap: 10px; margin-bottom: 28px; }.filters input, .filters select, input { border: 1px solid var(--line); padding: 12px; font: .9rem Arial, sans-serif; background: white; }.detail { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; padding: 60px 0; }.detail .product-image { height: 430px; }.detail h1 { font-size: 3.5rem; font-weight: normal; }.copy { font: 1rem/1.6 Arial, sans-serif; color: var(--muted); }.form { max-width: 620px; padding: 25px 0 80px; }.form label { display: block; margin: 15px 0 6px; font: .85rem Arial, sans-serif; }.form input { width: 100%; }.quantity-input { width: 72px; }.cart-list { display: grid; gap: 12px; padding-bottom: 22px; }.cart-item { display: grid; grid-template-columns: 76px 1fr auto auto auto; align-items: center; gap: 16px; background: white; border: 1px solid var(--line); padding: 12px; font-family: Arial, sans-serif; }.cart-item img { width: 76px; height: 76px; object-fit: cover; }.cart-item h3 { margin: 0 0 6px; font-family: Georgia, 'Times New Roman', serif; }.cart-summary { display: flex; justify-content: flex-end; gap: 28px; padding: 20px 0 6px; font: 1.1rem Arial, sans-serif; }.remove-button { border: 0; background: transparent; color: var(--coral); cursor: pointer; }.empty, .success { padding: 90px 0; text-align: center; }.site-footer { border-top: 1px solid var(--line); padding-top: 28px; padding-bottom: 40px; color: var(--muted); font: .85rem Arial, sans-serif; }
@media (max-width: 750px) { .site-header { align-items: flex-start; gap: 18px; flex-direction: column; } nav { gap: 14px; flex-wrap: wrap; } .hero, .detail { grid-template-columns: 1fr; } .hero { padding-top: 35px; } .hero-art { min-height: 230px; } .product-grid { grid-template-columns: repeat(2, 1fr); } .product-image { height: 150px; } .page-title h1 { font-size: 2.8rem; } }