:root{
  --bg:#ffffff;
  --ink:#111;
  --muted:rgba(17,17,17,.58);
  --line:rgba(17,17,17,.18);
  --panel:#ffffff;

  --radius:14px;
  --gutter:20px;

  /* topbar tuning */
  --topbar-pad-top: 24px;   /* 18→24 */
  --topbar-pad-bot: 18px;   /* 14→18 */
  --topbar-btn: 52px;       /* 44→52 */
  --topbar-h: calc((var(--topbar-pad-top) + env(safe-area-inset-top, 0px)) + var(--topbar-btn) + var(--topbar-pad-bot));

  /* Pointer scale */
  --fx-scale: 1;

  /* Trial UI tuning */
  --trial-click-gap: 22px;
  --trial-size: 90px;
  --trial-group-offset-y: 12px;

  /* SOUNDPACK tuning (match Session Collection) */
  --sp-buy-divider-mt: 18px;   /* BUY → 線まで */
  --sp-buy-divider-pt: 30px;   /* 線 → DEMOブロックの上余白 */
  --sp-demo-mt: 26px;          /* DEMO(lockbox)自体の上余白 */
  --sp-next-divider-mt: 4px;   /* DEMOブロック → 次の線まで */
  --sp-next-divider-pt: 14px;  /* 次の線 → 本文まで */
}

/* =========================================================
   Reset & iOS tap / focus highlight kill
========================================================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

a, button, #menuBtn, .hamburger, .toplink{
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

a:focus,
a:active,
button:focus,
button:active,
a:focus-visible,
button:focus-visible{
  outline:none;
  box-shadow:none;
  background-color:transparent;
}

a{ color:inherit; text-decoration:none; }
button{ color:inherit; background:none; border:0; }

/* =========================================================
   Body
========================================================= */
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: Helvetica, Arial, sans-serif;
  letter-spacing:.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-x:hidden;
  padding-top: var(--topbar-h);
}

/* noise */
body::after{
  content:"";
  position:fixed;
  inset:0;
  background-image:url("assets/noise.png");
  background-size:420px 420px;
  opacity:.08;
  pointer-events:none;
  mix-blend-mode:overlay;
  z-index:999;
}

/* =========================================================
   Topbar（常に最前・消えない）
========================================================= */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:9000;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:
    calc(var(--topbar-pad-top) + env(safe-area-inset-top, 0px))
    calc(var(--gutter) + env(safe-area-inset-right, 0px))
    var(--topbar-pad-bot)
    calc(var(--gutter) + env(safe-area-inset-left, 0px));
  background:#fff;
}

.toplink{
  font-size:15px;
  letter-spacing:.30em;
  text-transform:uppercase;
  opacity:.80;
  height: var(--topbar-btn);
  display:inline-flex;
  align-items:center;
}

/* Bag button (topbar) */
.bag-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  margin-right:6px;
  width:32px;
  height:32px;
}
.bag-btn img{
  width:22px;
  height:22px;
  display:block;
}
.bag-count{
  position:absolute;
  top:-4px;
  right:-6px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  line-height:1;
  border-radius:999px;
  background:#111;
  color:#fff;
}
.bag-count[hidden]{ display:none !important; }

/* Hamburger */
.hamburger{
  width: var(--topbar-btn);
  height: var(--topbar-btn);
  display:grid;
  place-items:center;
  cursor:pointer;
  padding:0;
}
.hamburger__lines{
  width:22px;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.hamburger__lines span{
  width:22px;
  height:1px;
  background:rgba(17,17,17,.7);
  transition:transform 180ms ease, opacity 180ms ease;
  transform-origin:center;
}
#menuBtn.is-open .hamburger__lines span:nth-child(1){
  transform: translateY(6px) rotate(45deg);
}
#menuBtn.is-open .hamburger__lines span:nth-child(2){ opacity:0; }
#menuBtn.is-open .hamburger__lines span:nth-child(3){
  transform: translateY(-6px) rotate(-45deg);
}

