.announcement {
  height: 34px; background: var(--amal-espresso); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; letter-spacing: .02em; position: relative; z-index: 80;
}
.announcement strong { color: #ead1cd; margin-inline: 6px; }

.site-header {
  position: sticky; top: 0; z-index: 70; height: var(--header-h); background: rgba(248,245,241,.88);
  backdrop-filter: blur(16px); border-bottom: 1px solid var(--amal-line);
}
.header-row { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a, .nav button { background: transparent; border: 0; padding: 9px 0; cursor: pointer; font-weight: 600; font-size: 14px; position: relative; }
.nav a::after, .nav button::after { content: ""; position: absolute; right: 0; left: 100%; bottom: 2px; height: 1px; background: currentColor; transition: left var(--transition); }
.nav a:hover::after, .nav button:hover::after { left: 0; }
.brand { display: grid; place-items: center; min-width: 180px; }
.brand-main { font-family: var(--font-display); font-size: 34px; line-height: .8; letter-spacing: .24em; margin-right: -.24em; }
.brand-sub { font-size: 8px; letter-spacing: .5em; margin-right: -.5em; color: var(--amal-rose); font-weight: 700; }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 2px; }
.count-badge { position: absolute; min-width: 17px; height: 17px; border-radius: 99px; display: grid; place-items: center; font-size: 10px; background: var(--amal-rose); color: white; top: 2px; left: 0; padding: 0 4px; }

.mega-menu {
  position: fixed; z-index: 65; top: calc(34px + var(--header-h)); left: 0; right: 0; background: var(--amal-paper);
  border-bottom: 1px solid var(--amal-line); box-shadow: var(--shadow-soft); transform: translateY(-14px); opacity: 0; pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.mega-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.mega-inner { width: var(--container); margin: auto; padding: 30px 0 38px; display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr; gap: 34px; }
.mega-col h3 { font-family: var(--font-display); font-size: 24px; margin: 0 0 14px; }
.mega-col a { display: block; padding: 5px 0; color: var(--amal-ink-muted); }
.mega-col a:hover { color: var(--amal-rose); }
.mega-editorial { min-height: 220px; border-radius: var(--radius-md); overflow: hidden; position: relative; background: linear-gradient(120deg,#cdb1a8,#604038); }
.mega-editorial::before { content: ""; position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=900&q=85') center/cover; mix-blend-mode: normal; }
.mega-editorial::after { content: "NEW SEASON\A SHOP THE EDIT"; white-space: pre; position: absolute; inset: auto 20px 18px; color: #fff; font-family: var(--font-display); font-size: 27px; line-height: 1; text-shadow: 0 2px 15px rgba(0,0,0,.25); }

.hero { min-height: calc(100svh - 112px); position: relative; overflow: hidden; background: #c7aaa1; }
.hero-media { position: absolute; inset: 0; }
.hero-media::before {
  content:""; position:absolute; inset:0; background:
    linear-gradient(90deg, rgba(31,21,18,.70) 0%, rgba(31,21,18,.28) 42%, rgba(31,21,18,.04) 70%),
    url('https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=2200&q=90') center 22%/cover no-repeat;
  transform: scale(1.02); animation: heroIn 1.4s var(--ease) both;
}
@keyframes heroIn { from { transform: scale(1.08); filter: saturate(.7); } to { transform: scale(1.02); filter: saturate(1); } }
.hero-content { position: relative; z-index: 2; min-height: inherit; display: flex; align-items: center; color: white; padding: 60px 0; }
.hero-copy { max-width: 740px; }
.hero-copy .eyebrow { color: #ead1cd; }
.hero h1 { font-size: clamp(64px, 9vw, 136px); margin: 14px 0 22px; max-width: 760px; }
.hero h1 span { display: block; font-family: var(--font-ui); font-size: clamp(29px, 4vw, 58px); letter-spacing: -.03em; line-height: 1.05; margin-top: 12px; font-weight: 500; }
.hero p { max-width: 580px; font-size: clamp(16px,1.4vw,20px); color: rgba(255,255,255,.86); margin: 0 0 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero .btn-primary { background: white; color: var(--amal-espresso); }
.hero .btn-secondary { color: white; border-color: rgba(255,255,255,.46); }
.hero-index { position: absolute; left: 28px; bottom: 26px; z-index: 3; color:white; font-family: var(--font-display); font-size: 24px; }
.hero-index small { font-family: var(--font-ui); font-size: 11px; opacity:.6; }

.trust-strip { background: var(--amal-paper); border-bottom: 1px solid var(--amal-line); }
.trust-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.trust-item { padding: 22px 18px; text-align: center; border-inline-start: 1px solid var(--amal-line); }
.trust-item:first-child { border-inline-start: 0; }
.trust-item strong { display:block; font-size: 14px; }
.trust-item span { display:block; color:var(--amal-ink-muted); font-size:12px; margin-top:2px; }

.editorial-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; }
.editorial-card { border-radius: var(--radius-lg); overflow:hidden; min-height:620px; position:relative; isolation:isolate; background:#d1b9ad; }
.editorial-card.small { min-height: 301px; }
.editorial-stack { display:grid; gap:18px; }
.editorial-card::before { content:""; position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; transition:transform 900ms var(--ease); }
.editorial-card:hover::before { transform: scale(1.035); }
.editorial-card::after { content:""; position:absolute; inset:35% 0 0; z-index:-1; background:linear-gradient(transparent,rgba(25,15,13,.78)); }
.editorial-card.main::before { background-image:url('https://images.unsplash.com/photo-1529139574466-a303027c1d8b?auto=format&fit=crop&w=1400&q=90'); }
.editorial-card.one::before { background-image:url('https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=1200&q=90'); }
.editorial-card.two::before { background-image:url('https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?auto=format&fit=crop&w=1200&q=90'); }
.card-content { position:absolute; inset:auto 26px 25px; color:white; }
.card-content h3 { font-family:var(--font-display); font-size:clamp(34px,4vw,64px); line-height:.9; margin:8px 0 13px; }
.card-content p { margin:0 0 18px; color:rgba(255,255,255,.82); max-width:450px; }

.product-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.product-card { position:relative; background:var(--amal-paper); border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--amal-line); transition:transform var(--transition), box-shadow var(--transition); }
.product-card:hover { transform: translateY(-6px); box-shadow:var(--shadow-soft); }
.product-media { aspect-ratio: .77; background:#eadfd8; position:relative; overflow:hidden; }
.product-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 70%,rgba(34,24,21,.06)); }
.product-placeholder { width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(145deg,#eadbd4,#caa99e); }
.product-placeholder span { font-family:var(--font-display); font-size:30px; color:rgba(34,24,21,.55); transform:rotate(-8deg); }
.product-wish { position:absolute; top:12px; left:12px; z-index:2; background:rgba(255,255,255,.86); backdrop-filter:blur(10px); }
.product-tag { position:absolute; top:14px; right:14px; z-index:2; background:var(--amal-espresso); color:#fff; border-radius:var(--radius-pill); padding:5px 10px; font-size:10px; }
.product-info { padding:16px; }
.product-info h3 { margin:0; font-size:15px; }
.product-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; color:var(--amal-ink-muted); font-size:13px; }
.swatches { display:flex; gap:5px; }
.swatch { width:14px;height:14px;border-radius:50%;border:1px solid rgba(34,24,21,.18); }

.design-system { background:var(--amal-espresso); color:var(--amal-paper); overflow:hidden; }
.design-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:72px; align-items:start; }
.design-copy { position:sticky; top:140px; }
.design-copy h2 { font-size:clamp(50px,7vw,92px); margin:12px 0 20px; }
.design-copy p { color:#cfc3bd; max-width:540px; }
.token-board { background:#2c201c; border:1px solid rgba(255,255,255,.1); padding:28px; border-radius:var(--radius-lg); display:grid; gap:22px; }
.token-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.color-chip { min-height:112px; padding:14px; border-radius:16px; display:flex;align-items:end; font-size:11px; font-weight:700; }
.color-chip.dark { color:#fff; }
.ui-demo { border:1px solid rgba(255,255,255,.1); padding:20px; border-radius:20px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.ui-demo .btn-secondary { color:#fff; border-color:rgba(255,255,255,.25); }
.demo-input { height:48px; min-width:240px; background:#fff; color:var(--amal-espresso); border:0; border-radius:var(--radius-pill); padding:0 18px; outline:none; }

.footer { background:#17100e; color:#f7efe9; padding:64px 0 28px; }
.footer-grid { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:46px; }
.footer .brand-main { font-size:42px; }
.footer p, .footer a { color:#bfb1aa; font-size:14px; }
.footer a:hover { color:#fff; }
.footer h4 { margin:0 0 14px; font-size:14px; color:#fff; }
.footer-links { display:grid; gap:8px; }
.footer-bottom { margin-top:46px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:24px; color:#8f817b; font-size:12px; }
.socials { display:flex; gap:8px; margin-top:18px; }
.socials a { width:38px;height:38px;border:1px solid rgba(255,255,255,.14);border-radius:50%;display:grid;place-items:center;color:#fff; }

.overlay { position:fixed; inset:0; z-index:120; background:rgba(20,13,11,.45); opacity:0; pointer-events:none; transition:opacity var(--transition); }
.overlay.is-open { opacity:1; pointer-events:auto; }
.drawer { position:fixed; z-index:130; top:0; bottom:0; left:0; width:min(470px,100vw); background:var(--amal-paper); transform:translateX(-100%); transition:transform 400ms var(--ease); box-shadow:var(--shadow-float); display:flex;flex-direction:column; }
.drawer.is-open { transform:none; }
.drawer-head { padding:22px 24px; display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--amal-line); }
.drawer-body { padding:20px 24px; overflow:auto; flex:1; }
.cart-item { display:grid;grid-template-columns:78px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--amal-line);align-items:start; }
.cart-thumb { aspect-ratio:.78;border-radius:12px;background:linear-gradient(145deg,#eadbd4,#caa99e); }
.cart-item h4 { margin:0 0 4px; }
.cart-item p { margin:0;color:var(--amal-ink-muted);font-size:12px; }
.cart-price { font-weight:700;font-size:13px; }
.drawer-foot { border-top:1px solid var(--amal-line);padding:18px 24px 24px; }
.drawer-total { display:flex;justify-content:space-between;margin-bottom:14px;font-weight:700; }
.drawer-foot .btn { width:100%; }

.search-panel { position:fixed;z-index:140;inset:0;background:rgba(248,245,241,.98);transform:translateY(-100%);transition:transform 500ms var(--ease);overflow:auto; }
.search-panel.is-open { transform:none; }
.search-top { height:94px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--amal-line); }
.search-field { flex:1;border:0;background:transparent;outline:none;font-family:var(--font-display);font-size:clamp(34px,5vw,68px);color:var(--amal-espresso); }
.search-results { padding:46px 0; }
.search-hints { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 42px; }
.search-chip { border:1px solid var(--amal-line);border-radius:99px;padding:8px 13px;background:transparent;cursor:pointer; }
.search-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:14px; }

.mobile-menu-btn { display:none; }
.mobile-nav { display:none; }

.toast { position:fixed;z-index:180;right:24px;bottom:24px;background:var(--amal-espresso);color:white;padding:13px 17px;border-radius:14px;box-shadow:var(--shadow-float);opacity:0;transform:translateY(15px);pointer-events:none;transition:all var(--transition);font-size:13px; }
.toast.is-showing { opacity:1;transform:none; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-visible { opacity:1; transform:none; }