/* ============================================================
   Product Details Page Mobile
   Source: main.css lines 6502-6638
   ============================================================ */

/* ============================================================
   Product Details Page (PDP) - UIPro mobile design
   ============================================================ */

/* Breadcrumb bar */
.pdp-breadcrumb-bar { background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding: 10px 0; font-size: 13px; }

/* Main layout */
.pdp-main { padding: 24px 0 64px; }
/* .pdp-main > .container 和 .pdp-breadcrumb-bar > .container 已改为 .site-container，padding 由 base.min.css 统一管理 */

/* Hero card */
.pdp-hero-card { background: #f9fafb; border-radius: 16px; border: 1px solid var(--color-border); padding: 16px; margin-bottom: 20px; }
.pdp-hero-card__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }

/* Gallery */
.pdp-gallery__main { border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.pdp-gallery__main-img { width: 100%; height: 280px; object-fit: cover; display: block; }
.pdp-gallery__placeholder { height: 280px; background: #f1f5f9; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.pdp-gallery__thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.pdp-gallery__thumb { width: 72px; height: 56px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: none; padding: 0; transition: border-color .2s; flex-shrink: 0; }
.pdp-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-gallery__thumb.is-active { border-color: var(--color-accent); }

/* Product info */
.pdp-info { display: flex; flex-direction: column; gap: 14px; }
.pdp-info__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pdp-badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.pdp-badge--brand { background: var(--color-accent); color: #fff; }
.pdp-badge--best  { background: rgba(249,115,22,.15); color: #f97316; }
.pdp-badge--new   { background: var(--color-accent-light); color: var(--color-primary); }

.pdp-info__title { font-size: clamp(18px,3vw,28px); font-weight: 700; color: var(--color-primary); line-height: 1.25; margin: 0; }
.pdp-info__subtitle { font-size: 13px; color: var(--color-muted); margin: 0; }

/* Quick specs 2-col grid */
.pdp-quick-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 12px; border: 1px solid var(--color-border); background: #fff; overflow: hidden; }
.pdp-quick-spec { padding: 8px 10px; border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 2px; }
.pdp-quick-spec:nth-last-child(-n+2) { border-bottom: none; }
.pdp-quick-spec__label { font-size: 11px; color: var(--color-muted); }
.pdp-quick-spec__value { font-size: 13px; font-weight: 500; color: var(--color-text); }

/* Price box */
.pdp-price-box { background: #e7efe0; border: 1px solid #c6daab; border-radius: 12px; padding: 14px; display: flex; align-items: center; justify-content: space-between; }
.pdp-price-box__amount { font-size: 22px; font-weight: 700; color: var(--color-primary); font-family: var(--font-heading); line-height: 1.2; }
.pdp-price-box__meta { font-size: 12px; color: var(--color-muted); margin-top: 2px; }
.pdp-price-box__actions { display: flex; gap: 8px; }
.pdp-icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--color-border); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--color-muted); transition: all .2s; }
.pdp-icon-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* CTAs */
.pdp-ctas { display: flex; flex-direction: column; gap: 10px; }
.pdp-cta { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all .2s; }
.pdp-cta--primary { background: #06203b; color: #fff; }
.pdp-cta--primary:hover { background: var(--color-primary); color: #fff; }
.pdp-cta--whatsapp { background: linear-gradient(0deg, #1faf38, #60d669); color: #fff; }
.pdp-cta--whatsapp:hover { opacity: .9; color: #fff; }

/* Trust badges */
.pdp-trust { display: flex; flex-wrap: wrap; gap: 12px; }
.pdp-trust-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--color-muted); }

/* Sections */
.pdp-section { background: #f9fafb; border: 1px solid var(--color-border); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.pdp-section__header { margin-bottom: 16px; }
.pdp-section__title { font-size: 17px; font-weight: 700; color: var(--color-primary); margin: 0 0 4px; }
.pdp-section__desc  { font-size: 13px; color: var(--color-muted); margin: 0; }

/* Spec groups */
.pdp-spec-group { border: 1px solid var(--color-border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.pdp-spec-group:last-child { margin-bottom: 0; }
.pdp-spec-group__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--color-border); background: #fff; }
.pdp-spec-group__icon { color: var(--color-accent); display: flex; align-items: center; }
.pdp-spec-group__name { font-size: 14px; font-weight: 700; color: var(--color-text); }
.pdp-spec-dl { margin: 0; padding: 4px 0; background: #fff; }
.pdp-spec-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid #f1f5f9; }
.pdp-spec-row:last-child { border-bottom: none; }
.pdp-spec-row__label { font-size: 12px; color: var(--color-muted); }
.pdp-spec-row__value { font-size: 13px; font-weight: 500; color: var(--color-text); text-align: right; max-width: 60%; }

/* Condition & Trust */
.pdp-condition-trust { padding: 12px 14px; display: flex; flex-direction: column; gap: 14px; background: #fff; }
.pdp-condition-card { background: #e7efe0; border-radius: 10px; padding: 12px; }
.pdp-condition-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pdp-condition-card__label { font-size: 11px; color: var(--color-muted); }
.pdp-condition-card__grade { font-size: 18px; font-weight: 700; color: var(--color-text); }
.pdp-condition-bar { height: 10px; border-radius: 999px; background: #fff; overflow: hidden; }
.pdp-condition-bar__fill { height: 100%; border-radius: 999px; background: var(--color-accent); transition: width .5s ease; }
.pdp-location { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--color-muted); }
.pdp-features { display: flex; flex-direction: column; gap: 8px; }
.pdp-feature-tag { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: #06203b; color: #fff; border-radius: 999px; font-size: 12px; font-weight: 500; }

/* Payment section */
.pdp-payment__header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.pdp-payment__options { display: flex; flex-direction: column; gap: 12px; }
.pdp-payment-card { background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 14px; position: relative; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.pdp-payment-card--featured { background: rgba(131,174,72,.06); border-color: var(--color-accent); }
.pdp-payment-card__recommended { position: absolute; top: -10px; right: 12px; background: var(--color-accent); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 3px 10px; border-radius: 4px; }
.pdp-payment-card__head { display: flex; align-items: center; gap: 10px; }
.pdp-payment-card__head strong { font-size: 14px; color: var(--color-text); }
.pdp-payment-card__desc { font-size: 13px; color: var(--color-muted); line-height: 1.5; margin: 0; }
.pdp-payment-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pdp-payment-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; padding: 4px 8px; border-radius: 6px; background: rgba(131,174,72,.1); color: var(--color-accent); }
.pdp-payment-tag--neutral { background: var(--color-border); color: var(--color-text); }

/* Certification rows */
.pdp-cert-list { display: flex; flex-direction: column; gap: 8px; }
.pdp-cert-row { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff; border: 1px solid #f1f5f9; border-radius: 14px; }
.pdp-cert-row__icon { flex-shrink: 0; width: 34px; height: 34px; background: var(--color-accent-light); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.pdp-cert-row__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pdp-cert-row__name { font-size: 13px; font-weight: 600; color: var(--color-text); }
.pdp-cert-row__meta { font-size: 11px; color: var(--color-muted); }
.pdp-cert-row__dl { width: 32px; height: 32px; border-radius: 50%; background: var(--color-bg); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--color-accent); flex-shrink: 0; text-decoration: none; transition: all .2s; }
.pdp-cert-row__dl:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.pdp-cert-row__request { font-size: 11px; color: var(--color-muted); white-space: nowrap; }

/* Video */
.pdp-video { border-radius: 12px; overflow: hidden; }
.pdp-video__placeholder { height: 220px; background: #111; background-size: cover; background-position: center; border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; }
.pdp-video__play { width: 56px; height: 56px; background: rgba(131,174,72,.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(131,174,72,.4); cursor: pointer; }

/* Inquiry context */
.pdp-inquiry-context { background: #e7efe0; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 2px; }
.pdp-inquiry-context__label { font-size: 12px; color: var(--color-muted); }
.pdp-inquiry-context__product { font-size: 14px; font-weight: 600; color: var(--color-text); }

/* Responsive */
@media (max-width: 900px) {
    .pdp-hero-card__inner { grid-template-columns: 1fr; }
    .pdp-gallery__main-img { height: 220px; }
    .pdp-ctas { flex-direction: column; }
}
@media (min-width: 1100px) {
    .pdp-hero-card__inner { grid-template-columns: 1.1fr 1fr; gap: 40px; }
    .pdp-hero-card { padding: 40px; }
    .pdp-gallery__main-img { height: 480px; }
    .pdp-gallery__thumb { width: 171px; height: 120px; }
    .pdp-payment__options { display: grid; grid-template-columns: 1.2fr 1fr 1fr; }
}