/* ==========================================================================
   AKNAS — core tokens + global components
   Tokens are LOCKED (spec §3). Do not invent values.
   ========================================================================== */

:root,
.akn {
  /* surface */
  --akn-paper:      #F4F2EE;
  --akn-paper-2:    #EBE8E1;

  /* ink */
  --akn-ink:        #16130F;
  --akn-ink-2:      #221E18;
  --akn-soft:       #5C564D;
  --akn-grey:       #8E877B;

  /* the money colour — prices and purchase actions only */
  --akn-oxblood:    #7A1F2B;
  --akn-oxblood-hi: #93242F;

  /* text on dark / oxblood */
  --akn-onink:      #F5EFE6;
  /* hero ghost wordmark */
  --akn-ghost:      #E7E4DC;

  /* hairlines */
  --akn-line:       rgba(22,19,15,.15);
  --akn-line-lt:    rgba(244,242,238,.17);

  /* rhythm */
  --akn-pad:        clamp(16px,4.4vw,72px);
  --akn-gpad:       clamp(18px,2.2vw,32px);

  /* sticky header offset (admin bar / theme header) */
  --akn-sticky-top: 0px;
}

html, body { overflow-x: clip; max-width: 100%; }
html { -webkit-text-size-adjust: 100%; }

.akn, .akn * { min-width: 0; box-sizing: border-box; }

.akn {
  background: var(--akn-paper);
  color: var(--akn-ink);
  font-family: Jost, system-ui, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.akn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.akn a { color: inherit; text-decoration: none; }
.akn button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.akn :focus-visible { outline: 2px solid var(--akn-oxblood); outline-offset: 2px; }

/* Resets are wrapped in :where() so they carry ZERO specificity. A plain
   .akn .akn-serif{margin:0} outranks .akn-rev p and .akn-feat-body h2, which is
   what flattened the review quotes and every headline's spacing in 0.3.0. */
.akn :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote) { margin: 0; }
.akn :where(ul, ol) { list-style: none; margin: 0; padding: 0; }

.akn-serif {
  font-family: 'Bodoni Moda', Didot, Georgia, serif;
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.015em;
}
.akn-lbl {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.akn-ico { display: block; flex: 0 0 auto; }

/* ── buttons ──────────────────────────────────────────────────────────── */
.akn .akn-btn {
  display: inline-block;
  text-align: center;
  font-family: Jost, system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 15px 28px;
  border: 1px solid var(--akn-ink);
  transition: background .18s, color .18s, border-color .18s;
}
.akn .akn-btn-p {
  background: var(--akn-oxblood);
  border-color: var(--akn-oxblood);
  color: var(--akn-onink);
}
.akn .akn-btn-p:hover,
.akn .akn-btn-p:focus-visible {
  background: var(--akn-oxblood-hi);
  border-color: var(--akn-oxblood-hi);
  color: var(--akn-onink);
}
.akn .akn-btn-s {
  background: transparent;
  color: var(--akn-soft);
  border-color: var(--akn-line);
}
.akn .akn-btn-s:hover,
.akn .akn-btn-s:focus-visible {
  color: var(--akn-paper);
  background: var(--akn-ink);
  border-color: var(--akn-ink);
}

/* ── ticker ───────────────────────────────────────────────────────────── */
.akn-ticker { background: var(--akn-oxblood); overflow: hidden; padding: 9px 0; }
.akn-ticker ul { display: flex; gap: 56px; width: max-content; animation: akn-roll 34s linear infinite; }
.akn-ticker li {
  font-size: 10px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; white-space: nowrap; color: var(--akn-onink);
}
@keyframes akn-roll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .akn-ticker ul { animation: none; padding-left: var(--akn-pad); }
}

/* ── header ───────────────────────────────────────────────────────────── */
/* Sticky is applied by akn-header.js to the outermost single-child ancestor,
   because a sticky element whose parent is exactly its own height never moves. */
