/* AJAW Trade — product page (public/pdp.js), built against the Alibaba captures.
   Loaded after style.css so same-specificity rules here win.

   Desktop: gallery | detail | sticky rail, the rail following the whole scroll the
   way Alibaba's does. Below 980px it collapses to one column and a fixed bottom
   action bar takes over, because a 255px rail beside a 375px screen is unusable. */

.pdp-v2 { padding-bottom: 40px; }
.pdp-layout.pdp-v2-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr) 330px;
  gap: 28px;
  align-items: start;
}

/* ---- sticky rail ---- */
.pdp-rail.pdp-rail-sticky {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.pdp-rail-buy { display: flex; flex-direction: column; gap: 10px; }
.pdp-rail-price { display: flex; align-items: baseline; gap: 5px; }
.pdp-rail-price b { font: 700 27px/1 var(--display); letter-spacing: -.03em; }
.pdp-rail-price span { font-size: 12px; color: var(--gray); }
.pdp-rail-price.onrequest b { font-size: 19px; }
.pdp-rail-from { color: var(--gray); }
.pdp-rail-actions { display: flex; flex-direction: column; gap: 8px; }

.rail-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pdp-ship-dest, .pdp-ship-from { font-size: 12px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.pdp-ship-dest .icon, .pdp-ship-from .icon { width: 15px; height: 15px; }
.pdp-ship-facts { display: grid; gap: 7px; margin: 10px 0; }
.pdp-ship-facts > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.pdp-ship-facts dt { color: var(--gray); }
.pdp-ship-facts dd { margin: 0; font-weight: 600; text-align: right; }
.pdp-ship-note { font-size: 11px; color: var(--muted); margin-bottom: 8px; }

/* ---- title + price ---- */
.pdp-title-row h1 { font-size: 24px; line-height: 1.28; margin-bottom: 8px; }
.pdp-title-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pdp-rating { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.pdp-rating a { color: var(--violet); text-decoration: underline; text-underline-offset: 2px; }
.pdp-origin { font-size: 12px; margin-bottom: 16px; }
.pdp-origin a { color: var(--violet); }

.pdp-pricing { background: #fbfbff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 18px; }
.pdp-deal { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.pdp-deal-off { background: linear-gradient(120deg, var(--violet), var(--deep)); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 5px; }
.pdp-deal-note { font-size: 11px; color: var(--gray); }
.pdp-tiers { display: flex; gap: 22px; flex-wrap: wrap; }
.pdp-tier { display: flex; flex-direction: column; gap: 2px; }
.pdp-tier b { font: 700 22px/1 var(--display); letter-spacing: -.03em; }
.pdp-tier span { font-size: 11px; color: var(--gray); }
.pdp-price-note { font-size: 11px; color: var(--muted); margin-top: 10px; }
.pdp-price-onrequest h2 { font-size: 22px; margin-bottom: 6px; }
.pdp-price-onrequest p { font-size: 12px; }
.pdp-price-onrequest { margin-bottom: 18px; }

/* ---- variations ---- */
.pdp-variation { margin-bottom: 14px; }
.pdp-variation-head { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.pdp-variation-head b { font-size: 12px; }
.pdp-variation-head small { color: var(--muted); }
.pdp-variation-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pdp-chip {
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 7px 12px; font-size: 12px; line-height: 1.2; color: var(--ink);
}
.pdp-chip:hover { border-color: var(--soft); }
.pdp-chip.is-on { border-color: var(--violet); box-shadow: inset 0 0 0 1px var(--violet); font-weight: 600; }

/* ---- gallery extras ----
   .gallery is a 2-col grid (54px thumb rail | main image). Without an explicit
   column the toggle landed in column 1 under the thumbs and overflowed the page. */
.pdp-v2-layout .gallery { align-content: start; }
.pdp-media-toggle { grid-column: 2; align-self: start; display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.pdp-media-toggle button {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 5px 16px; font-size: 12px; line-height: 1.6; height: 30px; flex: none;
}
.pdp-media-toggle button.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pdp-media-toggle button:disabled { opacity: .45; }

/* ---- supplier ---- */
.pdp-supplier-card {
  border: 1px solid var(--line); border-radius: 14px; padding: 16px;
  margin: 26px 0 0; display: grid; gap: 14px; background: #fbfbff;
}
.pdp-supplier-id { display: flex; align-items: center; gap: 12px; }
.pdp-supplier-id h2 { font-size: 17px; }
.pdp-supplier-metrics { display: flex; flex-wrap: wrap; gap: 26px; }
.pdp-supplier-metrics > div { display: flex; flex-direction: column; gap: 3px; }
.pdp-supplier-metrics span { font-size: 11px; color: var(--gray); }
.pdp-supplier-metrics strong { font-size: 13px; display: flex; align-items: center; gap: 5px; }
.pdp-supplier-ctas { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- sections ---- */
.pdp-section { margin-top: 34px; }
.pdp-section > h2 { font-size: 19px; margin-bottom: 14px; }
.pdp-service-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pdp-service-row > div { border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.pdp-service-row .icon { color: var(--violet); margin-bottom: 8px; }
.pdp-service-row b { display: block; font-size: 13px; margin-bottom: 4px; }
.pdp-service-row p { font-size: 12px; }

/* ---- reviews ---- */
.pdp-rev-tabs { display: flex; gap: 8px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.pdp-rev-tab {
  padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--gray);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pdp-rev-tab.is-on { color: var(--ink); border-bottom-color: var(--ink); }
.pdp-rev-tab span { color: var(--muted); font-weight: 500; }
.pdp-rev-summary { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; flex-wrap: wrap; }
.pdp-rev-score { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pdp-rev-score b { font: 700 32px/1 var(--display); }
.pdp-rev-score span { font-size: 12px; color: var(--gray); }
.pdp-rev-filters { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.pdp-rev-filter { border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; font-size: 12px; background: #fff; }
.pdp-rev-filter.is-on { border-color: var(--ink); font-weight: 600; }
.pdp-rev-list { display: grid; gap: 14px; }
.pdp-review { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.pdp-review[hidden] { display: none; }
.pdp-review-head { display: flex; align-items: center; gap: 10px; }
.pdp-review-head > div { display: flex; flex-direction: column; gap: 3px; }
.pdp-review-head b { font-size: 12px; }
.pdp-review-head small { margin-left: auto; color: var(--muted); }
.pdp-review-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--tint); color: var(--violet);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none;
}
.pdp-review p { font-size: 13px; margin-top: 8px; }

/* ---- description ---- */
.pdp-desc-body p { font-size: 13px; line-height: 1.75; white-space: pre-line; }
.pdp-desc-media { display: grid; gap: 12px; margin-top: 16px; justify-items: center; }
.pdp-desc-media img { max-width: min(100%, 760px); border-radius: 12px; }
.pdp-provenance { margin-top: 14px; font-size: 11px; }

/* ---- recommendation rows ---- */
.pdp-rec-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr);
  gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin;
}
.pdp-rec-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #fff; }
.pdp-rec-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
.pdp-rec-card b { display: block; font-size: 12px; line-height: 1.35; margin-bottom: 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pdp-rec-price { display: block; font-size: 14px; font-weight: 700; }
.pdp-rec-card small { color: var(--muted); }

/* ---- start-order drawer ---- */
.pdp-order-drawer h2 { font-size: 19px; margin-bottom: 12px; }
.pdp-order-tiers { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.pdp-order-tiers > div { display: flex; flex-direction: column; }
.pdp-order-tiers b { font: 700 18px/1.2 var(--display); }
.pdp-order-tiers span { font-size: 11px; color: var(--gray); }
.pdp-order-variant { font-size: 12px; color: var(--gray); margin-bottom: 10px; }
.pdp-order-sum { border-top: 1px solid var(--line); margin: 12px 0; padding-top: 12px; display: grid; gap: 6px; }
.pdp-order-line { display: flex; justify-content: space-between; font-size: 13px; }
.pdp-order-line b { font-size: 15px; }
.pdp-order-nudge {
  background: #f2f0ff; border-radius: 8px; padding: 8px 10px; font-size: 12px;
  color: var(--deep); display: flex; align-items: center; gap: 7px;
}
.pdp-order-nudge .icon { width: 15px; height: 15px; flex: none; }

/* ---- mobile ---- */
.pdp-mobile-bar { display: none; }

@media (max-width: 980px) {
  .pdp-layout.pdp-v2-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pdp-rail.pdp-rail-sticky { position: static; max-height: none; overflow: visible; }
  .pdp-service-row { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .pdp-v2 { padding-bottom: 76px; }          /* clear the fixed action bar */
  .pdp-v2-layout .gallery { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }
  .pdp-v2-layout .gallery-main { height: min(86vw, 360px); }
  .pdp-v2-layout .thumbs img { width: 40px; height: 44px; object-fit: cover; }
  .pdp-title-row h1 { font-size: 19px; }
  .pdp-tier b { font-size: 18px; }
  .pdp-tiers { gap: 16px; }
  .pdp-section { margin-top: 26px; }
  .pdp-section > h2 { font-size: 16px; }
  .pdp-rev-tabs { overflow-x: auto; scrollbar-width: none; }
  .pdp-rev-tabs::-webkit-scrollbar { display: none; }
  .pdp-rec-row { grid-auto-columns: minmax(142px, 1fr); }
  .pdp-supplier-metrics { gap: 14px 22px; }
  .pdp-rail-buy .pdp-rail-actions { gap: 7px; }

  /* Alibaba keeps the price and the primary action reachable on phones. */
  .pdp-mobile-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: #fff; border-top: 1px solid var(--line);
    padding: 9px 16px calc(9px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(16, 14, 60, .08);
  }
  .pdp-mobile-bar b { font: 700 18px/1 var(--display); }
  .pdp-mobile-bar small { color: var(--gray); margin-left: 3px; }
  .pdp-mobile-bar .btn { min-height: 42px; padding: 0 22px; }
}

/* ---- campaign pricing ---- */
.pdp-pricing.is-promo{background:linear-gradient(135deg,#f1efff,#f9f8ff);border-color:#ddd8ff}
.pdp-campaign{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:11px}
.pdp-campaign b{font-size:13px;color:var(--deep)}
.pdp-campaign-left{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--deep);background:#fff;border:1px solid #ddd8ff;border-radius:999px;padding:3px 9px}
.pdp-campaign-left .icon{width:13px;height:13px}
.pdp-tier s{display:block;font-size:11px;color:var(--muted);text-decoration:line-through;margin-top:1px}
.pdp-tier b{color:var(--deep)}
.pdp-pricing:not(.is-promo) .pdp-tier b{color:var(--ink)}
.pdp-rail-price s{font-size:12px;color:var(--muted);text-decoration:line-through;margin-left:4px}

/* The floating side dock is position:fixed at the right edge (76px wide). On the
   product page the sticky price rail also sits hard right, so below ~1600px the dock
   covered "Start order" and the shipping card's Change link. Give the PDP rail room
   by pulling the whole product page in by the dock's width at those sizes. */
@media (min-width: 981px) and (max-width: 1600px) {
  .pdp-v2 { padding-right: 84px; }
}


/* Pricing now lives in the rail (Giuliano 2026-09-17: "alibaba has everything on the
   right side"), so it drops the standalone card chrome and sits flush in the buy box. */
.pdp-rail-buy .pdp-pricing{background:none;border:0;padding:0;margin:0 0 12px}
.pdp-rail-buy .pdp-pricing.is-promo{background:linear-gradient(135deg,#f1efff,#f9f8ff);border:1px solid #ddd8ff;padding:12px;border-radius:10px}
.pdp-rail-buy .pdp-tiers{gap:14px}
.pdp-rail-buy .pdp-tier b{font-size:19px}
.pdp-rail-buy .pdp-price-onrequest{margin:0 0 12px}
.pdp-rail-buy .pdp-price-onrequest h2{font-size:18px}
.pdp-rail-buy .pdp-price-note{margin-top:8px}



/* Review sub-scores (Service / Shipping / Quality), as Alibaba shows. */
.pdp-rev-sub{display:flex;flex-direction:column;gap:2px;padding-left:18px;border-left:1px solid var(--line)}
.pdp-rev-sub span{font-size:11px;color:var(--gray)}
.pdp-rev-sub b{font-size:15px}
.pdp-rev-filter span{color:var(--muted)}
.pdp-review-subs{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.pdp-review-subs span{font-size:11px;color:var(--gray)}
.pdp-review-subs b{color:var(--ink)}
.review-subscores{gap:10px}
@media (max-width:640px){.pdp-rev-sub{padding-left:0;border-left:0}}

/* Supplier product video */
.pdp-video{position:absolute;inset:0;background:#0d0b22;z-index:3}
.pdp-video iframe{width:100%;height:100%;border:0;display:block}

/* Buy box: price, variations, quantity and actions all sit together in the rail. */



/* ---- matched to docs/alibaba-whiteboard/screenshots/11-product-wholesale.jpg ----
   Left column = gallery with the supplier card under it. Middle = wholesale tabs,
   title, price bands, quantity, key attributes. Right = the order box: shipping,
   a live subtotal, protection, then Start order / Add to cart / Chat now. */
.pdp-mode-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:14px}
.pdp-mode-tabs>*{padding:10px 26px;font-size:13.5px;font-weight:600;color:var(--gray);border-bottom:2px solid transparent;margin-bottom:-1px;background:none}
.pdp-mode-tabs .is-on{color:var(--ink);border-bottom-color:var(--violet)}

/* .gallery is a 2-col grid (thumb rail | image); span both or it lands in the
   54px thumbnail column and wraps to nothing. Same trap as .pdp-media-toggle. */
.pdp-store{grid-column:1 / -1;margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:14px;background:#fbfbff}
.pdp-store-top{display:flex;gap:10px;align-items:center}
.pdp-store-name{font-size:13px;font-weight:650;text-decoration:underline;text-underline-offset:2px}
.pdp-store-name:hover{color:var(--violet)}
.pdp-store-meta{font-size:11.5px;color:var(--gray);margin-top:2px;display:flex;align-items:center;gap:5px}
.pdp-store-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#1a73e8;margin-top:9px}
.pdp-store-badge .icon{width:13px;height:13px}
.pdp-store-metrics{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.pdp-store-metrics>div{display:flex;flex-direction:column;gap:1px}
.pdp-store-metrics b{font-size:13px}
.pdp-store-metrics b small{font-weight:400;color:var(--gray)}
.pdp-store-metrics span{font-size:10.5px;color:var(--gray)}
.pdp-store-markets{display:flex;align-items:center;gap:6px;font-size:11.5px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.pdp-store-markets .icon{width:14px;height:14px}

.pdp-ship-box p{font-size:12px;margin-bottom:5px}
.pdp-ship-box small{display:block;color:var(--muted);font-size:11px;margin-top:7px}
.pdp-totals{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:7px}
.pdp-totals>div{display:flex;justify-content:space-between;gap:12px;font-size:12.5px}
.pdp-totals dt{color:var(--gray)}
.pdp-totals dd{margin:0;font-weight:600}
.pdp-totals dd.soft{color:var(--muted);font-weight:500}
.pdp-totals-sum{border-top:1px solid var(--line);padding-top:9px;margin-top:2px}
.pdp-totals-sum dt{color:var(--ink);font-weight:650}
.pdp-totals-sum dd{font:700 18px/1 var(--display)}
.pdp-rail-actions-card{display:flex;flex-direction:column;gap:9px}
.pdp-rail-pair{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pdp-assurance-note{color:var(--muted);line-height:1.5}


/* ---- matched to 11-product-wholesale.jpg and 30-product-attributes.jpg ----
   Alibaba's blocks are flat and dense: no boxed rows, hairline dividers, small type.
   Ours were padded cards, which is what made the page read as twice as tall. */

/* Customization options: a plain bullet list with a count, not boxed rows. */
.pdp-custom{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.pdp-custom-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pdp-custom-head h3{font-size:14px}
.pdp-custom-head span{font-size:11px;color:var(--muted)}
.pdp-custom-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pdp-custom-list li{position:relative;padding-left:14px;font-size:12.5px;font-weight:600}
.pdp-custom-list li::before{content:'';position:absolute;left:3px;top:7px;width:4px;height:4px;border-radius:50%;background:var(--gray)}
.pdp-custom-list small{font-weight:400;color:var(--gray)}

/* Mini key attributes: 3 columns with vertical rules, like their middle column. */
.pdp-quick-attrs{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.pdp-quick-attrs h3{font-size:14px;margin-bottom:10px}
.pdp-quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pdp-quick-grid>div{display:flex;flex-direction:column;gap:3px;padding:11px 14px;border-right:1px solid var(--line);min-width:0}
.pdp-quick-grid>div:nth-child(3n){border-right:0}
.pdp-quick-grid span{font-size:11px;color:var(--gray)}
.pdp-quick-grid b{font-size:12.5px;overflow-wrap:anywhere}

/* Full attributes: paired label/value table with row borders. */
.attr-table.paired{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.attr-table.paired th,.attr-table.paired td{padding:13px 16px;font-size:12.5px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.attr-table.paired th{background:#fafafc;color:var(--gray);font-weight:400;width:17%}
.attr-table.paired td{font-weight:600;width:33%}
.attr-table.paired tr:last-child th,.attr-table.paired tr:last-child td{border-bottom:0}

/* Recommendation cards: plain, no card chrome - image, title, price, was/%off, MOQ. */
.pdp-rec-card{border:0;padding:0;background:none}
.pdp-rec-card img{aspect-ratio:1;border-radius:8px;margin-bottom:9px}
.pdp-rec-card b{font-size:12.5px;font-weight:500;line-height:1.4;margin-bottom:6px}
.pdp-rec-price{display:block;font:700 15px/1.2 var(--display);margin-bottom:3px}
.pdp-rec-price.onrequest{font-size:12.5px;font-weight:600;color:var(--gray)}
.pdp-rec-off{display:block;font-size:11.5px;margin-bottom:4px}
.pdp-rec-off s{color:var(--muted)}
.pdp-rec-off em{font-style:normal;color:var(--deep);font-weight:700}
.pdp-rec-card small{display:block;color:var(--gray);font-size:11.5px}
.pdp-rec-guarantee{color:var(--muted)}

/* Density pass: their whole buy flow sits above the fold. */
.pdp-v2 .pdp-layout{gap:22px}
.pdp-v2-layout .gallery-main{height:min(30vw,400px)}
.pdp-title-row h1{font-size:20px;line-height:1.3}
.pdp-pricing{padding:11px 13px;margin-bottom:14px}
.pdp-tier b{font-size:19px}
.pdp-tiers{gap:18px}
.pdp-variation{margin-bottom:11px}
.pdp-qty{margin-bottom:0}
.rail-card{padding:14px}
.pdp-section{margin-top:28px}
@media (max-width:900px){
 .pdp-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pdp-quick-grid>div:nth-child(3n){border-right:1px solid var(--line)}
 .pdp-quick-grid>div:nth-child(2n){border-right:0}
 .attr-table.paired th,.attr-table.paired td{width:auto;display:block;border-bottom:0;padding:6px 14px}
 .attr-table.paired tr{display:block;border-bottom:1px solid var(--line);padding:6px 0}
}

/* In-column promo bar, as their capture shows above the title. */
.pdp-promo-bar{display:flex;align-items:center;gap:10px;background:linear-gradient(100deg,#f1efff,#faf9ff);border:1px solid #ddd8ff;border-radius:9px;padding:8px 12px;margin-bottom:12px}
.pdp-promo-tag{background:linear-gradient(120deg,var(--violet),var(--deep));color:#fff;font-size:11px;font-weight:800;border-radius:5px;padding:4px 9px;flex:none}
.pdp-promo-lines{font-size:12px;color:var(--deep);flex:1}
.pdp-promo-bar .icon{width:15px;height:15px;color:var(--deep);flex:none}

/* ---- rail as one card with hairline dividers (matches their scrolled state) ---- */
.rail-stack{padding:0;overflow:hidden}
.rail-sec{padding:14px 16px;border-bottom:1px solid var(--line)}
.rail-sec:last-child{border-bottom:0}
.rail-sec-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.rail-sec-head b{font-size:13px;display:flex;align-items:center;gap:6px}
.rail-sec-head .icon{width:15px;height:15px;color:var(--muted)}
.rail-price b{display:block;font:700 26px/1.1 var(--display);letter-spacing:-.03em;margin-bottom:5px}
.rail-price span{font-size:11.5px;color:var(--gray)}
.rail-edit{font-size:11.5px;color:var(--violet);text-decoration:underline;text-underline-offset:2px}
.rail-var-chips{display:flex;flex-wrap:wrap;gap:6px}
.rail-var-chips span{border:1px solid var(--line);border-radius:7px;padding:5px 10px;font-size:11.5px}
.rail-var-chips .muted{border-style:dashed;color:var(--muted)}
.rail-bullets{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.rail-bullets li{position:relative;padding-left:13px;font-size:12px}
.rail-bullets li::before{content:'';position:absolute;left:3px;top:6px;width:4px;height:4px;border-radius:50%;background:var(--gray)}
.rail-bullets small{color:var(--gray)}
.rail-bullets.tight li{font-size:12px;font-weight:600}
.rail-line{font-size:12px;margin-bottom:4px}
.rail-sec small{display:block;color:var(--muted);font-size:11px;margin-top:6px;line-height:1.5}
.rail-protect .pdp-verified{margin-left:4px}
.rail-cta{display:flex;flex-direction:column;gap:9px;position:sticky;bottom:0}

/* ---- rail must sit beside the WHOLE page, not just the top block ----
   position:sticky only works inside its containing block. With the rail inside the
   top row, it scrolled away as soon as you reached Key attributes. Alibaba keeps the
   rail alongside every section, so the price stays on screen the whole way down. */
.pdp-shell{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start}
.pdp-main{min-width:0}
.pdp-layout.pdp-v2-layout{grid-template-columns:minmax(0,0.95fr) minmax(0,1.15fr)}
.pdp-shell>.pdp-rail{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin}
@media (max-width:1100px){
 .pdp-shell{grid-template-columns:minmax(0,1fr)}
 .pdp-shell>.pdp-rail{position:static;max-height:none;overflow:visible}
}
@media (max-width:980px){.pdp-layout.pdp-v2-layout{grid-template-columns:minmax(0,1fr)}}

/* Supplier description: readable paragraphs with the supplier's photos interleaved,
   collapsed by default so the photos are reachable without scrolling past a text wall. */
.pdp-desc-body{position:relative;max-width:900px}
.pdp-desc-body p{font-size:13.5px;line-height:1.8;margin-bottom:14px;color:var(--gray)}
.pdp-desc-shot{margin:18px 0}
.pdp-desc-shot img{width:100%;max-width:640px;border-radius:12px;display:block}
.pdp-desc-body.is-clamped{max-height:420px;overflow:hidden}
.pdp-desc-body.is-clamped::after{content:'';position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff)}
.pdp-desc-more{display:inline-flex;align-items:center;gap:6px;margin-top:6px;border:1px solid var(--line);border-radius:999px;padding:8px 18px;font-size:12.5px;font-weight:600;background:#fff}
.pdp-desc-more:hover{border-color:var(--violet);color:var(--violet)}
.pdp-desc-more .icon{width:15px;height:15px;transform:rotate(90deg)}
.pdp-desc-more.is-open .icon{transform:rotate(-90deg)}

/* Certificates, as badge cards (their PDP shows FCC / RoHS this way). */
.pdp-certs{display:flex;flex-wrap:wrap;gap:10px}
.pdp-cert{display:flex;align-items:center;gap:10px;border:1px solid #d6e6fb;background:#f4f9ff;border-radius:10px;padding:11px 14px;min-width:200px}
.pdp-cert .icon{width:18px;height:18px;color:#1a73e8;flex:none}
.pdp-cert b{display:block;font-size:12.5px}
.pdp-cert small{color:var(--gray);font-size:11px}
.pdp-video video{width:100%;height:100%;display:block;object-fit:contain;background:#000}

/* ---- full-screen photo viewer (matched to the Alibaba capture, rec3
   f276-f292): black overlay, close top-left, "Find similar" top-right, a
   swipeable track, a "Photos n/total" counter and a bottom mini-bar. ---- */
.gallery-main{cursor:zoom-in}
.pdp-viewer{position:fixed;inset:0;z-index:2000;background:#000;display:flex;flex-direction:column;color:#fff}
.pv-top{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:flex-start;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top)) 14px 0}
.pv-icon-btn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.pv-icon-btn .icon{width:18px;height:18px;color:#fff}
.pv-top-right{display:flex;align-items:center;gap:10px}
.pv-similar{display:flex;flex-direction:column;align-items:center;gap:3px;background:rgba(255,255,255,.16);border-radius:14px;padding:6px 12px;font-size:10.5px;font-weight:600;color:#fff;line-height:1.3}
.pv-similar .icon{width:18px;height:18px;color:#fff}
.pv-stage{position:relative;flex:1;min-height:0;display:flex}
.pv-track{flex:1;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pv-track::-webkit-scrollbar{display:none}
.pv-slide{flex:0 0 100%;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;height:100%;overflow:hidden}
.pv-zoom-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;touch-action:pan-x}
.pv-zoom-wrap img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .18s ease;will-change:transform;user-select:none;-webkit-user-drag:none}
.pv-slide.is-zoomed .pv-zoom-wrap{touch-action:none}
.pv-slide.is-zoomed img{cursor:zoom-out}
/* top:50%/margin-top instead of the usual translateY(-50%) trick - a transform
   here paints in the right place but, overlapping the scroll-snap track,
   Chromium's hit-test lands the click on the track underneath instead of the
   button (verified: swapping to margin-top is what actually fixes it). */
.pv-nav{position:absolute;top:50%;margin-top:-19px;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.4);display:grid;place-items:center;z-index:4}
.pv-nav .icon{width:20px;height:20px;color:#fff}
.pv-prev{left:12px}
.pv-next{right:12px}
.pv-counter{flex:none;text-align:center;padding:10px 0}
.pv-counter span{display:inline-block;background:rgba(255,255,255,.14);color:#fff;font-size:11.5px;font-weight:600;padding:5px 14px;border-radius:999px}
.pv-bar{flex:none;display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink);padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
.pv-bar-thumb{width:38px;height:38px;border-radius:8px;object-fit:cover;flex:none}
.pv-bar-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pv-bar-text b{font-size:12.5px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-bar-text span{font-size:12.5px;font-weight:700;color:var(--deep)}
.pv-bar .pv-chat{flex:none;min-height:38px;padding:0 20px;font-size:12.5px}

@media (max-width:760px){
 .pv-nav{display:none}
}