/* ===========================================================================
   Mekozza · pet-tag.php — the public page for the collar tag
   ===========================================================================
   Prefix .mkl, the only free one left. The rest are taken: .mkc .mkd .mkt
   .mkp .mkn .mkm .mkj .mka .mkv .mkq .mkg — and .mkt in particular belongs to
   cart.css, which is how an earlier page of mine quietly inherited a shopping
   basket's styling.

   Built as a product page rather than a brochure, and narrow-first. The order
   below IS the mobile design; the two-column desktop layout at the bottom is
   the special case.

   The shape of it is taken from how a good shop page works on a phone: the
   pictures argue the case, the decision sits in one block directly under them,
   and the button is never more than a thumb away because it follows you down.
   =========================================================================== */

/* The sticky bar is named here too, deliberately.

   It sits outside <main class="mkl"> because it is not main content, and
   custom properties inherit — so inside it every var() below resolved to
   nothing. An undefined var() invalidates the whole declaration, which turned
   `background:var(--b)` into no background at all and left the one button that
   follows the reader down the page rendering as a blank white rectangle. The
   same cause left its `bottom` calc invalid, so it was not even fixed.

   Two symptoms, one missing inheritance. Scoping the tokens to both selectors
   is the fix; see also the local copies on .mkl-sticky itself. */
.mkl,
.mkl-sticky {
  --b:#ff6b35;
  --b-dk:#e2551f;
  --ink:#101828;
  --ink-2:#475467;
  --ink-3:#8d96a7;
  --line:#e4e7ec;
  --bg:#f7f8fa;
  --ok:#0f9d58;
  --r:16px;

  /* Its own copies, so this page lays out correctly even if mobile.css is not
     on the page — the tab bar is drawn by footer.php, not by this file. */
  --tabbar-h:64px;
  --safe-b:env(safe-area-inset-bottom, 0px);

  font-family:'Open Sans', system-ui, sans-serif;
  color:var(--ink);
  background:#fff;
}

.mkl-wrap { width:100%; max-width:1140px; margin:0 auto; padding:0 16px; }
.mkl-wrap--narrow { max-width:760px; }

.mkl-h2 {
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:clamp(1.4rem,4.6vw,2.2rem); line-height:1.18;
  letter-spacing:-.02em; margin:0 0 12px;
}
.mkl-sub { color:var(--ink-2); font-size:.95rem; line-height:1.55; margin:0 0 20px; max-width:62ch; }