.akn-hdr {
  background: var(--akn-paper);
  border-bottom: 1px solid var(--akn-line);
  line-height: 1.2;
}
.akn-sticky-host {
  position: sticky;
  top: var(--akn-sticky-top);
  z-index: 60;
}
.akn-hdr-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--akn-pad);
  min-height: 0;
}
.akn-mark {
  display: inline-block;
  line-height: 1;
  font-family: 'Bodoni Moda', Didot, Georgia, serif;
  font-weight: 400;
  font-size: clamp(17px,2.5vw,25px);
  letter-spacing: .3em;
  text-transform: uppercase;
  padding-left: .3em;
  white-space: nowrap;
  color: var(--akn-ink);
}
.akn-mark img { width: auto; height: clamp(18px,2.4vw,26px); object-fit: contain; }

.akn-nav { display: none; align-items: center; gap: 34px; }
.akn-nav a {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--akn-soft); padding: 4px 0; border-bottom: 1px solid transparent;
}
.akn-nav a:hover, .akn-nav a.akn-on { color: var(--akn-ink); border-color: var(--akn-ink); }

/* bag button — icon only by default, count as a corner chip on the icon.
   In 0.3.0 the icon and the count were two flex children that wrapped onto two
   rows in a tight header. The count now sits ON the bag, which is both shorter
   and the treatment every premium store uses. */
.akn-bagbtn {
  display: inline-flex; align-items: center; gap: 0;
  line-height: 1; white-space: nowrap; flex-wrap: nowrap;
  color: var(--akn-ink); padding: 2px;
  transition: color .16s;
}
.akn-bagbtn:hover { color: var(--akn-oxblood); }

.akn-bagico { position: relative; display: block; line-height: 0; }
.akn-bagbtn b {
  position: absolute; top: -5px; right: -7px;
  font-weight: 500; font-size: 9px; letter-spacing: 0; line-height: 1;
  min-width: 14px; height: 14px; padding: 0 3px;
  background: var(--akn-oxblood); color: var(--akn-onink);
  display: grid; place-items: center;
  border: 1px solid var(--akn-paper);
}
/* An empty bag shows no chip. A permanent "0" is noise, not information. */
.akn-bagbtn b.akn-zero { display: none; }

/* Optional text label, off by default. */
.akn-bagbtn .akn-bagtxt { display: none; }
.akn-bagbtn--label .akn-bagtxt {
  display: inline-block; margin-left: 12px;
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
}
/* No icon: the count returns to a plain inline chip after the word. */
.akn-bagbtn--noicon .akn-bagico { order: 2; }
.akn-bagbtn--noicon b { position: static; margin-left: 9px; border: 0; }
.akn-bagbtn--noicon .akn-bagtxt { margin-left: 0; }

/* Menu toggle — an inline SVG of two hairlines, 17px x 1px, 5px apart, which is
   the approved product.html geometry to the pixel. The old markup was two <i>
   bars in a `display:grid` button; a theme rule setting `button{display:flex}`
   beat that and laid them side by side, so the mark read as ONE long line (and
   the same rule kept it visible above 940px). An SVG cannot be rearranged by a
   stylesheet. The <i> rules below stay for any Elementor template still serving
   the old markup from cache. */
.akn-mnu {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px; color: var(--akn-ink); line-height: 0;
}
.akn-mnu-ico {
  /* The UA stylesheet applies `svg:not(:root){overflow:hidden}`, which would
     clip the X arms: a 17px line rotated 45° needs ~12px of height inside a
     7px box. The presentation attribute alone does not survive that. */
  overflow: visible;
}
.akn-mnu-ico line {
  transform-box: fill-box; transform-origin: center;
  transition: transform .26s cubic-bezier(.33,1,.68,1);
}
.akn-mnu[aria-expanded="true"] .akn-mnu-t { transform: translateY(3px) rotate(45deg); }
.akn-mnu[aria-expanded="true"] .akn-mnu-b { transform: translateY(-3px) rotate(-45deg); }

