/* ==========================================================================
   AKNAS — homepage sections
   ========================================================================== */

/* ── hero ─────────────────────────────────────────────────────────────── */
.akn-hero {
  position: relative;
  padding: clamp(30px,5vw,66px) var(--akn-pad) clamp(44px,6vw,90px);
  overflow: clip;
}
.akn-hero-word {
  position: absolute;
  top: clamp(46px,7vw,110px);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bodoni Moda', Didot, Georgia, serif;
  font-weight: 400;
  font-size: clamp(84px,22vw,310px);
  line-height: .78;
  letter-spacing: .02em;
  color: var(--akn-ghost);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}
.akn-hero-grid { position: relative; z-index: 1; display: grid; gap: clamp(24px,3vw,40px); }
.akn-hero-shot { position: relative; aspect-ratio: 4/5; background: var(--akn-paper-2); overflow: hidden; }
.akn-hero-cap {
  position: absolute; left: 0; bottom: 0;
  background: var(--akn-paper); padding: 11px 15px 12px;
  border-right: 1px solid var(--akn-line); border-top: 1px solid var(--akn-line);
}
.akn-hero-cap .akn-lbl { color: var(--akn-grey); }
.akn-hero-cap p { font-size: 13px; margin-top: 3px; }
.akn-hero-txt { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 6px; }
.akn-hero-txt .akn-lbl { color: var(--akn-oxblood); }
.akn-hero-txt h1 { font-size: clamp(46px,9.4vw,104px); margin: 16px 0 0; }
.akn-hero-txt h1 i { font-style: italic; color: var(--akn-grey); }
.akn-hero-txt p { max-width: 36ch; margin-top: 20px; color: var(--akn-soft); font-size: 15.5px; line-height: 1.62; }
.akn-hero-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

@media (min-width: 940px) {
  .akn-hero-grid {
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(30px,3.4vw,56px);
    align-items: end;
  }
  .akn-hero-shot { aspect-ratio: 3/4; }

  /* FIX (0.3): on desktop the photo occupies the left 57%, so a page-centred
     wordmark buried AKN behind it. In "clear" mode the word is anchored to the
     right gutter and sized to the copy column, so the whole word reads while
     staying behind the copy — the signature is intact, the letters are not eaten. */
  .akn-hero--clear .akn-hero-word {
    left: auto;
    right: var(--akn-pad);
    transform: none;
    top: clamp(40px,4.6vw,74px);
    /* Sized to fit the .85fr copy column at every width from 940px up:
       at 940 the column is ~351px and the word sets ~326px; at 1440 the
       column is ~537px and the word caps at ~510px. */
    font-size: clamp(84px,10.5vw,150px);
  }
}
.akn-hero--hidden .akn-hero-word { display: none; }

/* ── thesis rule ──────────────────────────────────────────────────────── */
.akn-rule-line {
  border-block: 1px solid var(--akn-line);
  padding: clamp(22px,2.6vw,30px) var(--akn-pad);
  display: grid; gap: 8px;
}
.akn-rule-line .akn-lbl { color: var(--akn-grey); }
.akn-rule-line p { font-size: clamp(17px,2.1vw,25px); font-weight: 300; color: var(--akn-soft); }
.akn-rule-line p b { font-weight: 400; color: var(--akn-ink); }
@media (min-width: 820px) {
  .akn-rule-line { grid-template-columns: auto 1fr; gap: 36px; align-items: baseline; }
}

/* ── the edit rail ────────────────────────────────────────────────────── */
/* FIX (0.3): the rail is edge-to-edge. Elementor container padding was being
   added on top of --akn-pad, which double-inset the cards and killed the
   bleed-off-screen cue on mobile. .akn-fullbleed cancels any ancestor gutter. */
