/* ずかしのず SHOP 商品詳細拡張 v1 (2026-11-01) */
.zuX { --zux-ink: var(--zu-ink, #1a1a1a); --zux-muted: var(--zu-muted, #767676); --zux-line: var(--zu-line, #e5e5e5); --zux-sub: var(--zu-sub-bg, #f5f5f5); --zux-accent: var(--zu-accent, #ffb800); clear: both; width: 100%; max-width: 1180px; margin: 56px auto 0; padding: 0 20px; box-sizing: border-box; color: var(--zux-ink); font-size: 14px; line-height: 1.8; }
.zuX *, .zuX *::before, .zuX *::after { box-sizing: border-box; }
.zuX_sec { margin: 0 0 56px; }
.zuX_h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 0 18px; padding: 0 0 10px; border-bottom: 2px solid var(--zux-ink); font-size: 18px; font-weight: 700; letter-spacing: .04em; }
.zuX_h small { font-size: 12px; font-weight: 400; color: var(--zux-muted); letter-spacing: 0; }
.zuX_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.zuX_card a { display: block; color: inherit; text-decoration: none; }
.zuX_card_img { aspect-ratio: 1 / 1; background: var(--zux-sub); border-radius: 12px; overflow: hidden; }
.zuX_card_img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.zuX_card a:hover .zuX_card_img img { transform: scale(1.04); }
.zuX_card_t { margin: 8px 0 0; font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zuX_card_p { margin: 2px 0 0; font-size: 13px; font-weight: 700; }
.zuX_card_tag { display: inline-block; margin: 6px 0 0; padding: 0 8px; border-radius: 99px; background: var(--zux-sub); font-size: 11px; color: var(--zux-muted); }
.zuX_links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.zuX_link { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px solid var(--zux-line); border-radius: 14px; color: inherit !important; text-decoration: none !important; transition: border-color .2s, transform .2s; }
.zuX_link:hover { border-color: var(--zux-ink); transform: translateY(-2px); }
.zuX_link_ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.zuX_link_ic svg { width: 22px; height: 22px; fill: currentColor; }
.zuX_link_tx b { display: block; font-size: 14px; }
.zuX_link_tx small { display: block; font-size: 12px; color: var(--zux-muted); line-height: 1.5; }
.zuX_yt { background: #ff0033; } .zuX_wp { background: var(--zux-accent); color: var(--zux-ink); } .zuX_x { background: #000; }
/* 説明文の整形 */
.zuDesc { line-height: 1.9; }
.zuDesc_h { margin: 28px 0 10px; padding: 0 0 0 12px; border-left: 4px solid var(--zu-accent, #ffb800); font-size: 16px; font-weight: 700; line-height: 1.5; }
.zuDesc_h:first-child { margin-top: 0; }
.zuDesc_ul { margin: 6px 0 14px; padding: 0; list-style: none; }
.zuDesc_ul li { position: relative; padding: 0 0 0 1.2em; }
.zuDesc_ul li::before { content: ""; position: absolute; left: .2em; top: .8em; width: 6px; height: 6px; border-radius: 50%; background: var(--zu-ink, #1a1a1a); }
.zuDesc_p { margin: 0 0 10px; }
.zuDesc_tbl { width: 100%; margin: 8px 0 16px; border-collapse: collapse; font-size: 13px; text-align: center; }
.zuDesc_tbl th, .zuDesc_tbl td { padding: 8px 6px; border: 1px solid var(--zu-line, #e5e5e5); }
.zuDesc_tbl th { background: var(--zu-sub-bg, #f5f5f5); font-weight: 700; }
.zuDesc_tblWrap { overflow-x: auto; }
.zuDesc_note { font-size: 12px; color: var(--zu-muted, #767676); }
.zuVideo { position: relative; margin: 12px 0 18px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; cursor: pointer; }
.zuVideo img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; }
.zuVideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.zuVideo_btn { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; border: 0; border-radius: 12px; background: #ff0033; cursor: pointer; }
.zuVideo_btn::after { content: ""; position: absolute; left: 28px; top: 14px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff; }
.zuMat { display: flex; gap: 14px; align-items: center; margin: 12px 0 18px; padding: 12px; border: 1px solid var(--zu-line, #e5e5e5); border-radius: 12px; color: inherit !important; text-decoration: none !important; background: #fff; }
.zuMat:hover { border-color: var(--zu-ink, #1a1a1a); }
.zuMat_img { flex: none; width: 112px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--zu-sub-bg, #f5f5f5); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--zu-muted, #767676); }
.zuMat_img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zuMat_lbl { display: inline-block; padding: 0 8px; border-radius: 99px; background: var(--zu-accent, #ffb800); font-size: 11px; font-weight: 700; line-height: 1.8; }
.zuMat_t { display: block; margin: 4px 0 0; font-size: 14px; font-weight: 700; line-height: 1.5; }
.zuMat_d { display: block; font-size: 12px; color: var(--zu-muted, #767676); line-height: 1.5; }
/* スマホ追従購入バー */
.zuBuyBar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: none; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--zu-line, #e5e5e5); transform: translateY(110%); transition: transform .25s; }
.zuBuyBar.is-show { transform: none; }
.zuBuyBar_t { flex: 1; min-width: 0; font-size: 12px; line-height: 1.4; }
.zuBuyBar_t b { display: block; font-size: 15px; }
.zuBuyBar_t span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--zu-muted, #767676); }
.zuBuyBar_btn { flex: none; padding: 12px 22px; border: 0; border-radius: 99px; background: var(--zu-ink, #1a1a1a); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
@media (max-width: 768px) {
.zuX { margin-top: 40px; padding: 0 16px; }
.zuX_sec { margin-bottom: 40px; }
.zuX_grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.zuX_links { grid-template-columns: 1fr; gap: 10px; }
.zuBuyBar { display: flex; }
.zuMat_img { width: 88px; }
}

/* zu-item-extras: このテーマ用の調整（2026-11-01） */
body#shopDetailPage #zuExtras { grid-column:1 / -1; width:100%; max-width:none; min-width:0; margin:32px 0 0; padding:32px 0 0; border-top:1px solid #ddd; }
body#shopDetailPage #zuExtras .zuX_sec { margin:0; }
body#shopDetailPage #zuExtras .zuX_h { font-size:20px; margin:0 0 24px; padding:0; border:0; }
body#shopDetailPage .zuX_link, body#shopDetailPage .zuVideo, body#shopDetailPage .zuMat, body#shopDetailPage .zuMat_img, body#shopDetailPage .zuX_card_img { border-radius:0; }
body#shopDetailPage .zuX_link { border-color:#ddd; }
body#shopDetailPage .zuDesc_h { border-left-color:#222; }
body#shopDetailPage .zuMat_lbl { background:var(--zu-yellow, #ffd86b); }
body#shopDetailPage .zuX_link_ic.zuX_wp { background:var(--zu-yellow, #ffd86b) !important; color:#222 !important; }
body#shopDetailPage .zuBuyBar_btn { border-radius:0; background:#000; }
@media(max-width:768px) {
body#shopDetailPage #zuExtras { width:auto; margin:28px 20px 0; padding:24px 0 0; }
body#shopDetailPage #zuExtras .zuX_h { font-size:18px; }
body.shop #mainFooter { margin-bottom:120px; }
}