/* Legacy two-bar markup (cached template). Margin, not gap, so it stacks
   whether the button ends up grid, flex-column or plain block. */
.akn-mnu i {
  width: 17px; height: 1px; background: var(--akn-ink); display: block;
  margin: 0 0 5px;
  transition: transform .26s cubic-bezier(.33,1,.68,1);
}
.akn-mnu i:last-child { margin-bottom: 0; }
.akn-mnu[aria-expanded="true"] i:first-child { transform: translateY(3px) rotate(45deg); }
.akn-mnu[aria-expanded="true"] i:last-child  { transform: translateY(-3px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .akn-mnu i,
  .akn-mnu-ico line { transition: none; }
}
@media (min-width: 940px) {
  .akn-nav { display: flex; }
  .akn-mnu { display: none; }
}

/* Mobile header balance — three even tracks so the wordmark is truly centred
   between the menu toggle (left) and the search+bag cluster (right), instead of
   drifting off-centre under flex space-between. Desktop keeps the flex row. */
@media (max-width: 939px) {
  .akn-hdr-in { display: grid; grid-template-columns: 1fr auto 1fr; }
  .akn-hdr-in .akn-mnu { justify-self: start; }
  .akn-hdr-in .akn-mark { justify-self: center; padding-left: 0; }
  .akn-hdr-in .akn-hdr-actions { justify-self: end; }
  /* Search and bag read as one cluster on a phone, not two stray icons. The
     desktop gap is untouched — there is room for it up there. */
  .akn-hdr-in .akn-hdr-actions { gap: 9px; }
}

/* mobile menu panel */
.akn-menu {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(340px, 100vw);
  background: var(--akn-paper);
  border-right: 1px solid var(--akn-line);
  z-index: 80;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .34s cubic-bezier(.33,1,.68,1), visibility .34s;
  display: flex; flex-direction: column;
}
.akn-menu.akn-open { transform: none; visibility: visible; }
.akn-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 19px 20px; border-bottom: 1px solid var(--akn-line);
}
.akn-menu-body { padding: 6px 20px; overflow-y: auto; flex: 1; }
.akn-menu-body a {
  display: block; padding: 17px 0; border-bottom: 1px solid var(--akn-line);
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--akn-ink);
}
.akn-menu-foot { padding: 18px 20px 24px; border-top: 1px solid var(--akn-line); }
.akn-menu-foot p { font-size: 12.5px; color: var(--akn-grey); line-height: 1.6; }

/* ── cart drawer ──────────────────────────────────────────────────────── */
.akn-scrim {
  position: fixed; inset: 0; background: rgba(22,19,15,.5);
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s; z-index: 70;
}
.akn-scrim.akn-open { opacity: 1; visibility: visible; }

.akn-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(410px, 100vw);
  background: var(--akn-paper);
  border-left: 1px solid var(--akn-line);
  z-index: 80;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .34s cubic-bezier(.33,1,.68,1), visibility .34s;
  display: flex; flex-direction: column;
}
.akn-drawer.akn-open { transform: none; visibility: visible; }
.akn-dhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 19px 20px; border-bottom: 1px solid var(--akn-line);
}
.akn-dclose { color: var(--akn-soft); padding: 6px; }
.akn-dclose:hover { color: var(--akn-ink); }
.akn-dbody { flex: 1; overflow-y: auto; padding: 4px 20px; }
.akn-dempty { color: var(--akn-grey); font-size: 14px; padding: 44px 0; text-align: center; }
.akn-li {
  display: grid; grid-template-columns: 58px minmax(0,1fr) auto;
  gap: 12px; padding: 17px 0; border-bottom: 1px solid var(--akn-line); align-items: start;
}
.akn-li .akn-th { position: relative; aspect-ratio: 3/4; background: var(--akn-paper-2); overflow: hidden; }
.akn-li .akn-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.akn-li h4 { font-family: 'Bodoni Moda', Didot, Georgia, serif; font-weight: 400; font-size: 15px; margin: 0; }
.akn-li .akn-v { font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--akn-grey); margin-top: 5px; }
.akn-qty { display: inline-flex; align-items: center; border: 1px solid var(--akn-line); margin-top: 9px; }
.akn-qty button { width: 25px; height: 25px; color: var(--akn-soft); font-size: 13px; line-height: 1; }
.akn-qty button:hover { color: var(--akn-ink); }
.akn-qty span { font-size: 12px; min-width: 20px; text-align: center; }
.akn-li .akn-lp { font-size: 13px; color: var(--akn-oxblood); white-space: nowrap; }
/* Drawer line remove — quiet text, oxblood only on hover (it is not a purchase
   action, so it is not the money colour at rest). */
