/* Carousel + testimonial cards + comparator + verification-method cards.
   Structure here, palette from each direction through the --k-* tokens. */
:root{
  --k-bg:#fff; --k-bg2:#f5f2ec; --k-ink:#1b1b1b; --k-mut:#6d6d6d; --k-faint:#9a948b;
  --k-line:#e5e2db; --k-acc:#2f6b4a; --k-r:16px; --k-disp:inherit;
}

/* ---------- carousel ---------- */
.crsl{position:relative}
.crsl-track{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:26px 2px 8px; align-items:stretch;
}
.crsl-track::-webkit-scrollbar{display:none}
.crsl-track > *{flex:0 0 auto; scroll-snap-align:start}
/* each duplicated set is itself a flex row, so the cards inside keep the
   same gap as if there were no wrapper */
.crsl-set{display:flex; gap:inherit; flex:0 0 auto; scroll-snap-align:none}
.crsl-set > *{scroll-snap-align:start}
.crsl-arrow{
  position:absolute; top:46%; transform:translateY(-50%); z-index:6;
  width:36px; height:36px; border-radius:50%; cursor:pointer; padding:0;
  background:color-mix(in srgb, var(--k-bg) 62%, transparent);
  -webkit-backdrop-filter:blur(6px) saturate(140%); backdrop-filter:blur(6px) saturate(140%);
  border:1px solid var(--k-line); color:var(--k-ink);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .2s ease, opacity .2s ease;
}
.crsl-arrow:hover:not(:disabled){background:var(--k-bg); transform:translateY(-50%) scale(1.08)}
.crsl-arrow:disabled{opacity:.28; cursor:default}
.crsl-arrow svg{width:17px; height:17px}
.crsl-arrow.prev{left:-10px}
.crsl-arrow.next{right:-10px}
.crsl-dots{display:flex; justify-content:center; flex-wrap:wrap; gap:0; margin-top:12px}
/* The dot stays 8px to the eye, but the button around it is 28px so a thumb can
   actually hit it — a target the size of the mark is a target you miss. */
.crsl-dot{
  width:28px; height:28px; padding:0; border:none; background:none; cursor:pointer;
  position:relative; border-radius:50%;
}
.crsl-dot::before{
  content:""; position:absolute; inset:10px; border-radius:50%;
  background:color-mix(in srgb, var(--k-ink) 22%, transparent);
  transition:background .2s ease, transform .2s ease;
}
.crsl-dot.active::before{background:var(--k-acc); transform:scale(1.4)}
@media(max-width:760px){ .crsl-arrow{display:none} }

/* ---------- testimonial cards ---------- */
/* the CARD gets the width — with looping the track's direct children are the
   duplicated sets, and sizing those squeezed four cards into one card's width */
.tst-crsl .tst-card{width:min(86vw, 370px)}
.tst-card{
  position:relative; margin:0; background:var(--k-bg); border:1px solid var(--k-line);
  border-radius:var(--k-r); padding:30px 28px 26px; display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.tst-card:hover{transform:translateY(-3px); box-shadow:0 18px 44px -24px rgba(20,18,16,.4)}
/* the avatar lifts out of the card's top-right corner; the header reserves the
   width so the name never runs under it */
.tst-av{
  position:absolute; top:-20px; right:22px; width:104px; height:104px; border-radius:50%;
  object-fit:cover; object-position:center 28%; border:4px solid var(--k-bg2);
  box-shadow:0 12px 28px rgba(20,18,16,.16);
  transition:transform .4s cubic-bezier(.22,.9,.3,1);
}
.tst-card:hover .tst-av{transform:scale(1.06)}
.tst-av-mono{
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--k-acc) 12%, var(--k-bg2));
  color:var(--k-acc); font-family:var(--k-disp); font-size:42px; font-weight:600;
}
.tst-head{min-height:62px; padding-right:96px; display:flex; flex-direction:column; justify-content:center; margin-bottom:12px}
.tst-name{font-size:17px; font-weight:700; color:var(--k-ink)}
.tst-loc{font-size:12.5px; color:var(--k-faint); margin-top:2px}
.tst-pull{font-family:var(--k-disp); font-size:20px; line-height:1.24; color:var(--k-ink); margin:0 0 10px}
.tst-text{font-size:14.5px; font-style:italic; color:var(--k-mut); line-height:1.62; margin:0; flex:1}