/* =========================================================
   Drawer（商品ページ上から出る）
========================================================= */
.drawer{
  position:fixed;
  top:var(--topbar-h);
  left:0; right:0; bottom:0;
  z-index:4600;
  background:var(--panel);
  transform:translateX(105%);
  visibility:hidden;
  pointer-events:none;
  transition:transform 420ms ease, visibility 0s linear 420ms;
}
.drawer.is-open{
  transform:translateX(0);
  visibility:visible;
  pointer-events:auto;
  transition:transform 420ms ease;
}
.drawer__inner{
  height:100%;
  padding:
    18px
    calc(var(--gutter) + env(safe-area-inset-right, 0px))
    calc(18px + env(safe-area-inset-bottom, 0px))
    calc(var(--gutter) + env(safe-area-inset-left, 0px));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
body.is-locked{
  overflow:hidden;
  touch-action:none;
}

/* =========================================================
   Accordion（ぬるっと）
========================================================= */
.acc__btn{
  width:100%;
  padding:16px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
  letter-spacing:.34em;
  text-transform:uppercase;
  font-variant-numeric: tabular-nums;
}
.acc__mark{
  font-size:22px;
  font-weight:200;
  opacity:.6;
}
.acc__panel{ padding:6px 0 14px; }

.acc__link{
  display:block;
  padding:8px 0;
  font-size:13px;
  letter-spacing:.32em;
  text-transform:uppercase;
  opacity:.92;
}
.acc__link::before{
  content:"・";
  margin-right:1em;
  opacity:.55;
}

/* Drawer secondary（ABOUT / CONTACT） */
.drawer__secondary{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.drawer__secondary .sec__link{
  display:block;
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  opacity:.92;
  font-variant-numeric: tabular-nums;
  min-width: 10ch;
}

/* =========================================================
   Pointer FX（最前面固定）
========================================================= */
#pointer-fx{
  position:fixed;
  top:0; left:0;
  pointer-events:none;
  z-index:9100;
  transform:translate3d(-9999px,-9999px,0);
  will-change:transform;
}
#pointer-blob{
  position:absolute;
  width:84px;
  height:84px;
  border-radius:999px;
  background:rgba(0,255,90,.85);
  filter:blur(10px);
  transform:translate(-50%,-50%) scale(var(--fx-scale));
  transform-origin:center;
}
#lockbox{
  position:absolute;
  opacity:0;
  transition:opacity 120ms ease;
  transform:translate(-50%,-50%) scale(var(--fx-scale));
  transform-origin:center;
}
#pointer-fx.is-hot #lockbox{ opacity:1; }

/* lockbox visuals（共通） */
.lockbox__rect{
  width:110px;
  height:110px;
  border:1px solid rgba(17,17,17,.28);
  border-radius:14px;
  position:relative;
}
.lockbox__cross{
  position:absolute;
  left:50%;
  top:50%;
  background:rgba(17,17,17,.25);
  transform:translate(-50%,-50%);
}
.lockbox__cross--h{ width:64px; height:1px; }
.lockbox__cross--v{ width:1px; height:64px; }

.lockbox__tick{ position:absolute; background:rgba(17,17,17,.35); }
.lockbox__tick--t{ top:6px; left:50%; width:16px; height:1px; transform:translateX(-50%); }
.lockbox__tick--b{ bottom:6px; left:50%; width:16px; height:1px; transform:translateX(-50%); }
.lockbox__tick--l{ left:6px; top:50%; width:1px; height:16px; transform:translateY(-50%); }
.lockbox__tick--r{ right:6px; top:50%; width:1px; height:16px; transform:translateY(-50%); }

/* =========================================================
   Shop Grid
========================================================= */
.shop__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:26px 18px;
}
@media(min-width:780px){
  .shop__grid{ grid-template-columns:repeat(3,1fr); }
}
@media(min-width:1120px){
  .shop__grid{ grid-template-columns:repeat(4,1fr); }
}

.shop__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin: 0 0 18px;
}
.shop__count{
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  opacity:.70;
  font-variant-numeric: tabular-nums;
  display:inline-block;
  min-width: 8ch;
}

