@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Karla:wght@400;500;700&display=swap');
:root{--color-bg:#F5F2EC;--color-surface:#FFFFFF;--color-text:#212121;--color-text-soft:#8C7B6B;--color-border:#D9D2C7;--color-primary:#8C7B6B;--color-primary-strong:#AB8C52;--color-on-primary:#FFFFFF;--color-accent:#AB8C52;--heading-font:'Cormorant Garamond',serif;--body-font:'Karla',sans-serif;--radius:0px;--density:airy;--space-1:4px;--space-2:8px;--space-3:16px;--space-4:24px;--space-5:32px;--space-6:48px;--space-7:64px;--space-8:96px;--container-max:1440px;--header-height:72px;--announcement-height:36px;--transition:0.3s ease;--shadow-sm:0 2px 8px rgba(0,0,0,0.04);--shadow-md:0 8px 24px rgba(0,0,0,0.06)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body-font);font-weight:400;line-height:1.6;color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--color-primary-strong)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{list-style:none}
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-4)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--color-primary);color:var(--color-on-primary);padding:var(--space-2) var(--space-3);z-index:1000;transition:left 0.2s}
.skip-link:focus{left:0}
.announcement-bar{background:var(--color-text);color:var(--color-bg);text-align:center;font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase;padding:var(--space-1) var(--space-3);height:var(--announcement-height);display:flex;align-items:center;justify-content:center}
.header{position:sticky;top:0;z-index:100;background:var(--color-surface);border-bottom:1px solid var(--color-border);transition:box-shadow var(--transition)}
.header.scrolled{box-shadow:var(--shadow-sm)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);gap:var(--space-4)}
.header-left,.header-right{display:flex;align-items:center;gap:var(--space-3)}
.header-logo{font-family:var(--heading-font);font-size:2rem;font-weight:600;letter-spacing:0.02em;line-height:1;color:var(--color-text)}
.header-logo a:hover{color:var(--color-text)}
.header-nav{display:none}
.header-nav ul{display:flex;gap:var(--space-4)}
.header-nav a{font-size:0.9rem;letter-spacing:0.05em;text-transform:uppercase;position:relative;padding:var(--space-2) 0}
.header-nav a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--color-primary-strong);transition:width var(--transition)}
.header-nav a:hover::after{width:100%}
.header-actions{display:flex;align-items:center;gap:var(--space-2)}
.header-icon-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;position:relative}
.header-icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.cart-count{position:absolute;top:2px;right:2px;background:var(--color-primary-strong);color:var(--color-on-primary);font-size:0.7rem;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.mobile-menu-toggle{display:flex}
@media(min-width:768px){
.header-nav{display:block}
.mobile-menu-toggle{display:none}
}
.hero{display:grid;grid-template-columns:1fr;min-height:calc(100vh - var(--header-height) - var(--announcement-height));background:var(--color-bg)}
.hero-content{padding:var(--space-6) var(--space-4);display:flex;flex-direction:column;justify-content:center;order:2}
.hero-title{font-family:var(--heading-font);font-size:clamp(2.5rem,6vw,4.5rem);font-weight:600;line-height:1.1;margin-bottom:var(--space-3);color:var(--color-text)}
.hero-subtitle{font-size:1.1rem;color:var(--color-text-soft);margin-bottom:var(--space-5);max-width:500px}
.hero-cta{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--color-text);color:var(--color-bg);padding:var(--space-3) var(--space-5);font-size:0.9rem;letter-spacing:0.08em;text-transform:uppercase;transition:background var(--transition),color var(--transition);width:fit-content}
.hero-cta:hover{background:var(--color-primary-strong);color:var(--color-on-primary)}
.hero-image{order:1;height:60vh;overflow:hidden}
.hero-image img{width:100%;height:100%;object-fit:cover}
@media(min-width:768px){
.hero{grid-template-columns:1fr 1fr}
.hero-content{order:1;padding:var(--space-8)}
.hero-image{order:2;height:100%}
}
.section{padding:var(--space-7) 0}
.section-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--space-5);gap:var(--space-3);flex-wrap:wrap}
.section-title{font-family:var(--heading-font);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:600;line-height:1.2;color:var(--color-text)}
.section-link{font-size:0.85rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-primary-strong);border-bottom:1px solid var(--color-border);padding-bottom:2px}
.section-link:hover{color:var(--color-text);border-color:var(--color-text)}
.marquee{background:var(--color-surface);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);overflow:hidden;padding:var(--space-3) 0}
.marquee-track{display:flex;gap:var(--space-6);white-space:nowrap;animation:marquee 30s linear infinite}
.marquee-item{font-family:var(--heading-font);font-size:1.2rem;font-style:italic;color:var(--color-text-soft);display:flex;align-items:center;gap:var(--space-2)}
.marquee-item::after{content:'✦';color:var(--color-primary-strong);font-size:0.8rem}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.shelf{display:grid;grid-auto-flow:column;grid-auto-columns:min(280px,70vw);gap:var(--space-4);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--space-2) var(--space-4) var(--space-4);scrollbar-width:thin;scrollbar-color:var(--color-border) transparent}
.shelf::-webkit-scrollbar{height:4px}
.shelf::-webkit-scrollbar-track{background:transparent}
.shelf::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:0}
.product-card{scroll-snap-align:start;background:var(--color-surface);position:relative;transition:transform var(--transition),box-shadow var(--transition)}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.product-card-image{aspect-ratio:3/4;overflow:hidden;position:relative;background:var(--color-bg)}
.product-card-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease}
.product-card:hover .product-card-image img{transform:scale(1.03)}
.product-card-badge{position:absolute;top:var(--space-2);left:var(--space-2);background:var(--color-primary-strong);color:var(--color-on-primary);font-size:0.7rem;letter-spacing:0.05em;text-transform:uppercase;padding:2px var(--space-2)}
.wishlist-btn{position:absolute;top:var(--space-2);right:var(--space-2);width:36px;height:36px;background:var(--color-surface);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition);z-index:2}
.product-card:hover .wishlist-btn,.wishlist-btn.active{opacity:1}
.wishlist-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.wishlist-btn.active svg{fill:var(--color-primary-strong);stroke:var(--color-primary-strong)}
.quick-add{position:absolute;bottom:0;left:0;right:0;background:var(--color-surface);padding:var(--space-2);transform:translateY(100%);transition:transform var(--transition);text-align:center;font-size:0.85rem;letter-spacing:0.05em;text-transform:uppercase;border-top:1px solid var(--color-border)}
.product-card:hover .quick-add{transform:translateY(0)}
.quick-add:hover{background:var(--color-primary-strong);color:var(--color-on-primary)}
.product-card-info{padding:var(--space-3) var(--space-2);text-align:center}
.product-card-title{font-family:var(--heading-font);font-size:1.2rem;font-weight:500;margin-bottom:var(--space-1)}
.product-card-price{font-size:0.9rem;color:var(--color-text-soft)}
.product-card-price .compare-at{text-decoration:line-through;margin-right:var(--space-1);opacity:0.7}
.product-card-price .sale-price{color:var(--color-primary-strong)}
.feature-block{display:grid;grid-template-columns:1fr;background:var(--color-surface);border:1px solid var(--color-border)}
.feature-block-image{aspect-ratio:16/9;overflow:hidden}
.feature-block-image img{width:100%;height:100%;object-fit:cover}
.feature-block-content{padding:var(--space-5);display:flex;flex-direction:column;justify-content:center;gap:var(--space-3)}
.feature-block-title{font-family:var(--heading-font);font-size:2rem;font-weight:600;line-height:1.2}
.feature-block-text{color:var(--color-text-soft)}
.feature-block-link{font-size:0.85rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-primary-strong);display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2)}
.feature-block-link:hover{color:var(--color-text)}
@media(min-width:768px){
.feature-block{grid-template-columns:1fr 1fr}
.feature-block:nth-child(even) .feature-block-image{order:2}
}
.newsletter{background:var(--color-surface);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);padding:var(--space-7) 0;text-align:center}
.newsletter-title{font-family:var(--heading-font);font-size:2.2rem;font-weight:600;margin-bottom:var(--space-2)}
.newsletter-text{color:var(--color-text-soft);margin-bottom:var(--space-4)}
.newsletter-form{display:flex;max-width:480px;margin:0 auto;gap:var(--space-2)}
.newsletter-input{flex:1;padding:var(--space-3);border:1px solid var(--color-border);background:var(--color-bg);font-family:inherit;font-size:0.9rem;color:var(--color-text);outline:none;transition:border-color var(--transition)}
.newsletter-input:focus{border-color:var(--color-primary-strong)}
.newsletter-button{background:var(--color-text);color:var(--color-bg);padding:var(--space-3) var(--space-5);font-size:0.9rem;letter-spacing:0.08em;text-transform:uppercase;white-space:nowrap;transition:background var(--transition)}
.newsletter-button:hover{background:var(--color-primary-strong);color:var(--color-on-primary)}
.footer{background:var(--color-text);color:var(--color-bg);padding:var(--space-7) 0 var(--space-4)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:var(--space-5);margin-bottom:var(--space-6)}
.footer-brand{font-family:var(--heading-font);font-size:2rem;font-weight:600;margin-bottom:var(--space-2)}
.footer-tagline{color:var(--color-border);margin-bottom:var(--space-3)}
.footer-social{display:flex;gap:var(--space-3)}
.footer-social a{width:36px;height:36px;border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;transition:background var(--transition),color var(--transition)}
.footer-social a:hover{background:var(--color-primary-strong);color:var(--color-on-primary);border-color:var(--color-primary-strong)}
.footer-col-title{font-size:0.85rem;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:var(--space-3);color:var(--color-border)}
.footer-col ul li{margin-bottom:var(--space-2)}
.footer-col a{color:var(--color-bg);opacity:0.8;transition:opacity var(--transition)}
.footer-col a:hover{opacity:1;color:var(--color-primary-strong)}
.footer-bottom{border-top:1px solid var(--color-border);padding-top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);align-items:center;font-size:0.8rem}
.footer-bottom-links{display:flex;gap:var(--space-4);flex-wrap:wrap;justify-content:center}
.footer-bottom a{opacity:0.7}
.footer-bottom a:hover{opacity:1;color:var(--color-primary-strong)}
@media(min-width:768px){
.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}
.footer-bottom{flex-direction:row;justify-content:space-between}
}
.breadcrumb{display:flex;align-items:center;gap:var(--space-2);font-size:0.8rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--color-text-soft);padding:var(--space-3) 0}
.breadcrumb a:hover{color:var(--color-text)}
.breadcrumb-separator{opacity:0.5}
.filter-bar{position:sticky;top:var(--header-height);z-index:90;background:var(--color-bg);border-bottom:1px solid var(--color-border);padding:var(--space-3) 0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.filter-chips{display:flex;gap:var(--space-2);overflow-x:auto;scrollbar-width:none}
.filter-chips::-webkit-scrollbar{display:none}
.filter-chip{padding:var(--space-1) var(--space-3);border:1px solid var(--color-border);font-size:0.85rem;letter-spacing:0.05em;text-transform:uppercase;white-space:nowrap;transition:background var(--transition),color var(--transition),border-color var(--transition);cursor:pointer}
.filter-chip:hover{border-color:var(--color-primary-strong)}
.filter-chip.active{background:var(--color-text);color:var(--color-bg);border-color:var(--color-text)}
.filter-sort{display:flex;align-items:center;gap:var(--space-2);font-size:0.85rem;color:var(--color-text-soft)}
.filter-sort select{padding:var(--space-1) var(--space-2);border:1px solid var(--color-border);background:var(--color-surface);font-family:inherit;font-size:0.85rem;color:var(--color-text);outline:none}
.results-strip{display:flex;gap:var(--space-4);overflow-x:auto;padding:var(--space-4) 0;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--color-border) transparent}
.results-strip::-webkit-scrollbar{height:4px}
.results-strip::-webkit-scrollbar-track{background:transparent}
.results-strip::-webkit-scrollbar-thumb{background:var(--color-border)}
.results-strip .product-card{flex:0 0 auto;width:280px;scroll-snap-align:start}
@media(min-width:1024px){
.filter-bar{justify-content:space-between}
.results-strip .product-card{width:320px}
}
.badge{display:inline-block;padding:2px var(--space-2);font-size:0.7rem;letter-spacing:0.05em;text-transform:uppercase;background:var(--color-primary-strong);color:var(--color-on-primary)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);font-size:0.9rem;letter-spacing:0.08em;text-transform:uppercase;background:var(--color-text);color:var(--color-bg);transition:background var(--transition),color var(--transition);border:none;cursor:pointer}
.btn:hover{background:var(--color-primary-strong);color:var(--color-on-primary)}
.btn-outline{background:transparent;border:1px solid var(--color-text);color:var(--color-text)}
.btn-outline:hover{background:var(--color-text);color:var(--color-bg)}
.btn-accent{background:var(--color-primary-strong);color:var(--color-on-primary)}
.btn-accent:hover{background:var(--color-text);color:var(--color-bg)}
@media(max-width:767px){
.header-nav{display:none}
.mobile-menu{position:fixed;top:calc(var(--header-height) + var(--announcement-height));left:0;right:0;bottom:0;background:var(--color-surface);z-index:99;padding:var(--space-4);transform:translateX(-100%);transition:transform var(--transition);overflow-y:auto}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu ul li{margin-bottom:var(--space-3)}
.mobile-menu a{font-size:1.2rem;font-family:var(--heading-font);display:block;padding:var(--space-2) 0;border-bottom:1px solid var(--color-border)}
}
@media(min-width:768px){
.mobile-menu{display:none}
}