.akn-li-remove {
  grid-column: 2 / 3; justify-self: start;
  margin-top: 9px; padding: 0;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--akn-grey); border-bottom: 1px solid transparent;
  transition: color .16s, border-color .16s;
}
.akn-li-remove:hover { color: var(--akn-oxblood); border-bottom-color: var(--akn-oxblood); }
.akn-dfoot { border-top: 1px solid var(--akn-line); padding: 18px 20px 22px; }
.akn-drow { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 9px; color: var(--akn-soft); }
.akn-drow.akn-tot {
  color: var(--akn-ink); font-family: 'Bodoni Moda', Didot, Georgia, serif;
  font-size: 21px; margin: 14px 0 4px;
}
.akn-dnote { font-size: 11.5px; color: var(--akn-grey); margin: 10px 0 15px; line-height: 1.55; }
/* View cart — secondary, ink-bordered, sits above Checkout. Neutral, not the
   money colour: oxblood is reserved for the purchase action (spec §3 rule 3). */
.akn-dvc {
  display: block; width: 100%; text-align: center;
  background: transparent; color: var(--akn-ink);
  border: 1px solid var(--akn-ink); padding: 14px; margin-bottom: 9px;
  font-family: Jost, system-ui, sans-serif;
  font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  transition: background-color .18s, color .18s;
}
.akn-dvc:hover,
.akn-dvc:focus-visible { background: var(--akn-ink); color: var(--akn-paper); }
.akn-dco {
  display: block; width: 100%; text-align: center;
  background: var(--akn-oxblood); color: var(--akn-onink);
  padding: 16px; font-size: 11.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; transition: background .18s;
}
.akn-dco:hover { background: var(--akn-oxblood-hi); color: var(--akn-onink); }
.akn-dpay { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.akn-dpay em {
  font-style: normal; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--akn-grey); border: 1px solid var(--akn-line); padding: 5px 8px;
}

/* ── toast ────────────────────────────────────────────────────────────── */
.akn-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 90;
  transform: translate(-50%, 24px);
  background: var(--akn-ink); color: var(--akn-paper);
  padding: 13px 22px; font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; opacity: 0; pointer-events: none;
  transition: opacity .28s, transform .28s; white-space: nowrap;
}
.akn-toast.akn-open { opacity: 1; transform: translate(-50%, 0); }

/* ── shared section head ──────────────────────────────────────────────── */
.akn-sec-h {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; padding: clamp(46px,5.4vw,80px) var(--akn-pad) 22px;
}
.akn-sec-h h2 { font-size: clamp(28px,3.8vw,46px); }
.akn-sec-h .akn-lbl { color: var(--akn-grey); display: block; margin-bottom: 12px; }
.akn-sec-h .akn-more {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--akn-soft); border-bottom: 1px solid var(--akn-oxblood);
  padding-bottom: 4px; white-space: nowrap;
}
.akn-sec-h .akn-more:hover { color: var(--akn-ink); }

/* ── product card (shared by rail + related) ──────────────────────────── */
.akn-pc-shot { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--akn-paper-2); display: block; }
/* The image link is its own element: a <button> nested inside an <a> is invalid
   and gives the card two competing hit targets. */
