/*
 * Product detail — compact mobile layout v1
 * Mobile-only overrides. Desktop/tablet >= 641px are untouched.
 */
@media (max-width: 640px) {
  .pd-page {
    padding: 8px 9px 72px !important;
  }

  .pd-breadcrumb {
    gap: 5px !important;
    margin: 2px 2px 9px !important;
    font-size: .67rem !important;
    line-height: 1.25 !important;
  }
  .pd-breadcrumb a { gap: 4px !important; }
  .pd-breadcrumb .fa-chevron-right { font-size: .5rem !important; }

  .pd-layout {
    gap: 10px !important;
  }
  .pd-left,
  .pd-right { min-width: 0 !important; }

  /* Hero: much shorter on phones while keeping the full banner readable. */
  .pd-hero {
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    max-height: 215px !important;
    border-radius: 14px !important;
  }
  .pd-hero-img {
    object-fit: cover !important;
    object-position: center center !important;
  }
  .pd-hero:hover .pd-hero-img { transform: none !important; }
  .pd-hero-badges {
    left: 8px !important;
    bottom: 8px !important;
    gap: 5px !important;
  }
  .pd-stock-badge,
  .pd-plat-badge {
    gap: 4px !important;
    padding: 4px 8px !important;
    font-size: .61rem !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }
  .pd-live-dot {
    width: 5px !important;
    min-width: 5px !important;
    height: 5px !important;
  }

  /* 4 stats stay on one compact row. */
  .pd-stats-row {
    margin-top: 8px !important;
    padding: 8px 0 !important;
    border-radius: 12px !important;
  }
  .pd-stat {
    gap: 1px !important;
    min-width: 0 !important;
  }
  .pd-stat > i {
    font-size: .72rem !important;
    margin-bottom: 1px !important;
  }
  .pd-stat-val {
    font-size: .81rem !important;
    line-height: 1.05 !important;
  }
  .pd-stat-lbl {
    font-size: .55rem !important;
    white-space: nowrap !important;
  }
  .pd-stat-div { height: 27px !important; }

  /* Description/note blocks: preserve all text, reduce only spacing/type size. */
  .pd-panel {
    margin-top: 8px !important;
    padding: 10px 11px !important;
    border-radius: 12px !important;
  }
  .pd-panel-title {
    gap: 5px !important;
    margin-bottom: 7px !important;
    font-size: .66rem !important;
    letter-spacing: .045em !important;
  }
  .pd-panel-title i { font-size: .72rem !important; }
  .pd-feature-list {
    gap: 5px !important;
  }
  .pd-feature-list > li {
    gap: 7px !important;
    font-size: .73rem !important;
    line-height: 1.36 !important;
  }
  .pd-feature-checkfx {
    --pd-check-size: 15px !important;
    margin-top: 0 !important;
  }
  .pd-feature-checkfx__img {
    width: 15px !important;
    height: 15px !important;
  }
  .pd-feature-checkfx::after {
    width: 19px !important;
    height: 19px !important;
  }
  .pd-feature-checkfx::before {
    width: 21px !important;
    height: 21px !important;
  }
  .pd-feature-checkfx__particles { inset: -4px !important; }
  .pd-feature-text,
  .pd-short-desc,
  .pd-note-text {
    font-size: .73rem !important;
    line-height: 1.42 !important;
    overflow: visible !important;
    display: block !important;
    max-height: none !important;
    -webkit-line-clamp: unset !important;
  }

  /* Three assurance pills are compact and remain on one row. */
  .pd-guarantee-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin-top: 8px !important;
  }
  .pd-guarantee {
    min-width: 0 !important;
    padding: 7px 5px !important;
    border-radius: 10px !important;
    gap: 4px !important;
    justify-content: center !important;
    font-size: .58rem !important;
    line-height: 1.18 !important;
    text-align: center !important;
  }
  .pd-guarantee i { font-size: .72rem !important; }
  .pd-guarantee span {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  /* Purchase panel below the detail area. */
  .pd-purchase-panel {
    border-radius: 14px !important;
  }
  .pd-pp-head {
    padding: 12px 13px 10px !important;
  }
  .pd-pp-name {
    margin-bottom: 6px !important;
    font-size: .88rem !important;
    line-height: 1.25 !important;
  }
  .pd-pp-meta {
    gap: 5px !important;
    margin-bottom: 6px !important;
  }
  .pd-vip-medal {
    gap: 4px !important;
    padding: 3px 7px !important;
    font-size: .59rem !important;
  }
  .pd-price-display { gap: 4px !important; }
  .pd-price-label { font-size: .6rem !important; }
  .pd-price-range { font-size: 1.12rem !important; }
  .pd-price-sep { font-size: .8rem !important; }
  .pd-price-unit { font-size: .68rem !important; }

  .pd-section {
    padding: 10px 13px !important;
  }
  .pd-section-label {
    gap: 5px !important;
    margin-bottom: 7px !important;
    font-size: .62rem !important;
  }
  .pd-section-label i { font-size: .69rem !important; }

  /* Package cards stay 2-column on phones for a shorter page. */
  .pd-pkg-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .pd-pkg-card {
    min-width: 0 !important;
    padding: 8px 9px !important;
    gap: 4px 7px !important;
    border-radius: 10px !important;
  }
  .pd-pkg-info { width: 100% !important; }
  .pd-pkg-name {
    margin-bottom: 2px !important;
    font-size: .72rem !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.25 !important;
  }
  .pd-pkg-dur,
  .pd-pkg-stock {
    margin-bottom: 1px !important;
    font-size: .58rem !important;
    white-space: normal !important;
    line-height: 1.25 !important;
  }
  .pd-pkg-stock small { font-size: .54rem !important; }
  .pd-pkg-price {
    width: 100% !important;
    font-size: .82rem !important;
    text-align: left !important;
  }
  .pd-pkg-price span { font-size: .58rem !important; }
  .pd-pkg-desc {
    padding-top: 4px !important;
    margin-top: 0 !important;
    font-size: .6rem !important;
    line-height: 1.3 !important;
  }

  .pd-qty-row { gap: 8px !important; }
  .pd-qty-ctrl { border-radius: 9px !important; }
  .pd-qty-btn { width: 30px !important; height: 30px !important; }
  .pd-qty-input { width: 36px !important; font-size: .76rem !important; }
  .pd-qty-avail { font-size: .62rem !important; }

  .pd-invoice { gap: 5px !important; }
  .pd-inv-row {
    gap: 8px !important;
    font-size: .69rem !important;
    line-height: 1.3 !important;
  }
  .pd-inv-total .pd-inv-val { font-size: .8rem !important; }
  .pd-inv-total-val { font-size: .88rem !important; }

  .pd-buy-btn {
    width: calc(100% - 26px) !important;
    margin: 6px 13px 4px !important;
    padding: 11px 12px !important;
    border-radius: 11px !important;
    gap: 6px !important;
    font-size: .75rem !important;
  }
  .pd-no-balance {
    margin: 4px 13px !important;
    padding: 8px 10px !important;
    border-radius: 9px !important;
    font-size: .68rem !important;
  }
  .pd-footer-notes {
    margin: 5px 13px 8px !important;
    gap: 4px !important;
  }
  .pd-fn {
    gap: 5px !important;
    font-size: .62rem !important;
    line-height: 1.3 !important;
  }
  .pd-fn i { font-size: .62rem !important; }

  /* Random public information area, if this detail page is a Random Product. */
  .rnd-public-odds {
    margin: 9px 13px !important;
    padding: 9px !important;
    border-radius: 11px !important;
  }
  .rnd-public-odds__title { font-size: .67rem !important; }
  .rnd-public-odds__item { padding: 7px !important; border-radius: 9px !important; }
  .rnd-public-odds__copy b { font-size: .67rem !important; }
  .rnd-public-odds__copy small { font-size: .57rem !important; }
}

@media (max-width: 370px) {
  .pd-page { padding-left: 7px !important; padding-right: 7px !important; }
  .pd-hero { max-height: 190px !important; }
  .pd-stock-badge,
  .pd-plat-badge { padding: 3px 6px !important; font-size: .56rem !important; }
  .pd-stat-val { font-size: .75rem !important; }
  .pd-stat-lbl { font-size: .5rem !important; }
  .pd-guarantee { font-size: .53rem !important; }
  .pd-pkg-card { padding: 7px !important; }
}