.akn-fullbleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.akn-rail {
  display: flex;
  gap: clamp(10px,1.2vw,16px);
  overflow-x: auto;
  padding: 0 var(--akn-pad) 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.akn-rail::-webkit-scrollbar { display: none; }
.akn-rail .akn-pc { flex: 0 0 clamp(228px,60vw,330px); scroll-snap-align: start; }
.akn-railnav { display: flex; gap: 8px; padding: 22px var(--akn-pad) 0; }
.akn-railnav button {
  width: 38px; height: 38px; border: 1px solid var(--akn-line);
  display: grid; place-items: center; color: var(--akn-soft);
  transition: border-color .16s, color .16s;
}
.akn-railnav button:hover { border-color: var(--akn-ink); color: var(--akn-ink); }
@media (max-width: 939px) { .akn-railnav { display: none; } }

/* ── featured ─────────────────────────────────────────────────────────── */
.akn-feat { display: grid; border-top: 1px solid var(--akn-line); }
.akn-feat-shot { aspect-ratio: 1/1; background: var(--akn-paper-2); overflow: hidden; }
.akn-feat-body { padding: clamp(32px,4vw,66px) var(--akn-pad); }
.akn-feat-body .akn-lbl { color: var(--akn-oxblood); }
.akn-feat-body h2 { font-size: clamp(32px,4.6vw,58px); margin: 14px 0 0; }
.akn-feat-body h2 i { font-style: italic; color: var(--akn-grey); }
.akn-feat-body > p { color: var(--akn-soft); margin-top: 18px; max-width: 42ch; font-size: 15px; line-height: 1.66; }
.akn-spec { margin-top: 26px; border-top: 1px solid var(--akn-line); }
.akn-spec li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--akn-line); font-size: 13.5px;
}
.akn-spec li span:first-child {
  color: var(--akn-grey); letter-spacing: .09em; text-transform: uppercase; font-size: 11px;
}
.akn-sizes { display: flex; gap: 7px; flex-wrap: wrap; }
.akn-feat-body .akn-sizes { margin-top: 26px; }
.akn-sz {
  min-width: 46px; padding: 11px 4px; border: 1px solid var(--akn-line);
  text-align: center; font-size: 12px; letter-spacing: .1em; transition: .16s;
}
.akn-sz:hover { border-color: var(--akn-soft); }
.akn-sz[aria-pressed="true"] { background: var(--akn-ink); color: var(--akn-paper); border-color: var(--akn-ink); }
.akn-sz[disabled] { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.akn-stock { font-size: 11.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--akn-oxblood); margin-top: 14px; }
.akn-buyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }
.akn-buyrow .akn-price { font-family: 'Bodoni Moda', Didot, Georgia, serif; font-size: 28px; }
.akn-buyrow .akn-price s { font-family: Jost, sans-serif; font-size: 14px; color: var(--akn-grey); margin-left: 9px; font-weight: 300; }
@media (min-width: 940px) {
  .akn-feat { grid-template-columns: 1fr 1fr; }
  .akn-feat-shot { aspect-ratio: auto; min-height: 660px; }
  .akn-feat-body { border-left: 1px solid var(--akn-line); align-self: center; }
}

/* ── dark band (size table) — the ONE inverted section ────────────────── */
.akn-dark { background: var(--akn-ink); color: var(--akn-paper); }
.akn-dark-in { display: grid; gap: clamp(28px,3.6vw,54px); padding: clamp(50px,6vw,92px) var(--akn-pad); }
.akn-dark .akn-lbl { color: var(--akn-oxblood-hi); }
.akn-dark h2 { font-size: clamp(30px,4.2vw,52px); margin: 13px 0 0; }
.akn-dark h2 i { font-style: italic; color: var(--akn-grey); }
.akn-dark-lead { color: #A8A196; margin-top: 16px; max-width: 40ch; font-size: 15px; line-height: 1.66; }
.akn-tbl-wrap { overflow-x: auto; max-width: 100%; }
.akn-dark table { border-collapse: collapse; width: 100%; min-width: 400px; }
.akn-dark th, .akn-dark td {
  text-align: left; padding: 12px 8px;
  border-bottom: 1px solid var(--akn-line-lt);
  font-size: 13.5px; font-weight: 300; color: var(--akn-paper);
}
.akn-dark th {
  font-size: 10px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--akn-grey);
}
.akn-dark td:first-child { font-weight: 400; letter-spacing: .06em; }
.akn-dark tbody tr:hover { background: rgba(244,242,238,.05); }
.akn-tbl-note { font-size: 12.5px; color: var(--akn-grey); margin-top: 14px; line-height: 1.6; }
@media (min-width: 900px) { .akn-dark-in { grid-template-columns: .85fr 1.15fr; align-items: start; } }

