/* ===========================================================================
   Product detail page — blocks that only the PDP needs.
   Loaded AFTER product.css and adds nothing to the token set: every colour,
   font, radius and easing here comes from product.css :root. If a value looks
   hard-coded it is a layout number, never a colour.

   Proportions are taken from four real mattress PDPs measured into
   references/mattress/strict.json — not from taste:
     · 3 of 4 (casper, simba, purple) use a split gallery|panel layout
     · the image side takes 53–68% of the row  -> we use 55%
     · 2 of 4 put Add-to-cart above the fold (548px, 812px) -> we target <700px
   =========================================================================== */

/* ===== breadcrumb ======================================================== */
.crumb { padding-block: 14px 2px; font-size: 13.5px; color: var(--muted); }
.crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crumb li { display: flex; align-items: center; gap: 6px; }
.crumb li + li::before { content: "/"; color: var(--border); }
.crumb a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.crumb [aria-current] { color: var(--fg); }

/* ===== the split ========================================================= */
.pdp { padding-block: clamp(18px, 2.4vw, 30px) clamp(40px, 5vw, 64px); }
.pdp__grid { display: grid; gap: clamp(26px, 3.4vw, 48px); }
.pdp__grid > * { min-width: 0; }
@media (min-width: 1000px) {
  .pdp__grid { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); align-items: start; }
  /* the panel follows the gallery while the taller image side scrolls */
  /* position: sticky BẬT LẠI được vì mosaic làm cột ảnh cao 1710px so với panel
   983px -> hành trình 727px (đo được). Ở §58 phải bỏ nó vì hành trình = 0.
   Nếu đổi chiều cao panel hoặc gallery thì ĐO LẠI: RECON/diag-sticky.mjs.
   Thanh #bar dính đáy vẫn giữ, bật khi nút #add rời tầm nhìn. */
.buy {
  position: sticky; top: 80px; }
}

/* ===== gallery =========================================================== */
.gal { display: grid; gap: 10px; }


/* --- mosaic ảnh: ô = nút mở toàn màn hình ------------------------------
   Tỉ lệ ô theo tỉ lệ THẬT của ảnh nên object-fit không phải cắt gì:
   ảnh vuông 1254² -> ô 1/1, ảnh cấu tạo 1536×1024 -> ô 3/2. */
.mos {
  display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.mos__i { position: relative; min-width: 0; }
.mos__i--full { grid-column: 1 / -1; }
.mos__b {
  display: block; position: relative; width: 100%; padding: 0;
  border: 0; border-radius: var(--r-l); overflow: hidden;
  background: var(--sand); cursor: zoom-in;
  aspect-ratio: 1;
}
.mos__i--wide .mos__b { aspect-ratio: 3 / 2; }
.mos__b img { width: 100%; height: 100%; object-fit: cover; }
/* ô rộng dùng ảnh 3/2 đúng tỉ lệ ô nên cover = không cắt; các ô vuông cũng vậy */
.mos__b:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; }

/* nhãn ngắn: cho biết ô nói về gì mà không cần đọc chữ trong ảnh */
.mos__lb {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  width: max-content; max-width: calc(100% - 64px);   /* 64px = chỗ cho dấu phóng to */
  padding: 7px 12px; border-radius: 99px; text-align: left;
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px -8px oklch(20% 0.02 240 / .3);
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--fg); line-height: 1.25;
}
/* dấu phóng to: LUÔN hiện — trên cảm ứng không có hover */
.mos__z {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 999px; color: var(--fg);
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px -8px oklch(20% 0.02 240 / .3);
  transition: background var(--t-1), transform var(--t-1) var(--e-out);
}
.mos__z svg { width: 16px; height: 16px; }
.mos__b:hover .mos__z { background: var(--surface); transform: translateY(-1px); }

/* dưới 560px xếp 1 cột: ô nửa còn ~150px thì nhãn không còn chỗ */
@media (max-width: 559px) {
  .mos { grid-template-columns: minmax(0, 1fr); }
  .mos__lb { font-size: 12.5px; right: 48px; }
}
.gal__badge {
  position: absolute; right: 14px; top: 14px;
  display: grid; justify-items: center; gap: 1px;
  padding: 11px 15px; background: var(--surface); border-radius: var(--r);
  box-shadow: 0 3px 10px -4px oklch(20% 0.02 240 / .3);
  font-size: 11.5px; color: var(--muted); text-align: center;
}
.gal__badge b { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--fg); line-height: 1; }
/* min-width:0 on the tracks: grid items default to min-width:auto, and four
   decoded thumbnails would otherwise force the column past a 360px viewport */

@media (min-width: 560px) {  }






/* ===== buy panel ========================================================= */
.buy { display: grid; align-content: start; gap: 0; }
.buy__rate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 14.5px; color: var(--muted); }
.buy__rate b { font-family: var(--font-display); font-weight: 700; color: var(--fg); }
.buy__rlink { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); }
.buy__rlink:hover { color: var(--fg); text-decoration-color: var(--muted); }
.buy h1 { margin-top: 10px; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.03em; line-height: 1.06; }
.buy__sub { margin-top: 10px; font-size: 15.5px; color: var(--muted); }

