/* =========================================================
   pdp-base.css
   PDP foundation: layout grid, title band, summary ordering,
   price/cta, basic tokens.
   ========================================================= */

/* ---- Base container & tokens ---- */
.pdp{
  --gap:24px;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--container-gutter);
}

/* Grid layout */
.pdp__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:start; }
.pdp__media{ position:relative; }
.pdp__summary{ position:relative; }

@media (max-width:768px){
  .pdp__grid{ grid-template-columns:1fr; gap:16px; }
}

/* Optional hooks */
.pdp-gallery{}
.pdp-thumbs{ display:grid; gap:8px; }
.pdp-main{ position:relative; }

.pdp-sticky-cta{
  position:sticky; bottom:0; padding:12px;
  background:#fff; border-top:1px solid #eee;
}

/* =========================================================
   Breadcrumb
   ========================================================= */
.woocommerce-breadcrumb{
  font-size:var(--fs-xs); line-height:var(--lh-base);
  color:var(--c-fg-muted); margin-bottom:var(--space-4);
}
.woocommerce-breadcrumb a{ color:var(--c-brand-blue); text-decoration:none; }
.woocommerce-breadcrumb a:hover{ text-decoration:underline; }

@media (min-width: 769px){
  /* 通常ケース：バナーの直下にあるパンくずを下げる */
  body.single-product nav.woocommerce-breadcrumb{
    margin-top: clamp(16px, 2vw, 28px); /* 16〜28pxでなめらかに */
  }

  /* もし通知ラッパが間に出る場合も確実に余白を確保 */
  body.single-product .woocommerce-notices-wrapper + nav.woocommerce-breadcrumb{
    margin-top: clamp(16px, 2vw, 28px);
  }
}

/* =========================================================
   Title Band
   ========================================================= */
.pdp-title-area{
  max-width:var(--container-max);
  margin-inline:auto;
  padding:var(--space-8) var(--container-gutter) var(--space-6);
  position:relative; text-align:center;
}
.product_title.entry-title{
  font-size:clamp(20px,2.2vw,28px);
  font-weight:var(--fw-medium);
  letter-spacing:.02em; line-height:.9; margin:0;
}
.pdp-title-head{ display:block; font-size:clamp(20px,2.2vw,26px); font-weight:var(--fw-regular); margin-bottom:.05em; }
.pdp-title-tail{ display:block; font-size:clamp(17px,1.9vw,21px); font-weight:var(--fw-regular); color:var(--c-fg-muted); margin-top:0; }

/* 商品コード（タイトル帯右／SPは下） */
.pdp-code{
  position:absolute; right:var(--container-gutter); top:50%;
  transform:translateY(-50%); font-size:var(--fs-xs); color:var(--c-fg-muted); white-space:nowrap;
}
@media (max-width:1023.98px){
  .pdp-code{ position:static; transform:none; text-align:right; margin-top:var(--space-2); }
}

/* =========================================================
   Summary / Meta
   ========================================================= */
.pdp-meta{ margin-top:var(--space-4); font-size:var(--fs-sm); color:var(--c-fg-muted); }
.pdp-meta .pdp-code{ margin-bottom:var(--space-1); }

/* SKUをサマリー先頭に */
.pdp__summary .pdp-code-top{
  display:block; width:100%; text-align:right;
  font-size:var(--fs-xs); color:var(--c-fg-muted); margin:0 0 var(--space-2);
}

/* 並び順（CSSのみで制御） */
.pdp__summary{ display:flex; flex-direction:column; gap:var(--space-3); }
.pdp__summary .pdp-code-top{ order:0; }

/* 明示的な並び順（PDP サマリー内） */
.pdp__summary .myro-auto-variant-switches{ order:1; }
.pdp__summary .pdp-assembly-service{ order:2; }
.pdp__summary > .price,
.pdp__summary .woocommerce-variation-price,
.pdp__summary .single_variation .price,
.pdp__summary #pdp-price-slot{ order:3; }
.pdp__summary .pdp-assembly-price-note{ order:4; }
.pdp__summary #myro-cta{ order:5; margin-top:24px; }
.pdp__summary .pdp-guides{ order:6; }
.pdp__summary .pdp-shipGuide{ order:7; }
.pdp__summary .pdp-guide-links{ order:8; }

/* Wooの可変ラッパをフラット化（orderを効かせる） */
.pdp__summary .single_variation_wrap,
.pdp__summary .single_variation{ display:contents; order:2; }
.pdp__summary form.variations_form{ order:1; display:contents; }
.pdp__summary .variations{ order:1; }

/* 価格→数量→カート */
.pdp__summary > .price,
.pdp__summary .woocommerce-variation-price,
.pdp__summary .single_variation .price{ margin-bottom:0; }
.pdp__summary .woocommerce-variation-add-to-cart{ order:3; display:contents; }
.pdp__summary .woocommerce-variation-add-to-cart .quantity{ order:3; }
.pdp__summary .woocommerce-variation-add-to-cart .single_add_to_cart_button{ order:4; }

/* simple product でも自然に */
.pdp__summary form.cart{ display:contents; }
.pdp__summary form.cart .quantity{ order:3; }
.pdp__summary form.cart .single_add_to_cart_button{ order:4; }

/* 後ろ側 */
.pdp__summary .woocommerce-product-rating{ order:90; }
.pdp__summary .woocommerce-product-details__short-description{ order:91; }
.pdp__summary .product_meta{ order:99; }

/* micro tweaks */
.pdp__summary .quantity{ margin:.25rem 0; }
.pdp__summary .single_add_to_cart_button{ align-self:start; }

/* =========================================================
   数量 + カートボタン
   ========================================================= */
.pdp__summary .woocommerce-variation-add-to-cart,
.pdp__summary form.cart{ display:flex; align-items:center; gap:12px; width:100%; }
.pdp__summary .quantity input.qty,
.pdp__summary .quantity select{
  height:44px; min-width:70px; border:1px solid var(--c-border,#ddd);
  border-radius:9999px; padding:0 12px; font-size:14px;
}
.pdp__summary .single_add_to_cart_button{
  flex:1; height:44px; border-radius:9999px; background:#1a1a1a; color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.pdp__summary .single_add_to_cart_button:hover{ background:#000; }

/* =========================================================
   価格表示
   ========================================================= */
.pdp__summary .price{
  font-size:2rem; font-weight:800; color:#111;
  display:inline-flex; align-items:baseline; gap:6px;
}
.pdp__summary .price .woocommerce-Price-amount{
  font-weight:800;
}
.pdp__summary #pdp-price-slot > .price{
  margin-bottom:0;
}
.pdp__summary .price::after{ content:"（税込）"; font-size:.75rem; color:#6b7280; }

/* =========================================================
   Layout spacing
   ========================================================= */
@media (min-width:1024px){ .pdp{ --gap:40px; } }

/* ==============================================
   Mobile: PDP 商品名の行間を調整（読みやすくタイトに）
   ============================================== */
@media (max-width: 768px){
  /* WooCommerceのタイトル想定セレクタをまとめて指定（環境差吸収） */
  body.single-product .pdp-title-area .product_title,
  body.single-product .summary .product_title,
  body.single-product .entry-summary .product_title,
  body.single-product .product .product_title,
  body.single-product h1.product_title {
    line-height: 1.35;                 /* ← 行間（お好みで 1.3〜1.45 程度） */
    letter-spacing: .01em;              /* 微調整 */
    margin: 0 0 var(--space-3);         /* タイトル下の余白も少しだけ詰める */
    font-feature-settings: var(--jp-font-feature, "palt");
  }
}