/* 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 48px 0; }
.sk-tile .sk { margin: 0 0 8px; }
.sk-chips { display: flex; gap: 8px; padding: 12px 48px 0; }
.sk-chips .sk { margin: 0; }
.sk-head { padding: 26px 48px 0; }
.sk-body { display: flex; gap: 24px; padding: 26px 48px 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 16px 0; }
  .sk-chips { padding: 10px 16px 0; }
  .sk-head { padding: 18px 16px 0; }
  .sk-body { display: block; padding: 14px 16px 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 (Иван:
   «скелетон по нашему бэнчмарку для всех элементов» on every new page) ── */
.sk-host .sk-sec-w { padding: 28px 48px 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 48px 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 48px; border-bottom: 1px solid #ECEAF2; }
.sk-host .sk-chrome-c { display: flex; align-items: center; gap: 22px; height: 45px; padding: 0 48px; 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 16px 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 16px 0; }
  .sk-host .sk-chrome-h, .sk-host .sk-chrome-c { padding: 0 16px; 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; }
}