/* wrap: at 360px the price, the struck price and the discount pill together
   overran the panel */
.buy__price { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-top: 20px; }
.buy__now { font-family: var(--font-display); font-size: clamp(30px, 3vw, 38px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.buy__was { font-size: 16px; color: var(--muted); text-decoration: line-through; }
.buy__off {
  padding: 3px 9px; border-radius: 99px; background: var(--sale); color: oklch(100% 0 0);
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
}
/* The svg needs an explicit box. An inline <svg> with a viewBox but no width or
   height is a replaced element with no intrinsic size, so as a flex child it
   stretched to ~400px — the card icon swallowed the whole panel. Every icon
   added to a flex row from here needs flex:0 0 auto plus real dimensions. */
.buy__fin {
  display: block; margin-top: 11px;
  font-size: 13.5px; line-height: 1.75; color: var(--muted);
}
.buy__finq {
  margin-left: 8px; white-space: nowrap; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border);
}
.buy__finq:hover { color: var(--fg); text-decoration-color: var(--muted); }
.buy__chip {
  display: inline-block; vertical-align: middle; margin-right: 8px;
  padding: 3px 9px; border-radius: 99px;
  background: color-mix(in oklab, var(--accent) 14%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--accent) 34%, transparent);
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: .01em; color: var(--accent-dark);
}
.buy__fin svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--accent-dark); }
.buy__fin b { color: var(--fg); }
.buy__fin b.num { font-family: var(--font-display); font-size: 15px; font-weight: 700; }

.buy__field { margin: 24px 0 0; padding: 0; border: 0; }
.buy__lbl {
  padding: 0; margin-bottom: 10px;
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.sizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 460px) { .sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.size {
  display: grid; gap: 1px; min-width: 0; padding: 11px 12px; text-align: left;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 11px;
  transition: border-color .16s, background .16s;
}
.size b { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; }
.size span { font-size: 12.5px; color: var(--muted); }
.size:hover { border-color: var(--muted); }
.size[aria-pressed="true"] { border-color: var(--fg); background: var(--sand); }

.buy__box {
  margin-top: 22px; padding: clamp(14px, 1.6vw, 18px);
  background: var(--sand); border-radius: var(--r-l);
}
.buy__tot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin-bottom: 13px;
}
.buy__totl { font-size: 14px; color: var(--muted); }
.buy__totv { font-family: var(--font-display); font-size: clamp(20px, 2vw, 24px); font-weight: 800; letter-spacing: -0.02em; }
/* ô số lượng đẩy sang phải, cùng hàng với tổng — tiết kiệm một hàng dọc */
.buy__tot .qty { margin-left: auto; }
.btn--full { width: 100%; }
/* Hai CTA xếp DỌC: panel 479px, hai nhãn tiếng Việt cạnh nhau vừa chật vừa làm
   mất thứ bậc chính/phụ. Mua ngay nền đặc ở trên, Thêm vào giỏ viền ở dưới. */
.buy__cta { display: grid; gap: 9px; }
/* Nút phụ nằm TRÊN khối nền sand: viền --border chỉ đạt 1.2:1 so với sand, tức
   control gần như không có đường bao (WCAG 1.4.11 cần 3:1). Quét ra 60% --fg =
   4.21:1. KHÔNG dùng --accent-dark (5.81) vì nó làm nút phụ trông như nút chính
   thứ hai, mất thứ bậc. Chỉ áp trong .buy__box — .btn--line ở chỗ khác nằm trên
   nền trang và đã đạt. */
.buy__box .btn--line { border-color: color-mix(in oklab, var(--fg) 60%, transparent); }
.buy__box .btn--line:hover { border-color: var(--fg); }
.qty {
  display: flex; align-items: center; flex: 0 0 auto;
  border: 1.5px solid var(--border); border-radius: 99px; background: var(--surface);
}
.qty button {
  width: 46px; height: 50px; font-size: 19px; line-height: 1;
  border-radius: 99px; transition: background .16s;
}
.qty button:hover { background: var(--sand); }
.qty span { min-width: 26px; text-align: center; font-family: var(--font-display); font-weight: 700; }

.note--tight { margin-top: 18px; }

/* Lợi ích sản phẩm — đặt GIỮA giá và size (pattern từ PDP Purple).
   Icon màu accent để phân biệt với .buy__perks bên dưới (icon --fg): đây là
   "nệm làm được gì", còn dưới kia là "chúng tôi cam kết gì". */
.buy__pts {
  display: grid; gap: 11px; margin-top: 17px; padding-top: 17px;
  border-top: 1px solid var(--border);
}
.buy__pts li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px;
  align-items: start; font-size: 14.5px; line-height: 1.55; color: var(--muted);
}
.buy__pts svg { width: 21px; height: 21px; color: var(--accent-dark); }
.buy__pts b { color: var(--fg); font-weight: 600; }

.buy__perks { display: grid; gap: 12px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
.buy__perks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14.5px; color: var(--muted); }
.buy__perks svg { width: 22px; height: 22px; color: var(--fg); }
.buy__perks b { color: var(--fg); font-weight: 600; }

