/* =========================================================
 * Attractive v24.3
 *  - パンくず（カテゴリー入り）
 *  - 商品ページの仕様表・開閉式の詳細・スマホの固定購入ボタン
 *  - 関連商品
 *  - 商品カードの2枚目切り替え
 *  - スマホ用ロゴ
 * ======================================================= */

/* ---------- パンくず ---------- */
.at-breadcrumb ol { display:flex; flex-wrap:wrap; align-items:center; gap:4px 0; margin:0; padding:0; list-style:none; }
.at-breadcrumb li { display:flex; align-items:center; min-width:0; }
.at-breadcrumb li + li::before { content:"›"; margin:0 10px; color:#b9b2a6; }
.at-breadcrumb li:last-child span { color:#4b4640; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60vw; }

/* ---------- 商品ページ：カテゴリー名 ---------- */
.at-product-detail-cat a { color:inherit; text-decoration:none; }
.at-product-detail-cat a:hover { text-decoration:underline; text-underline-offset:3px; }

/* ---------- 仕様表 ---------- */
.at-spec { width:100%; border-collapse:collapse; margin:22px 0 24px; font-size:13px; line-height:1.75; border-top:1px solid #e5dfd5; }
.at-spec th, .at-spec td { padding:11px 0; border-bottom:1px solid #eee8de; text-align:left; vertical-align:top; }
.at-spec th { width:7.5em; padding-right:14px; font-weight:400; color:#7a7268; white-space:nowrap; }
.at-spec td { color:#292621; }
.at-spec-note { display:block; margin-top:2px; font-size:12px; }
.at-spec-link { color:#776342; text-decoration:underline; text-underline-offset:3px; }
.at-spec-link::after { content:" ›"; text-decoration:none; }

.at-purchase-note { font-size:12px; color:#6b645a; margin:12px 0 0; }

/* ---------- 開閉式の詳細 ---------- */
.at-acc { margin-top:28px; border-top:1px solid #e5dfd5; }
.at-acc-item { border-bottom:1px solid #e5dfd5; }
.at-acc-item > summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 2px; font-size:14px; font-weight:500; color:#292621; min-height:48px; }
.at-acc-item > summary::-webkit-details-marker { display:none; }
.at-acc-item > summary::after { content:""; width:10px; height:10px; flex:none; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg) translate(-3px,-3px); transition:transform .2s; }
.at-acc-item[open] > summary::after { transform:rotate(225deg) translate(-3px,-3px); }
.at-acc-item > summary:focus-visible { outline:2px solid #b8962e; outline-offset:2px; }
.at-acc-body { padding:0 2px 20px; font-size:13.5px; line-height:1.95; color:#4b4640; }
.at-acc-body p { margin:0 0 10px; }
.at-acc-body a { color:#776342; text-decoration:underline; text-underline-offset:3px; }
.at-acc-body.at-product-description { border-top:0; margin-top:0; padding-top:0; }
.at-acc-body.at-product-description h2 { display:none; }

.at-product-sku { margin:16px 0 0; font-size:11.5px; color:#9a9690; }

/* ---------- 関連商品 ---------- */
.at-related { margin-top:72px; padding-top:48px; border-top:1px solid #e5dfd5; }
.at-related-head { display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.at-related-head h2 { margin:0; font-family:'Noto Serif JP',serif; font-weight:500; font-size:clamp(18px,2vw,22px); letter-spacing:.06em; color:#292621; }
.at-related-head a { font-size:13px; color:#292621; text-decoration:underline; text-underline-offset:4px; }

/* ---------- スマホの固定購入ボタン ---------- */
.at-buybar { display:none; }
@media (max-width:900px) {
  .at-buybar:not([hidden]) {
    display:flex; align-items:center; gap:12px;
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background:rgba(255,255,255,.97); border-top:1px solid #e5dfd5;
    box-shadow:0 -6px 18px rgba(41,38,33,.06);
  }
  .at-buybar-info { min-width:0; display:flex; flex-direction:column; line-height:1.4; }
  .at-buybar-name { font-size:11px; color:#6b645a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .at-buybar-price { font-size:15px; color:#292621; font-variant-numeric:tabular-nums; }
  .at-buybar-price del { font-size:11px; color:#9a9690; margin-right:4px; }
  .at-buybar-btn { margin-left:auto; flex:none; min-height:46px; padding:0 20px; border:0; border-radius:2px; background:#292621; color:#fff; font-size:13.5px; letter-spacing:.06em; cursor:pointer; font-family:'Noto Sans JP',sans-serif; }
  .at-buybar-btn:focus-visible { outline:2px solid #b8962e; outline-offset:2px; }
  body.has-buybar { padding-bottom:calc(70px + env(safe-area-inset-bottom, 0px)); }
  .at-related { margin-top:48px; padding-top:36px; }
}

/* ---------- 商品カード：2枚目に切り替え ---------- */
.pcard .pcard-img { position:relative; }
.pcard .pcard-img .pcard-alt { position:absolute; inset:0; opacity:0; transition:opacity .35s ease; pointer-events:none; }
@media (hover:hover) {
  .pcard:hover .pcard-img.has-alt .pcard-alt,
  .pcard a:focus-visible .pcard-img.has-alt .pcard-alt { opacity:1; }
}
@media (prefers-reduced-motion:reduce) { .pcard .pcard-img .pcard-alt { transition:none; } }
.pcard .new-badge, .pcard .rank-badge { z-index:2; }

/* ---------- スマホ用ロゴ（「Attractive」部分のみ） ---------- */
@media (max-width:900px) {
  .mobile-logo img { width:132px !important; height:auto !important; max-height:none !important; object-fit:contain; }
}

/* ---------- スマホ：閉じているメニュー・検索欄がはみ出す不具合の修正 ----------
 * 高さ0でも上下の余白（padding）が残り、「商品カテゴリー」の行と検索欄の枠が見えていた。
 * 閉じている間は余白を0にし、見えないリンクにキーボードで移動しないよう visibility も切り替える。 */
@media (max-width:900px) {
  .mobile-drawer:not(.open),
  .mobile-search-panel:not(.open) {
    padding-top:0 !important; padding-bottom:0 !important; border-bottom-width:0 !important;
    visibility:hidden;
    transition:max-height .3s ease, padding .3s ease, visibility 0s linear .3s;
  }
  .mobile-drawer.open,
  .mobile-search-panel.open { visibility:visible; transition:max-height .3s ease, padding .3s ease, visibility 0s; }
}

/* ---------- 特定商取引法ページ（v24.4） ---------- */
.law-intro { margin:0 0 24px; font-size:13px; line-height:2; color:#4a4a4a; font-weight:300; }
.law-updated { margin:16px 0 0; font-size:12px; color:#8a8a8a; text-align:right; }
.law-table td a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:600px) {
  .law-table, .law-table tbody, .law-table tr, .law-table th, .law-table td { display:block; width:100%; box-sizing:border-box; }
  .law-table th { padding:14px 16px 4px; white-space:normal; border-bottom:0; }
  .law-table td { padding:4px 16px 16px; }
}