.mkl-kicker {
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:.74rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--b); background:rgba(255,107,53,.1);
  padding:6px 13px; border-radius:999px; margin-bottom:15px;
}
.mkl-kicker--dark { color:#fff; background:rgba(255,255,255,.14); }

/* Tighter on a phone; the breathing room that reads as generous on a
   desktop reads as scrolling on a 390px screen. */
.mkl-sec { padding:40px 0; }

/* ======================================================= 1 · the product == */
.mkl-buy { padding:0 0 30px; }

/* ---- the gallery --------------------------------------------------------
   Full bleed on a phone. A product picture inset inside a 16px gutter looks
   like a diagram in a document; edge to edge it looks like the thing itself,
   which is the whole job of this block. */
.mkl-gal { margin:0 0 20px; }
.mkl-gal__frame { position:relative; }

.mkl-gal__track {
  display:flex;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  position:relative;
}
.mkl-gal__track::-webkit-scrollbar { display:none; }

.mkl-slide {
  /* One whole slide per view and no peek. The sliver of the next card was
     meant to say "there is more" and instead just looked like a cropped
     layout; the thumbnails below say it properly. */
  flex:0 0 100%;
  min-width:0;                 /* a flex child will not otherwise shrink */
  margin:0; scroll-snap-align:start;
  position:relative;
  aspect-ratio:1 / 1;
  display:grid; grid-template-rows:auto 1fr;
  overflow:hidden;
}

.mkl-slide--light { background:radial-gradient(120% 95% at 50% 0%,#ffffff,#e9edf3); }
.mkl-slide--tint  { background:radial-gradient(120% 95% at 50% 0%,#fff6f1,#ffe3d4); }
.mkl-slide--cool  { background:radial-gradient(120% 95% at 50% 0%,#f3f6fb,#dde4ef); }
.mkl-slide--dark  { background:radial-gradient(120% 95% at 50% 0%,#1d2639,#0b1020); }

/* the claim, printed across the top of the picture */
.mkl-slide__head {
  padding:18px 20px 0; display:grid; gap:3px; z-index:2;
}
.mkl-slide__head b {
  font-family:'Poppins',sans-serif; font-weight:800;
  font-size:1.12rem; letter-spacing:-.02em; line-height:1.2; color:var(--ink);
}
.mkl-slide__head span { font-size:.84rem; color:var(--ink-2); line-height:1.35; }
.mkl-slide__head--on b { color:#fff; }
.mkl-slide__head--on span { color:rgba(255,255,255,.72); }

.mkl-slide__art {
  display:grid; place-items:center; min-height:0;
  padding:10px 20px 24px; width:100%;
}

.mkl-tag { width:100%; height:auto; display:block; }

/* the counter, on the picture where a shop puts it */
.mkl-gal__count {
  position:absolute; right:14px; bottom:14px; z-index:3;
  white-space:nowrap; pointer-events:none;
  background:rgba(16,24,40,.72); color:#fff;
  font-size:.74rem; font-weight:700;
  padding:5px 11px; border-radius:999px;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}

/* slide 1 — the tag and its size */
.mkl-dim { position:relative; width:min(78%, 320px); padding-top:26px; }
.mkl-dim .mkl-tag { filter:drop-shadow(0 22px 28px rgba(16,24,40,.32)); }
.mkl-dim__rule {
  position:absolute; top:4px; left:2%; right:2%; height:14px;
  border-left:2px solid var(--b); border-right:2px solid var(--b);
  display:flex; align-items:center;
}
/* Two half-rules with the label between them, rather than one rule behind it.
   Drawn as a single dashed line the label sat ON the dashes and read as
   struck through. */
.mkl-dim__rule::before,
.mkl-dim__rule::after {
  content:''; flex:1 1 auto; border-top:2px dashed rgba(255,107,53,.85);
}
.mkl-dim__rule b {
  flex:0 0 auto; padding:0 8px;
  font-family:'Poppins',sans-serif; font-size:.78rem; color:var(--b);
  white-space:nowrap;
}

/* slide 2 — the range */
.mkl-six {
  grid-template-columns:repeat(3,1fr);
  gap:12px 10px; align-content:center;
}
.mkl-six > span { display:block; min-width:0; }
.mkl-six .mkl-tag { filter:drop-shadow(0 9px 13px rgba(16,24,40,.28)); }

/* slide 3 — next to a coin */
.mkl-size { display:flex; align-items:center; justify-content:center; gap:7%; }
.mkl-size__tag { flex:0 0 46%; min-width:0; }
.mkl-size__tag .mkl-tag { filter:drop-shadow(0 16px 20px rgba(16,24,40,.3)); }
.mkl-coin {
  flex:0 0 33%; aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(145deg,#e4cf86,#c4a856 60%,#ddc87d);
  border:2px solid #b49a4e; color:#6f5a1f;
  font-family:'Poppins',sans-serif; font-weight:800; font-size:1.35rem;
  box-shadow:0 12px 16px -9px rgba(16,24,40,.45);
}

/* slides 4 and 5 — a phone */
.mkl-phone {
  /* Measured against the short side. At a share of the WIDTH it came out
     taller than the box and the button at the bottom of the mock screen —
     the most important thing on it — was clipped away. */
  height:100%; width:auto; aspect-ratio:9 / 17; max-width:92%;
  background:#0b1020; border-radius:24px; padding:7px;
  box-shadow:0 20px 32px -14px rgba(16,24,40,.6);
}
.mkl-phone__scr {
  width:100%; height:100%; border-radius:18px; background:#fff;
  padding:10px 9px; display:flex; flex-direction:column; gap:6px; overflow:hidden;
}
.mkl-phone__scr--dark { background:#111827; justify-content:center; gap:9px; }

.mkl-mock__alert {
  background:#b42318; color:#fff; border-radius:7px; padding:4px 7px;
  font-size:.52rem; font-weight:800; letter-spacing:.04em;
  display:flex; align-items:center; gap:4px;
}
.mkl-mock__pic {
  flex:1 1 auto; min-height:0; border-radius:10px;
  background:linear-gradient(160deg,#ffd9c4,#ffb089);
  display:grid; place-items:center; color:#9a4a20; font-size:1.6rem;
}
.mkl-mock__name { font-family:'Poppins',sans-serif; font-size:.84rem; line-height:1.1; }
.mkl-mock__sub  { font-size:.53rem; color:var(--ink-3); line-height:1.2; }
.mkl-mock__chip {
  align-self:flex-start; background:#fff4ed; color:#9a4a20;
  border:1px solid #ffd9c4; border-radius:999px; padding:2px 7px;
  font-size:.5rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;
}
.mkl-mock__btn {
  background:var(--b); color:#fff; border-radius:8px; text-align:center;
  padding:6px 4px; font-size:.58rem; font-weight:800; font-family:'Poppins',sans-serif;
}

.mkl-note {
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14);
  border-radius:10px; padding:8px 8px 8px 24px; color:#fff;
  display:grid; gap:2px; position:relative;
}
.mkl-note > i { position:absolute; left:8px; top:9px; color:var(--b); font-size:.6rem; }
.mkl-note b     { font-family:'Poppins',sans-serif; font-size:.57rem; line-height:1.25; }
.mkl-note small { font-size:.5rem; color:rgba(255,255,255,.62); line-height:1.3; }
.mkl-note__map {
  margin-top:3px; color:#7cc0ff; font-size:.5rem; font-weight:700;
  display:inline-flex; align-items:center; gap:3px;
}
.mkl-note--quiet { opacity:.55; }

/* slide 6 — what is not on it */
.mkl-priv { align-content:center; gap:16px; justify-items:start; width:100%; }
.mkl-priv ul { list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.mkl-priv li {
  display:flex; align-items:center; gap:10px; min-width:0;
  font-size:1rem; color:rgba(255,255,255,.92);
}
.mkl-priv li i {
  flex:0 0 24px; height:24px; border-radius:50%;
  display:grid; place-items:center; font-size:.66rem;
  background:rgba(255,107,53,.22); color:#ff9b8a;
}
.mkl-priv > b { font-family:'Poppins',sans-serif; font-size:1.05rem; color:#fff; }

/* ---- thumbnails ---------------------------------------------------------- */
.mkl-thumbs {
  display:flex; gap:9px; padding:12px 16px 0;
  overflow-x:auto; scrollbar-width:none; scroll-padding-left:16px;
}
.mkl-thumbs::-webkit-scrollbar { display:none; }

.mkl-thumb {
  /* 58px square: a real target, and big enough that the miniature inside it
     is legible rather than a smudge. */
  flex:0 0 58px; width:58px; height:58px; padding:6px;
  border:2px solid var(--line); border-radius:12px; background:#fff;
  cursor:pointer; display:grid; place-items:center;
  transition:border-color .14s ease, transform .14s ease;
  color:var(--ink-3); font-size:1.05rem;
}
.mkl-thumb.is-on { border-color:var(--b); transform:translateY(-1px); color:var(--b); }
.mkl-thumb .mkl-tag { width:100%; }
.mkl-thumb__trio { display:flex; gap:2px; width:100%; }
.mkl-thumb__trio .mkl-tag { width:100%; }
.mkl-thumb__pair { display:flex; align-items:center; gap:3px; width:100%; }
.mkl-thumb__pair .mkl-tag { width:64%; }
.mkl-thumb__coin {
  flex:0 0 32%; aspect-ratio:1; border-radius:50%; font-style:normal;
  background:linear-gradient(145deg,#e4cf86,#c4a856); color:#6f5a1f;
  display:grid; place-items:center; font-size:.42rem; font-weight:800;
}

/* ---- the decision block -------------------------------------------------- */
.mkl-buy__card { padding:4px 16px 0; }

.mkl-pills { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.mkl-pill {
  font-family:'Poppins',sans-serif; font-weight:800;
  font-size:.64rem; letter-spacing:.07em; padding:5px 10px; border-radius:6px;
}
.mkl-pill--brand { background:#eef1f5; color:var(--ink-2); }
.mkl-pill--good  { background:#e7f7ee; color:#0a7a45; }

.mkl-title {
  font-family:'Poppins',sans-serif; font-weight:800;
  font-size:clamp(1.6rem,6.2vw,2.2rem); line-height:1.12;
  letter-spacing:-.025em; margin:0 0 5px;
}
/* The promise as its own sentence. It used to be an <em> inside the heading
   beginning with an em dash, so the second line opened with a punctuation mark
   and read like a sentence missing its front half. */
.mkl-claim {
  margin:0 0 16px; color:var(--b);
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:1.02rem; line-height:1.3;
}

/* ---- the four facts, as tiles ------------------------------------------
   Four sentences stacked came to 194px of prose on a 390px screen, which is
   read as one block of grey rather than as four facts. Two by two, each with
   a few words and its own icon, says the same thing in half the height and
   can be taken in without reading it. The whole sentence is still in the
   markup and comes back at 768px, where there is room for it. */
.mkl-ticks {
  list-style:none; margin:0 0 16px; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
}
.mkl-ticks li {
  min-width:0; padding:10px 11px;
  border:1px solid var(--line); border-radius:13px;
  background:var(--card, #fff);
  /* The icon beside the label, not above it. Stacked, each tile came to 99px
     and two rows of them saved nothing at all over the four sentences. */
  display:grid; grid-template-columns:22px minmax(0,1fr);
  column-gap:8px;
  /* Top, not centre. Two tiles side by side have different amounts of text,
     and centring each one's block inside its own box leaves the two labels
     at different heights — which reads as a misprint. */
  align-content:start; align-items:start;
}
.mkl-ticks i {
  grid-row:1 / span 2; align-self:start; margin-top:1px;
  display:grid; place-items:center;
  width:22px; height:22px; border-radius:7px;
  background:#e7f7ee; color:#0a7a45; font-size:.6rem;
}
.mkl-ticks b {
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:.82rem; line-height:1.2; letter-spacing:-.01em; color:var(--ink);
}
.mkl-ticks small {
  font-size:.7rem; line-height:1.3; color:var(--ink-3);
}
/* The long sentence waits for a wider screen. */
.mkl-ticks span { display:none; }

/* ---- the price ----------------------------------------------------------
   A price row, not a number with a clause hanging off it. "₹249" set large
   with "to ₹449 / six finishes" stacked beside it in two smaller sizes read
   as a number that had gone wrong. */
.mkl-money {
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:14px 0; margin:0 0 16px;
}
.mkl-cost {
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:0 0 11px;
}
.mkl-cost__from {
  font-size:.78rem; font-weight:600; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.06em;
}
.mkl-cost__num {
  font-family:'Poppins',sans-serif; font-weight:800;
  font-size:2.3rem; letter-spacing:-.035em; line-height:1;
}
.mkl-cost__to { font-size:.92rem; color:var(--ink-2); }
.mkl-cost__six {
  margin-left:auto; padding:5px 11px; border-radius:999px;
  background:#eef1f5; color:var(--ink-2); text-decoration:none;
  font-size:.72rem; font-weight:700; white-space:nowrap;
}

/* Three promises as one strip. They were three rows; on a phone that is three
   more lines of text under a price nobody has finished reading. */
.mkl-trust {
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:6px;
}
.mkl-trust li {
  display:inline-flex; align-items:center; gap:6px; min-width:0;
  padding:6px 10px; border-radius:999px; background:#f5f7f9;
  font-size:.74rem; font-weight:600; color:var(--ink-2);
}
.mkl-trust i { flex:0 0 auto; color:#0a7a45; font-size:.7rem; }
.mkl-trust b { font-weight:600; }
/* The full phrasing waits for a wider screen, as the four facts do. */
.mkl-trust span { display:none; }

.mkl-acts { display:grid; gap:10px; }

/* ---- the second way in --------------------------------------------------
   Two full-width buttons of the same weight ask somebody to choose between
   them before they have chosen anything. This one is a row that says what is
   behind it. */
.mkl-pick {
  display:flex; align-items:center; gap:12px;
  min-height:56px; padding:11px 15px;
  border:1px solid var(--line); border-radius:14px;
  background:var(--card, #fff); color:var(--ink); text-decoration:none;
}
.mkl-pick span {
  font-family:'Poppins',sans-serif; font-weight:700; font-size:.95rem;
}
.mkl-pick small {
  margin-left:auto; font-size:.76rem; color:var(--ink-3); white-space:nowrap;
}
.mkl-pick i { flex:0 0 auto; color:var(--ink-3); font-size:.74rem; }
.mkl-pick:active { background:#f5f7f9; }

.mkl-buybtn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:54px; padding:15px 22px;
  font-family:'Poppins',sans-serif; font-weight:800; font-size:1.04rem;
  background:var(--b); color:#fff; border:1px solid transparent; border-radius:14px;
  text-decoration:none; cursor:pointer;
  box-shadow:0 12px 24px -11px rgba(255,107,53,.85);
  transition:background .14s ease, transform .14s ease;
}
.mkl-buybtn:hover { background:var(--b-dk); transform:translateY(-1px); }
.mkl-buybtn:disabled { opacity:.6; cursor:default; transform:none; }
.mkl-buybtn--ghost {
  background:#fff; color:var(--ink); border-color:var(--line); box-shadow:none;
  font-size:.98rem; min-height:48px;
}
.mkl-buybtn--ghost:hover { background:#fff; border-color:var(--ink-3); }
.mkl-buybtn--wide { max-width:420px; margin:0 auto; }
.mkl-buybtn--sm { width:auto; min-height:46px; padding:12px 20px; font-size:.95rem; border-radius:11px; }

.mkl-buy__fine { margin:13px 0 0; font-size:.82rem; color:var(--ink-3); text-align:center; }

/* ---- the bar that follows you -------------------------------------------- */
.mkl-sticky {
  /* Its own copy of the two measurements, and a fallback inside every var().

     This bar lives outside <main class="mkl">, because it is not main content.
     Custom properties inherit, so sitting outside the element that declares
     them meant --tabbar-h resolved to nothing here. An invalid var() makes the
     whole calc() invalid at computed-value time, which turns `bottom` into
     `auto` — and a fixed element with auto offsets falls back to its static
     position. The computed style still reads "fixed", the bar still sits 9000
     pixels down the page, and neither fact points at a missing variable. The
     same cause left `background:var(--b)` with no background at all, so the
     button rendered as a blank white rectangle. */
  --tabbar-h:64px;
  --safe-b:env(safe-area-inset-bottom, 0px);

  position:fixed; left:0; right:0; z-index:60;
  color:var(--ink);
  bottom:calc(var(--tabbar-h, 64px) + var(--safe-b, 0px) + 8px);
  padding:0 12px;
  animation:mkl-rise .18s ease;
}
.mkl-sticky[hidden] { display:none; }
.mkl-sticky__in {
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--line); border-radius:15px;
  padding:9px 10px 9px 15px;
  box-shadow:0 10px 30px -10px rgba(16,24,40,.4);
}
.mkl-sticky__price { display:grid; min-width:0; }
.mkl-sticky__price b { font-family:'Poppins',sans-serif; font-weight:800; font-size:1.25rem; line-height:1; }
.mkl-sticky__price small { font-size:.68rem; color:var(--ink-3); }
.mkl-sticky .mkl-buybtn { margin-left:auto; }

@keyframes mkl-rise { from { transform:translateY(12px); opacity:0; } }

/* ===================================================== 2 · the privacy == */
.mkl-privacy {
  background-color:#0b1020; background-repeat:no-repeat;
  background-image:
    radial-gradient(900px 400px at 10% 0%, rgba(255,107,53,.2), transparent 62%),
    linear-gradient(170deg,#161d2d,#0b1020);
  color:#fff;
}
/* A gradient alone leaves the rest of a tall section white, and white text on
   white is an invisible page. The colour underneath is not optional. */
.mkl-privacy .mkl-h2  { color:#fff; font-size:clamp(1.3rem,4.4vw,2rem); }
.mkl-privacy .mkl-sub { color:rgba(255,255,255,.72); margin-bottom:18px; }

/* Two columns, side by side even on the narrowest phone.

   Stacked, the comparison stops being one: you read six things, scroll, then
   read five more and have to hold the first six in your head. Side by side it
   is read across in a glance, which is the entire reason this section exists.
   That is worth the smaller type it costs at 390px. */
.mkl-vs {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:14px 12px;
}
.mkl-vs__col { min-width:0; }
.mkl-vs__col + .mkl-vs__col {
  border-left:1px solid rgba(255,255,255,.12); padding-left:11px;
}
.mkl-vs__col h3 {
  display:flex; align-items:center; gap:6px;
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:.78rem; letter-spacing:.02em; margin:0 0 10px; color:#fff;
}
.mkl-vs__col h3 i { font-size:.72rem; color:#7ee2a8; }
.mkl-vs__col--no h3 i { color:#ff9b8a; }

.mkl-vs ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.mkl-vs li {
  display:flex; gap:7px; align-items:flex-start; min-width:0;
  font-size:.79rem; line-height:1.3; color:rgba(255,255,255,.88);
}
.mkl-vs li i {
  flex:0 0 13px; margin-top:2px; font-size:.62rem;
  color:rgba(255,255,255,.45); text-align:center;
}
.mkl-vs__col--no li i { color:#ff9b8a; }
.mkl-vs li span { min-width:0; }

.mkl-foot {
  display:flex; gap:9px; align-items:flex-start;
  margin:14px 0 0; padding:12px 14px;
  background:rgba(255,255,255,.06); border-radius:12px;
  font-size:.82rem; line-height:1.45; color:rgba(255,255,255,.8);
}
.mkl-foot i { color:var(--b); margin-top:3px; flex:0 0 auto; }

/* ======================================================= 3 · the steps == */
/* Three lines, not three cards. A number, a fact, a clause — there is nothing
   here anybody argues with, so it does not need 726px to say it. */
.mkl-steps { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.mkl-steps li { display:flex; gap:13px; align-items:flex-start; min-width:0; }
.mkl-steps__n {
  flex:0 0 30px; height:30px; border-radius:50%;
  display:grid; place-items:center; background:var(--b); color:#fff;
  font-family:'Poppins',sans-serif; font-weight:800; font-size:.88rem;
  box-shadow:0 5px 12px -6px rgba(255,107,53,.85);
}
.mkl-steps__t { display:grid; gap:2px; min-width:0; padding-top:3px; }
.mkl-steps__t b {
  font-family:'Poppins',sans-serif; font-weight:700; font-size:.98rem; line-height:1.25;
}
.mkl-steps__t small { font-size:.86rem; color:var(--ink-2); line-height:1.45; }

/* 4 · the timeline section was removed — see the note in pet-tag.php. */

/* ===================================================== 5 · the designs == */
/* Two columns on a phone. Six full-width panels, each with a blurb and a spec
   table, ran to 2,602px — a quarter of the whole page to say "there are six
   colours". Compact cards say it in a third of the space and, being links
   now, they also do something when they are tapped. */
.mkl-grid { display:grid; gap:12px; grid-template-columns:repeat(2,1fr); }

.mkl-card {
  display:flex; flex-direction:column; min-width:0;
  background:#fff; border:1px solid var(--line); border-radius:15px;
  overflow:hidden;
  box-shadow:0 2px 10px -7px rgba(16,24,40,.25);
  transition:border-color .14s ease, box-shadow .14s ease;
}
.mkl-card:hover, .mkl-card:focus-within {
  border-color:var(--b); box-shadow:0 14px 24px -14px rgba(16,24,40,.32);
}
/* The card is a link AND a button. The link is the whole upper area so the
   obvious tap opens the design; the basket button sits under it as its own
   target rather than nested inside the anchor, which is invalid and which
   browsers resolve by picking one at random. */
.mkl-card__go {
  display:flex; flex-direction:column; min-width:0;
  text-decoration:none; color:inherit;
}
.mkl-card__art {
  display:grid; place-items:center; aspect-ratio:1 / 1; padding:16%;
}
.mkl-card__art .mkl-tag {
  width:100%; filter:drop-shadow(0 8px 12px rgba(16,24,40,.32));
}
.mkl-card__body { padding:11px 12px 13px; display:grid; gap:3px; min-width:0; }
.mkl-card__name {
  font-family:'Poppins',sans-serif; font-weight:700; font-size:.98rem;
  line-height:1.2; min-width:0;
}
.mkl-card__meta {
  font-size:.72rem; color:var(--ink-3); line-height:1.3;
  /* Two short facts on one line instead of a two-row table. */
  min-width:0;
}
.mkl-card__price {
  margin-top:4px; display:flex; align-items:center; gap:6px;
  font-family:'Poppins',sans-serif; font-weight:800; font-size:1.1rem;
}

.mkl-card__add {
  /* 44px, not 40 — it is a real action on a product card, not a chip. */
  margin:0 10px 10px; min-height:44px; padding:10px;
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:.82rem;
  background:#fff4ef; color:var(--b-dk);
  border:1px solid rgba(255,107,53,.3); border-radius:10px; cursor:pointer;
  transition:background .14s ease, border-color .14s ease;
}
.mkl-card__add:hover { background:#ffe7dc; border-color:var(--b); }
.mkl-card__add i { font-size:.8rem; }

/* ==================================================== 6 · the benefits == */
.mkl-tint { background:var(--bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.mkl-bens { display:grid; gap:10px; grid-template-columns:repeat(2,1fr); }
.mkl-ben {
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:14px 13px; min-width:0;
}
.mkl-ben__i {
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:rgba(255,107,53,.11); color:var(--b); font-size:.92rem; margin-bottom:9px;
}
.mkl-ben h3 {
  font-family:'Poppins',sans-serif; font-weight:700; font-size:.92rem;
  line-height:1.25; margin:0 0 4px; min-width:0;
}
.mkl-ben p { margin:0; color:var(--ink-2); font-size:.8rem; line-height:1.45; }
/* The fifth tile has no partner, so it takes the full width rather than
   leaving a hole next to it. */
.mkl-ben:last-child:nth-child(odd) { grid-column:1 / -1; }

/* ========================================================== 7 · the faq == */
.mkl-faq { border:1px solid var(--line); border-radius:12px; margin-bottom:10px; background:#fff; overflow:hidden; }
.mkl-faq summary {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 18px; cursor:pointer; list-style:none; min-height:48px;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:.98rem;
}
.mkl-faq summary::-webkit-details-marker { display:none; }
.mkl-faq summary i { color:var(--ink-3); font-size:.8rem; transition:transform .16s ease; flex:0 0 auto; }
.mkl-faq[open] summary { border-bottom:1px solid var(--line); }
.mkl-faq[open] summary i { transform:rotate(180deg); }
.mkl-faq p { margin:0; padding:15px 18px 18px; color:var(--ink-2); font-size:.94rem; line-height:1.62; }

/* ======================================================== 8 · the close == */
.mkl-close { text-align:center; padding:46px 0 56px; }
.mkl-close .mkl-sub { margin:0 auto 22px; }

/* ========================== wider than a phone =========================== */
@media (min-width:700px) {
  .mkl-cols  { grid-template-columns:1fr 1fr; gap:18px; }
  .mkl-steps { grid-template-columns:repeat(3,1fr); gap:22px; }
  .mkl-grid  { grid-template-columns:repeat(3,1fr); gap:16px; }
  .mkl-bens  { grid-template-columns:repeat(3,1fr); gap:14px; }
  .mkl-sec   { padding:60px 0; }
  .mkl-vs    { padding:22px 20px; gap:22px; }
  .mkl-vs__col + .mkl-vs__col { padding-left:22px; }
  .mkl-vs li { font-size:.92rem; gap:9px; }
  .mkl-vs__col h3 { font-size:.95rem; }
  .mkl-steps { grid-template-columns:repeat(3,1fr); gap:24px; }
  .mkl-steps li { flex-direction:column; gap:10px; }
  .mkl-ben:last-child:nth-child(odd) { grid-column:auto; }

  /* The picture stops being full bleed once there is room around it: at this
     width an edge-to-edge image reads as a banner rather than a product. */
  .mkl-gal       { padding:0 16px; }
  .mkl-gal__frame { border-radius:22px; overflow:hidden; }
  .mkl-slide     { aspect-ratio:4 / 3; }
  .mkl-thumbs    { padding-left:16px; padding-right:16px; }
  .mkl-buy__card { max-width:640px; margin:0 auto; }

  /* Room for the sentences, so the tiles stand down and the list it always
     was comes back. */
  .mkl-ticks { grid-template-columns:1fr; gap:9px; margin-bottom:18px; }
  .mkl-ticks li {
    display:flex; gap:10px; align-items:flex-start;
    padding:0; border:0; background:none; border-radius:0;
  }
  .mkl-ticks i {
    flex:0 0 18px; width:18px; height:18px; margin:2px 0 0; border-radius:50%;
    font-size:.56rem;
  }
  .mkl-ticks b, .mkl-ticks small { display:none; }

  /* The promises go back to a column of full sentences. */
  .mkl-trust { display:grid; gap:7px; }
  .mkl-trust li {
    display:flex; padding:0; background:none; border-radius:0;
    font-size:.84rem; font-weight:400;
  }
  .mkl-trust b { display:none; }
  .mkl-trust span { display:block; min-width:0; }
  .mkl-ticks span {
    display:block; font-size:.9rem; line-height:1.45; color:var(--ink-2); min-width:0;
  }
  .mkl-slide__head { padding:22px 26px 0; }
  .mkl-slide__head b { font-size:1.3rem; }
}

@media (min-width:1000px) {
  /* Picture and decision side by side, the card staying put while the page
     scrolls — which is the whole point of a product page on a wide screen. */
  .mkl-buy {
    max-width:1140px; margin:0 auto; padding:28px 16px 56px;
    display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    gap:44px; align-items:start;
  }
  .mkl-gal { margin:0; padding:0; position:sticky; top:86px; }
  .mkl-slide { aspect-ratio:1 / 1; }
  .mkl-thumbs { padding:12px 0 0; }
  .mkl-buy__card { padding:0; max-width:none; margin:0; }

  .mkl-grid { grid-template-columns:repeat(3,1fr); }
  .mkl-bens { grid-template-columns:repeat(3,1fr); }

  /* The sticky bar is a phone pattern. On a desktop the gallery is pinned and
     the button is never far, so a second one would only be in the way. */
  .mkl-sticky { display:none !important; }
}

/* Somebody who has asked for less movement gets none of it. */
@media (prefers-reduced-motion:reduce) {
  .mkl-buybtn, .mkl-card, .mkl-faq summary i, .mkl-thumb { transition:none; }
  .mkl-buybtn:hover, .mkl-card:hover, .mkl-thumb.is-on { transform:none; }
  .mkl-sticky { animation:none; }
}

/* ======================================================= the pet chooser == */
/* A sheet from the bottom on a phone, a dialog in the middle on a desktop.
   It asks the one thing that cannot be guessed — which pet the code is for —
   and nothing else; the address and the payment belong to the basket. */
.mkl-sheet,
.mkl-sheet * { box-sizing:border-box; }
.mkl-sheet {
  --b:#ff6b35; --b-dk:#e2551f; --ink:#101828; --ink-2:#475467;
  --ink-3:#8d96a7; --line:#e4e7ec;
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:flex-end; justify-content:center;
  font-family:'Open Sans', system-ui, sans-serif; color:var(--ink);
}
.mkl-sheet[hidden] { display:none; }
.mkl-sheet__bg {
  position:absolute; inset:0; background:rgba(16,24,40,.55);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.mkl-sheet__card {
  position:relative; width:100%; max-width:520px;
  background:#fff; border-radius:20px 20px 0 0;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  max-height:86vh; overflow-y:auto;
  box-shadow:0 -10px 40px -12px rgba(16,24,40,.5);
  animation:mkl-up .2s ease;
}
@keyframes mkl-up { from { transform:translateY(16px); opacity:0; } }

.mkl-sheet__head { display:flex; align-items:center; gap:12px; margin-bottom:4px; }
.mkl-sheet__head h2 {
  flex:1 1 auto; min-width:0; margin:0;
  font-family:'Poppins',sans-serif; font-weight:800; font-size:1.2rem;
}
.mkl-sheet__x {
  flex:0 0 40px; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line); background:#fff; cursor:pointer;
  color:var(--ink-2); font-size:.95rem;
}
.mkl-sheet__what {
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin:0 0 14px; color:var(--ink-2); font-size:.9rem;
}
.mkl-sheet__what b { font-family:'Poppins',sans-serif; color:var(--ink); font-size:1rem; }

.mkl-sheet__pets { display:grid; gap:8px; margin-bottom:15px; }
.mkl-pet { position:relative; display:block; min-width:0; }
.mkl-pet input {
  position:absolute; opacity:0; width:0; height:0;
}
.mkl-pet span {
  display:flex; align-items:center; min-height:48px; padding:12px 14px;
  border:1.5px solid var(--line); border-radius:12px; cursor:pointer;
  font-weight:600; font-size:.95rem; min-width:0;
}
.mkl-pet input:checked + span { border-color:var(--b); background:#fff4ef; }
/* Focus has to be visible when the input itself is off screen. */
.mkl-pet input:focus-visible + span { outline:2px solid var(--b); outline-offset:2px; }

.mkl-sheet__qty {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:14px; font-size:.92rem; color:var(--ink-2);
}
.mkl-qty { display:flex; align-items:center; gap:4px; }
.mkl-qty button {
  width:42px; height:42px; border-radius:11px;
  border:1px solid var(--line); background:#fff; cursor:pointer;
  font-size:1.15rem; font-weight:700; color:var(--ink);
}
.mkl-qty output {
  min-width:44px; text-align:center;
  font-family:'Poppins',sans-serif; font-weight:800; font-size:1.05rem;
}

.mkl-sheet__msg { margin:0 0 10px; font-size:.86rem; min-height:1.2em; }
.mkl-sheet__msg.is-good { color:#0a7a45; }
.mkl-sheet__msg.is-bad  { color:#b42318; }
.mkl-sheet__empty { margin:0 0 16px; color:var(--ink-2); font-size:.92rem; line-height:1.55; }
.mkl-sheet__alt {
  display:block; text-align:center; margin-top:11px;
  font-size:.88rem; font-weight:600; color:var(--ink-2);
  min-height:44px; line-height:44px; text-decoration:none;
}

@media (min-width:700px) {
  .mkl-sheet { align-items:center; }
  .mkl-sheet__card { border-radius:20px; padding:22px; }
}

@media (prefers-reduced-motion:reduce) {
  .mkl-sheet__card { animation:none; }
}