/* ===== in-page anchor nav — the pattern casper runs under its header ===== */
.anchors {
  position: sticky; top: var(--nav); z-index: 80;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-block: 1px solid var(--border);
}
.anchors .wrap { display: flex; gap: clamp(14px, 2.2vw, 30px); overflow-x: auto; scrollbar-width: none; }
.anchors .wrap::-webkit-scrollbar { display: none; }
.anchors a {
  padding: 14px 0; white-space: nowrap;
  font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; transition: color .16s, border-color .16s;
}
.anchors a:hover { color: var(--fg); border-bottom-color: var(--border); }

/* ===== construction cards ================================================ */
.cons { display: grid; gap: 18px; }
@media (min-width: 800px) { .cons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.cons__c { padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); }
.cons__n {
  display: inline-block; padding: 4px 10px; border-radius: 99px;
  background: var(--sand); color: var(--muted);
  font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.cons__c h3 { margin-top: 14px; font-size: clamp(18px, 1.8vw, 21px); }
.cons__c p { margin-top: 9px; font-size: 15px; color: var(--muted); }

/* --- đầu mục "Dành cho ai": chữ trái, ảnh phải ---------------------------
   Không dùng .sec__head: rule `.sec__head:has(.lead)` đã biến nó thành lưới
   2 cột h2|lead, thêm ảnh vào là 3 con tranh nhau 2 cột. Đây là lưới riêng.
   420px là trần có chủ ý: ảnh cắt ra chỉ rộng 601px, kéo to hơn thì trên màn
   retina bắt đầu nhìn thấy mềm. Xem NOTES §62. */
.who__head { margin-bottom: clamp(32px, 5vw, 60px); display: grid; gap: clamp(26px, 3.5vw, 52px); align-items: center; }
@media (min-width: 920px) { .who__head { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); } }
.who__head .eyebrow { margin-bottom: 16px; }
.who__head h2 { max-width: 22ch; }
.who__head .lead { margin-top: 20px; max-width: 54ch; }
.who__fig { margin: 0; }
.who__fig img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-l); background: oklch(100% 0 0);
}

/* --- thẻ tách vấn đề / giải pháp -----------------------------------------
   .cons--split dùng lại lưới 3 cột của .cons nhưng đổi ruột thẻ. Là <ol> nên
   phải tự xoá marker: list-style ở đây, không dựa vào reset chung.
   Mọi override đều gắn tiền tố .cons--split để mục "Cấu tạo" không bị đụng. */
.cons--split { margin: 0; padding: 0; gap: 24px; list-style: none; }
.cons--split .cons__c { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
/* [số] [hình] [tiêu đề] một hàng, đoạn chữ span hết bề ngang bên dưới.
   Không nhét chữ vào cột 3 cùng hình: ở 390px cột đó chỉ còn ~156px, tiếng Việt
   xuống dòng 2-3 chữ một. Cho chữ span 1/-1 thì độ dài dòng bằng cả thẻ. */
.cons__pb {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr);
  column-gap: 14px; row-gap: 15px;
  padding: 24px 26px 25px;
  /* align-content: start là BẮT BUỘC, không phải trang trí. subgrid kéo mọi
     .cons__pb lên cùng 248px; align-content mặc định (stretch) đem chỗ trống dư
     chia cho các hàng auto, nên thẻ có đoạn chữ ngắn nhất bị phình hàng 1 từ
     92px lên 104px -> số và tiêu đề tụt 6px so với hai thẻ kia (đo được
     712/712/718, xem RECON/diag-h3.mjs). start dồn chỗ trống xuống đáy. */
  align-content: start;
}
.cons__pb > p { grid-column: 1 / -1; }
/* Ô vuông + object-fit:contain: ba ảnh cắt ra có tỉ lệ khác nhau (134×180,
   132×148, 118×166). Ép cùng chiều rộng thì cao lệch 26px -> tiêu đề ba thẻ
   không cùng đường. Ô vuông cho cùng chiều cao mà không méo ảnh nào. */
.cons__fig { margin: 0; width: 104px; aspect-ratio: 1; }
.cons__fig img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* căn giữa theo ô hình 104px — hàng 1 đã bị ghim bởi align-content: start */
.cons__no, .cons__pb > h3 { align-self: center; }
/* 40px để số thứ tự đủ lực thị giác mà vẫn gọn hơn hình minh hoạ. */
.cons__no {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--deep); color: oklch(100% 0 0);
  font-size: 13.5px; font-weight: 700; letter-spacing: .01em; line-height: 1;
}
.cons--split .cons__c h3 { margin-top: 0; min-width: 0; font-size: clamp(19px, 1.75vw, 22px); }
.cons--split .cons__pb p { margin-top: 0; }   /* row-gap của lưới lo khoảng cách */
.cons__fx {
  margin-top: auto; padding: 20px 26px 24px;
  background: var(--sand); border-top: 1px solid var(--border);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px;
  /* CHỈ ĐỊNH hàng nào hút chỗ dư, thay vì để align-content tự chia. subgrid ghim
     .cons__fx theo thẻ CAO NHẤT, nên luôn có chỗ dư; mặc định (stretch) nó chia
     cho mọi hàng auto -> nhãn "GIẢI PHÁP TỪ LURI" lệch tới 13px giữa ba thẻ (thấy
     trong RECON/choai-1440.png; harness cũ chỉ đo mép nền sand nên không bắt).
     `auto 1fr` cho hàng 2 nuốt hết chỗ dư: hàng nhãn cố định, còn miếng foam
     align-self:end thì tụt đúng đáy thẻ ở CẢ BA thẻ thay vì bậc thang theo độ dài
     đoạn chữ. Đoạn chữ align-self:start để không bị kéo giãn theo. */
  grid-template-rows: auto 1fr;
}
.cons__fxh {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent-dark);
}
.cons__fxh svg { flex: none; width: 20px; height: 20px; }
.cons--split .cons__fx > p { margin-top: 10px; color: var(--fg); align-self: start; }
.cons--split .cons__fx b { font-weight: 700; }
/* Miếng foam nền trắng đặt trên nền sand sẽ hiện thành một ô sáng hơn. multiply
   cho trắng biến thành đúng màu nền, chỉ còn khối foam và bóng của nó. */
