@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  --espresso:#2b1f17;
  --espresso-2:#3a2b1f;
  --cream:#f7f1e6;
  --cream-2:#efe6d4;
  --brass:#b5904f;
  --brass-dark:#8f6f36;
  --forest:#41503c;
  --stitch: rgba(43,31,23,0.35);
  --line: rgba(43,31,23,0.14);
  --radius:3px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--espresso);
  font-family:'Work Sans',sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Fraunces',serif;
  font-weight:500;
  margin:0;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px;}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}

.stitched{
  border-top:2px dashed var(--stitch);
}

/* ---------- header ---------- */
header{
  background:var(--cream);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.topbar{
  background:var(--espresso); color:var(--cream-2);
  font-size:12px; letter-spacing:0.4px; text-align:center; padding:7px 12px;
  font-family:'Work Sans',sans-serif;
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; max-width:1160px; margin:0 auto; gap:20px;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand .mark{
  width:38px;height:38px; border:1.5px solid var(--espresso); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-size:18px; font-weight:600;
}
.brand-name{font-family:'Fraunces',serif; font-size:23px; font-weight:600; letter-spacing:0.3px;}
.brand-name .sub{display:block; font-family:'Work Sans',sans-serif; font-size:9.5px; letter-spacing:2.5px; color:var(--brass-dark); font-weight:600; margin-top:1px; text-transform:uppercase;}
nav.links{display:flex; gap:30px; font-size:14px;}
nav.links a{position:relative; padding:4px 0; font-weight:500;}
nav.links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--brass-dark);transition:width .18s ease;}
nav.links a:hover::after{width:100%;}
.nav-right{display:flex; align-items:center; gap:18px;}
.icon-btn{
  display:flex; align-items:center; gap:7px;
  background:transparent; border:1.5px solid var(--espresso); color:var(--espresso);
  padding:8px 13px; border-radius:20px; font-size:13px; font-weight:600;
}
.icon-btn .count{
  background:var(--espresso); color:var(--cream);
  font-size:11px; min-width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.burger{display:none; background:none; border:none; font-size:20px; color:var(--espresso);}
@media (max-width:860px){ nav.links{display:none;} .burger{display:block;} }

/* ---------- hero ---------- */
.hero{
  position:relative; background:var(--espresso); color:var(--cream);
  overflow:hidden;
}
.hero-inner{
  max-width:1160px; margin:0 auto; padding:88px 24px 78px;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:center;
}
@media (max-width:860px){ .hero-inner{grid-template-columns:1fr; padding:56px 24px;} }
.hero-eyebrow{
  font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--brass);
  font-weight:600; display:block; margin-bottom:16px;
}
.hero h1{
  font-size:clamp(38px,5.6vw,64px); line-height:1.06; font-weight:500;
}
.hero h1 em{font-style:italic; color:var(--brass);}
.hero p.lede{
  font-size:16.5px; line-height:1.65; color:#d8cdb9; max-width:440px; margin-top:20px; font-weight:400;
}
.hero-ctas{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.btn-primary{
  background:var(--brass); color:var(--espresso); border:1.5px solid var(--brass);
  padding:14px 28px; font-weight:600; font-size:14px; border-radius:30px; letter-spacing:0.2px;
  transition:transform .12s ease, background .12s ease;
}
.btn-primary:hover{transform:translateY(-2px); background:var(--brass-dark); border-color:var(--brass-dark);}
.btn-outline{
  background:transparent; color:var(--cream); border:1.5px solid rgba(247,241,230,0.4);
  padding:14px 28px; font-weight:500; font-size:14px; border-radius:30px;
}
.btn-outline:hover{border-color:var(--cream);}
.hero-visual{
  position:relative; aspect-ratio:4/3.3; border-radius:10px; overflow:hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(181,144,79,0.25), transparent 55%),
    linear-gradient(160deg, #4a382a, #2b1f17 70%);
  border:1px solid rgba(247,241,230,0.15);
  display:flex; align-items:center; justify-content:center;
}
.hero-visual svg{width:58%; opacity:0.92;}
.hero-tag{
  position:absolute; bottom:18px; left:18px; background:var(--cream); color:var(--espresso);
  padding:10px 16px; border-radius:4px; font-size:12.5px; font-weight:600;
  display:flex; align-items:center; gap:8px; box-shadow:0 8px 22px rgba(0,0,0,0.28);
}
.hero-tag .swatch{width:12px;height:12px;border-radius:50%;background:var(--brass);}

/* ---------- category strip ---------- */
.cat-split{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line);}
@media (max-width:760px){ .cat-split{grid-template-columns:1fr;} }
.cat-panel{
  background:var(--cream-2); padding:56px 44px; position:relative; overflow:hidden;
  min-height:220px; display:flex; flex-direction:column; justify-content:flex-end;
}
.cat-panel.ladies{background:#efe4d0;}
.cat-panel.boys{background:#e6e6da;}
.cat-panel .big-word{
  position:absolute; top:10px; right:16px; font-family:'Fraunces',serif; font-size:96px; font-weight:600;
  color:rgba(43,31,23,0.06); line-height:1; user-select:none;
}
.cat-panel h3{font-size:28px; margin-bottom:8px;}
.cat-panel p{font-size:14px; color:#5a4c3c; max-width:320px; margin-bottom:18px;}
.cat-panel a.link{
  font-size:13px; font-weight:600; letter-spacing:0.4px; border-bottom:1.5px solid var(--espresso); padding-bottom:2px; width:fit-content;
}

/* ---------- sections ---------- */
section{padding:70px 0;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:36px; flex-wrap:wrap;}
.eyebrow{font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--brass-dark); font-weight:600; display:block; margin-bottom:8px;}
.section-head h2{font-size:clamp(26px,4vw,38px);}
.view-all{font-size:13px; font-weight:600; border-bottom:1.5px solid var(--espresso); padding-bottom:2px;}

/* ---------- product grid ---------- */
.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px 22px;}
@media (max-width:960px){ .prod-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .prod-grid{grid-template-columns:1fr;} }
.prod-card{display:flex; flex-direction:column;}
.prod-thumb{
  aspect-ratio:1/1.08; border-radius:6px; overflow:hidden; position:relative;
  background:linear-gradient(160deg,#e9ddc4,#d9c9a8);
  display:flex; align-items:center; justify-content:center;
}
.prod-thumb img{width:100%;height:100%;object-fit:cover;}
.prod-thumb svg{width:44%; opacity:0.5;}
.prod-thumb .sale-tag{
  position:absolute; top:10px; left:10px; background:var(--espresso); color:var(--cream);
  font-size:11px; font-weight:600; padding:5px 10px; border-radius:20px; letter-spacing:0.3px;
}
.prod-cat-pill{
  position:absolute; top:10px; right:10px; background:rgba(247,241,230,0.9); color:var(--espresso);
  font-size:10.5px; font-weight:600; padding:4px 9px; border-radius:20px; text-transform:uppercase; letter-spacing:0.4px;
}
.prod-info{padding-top:14px;}
.prod-name{font-family:'Fraunces',serif; font-size:17px; font-weight:500; line-height:1.3;}
.prod-name a:hover{color:var(--brass-dark);}
.price-row{display:flex; align-items:baseline; gap:9px; margin-top:6px;}
.price-now{font-weight:600; font-size:15px;}
.price-was{font-size:13px; color:#9c8f78; text-decoration:line-through;}
.stock-note{font-size:12px; color:#8a7c63; margin-top:4px;}
.stock-note.low{color:#a5502f;}

/* ---------- add to cart / buttons on cards ---------- */
.add-form{margin-top:12px;}
.add-btn{
  width:100%; background:var(--espresso); color:var(--cream); border:none;
  padding:11px; font-size:13px; font-weight:600; border-radius:24px; letter-spacing:0.3px;
  transition:background .15s ease;
}
.add-btn:hover{background:var(--brass-dark);}
.add-btn:disabled{background:#c9bfa9; cursor:not-allowed;}

/* ---------- craft/trust strip ---------- */
.craft-strip{background:var(--espresso); color:var(--cream);}
.craft-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(247,241,230,0.14);}
@media (max-width:760px){ .craft-grid{grid-template-columns:1fr;} }
.craft-item{background:var(--espresso); padding:38px 32px;}
.craft-item h4{font-family:'Fraunces',serif; font-size:18px; font-weight:500; margin-bottom:10px;}
.craft-item p{font-size:13.5px; color:#c9bda5; line-height:1.6;}

/* ---------- newsletter ---------- */
.news{padding:64px 0; text-align:center;}
.news h2{font-size:clamp(24px,3.6vw,34px);}
.news p{color:#6b5d47; margin-top:8px; font-size:14px;}
.news-form{display:flex; gap:10px; max-width:400px; margin:24px auto 0; flex-wrap:wrap; justify-content:center;}
.news-form input{
  flex:1; min-width:220px; padding:13px 16px; border:1.5px solid var(--espresso); border-radius:24px;
  background:transparent; font-family:'Work Sans',sans-serif; font-size:14px;
}
.news-form button{
  background:var(--espresso); color:var(--cream); border:none; padding:13px 24px;
  border-radius:24px; font-weight:600; font-size:13px;
}

/* ---------- footer ---------- */
footer{background:var(--espresso-2); color:#d8cdb9; padding:54px 0 26px;}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px;}
@media (max-width:760px){ .foot-grid{grid-template-columns:repeat(2,1fr);} }
.foot-grid h5{font-size:11.5px; letter-spacing:2px; text-transform:uppercase; color:var(--brass); margin-bottom:14px; font-weight:600;}
.foot-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.foot-grid ul a{font-size:13.5px; opacity:0.85;}
.foot-grid ul a:hover{opacity:1; color:var(--brass);}
.foot-about p{font-size:13.5px; line-height:1.6; max-width:280px; opacity:0.85;}
.foot-bottom{
  margin-top:44px; padding-top:20px; border-top:1px solid rgba(216,205,185,0.14);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:11.5px; opacity:0.65;
}

/* ---------- generic page header (shop/product/cart/checkout) ---------- */
.page-head{padding:44px 0 8px;}
.page-head .eyebrow{margin-bottom:6px;}
.breadcrumb{font-size:12.5px; color:#8a7c63; margin-bottom:10px;}
.breadcrumb a:hover{color:var(--brass-dark);}

/* ---------- shop filters ---------- */
.filter-row{display:flex; gap:10px; margin-bottom:34px; flex-wrap:wrap;}
.filter-pill{
  padding:9px 18px; border:1.5px solid var(--espresso); border-radius:24px; font-size:13px; font-weight:600;
}
.filter-pill.active{background:var(--espresso); color:var(--cream);}

/* ---------- product detail ---------- */
.product-detail{display:grid; grid-template-columns:1fr 1fr; gap:52px; padding:20px 0 60px;}
@media (max-width:860px){ .product-detail{grid-template-columns:1fr; gap:30px;} }
.pd-image{
  aspect-ratio:1/1; border-radius:8px; overflow:hidden;
  background:linear-gradient(160deg,#e9ddc4,#d9c9a8);
  display:flex; align-items:center; justify-content:center;
}
.pd-image img{width:100%;height:100%;object-fit:cover;}
.pd-image svg{width:38%; opacity:0.5;}
.pd-cat{font-size:12px; text-transform:uppercase; letter-spacing:2px; color:var(--brass-dark); font-weight:600;}
.pd-title{font-size:clamp(28px,4vw,38px); margin-top:10px;}
.pd-price{display:flex; align-items:baseline; gap:12px; margin-top:16px;}
.pd-price .now{font-size:24px; font-weight:600;}
.pd-price .was{font-size:15px; color:#9c8f78; text-decoration:line-through;}
.pd-desc{margin-top:22px; font-size:14.5px; line-height:1.75; color:#4a4033;}
.pd-stock{margin-top:18px; font-size:13px; font-weight:600; color:var(--forest);}
.pd-stock.low{color:#a5502f;}
.pd-stock.out{color:#a5502f;}
.pd-qty-row{display:flex; align-items:center; gap:16px; margin-top:24px;}
.qty-input{
  width:64px; text-align:center; padding:11px 6px; border:1.5px solid var(--espresso); border-radius:6px;
  font-family:'Work Sans',sans-serif; font-size:14px;
}
.pd-cta{margin-top:26px; display:flex; gap:12px; flex-wrap:wrap;}

/* ---------- cart page ---------- */
.cart-table{width:100%; border-collapse:collapse; margin-bottom:32px;}
.cart-table th{
  text-align:left; font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; color:#8a7c63;
  padding-bottom:14px; border-bottom:1.5px solid var(--espresso); font-weight:600;
}
.cart-table td{padding:18px 10px 18px 0; border-bottom:1px solid var(--line); vertical-align:middle;}
.cart-prod{display:flex; align-items:center; gap:14px;}
.cart-prod .thumb{width:64px;height:64px;border-radius:6px;background:linear-gradient(160deg,#e9ddc4,#d9c9a8); flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.cart-prod .thumb img{width:100%;height:100%;object-fit:cover;}
.cart-prod .thumb svg{width:50%; opacity:0.5;}
.cart-prod .name{font-weight:500;}
.remove-link{font-size:12px; color:#a5502f; font-weight:600;}
.qty-small{width:56px; padding:8px 6px; text-align:center; border:1.5px solid var(--espresso); border-radius:6px;}
.update-btn{
  font-size:12px; font-weight:600; padding:8px 14px; border:1.5px solid var(--espresso); border-radius:20px; background:transparent;
}
.cart-summary{
  margin-left:auto; max-width:340px; background:var(--cream-2); padding:26px; border-radius:8px;
}
.cart-summary .row{display:flex; justify-content:space-between; font-size:14px; padding:8px 0;}
.cart-summary .row.total{font-weight:700; font-size:16px; border-top:1.5px solid var(--espresso); margin-top:8px; padding-top:14px;}
.empty-note{padding:60px 0; text-align:center; color:#8a7c63;}

/* ---------- checkout ---------- */
.checkout-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:48px; padding-bottom:70px;}
@media (max-width:860px){ .checkout-grid{grid-template-columns:1fr;} }
.form-group{margin-bottom:18px;}
.form-group label{display:block; font-size:12.5px; font-weight:600; margin-bottom:7px; letter-spacing:0.3px;}
.form-group input, .form-group textarea, .form-group select{
  width:100%; padding:12px 14px; border:1.5px solid var(--espresso); border-radius:6px;
  font-family:'Work Sans',sans-serif; font-size:14px; background:var(--cream);
}
.form-row-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:520px){ .form-row-2{grid-template-columns:1fr;} }
.pay-options{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
.pay-option{
  display:flex; align-items:flex-start; gap:12px; border:1.5px solid var(--line); border-radius:8px; padding:14px 16px; cursor:pointer;
}
.pay-option input{margin-top:3px;}
.pay-option strong{display:block; font-size:14px;}
.pay-option span{display:block; font-size:12.5px; color:#6b5d47; margin-top:2px;}
.order-review{background:var(--cream-2); padding:24px; border-radius:8px; height:fit-content;}
.order-review .item-row{display:flex; justify-content:space-between; font-size:13.5px; padding:8px 0; border-bottom:1px solid var(--line);}

/* ---------- order success ---------- */
.success-box{max-width:560px; margin:0 auto; text-align:center; padding:70px 24px 90px;}
.success-box .check{
  width:64px;height:64px;border-radius:50%;background:var(--forest); color:var(--cream);
  display:flex; align-items:center; justify-content:center; margin:0 auto 24px; font-size:28px;
}
.order-num{font-family:'Work Sans',sans-serif; font-weight:700; letter-spacing:1px; background:var(--cream-2); padding:10px 18px; border-radius:24px; display:inline-block; margin:14px 0;}

/* ---------- toast ---------- */
#toast{
  position:fixed; bottom:24px; left:50%; transform:translate(-50%,120%);
  background:var(--espresso); color:var(--cream); padding:13px 22px; border-radius:24px;
  font-size:13px; font-weight:500; transition:transform .25s ease; z-index:200;
}
#toast.show{transform:translate(-50%,0);}

.alert{padding:14px 18px; border-radius:8px; font-size:13.5px; margin-bottom:20px;}
.alert-error{background:#f7e2da; color:#8a3b1e;}
.alert-success{background:#e4ead9; color:#3f503c;}