/* wholesale-skeleton.css — spec 11.1 slice 2 (operator grant 2026-09-07,
   artifact 0ee8c63a): between a click and the next page's HTML the page
   shows the live chrome + a skeleton of the TARGET screen and a 2px progress
   bar under the top edge. Loaded by the chrome behind
   wholesale_skeleton_nav_enabled; markup comes from wholesale-skeleton.js.
   Tokens: one shimmer palette (#EFEDF4 → #F7F6FA), brand purple bar. */
.sk { display: block; max-width: 100%; box-sizing: border-box; background: linear-gradient(90deg, #EFEDF4 0%, #F7F6FA 40%, #EFEDF4 80%); background-size: 200% 100%; animation: skShimmer 1.4s ease-in-out infinite; margin: 8px 0; }
.sk-host { overflow-x: hidden; }
@keyframes skShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
.sk-host { padding-bottom: 40px; }
.sk-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; padding: 8px var(--wm-pad) 0; }
.sk-tile .sk { margin: 0 0 8px; }
.sk-chips { display: flex; gap: 8px; padding: 12px var(--wm-pad) 0; }
.sk-chips .sk { margin: 0; }
.sk-head { padding: 26px var(--wm-pad) 0; }
.sk-body { display: flex; gap: 24px; padding: 26px var(--wm-pad) 0; }
.sk-rail { width: 216px; flex: none; }
.sk-rail .sk { margin: 6px 0; }
.sk-gap { height: 14px; }
.sk-main { flex: 1; min-width: 0; }
.sk-row { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.sk-row .sk { margin: 0; }
.sk-flex { flex: 1; }
.sk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.skc { border: 1px solid #ECEAF2; border-radius: 14px; overflow: hidden; background: #fff; }
.skc > .sk { margin: 0; border-radius: 0; }
.skc-b { padding: 12px 14px 14px; }
.skc-b .sk { margin: 6px 0; }
.skc-p { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.skc-p .sk { margin: 0; }
.sk-lot { display: grid; grid-template-columns: 552px 1fr; gap: 40px; padding: 22px 104px 0; }
.sk-lot-l .sk, .sk-lot-r .sk { margin: 8px 0; }
.sk-gallery .sk { margin: 8px 0 0; }
.sk-thumbs { display: flex; gap: 6px; margin: 6px 0 14px; }
.sk-thumbs .sk { margin: 0; }
/* the progress bar: 2px, brand purple, only while a navigation is in flight */
.ptb { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 10000; pointer-events: none; }
.ptb i { display: block; height: 100%; width: 0; background: #452B90; box-shadow: 0 0 8px rgba(69, 43, 144, .5); }
.ptb--on i { animation: ptbGrow 1.6s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes ptbGrow { 0% { width: 0; } 30% { width: 46%; } 70% { width: 78%; } 100% { width: 92%; } }
@media (prefers-reduced-motion: reduce) { .ptb--on i { animation: none; width: 60%; } }
/* phone: one column, the page gutter */
@media (max-width: 960px) {
  .sk-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 8px var(--wm-pad) 0; }
  .sk-chips { padding: 10px var(--wm-pad) 0; }
  .sk-head { padding: 18px var(--wm-pad) 0; }
  .sk-body { display: block; padding: 14px var(--wm-pad) 0; }
  .sk-rail { display: none; }
  .sk-grid { grid-template-columns: 1fr; gap: 14px; }
  .sk-lot { display: block; padding: 12px 16px 0; }
}
/* ── 2026-09-08: the hub flywheel + Closo Direct, element for element (operator:
   «a skeleton by our benchmark for every element» on every new page) ── */
.sk-host .sk-sec-w { padding: 28px var(--wm-pad) 0; }
.sk-host .sk-sec .sk { margin: 0; }
.sk-host .sk-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sk-host .sk-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sk-host .skc--l > .sk:first-child { border-radius: 12px 12px 0 0; }
.sk-host .sk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 16px 0 8px; }
.sk-host .sk-stat { border: 1px solid #ECEAF2; border-radius: 14px; padding: 14px 16px; background: #fff; }
.sk-host .sk-stat .sk { margin: 6px 0; }
.sk-host .sk-center { justify-content: center; margin-top: 18px; }
.sk-host .sk-rails { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 28px var(--wm-pad) 0; }
.sk-host .sk-railc { border: 1px solid #ECEAF2; border-radius: 16px; padding: 22px 24px; background: #fff; }
.sk-host .sk-chips--wrap { flex-wrap: wrap; padding-top: 6px; }
/* wholesale chrome, painted when the click comes from a Direct page */
.sk-host .sk-chrome .sk { margin: 0; }
.sk-host .sk-chrome-top { height: 34px; background: #452B90; }
.sk-host .sk-chrome-h { display: flex; align-items: center; gap: 24px; height: 69px; padding: 0 var(--wm-pad); border-bottom: 1px solid #ECEAF2; }
.sk-host .sk-chrome-c { display: flex; align-items: center; gap: 22px; height: 45px; padding: 0 var(--wm-pad); border-bottom: 1px solid #ECEAF2; }
/* Closo Direct: the shop (banner, id row, toolbar, tabs, rail, tile row, grid) and the product (gallery + buy column) */
.sk-host--d .sk { background: linear-gradient(90deg, #EFEDEA 0%, #F7F6F3 40%, #EFEDEA 80%); background-size: 200% 100%; }
.sk-host--d .skc, .sk-host--d .sk-stat, .sk-host--d .sk-railc { border-color: #ECEAE5; }
.sk-host .sk-dhead .sk { margin: 0; }
.sk-host .sk-dhead-in { max-width: 1280px; margin: 0 auto; padding: 16px 44px 0; box-sizing: border-box; }
.sk-host .sk-dhead-in .sk-row .sk { margin: 0; }
.sk-host .sk-dhead-in > .sk { margin: 12px 0; }
.sk-host .sk-dwrap { max-width: 1280px; margin: 0 auto; padding: 18px 44px 0; box-sizing: border-box; }
.sk-host .sk-body--d { padding: 18px 0 0; }
.sk-host .sk-tabs { border-bottom: 1px solid #ECEAE5; padding-bottom: 14px; }
.sk-host .skc--d { border: 0; border-radius: 12px; }
.sk-host .skc--d > .sk:first-child { border-radius: 12px; }
.sk-host .sk-pdp { display: grid; grid-template-columns: 584px minmax(0, 1fr); gap: 64px; max-width: 1080px; margin: 0 auto; padding: 18px 0 0; box-sizing: border-box; }
.sk-host .sk-pdp-l .sk, .sk-host .sk-pdp-r .sk { margin: 8px 0; }
.sk-host .sk-acc { padding: 12px 0; border-bottom: 1px solid #ECEAE5; margin: 0; }
.sk-host .sk-sticky-w { border-bottom: 1px solid #ECEAE5; }
.sk-host .sk-sticky { display: flex; align-items: center; gap: 9px; height: 70px; max-width: 1280px; margin: 0 auto; padding: 0 44px; box-sizing: border-box; }
.sk-host .sk-sticky .sk { margin: 0; }
/* the bar wears the target's colour: black for Closo Direct, purple for wholesale */
.ptb.ptb--d i { background: #111; box-shadow: none; }
.ptb.ptb--w i { background: #452B90; box-shadow: 0 0 8px rgba(69, 43, 144, .5); }
/* what the skeleton sets aside — a class, because author display rules beat [hidden] */
.sk-off { display: none !important; }
@media (max-width: 960px) {
  .sk-host .sk-sec-w { padding: 18px var(--wm-pad) 0; }
  .sk-host .sk-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .sk-host .sk-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sk-host .sk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sk-host .sk-rails { grid-template-columns: 1fr; padding: 18px var(--wm-pad) 0; }
  .sk-host .sk-chrome-h, .sk-host .sk-chrome-c { padding: 0 var(--wm-pad); gap: 12px; }
  .sk-host .sk-dhead-in, .sk-host .sk-dwrap { padding-left: 16px; padding-right: 16px; }
  .sk-host .sk-dhead > .sk { height: 140px !important; }
  .sk-host .sk-pdp { display: block; padding: 12px 16px 0; }
  .sk-host .sk-pdp-l > .sk:first-child { height: 360px !important; }
  .sk-host .sk-sticky { padding: 0 16px; }
}
/* ── 2026-09-10: the supplier registry (operator: «the same loading as the lot catalogue … one to one»): the catalogue — hero with search, three chip rows, the
   320px-min supplier cards (logo square, name + pill, score, stars, chips,
   3-cell strip), the method band — and the profile: cover, overlapping logo,
   name row, two columns (reviews · facts card). Markup: wholesale-skeleton.js. */
.sk-host .sk-rg-hero { padding: 40px var(--wm-pad) 0; }
.sk-host .sk-rg-hero > .sk { margin: 0 0 12px; }
.sk-host .sk-rg-search { margin: 16px 0 22px; }
.sk-host .sk-grid-rg { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; padding: 0 var(--wm-pad); margin-top: 8px; }
.sk-host .skc--rg { padding-top: 18px; }
.sk-host .skc--rg .sk-row { padding: 0 18px; }
.sk-host .skc--rg .sk-rg-top { align-items: flex-start; margin: 0; gap: 14px; }
.sk-host .sk-rg-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.sk-host .sk-rg-tt .sk, .sk-host .sk-rg-sc .sk { margin: 0; }
.sk-host .sk-rg-sc { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 4px; }
.sk-host .skc--rg .sk-rg-row { margin: 14px 0 0; gap: 8px; }
.sk-host .sk-rg-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #E4E2EE; border-top: 1px solid #E4E2EE; margin-top: 22px; }
.sk-host .sk-rg-cells span { height: 46px; background: #FAFAFC; }
/* the closing band is the storefront's About spread: 7/5 columns, a hairline, the card of five signals */
.sk-host .sk-rg-band { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; margin: 44px var(--wm-pad) 0; padding: 38px 0 56px; border-top: 1px solid #ECEAF2; }
.sk-host .sk-rg-band > div > .sk { margin: 8px 0; }
.sk-host .sk-rg-band .skc--rgr { padding: 22px 24px 12px; border-radius: 20px; }
.sk-host .sk-rg-cover { height: 130px; background: #F1F1F5; }
.sk-host .sk-rg-id { display: flex; align-items: flex-start; gap: 22px; padding: 0 var(--wm-pad); margin-top: -44px; }
.sk-host .sk-rg-logo .sk { margin: 0; background: #fff; border: 1px solid #ECEAF2; box-shadow: 0 2px 10px rgba(26, 32, 44, .06); }
.sk-host .sk-rg-name { flex: 1; min-width: 260px; padding-top: 52px; }
.sk-host .sk-rg-cols { display: flex; gap: 28px; align-items: flex-start; padding: 26px var(--wm-pad) 0; }
.sk-host .sk-rg-main { flex: 1; min-width: 300px; }
.sk-host .sk-rg-side { width: 340px; flex: none; }
.sk-host .skc--rgr { padding: 18px 20px; margin-bottom: 16px; }
.sk-host .skc--rgr > .sk { margin: 8px 0; border-radius: 6px; }
.sk-host .skc--rgr .sk-row { margin: 0 0 10px; }
.sk-host .skc--rgr .sk-rg-fact { padding: 9px 0; border-bottom: 1px solid #ECEAF2; margin: 0; }
@media (max-width: 960px) {
  .sk-host .sk-rg-hero { padding: 24px var(--wm-pad) 0; }
  .sk-host .sk-rg-hero > .sk { max-width: 100%; }
  .sk-host .sk-grid-rg { gap: 14px; padding: 0 var(--wm-pad); }
  .sk-host .sk-rg-band { grid-template-columns: 1fr; gap: 26px; margin: 34px var(--wm-pad) 0; padding: 28px 0 40px; }
  .sk-host .sk-rg-id { padding: 0 var(--wm-pad); }
  .sk-host .sk-rg-cols { display: block; padding: 18px var(--wm-pad) 0; }
  .sk-host .sk-rg-side { width: auto; }
}