.shop-card__media{ position:relative; overflow:hidden; background:rgba(17,17,17,.06); }
.shop-card__media::before{ content:""; display:block; padding-top:100%; }
.shop-card__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.shop-card__title{
  margin:12px 0 6px;
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.shop-card__price{
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  opacity:.55;
  line-height:1.2;
}

.shop-card.is-soldout .shop-card__price{ opacity: 1; color:#c00000; }
.shop-card__subtitle{ font-size: inherit; letter-spacing: inherit; opacity: 1; }

/* Shop一覧では demo(lockbox) を出さない（商品詳細だけ表示） */
.shopview .shop-card__demo{ display:none !important; }

/* SOUNDPACK card (5:7, no frame) */
.shop-card.is-contain .shop-card__media{ background:none; }
.shop-card.is-contain .shop-card__media::before{ padding-top:140%; } /* 5:7 */
.shop-card.is-contain .shop-card__media img{ object-fit:cover; }

/* =========================================================
   Modal（Topbarを絶対に覆わない）
========================================================= */
.modal-overlay{
  position:fixed;
  top:var(--topbar-h);
  left:0; right:0; bottom:0;
  background:rgba(0,0,0,.08);
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms ease;
  z-index:4200;
}
.modal-overlay.is-open{ opacity:1; pointer-events:auto; }

.modal{
  position:fixed;
  top:var(--topbar-h);
  left:0; right:0; bottom:0;
  background:#fff;
  z-index:4300;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(0,8px,0);
  transition:opacity 180ms ease, transform 180ms ease;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate3d(0,0,0);
}
.modal__body{
  max-width: 1120px;
  margin: 0 auto;
  padding:
    18px
    calc(var(--gutter) + env(safe-area-inset-right, 0px))
    calc(18px + env(safe-area-inset-bottom, 0px))
    calc(var(--gutter) + env(safe-area-inset-left, 0px));
}

@media(max-width:600px){
  .modal .shop-card__title{
    display:block;
    -webkit-line-clamp:unset;
    -webkit-box-orient:unset;
    overflow:visible;
    white-space:normal;
  }
}

@media(pointer:fine){
  :root{ --fx-scale:0.5; }
  html,body,a,button,[role="button"],input,textarea,select,label,summary{ cursor:none !important; }
}

/* =========================================================
   PRODUCT DETAIL
========================================================= */
.product{
  scroll-margin-top: calc(var(--topbar-h) + 14px);
  padding: 28px 0 80px;
  display:none;
}
.product:target{ display:block; }

.product__inner{
  max-width: 1120px;
  margin: 0 auto;
  padding:
    0
    calc(var(--gutter) + env(safe-area-inset-right, 0px))
    0
    calc(var(--gutter) + env(safe-area-inset-left, 0px));
}

.product__gallery{ position:relative; margin-bottom:18px; }

.product__track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}

.product__slide{ margin:0; scroll-snap-align:start; background:rgba(17,17,17,.06); }
.product__slide img{ width:100%; height:auto; display:block; }
.product__hint{ display:none; }

.product__title{
  margin: 8px 0 10px;
  font-size: 14px;
  letter-spacing: .30em;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.25;
}
.product__price{
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: 14px;
}
.product__cta{
  display:block;
  width:100%;
  padding:14px 14px;
  border:1px solid rgba(17,17,17,.28);
  border-radius:14px;
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  text-align:center;
  margin:10px 0 18px;
}
.product__cta.is-disabled{
  border-color: rgba(17,17,17,.12);
  background: rgba(17,17,17,.06);
  color: rgba(17,17,17,.38);
  pointer-events:none;
}

/* ADD TO BAG 下のバー（標準） */
.product__block{
  margin-top: 18px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

@media (min-width: 900px){
  .product__inner{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:28px;
    align-items:start;
  }
  .product__gallery{ margin-bottom:0; }
  .product__track{ grid-auto-columns:100%; }
}

/* =========================================================
   Trial / lockbox (SoundCloud)
========================================================= */

/* lockbox を 84px 基準で安定 */
.sc-lockbox{
  display:block;
  width:84px;
  height:84px;
}
.sc-lockbox .lockbox__rect{
  width:84px;
  height:84px;
  border-radius:14px;
  display:block;
  box-sizing:border-box;
}

/* 試聴は十字を消す */
.sc-lockbox .lockbox__cross{ display:none; }

/* CLICK HERE */
.sc-lockbox .lockbox__rect::after{
  content:"CLICK HERE";
  position:absolute;
  left:50%;
  bottom: calc(var(--trial-click-gap) * -1);
  transform:translateX(-50%);
  font-size:8px;
  letter-spacing:.22em;
  color:rgba(17,17,17,.55);
  white-space:nowrap;
  pointer-events:none;
}

/* 上ラベル（TEASER / 試聴） */
.sc-lockbox .lockbox__rect::before{
  content:"TEASER / 試聴";
  position:absolute;
  left:50%;
  top:-22px;
  transform:translateX(-50%);
  font-size:8px;
  letter-spacing:.22em;
  color:rgba(17,17,17,.55);
  white-space:nowrap;
  pointer-events:none;
}

/* Trial UI unify */
.product .product__trial{
  margin-top: calc(18px + var(--trial-group-offset-y));
  padding-top:0;
  border-top:none;
  display:flex;
  align-items:flex-start;
  gap:18px;
}

/* クリック領域（lock + logo のみ） */
.product .product__trialLink{
  position:relative;
  width: var(--trial-size);
  height: auto !important;
  padding-bottom: calc(var(--trial-click-gap) + 10px) !important;
  display:block;
  flex-shrink:0;
}

/* ロック(枠)を前面固定 */
.product .product__trialLink .sc-lockbox{
  position:relative;
  z-index:2;
}

/* lockbox size */
.product .product__trialLink .lockbox__rect{
  width: var(--trial-size);
  height: var(--trial-size);
}

/* SoundCloud ロゴを背面（枠の“下”に重ねる） */
.product .product__trialLink::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width: var(--trial-size);
  height: var(--trial-size);
  background: url("images/soundcloud.PNG") center / contain no-repeat;
  opacity:.75;
  z-index:1;
  pointer-events:none;
}

/* trial テキストは使わない */
.product .product__trialText,
.product .product__label{
  display:none !important;
}

/* Session Collection の “説明文ブロック（2個目）” だけ詰める */
#session-collection .product__meta > .product__block:nth-of-type(2){
  margin-top: 4px;
  padding-top: 14px;
}