/* Link AND image are absolutely stretched to the 3:4 frame. A percentage height
   on a child of an aspect-ratio box does not reliably resolve — the image was
   falling back to its natural ratio, sitting at the top with grey below (which
   also read as a gap before the quick-add button). Pinning them fixes both. */
.akn-pc-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.akn-pc-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.33,1,.68,1); }
.akn-pc:hover .akn-pc-shot img { transform: scale(1.045); }
.akn-flag {
  position: absolute; top: 0; left: 0; z-index: 2;
  background: var(--akn-ink); color: var(--akn-paper);
  font-size: 9px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; padding: 6px 10px;
}
.akn-flag.akn-ox { background: var(--akn-oxblood); color: var(--akn-onink); }
/* Quick-add. The label is Jost 500 in --akn-onink so it always reads against
   the ink plate — a theme or Elementor kit button rule was inheriting the
   theme's dark button colour and rendering ink-on-ink (invisible). Locked here
   and again, with !important, in akn-override.css §3c. */
.akn .akn-pc-add {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: var(--akn-ink);
  color: var(--akn-onink);
  -webkit-text-fill-color: var(--akn-onink);
  font-family: Jost, system-ui, sans-serif;
  font-weight: 500; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase;
  padding: 14px; text-align: center; line-height: 1.2;
  transform: none;
  touch-action: manipulation;
  transition: transform .26s cubic-bezier(.33,1,.68,1), background-color .18s;
}
.akn .akn-pc-add:hover,
.akn .akn-pc-add:focus-visible {
  background: var(--akn-oxblood);
  color: var(--akn-onink);
  -webkit-text-fill-color: var(--akn-onink);
}

/* Hover-reveal is now opt-in (.akn-pc-add--reveal). It hid the label on every
   desktop card until the pointer arrived, which cost the affordance more than
   the reveal was worth. Touch devices always keep it visible either way. */
.akn-pc-add--reveal { transform: translateY(100%); }
.akn-pc:hover .akn-pc-add--reveal,
.akn-pc:focus-within .akn-pc-add--reveal { transform: none; }
@media (hover: none) { .akn-pc-add--reveal { transform: none; } }
.akn-pc-meta { display: flex; justify-content: space-between; gap: 12px; padding: 13px 1px 0; align-items: baseline; }
.akn-pc-meta h3 { font-family: 'Bodoni Moda', Didot, Georgia, serif; font-weight: 400; font-size: 17px; margin: 0; }
.akn-pc-meta .akn-p { font-size: 14px; color: var(--akn-oxblood); white-space: nowrap; }
.akn-pc-sub { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--akn-grey); margin-top: 4px; }


/* ── mobile bottom navigation ─────────────────────────────────────────────
   Fixed thumb rail under 940px. Hairline top edge, paper ground, no radius and
   no filled icons — same restraint as the header, just rotated to the bottom. */
.akn-botnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 56;
  background: var(--akn-paper);
  border-top: 1px solid var(--akn-line);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.akn-botnav a, .akn-botnav button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 10px 4px 11px;
  color: var(--akn-soft); text-align: center;
  border-left: 1px solid var(--akn-line);
  transition: color .16s;
}
.akn-botnav > :first-child { border-left: 0; }
.akn-botnav a:hover, .akn-botnav button:hover,
.akn-botnav .akn-on { color: var(--akn-ink); }
.akn-botnav .akn-on { position: relative; }
/* current item gets the oxblood tick above it — the same "you are here" cue as
   the checkout progress rail */
.akn-botnav .akn-on::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0;
  height: 1px; background: var(--akn-oxblood);
}
.akn-botnav span {
  font-size: 9px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; line-height: 1;
}
.akn-botnav .akn-bagico { line-height: 0; }
.akn-botnav b {
  position: absolute; top: -5px; right: -8px;
  font-size: 9px; font-weight: 500; line-height: 1;
  min-width: 14px; height: 14px; padding: 0 3px;
  background: var(--akn-oxblood); color: var(--akn-onink);
  display: grid; place-items: center; border: 1px solid var(--akn-paper);
}
.akn-botnav b.akn-zero { display: none; }
@media (min-width: 940px) { .akn-botnav { display: none; } }