.cons__sw { grid-column: 2; margin: 0; width: 88px; align-self: end; }
.cons__sw img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }

/* Căn đường kẻ "Giải pháp" thẳng hàng qua cả 3 thẻ BẰNG CẤU TRÚC.
   margin-top:auto (fallback ở trên) chỉ căn ĐÁY thẻ — đo được lệch 25px vì khối
   giải pháp của thẻ 3 dài hơn một dòng, và không lượng chữ nào sửa được điều đó
   một cách bền. subgrid cho hai hàng của lưới cha nhận chiều cao = max của ba
   thẻ, nên kẻ khớp bất kể sau này ai viết dài ngắn thế nào.
   row-gap: 0 vì hai hàng nằm TRONG thẻ — khe của cha sẽ thành khe giữa vấn đề
   và giải pháp. Ba thẻ đều span cả 2 hàng nên không mất khe nào giữa các thẻ.
   margin-top phải trả về 0: trong subgrid nó chặn stretch, nền sand sẽ tụt đáy. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1180px) {
    .cons--split { row-gap: 0; }
    .cons--split .cons__c { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
    .cons--split .cons__fx { margin-top: 0; }
  }
}

/* Ba thẻ có phần đầu giàu thông tin; giữ một cột ở tablet để icon và tiêu đề
   không bị ép nhỏ chỉ để cố duy trì lưới desktop. */
@media (min-width: 800px) and (max-width: 1179px) {
  .cons--split { grid-template-columns: minmax(0, 1fr); }
}

/* --- chuỗi nhân quả ------------------------------------------------------
   Mũi tên là ::before của li nên nằm TRƯỚC icon, và biến mất cùng li đầu —
   không cần :last-child, không có mũi tên mồ côi ở cuối. */
.chain {
  display: flex; flex-wrap: wrap; gap: 18px 0;
  margin: 0 0 clamp(30px, 4vw, 44px); padding: 20px 0 0;
  list-style: none; border-top: 1px solid var(--border);
}
.chain__i { display: flex; align-items: center; gap: 13px; flex: 1 1 200px; min-width: 0; }
.chain__i > svg { flex: none; width: 32px; height: 32px; color: var(--accent-dark); }
.chain__t { margin: 0; font-size: 14.5px; line-height: 1.38; color: var(--muted); }
.chain__t b { display: block; font-weight: 650; color: var(--fg); }
.chain__i::before {
  content: ""; flex: none; width: 7px; height: 7px; margin: 0 17px 0 5px;
  border-top: 1.5px solid color-mix(in oklab, var(--fg) 32%, transparent);
  border-right: 1.5px solid color-mix(in oklab, var(--fg) 32%, transparent);
  transform: rotate(45deg);
}
.chain__i:first-child::before { display: none; }
/* Hẹp: xếp dọc và quay mũi tên xuống. Nếu để wrap 2×2 thì hàng hai mở đầu
   bằng một mũi tên chỉ sang phải — vô nghĩa ở đầu dòng. */
@media (max-width: 819px) {
  .chain { flex-direction: column; gap: 15px; align-items: flex-start; }
  .chain__i { flex: none; max-width: 100%; }
  .chain__i::before { margin: 0 15px 0 9px; transform: rotate(135deg); }
  /* Xếp dọc thì mắt đầu phải GIỮ CHỖ mũi tên, không display:none. Bỏ hẳn thì
     icon của nó lệch trái 38px so với ba mắt còn lại -> lề trái so le. */
  .chain__i:first-child::before { display: block; visibility: hidden; }
}

@media (max-width: 559px) {
  .cons__pb { grid-template-columns: auto 96px minmax(0, 1fr); column-gap: 11px; padding: 21px 20px 22px; }
  .cons__fig { width: 96px; }
  .cons__no { width: 38px; height: 38px; }
  .cons__fx { padding: 19px 20px 22px; }
}

