/* CLOSET TOKYO demo styles */
:root{
  --bg:#faf8f5;
  --surface:#ffffff;
  --text:#26231f;
  --muted:#7a7267;
  --accent:#a4623a;
  --accent-dark:#7e4a2a;
  --line:#e6e0d6;
  --sale:#c0392b;
  --new:#3d6b52;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3{font-family:Georgia,"Hiragino Mincho ProN",serif;font-weight:400;margin:0 0 .5em;}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}

/* Announce bar */
.announce{background:var(--accent-dark);color:#fff;text-align:center;font-size:12.5px;padding:8px 12px;letter-spacing:.03em;}

/* Header */
header.site{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100;}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1180px;margin:0 auto;}
.logo{font-family:Georgia,serif;font-size:22px;letter-spacing:.08em;}
.logo span{color:var(--accent);}
nav.main-nav{display:flex;gap:28px;font-size:14px;}
nav.main-nav a:hover{color:var(--accent);}
.header-icons{display:flex;gap:18px;align-items:center;font-size:14px;}
.header-icons a{position:relative;}
.cart-badge{position:absolute;top:-8px;right:-12px;background:var(--accent);color:#fff;font-size:10px;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;}
.hamburger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:6px;}
.hamburger span{width:22px;height:2px;background:var(--text);display:block;}

/* Mobile nav drawer — opaque bg + explicit z-index + will-change per established fix */
.mobile-nav{
  display:none;
  position:fixed;top:0;right:0;height:100vh;width:78%;max-width:320px;
  background:#ffffff;
  opacity:1;
  z-index:999;
  will-change:transform;
  transform:translateX(100%);
  transition:transform .28s ease;
  box-shadow:-4px 0 24px rgba(0,0,0,.15);
  padding:24px;
  overflow-y:auto;
}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav a{display:block;padding:14px 4px;border-bottom:1px solid var(--line);font-size:15px;}
.mobile-nav-close{background:none;border:none;font-size:22px;cursor:pointer;float:right;}
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(20,18,15,.4);z-index:998;}
.mobile-overlay.open{display:block;}

@media(max-width:860px){
  nav.main-nav{display:none;}
  .hamburger{display:flex;}
  .mobile-nav{display:block;}
}

/* Hero */
.hero{position:relative;}
.hero img{width:100%;height:56vh;min-height:360px;object-fit:cover;}
.hero-copy{position:absolute;left:0;bottom:0;padding:36px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35);}
.hero-copy h1{font-size:clamp(26px,4vw,42px);margin-bottom:10px;}
.hero-copy p{margin:0 0 18px;font-size:15px;opacity:.95;}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:12px 28px;font-size:14px;letter-spacing:.04em;border:none;cursor:pointer;transition:background .2s;}
.btn:hover{background:var(--accent-dark);}
.btn-outline{background:transparent;border:1px solid currentColor;color:inherit;}
.btn-block{display:block;width:100%;text-align:center;}

/* Category tiles */
.section{padding:56px 0;}
.section-title{text-align:center;margin-bottom:34px;}
.section-title h2{font-size:26px;}
.section-title p{color:var(--muted);font-size:13.5px;margin:0;}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.cat-tile{position:relative;aspect-ratio:3/4;overflow:hidden;}
.cat-tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.cat-tile:hover img{transform:scale(1.06);}
.cat-tile span{position:absolute;left:14px;bottom:14px;color:#fff;font-size:15px;text-shadow:0 1px 6px rgba(0,0,0,.5);}
@media(max-width:760px){.cat-grid{grid-template-columns:repeat(2,1fr);}}

/* Product grid */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 20px;}
@media(max-width:900px){.product-grid{grid-template-columns:repeat(2,1fr);}}
.card{background:var(--surface);}
.card-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:#f1ede6;}
.card-img img{width:100%;height:100%;object-fit:cover;}
.badge{position:absolute;top:10px;left:10px;font-size:11px;padding:4px 9px;letter-spacing:.03em;color:#fff;}
.badge.new{background:var(--new);}
.badge.sale{background:var(--sale);}
.badge.low{background:#8a6d3b;}
.card-body{padding:12px 2px;}
.card-body .brand{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.card-body h3{font-size:14.5px;margin:4px 0;font-family:inherit;}
.price{font-size:14.5px;}
.price .was{color:var(--muted);text-decoration:line-through;font-size:12.5px;margin-right:6px;}
.price .now{color:var(--sale);}

/* Trust strip */
.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0;}
.trust-item{text-align:center;font-size:13px;color:var(--muted);}
.trust-item strong{display:block;color:var(--text);font-size:14.5px;margin-bottom:4px;font-family:Georgia,serif;font-weight:400;}
@media(max-width:760px){.trust-strip{grid-template-columns:repeat(2,1fr);}}

/* Breadcrumb */
.breadcrumb{font-size:12.5px;color:var(--muted);padding:16px 0;}
.breadcrumb a:hover{color:var(--accent);}

/* Filter bar (product list) */
.list-layout{display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:start;}
@media(max-width:860px){.list-layout{grid-template-columns:1fr;}}
.filter-col h4{font-size:13.5px;margin:0 0 12px;letter-spacing:.03em;}
.filter-group{margin-bottom:26px;border-bottom:1px solid var(--line);padding-bottom:20px;}
.filter-group label{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);padding:5px 0;cursor:pointer;}
.list-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;font-size:13.5px;color:var(--muted);}
.filter-toggle-mobile{display:none;}
@media(max-width:860px){
  .filter-toggle-mobile{display:inline-block;}
  .filter-col{display:none;}
}

