/* =========================================================
   STILL — monochrome editorial e-commerce (sample)
   共通スタイル（4ページ共有）
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600&family=Noto+Sans+JP:wght@300;400;500&display=swap');

:root{
  --ink:#14130f;--ink-2:#4a4843;--grey:#8d8a83;--grey-2:#b4b1aa;
  --paper:#ffffff;--bg:#f6f4f0;--card:#f3f1ec;--line:#e6e3dd;--line-2:#d9d5cd;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:"Noto Sans JP",sans-serif;color:var(--ink);background:#cdc9c1;
  line-height:1.8;letter-spacing:.02em;font-weight:300;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
.out{font-family:"Outfit",sans-serif;}

.frame{max-width:430px;margin:0 auto;background:var(--paper);position:relative;min-height:100vh;
  box-shadow:0 0 60px rgba(60,55,45,.18);overflow:hidden;}

/* header (sticky) */
.hd{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.hd .logo{font-family:"Outfit",sans-serif;font-weight:500;font-size:21px;letter-spacing:.34em;padding-left:.34em;}
.hd .logo small{display:block;font-size:7.5px;letter-spacing:.4em;color:var(--grey);font-weight:400;margin-top:-2px;}
.hd-nav{display:flex;align-items:center;gap:18px;}
.hd-nav a{font-family:"Outfit",sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);}
.hd-cart{position:relative;}
.hd-cart svg{width:21px;height:21px;display:block;stroke:var(--ink);}
.hd-cart [data-cart-badge]{position:absolute;top:-7px;right:-8px;min-width:16px;height:16px;padding:0 4px;
  display:none;align-items:center;justify-content:center;background:var(--ink);color:#fff;
  font-family:"Outfit",sans-serif;font-size:10px;border-radius:999px;line-height:1;}

/* hero */
.hero img{width:100%;display:block;}

/* section heading */
.sec{padding:46px 20px 10px;}
.sec-eyebrow{font-family:"Outfit",sans-serif;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--grey);text-align:center;}
.sec-title{font-family:"Outfit",sans-serif;font-weight:300;font-size:25px;letter-spacing:.12em;text-align:center;margin-top:8px;text-transform:uppercase;}
.sec-lead{font-size:12.5px;color:var(--ink-2);text-align:center;line-height:2;margin-top:14px;}

/* product grid */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 2px;padding:22px 2px 0;}
.card{display:block;background:var(--paper);}
.card-img{background:var(--bg);overflow:hidden;}
.card-img img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .5s ease;}
.card:hover .card-img img{transform:scale(1.04);}
.card-body{padding:12px 12px 22px;}
.card-cat{font-family:"Outfit",sans-serif;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);}
.card-name{font-size:12.5px;color:var(--ink);margin-top:5px;line-height:1.5;font-weight:400;}
.card-price{font-family:"Outfit",sans-serif;font-size:13px;color:var(--ink);margin-top:6px;letter-spacing:.04em;}

/* editorial band */
.band{padding:50px 28px;text-align:center;background:var(--bg);margin-top:8px;}
.band h2{font-family:"Outfit",sans-serif;font-weight:200;font-size:23px;letter-spacing:.06em;line-height:1.7;text-wrap:balance;}
.band p{font-size:12.5px;color:var(--ink-2);line-height:2.1;margin-top:16px;}
.band .more{display:inline-block;margin-top:24px;font-family:"Outfit",sans-serif;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:4px;}

/* filter chips */
.filter{display:flex;gap:8px;overflow-x:auto;padding:8px 20px 4px;scrollbar-width:none;}
.filter::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto;font-family:"Outfit",sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);background:none;border:1px solid var(--line-2);border-radius:999px;padding:7px 16px;cursor:pointer;
  transition:.2s;}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink);}