/* ===== spec table ======================================================== */
.spec { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-l); background: var(--surface); }
.spec table { width: 100%; min-width: 460px; border-collapse: collapse; }
.spec th, .spec td { padding: 15px 20px; text-align: left; vertical-align: top; font-size: 15px; }
.spec tr + tr th, .spec tr + tr td { border-top: 1px solid var(--border); }
.spec th {
  width: 34%; font-family: var(--font-display); font-weight: 700; font-size: 14.5px;
  color: var(--fg); background: var(--sand);
}
.spec td { color: var(--muted); }
/* `.spec td` is (0,1,1) and beat a bare `.spec__todo` (0,1,0), so the pending
   marker silently never applied — the audit caught it because the cell measured
   exactly --muted's 5.99. And --star itself was the wrong choice here: at
   oklch(78%) it is 2.03:1 on white, a graphic tone being asked to carry text.
   oklch(52% 0.12 70) is the same amber family at 5.64:1. */
.spec td.spec__todo { color: oklch(52% 0.12 70); font-weight: 600; }

/* ===== motion: same easing and reveal contract as the rest of the page === */
.js .cons__c { opacity: 0; transform: translateY(20px); transition: opacity var(--t-2) var(--e-out), transform var(--t-2) var(--e-out); }
.js .cons__c[data-seen="true"] { opacity: 1; transform: none; }
.js .cons__c { transition-delay: calc(var(--i, 0) * 90ms); }



@media (prefers-reduced-motion: reduce) {
  .js .cons__c { opacity: 1; transform: none; transition: none; }
}

/* ===========================================================================
   Route-level blocks: collection grid, cart, stores, prose, nav cart icon.
   Same rule as above — layout numbers only, every colour from product.css.
   =========================================================================== */

.sec--tight { padding-block: clamp(30px, 4vw, 52px) clamp(48px, 6vw, 80px); }

/* nav cart */
.nav__cart { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 99px; transition: background .16s; }
.nav__cart:hover { background: var(--sand); }
.nav__cart svg { width: 22px; height: 22px; }
.nav__cart .nav__cartN { position: absolute; top: 1px; right: 0; }

/* product grid + card */
.pgrid { display: grid; gap: 22px; }
@media (min-width: 620px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } }
.pcard { display: grid; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); overflow: hidden; }
.pcard__media { position: relative; display: block; background: var(--sand); }
.pcard__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--t-2) var(--e-out); }
.pcard:hover .pcard__media img { transform: scale(1.03); }
.pcard__flag {
  position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 99px;
  background: var(--sale); color: oklch(100% 0 0);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
}
.pcard__b { display: grid; gap: 8px; padding: 20px; align-content: start; }
.pcard__rate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.pcard__rate b { font-family: var(--font-display); color: var(--fg); }
.pcard__b h3 { font-size: clamp(19px, 1.9vw, 22px); }
.pcard__b h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pcard__sub { font-size: 14.5px; color: var(--muted); }
.pcard__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 2px; }
.pcard__price span { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -0.03em; }
.pcard__price s { font-size: 14px; color: var(--muted); }
.pcard__b .btn { margin-top: 8px; justify-self: start; }

/* collection toolbar */
.ctools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.ctools__n { font-size: 15px; color: var(--muted); }
.ctools__n b { font-family: var(--font-display); color: var(--fg); }
.ctools__sort select {
  font: inherit; font-size: 14.5px; padding: 9px 14px; color: var(--muted);
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 99px;
}
.ctools__sort select:disabled { opacity: 1; cursor: not-allowed; }
.ctools__note { margin: 10px 0 26px; font-size: 13.5px; color: var(--muted); }