/* Keep the bottom nav clear of page content and of the sticky buy bar. */
body.akn-has-botnav { --akn-botnav-h: 64px; }
@media (max-width: 939px) {
  body.akn-has-botnav .akn-footer { padding-bottom: calc(var(--akn-botnav-h) + 24px); }
  body.akn-has-botnav .akn-stick { bottom: var(--akn-botnav-h); }
  body.akn-has-botnav.akn-has-stick .akn-footer { padding-bottom: calc(var(--akn-botnav-h) + 96px); }
}

/* ── header search ────────────────────────────────────────────────────────
   Icon in the header opens a full-width hairline panel directly beneath it.
   Not a modal: the page stays where it is, and the panel inherits the sticky
   host so it travels with the header. */
.akn-searchbtn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px; color: var(--akn-ink); line-height: 0; transition: color .16s;
}
.akn-searchbtn:hover { color: var(--akn-oxblood); }

.akn-hdr-actions { display: inline-flex; align-items: center; gap: 18px; }

.akn-searchpanel {
  display: none;
  border-top: 1px solid var(--akn-line);
  background: var(--akn-paper);
}
.akn-searchpanel.akn-open { display: block; }
.akn-searchform {
  display: flex; align-items: center; gap: 12px;
  padding: 14px var(--akn-pad);
}
.akn-searchform input[type="search"] {
  flex: 1; min-width: 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--akn-line);
  padding: 10px 0; height: auto;
  font-family: 'Bodoni Moda', Didot, Georgia, serif;
  font-weight: 400; font-size: clamp(20px,3.4vw,30px);
  color: var(--akn-ink); letter-spacing: -.01em;
}
.akn-searchform input[type="search"]::placeholder { color: var(--akn-grey); }
.akn-searchform input[type="search"]:focus { outline: none; border-bottom-color: var(--akn-ink); }
.akn-searchform input::-webkit-search-cancel-button { -webkit-appearance: none; }
.akn-searchform button[type="submit"] {
  font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--akn-onink); background: var(--akn-oxblood);
  padding: 13px 22px; white-space: nowrap; transition: background-color .18s;
}
.akn-searchform button[type="submit"]:hover { background: var(--akn-oxblood-hi); }
.akn-searchclose { color: var(--akn-soft); padding: 8px; }
.akn-searchclose:hover { color: var(--akn-ink); }

/* live suggestions */
.akn-sug { border-top: 1px solid var(--akn-line); }
.akn-sug:empty { display: none; }
.akn-sug a {
  display: grid; grid-template-columns: 46px minmax(0,1fr) auto;
  gap: 14px; align-items: center;
  padding: 12px var(--akn-pad);
  border-bottom: 1px solid var(--akn-line);
}
.akn-sug a:hover, .akn-sug a.akn-on { background: var(--akn-paper-2); }
.akn-sug .akn-th { aspect-ratio: 3/4; background: var(--akn-paper-2); overflow: hidden; }
.akn-sug .akn-sug-t { display: block; min-width: 0; }
.akn-sug .akn-n {
  display: block; font-family: 'Bodoni Moda', Didot, Georgia, serif;
  font-weight: 400; font-size: 16px; color: var(--akn-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.akn-sug .akn-v { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--akn-grey); margin-top: 3px; }
.akn-sug .akn-p { font-size: 13.5px; color: var(--akn-oxblood); white-space: nowrap; }
.akn-sug .akn-none { padding: 18px var(--akn-pad); font-size: 13.5px; color: var(--akn-grey); }

/* Visually hidden — used for the search field label and the honeypot. */
.akn-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }