/* 商品/テーマ详情页 —— 全部作用域在 .product(避免污染全站)。
   值逐字取自 harvested addition.css / custom.css(权威),已标 desktop + ≤768。
   REUSE(不在此重定义):.breadcrumb / .slider-nav / .section / .section-title
   / .magazine-grid / .article-item(--magazine) / .button-common —— 见 home.css。 */

/* ===== §1 顶部信息条 marquee(¥500 クーポン)===== */
/* 顶部通告条:原天蓝通栏 → 极淡 tint(2026-08-02 视觉返修「C 版」同口径) */
.info-bar { overflow: hidden; font-size: 12px; color: var(--color-ink); background: var(--color-tint); }
.info-bar__center {
  display: flex; align-items: center; justify-content: center;
  padding: 3px 10px; line-height: 1.5; text-align: center;
}
.info-bar__center:hover { opacity: .7; }
/* `.info-bar__yen` 已删(2026-08-06):这个位是 dozo 的 ¥ 符号,换皮时塞了个 🍁,
   清 emoji 后整条信息条改成纯排版(句尾 → 代替 👉),选择器再无使用者。 */
.info-bar__marquee { display: none; padding: 3px 0; }
.info-bar__track { display: flex; width: max-content; animation: infobar-scroll 32s linear infinite; }
.info-bar__item { flex: 0 0 auto; padding: 0 1rem; white-space: nowrap; }
@keyframes infobar-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 768px) {
  .info-bar__center { display: none; }
  .info-bar__marquee { display: block; }
}

/* ===== §2 面包屑(覆盖共享 .breadcrumb 为 PDP 白底/间距;≤768 隐藏)===== */
/* 几何沿用全局 .breadcrumb(37px 0 40px + ol 0 65px),此处只加 PDP 白底 */
.product .breadcrumb { max-width: 100%; background: var(--color-white); }
@media (max-width: 768px) { .product .breadcrumb { display: none; } }

/* ===== §3 主详情区 2 列 grid ===== */
.product .product-detail { padding: 60px 0 120px; background: var(--color-white); }
.product-detail__inner { width: 100%; max-width: 1034px; padding-inline: 10px; margin-inline: auto; }
.product-detail__grid { display: grid; grid-template-columns: 472px 1fr; gap: 82px; }
.product-detail__right { padding-right: 50px; }
/* contents 间隔(桌面) */
.pd-c03 { padding-top: 30px; margin-top: 40px; margin-bottom: 33px; border-top: 1px solid #E5E5E5; }
.pd-c04 { margin-top: 56px; }
.pd-c05 { padding-top: 30px; padding-bottom: 26px; border-top: 1px solid #E5E5E5; }
.pd-c06 { padding-top: 18px; padding-bottom: 30px; border-top: 1px solid #E5E5E5; }

@media (769px <= width <= 1034px) {
  .product-detail__grid { grid-template-columns: minmax(0, 472px) 1fr; gap: 5%; }
}
@media (max-width: 768px) {
  .product .product-detail { padding: 27px 0 80px; }
  .product-detail__inner { padding-inline: var(--inner-padding); }
  /* 左右列 display:contents → 6 个 contents 直接进 grid,用 order 纵向重排 */
  .product-detail__left, .product-detail__right { display: contents; }
  .product-detail__grid { display: grid; grid-template-columns: 1fr; }
  .pd-c01 { order: 1; } .pd-c02 { order: 2; } .pd-c03 { order: 3; }
  .pd-c04 { order: 4; } .pd-c05 { order: 5; } .pd-c06 { order: 6; }
  .product-detail__right { padding-right: 0; }
  .pd-c02 { margin-top: 30px; }
  .pd-c03 { padding-top: 26px; margin-top: 35px; }
  .pd-c04 { padding-bottom: 48px; margin-top: 40px; }
  .pd-c06 { display: flex; flex-direction: column; align-items: center; padding-top: 30px; }
}

/* ===== §4 图片画廊(容器 NEW;数字导航 REUSE .slider-nav)===== */
.product-gallery__frame { border: 1px solid #707070; }
.product-gallery__slides li {
  display: none; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; height: 100%;
}
.product-gallery__slides li.is-current { display: flex; }
.product .product-gallery img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; }
.product-gallery__nav { margin-top: 20px; }   /* 覆盖 .slider-nav 的 margin-top:40px */
@media (max-width: 768px) {
  .product-gallery__slides li { width: 100%; max-width: calc(100vw - var(--inner-padding) * 2 - 2px); }
  .product-gallery__nav .slider-nav__arrow { width: 30px; height: 27px; }
}

/* ===== §5 标题 / 价格 / 税 / 收藏 ===== */
.product .product-title { font-size: 25px; font-weight: 700; line-height: 1.4375; letter-spacing: -0.009em; }
.product .price-group {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: space-between; margin-top: 14px;
}
.product .price { font-size: 23px; font-weight: 700; letter-spacing: .045em; }
.product .tax-text { margin-left: 10px; font-size: 11px; }
.product .like-button {
  color: var(--color-ink);
  display: grid; place-items: center; width: 53px; height: 53px;
  background: var(--color-white); border: 1px solid var(--color-ink); border-radius: 50%;
  transition: opacity var(--transition-duration);
}
.product .like-button svg { width: 21px; }
.product .like-button:hover { opacity: .7; }
.product .like-button.is-liked svg path { fill: var(--color-ink-title); }
@media (max-width: 768px) {
  .product .product-title { font-size: 20px; line-height: 1.28; letter-spacing: -0.005em; }
  .product .price-group { gap: 5px; margin-top: 30px; }
  .product .price { font-size: 20px; }
  .product .tax-text { font-size: 12px; }
  .product .like-button { width: 38px; height: 38px; }
  .product .like-button svg { width: 15px; }
}

/* ===== §6 购买 / ギフト按钮(NEW 组件,非 button-common)===== */
.product .detail-cart-group { display: flex; flex-direction: column; gap: 22px; margin-top: 22px; }
.product .add-to-cart {
  display: flex; gap: 16px; align-items: center; justify-content: center;
  width: 100%; max-width: 286px; height: 53px; padding: 5px;
  font-size: 13px; font-weight: 500; letter-spacing: .045em;
  color: var(--color-white); background: var(--color-ink-soft); border: 1px solid var(--color-ink-soft); border-radius: 40px;
  transition: opacity var(--transition-duration);
}
.product .add-to-cart > svg path, .product .add-to-cart > svg circle { stroke: var(--color-white); }
.product .add-to-cart:hover { opacity: .7; }
.product .cart-share-button {
  display: flex; gap: 10px; align-items: center; justify-content: center;
  width: 100%; max-width: 286px; height: 53px; padding: 5px;
  font-size: 13px; font-weight: 500; letter-spacing: .045em;
  color: var(--color-ink); background: var(--color-white); border: 1px solid var(--color-ink); border-radius: 40px;
  transition: opacity var(--transition-duration);
}
.product .cart-share-button > svg { width: 32px; height: 34px; }
.product .cart-share-button > svg path { stroke: var(--color-ink); }
.product .cart-share-button:hover { opacity: .7; }
@media (max-width: 768px) {
  .product .detail-cart-group { gap: 17px; margin-top: 30px; }
  .product .add-to-cart, .product .cart-share-button { max-width: 100%; }
  .product .cart-share-button { gap: 12px; }
}

/* ===== §7 含まれるギフト清单(横向 list-row)===== */
.product .detail-gift-group__title {
  margin-bottom: 13px; font-size: var(--text-lg); font-weight: 700;
  line-height: 1.4444; letter-spacing: .045em;
}
.product .detail-gift-group__list { display: flex; flex-direction: column; gap: 5px; }
.product .detail-gift-group__notion { margin-top: 20px; font-size: var(--text-xs); letter-spacing: .01em; }
.product .gift-item {
  position: relative; display: grid; grid-template-columns: 100px 1fr; gap: 15px;
  width: 100%; padding: 11px 40px 10px 14px; background: #F4EFEF; text-align: left;
  transition: opacity var(--transition-duration);
}
.product .gift-item::after {
  position: absolute; top: 0; right: 17px; bottom: 0; margin: auto; content: "";
  width: 8px; height: 14px;
  background: url(/assets/common/icon-angle.svg) no-repeat center / contain;
  transition: translate var(--transition-duration);
}
.product .gift-item:hover { opacity: .7; }
.product .gift-item:hover::after { translate: 5px 0; }
.product .gift-item__thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.product .gift-item__body { display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.product .gift-item__title { display: block; max-width: 234px; min-height: 52px; font-size: 13px; font-weight: 700; line-height: 1.3077; letter-spacing: 0; }
.product .gift-item__text { display: block; max-width: 234px; font-size: 10px; line-height: 1.2; letter-spacing: .045em; }
@media (max-width: 768px) {
  .product .detail-gift-group__title { text-align: center; }
}

/* ===== §8 テーマ故事长文 ===== */
.product .editor-sec { font-size: 15px; line-height: 2.0667; letter-spacing: .045em; }
.product .editor-sec > * { margin: 1.5em 0; }
.product .editor-sec > *:first-child { margin-top: 0; }
/* 段内句子高亮:柔和荧光笔(纯色底,非渐变 marker) */
.product .editor-sec .hl { padding: 0 1px; }
.product .editor-sec .hl--pink { background-color: #f8cac6; }
.product .editor-sec .hl--green { background-color: #bfedd2; }
.product .editor-sec .hl--yellow { background-color: #fbeeb8; }
@media (max-width: 768px) {
  .product .editor-sec { font-size: 14px; line-height: 2.2143; }
}

/* ===== §9 注意事項 + タグ ===== */
.product .order-cautions { margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid #E5E5E5; }
.product .order-cautions > p { font-size: 11px; }
.product .order-cautions ul li span { position: relative; padding-left: 10px; font-size: 11px; }
.product .order-cautions ul.precaution-items li span::before {
  content: ""; position: absolute; top: 2px; left: 0;
  width: 9px; height: 9px; background: var(--color-ink); border-radius: 10px;
}
.product .detail-tag-list { margin-top: -7px; margin-left: -5px; }   /* 负 margin 抵消 a 外距 */
.product .detail-tag-list > a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 70px; height: 33px; padding: 2px 12px; margin: 7px 5px;
  font-size: var(--text-sm); letter-spacing: 0;
  background: #F4EFEF; border: 1px solid #F4EFEF; border-radius: 33px;
  transition: opacity var(--transition-duration);
}
.product .detail-tag-list > a:hover { opacity: .7; }

/* ===== §10 Share + Artist ===== */
.product .detail-share { display: flex; gap: 40px; align-items: center; }
.product .detail-share__title { font-family: var(--font-en); font-size: 19px; font-style: italic; }
.product .detail-share__list { display: flex; gap: 20px; align-items: center; }
.product .detail-share__list li { width: 30px; }
.product .detail-share__list li a { display: block; transition: opacity var(--transition-duration); }
.product .detail-share__list li a:hover { opacity: .7; }
.product .detail-artist { display: grid; grid-template-columns: 96px 1fr; gap: 20px; margin-top: 20px; }
.product .detail-artist__thumb a { display: block; overflow: hidden; border: 1px solid var(--color-ink); border-radius: 50%; }
.product .detail-artist__thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: scale var(--transition-duration); }
.product .detail-artist__thumb a:hover img { scale: 1.1; }
.product .detail-artist__body { display: flex; flex-direction: column; gap: 10px; justify-content: center; font-size: var(--text-base); font-weight: 700; }
.product .detail-artist__name a { text-decoration: underline; transition: opacity var(--transition-duration); }
.product .detail-artist__name a:hover { opacity: .7; }

/* ===== §11b pairs well with(微调复用的 .section 间距贴近 live)===== */
.related-magazine.section { padding: 60px 0; background: var(--color-bg); border-top: 1px solid var(--color-border); }
.related-magazine .section-title { margin-bottom: 80px; }
@media (max-width: 768px) {
  .related-magazine.section { padding: 40px 0; }
  .related-magazine .section-title { margin-bottom: 10px; }
}
/* goods cards in the magazine grid slot: drop article separators, use shelf gaps instead */
.related-magazine .magazine-grid { gap: 40px 36px; }
.related-magazine .magazine-grid > * { padding: 0; border-left: none; }
@media (max-width: 768px) {
  .related-magazine .magazine-grid > * { padding: 0 30px; border-top: none; }
}

/* ===== §11c 移动端 sticky 购买条(仅 ≤768)===== */
.detail-bottom-fix { position: fixed; left: 0; right: 0; bottom: -200px; z-index: 1; display: none; transition: bottom var(--transition-duration); }
.detail-bottom-fix.active { bottom: 0; }
.detail-bottom-fix__inner { padding: 1.2rem .8rem; background: var(--color-white); border-top: 1px solid var(--color-ink); }
.detail-bottom-fix__row { display: flex; align-items: center; justify-content: space-between; max-width: 412px; margin: auto; }
.detail-bottom-fix__left { width: 112px; }
.detail-bottom-fix__right { width: calc(100% - 128px); }
.detail-bottom-fix__left .price-block { display: block; text-align: center; }
.detail-bottom-fix__left .price { display: block; font-size: 23px; font-weight: 700; letter-spacing: .045em; }
.detail-bottom-fix__left .tax-text { font-size: 12px; }
.detail-bottom-fix .add-to-cart {
  display: flex; gap: 16px; align-items: center; justify-content: center;
  width: 100%; height: 53px; padding: 5px; font-size: 13px; font-weight: 500; letter-spacing: .045em;
  color: var(--color-white); background: var(--color-ink-soft); border: 1px solid var(--color-ink-soft); border-radius: 40px;
}
.detail-bottom-fix .add-to-cart > svg path, .detail-bottom-fix .add-to-cart > svg circle { stroke: var(--color-white); }
@media (max-width: 768px) { .detail-bottom-fix { display: block; } }


/* ===== §6b gift note composer + clear-confirm modal (00d Task 15; new, not a dozo block) ===== */
.gift-note { margin-top: 18px; }
.gift-note__title { margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.gift-note__input {
  width: 100%; padding: 12px 14px; font-size: 14px; line-height: 1.6;
  color: var(--color-ink); background: var(--color-white); border: 1px solid var(--color-ink); border-radius: 8px; resize: vertical;
}
.gift-note__input::placeholder { color: #b2b2b2; }
.gift-note__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.gift-note__hint { font-size: 11px; color: var(--color-muted); }
.gift-note__clear { font-size: 12px; text-decoration: underline; }
.gift-note__clear:hover { opacity: .7; }

.note-modal { position: fixed; inset: 0; z-index: 1200; display: none; }
.note-modal.is-active { display: block; }
.note-modal__layer { position: absolute; inset: 0; background: rgba(0, 0, 0, .48); }
.note-modal__box {
  position: absolute; top: 50%; left: 50%; width: min(420px, calc(100% - 40px));
  padding: 28px 24px 24px; background: var(--color-white); border-radius: 12px; transform: translate(-50%, -50%);
  animation: note-pop .28s var(--ease-pop) both;
}
@keyframes note-pop {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.note-modal__text { font-size: 15px; font-weight: 700; text-align: center; }
.note-modal__buttons { display: flex; gap: 18px; align-items: center; justify-content: center; margin-top: 20px; }
.note-modal__keep { min-width: 150px; height: 44px; font-size: 13px; color: var(--color-white); background: var(--color-ink-title); border-radius: 40px; }
.note-modal__keep:hover { opacity: .85; }
.note-modal__delete { font-size: 13px; text-decoration: underline; }
.note-modal__delete:hover { opacity: .7; }