/* SOUNDPACK only : change TEASER -> DEMO */
#pil-soundpack-vol1 .sc-lockbox .lockbox__rect::before{
  content:"DEMO / 試聴";
}

/* Description + Demo table */
.product__includes{
  display:block;
  margin:0;
  padding:0;

  font-family: Helvetica, Arial, sans-serif;
  font-size:12px;
  line-height:1.8;
  letter-spacing:.02em;
  white-space:pre-wrap;
  word-break:break-word;
}
.product__includes .mono{
  display:block;
  margin-top:18px;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:1em;
  line-height:1.9;
  letter-spacing:0;
  white-space:pre;
}

/* SOUNDPACK (pil-soundpack-vol1) : match Session Collection */
#pil-soundpack-vol1 .product__meta > .product__block:nth-of-type(1){
  margin-top: var(--sp-buy-divider-mt);
  padding-top: var(--sp-buy-divider-pt);
}
#pil-soundpack-vol1 .product__trial{
  margin-top: var(--sp-demo-mt) !important;
}
#pil-soundpack-vol1 .product__meta > .product__block:nth-of-type(2){
  margin-top: var(--sp-next-divider-mt);
  padding-top: var(--sp-next-divider-pt);
}

/* =========================================================
   Legal page
========================================================= */
.legal{ display:none; }
.legal:target{
  display:block;
  padding: 96px 20px 80px;
}
.legal__inner{ max-width:640px; margin:0 auto; }
.legal__title{ font-size:14px; letter-spacing:.18em; margin:0 0 28px; }
.legal__h{ font-size:12px; letter-spacing:.16em; margin:22px 0 10px; }
.legal__p{ font-size:12px; line-height:1.9; margin:0 0 8px; opacity:.9; }
.legal__note{ margin-top:26px; font-size:11px; opacity:.7; }
.legal__back{ display:inline-block; margin-top:26px; }