/* Product detail */
.pd-layout{display:grid;grid-template-columns:1fr 1fr;gap:52px;}
@media(max-width:860px){.pd-layout{grid-template-columns:1fr;gap:28px;}}
.pd-main-img{aspect-ratio:4/5;overflow:hidden;background:#f1ede6;margin-bottom:10px;}
.pd-main-img img{width:100%;height:100%;object-fit:cover;}
.pd-thumbs{display:flex;gap:10px;}
.pd-thumbs img{width:70px;height:88px;object-fit:cover;cursor:pointer;border:1px solid var(--line);opacity:.75;}
.pd-thumbs img.active{opacity:1;border-color:var(--accent);}
.pd-info .brand{color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;}
.pd-info h1{font-size:24px;margin:6px 0 12px;}
.pd-price{font-size:20px;margin-bottom:18px;}
.pd-price .now{color:var(--sale);}
.stars{color:#d99a3f;font-size:13px;margin-bottom:18px;}
.opt-block{margin-bottom:22px;}
.opt-block h4{font-size:13px;margin:0 0 10px;letter-spacing:.03em;}
.swatches{display:flex;gap:8px;}
.swatch{width:30px;height:30px;border-radius:50%;border:2px solid #fff;outline:1px solid var(--line);cursor:pointer;}
.swatch.active{outline:2px solid var(--accent);}
.size-opts{display:flex;gap:8px;}
.size-opts button{width:44px;height:38px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:13px;}
.size-opts button.active,.size-opts button:hover{border-color:var(--accent);color:var(--accent);}
.qty-row{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.qty-box{display:flex;align-items:center;border:1px solid var(--line);}
.qty-box button{width:32px;height:36px;background:none;border:none;cursor:pointer;font-size:15px;}
.qty-box input{width:36px;text-align:center;border:none;font-size:14px;}
.pd-accordion{margin-top:28px;border-top:1px solid var(--line);}
.acc-item{border-bottom:1px solid var(--line);}
.acc-head{display:flex;justify-content:space-between;align-items:center;padding:15px 2px;cursor:pointer;font-size:13.5px;}
.acc-body{max-height:0;overflow:hidden;transition:max-height .25s ease;font-size:13px;color:var(--muted);}
.acc-body p{padding:0 2px 15px;margin:0;}
.acc-item.open .acc-body{max-height:220px;}
.acc-item.open .acc-head .chev{transform:rotate(45deg);}
.chev{transition:transform .2s;font-size:16px;}

/* Cart page */
.cart-layout{display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:start;}
@media(max-width:860px){.cart-layout{grid-template-columns:1fr;}}
.cart-row{display:grid;grid-template-columns:88px 1fr auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);}
.cart-row img{width:88px;height:110px;object-fit:cover;}
.cart-row .meta{font-size:13.5px;color:var(--muted);}
.cart-row h3{font-size:14.5px;margin:0 0 4px;}
.cart-row .remove{font-size:12px;color:var(--muted);text-decoration:underline;cursor:pointer;background:none;border:none;padding:0;margin-top:8px;}
.summary-box{background:var(--surface);border:1px solid var(--line);padding:24px;}
.summary-box h3{font-size:16px;margin-bottom:18px;}
.summary-line{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:10px;color:var(--muted);}
.summary-line.total{color:var(--text);font-size:16px;border-top:1px solid var(--line);padding-top:14px;margin-top:14px;}
.coupon-row{display:flex;gap:8px;margin:18px 0;}
.coupon-row input{flex:1;border:1px solid var(--line);padding:9px 10px;font-size:13px;}
.empty-hint{font-size:12px;color:var(--muted);margin-top:10px;}

/* Footer */
footer.site{background:#22201c;color:#cfc9bf;padding:52px 0 24px;margin-top:60px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;margin-bottom:36px;}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
footer.site h4{color:#fff;font-size:13.5px;margin:0 0 14px;letter-spacing:.03em;}
footer.site li{font-size:13px;margin-bottom:9px;color:#b3ab9e;}
footer.site .logo{color:#fff;}
.footer-bottom{border-top:1px solid #3a3730;padding-top:20px;font-size:11.5px;color:#8b8378;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;}

.text-center{text-align:center;}
.mt-24{margin-top:24px;}