/* ── proof ────────────────────────────────────────────────────────────── */
.akn-proof { display: grid; gap: 1px; background: var(--akn-line); border-bottom: 1px solid var(--akn-line); }
@media (min-width: 820px) { .akn-proof { grid-template-columns: repeat(3,1fr); } }
.akn-rev { background: var(--akn-paper); padding: clamp(26px,2.8vw,40px) var(--akn-gpad); }
.akn-stars { color: var(--akn-oxblood); font-size: 12px; letter-spacing: .24em; }
.akn-rev p { font-family: 'Bodoni Moda', Didot, Georgia, serif; font-size: 19px; line-height: 1.42; margin: 14px 0 16px; }
.akn-rev .akn-who { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--akn-grey); }

/* ── trust ────────────────────────────────────────────────────────────── */
.akn-trust { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--akn-line); }
@media (min-width: 820px) { .akn-trust { grid-template-columns: repeat(4,1fr); } }
.akn-tr { background: var(--akn-paper); padding: clamp(24px,2.6vw,34px) var(--akn-gpad); }
.akn-tr h4 { font-family: 'Bodoni Moda', Didot, Georgia, serif; font-weight: 400; font-size: 17px; margin: 0 0 7px; }
.akn-tr p { font-size: 13px; color: var(--akn-grey); line-height: 1.58; }

/* ── pay strip ────────────────────────────────────────────────────────── */
.akn-pay {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  padding: 24px var(--akn-pad); border-top: 1px solid var(--akn-line);
}
.akn-pay .akn-lbl { color: var(--akn-grey); margin-right: 6px; }
.akn-pay em {
  font-style: normal; border: 1px solid var(--akn-line);
  padding: 8px 14px; font-size: 11.5px; letter-spacing: .09em; white-space: nowrap;
}

/* ── footer ───────────────────────────────────────────────────────────── */
.akn-footer {
  border-top: 1px solid var(--akn-line);
  padding: clamp(46px,5.4vw,82px) var(--akn-pad) 30px;
  background: var(--akn-paper-2);
}
.akn-fg { display: grid; gap: 32px; }
@media (min-width: 780px) { .akn-fg { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.akn-fg h5 {
  font-size: 10px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--akn-grey); margin: 0 0 15px;
}
.akn-fg li { margin-bottom: 10px; font-size: 14px; color: var(--akn-soft); }
.akn-fg li a:hover { color: var(--akn-ink); }
.akn-fblurb { font-size: 14px; line-height: 1.68; color: var(--akn-soft); max-width: 32ch; margin-top: 14px; }
.akn-fbot {
  border-top: 1px solid var(--akn-line); margin-top: 38px; padding-top: 20px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: 11.5px; color: var(--akn-grey);
}


/* Featured block, WooCommerce mode: one option row per variation attribute
   (size, shade, …). Same chips as the buy panel so the two read as one system. */
.akn-feat-opt { margin-top: 26px; }
.akn-feat-opt + .akn-feat-opt { margin-top: 14px; }
.akn-feat-body .akn-stock[hidden] { display: none; }
.akn-feat-body .akn-price s[hidden] { display: none; }
.akn-feat-body .akn-off[hidden] { display: none; }
.akn-feat-body .akn-off {
  background: var(--akn-oxblood); color: var(--akn-onink);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 9px;
}
.akn-feat-body .akn-sz[disabled] { opacity: .3; cursor: not-allowed; text-decoration: line-through; }