/* Recently viewed band, shared by the front page and the product page (hence .sk-seen-*).
   Load after shop-base.css and the page's own CSS. The page's wrap element sets the width. */

/* Hidden until seen.js finds something to show; [hidden] must beat the display rules or an empty band flashes */
.sk-seen[hidden] { display: none; }

/* width: 100% is needed on the product page: in .pdp-after, .pdp-wrap's auto margins turn off stretch,
   so the band would shrink to its content instead of lining up with the other bands */
.sk-seen { width: 100%; }

.sk-seen-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 14px; }
@media (min-width: 768px) { .sk-seen-head { margin-bottom: 16px; } }
.sk-seen-title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; color: var(--sk-ink); }
@media (min-width: 768px) { .sk-seen-title { font-size: 22px; } }
.sk-seen-clear { font-size: 13px; color: var(--sk-muted); text-decoration: underline; white-space: nowrap; }
.sk-seen-clear:hover { color: var(--sk-ink); }

/* Horizontal scroll with snap. Fixed card width, so the row looks the same with 2 or 12 products */
.sk-seen-rail {
	display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x proximity; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
	padding-bottom: 8px; scrollbar-width: none;
}
.sk-seen-rail::-webkit-scrollbar { display: none; }
/* Mouse drag (seen.js): no smooth scrolling or snapping while dragging, or the row lags behind the cursor */
.sk-seen-rail.is-dragging { scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
@media (hover: hover) and (pointer: fine) {
	.sk-seen-rail.sk-draggable { cursor: grab; }
	.sk-seen-rail.is-dragging { cursor: grabbing; }
}

/* Frame around the row (built by seen.js): fade edges and arrows on hover, like the product page bands */
.sk-seen-viewport { position: relative; }
.sk-seen-viewport::before, .sk-seen-viewport::after {
	content: ""; position: absolute; top: 0; bottom: 8px; width: 56px; z-index: 1;
	opacity: 0; transition: opacity .18s; pointer-events: none;
}
.sk-seen-viewport::before { left: -1px; background: linear-gradient(90deg, #fff 20%, rgba(255, 255, 255, 0)); }
.sk-seen-viewport::after { right: -1px; background: linear-gradient(270deg, #fff 20%, rgba(255, 255, 255, 0)); }
.sk-seen-viewport.has-prev::before, .sk-seen-viewport.has-next::after { opacity: 1; }
.sk-seen-nav {
	position: absolute; top: calc(50% - 40px); z-index: 2; display: none;
	align-items: center; justify-content: center; width: 40px; height: 40px;
	border-radius: 50%; font-size: 26px; line-height: 1; padding-bottom: 3px;
	color: var(--sk-ink); background: #fff; border: 1px solid var(--sk-line);
	box-shadow: 0 2px 10px rgba(55, 63, 80, .16); cursor: pointer;
}
.sk-seen-nav--prev { left: -12px; }
.sk-seen-nav--next { right: -12px; }
.sk-seen-nav:hover { border-color: var(--sk-line-strong); }
.sk-seen-nav:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 2px; }
@media (min-width: 992px) {
	.sk-seen-nav { display: flex; opacity: 0; transition: opacity .15s; }
	.sk-seen-viewport:hover .sk-seen-nav, .sk-seen-viewport:focus-within .sk-seen-nav { opacity: 1; }
	/* As on the product page bands: :hover outweighs [disabled] */
	.sk-seen-viewport:hover .sk-seen-nav[disabled], .sk-seen-viewport:focus-within .sk-seen-nav[disabled] { opacity: 0; pointer-events: none; }
}
.sk-seen-card {
	flex: 0 0 132px; scroll-snap-align: start;
	display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
@media (min-width: 768px) { .sk-seen-rail { gap: 16px; } .sk-seen-card { flex-basis: 150px; } }
.sk-seen-media {
	display: block; overflow: hidden; margin-bottom: 4px;
	border: 1px solid var(--sk-line); border-radius: var(--sk-radius); background: #fff;
}
.sk-seen-card:hover .sk-seen-media { border-color: var(--sk-line-strong); }
.sk-seen-card:hover { text-decoration: none; }
.sk-seen-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.sk-seen-name {
	font-size: 13px; line-height: 1.3;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sk-seen-price { font-size: 14px; font-weight: 700; color: var(--sk-ink); }

/* Centered variant for the product page, where the neighboring bands have centered titles too */
.sk-seen--center .sk-seen-head { flex-direction: column; align-items: center; gap: 4px; }
.sk-seen--center .sk-seen-title { font-weight: 500; text-align: center; }

/* On the product page the band comes last, after the other bands */
.sk-seen--pdp { padding-top: 40px; }