@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap');

:root {
    --black: #171717;
    --cream: #f5f1e9;
    --paper: #fbfaf7;
    --tan: #c9a77b;
    --brown: #6c4c35;
    --muted: #77736d;
    --line: #dedad2;
    --white: #fff;
    --max: 1280px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "DM Sans", sans-serif; color: var(--black); background: var(--paper); line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.container { width: min(calc(100% - 48px), var(--max)); margin: auto; }

.announcement { background: var(--black); color: #fff; text-align: center; font-size: 11px; letter-spacing: 1.4px; padding: 9px; }
.announcement span { margin: 0 12px; color: var(--tan); }

.header-main { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.logo { font-size: 22px; font-weight: 700; letter-spacing: -1.5px; white-space: nowrap; }
.logo span { color: var(--tan); margin: 0 2px; }
.desktop-nav { display: flex; gap: 28px; font-size: 13px; }
.desktop-nav a:hover, .footer-col a:hover { opacity: .55; }
.header-actions { display: flex; align-items: center; gap: 18px; }
.icon-btn, .mobile-menu { background: none; border: 0; cursor: pointer; font-size: 23px; line-height: 1; }
.cart-link { font-size: 13px; font-weight: 600; }
.cart-count { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: var(--black); color: white; align-items: center; justify-content: center; font-size: 10px; margin-left: 4px; }
.mobile-menu { display: none; }

.search-bar { display: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.search-bar.open { display: block; }
.search-bar form { display: flex; padding: 14px 0; }
.search-bar input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 18px; }
.search-bar button { border: 0; background: none; font-weight: 700; cursor: pointer; }
.mobile-nav { display: none; }

.hero { min-height: 630px; background: var(--cream); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.hero-content { padding: 100px max(40px, calc((100vw - var(--max)) / 2)); padding-right: 30px; align-self: center; }
.eyebrow { display: block; font-size: 10px; letter-spacing: 2px; font-weight: 700; color: var(--muted); margin-bottom: 16px; }
.hero h1 { font-family: "Playfair Display", serif; font-size: clamp(55px, 7vw, 92px); line-height: .95; font-weight: 500; letter-spacing: -4px; }
.hero h1 span { color: var(--brown); }
.hero p { color: #625e57; max-width: 420px; margin: 28px 0; font-size: 16px; }
.hero-actions { display: flex; align-items: center; gap: 24px; }
.btn { display: inline-flex; justify-content: center; align-items: center; padding: 14px 23px; border: 1px solid transparent; font-size: 12px; font-weight: 700; letter-spacing: .5px; transition: .2s; cursor: pointer; }
.btn-dark { background: var(--black); color: white; }
.btn-dark:hover { background: var(--brown); }
.btn-light { background: white; color: var(--black); }
.text-link { font-size: 12px; font-weight: 700; border-bottom: 1px solid currentColor; padding-bottom: 3px; }

.hero-visual { background: #e4d8c7; position: relative; min-height: 630px; }
.hero-card { position: absolute; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.hero-card-main { width: 60%; height: 76%; right: 12%; bottom: 0; background: #b99a72; }
.hero-card-main > span { position: absolute; top: 22px; left: 22px; font-size: 9px; letter-spacing: 2px; font-weight: 700; }
.hero-card-small { width: 28%; height: 33%; left: 7%; bottom: 12%; background: #8d7256; }
.bag-shape { position: relative; background: #2a2723; }
.bag-shape-tote { width: 55%; height: 64%; border-radius: 5px 5px 12px 12px; box-shadow: inset -25px 0 0 rgba(0,0,0,.09); }
.bag-shape-tote:before { content:""; position:absolute; width: 48%; height: 23%; left: 26%; top: -19%; border: 9px solid #2a2723; border-bottom: 0; border-radius: 40px 40px 0 0; }
.bag-shape-mini { width: 64%; height: 48%; border-radius: 6px; }
.bag-shape-mini:before { content:""; position:absolute; width: 75%; height: 5px; background:#403b34; left:13%; top:-10px; transform:rotate(-8deg); }

.trust-strip { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }
.trust-strip div { padding: 25px; text-align: center; border-right: 1px solid var(--line); }
.trust-strip div:last-child { border-right: 0; }
.trust-strip strong, .trust-strip span { display:block; }
.trust-strip strong { font-size: 10px; letter-spacing: 1.4px; }
.trust-strip span { color: var(--muted); font-size: 11px; margin-top: 4px; }

.section { width: min(calc(100% - 48px), var(--max)); margin: 100px auto; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:35px; }
.section-head h2 { font-family:"Playfair Display", serif; font-weight:500; font-size:44px; letter-spacing:-1.5px; }
.category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.category-card { background:#eee8df; overflow:hidden; }
.category-art { height:340px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.category-one .category-art { background:#ded1bd; }
.category-two .category-art { background:#d5d6d1; }
.category-three .category-art { background:#d9c8ba; }
.category-four .category-art { background:#c9c2b7; }
.category-info { padding:18px 18px 21px; display:flex; justify-content:space-between; align-items:end; }
.category-info h3 { font-size:15px; }
.category-info span { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }
.bag-shape-office { width:56%; height:48%; border-radius:7px; }
.bag-shape-office:before { content:""; position:absolute; width:50%; height:25%; border:7px solid #2a2723; border-bottom:0; left:25%; top:-20%; border-radius:30px 30px 0 0; }
.bag-shape-messenger { width:65%; height:43%; border-radius:5px; transform:rotate(-5deg); }
.bag-shape-messenger:before { content:""; position:absolute; width:115%; height:8px; background:#2a2723; top:10%; left:-8%; transform:rotate(-18deg); }
.bag-shape-backpack { width:48%; height:60%; border-radius:25px 25px 12px 12px; }
.bag-shape-backpack:before { content:""; position:absolute; width:38%; height:50%; border-left:8px solid #24211e; border-right:8px solid #24211e; left:31%; top:-12%; border-radius:30px; }
.bag-shape-travel { width:67%; height:42%; border-radius:10px; }
.bag-shape-travel:before { content:""; position:absolute; width:42%; height:18%; border:6px solid #2a2723; border-bottom:0; left:29%; top:-22%; border-radius:25px 25px 0 0; }

.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.product-image { display:block; height:390px; position:relative; overflow:hidden; background:#eee8df; }
.product-card:nth-child(1) .product-image { background:#ded1bd; }
.product-card:nth-child(2) .product-image { background:#d7d8d5; }
.product-card:nth-child(3) .product-image { background:#ddd2ca; }
.product-card:nth-child(4) .product-image { background:#d2ccc2; }
.product-badge { position:absolute; top:14px; left:14px; z-index:2; background:var(--white); padding:7px 9px; font-size:8px; font-weight:700; letter-spacing:1.2px; }
.wishlist { position:absolute; top:12px; right:12px; z-index:2; border:0; background:white; width:31px; height:31px; border-radius:50%; cursor:pointer; font-size:18px; }
.wishlist.active { color:#a34a3e; }
.bag-product-art { position:absolute; width:54%; height:57%; left:23%; top:25%; background:#2a2723; border-radius:8px; box-shadow:inset -16px 0 rgba(0,0,0,.08); }
.bag-product-art:before { content:""; position:absolute; width:45%; height:22%; border:7px solid #2a2723; border-bottom:0; left:27%; top:-17%; border-radius:30px 30px 0 0; }
.product-card:nth-child(2) .bag-product-art { width:62%; height:42%; left:19%; top:34%; transform:rotate(-3deg); }
.product-card:nth-child(3) .bag-product-art { border-radius:28px 28px 12px 12px; height:63%; top:22%; }
.product-card:nth-child(4) .bag-product-art { width:68%; height:43%; left:16%; top:34%; }
.product-info { padding:14px 1px 0; }
.product-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; margin-bottom:5px; }
.product-info h3 { font-size:14px; font-weight:600; }
.price { margin-top:7px; font-size:13px; font-weight:700; }

.editorial-banner { width:min(calc(100% - 48px),var(--max)); margin:110px auto; min-height:500px; background:var(--black); color:#fff; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; }
.editorial-copy { padding:70px; align-self:center; }
.editorial-copy .eyebrow { color:#bcb5aa; }
.editorial-copy h2 { font-family:"Playfair Display",serif; font-size:58px; line-height:1; font-weight:500; letter-spacing:-2px; }
.editorial-copy p { color:#c4c0ba; max-width:420px; margin:22px 0 28px; }
.editorial-art { background:#b09a7b; position:relative; display:flex; align-items:center; justify-content:center; }
.large-bag { width:48%; height:62%; background:#26231f; border-radius:10px; position:relative; }
.large-bag:before { content:""; position:absolute; width:50%; height:30%; border:9px solid #26231f; border-bottom:0; left:25%; top:-25%; border-radius:45px 45px 0 0; }

.mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.mini-card { border-bottom:1px solid var(--line); padding-bottom:18px; }
.mini-art { height:300px; margin-bottom:17px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.mini-1 { background:#ddd4c8; }
.mini-2 { background:#d8d8d2; }
.mini-3 { background:#d5c9b8; }
.mini-art:after { content:""; width:42%; height:52%; background:#2a2723; border-radius:8px; display:block; }
.mini-2:after { width:35%; height:37%; border-radius:50px 50px 12px 12px; }
.mini-3:after { width:58%; height:39%; }

.mini-card h3 { font-size:14px; }
.mini-card p { color:var(--muted); font-size:12px; margin-top:3px; }

.newsletter { width:min(calc(100% - 48px),var(--max)); margin:100px auto 0; padding:55px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:40px; }
.newsletter h2 { font-family:"Playfair Display",serif; font-size:38px; font-weight:500; }
.newsletter-form { display:flex; width:min(100%,440px); border-bottom:1px solid var(--black); }
.newsletter-form input { flex:1; border:0; outline:0; background:transparent; padding:14px 0; font-size:13px; }
.newsletter-form .btn { border:0; margin-bottom:5px; }

.site-footer { background:#eeebe5; margin-top:80px; }
.footer-top { padding:65px 0; display:grid; grid-template-columns:2fr repeat(3,1fr); gap:40px; }
.footer-brand p { color:var(--muted); max-width:250px; font-size:12px; margin-top:15px; }
.footer-col { display:flex; flex-direction:column; gap:10px; font-size:12px; }
.footer-col h4 { font-size:10px; letter-spacing:1.5px; margin-bottom:5px; }
.footer-col a { color:#5e5a54; }
.footer-bottom { border-top:1px solid var(--line); padding:20px 0; display:flex; justify-content:space-between; color:#77736d; font-size:10px; }

@media(max-width:900px) {
    .desktop-nav { display:none; }
    .mobile-menu { display:block; }
    .header-main { gap:16px; }
    .hero { grid-template-columns:1fr; }
    .hero-content { padding:70px 24px; }
    .hero-visual { min-height:480px; }
    .trust-strip { grid-template-columns:repeat(2,1fr); }
    .trust-strip div:nth-child(2) { border-right:0; }
    .trust-strip div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
    .category-grid, .product-grid { grid-template-columns:repeat(2,1fr); }
    .category-art { height:280px; }
    .product-image { height:350px; }
    .editorial-banner { grid-template-columns:1fr; }
    .editorial-copy { padding:55px 35px; }
    .editorial-art { min-height:420px; }
    .newsletter { flex-direction:column; align-items:flex-start; }
    .footer-top { grid-template-columns:2fr 1fr 1fr; }
}

@media(max-width:600px) {
    .container, .section, .newsletter, .editorial-banner { width:calc(100% - 30px); }
    .announcement { font-size:8px; letter-spacing:1px; }
    .header-main { min-height:68px; }
    .logo { font-size:19px; }
    .header-actions { gap:10px; }
    .search-toggle { display:none; }
    .hero-content { padding:58px 20px; }
    .hero h1 { font-size:58px; letter-spacing:-3px; }
    .hero-visual { min-height:370px; }
    .hero-card-main { width:62%; height:76%; }
    .hero-card-small { width:29%; height:30%; }
    .trust-strip div { padding:18px 8px; }
    .section { margin:70px auto; }
    .section-head { align-items:flex-start; }
    .section-head h2 { font-size:34px; }
    .category-grid, .product-grid { grid-template-columns:1fr 1fr; gap:10px; }
    .category-art { height:220px; }
    .category-info { display:block; padding:13px; }
    .category-info span { display:block; margin-top:4px; }
    .product-image { height:260px; }
    .product-info h3 { font-size:12px; }
    .product-meta { font-size:9px; }
    .editorial-banner { margin:75px auto; }
    .editorial-copy h2 { font-size:44px; }
    .editorial-copy { padding:45px 25px; }
    .editorial-art { min-height:320px; }
    .mini-grid { grid-template-columns:1fr; }
    .mini-art { height:270px; }
    .newsletter h2 { font-size:30px; }
    .newsletter-form { width:100%; }
    .footer-top { grid-template-columns:1fr 1fr; padding:45px 0; }
    .footer-brand { grid-column:1/-1; }
    .footer-bottom { display:block; }
    .footer-bottom span { display:block; margin:5px 0; }
    .mobile-nav.open { display:flex; flex-direction:column; border-top:1px solid var(--line); background:white; }
    .mobile-nav a { padding:15px; border-bottom:1px solid var(--line); font-size:13px; }
}