@import "./liftkitvars.css";

/* ===== TOKENS ===== */
:root{
  --bg: #f4f4f4;
  --bg2: #f4f4f4;
  --panel: var(--light__surface_lkv);
  --line: #d9dce2;
  --fg: var(--light__onsurface_lkv);
  --muted: #5a5f67;
  --brand:#cc0000;
  --brand2:#cc0000;
  --shadow:0 8px 22px rgba(17,17,17,.08);

  /* 横幅を大きめ（SP/タブ/PC） */
  --slide-w: 95%;
  --card-h: clamp(460px, 64svh, 620px);
  --center-scale: 1.02;
  --control-size: clamp(44px, 4vw, 52px);
}
@media (min-width:820px){ :root{ --slide-w:72% } }
@media (min-width:1200px){ :root{ --slide-w:62% } }
@media (max-width:600px){ :root{ --card-h: clamp(430px, 62svh, 560px); --center-scale: 1.02; } }
@media (max-width:480px){ :root{ --card-h: clamp(400px, 58svh, 500px); --center-scale: 1.01; } }
@media (min-width: 1280px) and (max-width: 1536px) and (max-height: 900px){
  :root{
    --slide-w: 68%;
    --card-h: clamp(400px, 56svh, 520px);
    --center-scale: 1.015;
    --control-size: clamp(40px, 3.2vw, 46px);
  }
  .page-head{ padding: 42px 0 12px; }
  .section{ padding: 6px 0 44px; }
  .car-viewport{ padding-block: clamp(10px, 1.9vh, 16px); }
}

/* ===== BASE ===== */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"Helvetica Neue","Noto Sans JP","Noto Sans",Arial,system-ui,-apple-system,"Segoe UI","Hiragino Sans","Roboto",sans-serif;
  line-height:1.75; color:var(--fg);
  background: var(--bg);
  background-color: var(--bg);
}
.container{max-width:1180px;margin:0 auto;padding:0 min(2.4vw, 18px)}
.page-head{padding:54px 0 18px}
.title{
  font-size:clamp(26px,4vw,38px); margin:0 0 6px; font-weight:900; letter-spacing:.02em;
  color:var(--brand);
}
.lede{margin:0;color:var(--muted)}
.section{padding:8px 0 56px}

/* ===== CAROUSEL ===== */
.carousel{position:relative}
.car-viewport{
  overflow:auto hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;

  /* 端カードも中央に寄せられる左右パディング（slide幅から算出） */
  --pad-inline: max(var(--lk-size-xs), (100% - var(--slide-w)) / 2);
  padding: clamp(14px, 2.6vw, 22px) var(--pad-inline);
  scroll-padding-inline: var(--pad-inline);

  border-radius: calc(var(--lk-size-xs) + var(--lk-size-2xs));
  background:#ffffff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  position:relative;
}
.car-viewport::-webkit-scrollbar{display:none}
.sr-live{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.car-track{display:flex; gap:clamp(12px, 2vw, 18px); margin:0; padding:0; list-style:none}
.product-slide{
  flex:0 0 var(--slide-w);
  max-width:var(--slide-w);
  scroll-snap-align:center;
  position:relative; z-index:0;
}

/* ===== CARD（高さ統一＋見切れ対策） ===== */
.product-card{
  display:flex; flex-direction:column;
  min-height:var(--card-h);
  height:auto;
  background:var(--panel); border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden; box-shadow:var(--shadow);
  transform-origin:center; will-change:transform, box-shadow;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, filter .35s;
}
.product-card--interactive{ cursor:pointer; }
.product-card--interactive:focus-visible{
  outline:3px solid color-mix(in srgb, var(--brand) 70%, #ffffff);
  outline-offset:4px;
}
.product-card--interactive:hover{ box-shadow:0 12px 30px rgba(17,17,17,.12); }
.product-media img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; display:block;
}
.product-body{
  display:flex; flex-direction:column; gap:10px;
  padding:clamp(14px, 2vw, 18px) clamp(14px, 2vw, 18px) clamp(16px, 2.4vw, 22px); min-height:0;
  line-height:1.6;
  flex:1;
}
.product-title{margin:0; font-size:clamp(18px,2.4vw,22px); font-weight:900; line-height:1.35}
.product-sub{margin:0; color:var(--muted); font-weight:700; font-size:.95rem; line-height:1.5}
.product-desc{margin:0; color:#2d323a}
.clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ===== TAGS（アイコン付き・4つ以上で改行） ===== */
.tags{
  list-style:none;
  display:flex; gap:10px; margin:8px 0 12px; padding:0;
  flex-wrap: wrap;           /* 折り返し許可 */
  overflow: visible;
}
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:.24rem .6rem; border-radius:999px; border:1px solid var(--line);
  color:#5f656f; font-weight:700; font-size:.86rem; white-space:nowrap;
  background:#ffffff;
}
.tag img{
  width:18px; height:18px; display:block; object-fit:contain; border-radius:4px; background:#f1ede5
}
/* 強制改行マーカー（JSが挿入） */
.tags .br{
  flex-basis:100%;
  height:0; padding:0; border:0; margin:0;
}

/* ===== ACTIONS ===== */
.actions{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.product-card .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  width:100%;
  min-height: 46px;
  padding:.8rem 1.2rem;
  border-radius:8px;
  border:1px solid var(--line);
  background:#ffffff;
  color:var(--fg);
  font-size:1rem;
  font-weight:900;
  letter-spacing:.02em;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(17,17,17,.08);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease, background .2s ease, color .2s ease;
}
.product-card .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(17,17,17,.14);
  text-decoration:none;
}
.product-card .btn:active{ transform:translateY(0); }
.product-card .btn--primary{
  background:var(--brand);
  border:1px solid var(--brand);
  color:#fff;
  font-size:1.05rem;
  letter-spacing:.03em;
  box-shadow:0 8px 20px rgba(204,0,0,.24);
}
.product-card .btn--ghost{
  border:1px solid var(--brand);
  color:var(--brand);
  background:#ffffff;
  box-shadow:none;
}

/* ===== CENTER EMPHASIS（中央だけ拡大） ===== */
.product-slide.is-center{ z-index:1 }
.product-slide.is-center .product-card{
  transform:scale(var(--center-scale));
  box-shadow:0 14px 34px rgba(17,17,17,.16);
  filter:none;
}

/* ===== CONTROLS ===== */
.car-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:var(--control-size); height:var(--control-size); border-radius:50%; border:1px solid var(--line);
  background:#ffffff;
  color:var(--fg); cursor:pointer; box-shadow:var(--shadow); z-index:2;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.car-btn.prev{left:clamp(6px, 1.4vw, 12px)} .car-btn.next{right:clamp(6px, 1.4vw, 12px)}
.car-btn:hover:not([disabled]){
  transform: translateY(-50%) scale(1.02);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
}
.car-btn:focus-visible{
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
.car-btn[disabled]{opacity:.45; cursor:not-allowed}
.car-dots{display:flex; gap:10px; justify-content:center; margin-top:14px}
.car-dot{
  width:12px; height:12px; padding:0;
  border-radius:50%; border:1px solid var(--line);
  background:transparent; cursor:pointer;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.car-dot:hover{ transform: scale(1.1); }
.car-dot[aria-selected="true"]{background:var(--brand); border-color: var(--brand)}
.car-dot:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.hint{margin:.7rem 0 0; text-align:center; color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* iOS scroll snapping stability */
.car-viewport{ overscroll-behavior-x: contain; }