/* =====================================================================
   OFFERS
   A white panel on the page's warm ground: "Offers" and its category tabs at
   the left, "View all" and a pair of arrows at the right, and a two-row grid
   of cards that scrolls sideways beneath them.

   Class prefix `koff` / `ocard` — checked against every other stylesheet on
   this site before use. Short names here are a hazard: `.pcard`, `.krail` and
   `.kdeal` are all already taken by other sections.
   ===================================================================== */
.koff {
  --ko-ink: #213857;
  --ko-sub: rgba(33, 56, 87, .62);
  --ko-line: rgba(33, 56, 87, .12);
  --ko-accent: #BD830D;
  --ko-gap: clamp(12px, 1.2vw, 20px);
  --ko-ease: cubic-bezier(.22, .61, .36, 1);
  display: block;
  padding: clamp(24px, 3vw, 46px) 0;
  color: var(--ko-ink);
}

/* No slab of its own: the page's warm gradient runs straight through, which is
   what keeps this row in one piece with the sections either side of it rather
   than floating on a white card. The cards themselves carry the contrast. */
.koff__panel {
  padding: 0;
  background: transparent;
  box-shadow: none;
  /* The grid is still meant to run out of the right edge, so there is visibly
     more to come. */
  overflow: hidden;
}

/* -------------------------------- the head -------------------------------- */
.koff__head {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 30px);
  margin-bottom: clamp(16px, 1.9vw, 26px);
}
.koff__title {
  flex: none;
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}

/* The tabs take the middle and scroll on their own when there are many. */
.koff__tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: clamp(12px, 1.5vw, 26px);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--ko-line);
}
.koff__tabs::-webkit-scrollbar { display: none; }
.koff__tab {
  flex: none;
  position: relative;
  padding: 6px 2px 12px;
  border: 0;
  background: none;
  color: var(--ko-sub);
  font: inherit;
  font-size: clamp(.82rem, .96vw, .96rem);
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s var(--ko-ease);
}
.koff__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
  transition: background-color .2s var(--ko-ease);
}
.koff__tab:hover { color: var(--ko-ink); }
.koff__tab.is-on { color: var(--ko-accent); font-weight: 600; }
.koff__tab.is-on::after { background: var(--ko-accent); }
.koff__tab:focus-visible { outline: 2px solid var(--ko-accent); outline-offset: 2px; border-radius: 3px; }

.koff__tools {
  flex: none;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  margin-left: auto;
}
.koff__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ko-accent);
  font-size: clamp(.82rem, .95vw, .95rem);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.koff__all svg { width: 17px; height: 17px; transition: transform .22s var(--ko-ease); }
.koff__all:hover svg { transform: translateX(4px); }

/* One pill with a hairline down the middle, as the reference draws it. */
.koff__nav {
  display: flex;
  align-items: stretch;
  height: clamp(30px, 2.3vw, 36px);
  border: 1px solid var(--ko-line);
  border-radius: 999px;
  overflow: hidden;
}
.koff__split { width: 1px; background: var(--ko-line); }
.koff__arrow {
  display: grid;
  place-items: center;
  width: clamp(32px, 2.7vw, 42px);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ko-accent);
  cursor: pointer;
  transition: background-color .18s var(--ko-ease), opacity .18s var(--ko-ease);
}
.koff__arrow svg { width: 16px; height: 16px; }
.koff__arrow:hover { background: rgba(189, 131, 13, .1); }
.koff__arrow[disabled] { opacity: .32; cursor: default; }
.koff__arrow[disabled]:hover { background: none; }
.koff__arrow:focus-visible { outline: 2px solid var(--ko-accent); outline-offset: -2px; }

/* -------------------------------- the grid --------------------------------
   Two rows deep, filling column by column — the reference's layout. */
