/* vickerey item page cross-sell rows (pairs with vk-xsell-20261020.js). Version 20261020. ASCII only.
   20261020: .vkxsCard is position:relative, so the screen-reader-only price labels (.vkxsSr, position:absolute)
   stay inside the scrolling row. Before, the labels of the off-screen cards widened the page, so phones could
   scroll sideways (iPhone: page 741px wide on a 390px screen). Nothing else changed. */
   Fonts/colors follow css-shared-site-20261019.css: Open Sans text, Georgia headings/prices, #222 text,
   #aa0000 sale price, #675948 titles, #b9542f accent, #c52c27 CLEARANCE2026 badge. */
.vkxsPairs { clear: both; margin: 16px 0 4px; padding-top: 12px; border-top: 1px solid #e3ded6; }
.vkxsPairsTitle { margin: 0 0 10px; padding: 0; font: 700 13px/18px Georgia, "Times New Roman", Times, serif; letter-spacing: .08em; text-transform: uppercase; color: #675948; text-align: left; }
.vkxsMore { margin: 14px 0 30px; }
.vkxsScroller { position: relative; }
.vkxsRow { display: flex; gap: 12px; margin: 0; padding: 0 0 4px; list-style: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.vkxsRow::-webkit-scrollbar { display: none; }
.vkxsRow > li { list-style: none; margin: 0; padding: 0; }
.vkxsRow > li:before { display: none; }
.vkxsCard { position: relative; flex: 0 0 calc((100% - 48px) / 5); min-width: 0; scroll-snap-align: start; }
.vkxsRowTop { gap: 10px; }
.vkxsRowTop .vkxsCard { flex-basis: calc((100% - 30px) / 4); }
.vkxsLink { display: block; color: #222; text-decoration: none; border-radius: 2px; }
.vkxsLink:hover .vkxsName { text-decoration: underline; }
.vkxsLink:focus { outline: 2px solid #b9542f; outline-offset: 2px; }
.vkxsLink:focus:not(:focus-visible) { outline: none; }
.vkxsLink:focus-visible { outline: 2px solid #b9542f; outline-offset: 2px; }
.vkxsImg { display: block; position: relative; height: 0; padding-top: 100%; overflow: hidden; background: #fff; }
.vkxsImg img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; border: 0; }
.vkxsTags { position: absolute; left: 0; bottom: 6px; display: flex; flex-direction: column; align-items: flex-start; }
.vkxsTag { display: inline-block; margin-top: 2px; padding: 1px 6px; font: 700 10px/15px "Open Sans", Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #494949; white-space: nowrap; }
.vkxsTagClr { display: none; background: #c52c27; }
html.vkPromoOn .vkxsTagClr { display: inline-block; }
.vkxsBrand { display: block; height: 16px; margin-top: 7px; overflow: hidden; font: 700 10px/16px "Open Sans", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #676252; white-space: nowrap; text-overflow: ellipsis; }
.vkxsName { display: block; display: -webkit-box; height: 36px; overflow: hidden; font: 400 13px/18px "Open Sans", Arial, sans-serif; color: #222; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vkxsPrice { display: block; height: 36px; margin-top: 2px; overflow: hidden; font: 400 12px/18px "Open Sans", Arial, sans-serif; color: #222; }
.vkxsSale, .vkxsNow { font: 700 14px/18px Georgia, "Times New Roman", Times, serif; color: #aa0000; }
.vkxsNow { color: #222; }
.vkxsReg { color: #767676; text-decoration: line-through; white-space: nowrap; }
.vkxsOff { display: block; color: #222; }
.vkxsSr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vkxsSkel .vkxsImg { background: #f3f1ed; }
.vkxsSkel .vkxsBrand, .vkxsSkel .vkxsName, .vkxsSkel .vkxsPrice { background: linear-gradient(#f3f1ed, #f3f1ed) no-repeat 0 3px / 70% 10px; }
.vkxsSkel .vkxsName { background-size: 90% 11px; }
.vkxsNav { position: absolute; top: 30%; z-index: 2; width: 38px; height: 38px; margin: 0; padding: 0 0 4px; border: 1px solid #cfc8bd; border-radius: 50%; background: #fff; color: #494949; font: 400 28px/30px Georgia, serif; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.vkxsNav[hidden] { display: none; }
.vkxsNav:hover { background: #f6f3ee; }
.vkxsNav:focus-visible { outline: 2px solid #b9542f; outline-offset: 2px; }
.vkxsPrev { left: -14px; }
.vkxsNext { right: -14px; }
.vkxsTagSize { background: #5d6b3a; }
/* No-shift reservation: before the script inserts the row, keep the same space where it will go
   (desktop: under Add to Bag; phones (body.mobile, the site's own layout switch): after the Description block).
   Height = card image (row width / 4 desktop, 30% phones) + fixed text/title. Expires after 6s by itself if
   the script never runs (blocked/kill switch), so a gap can never stick. */
html:not(.vkxsDone) body.item:not(.mobile) .itemPageCaption > .SKUadd2cart { margin-bottom: calc((100% - 30px) / 4 + 168px); animation: vkxsRel 0s 6s forwards; }
html:not(.vkxsDone) body.mobile.item .itemPageCaption > #DescriptionAccordion { margin-bottom: calc(30% + 191.6px); animation: vkxsRel 0s 6s forwards; }
@keyframes vkxsRel { to { margin-bottom: 0; } }
/* phones */
body.mobile .vkxsPairs { margin: 14px 0 18px; }
body.mobile .vkxsCard { flex-basis: 42%; }
body.mobile .vkxsRowTop .vkxsCard { flex-basis: 30%; }
body.mobile .vkxsNav { display: none; }
@media (max-width: 640px) {
  html:not(.vkxsDone) body.item:not(.mobile) .itemPageCaption > .SKUadd2cart { margin-bottom: calc(30% + 167.6px); }
  .vkxsCard { flex-basis: 42%; }
  .vkxsRowTop .vkxsCard { flex-basis: 30%; }
  .vkxsNav { display: none; }
}
@media (prefers-reduced-motion: reduce) { .vkxsRow { scroll-behavior: auto; } }