/* =========================================
   NK GAL LP  (CLEAN / fixed title)
   - nk-gallp 専用
========================================= */

/* =========================
   BG (iOSも安定：疑似要素)
========================= */
body{ position: relative; }
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("https://noiseandkisses.com/apps/note/noikisu/lp/202602/gal_bg.webp")
    center top / cover no-repeat;
}
#wrap, #wrapper, #container, #contents, #content, #main, #mainContent,
.l-wrapper, .l-container, .p-wrapper, .p-container,
.body, .wrapper, .container, .contents, .main{
  background: transparent !important;
}

/* =========================
   Base / Vars
========================= */
.nk-gallp{
  --max:1080px;
  --radius:20px;

  --card:#fff;
  --text:#2b2b2b;

  --pink:#ff3d96;
  --pink2:#ff6fb7;
  --yellow:#ffd36a;

  --grad: linear-gradient(180deg, var(--pink2), var(--pink));
  --gradWarm: linear-gradient(90deg, var(--yellow), var(--pink2));

  --shadowCard: 0 14px 34px rgba(0,0,0,.10);
  --shadowPink: 0 12px 28px rgba(255,61,150,.22);

  max-width: var(--max);
  margin: 18px auto 34px;
  padding: 0 10px;
  color: var(--text);
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}
.nk-gallp *{ box-sizing:border-box; }
.nk-gallp a{ color:inherit; text-decoration:none; }

/* =========================
   KV / Lead
========================= */
.nk-gallp .kv{ border-radius:18px; overflow:hidden; }
.nk-gallp .kv img{ width:100%; height:auto; display:block; }

.nk-gallp .lead{
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.78);
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.nk-gallp .lead p{
  margin:0;
  line-height:1.9;
  font-size:14px;
  color: rgba(0,0,0,.72);
}

/* =========================
   Category block
========================= */
.nk-gallp .tapBlock{ margin-top: 18px; text-align:center; }

.nk-gallp .tapTitle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, rgba(255,255,255,.85));
  border: 2px solid rgba(255,61,150,.55);
  box-shadow: 0 10px 22px rgba(255,61,150,.16);
  font-size:14px;
  font-weight:1000;
  letter-spacing:.06em;
  color:#222;
  margin: 0 auto 12px;
}

.nk-gallp .tapGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}
@media (min-width: 720px){
  .nk-gallp .tapGrid.tapGrid--5{
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }
}
@media (max-width: 719px){
  .nk-gallp .tapGrid.tapGrid--5 .tapTile--all{ grid-column: 1 / -1; }
}

.nk-gallp .tapTile{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background: linear-gradient(180deg, #ffe9f2, #ffd7e8) !important;
  border: 2px solid rgba(255,61,150,.70) !important;
  box-shadow: 0 10px 24px rgba(255,61,150,.22) !important;
  padding: 16px 12px;
  min-height: 68px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  transition: transform .15s ease, filter .15s ease;
}
.nk-gallp .tapTile::before{
  content:"";
  position:absolute; inset:-20px;
  background:
    radial-gradient(220px 120px at 25% 20%, rgba(255,211,106,.55), transparent 60%),
    radial-gradient(220px 120px at 85% 30%, rgba(255,111,183,.55), transparent 60%),
    radial-gradient(220px 120px at 60% 85%, rgba(255,211,106,.30), transparent 62%);
  transform: rotate(-8deg);
  opacity: .45;
}
.nk-gallp .tapTxt{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:14px;
  font-weight:1000;
  letter-spacing:.02em;
  color:#222;
}
.nk-gallp .tapCount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:22px;
  padding: 0 10px;
  border-radius:999px;
  background: var(--pink);
  color:#fff;
  font-size:12px;
  font-weight:1000;
  line-height:1;
  box-shadow: 0 8px 16px rgba(255,61,150,.22);
}
.nk-gallp .tapTile:hover{ transform: translateY(-2px); filter: saturate(1.07); }

/* =========================
   Sections
========================= */
.nk-gallp .sec{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.10);
}
.nk-gallp .secHead{ text-align:center; margin-bottom: 12px; }

.nk-gallp .pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 9px 14px;
  border-radius:999px;
  background: var(--gradWarm);
  border: 2px solid rgba(255,61,150,.55);
  box-shadow: 0 10px 22px rgba(255,61,150,.16);
  font-weight: 1000;
  font-size: 12px;
  color:#222;
}
.nk-gallp .secTitle{ margin:10px 0 0; font-size:16px; font-weight:1000; }
.nk-gallp .secSub{ margin:4px 0 0; font-size:12px; color: rgba(0,0,0,.58); line-height:1.6; }

/* =========================
   Rail / Card
========================= */
.nk-gallp .rail{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding: 2px 2px 8px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.nk-gallp .card{
  flex: 0 0 82%;
  max-width: 82%;
  scroll-snap-align: start;
  background: var(--card);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadowCard);
  padding: 12px;
  display:flex;
  flex-direction: column;
  overflow:hidden;
}
@media (min-width: 720px){
  .nk-gallp .rail{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    overflow: visible;
    padding: 0;
    align-items: stretch;
  }
  .nk-gallp .card{ flex:auto; max-width:none; }
}

/* =========================
   cartjs cleanup
========================= */
.nk-gallp .cartjs_product_table{ margin: 6px 0 0 !important; }
.nk-gallp .cartjs_product_table table{
  width:100% !important;
  border-collapse:collapse !important;
  margin:0 !important;
}
.nk-gallp .cartjs_product_table th{ display:none !important; }
.nk-gallp .cartjs_product_table td{ border:0 !important; padding:0 !important; }