.koff__track {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: clamp(300px, 33%, 450px);
  gap: var(--ko-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  /* Stretch, not start: every card in a row takes that row's height, so a
     short one does not leave a hole beside a tall neighbour. */
  align-items: stretch;
}
.koff__track::-webkit-scrollbar { display: none; }
/* One or two offers laid two-deep would be a single narrow column with the
   rest of the panel empty beside it. They go in a row instead, and widen to
   use the space. */
.koff__track.is-short {
  grid-template-rows: auto;
  grid-auto-columns: clamp(300px, 46%, 520px);
}

/* -------------------------------- the card -------------------------------- */
.ocard {
  display: flex;
  gap: 0;
  /* Kept deliberately short. A taller card only stretches the empty space
     under the writing — it adds nothing and reads worse. */
  min-height: clamp(108px, 8.6vw, 132px);
  /* No padding of its own: the photograph runs to the card's own edge and the
     writing carries the inset instead. */
  padding: 0;
  border: 1px solid var(--ko-line);
  border-radius: 12px;
  /* No white. The page's own gradient is the card's ground, so the row reads
     as part of the page rather than a set of white boxes laid on top of it —
     the hairline and the photograph are what give the card its shape. */
  background: transparent;
  /* Clips the photograph to the card's rounded corner. */
  overflow: hidden;
  scroll-snap-align: start;
  transition: border-color .2s var(--ko-ease), background-color .2s var(--ko-ease);
}
.ocard:hover { border-color: rgba(33, 56, 87, .26); background: rgba(255, 255, 255, .34); }
.ocard[hidden] { display: none; }

/* Fills its side of the card top to bottom, flush to the edges. */
.ocard__media {
  position: relative;
  flex: none;
  width: clamp(92px, 8vw, 124px);
  align-self: stretch;
  border-radius: 0;
  overflow: hidden;
  background: rgba(33, 56, 87, .06);
}
.ocard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The pill sits across the image's foot, as the reference has it. */
.ocard__till {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5px 8px;
  background: rgba(20, 28, 38, .84);
  color: #FFFFFF;
  font-size: clamp(.6rem, .68vw, .68rem);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

/* The card's padding lives here, now that the photograph runs to the edge. */
.ocard__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(10px, .95vw, 14px) clamp(11px, 1vw, 15px);
}

.ocard__top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
}
.ocard__cat {
  color: var(--ko-sub);
  font-size: clamp(.6rem, .7vw, .7rem);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.ocard__terms {
  margin-left: auto;
  color: var(--ko-sub);
  font-size: clamp(.56rem, .64vw, .64rem);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Two lines at most, so one long title cannot stretch the whole row taller
   than it needs to be. */
.ocard__title {
  margin: 0;
  font-size: clamp(.86rem, 1vw, 1rem);
  font-weight: 700;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The short accent stroke the reference sets under every title. */
.ocard__rule {
  display: block;
  width: 24px;
  height: 2px;
  margin: 7px 0 6px;
  background: var(--ko-accent);
}
/* One line only. A second line made every card in its row taller than the
   rest of the panel's; kept to one, each card is the same size whichever tab
   is open. */
.ocard__note {
  margin: 0;
  color: var(--ko-sub);
  font-size: clamp(.76rem, .86vw, .86rem);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ocard__cta {
  align-self: flex-end;
  margin-top: auto;
  padding-top: 8px;
  color: var(--ko-accent);
  font-size: clamp(.78rem, .9vw, .9rem);
  font-weight: 700;
  text-decoration: none;
}
.ocard__cta:hover { text-decoration: underline; }

/* ------------------------------ dark theme ------------------------------ */
:root[data-theme="dark"] .koff {
  --ko-ink: #FAF8F3;
  --ko-sub: rgba(250, 248, 243, .66);
  --ko-line: rgba(250, 248, 243, .16);
}
:root[data-theme="dark"] .koff__panel { background: transparent; box-shadow: none; }
:root[data-theme="dark"] .ocard { background: transparent; }
:root[data-theme="dark"] .ocard:hover { border-color: rgba(250, 248, 243, .3); background: rgba(250, 248, 243, .06); }

/* ------------------------------ responsive ------------------------------ */
@media (max-width: 900px) {
  .koff__head { flex-wrap: wrap; }
  .koff__tabs { order: 3; flex-basis: 100%; }
  .koff__tools { margin-left: auto; }
  .koff__track { grid-auto-columns: clamp(260px, 78%, 380px); }
}
@media (max-width: 560px) {
  .koff__title { font-size: 1.25rem; }
  .koff__track { grid-template-rows: auto; grid-auto-columns: 84%; }
  .koff__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ocard, .koff__all svg, .koff__tab, .koff__tab::after { transition: none; }
}