/* =========================================================
   Package sliders (includes/pkslider.php + assets/js/pkslider.js)
   Tall poster cards gliding in an endless loop; with the “arc” style the cards tilt and dip
   towards the edges, like a curved shelf. Without JavaScript the row simply scrolls sideways.
   ========================================================= */
.pks {
  --pks-w: 250px;
  --pks-gap: 26px;
  --pks-ink: #0b1a2b;        /* card names */
  --pks-title: #1e5a8f;      /* heading — same as the home page section headings */
  --pks-kicker: #ff7a3d;     /* small label — same orange as “EXPLORE YOUR WAY” */
  --pks-muted: #5b6573;
  position: relative;
  overflow: hidden;
  padding: 56px 0 60px;
  font-family: var(--font, 'Plus Jakarta Sans', system-ui, sans-serif);
}
.pks--sky   { background: linear-gradient(180deg, #f8f9fa 0%, #edf2f8 45%, #e8eff7 60%, #f8f9fa 100%); } /* soft blue-grey glow, fades into the page */
.pks--white { background: #f8f9fa; }                    /* page background */
.pks--sand  { background: #f1f4f8; }                    /* grey band, like “Deals” and “How it works” */
.pks--navy  { --pks-ink: #fff; --pks-title: #fff; --pks-kicker: #ffb58a; --pks-muted: rgba(255, 255, 255, 0.72);
              background: linear-gradient(157.8deg, #0b1a2b 0%, #1e5a8f 50%, #2373ba 100%); } /* like the quote section */

.pks__head { max-width: 760px; margin: 0 auto 26px; padding: 0 16px; text-align: center; }
.pks__kicker { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pks-kicker); }
.pks__title { margin: 0; font-size: 30px; line-height: 1.25; font-weight: 800; letter-spacing: -0.2px; color: var(--pks-title); }

/* the row: fades out at both edges */
.pks__viewport {
  position: relative;
  padding: 18px 0 30px;
  overflow-x: auto;                 /* no JavaScript: swipe sideways */
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.pks__viewport::-webkit-scrollbar { display: none; }
.pks.is-ready .pks__viewport { overflow: hidden; scroll-snap-type: none; cursor: grab; touch-action: pan-y; }
.pks.is-dragging .pks__viewport { cursor: grabbing; }

.pks__track { display: flex; gap: var(--pks-gap); width: max-content; margin: 0; padding: 0 16px; list-style: none; will-change: transform; }
.pks.is-ready .pks__track { padding: 0; }
.pks__item { flex: none; width: var(--pks-w); scroll-snap-align: center; transform-origin: 50% 50%; will-change: transform; }

.pks__card { display: block; color: inherit; text-decoration: none; -webkit-user-drag: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.pks__frame {
  position: relative; display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 5px solid #fff;
  border-radius: 24px;
  background: #e6edf5;
  box-shadow: 0 22px 40px -22px rgba(11, 26, 43, 0.5), 0 4px 12px -6px rgba(11, 26, 43, 0.18);
  transition: box-shadow 0.35s ease;
}
.pks__frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); pointer-events: none; }
.pks__card:hover .pks__frame { box-shadow: 0 28px 48px -22px rgba(0, 90, 154, 0.65), 0 4px 12px -6px rgba(11, 25, 44, 0.2); }
.pks__card:hover .pks__frame img { transform: scale(1.06); }
.pks__card:focus-visible { outline: none; }
.pks__card:focus-visible .pks__frame { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #2373ba; }

.pks__price {
  position: absolute; left: 12px; bottom: 12px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 12.5px; font-weight: 700; line-height: 1; color: #0b192c;
  box-shadow: 0 6px 14px -8px rgba(11, 25, 44, 0.5);
}
.pks__label { display: block; margin-top: 14px; padding: 0 6px; text-align: center; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--pks-ink); }
.pks__label small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 500; color: var(--pks-muted); }

@media (max-width: 1024px) {
  .pks { --pks-w: 210px; --pks-gap: 22px; }
  .pks__title { font-size: 28px; }
}
@media (max-width: 640px) {
  .pks { --pks-w: 156px; --pks-gap: 16px; padding: 40px 0 44px; }
  .pks__head { margin-bottom: 16px; }
  .pks__kicker { font-size: 11px; }
  .pks__title { font-size: 24px; }
  .pks__frame { border-width: 4px; border-radius: 18px; }
  .pks__price { left: 8px; bottom: 8px; padding: 5px 9px; font-size: 11px; }
  .pks__label { margin-top: 10px; font-size: 14px; }
  .pks__label small { font-size: 11.5px; }
}