/* product detail */
.detail{padding:0 0 40px;}
.d-img{background:var(--bg);}
.d-img img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.d-info{padding:26px 24px 0;}
.d-cat{font-family:"Outfit",sans-serif;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);}
.d-name{font-family:"Outfit",sans-serif;font-weight:400;font-size:21px;letter-spacing:.04em;margin-top:8px;line-height:1.35;}
.d-jp{font-size:12px;color:var(--ink-2);margin-top:6px;}
.d-price{font-family:"Outfit",sans-serif;font-size:19px;margin-top:16px;letter-spacing:.04em;}
.d-price span{font-size:10px;color:var(--grey);margin-left:8px;letter-spacing:.1em;text-transform:uppercase;}
.d-desc{font-size:12.5px;color:var(--ink-2);line-height:2.1;margin-top:18px;}
.d-row{display:flex;align-items:center;gap:14px;margin-top:20px;border-top:1px solid var(--line);padding-top:18px;}
.d-label{font-family:"Outfit",sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);width:54px;}
.d-color{font-size:12.5px;}
.d-sizes{display:flex;gap:8px;flex-wrap:wrap;}
.sz{font-family:"Outfit",sans-serif;font-size:12px;min-width:42px;padding:9px 6px;background:none;border:1px solid var(--line-2);cursor:pointer;transition:.2s;}
.sz.on{background:var(--ink);color:#fff;border-color:var(--ink);}

/* primary button */
.add{display:block;width:100%;margin-top:26px;background:var(--ink);color:#fff;border:none;
  font-family:"Outfit",sans-serif;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  padding:18px;cursor:pointer;transition:.25s;text-align:center;}
.add:hover:not(:disabled){background:#000;}
.add:disabled{background:var(--grey-2);cursor:not-allowed;letter-spacing:.06em;text-transform:none;font-family:"Noto Sans JP";font-size:12.5px;}
.back{display:block;text-align:center;margin:18px 0 0;font-family:"Outfit",sans-serif;font-size:11px;letter-spacing:.14em;color:var(--ink-2);}

/* cart */
.cartwrap{padding:24px 20px 40px;}
.cart-ttl{font-family:"Outfit",sans-serif;font-weight:300;font-size:24px;letter-spacing:.16em;text-transform:uppercase;text-align:center;margin-bottom:8px;}
.cart-empty{text-align:center;padding:50px 0;}
.cart-empty p{color:var(--ink-2);margin-bottom:24px;}
.c-line{display:grid;grid-template-columns:78px 1fr auto;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);}
.c-img{background:var(--bg);}
.c-img img{width:78px;height:78px;object-fit:cover;}
.c-name{font-size:13px;font-weight:400;line-height:1.4;}
.c-meta{font-size:11px;color:var(--grey);margin-top:4px;letter-spacing:.04em;}
.c-qty{display:flex;align-items:center;gap:8px;margin-top:10px;}
.q{width:26px;height:26px;border:1px solid var(--line-2);background:none;font-size:14px;cursor:pointer;line-height:1;}
.c-qty span{font-family:"Outfit",sans-serif;font-size:13px;min-width:16px;text-align:center;}
.rm{margin-left:6px;background:none;border:none;font-size:11px;color:var(--grey);text-decoration:underline;cursor:pointer;font-family:"Noto Sans JP";}
.c-price{font-family:"Outfit",sans-serif;font-size:13px;align-self:center;}
.c-sum{margin-top:22px;border-top:2px solid var(--ink);padding-top:16px;}
.c-sum-row{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;color:var(--ink-2);}
.c-sum-row span:last-child{font-family:"Outfit",sans-serif;}
.c-sum-row.total{font-size:16px;color:var(--ink);font-weight:400;border-top:1px solid var(--line);margin-top:8px;padding-top:12px;}
.c-sum-row.total span{font-weight:500;}

/* toast */
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;font-size:12.5px;letter-spacing:.04em;padding:13px 24px;border-radius:2px;
  opacity:0;pointer-events:none;transition:.3s;z-index:100;white-space:nowrap;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* footer */
.ft{background:var(--ink);color:#fff;text-align:center;padding:44px 28px 40px;margin-top:40px;}
.ft .flogo{font-family:"Outfit",sans-serif;font-weight:400;font-size:24px;letter-spacing:.34em;padding-left:.34em;}
.ft .flogo small{display:block;font-size:8px;letter-spacing:.4em;color:var(--grey-2);margin-top:4px;}
.ft-nav{display:flex;justify-content:center;gap:20px;margin-top:22px;}
.ft-nav a{font-family:"Outfit",sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#cfccc4;}
.ft-note{font-size:11px;color:var(--grey-2);line-height:1.9;margin-top:22px;}
.ft-sample{margin-top:20px;font-size:10px;color:var(--grey-2);border:1px dashed #4a4843;border-radius:8px;padding:13px 14px;line-height:1.9;}