/* ---------- comparator ---------- */
.cmp-sect{margin-top:clamp(34px,5vw,64px)}
.cmp-title{margin:0 0 18px}
.cmp-bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px}
.cmp-lab{font-size:13px; color:var(--k-mut); font-weight:600}
/* two axes, so a toggle rather than a row of buttons */
.cmp-toggle{display:flex; background:var(--k-bg2); border-radius:100px; padding:3px; gap:2px}
.cmp-toggle button{
  border:none; background:none; cursor:pointer; font:inherit; font-size:13.5px; font-weight:600;
  padding:9px 20px; border-radius:100px; color:var(--k-mut);
}
.cmp-toggle button[aria-pressed="true"]{background:var(--k-acc); color:#fff}
.cmp-dir{
  border:1px solid var(--k-line); background:var(--k-bg); cursor:pointer; font:inherit;
  font-size:13px; font-weight:600; padding:9px 16px; border-radius:100px; color:var(--k-mut);
}
.cmp-dir:hover{border-color:var(--k-acc); color:var(--k-acc)}

.cmp-wrap{overflow-x:auto; border:1px solid var(--k-line); border-radius:var(--k-r)}
table.cmp{width:100%; border-collapse:collapse; font-size:14px; min-width:760px}
table.cmp th,table.cmp td{padding:14px 14px; text-align:left; border-bottom:1px solid var(--k-line); vertical-align:middle}
table.cmp thead th{background:var(--k-bg2); vertical-align:bottom; padding:18px 14px 16px}
table.cmp tbody th{font-weight:700; white-space:nowrap; color:var(--k-ink)}
table.cmp tbody tr:last-child td,table.cmp tbody tr:last-child th{border-bottom:none}
table.cmp td{color:var(--k-mut)}
table.cmp td.num{font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--k-ink); font-weight:600}
table.cmp .yes{color:var(--k-acc); font-weight:700}
table.cmp .no{color:var(--k-faint)}

.cmp-head{display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  text-decoration:none; color:inherit; min-width:134px}
/* one square frame for every device; only the size steps, and it steps with the
   price — so the picture says what it costs even when the table is sorted by range */
/* The photograph fills the frame, centred. It is already a square crop of the
   product's own lead photo, so nothing is cut here and nothing is padded. */
.cmp-ph{position:relative; display:block; aspect-ratio:1; border-radius:14px; overflow:hidden;
  background:var(--k-bg2);
  transition:transform .25s cubic-bezier(.22,.9,.3,1)}
/* Positioned, not sized in percentages. Safari does not resolve `height:100%`
   against a parent whose height comes from `aspect-ratio` — the image kept its
   own 400px height inside a 58px box, so only its top edge showed. `inset:0`
   resolves against the padding box in every engine. Chrome renders it correctly
   either way, which is why this only ever appeared on the reviewer's screen. */
.cmp-ph img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block}
.cmp-head:hover .cmp-ph{transform:translateY(-3px) scale(1.03)}
.cmp-nm{font-size:14.5px; font-weight:700; letter-spacing:-.01em}
.cmp-head:hover .cmp-nm{color:var(--k-acc)}
.cmp-add{
  padding:9px 18px; border-radius:100px; border:none; cursor:pointer; font:inherit;
  font-size:13.5px; font-weight:700; background:var(--k-acc); color:#fff; white-space:nowrap;
}
.cmp-add:hover{filter:brightness(.92)}
@media(max-width:620px){ .cmp-lab{width:100%} }
@media (prefers-reduced-motion:reduce){ .crsl-track{scroll-behavior:auto} }

/* ---------- verification-method cards ---------- */
/* The emblem lives in its own element rather than on ::before, because d2's
   numbered list already spends ::before on the counter. The wrapper clips and
   tints; the icon inside bleeds past the corner and is clipped by it. */
.mth{position:relative; overflow:hidden; isolation:isolate;
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease}
.mth > *{position:relative; z-index:1}
/* --mth is set per card, so the seven do not all wear the same colour */
.mth-em{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  border-radius:inherit;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--mth, var(--k-acc)) 13%, transparent), transparent 62%);
}
/* the <i> answers the pointer, the svg drifts on its own — one transform each */
.mth-ic{
  position:absolute; right:-18px; bottom:-22px; width:124px; height:124px;
  transform-origin:68% 68%;
  transition:transform .34s cubic-bezier(.22,1,.36,1);
}
.mth-ic svg{
  width:100%; height:100%; display:block;
  color:var(--mth, var(--k-acc)); opacity:.15;
  transition:opacity .34s ease;
  animation:mth-drift 26s ease-in-out infinite alternate;
}
.mth:hover{transform:translateY(-3px); box-shadow:0 16px 38px -26px rgba(20,18,16,.45)}
.mth:hover .mth-ic{transform:scale(1.3) rotate(-5deg)}
.mth:hover .mth-ic svg{opacity:.32}
@keyframes mth-drift{ from{rotate:-4deg} to{rotate:4deg} }
@media (prefers-reduced-motion:reduce){
  .mth-ic svg{animation:none}
  .mth,.mth-ic,.mth-ic svg{transition:none}
}

/* ---------- basket button in the floating nav ---------- */
/* It appears only once there is something in the basket: an empty basket in the
   menu is a control that does nothing. `display` rather than [hidden], because
   any author display rule beats the hidden attribute. */
.nav-cart{
  display:none; align-items:center; gap:6px; cursor:pointer; font:inherit;
  border:1px solid var(--k-line); background:var(--k-bg); color:var(--k-ink);
  border-radius:100px; padding:6px 12px 6px 10px; line-height:1;
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.nav-cart.on{display:inline-flex}
.nav-cart:hover{border-color:var(--k-acc); color:var(--k-acc); transform:translateY(-1px)}
.nav-cart svg{width:17px; height:17px; flex:0 0 auto}
.nav-cart-n{
  font-size:11.5px; font-weight:700; font-style:normal; font-variant-numeric:tabular-nums;
  min-width:17px; height:17px; padding:0 5px; border-radius:100px;
  background:var(--k-acc); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
}