/* long-form copy */
.prose { max-width: 66ch; display: grid; gap: 16px; }
.prose h2 { margin-bottom: 4px; font-size: clamp(24px, 2.6vw, 34px); }
.prose p { font-size: 16.5px; line-height: 1.75; color: var(--muted); }
.prose .link { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* stores */
.stores { display: grid; gap: 18px; }
@media (min-width: 760px) { .stores { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.store { padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); }
.store h3 { font-size: 20px; }
.store__a { margin-top: 10px; font-size: 15px; color: var(--muted); }
.store__h { margin-top: 8px; font-size: 14px; color: var(--muted); }
.store .link { display: inline-block; margin-top: 10px; font-weight: 600; }
.js .store { opacity: 0; transform: translateY(18px); transition: opacity var(--t-2) var(--e-out), transform var(--t-2) var(--e-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js .store[data-seen="true"] { opacity: 1; transform: none; }

/* cart */
.cart { display: grid; gap: 26px; }
@media (min-width: 900px) { .cart { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 36px; } }
.citem { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); }
.citem__img { display: block; border-radius: 12px; overflow: hidden; background: var(--sand); }
.citem__img img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.citem__b { display: grid; gap: 8px; align-content: start; min-width: 0; }
.citem__b h3 { font-size: 19px; }
.citem__v { font-size: 14px; color: var(--muted); }
.citem__b .qty { justify-self: start; margin-top: 4px; }
.citem__p { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
@media (max-width: 559px) {
  .citem { grid-template-columns: 76px minmax(0, 1fr); }
  .citem__p { grid-column: 2; }
}
.csum { padding: 24px; background: var(--sand); border-radius: var(--r-l); }
.csum h3 { font-size: 19px; }
.csum dl { display: grid; gap: 10px; margin: 16px 0 0; }
.csum dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 15px; color: var(--muted); }
.csum dd { margin: 0; }
.csum__t { padding-top: 12px; border-top: 1px solid var(--border); font-size: 17px !important; color: var(--fg) !important; }
.csum__t dt, .csum__t dd { font-family: var(--font-display); font-weight: 700; }
.csum .btn { width: 100%; margin-top: 18px; }
.csum__n { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: center; }

/* A route's page title is an h1, not an h2 — four of the six routes shipped with
   zero h1 before this. Same visual weight as the h2 it replaces. */
.sec__head h1 { font-size: clamp(30px, 4.6vw, 54px); letter-spacing: -0.03em; max-width: 34ch; }
@media (min-width: 920px) { .sec__head:has(.lead) h1 { max-width: 20ch; } }

/* One product in a three-column grid reads as a gap, not a catalogue. While the
   catalogue has a single item the grid collapses to one sensible card width;
   add a second product and the normal 2/3-column rules take over again. */
@media (min-width: 620px) {
  .pgrid:has(> .pcard:only-child) { grid-template-columns: minmax(0, 420px); }
}

/* The legal entity in the footer is still Ru9's — real data we cannot invent for
   Luri. Marked rather than silently left looking correct. */
.foot__todo {
  display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 99px;
  background: oklch(100% 0 0 / .12); color: var(--on-deep);
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px;
}

.csum__back { margin-top: 14px; text-align: center; font-size: 14.5px; }
.csum__back .link { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* ===== announcement bar — every reference mattress site runs one ========= */
.promo { background: var(--deep); color: var(--on-deep); text-align: center; }
.promo p { padding: 9px var(--pad); font-size: 13.5px; color: var(--on-deep-mid); }
.promo b { color: var(--on-deep); font-weight: 600; }
/* the nav sticks under the promo bar, not under the viewport top */
.nav { top: 0; }

/* ===== size guide dialog ================================================= */
.sg__open {
  margin-left: 10px; padding: 0; font: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: .02em; text-transform: none; color: var(--accent-dark);
  text-decoration: underline; text-underline-offset: 3px;
}
.sg__open:hover { color: var(--fg); }
.sg {
  width: min(640px, calc(100vw - 32px)); padding: 0; border: 0;
  background: var(--surface); border-radius: var(--r-l);
  box-shadow: 0 24px 60px -20px oklch(20% 0.02 240 / .45);
}
.sg::backdrop { background: oklch(20% 0.02 240 / .5); backdrop-filter: blur(3px); }
.sg__b { padding: 26px; }
.sg__h { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.sg__h h2 { font-size: clamp(21px, 2.4vw, 27px); }
.sg .spec { border-radius: var(--r); }
.sg .spec thead th { background: var(--sand); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sg .spec tbody th { width: 26%; }
.sg__n { margin-top: 16px; font-size: 14px; color: var(--muted); }

/* ===== gallery: zoom affordance + counter ================================
   Both live on the main image. The zoom button is a real visible control, not
   a hover-only cursor change: on touch there is no hover, so a cursor-only
   affordance is invisible to roughly half the traffic. */







/* ===== lightbox ========================================================== */
.lb { max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; }
.lb::backdrop { background: oklch(14% 0.012 88 / .96); }
.lb__b { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 56px 16px 72px; }
.lb__b img { max-width: min(1100px, 100%); max-height: 100%; width: auto; border-radius: var(--r); background: var(--sand); }
.lb__x, .lb__nav {
  position: absolute; display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: 99px;
  background: oklch(100% 0 0 / .12); color: oklch(100% 0 0);
  cursor: pointer; transition: background .16s;
}
.lb__x:hover, .lb__nav:hover { background: oklch(100% 0 0 / .26); }
.lb__x { top: 12px; right: 12px; }
.lb__nav--prev { left: 12px; top: 50%; translate: 0 -50%; }
.lb__nav--next { right: 12px; top: 50%; translate: 0 -50%; }
.lb__cap {
  position: absolute; left: 0; right: 0; bottom: 22px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px;
  padding-inline: 60px;
  font-size: 14px; color: oklch(100% 0 0 / .82); text-align: center;
}
.lb__cap b { color: oklch(100% 0 0); }
/* 44px hit targets would collide with a phone-width image, so on small screens
   the arrows move to the bottom bar instead of overlaying the picture */
@media (max-width: 560px) {
  .lb__b { padding: 52px 10px 84px; }
  .lb__nav { top: auto; bottom: 14px; translate: none; }
  .lb__nav--prev { left: 22%; }
  .lb__nav--next { right: 22%; }
  .lb__cap { bottom: 68px; padding-inline: 16px; }
}

/* ===== firmness scale ====================================================
   Simba's version is one horizontal track with the two ends named and the
   product's position marked. Ours marks two ZONES rather than two points,
   because the ordering is known from the product copy and the exact value is
   not — a dashed zone states that difference instead of hiding it. */
.firm { display: grid; gap: 26px; }
.firm__scale { padding: 2px; }
.firm__track {
  position: relative; height: 104px;
  border-radius: var(--r);
  /* soft → firm as an actual gradient. Without it the box reads as a container
     and the two zones read as two disabled buttons; with it the axis is legible
     before you read a single label. Kept very pale so the tick numbers below
     still clear 4.5:1 anywhere along the run. */
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--accent) 7%, var(--surface)) 0%,
    var(--sand) 48%,
    color-mix(in oklab, var(--deep) 12%, var(--sand)) 100%);
  box-shadow: inset 0 0 0 1px var(--border);
}
.firm__ticks {
  position: absolute; inset: auto 0 0 0; display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  height: 34px; margin: 0; padding: 0; list-style: none;
}
.firm__ticks li {
  position: relative; display: grid; place-items: end center;
  padding-bottom: 7px; font-size: 12px; color: var(--muted);
}
.firm__ticks li::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 1px; height: 9px; background: var(--border);
}

/* a caret tying the band to the numbered axis underneath */


/* says "placeholder" without needing the footnote */




/* thanh đã đầy tới mức công bố — mirror cách ảnh chính thức của Luri vẽ */
.firm__fill {
  position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: var(--p); height: 10px; border-radius: 999px;
  background: var(--accent-dark);
}
/* nét LIỀN, không nét đứt: đây là số Luri công bố, không phải ước lượng */
.firm__mark {
  position: absolute; top: -6px; left: var(--p); translate: -50% 0; z-index: 2;
  display: flex; align-items: baseline; gap: 1px;
  padding: 7px 13px; border-radius: 999px;
  background: var(--deep); color: var(--on-deep);
  box-shadow: 0 6px 18px -8px oklch(20% 0.02 240 / .5);
}
.firm__mark b { font-family: var(--font-display); font-size: 21px; font-weight: 800; line-height: 1; }
.firm__mark span { font-size: 12.5px; opacity: .82; }
/* mũi nhọn nối vạch với trục số bên dưới */
.firm__mark::after {
  content: ""; position: absolute; top: 100%; left: 50%; translate: -50% -4px;
  width: 9px; height: 9px; rotate: 45deg; background: var(--deep); border-radius: 2px;
}
/* dưới 560px vạch ở 80% sẽ chạm cạnh phải -> neo vào cạnh, bỏ mũi nhọn */
@media (max-width: 559px) {
  .firm__mark { left: auto; right: 0; translate: 0 0; padding: 6px 11px; }
  .firm__mark::after { display: none; }
  .firm__mark b { font-size: 18px; }
}
.firm__ends {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 11px; font-size: 13px; color: var(--muted);
}
.firm__cards { display: grid; gap: 14px; }
.firm__c {
  padding: 22px 22px 24px; border-radius: var(--r);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border);
}
.firm__lbl {
  display: inline-block; margin-bottom: 11px;
  padding: 4px 11px; border-radius: 99px;
  background: color-mix(in oklab, var(--accent) 13%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent);
  font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--accent-dark);
}
.firm__c h3 { font-size: 19px; letter-spacing: -0.015em; }
.firm__c p { margin-top: 8px; font-size: 14.5px; color: var(--muted); text-wrap: pretty; }
@media (min-width: 720px) { .firm__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Below 620 the two zone labels collide, so the track drops the pins inside and
   names the zones underneath instead of on top of them. */
@media (max-width: 619px) {
  .firm__track { height: 130px; }


  .firm__ticks li { font-size: 11px; }
}

/* ===== dual-sided mattress ============================================== */
.dual { background: var(--sand); }
.dual__head { display: grid; gap: 18px; max-width: 490px; margin-bottom: clamp(30px, 4vw, 48px); }
.dual__head .eyebrow { margin-bottom: 16px; }
.dual__head h2 { max-width: 12ch; font-size: clamp(38px, 5vw, 66px); line-height: .98; letter-spacing: -.045em; }
.dual__head h2 span { display: block; color: var(--accent-dark); }
.dual__head > p { max-width: 43ch; font-size: clamp(16px, 1.8vw, 19px); color: var(--muted); }
.dual__showcase { display: grid; gap: 18px; align-items: center; }
.dual__face { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; }
.dual__icon {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  color: var(--accent-dark); background: var(--surface);
  box-shadow: 0 10px 30px -18px oklch(20% 0.02 240 / .45), inset 0 0 0 1px var(--border);
}
.dual__icon svg { width: 32px; height: 32px; }
.dual__face h3 { font-size: 22px; color: var(--accent-dark); }
.dual__face p { margin-top: 7px; color: var(--muted); }
.dual__tag { display: inline-block; margin-top: 14px; padding: 6px 11px; border-radius: 99px; background: var(--surface); font-size: 12.5px; color: var(--fg); }
.dual__product { margin: 0; min-width: 0; }
.dual__product img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.dual__layers {
  margin-top: clamp(34px, 5vw, 64px); padding: clamp(20px, 3vw, 34px) clamp(14px, 2.2vw, 26px) 0;
  overflow: hidden; border: 1px solid var(--border); border-radius: 24px; background: var(--surface);
  box-shadow: 0 22px 60px -48px oklch(20% 0.02 240 / .55);
}
.dual__layers > h3 { margin: 0 0 20px; text-align: center; font-size: clamp(24px, 2.8vw, 36px); letter-spacing: -.035em; }
.dual__layers > h3 span { color: var(--accent-dark); }
.dual__layer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dual__layer { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; border-right: 1px solid var(--border); }
.dual__layer:last-child { border-right: 0; }
.dual__layer header { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 0 16px 14px; }
.dual__number { padding: 5px 10px; border-radius: 99px; color: var(--surface); background: var(--accent-dark); font: 700 13px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.dual__layer h4 { color: var(--accent-dark); font-size: clamp(18px, 1.7vw, 23px); text-align: center; }
.dual__layer-body { display: grid; grid-template-columns: minmax(100px, .9fr) minmax(0, 1.1fr); gap: 12px; align-items: center; padding: 0 16px 18px; }
.dual__layer-body img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.dual__layer-body ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; color: var(--fg); font-size: clamp(13px, 1.2vw, 15px); }
.dual__layer-body li { position: relative; padding-left: 25px; }
.dual__layer-body li::before {
  content: "✓"; position: absolute; top: .05em; left: 0; display: grid; place-items: center;
  width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%; color: var(--accent-dark); font-size: 11px;
}
.dual__benefit { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; min-height: 84px; margin: 0; padding: 14px 16px; background: var(--sand); color: var(--fg); font-size: clamp(13px, 1.15vw, 15px); }
.dual__benefit > span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 50%; color: var(--accent-dark); background: var(--surface); font-weight: 700; }

@media (min-width: 860px) {
  .dual__showcase { grid-template-columns: minmax(0, .72fr) minmax(430px, 1.75fr) minmax(0, .72fr); gap: 8px; }
  .dual__face { position: relative; z-index: 1; }
  .dual__face:last-child { grid-template-columns: minmax(0, 1fr) 56px; }
  .dual__face:last-child .dual__icon { grid-column: 2; grid-row: 1; }
  .dual__face:last-child > div { grid-column: 1; grid-row: 1; }
  .dual__face::after { content: ""; position: absolute; top: 30px; width: 64px; border-top: 1px solid var(--accent-dark); opacity: .75; }
  .dual__face:first-child::after { right: -22px; }
  .dual__face:last-child::after { left: -22px; }
}

@media (max-width: 859px) {
  .dual__showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dual__product { grid-column: 1 / -1; grid-row: 1; }
  .dual__face:last-child { grid-template-columns: 56px minmax(0, 1fr); }
  .dual__face:last-child .dual__icon, .dual__face:last-child > div { grid-column: auto; grid-row: auto; }
  .dual__layer-grid { grid-template-columns: 1fr; }
  .dual__layer { grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); grid-template-rows: auto 1fr; border-right: 0; border-bottom: 1px solid var(--border); }
  .dual__layer:last-child { border-bottom: 0; }
  .dual__layer header { grid-column: 1; }
  .dual__layer-body { grid-column: 1; }
  .dual__benefit { grid-column: 2; grid-row: 1 / 3; }
}

