/* Mio (Made in Ono) — EC Demo */
:root{
  --sky:#5eb9d6;
  --sky-deep:#2a7a98;
  --sky-pale:#e6f3f8;
  --snow:#f4faff;
  --ink:#0f2a3a;
  --ink-sub:#4a6b7c;
  --line:#cfe2eb;
  --shu:#d54a2a;
  --bg:#fcfdfe;
  --serif:'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif;
  --sans:'Noto Sans JP','Hiragino Sans','Yu Gothic',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.7;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none}

/* ===== MOTION / REVEAL ===== */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform}
  .reveal.is-visible{opacity:1;transform:none}
  .prod-row > .prod.reveal,.prod-row > a.reveal{transform:translateY(36px)}
  .prod-row > .prod.is-visible,.prod-row > a.is-visible{transform:none}
  .cat.reveal{transform:translateY(20px) scale(.98)}
  .cat.is-visible{transform:none}
  .hero-mountains{will-change:transform;transition:none}
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none}
}

/* ===== NAV ===== */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.78);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
.nav.is-scrolled{background:rgba(255,255,255,.96);border-bottom-color:var(--line);box-shadow:0 6px 24px -16px rgba(15,42,58,.18)}
.nav-inner{max-width:1280px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:14px;color:var(--ink)}
.brand-logo{height:32px;width:auto;display:block}
.brand-text{display:none}
.nav-links{display:flex;gap:30px;font-size:12px;letter-spacing:.18em}
.nav-links a{padding:6px 0;border-bottom:1px solid transparent;transition:.2s}
.nav-links a:hover{border-bottom-color:var(--sky-deep);color:var(--sky-deep)}
.nav-cta{display:flex;gap:18px;align-items:center;font-size:13px}
.nav-cta .icon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-sub)}
.cart-badge{position:relative;color:var(--ink)}
.cart-badge::after{content:"0";position:absolute;top:-6px;right:-9px;background:var(--shu);color:#fff;font-size:10px;border-radius:99px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-family:var(--sans)}

/* ===== HERO ===== */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;background:
  linear-gradient(180deg,rgba(42,122,152,.05) 0%,rgba(42,122,152,.35) 100%),
  linear-gradient(180deg,#7ec8e3 0%,#5eb9d6 40%,#3a9bc0 100%)}
.hero-mountains{position:absolute;left:0;right:0;bottom:0;height:55%;pointer-events:none}
.hero-mountains svg{width:100%;height:100%;display:block}
.hero-inner{position:relative;z-index:2;padding:0 24px;max-width:880px}
.hero-logo{height:120px;width:auto;margin:0 auto 28px;display:block}
.hero-title{display:none}
.hero-lead{font-family:var(--serif);font-size:42px;font-weight:300;letter-spacing:.16em;line-height:1.6;margin-bottom:44px;text-shadow:0 2px 24px rgba(15,42,58,.18)}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 36px;font-size:12px;letter-spacing:.28em;border:1px solid #fff;transition:transform .35s cubic-bezier(.22,.61,.36,1),background .3s ease,color .3s ease,box-shadow .35s ease,border-color .3s ease;background:transparent;color:#fff;font-family:var(--sans);position:relative;overflow:hidden}
.btn:hover{background:#fff;color:var(--sky-deep);transform:translateY(-2px);box-shadow:0 12px 28px -14px rgba(15,42,58,.5)}
.btn:active{transform:translateY(0);transition-duration:.1s}
.btn-fill{background:#fff;color:var(--sky-deep);border-color:#fff}
.btn-fill:hover{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 14px 32px -14px rgba(15,42,58,.55)}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-dark:hover{background:transparent;color:var(--ink);box-shadow:0 10px 28px -14px rgba(15,42,58,.4)}
.btn-line{display:inline-flex;align-items:center;gap:10px;padding:14px 0;font-size:12px;letter-spacing:.25em;border-bottom:1px solid currentColor;color:var(--sky-deep)}
.hero-stamp{position:absolute;top:64px;right:64px;border:1px solid rgba(255,255,255,.65);color:#fff;font-family:var(--serif);font-size:11px;letter-spacing:.3em;border-radius:50%;width:110px;height:110px;display:flex;align-items:center;justify-content:center;text-align:center;background:rgba(0,0,0,.06);backdrop-filter:blur(4px);line-height:1.6}
.hero-scroll{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);color:rgba(255,255,255,.85);font-size:10px;letter-spacing:.4em;writing-mode:vertical-rl;transition:opacity .35s ease;animation:heroScrollBob 2.6s ease-in-out infinite}
.hero-scroll::after{content:"";display:block;width:1px;height:36px;background:rgba(255,255,255,.6);margin:8px auto 0}
@keyframes heroScrollBob{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(8px)}
}

/* ===== SECTION ===== */
section{padding:120px 24px}
.wrap{max-width:1280px;margin:0 auto}
.section-head{text-align:center;margin-bottom:80px}
.section-eyebrow{font-family:var(--serif);font-size:11px;letter-spacing:.44em;color:var(--sky-deep);margin-bottom:20px;display:inline-block}
.section-eyebrow::before{content:"・　";color:var(--sky)}
.section-eyebrow::after{content:"　・";color:var(--sky)}
.section-title{font-family:var(--serif);font-size:38px;font-weight:400;letter-spacing:.18em;color:var(--ink);margin-bottom:24px;line-height:1.5}
.section-lead{font-family:var(--serif);font-size:15px;color:var(--ink-sub);max-width:620px;margin:0 auto;line-height:2.2;letter-spacing:.06em}

/* ===== CONCEPT ===== */
.concept{background:var(--snow);position:relative;overflow:hidden}
.concept-grid{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center}
.concept-visual{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--sky-pale)}
.concept-visual img{width:100%;height:100%;object-fit:cover}
.concept-text h2{font-family:var(--serif);font-size:32px;font-weight:400;line-height:1.7;letter-spacing:.12em;margin-bottom:36px;color:var(--ink)}
.concept-text p{font-family:var(--serif);font-size:15px;color:var(--ink-sub);line-height:2.4;margin-bottom:24px;letter-spacing:.04em}
.concept-sign{margin-top:48px;display:flex;gap:24px;align-items:center;color:var(--ink-sub);font-size:11px;letter-spacing:.3em}
.concept-sign::before{content:"";width:60px;height:1px;background:var(--sky-deep)}

/* ===== PRODUCTS (3 hero cards) ===== */
/* ===== CLOUD BAND (Echizen-Ono 雲海) ===== */
.cloud-band{
  position:relative;height:560px;overflow:hidden;color:#fff;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.cloud-band-img{
  position:absolute;inset:0;background-size:cover;background-position:center 70%;
  transform:scale(1.04);transition:transform 8s ease-out;
}
.cloud-band:hover .cloud-band-img{transform:scale(1.08)}
.cloud-band-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,42,58,.15) 0%,rgba(15,42,58,.55) 100%);
}
.cloud-band-content{
  position:relative;z-index:2;padding:0 32px;max-width:780px;
}
.cloud-band-eyebrow{
  font-family:var(--serif);font-size:11px;letter-spacing:.6em;
  color:#f4ead2;margin-bottom:28px;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:14px;
}
.cloud-band-eyebrow::before,.cloud-band-eyebrow::after{
  content:"";display:block;width:36px;height:1px;background:#f4ead2;opacity:.7;
}
.cloud-band-title{
  font-family:var(--serif);font-size:44px;font-weight:500;line-height:1.5;
  letter-spacing:.08em;color:#fff;margin-bottom:28px;
  text-shadow:0 2px 24px rgba(0,0,0,.4);
}
.cloud-band-lead{
  font-family:var(--serif);font-size:15px;line-height:2;letter-spacing:.1em;
  color:#f0e7d2;max-width:600px;margin:0 auto;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
@media (max-width:720px){
  .cloud-band{height:420px}
  .cloud-band-title{font-size:30px}
  .cloud-band-lead{font-size:13px}
}

.products{background:#fff}
.prod-row{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.prod{cursor:pointer;display:flex;flex-direction:column;background:var(--snow);transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease,border-color .3s ease;border:1px solid transparent;will-change:transform}
.prod:hover{border-color:var(--sky);transform:translateY(-6px);box-shadow:0 22px 50px -20px rgba(42,122,152,.35)}
.prod-img{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--sky-pale)}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.prod:hover .prod-img img{transform:scale(1.05)}
.prod-tag{position:absolute;top:16px;left:16px;background:var(--ink);color:#fff;font-size:10px;letter-spacing:.25em;padding:5px 12px}
.prod-tag.shu{background:var(--shu)}
.prod-body{padding:28px 24px 32px}
.prod-cat{font-size:10px;letter-spacing:.35em;color:var(--sky-deep);margin-bottom:10px}
.prod-name{font-family:var(--serif);font-size:20px;font-weight:500;margin-bottom:6px;line-height:1.5;letter-spacing:.04em}
.prod-maker{font-size:11px;color:var(--ink-sub);margin-bottom:16px;letter-spacing:.1em}
.prod-desc{font-size:12px;color:var(--ink-sub);line-height:1.9;margin-bottom:20px;min-height:64px}
.prod-bottom{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:18px;font-family:var(--serif)}
.prod-price strong{font-size:22px;font-weight:500;color:var(--ink)}
.prod-price span{font-size:10px;color:var(--ink-sub);margin-left:4px;letter-spacing:.1em}
.prod-arrow{font-size:18px;color:var(--sky-deep);transition:.2s}
.prod:hover .prod-arrow{transform:translateX(6px)}

/* ===== STORY (3 pillars) ===== */
.story{background:linear-gradient(180deg,var(--ink) 0%,#0a1e2c 100%);color:#cfe2eb;padding:140px 24px;position:relative;overflow:hidden}
.story::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 0%,rgba(94,185,214,.18),transparent 55%)}
.story .section-title{color:#fff}
.story .section-eyebrow{color:var(--sky)}
.story .section-lead{color:#9bb8c4}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;position:relative;z-index:1}
.story-card{padding:52px 36px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02);text-align:center;transition:background .35s ease,border-color .35s ease,transform .45s cubic-bezier(.22,.61,.36,1)}
.story-card:hover{background:rgba(94,185,214,.08);border-color:rgba(94,185,214,.3);transform:translateY(-6px)}
.story-icon{width:48px;height:48px;margin:0 auto 24px;color:var(--sky)}
.story-num{font-family:var(--serif);font-size:12px;color:var(--sky);letter-spacing:.4em;margin-bottom:18px}
.story-card h3{font-family:var(--serif);font-size:22px;font-weight:500;margin-bottom:20px;letter-spacing:.1em;color:#fff}
.story-card p{font-size:13px;line-height:2.1;color:#9bb8c4;text-align:left}

/* ===== MAKERS ===== */
.makers .section-head{margin-bottom:64px}
.maker-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.maker{aspect-ratio:4/5;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;text-align:left;transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease,border-color .35s ease;cursor:pointer;color:#fff;position:relative;overflow:hidden;text-decoration:none}
.maker:hover{transform:translateY(-6px);box-shadow:0 24px 50px -18px rgba(15,42,58,.4);border-color:var(--sky-deep)}
.maker-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.2s cubic-bezier(.22,.61,.36,1);will-change:transform}
.maker:hover .maker-bg{transform:scale(1.08)}
.maker-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,42,58,.15) 0%,rgba(15,42,58,.45) 55%,rgba(15,42,58,.85) 100%);transition:background .4s ease}
.maker:hover .maker-overlay{background:linear-gradient(180deg,rgba(15,42,58,.25) 0%,rgba(15,42,58,.6) 55%,rgba(15,42,58,.92) 100%)}
.maker-content{position:relative;z-index:2;color:#fff}
.maker-role{font-family:var(--sans);font-size:10px;letter-spacing:.22em;color:rgba(255,255,255,.85);margin-bottom:10px;text-transform:uppercase}
.maker-name{font-family:var(--serif);font-size:17px;font-weight:500;letter-spacing:.06em;line-height:1.4;margin-bottom:12px;color:#fff}
.maker-link{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.28em;color:rgba(255,255,255,.85);padding-top:12px;border-top:1px solid rgba(255,255,255,.25);transition:color .25s ease}
.maker-link span{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.maker:hover .maker-link{color:#fff}
.maker:hover .maker-link span{transform:translateX(6px)}

/* Text-only maker (no image, plain bg) */
.maker.maker-text{background:linear-gradient(135deg,#1e4e64 0%,#0f2a3a 100%);border-color:rgba(94,185,214,.2)}
.maker.maker-text:hover{border-color:var(--sky);box-shadow:0 24px 50px -18px rgba(42,122,152,.55)}

/* Recruit maker card */
/* ===== makers-recruit (full-width CTA below maker grid) ===== */
.makers-recruit{
  display:block;margin-top:24px;padding:28px 32px;text-align:center;
  background:linear-gradient(135deg,#5eb9d6 0%,#2a7a98 100%);
  color:#fff;border:1px dashed rgba(255,255,255,.4);
  transition:background .35s ease,border-style .25s ease;
}
.makers-recruit:hover{border-style:solid;background:linear-gradient(135deg,#2a7a98 0%,#1c5a73 100%)}
.makers-recruit-eyebrow{font-family:var(--serif-en,var(--serif));font-size:11px;letter-spacing:.45em;color:var(--gold);margin-bottom:10px}
.makers-recruit-title{font-family:var(--serif);font-size:22px;font-weight:500;letter-spacing:.06em;margin-bottom:8px}
.makers-recruit-sub{font-size:12px;letter-spacing:.08em;color:rgba(255,255,255,.85)}
.makers-recruit-sub span{color:var(--gold);margin-left:6px;transition:transform .25s ease;display:inline-block}
.makers-recruit:hover .makers-recruit-sub span{transform:translateX(6px)}

.maker.maker-cta{background:linear-gradient(135deg,#5eb9d6 0%,#2a7a98 100%);border-style:dashed;border-color:rgba(255,255,255,.4);color:#fff}
.maker.maker-cta .maker-overlay{display:none}
.maker.maker-cta:hover{border-style:solid;background:linear-gradient(135deg,#2a7a98 0%,#1c5a73 100%);box-shadow:0 24px 50px -18px rgba(42,122,152,.55)}
.maker.maker-cta .maker-role{color:var(--gold)!important}
.maker.maker-cta .maker-name{font-size:18px}
.maker.maker-cta .maker-link{border-top-color:rgba(255,255,255,.35)}

/* ===== ACTIVITY (event/festival photo strip) ===== */
.activity{background:var(--sky-pale);padding:120px 0 0}
.activity .wrap{padding:0 24px;margin-bottom:80px}
.activity .section-head{margin-bottom:64px}
.activity-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.activity-strip > div{aspect-ratio:3/2;overflow:hidden}
.activity-strip img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.activity-strip > div:hover img{transform:scale(1.04)}

/* ===== NEWSLETTER ===== */
.news{background:#fff;padding:110px 24px}
.news-box{max-width:720px;margin:0 auto;text-align:center;padding:64px 48px;background:var(--sky-pale);border:1px solid var(--line);border-radius:2px}
.news-box h2{font-family:var(--serif);font-size:28px;font-weight:500;margin-bottom:14px;letter-spacing:.1em;color:var(--ink)}
.news-box p{font-size:13px;color:var(--ink-sub);margin-bottom:32px;line-height:1.9}
.news-form{display:flex;gap:0;border:1px solid var(--ink);background:#fff}
.news-form input{flex:1;border:none;padding:16px 20px;font-family:var(--sans);font-size:14px;background:transparent;outline:none}
.news-form button{background:var(--ink);color:#fff;padding:0 28px;font-size:12px;letter-spacing:.25em}

/* ===== FOOTER ===== */
footer{background:var(--ink);color:#9bb8c4;padding:80px 24px 32px}
.foot-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand .brand-logo{height:44px;width:auto;display:block;margin-bottom:18px;filter:brightness(0) invert(1)}
.foot-brand p{margin-top:24px;font-size:12px;line-height:2;max-width:320px}
.foot-col h4{font-family:var(--serif);font-size:13px;font-weight:500;color:#fff;margin-bottom:20px;letter-spacing:.22em}
.foot-col a{display:block;font-size:12px;padding:6px 0;color:#9bb8c4;transition:.2s;letter-spacing:.05em}
.foot-col a:hover{color:var(--sky)}
.foot-bottom{max-width:1280px;margin:32px auto 0;display:flex;justify-content:space-between;font-size:11px;color:#5e7c8a;letter-spacing:.1em}

/* ===== Sub-pages ===== */
.page-head{padding:130px 24px 70px;text-align:center;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--sky-pale) 0%,#fff 100%)}
.page-head .crumb{font-size:11px;letter-spacing:.3em;color:var(--sky-deep);margin-bottom:18px}
.page-head h1{font-family:var(--serif);font-size:44px;font-weight:400;letter-spacing:.18em;margin-bottom:18px;color:var(--ink)}
.page-head .lead{font-family:var(--serif);font-size:14px;color:var(--ink-sub);max-width:640px;margin:0 auto;line-height:2.2}
.list-wrap{max-width:1280px;margin:0 auto;padding:80px 24px}
.list-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:56px;flex-wrap:wrap;gap:16px}
.list-count{font-size:13px;color:var(--ink-sub);letter-spacing:.1em}
.list-filters{display:flex;gap:12px;font-size:11px;letter-spacing:.22em}
.list-filters .chip{padding:9px 18px;border:1px solid var(--line);cursor:pointer;transition:.2s;background:#fff}
.list-filters .chip:hover,.list-filters .chip.on{background:var(--sky-deep);color:#fff;border-color:var(--sky-deep)}

/* product detail */
.pdp{max-width:1280px;margin:0 auto;padding:64px 24px;display:grid;grid-template-columns:1.1fr 1fr;gap:80px}
.pdp-gallery{display:flex;flex-direction:column;gap:12px}
.pdp-main{aspect-ratio:1/1;background:var(--sky-pale);border:1px solid var(--line);position:relative;overflow:hidden;cursor:zoom-in}
.pdp-main img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.pdp-main:hover img{transform:scale(1.02)}
.pdp-main .badge{position:absolute;top:24px;left:24px;background:var(--shu);color:#fff;font-size:11px;letter-spacing:.3em;padding:6px 14px;z-index:2}
.pdp-zoom-btn{
  position:absolute;bottom:14px;right:14px;width:36px;height:36px;
  background:rgba(15,42,58,.7);color:#fff;border:none;border-radius:4px;
  font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  z-index:3;transition:background .2s ease,transform .2s ease;
}
.pdp-zoom-btn:hover{background:rgba(15,42,58,.95);transform:scale(1.08)}
.pdp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pdp-thumb{aspect-ratio:1/1;border:2px solid var(--line);cursor:pointer;background:var(--sky-pale);overflow:hidden;transition:border-color .25s ease,transform .25s ease}
.pdp-thumb img{width:100%;height:100%;object-fit:cover;opacity:.78;transition:opacity .2s ease}
.pdp-thumb:hover{border-color:var(--sky-deep);transform:translateY(-2px)}
.pdp-thumb:hover img{opacity:1}
.pdp-thumb.active{border-color:var(--ink);box-shadow:0 4px 14px -6px rgba(15,42,58,.4)}
.pdp-thumb.active img{opacity:1}

/* Lightbox */
.pdp-lightbox{
  position:fixed;inset:0;background:rgba(10,20,30,.94);
  z-index:9999;display:flex;align-items:center;justify-content:center;
  padding:48px;animation:pdpLbIn .25s ease;
}
@keyframes pdpLbIn{from{opacity:0}to{opacity:1}}
.pdp-lightbox img{max-width:100%;max-height:90vh;object-fit:contain;box-shadow:0 24px 80px rgba(0,0,0,.6);cursor:zoom-out}
.pdp-lightbox-close{
  position:absolute;top:24px;right:32px;width:44px;height:44px;
  background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3);
  font-size:24px;cursor:pointer;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:background .2s
}
.pdp-lightbox-close:hover{background:rgba(255,255,255,.2)}
.pdp-lightbox-hint{
  position:absolute;bottom:24px;left:0;right:0;text-align:center;
  color:rgba(255,255,255,.6);font-size:11px;letter-spacing:.3em;font-family:var(--serif)
}
.pdp-info{padding-top:8px}
.pdp-cat{font-size:11px;letter-spacing:.35em;color:var(--sky-deep);margin-bottom:14px}
.pdp-info h1{font-family:var(--serif);font-size:32px;font-weight:500;letter-spacing:.08em;line-height:1.5;margin-bottom:8px}
.pdp-maker{font-size:13px;color:var(--ink-sub);margin-bottom:32px;letter-spacing:.1em}
.pdp-price{display:flex;align-items:baseline;gap:12px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:24px;font-family:var(--serif)}
.pdp-buynow{background:var(--snow);border:1px solid var(--line);padding:20px;margin-bottom:32px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:12px 16px;align-items:center}
.pdp-buynow .pdp-qty{margin-bottom:0;grid-row:1}
.pdp-buynow .pdp-actions{margin:0;grid-column:2;grid-row:1}
.pdp-meta-inline{grid-column:1/-1;grid-row:2;display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--ink-sub);letter-spacing:.08em;padding-top:12px;border-top:1px dashed var(--line)}
.pdp-meta-inline span{flex:1}
.pdp-meta-inline span:last-child{text-align:right}
.pdp-price strong{font-size:32px;font-weight:500}
.pdp-price .unit{font-size:12px;color:var(--ink-sub)}
.pdp-price .tax{font-size:11px;color:var(--ink-sub);margin-left:auto;letter-spacing:.1em}
.pdp-desc{font-family:var(--serif);font-size:14px;line-height:2.2;color:var(--ink);margin-bottom:32px;letter-spacing:.04em}
.pdp-spec{margin-bottom:32px;border-top:1px solid var(--line)}
.pdp-spec dl{display:grid;grid-template-columns:140px 1fr;border-bottom:1px solid var(--line)}
.pdp-spec dt{padding:14px 0;font-size:12px;letter-spacing:.18em;color:var(--ink-sub)}
.pdp-spec dd{padding:14px 0;font-size:13px}
.pdp-qty{display:flex;align-items:center;gap:0;margin-bottom:20px;border:1px solid var(--line);width:fit-content;background:#fff}
.pdp-qty button{width:44px;height:44px;font-size:18px}
.pdp-qty span{width:48px;text-align:center;font-family:var(--serif);font-size:16px}
.pdp-actions{display:flex;gap:12px}
.pdp-actions .btn-cart{flex:1;justify-content:center;padding:18px;background:var(--ink);color:#fff;border-color:var(--ink);font-size:12px;letter-spacing:.28em;display:inline-flex;align-items:center;gap:10px;border:1px solid var(--ink);cursor:pointer}
.pdp-actions .btn-cart:hover{background:var(--sky-deep);border-color:var(--sky-deep)}
.pdp-actions .btn-cart-disabled,.pdp-actions .btn-cart-disabled:hover{
  background:#cfd9e1;border-color:#cfd9e1;color:#4a6b7c;cursor:not-allowed;
  letter-spacing:.18em;font-weight:500
}
.pdp-sticky-cta-disabled,.pdp-sticky-cta-disabled:active{
  background:#cfd9e1!important;color:#4a6b7c!important;cursor:not-allowed;
  border:none;padding:13px 18px;font-size:12px;letter-spacing:.18em;font-family:var(--sans)
}
.pdp-actions .btn-fav{width:60px;height:60px;border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:18px}
.pdp-note{margin-top:24px;font-size:12px;color:var(--ink-sub);line-height:1.9;padding:18px;background:var(--sky-pale);border-left:3px solid var(--sky-deep)}

/* ===== PDP variant selector (color swatches) ===== */
.pdp-variants{margin-bottom:20px}
.pdp-variants-label{font-size:11px;letter-spacing:.28em;color:var(--ink-sub);margin-bottom:12px;display:flex;align-items:baseline;gap:12px}
.pdp-variants-selected{font-family:var(--serif);font-size:14px;letter-spacing:.08em;color:var(--ink)}
.pdp-variants-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pdp-variant{display:flex;align-items:center;gap:12px;padding:14px;background:#fff;border:1px solid var(--line);cursor:pointer;text-align:left;transition:border-color .15s ease,box-shadow .15s ease}
.pdp-variant:hover{border-color:var(--ink-sub)}
.pdp-variant.active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pdp-variant-swatch{width:32px;height:32px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.08);box-shadow:inset 0 -2px 4px rgba(0,0,0,.12)}
.pdp-variant-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.pdp-variant-name{font-family:var(--serif);font-size:14px;letter-spacing:.06em;color:var(--ink)}
.pdp-variant-sub{font-size:10px;color:var(--ink-sub);letter-spacing:.04em;line-height:1.5}
@media(max-width:720px){
  .pdp-variants-row{grid-template-columns:1fr}
  .pdp-variant-sub{font-size:11px}
}

/* ===== Mobile sticky buy bar ===== */
.pdp-sticky{display:none}
@media (max-width: 980px){
  .pdp-sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -12px 30px -16px rgba(15,42,58,.18);padding:10px 14px 14px;transform:translateY(110%);transition:transform .35s cubic-bezier(.22,.61,.36,1);padding-bottom:max(14px,env(safe-area-inset-bottom))}
  .pdp-sticky.is-visible{transform:translateY(0)}
  .pdp-sticky-inner{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;max-width:600px;margin:0 auto}
  .pdp-sticky-info{min-width:0}
  .pdp-sticky-name{font-family:var(--serif);font-size:12px;color:var(--ink);letter-spacing:.04em;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
  .pdp-sticky-price{font-family:var(--serif);display:flex;align-items:baseline;gap:4px}
  .pdp-sticky-price strong{font-size:18px;font-weight:500;color:var(--ink)}
  .pdp-sticky-price span{font-size:10px;color:var(--ink-sub);letter-spacing:.1em}
  .pdp-sticky-cta{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;font-size:12px;letter-spacing:.18em;padding:13px 18px;font-family:var(--sans);text-decoration:none;border-radius:2px;white-space:nowrap;transition:background .25s ease}
  .pdp-sticky-cta:active{background:var(--sky-deep)}
  /* Ensure footer content not hidden behind sticky bar */
  body:has(.pdp-sticky){padding-bottom:80px}
  footer{padding-bottom:96px!important}
}

/* about page */
.about-hero{padding:140px 24px;text-align:center;background:linear-gradient(180deg,var(--sky) 0%,var(--sky-pale) 100%);color:#fff;position:relative}
.about-hero .hero-logo{height:88px;width:auto;margin:0 auto 32px;display:block}
.about-hero h1{font-family:var(--serif);font-size:48px;font-weight:300;letter-spacing:.2em;margin-bottom:32px;line-height:1.5}
.about-hero p{font-family:var(--serif);font-size:16px;color:#fff;max-width:680px;margin:0 auto;line-height:2.4;text-shadow:0 1px 2px rgba(15,42,58,.1)}
.about-sec{max-width:980px;margin:0 auto;padding:100px 24px}
.about-sec h2{font-family:var(--serif);font-size:26px;font-weight:500;letter-spacing:.12em;margin-bottom:32px;padding-left:24px;border-left:3px solid var(--sky-deep);line-height:1.6}
.about-sec p{font-family:var(--serif);font-size:15px;line-height:2.4;color:var(--ink);margin-bottom:24px;letter-spacing:.04em}
.about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:72px 0}
.stat{text-align:center;border:1px solid var(--line);padding:36px 16px;background:var(--snow)}
.stat-num{font-family:var(--serif);font-size:42px;color:var(--sky-deep);margin-bottom:8px;font-weight:500}
.stat-label{font-size:11px;letter-spacing:.25em;color:var(--ink-sub)}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .nav-inner{padding:12px 16px;gap:8px}
  .nav-links{display:none}
  .brand-logo{height:26px;width:auto}
  .hero{min-height:92vh;padding-bottom:80px}
  .hero-inner{padding-bottom:0}
  .hero-logo{height:88px;width:auto;margin-bottom:24px}
  .hero-lead{font-size:24px;letter-spacing:.1em;margin-bottom:32px}
  .hero-stamp{width:78px;height:78px;top:20px;right:20px;font-size:9px;letter-spacing:.2em}
  .hero-cta{flex-direction:column;align-items:stretch;max-width:280px;margin:0 auto}
  .hero-scroll{bottom:18px;font-size:9px;letter-spacing:.35em}
  .hero-scroll::after{height:24px;margin-top:6px}
  .btn{padding:14px 22px;font-size:11px;justify-content:center}
  section{padding:72px 20px}
  .section-title{font-size:24px;letter-spacing:.12em}
  .section-lead{font-size:13px;line-height:2}
  .concept-grid{grid-template-columns:1fr;gap:40px}
  .concept-text h2{font-size:22px}
  .prod-row{grid-template-columns:1fr;gap:24px}
  .story-grid{grid-template-columns:1fr;gap:20px}
  .story{padding:80px 20px}
  .maker-row{grid-template-columns:repeat(2,1fr);gap:14px}
  .maker{padding:18px}
  .maker-name{font-size:14px}
  .maker-role{font-size:9px;letter-spacing:.18em}
  .maker-link{font-size:9px;letter-spacing:.22em}
  .activity-strip{grid-template-columns:1fr}
  .news-box{padding:48px 24px}
  .news-form{flex-direction:column;border:none}
  .news-form input{border:1px solid var(--ink);margin-bottom:8px;background:#fff}
  .news-form button{padding:14px;border:1px solid var(--ink)}
  .foot-inner{grid-template-columns:1fr 1fr;gap:32px}
  .foot-bottom{flex-direction:column;gap:8px;text-align:center}
  .page-head{padding:80px 20px 50px}
  .page-head h1{font-size:30px;letter-spacing:.14em}
  .pdp{grid-template-columns:1fr;gap:40px;padding:48px 20px}
  .pdp-info h1{font-size:24px}
  .pdp-price strong{font-size:26px}
  .pdp-buynow{display:flex;flex-direction:column;padding:16px;gap:12px}
  .pdp-buynow .pdp-qty{margin:0;align-self:flex-start}
  .pdp-buynow .pdp-actions{margin:0;display:flex;gap:8px;align-items:stretch}
  .pdp-buynow .pdp-actions .btn-cart{flex:1;justify-content:center;padding:16px;font-size:12px;letter-spacing:.22em;background:var(--ink);color:#fff;border-color:var(--ink);text-align:center;white-space:nowrap}
  .pdp-buynow .pdp-actions .btn-fav{width:54px;height:54px;flex-shrink:0}
  .pdp-meta-inline{flex-direction:column;gap:6px;padding-top:10px}
  .pdp-meta-inline span:last-child{text-align:left}
  .about-hero{padding:90px 24px}
  .about-hero h1{font-size:30px;letter-spacing:.12em}
  .about-hero p{font-size:14px}
  .about-stats{grid-template-columns:repeat(2,1fr);gap:14px}
  .about-sec h2{font-size:20px}
}
@media (max-width: 720px){
  /* Footer: 2x2 grid clearer + fonts bumped */
  .foot-inner{grid-template-columns:1fr 1fr;gap:28px 20px;padding:48px 18px 36px}
  .foot-brand{grid-column:1 / -1;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:8px}
  .foot-brand .brand-logo{height:38px}
  .foot-brand p{font-size:13px;line-height:1.95;max-width:none}
  .foot-col h4{font-size:12px;letter-spacing:.18em;margin-bottom:14px}
  .foot-col a{font-size:13px;padding:6px 0;letter-spacing:.04em}
  .foot-bottom{padding:0 18px;flex-direction:column;gap:8px;text-align:center;font-size:10.5px;line-height:1.7;margin-top:24px}

  /* PDP price/action spacing */
  .pdp-price strong{font-size:28px;letter-spacing:.04em}
  .pdp-buynow{padding:14px;gap:14px}
  .pdp-buynow .pdp-qty button{width:36px;height:36px;font-size:18px}
  .pdp-buynow .pdp-qty span{font-size:15px;min-width:32px}
  .pdp-buynow .pdp-actions .btn-cart{padding:18px 12px;font-size:13px;letter-spacing:.14em}
  .pdp-buynow .pdp-actions .btn-fav{width:56px;height:56px;font-size:18px}
  .pdp-meta-inline{font-size:11.5px;letter-spacing:.04em}

  /* Listing toolbar: stack vertically */
  .list-toolbar{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:36px}
  .list-toolbar > *{width:100%}
  .list-count{font-size:12px}
  .list-filters{flex-wrap:wrap;gap:8px;font-size:11px}
  .list-filters .chip{padding:9px 14px;flex:0 0 auto}
  .list-toolbar select{width:100%;padding:12px 14px !important;font-size:13px !important}

  /* Hero: tighter on small screens */
  .hero{min-height:88vh;padding-top:60px}
  .hero-logo{height:72px;margin-bottom:20px}
  .hero-lead{font-size:22px;letter-spacing:.12em;line-height:1.7}
  .hero-cta{max-width:none;padding:0 18px}
  .hero-cta .btn{padding:16px 22px;font-size:12px;letter-spacing:.18em}

  /* Cloud band */
  .cloud-band{height:auto;padding:80px 22px}
  .cloud-band-title{font-size:24px;letter-spacing:.06em;line-height:1.55;margin-bottom:20px}
  .cloud-band-lead{font-size:13px;line-height:1.95;letter-spacing:.06em}
  .cloud-band-eyebrow{font-size:9.5px;letter-spacing:.4em;margin-bottom:20px}
  .cloud-band-eyebrow::before,.cloud-band-eyebrow::after{width:24px}

  /* Concept */
  .concept-visual img{max-width:280px;width:80%;margin:0 auto;display:block}
  .concept-text h2{font-size:21px;line-height:1.6;letter-spacing:.05em}
  .concept-text p{font-size:13px;line-height:2;letter-spacing:.04em}

  /* Section heads/leads inner spacing */
  .section-head{padding:0 6px}

  /* Products section padding */
  .products{padding:60px 18px}

  /* Story section */
  .story{padding:64px 18px}
  .story-card{padding:36px 24px}
  .story-card h3{font-size:18px;letter-spacing:.05em;line-height:1.6}
  .story-card p{font-size:13px;line-height:1.95}

  /* Activity strip */
  .activity-strip{padding:0 18px;gap:14px}
  .activity-strip img{aspect-ratio:5/3;object-fit:cover;width:100%}

  /* Newsletter */
  .news{padding:48px 18px}
  .news-box{padding:42px 22px}

  /* About */
  .about-hero h1{font-size:26px;letter-spacing:.08em}
  .about-hero p{font-size:13.5px;line-height:2;letter-spacing:.04em}
  .about-sec{padding:48px 18px}
  .about-sec h2{font-size:18.5px;line-height:1.6;letter-spacing:.05em;margin-top:32px}
  .about-sec p{font-size:13.5px;line-height:2.1;letter-spacing:.04em}
  .about-stats{grid-template-columns:1fr 1fr;gap:10px}
  .stat{padding:18px 12px}
  .stat-num{font-size:30px}
  .stat-label{font-size:11px;letter-spacing:.08em}

  /* Product cards on listing/index */
  .prod-row{grid-template-columns:1fr;gap:22px;padding:0 4px}
  .prod-body{padding:22px 22px 26px}
  .prod-name{font-size:18px;line-height:1.55;margin-bottom:8px}
  .prod-cat{font-size:10.5px;letter-spacing:.22em;margin-bottom:8px}
  .prod-maker{font-size:11.5px;letter-spacing:.06em}
  .prod-desc{font-size:12.5px;line-height:1.95;min-height:auto}
  .prod-price strong{font-size:21px}

  /* Maker grid: prefer 2-col on small tablet, drop to 1 below */
  .maker-row{grid-template-columns:1fr;gap:12px}
  .maker{aspect-ratio:auto;min-height:130px;padding:22px}
  .maker-name{font-size:15.5px;letter-spacing:.04em}
  .maker-role{font-size:10.5px;letter-spacing:.16em}
  .maker-link{font-size:10.5px;letter-spacing:.18em}

  /* Recruit banner */
  .makers-recruit{padding:22px 20px;margin-top:18px}
  .makers-recruit-title{font-size:18px;letter-spacing:.04em}
  .makers-recruit-sub{font-size:11.5px;line-height:1.75}

  /* PDP gallery thumbs */
  .pdp-thumbs{grid-template-columns:repeat(3,1fr);gap:8px}
  .pdp-zoom-btn{width:32px;height:32px;font-size:14px}

  /* Sticky bar bottom */
  .pdp-sticky-inner{padding:10px 14px}
  .pdp-sticky-cta{padding:12px 18px;font-size:11.5px}
}

@media (max-width: 480px){
  .hero-lead{font-size:20px}
  .hero-logo{height:64px}
  .cloud-band-title{font-size:21px}
}