/* =========================================================
   Bag modal layers
========================================================= */
#bagOverlay{
  top: var(--topbar-h);
  left:0; right:0; bottom:0;
  z-index:5200;
}
#bagModal{
  top: var(--topbar-h);
  left:0; right:0; bottom:0;
  z-index:5300;
}

/* =========================================================
   Cart layout (HYKE-ish)
========================================================= */
.cart-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}

.cart-left{
  display:flex;
  gap:14px;
  flex:1;
  min-width:0;
}
.cart-thumb{
  width:74px;
  height:74px;
  border-radius:12px;
  overflow:hidden;
  background: rgba(17,17,17,.06);
  flex-shrink:0;
}
.cart-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.cart-meta{ min-width:0; }
.cart-name{
  font-size:13px;
  line-height:1.35;
  letter-spacing:.06em;
  word-break:break-word;
}
.cart-sub{
  margin-top:8px;
  font-size:11px;
  letter-spacing:.14em;
  opacity:.55;
  text-transform:lowercase;
}

.cart-right{
  width: 160px;
  display: grid;
  justify-items: end;
  row-gap: 12px;
}
.cart-price{
  font-size:12px;
  letter-spacing:.18em;
  padding-top: 10px;
  opacity:.6;
}

.cart-qtybox{
  display: grid;
  grid-template-columns: auto 92px; /* 左：ラベル / 右：input幅 */
  grid-template-rows: auto auto;    /* 1行目：数量+input / 2行目：削除 */
  column-gap: 12px;
  row-gap: 10px;
  align-items: center;
  justify-items: end;
}
.cart-qtylabel{
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: center;
  font-size: 12px;
  letter-spacing: .14em;
  opacity: .75;
}
.cart-qty{
  grid-column: 2;
  grid-row: 1;
  width: 92px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(17,17,17,.22);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  text-align: right;
}
.cart-remove{
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  font-size: 12px;
  letter-spacing: .14em;
  opacity: .75;
  text-decoration: underline;
}

.cart-divider{
  height:1px;
  background: var(--line);
  margin: 32px 0;
}

.cart-summary{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding: 14px 0;
}

.cart-summary-row{
  display: flex;
  justify-content: flex-end;   /* 右寄せ */
  gap: 16px;
  font-size: 12px;             /* ← 削除と同サイズ */
  letter-spacing: .14em;
  opacity: .85;
  padding: 6px 0;
}

.cart-summary-label{
  text-align: right;
}

.cart-summary-value{
  font-size:13px;
  letter-spacing:.10em;
  text-align: right;
  opacity:1;
  min-width: 10ch; 
  font-variant-numeric: tabular-nums;
}


.cart-buy{
  display:block;
  width:100%;
  padding:14px 14px;
  border:1px solid rgba(17,17,17,.28);
  border-radius:14px;
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  text-align:center;
  background:#fff;
  margin-top: 6px;
}

.cart-note{
  margin-top: 18px;
  font-size: 12px;             /* ← 削除と同じ */
  letter-spacing: .14em;
  line-height: 1.8;
  opacity: .75;
}


.bag-close--bottom{
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 4px 0;
  text-align: center;
  font-size: 12px;             /* ← 削除と同じ */
  letter-spacing: .14em;
  opacity: .75;

  text-decoration: underline;
}

/* ===============================
   Empty cart
================================ */

.cart-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 50vh;
  text-align:center;
}

.cart-empty__inner{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.cart-empty__en{
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  opacity:.8;
}

.cart-empty__jp{
  font-size:12px;
  letter-spacing:.14em;
  opacity:.6;
}

[hidden] { display: none !important; }