@media (max-width: 559px) {
  .dual__showcase { grid-template-columns: 1fr; }
  .dual__product, .dual__face { grid-column: 1; }
  .dual__face { padding-block: 4px; }
  .dual__layers { padding-inline: 10px; border-radius: 18px; }
  .dual__layer { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .dual__layer header, .dual__layer-body, .dual__benefit { grid-column: 1; grid-row: auto; }
  .dual__layer-body { grid-template-columns: 112px minmax(0, 1fr); padding-inline: 10px; }
  .dual__layer header, .dual__benefit { padding-inline: 10px; }
}

/* ===== rating summary ====================================================
   Casper leads its review block with the aggregate plus a per-star histogram.
   4.9 and 18 are real. The histogram is not, so the bars render as the same
   pending skeleton the review cards already use — one visual language for
   "data goes here" across the whole page. */
.ragg {
  display: grid; gap: 20px; margin-top: 22px;
  padding: 22px; border-radius: var(--r);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border);
}
.ragg__score { display: grid; justify-items: start; gap: 8px; }
.ragg__n { font-family: var(--font-display); font-size: 46px; font-weight: 700; line-height: .9; letter-spacing: -0.03em; }
.ragg__c { font-size: 14px; color: var(--muted); }
.ragg__dist { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ragg__dist li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; }
.ragg__s { display: flex; align-items: center; gap: 2px; font-size: 12.5px; color: var(--muted); }
.ragg__s svg { width: 11px; height: 11px; fill: var(--border); }
.ragg__bar {
  height: 9px; border-radius: 99px;
  background: repeating-linear-gradient(-45deg, var(--sand) 0 5px, var(--surface) 5px 10px);
  box-shadow: inset 0 0 0 1px var(--border);
}
.ragg__todo { font-size: 13px; color: var(--muted); }
@media (min-width: 620px) {
  .ragg { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 34px; padding: 26px 28px; }
  .ragg__score { padding-right: 30px; border-right: 1px solid var(--border); }
  .ragg__todo { grid-column: 1 / -1; }
}

/* Light-surface twin of .foot__todo. That class is built for the dark footer
   (white at 12% alpha behind --on-deep text); dropped onto white it measured as
   an all-but-invisible pale wash. Same shape, amber ink — the marker has to be
   legible or it stops being a marker. */
.todo {
  display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 99px;
  background: color-mix(in oklab, oklch(52% 0.12 70) 13%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, oklch(52% 0.12 70) 32%, transparent);
  color: oklch(52% 0.12 70);
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px;
}