@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');
:root{--color-bg:#F7F3EE;--color-surface:#FFFFFF;--color-text:#1A1A1A;--color-text-soft:#8C7B6B;--color-border:#D9C7B8;--color-primary:#B85C38;--color-primary-strong:#A04A2C;--color-on-primary:#FFFFFF;--color-accent:#D9C7B8;--heading-font:'Fraunces',serif;--body-font:'Inter',sans-serif;--radius:2px;--density:airy;--header-height:72px;--announcement-height:36px;--page-gutter:24px;--container-max:1440px;--transition:0.3s cubic-bezier(0.25,0.46,0.45,0.94);--shadow-sm:0 1px 3px rgba(0,0,0,0.04);--shadow-md:0 8px 24px rgba(0,0,0,0.06);--shadow-lg:0 16px 48px rgba(0,0,0,0.08)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--body-font);font-size:15px;line-height:1.6;letter-spacing:0.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--color-primary)}
button{font-family:inherit;cursor:pointer;border:none;background:none;padding:0}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,h5,h6{font-family:var(--heading-font);font-weight:500;line-height:1.15;margin:0 0 0.5em;letter-spacing:-0.01em}
.announcement-bar{background:var(--color-surface);border-bottom:1px solid var(--color-border);height:var(--announcement-height);display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;text-transform:uppercase;letter-spacing:0.12em;color:var(--color-text-soft);padding:0 var(--page-gutter);position:relative;z-index:100}
.announcement-bar p{margin:0}
.site-header{position:sticky;top:0;background:var(--color-bg);border-bottom:1px solid var(--color-border);z-index:90;height:var(--header-height);transition:background var(--transition),box-shadow var(--transition)}
.site-header.is-stuck{box-shadow:var(--shadow-sm)}
.header-inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--page-gutter);display:flex;align-items:center;justify-content:space-between;height:100%}
.header-logo{font-family:var(--heading-font);font-size:24px;font-weight:500;letter-spacing:0.02em;color:var(--color-text);line-height:1}
.header-logo a{color:inherit}
.header-actions{display:flex;align-items:center;gap:16px}
.cart-trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--color-border);border-radius:var(--radius);background:transparent;transition:border-color var(--transition),background var(--transition)}
.cart-trigger:hover{border-color:var(--color-primary);background:var(--color-surface)}
.cart-trigger svg{width:20px;height:20px;stroke:var(--color-text);fill:none;transition:stroke var(--transition)}
.cart-trigger:hover svg{stroke:var(--color-primary)}
.cart-count{position:absolute;top:-8px;right:-8px;background:var(--color-primary);color:var(--color-on-primary);font-size:10px;font-weight:600;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1}
.mobile-nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--color-border);border-radius:var(--radius);background:transparent;transition:border-color var(--transition),background var(--transition)}
.mobile-nav-toggle:hover{border-color:var(--color-primary);background:var(--color-surface)}
.mobile-nav-toggle svg{width:22px;height:22px;stroke:var(--color-text);fill:none;transition:stroke var(--transition)}
.mobile-nav-toggle:hover svg{stroke:var(--color-primary)}
.hero{position:relative;min-height:calc(100vh - var(--header-height) - var(--announcement-height));display:flex;align-items:flex-end;overflow:hidden;background:var(--color-surface)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.4) 100%);z-index:1}
.hero-content{position:relative;z-index:2;max-width:var(--container-max);margin:0 auto;padding:64px var(--page-gutter) 80px;width:100%;color:var(--color-on-primary);text-align:left}
.hero-content h1{font-size:clamp(2.8rem,6vw,4.8rem);font-weight:500;line-height:1.05;margin-bottom:0.25em;letter-spacing:-0.02em;max-width:12em}
.hero-content .hero-sub{font-size:1.1rem;line-height:1.6;max-width:32em;margin-bottom:2rem;opacity:0.9}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 32px;border-radius:var(--radius);font-family:var(--body-font);font-size:13px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;transition:background var(--transition),color var(--transition),border-color var(--transition);border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-primary)}
.btn-primary:hover{background:var(--color-primary-strong);border-color:var(--color-primary-strong);color:var(--color-on-primary)}
.btn-outline{background:transparent;color:var(--color-text);border-color:var(--color-border)}
.btn-outline:hover{background:var(--color-surface);border-color:var(--color-primary);color:var(--color-primary)}
.btn-light{background:var(--color-on-primary);color:var(--color-text);border-color:var(--color-on-primary)}
.btn-light:hover{background:var(--color-surface);border-color:var(--color-surface);color:var(--color-primary)}
.editorial-band{padding:80px var(--page-gutter);text-align:center;border-bottom:1px solid var(--color-border)}
.editorial-band h2{font-size:clamp(2rem,4vw,3rem);font-weight:500;margin-bottom:0.25em}
.editorial-band p{max-width:48em;margin:0 auto;color:var(--color-text-soft);font-size:1.1rem}
.marquee-band{overflow:hidden;white-space:nowrap;padding:24px 0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);background:var(--color-surface)}
.marquee-content{display:inline-block;animation:marquee 30s linear infinite;font-family:var(--heading-font);font-size:2.5rem;font-weight:500;letter-spacing:0.02em;color:var(--color-text)}
.marquee-content span{margin:0 2rem}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.product-shelf{padding:64px var(--page-gutter);max-width:var(--container-max);margin:0 auto}
.shelf-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:32px;flex-wrap:wrap;gap:16px}
.shelf-header h2{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:500;margin:0}
.shelf-header .shelf-link{font-size:13px;text-transform:uppercase;letter-spacing:0.1em;color:var(--color-text-soft);border-bottom:1px solid var(--color-border);padding-bottom:2px;transition:color var(--transition),border-color var(--transition)}
.shelf-header .shelf-link:hover{color:var(--color-primary);border-color:var(--color-primary)}
.shelf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:32px}
.product-card{position:relative;background:var(--color-surface);border-radius:var(--radius);overflow:hidden;transition:box-shadow var(--transition),transform var(--transition)}
.product-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.product-card-image{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--color-accent)}
.product-card-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94)}
.product-card:hover .product-card-image img{transform:scale(1.03)}
.quick-add-overlay{position:absolute;bottom:0;left:0;right:0;background:rgba(255,255,255,0.9);padding:12px;transform:translateY(100%);transition:transform var(--transition);display:flex;justify-content:center}
.product-card:hover .quick-add-overlay{transform:translateY(0)}
.quick-add-overlay button{background:var(--color-primary);color:var(--color-on-primary);padding:10px 20px;border-radius:var(--radius);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.08em;transition:background var(--transition)}
.quick-add-overlay button:hover{background:var(--color-primary-strong)}
.product-card-info{padding:16px 0;text-align:left}
.product-card-info h3{font-size:1rem;font-weight:500;margin:0 0 4px}
.product-card-info .price{font-size:0.95rem;color:var(--color-text-soft)}
.feature-block{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--color-surface);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}
.feature-block-content{padding:80px var(--page-gutter);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.feature-block-content h2{font-size:clamp(2rem,4vw,3rem);font-weight:500;margin-bottom:0.5em}
.feature-block-content p{color:var(--color-text-soft);margin-bottom:2rem;max-width:32em}
.feature-block-image{position:relative;min-height:400px}
.feature-block-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.newsletter{background:var(--color-surface);border-top:1px solid var(--color-border);padding:80px var(--page-gutter);text-align:center}
.newsletter h2{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:500;margin-bottom:0.25em}
.newsletter p{color:var(--color-text-soft);max-width:32em;margin:0 auto 2rem}
.newsletter-form{display:flex;max-width:480px;margin:0 auto;gap:8px}
.newsletter-form input[type="email"]{flex:1;padding:14px 16px;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg);font-family:var(--body-font);font-size:14px;color:var(--color-text);transition:border-color var(--transition)}
.newsletter-form input[type="email"]:focus{outline:none;border-color:var(--color-primary)}
.newsletter-form button{padding:14px 24px;background:var(--color-primary);color:var(--color-on-primary);border-radius:var(--radius);font-family:var(--body-font);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:0.08em;transition:background var(--transition);white-space:nowrap}
.newsletter-form button:hover{background:var(--color-primary-strong)}
.site-footer{background:var(--color-surface);border-top:1px solid var(--color-border);padding:64px var(--page-gutter) 32px;font-size:14px}
.footer-inner{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.footer-col h4{font-size:13px;text-transform:uppercase;letter-spacing:0.1em;color:var(--color-text-soft);margin-bottom:16px}
.footer-col ul li{margin-bottom:8px}
.footer-col a{color:var(--color-text);transition:color var(--transition)}
.footer-col a:hover{color:var(--color-primary)}
.footer-bottom{margin-top:48px;padding-top:24px;border-top:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--color-text-soft)}
.badge{display:inline-block;padding:4px 10px;border-radius:var(--radius);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.08em;background:var(--color-accent);color:var(--color-text)}
.badge-primary{background:var(--color-primary);color:var(--color-on-primary)}
.badge-outline{background:transparent;border:1px solid var(--color-border);color:var(--color-text-soft)}
@media (max-width: 1024px){
.footer-inner{grid-template-columns:1fr 1fr;gap:32px}
.feature-block{grid-template-columns:1fr}
.feature-block-content{padding:48px var(--page-gutter)}
.feature-block-image{min-height:300px}
}
@media (max-width: 768px){
:root{--header-height:64px;--announcement-height:32px;--page-gutter:16px}
.header-logo{font-size:20px}
.hero-content{padding:48px var(--page-gutter) 64px}
.hero-content h1{font-size:2.4rem}
.editorial-band{padding:56px var(--page-gutter)}
.marquee-content{font-size:1.8rem}
.product-shelf{padding:48px var(--page-gutter)}
.shelf-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px}
.newsletter{padding:56px var(--page-gutter)}
.newsletter-form{flex-direction:column}
.newsletter-form input[type="email"],.newsletter-form button{width:100%}
.footer-inner{grid-template-columns:1fr;gap:24px}
.footer-bottom{flex-direction:column;text-align:center}
}
@media (max-width: 480px){
.hero-content h1{font-size:2rem}
.shelf-grid{grid-template-columns:1fr 1fr;gap:16px}
.product-card-info h3{font-size:0.9rem}
}