/* stock系（文字化け含む）を全部消す */
.nk-gallp .cartjs_stock,
.nk-gallp .cartjs_product_table [class*="stock"],
.nk-gallp .card [class*="stock"],
.nk-gallp .card [id*="stock"],
.nk-gallp .card .stock,
.nk-gallp .card .stock_comment,
.nk-gallp .card .stock_str{
  display:none !important;
}

/* =========================
   Title (ここが本命)
   - cartjs が style="font-size:20px" を付けても !important で潰す
========================= */
.nk-gallp .cartjs_product_name,
.nk-gallp .nk-titleLink{
  display:block !important;
  margin: 10px 0 8px !important;
  padding: 0 !important;
  width: 100% !important;

  font-size: 13px !important;      /* ← 20px を確実に上書き */
  font-weight: 1000 !important;
  line-height: 1.35 !important;
  letter-spacing: .01em !important;

  text-align:center !important;
  color:#111 !important;

  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* リンク時の見た目 */
.nk-gallp a.cartjs_product_name:hover,
.nk-gallp a.nk-titleLink:hover{
  text-decoration: underline !important;
}

/* =========================
   Price
========================= */
.nk-gallp .cartjs_sales_price td{
  font-size:15px !important;
  font-weight:1000 !important;
  color:#111 !important;
  line-height:1.25 !important;
}

/* =========================
   Image
========================= */
.nk-gallp .cartjs_product_img{
  width: 100% !important;
  margin: 10px 0 0 !important;
  padding: 8px !important;
  text-align: center !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.70) !important;
  border: 1px solid rgba(0,0,0,.06) !important;

  aspect-ratio: 4 / 5 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.nk-gallp .cartjs_product_img img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  max-width: none !important;
  max-height: none !important;
  display:block !important;
  border-radius: 12px !important;
}
@media (min-width: 980px){
  .nk-gallp .cartjs_product_img{ aspect-ratio: 3 / 4 !important; }
}

/* =========================
   Select / Hide qty
========================= */
.nk-gallp .card input[type="number"],
.nk-gallp .card select[name="quantity"],
.nk-gallp .card input[name="quantity"],
.nk-gallp .card input[name="product_num"],
.nk-gallp .card [class*="quantity"],
.nk-gallp .card [id*="quantity"]{
  display:none !important;
}

.nk-gallp .cartjs_option select,
.nk-gallp .card select{
  width:100% !important;
  padding:12px 12px !important;
  border-radius:14px !important;
  border:1px solid rgba(0,0,0,.10) !important;
  background: rgba(255,255,255,.75) !important;
  outline:none !important;
  margin-top:10px !important;
}

/* =========================
   Buttons
========================= */
.nk-gallp .cartjs_cart_in{ margin-top: 10px !important; width: 95% !important; }

.nk-gallp .cartjs_cart_in input[type="submit"],
.nk-gallp .card input[type="submit"],
.nk-gallp .card button{
  display:block !important;
  width:100% !important;
  margin-top:10px !important;
  padding: 14px 10px !important;

  border-radius: 999px !important;
  border: 2px solid var(--pink) !important;

  background: var(--grad) !important;
  color:#fff !important;

  font-size: 15px !important;
  font-weight: 1000 !important;
  letter-spacing:.04em !important;

  box-shadow: var(--shadowPink) !important;
  cursor:pointer !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}

.nk-gallp .soldoutBtn{
  display:block !important;
  width:100% !important;
  margin-top:10px !important;
  padding:14px 10px !important;
  border-radius: 999px !important;

  border: 1px solid rgba(0,0,0,.16) !important;
  background: rgba(0,0,0,.08) !important;
  color: rgba(0,0,0,.55) !important;

  font-weight:1000 !important;
  letter-spacing:.06em !important;
  text-align:center !important;
  box-shadow:none !important;
}

/* =========================
   Pouch(1) をPCでも同サイズに
========================= */
@media (min-width: 720px){
  .nk-gallp #pouch .rail{
    display:grid !important;
    grid-template-columns: repeat(4, minmax(240px, 1fr)) !important;
    gap:14px !important;
    overflow:visible !important;
    padding:0 !important;
  }
  .nk-gallp #pouch .card{ grid-column: 2 / span 1 !important; }
}

/* =========================
   Footer
========================= */
.nk-gallp-footer{
  margin: 36px auto 0;
  padding: 28px 14px 36px;
  border-top: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.55));
}
.nk-gallp-footer__inner{ max-width:1080px; margin:0 auto; text-align:center; }
.nk-gallp-footer__title{
  margin:0 0 16px;
  font-size:14px;
  font-weight:1000;
  letter-spacing:.04em;
  color: rgba(0,0,0,.65);
}
.nk-gallp-footer__links{ display:flex; justify-content:center; }
.nk-gallp-footer__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 18px;
  min-width: 240px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff6fb7, #ff3d96);
  color:#fff;
  border: 2px solid #ff3d96;
  box-shadow: 0 12px 26px rgba(255,61,150,.30);
  font-size:14px;
  font-weight:1000;
  letter-spacing:.03em;
}
@media (max-width: 719px){
  .nk-gallp-footer__btn{ width:100%; min-width:0; }
}
/* タイトルを確実にクリックできるように前面化 */
.nk-gallp .cartjs_product_name.nk-titleLink{
  display:block !important;
  position: relative !important;
  z-index: 20 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

/* hoverっぽくしたい場合（任意） */
.nk-gallp .cartjs_product_name.nk-titleLink:hover{
  text-decoration: underline !important;
}