/* ==========================================================================
   CraftNest — Layout
   Ticker, sticky header, mega menu, typeahead, mobile drawer, hero, footer.
   ========================================================================== */

/* ==========================================================================
   Header
   ========================================================================== */

.cn-header {
  position: sticky;
  top: 0;
  z-index: var(--cn-z-header);
  background: var(--cn-paper);
  border-bottom: 1px solid var(--cn-line);
}
.cn-header--static { position: static; }

.cn-header__bar {
  max-width: var(--cn-max);
  margin-inline: auto;
  padding-inline: var(--cn-gutter);
  height: var(--cn-header);
  display: flex;
  align-items: center;
  gap: var(--cn-space-6);
}

.cn-brand {
  font-family: var(--cn-font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: var(--cn-track-tight);
  color: var(--cn-ink);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--cn-space-2);
}
.cn-brand:hover { color: var(--cn-ink); }
/*
 * The logo, at whatever size the shop asked for.
 *
 * --cn-logo-scale is 1 unless the Customizer says otherwise, so the default
 * arithmetic comes out at exactly the 36px this was before. The header grows
 * to fit a logo taller than it rather than clipping one: a bar that is 72px
 * because that suits the navigation is not a reason to shrink a wordmark
 * somebody deliberately made bigger.
 */
.cn-brand img {
  max-height: calc(36px * var(--cn-logo-scale, 1));
  width: auto;
}
.cn-brand__tagline { display: none; }

/* All categories trigger */
.cn-header__cats {
  font-family: var(--cn-font-display);
  font-weight: 600;
  font-size: 15px;
  height: var(--cn-tap);
  padding-inline: var(--cn-space-4);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-button);
  background: var(--cn-paper);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--cn-space-2);
  white-space: nowrap;
  color: var(--cn-ink);
  transition: border-color var(--cn-ease);
}
.cn-header__cats:hover { border-color: var(--cn-ink); }

/* Search slot */
.cn-header__search {
  flex: 1;
  position: relative;
  max-width: 560px;
  min-width: 0;
}

/* Right hand utilities */
.cn-header__tools {
  display: flex;
  align-items: center;
  gap: var(--cn-space-2);
  margin-inline-start: auto;
}
.cn-header__freebies {
  font-family: var(--cn-font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--cn-warm-text);
  white-space: nowrap;
  padding-inline: var(--cn-space-2);
  min-height: var(--cn-tap);
  display: inline-flex;
  align-items: center;
}
.cn-header__freebies:hover { color: var(--cn-warm-text); text-decoration: underline; }

.cn-cart-count {
  position: absolute;
  top: 4px;
  inset-inline-end: 2px;
  background: var(--cn-accent);
  color: var(--cn-on-fill);
  font-family: var(--cn-font-badge);
  font-size: 11px;
  line-height: 1;
  border-radius: var(--cn-radius-badge);
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 5px;
}

/* Menu toggle, hidden above the tablet breakpoint */
.cn-header__burger { display: none; }

/* ==========================================================================
   Mega menu
   ========================================================================== */

.cn-mega {
  border-top: 1px solid var(--cn-line);
  background: var(--cn-paper);
  box-shadow: var(--cn-shadow-menu);
}
.cn-mega[hidden] { display: none; }
.cn-mega__inner {
  max-width: var(--cn-max);
  margin-inline: auto;
  padding: var(--cn-space-8) var(--cn-gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--cn-space-4);
}
.cn-mega__item {
  display: flex;
  gap: var(--cn-space-3);
  align-items: center;
  padding: var(--cn-space-3);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-card);
  color: var(--cn-ink);
  min-height: var(--cn-tap);
  transition: border-color var(--cn-ease), box-shadow var(--cn-ease);
}
.cn-mega__item:hover { border-color: var(--cn-ink); color: var(--cn-ink); }

/* ==========================================================================
   Typeahead panel
   ========================================================================== */

.cn-typeahead {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 8px);
  background: var(--cn-paper);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-card);
  box-shadow: var(--cn-shadow-pop);
  z-index: var(--cn-z-dropdown);
  overflow: hidden;
  max-height: 70vh;
  overflow-y: auto;
}
.cn-typeahead[hidden] { display: none; }
.cn-typeahead__label {
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-12);
  letter-spacing: var(--cn-track-mono);
  text-transform: uppercase;
  color: var(--cn-graphite);
  padding: var(--cn-space-3) 14px var(--cn-space-2);
}
.cn-typeahead__item {
  display: flex;
  align-items: center;
  gap: var(--cn-space-3);
  padding: 10px 14px;
  color: var(--cn-ink);
  min-height: var(--cn-tap);
}
.cn-typeahead__item:hover,
.cn-typeahead__item:focus,
.cn-typeahead__item.is-active { background: var(--cn-surface); color: var(--cn-ink); }
.cn-typeahead__thumb {
  flex: 0 0 48px;
  width: 48px; height: 48px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--cn-preview);
  background-image: repeating-linear-gradient(135deg, var(--cn-ink-a06) 0 4px, transparent 4px 8px);
}
.cn-typeahead__thumb img { width: 100%; height: 100%; object-fit: cover; }
/*
 * Name over meta, not beside it: both are spans, so they need to be blocks.
 *
 * Two lines, not one line with an ellipsis. The row is thumb + name + price,
 * and the price keeps its full width, so on a 320px screen the name was left
 * 117px of a 196px title and read "Halloween Gho..." -- a suggestion list that
 * will not tell you what it is suggesting. Wrapping costs a line and shows the
 * whole name at every width this shop is used at; the clamp is still there for
 * anything genuinely long.
 */
.cn-typeahead__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: var(--cn-fs-14);
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
}
.cn-typeahead__item .cn-mono { display: block; }
.cn-typeahead__price {
  font-size: var(--cn-fs-14);
  font-weight: 500;
  margin-inline-start: auto;
  white-space: nowrap;
  flex: 0 0 auto;
}
.cn-typeahead__foot {
  border-top: 1px solid var(--cn-line);
  padding: var(--cn-space-3) 14px;
  display: flex;
  gap: var(--cn-space-3);
  flex-wrap: wrap;
  align-items: center;
}
.cn-typeahead__empty { padding: var(--cn-space-5) 14px; color: var(--cn-graphite); font-size: 15px; }

/* ==========================================================================
   Mobile drawer
   ========================================================================== */

.cn-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--cn-z-modal);
}
.cn-drawer[hidden] { display: none; }
.cn-drawer__scrim {
  position: absolute;
  inset: 0;
  background: var(--cn-ink-a35);
  border: 0;
  width: 100%;
  cursor: pointer;
}
.cn-drawer__panel {
  position: absolute;
  top: 0; bottom: 0; inset-inline-start: 0;
  width: min(360px, 88vw);
  background: var(--cn-paper);
  border-inline-end: 1px solid var(--cn-line);
  box-shadow: 12px 0 40px rgba(14, 17, 22, .16);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.cn-drawer--right .cn-drawer__panel {
  inset-inline: auto 0;
  border-inline-end: 0;
  border-inline-start: 1px solid var(--cn-line);
  box-shadow: var(--cn-shadow-drawer);
  width: min(420px, 100vw);
}
.cn-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cn-space-3);
  padding: var(--cn-space-5);
  border-bottom: 1px solid var(--cn-line);
  position: sticky;
  top: 0;
  background: var(--cn-paper);
  z-index: 1;
}
.cn-drawer__body { flex: 1; overflow-y: auto; padding-inline: var(--cn-space-5); }
.cn-drawer__foot {
  border-top: 1px solid var(--cn-line);
  padding: var(--cn-space-5);
  box-shadow: var(--cn-shadow-sticky);
  background: var(--cn-paper);
}
.cn-drawer__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cn-space-3);
  min-height: 52px;
  border-bottom: 1px solid var(--cn-line);
  color: var(--cn-ink);
  font-weight: 500;
}
.cn-drawer__nav a:hover { color: var(--cn-accent); }
.cn-drawer__nav .sub-menu {
  list-style: none;
  padding: 0 0 var(--cn-space-2) var(--cn-space-4);
  margin: 0;
}
.cn-drawer__nav .sub-menu a { font-weight: 400; min-height: var(--cn-tap); border-bottom: 0; color: var(--cn-graphite); }
.cn-drawer__nav ul { list-style: none; padding: 0; margin: 0; }

/* ==========================================================================
   Hero
   ========================================================================== */

.cn-hero {
  background-color: var(--cn-ink);
  color: var(--cn-on-fill);
  background-image:
    linear-gradient(var(--cn-white-a08) 1px, transparent 1px),
    linear-gradient(90deg, var(--cn-white-a08) 1px, transparent 1px);
  background-size: var(--cn-grid-size) var(--cn-grid-size);
}
.cn-hero__inner {
  max-width: var(--cn-max);
  margin-inline: auto;
  padding: var(--cn-section) var(--cn-gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: var(--cn-space-16);
  align-items: center;
}
.cn-hero__inner--single { display: block; }
.cn-hero p { color: var(--cn-white-a72); }

/* The hero search, a select and an input welded into one control */
.cn-hero__search {
  display: flex;
  max-width: 560px;
  border: 1px solid var(--cn-line-on-ink);
  border-radius: var(--cn-radius-card);
  overflow: hidden;
  background: var(--cn-white-a06);
  height: 56px;
}
.cn-hero__search select,
.cn-hero__search input {
  height: 56px;
  border: 0;
  background: transparent;
  color: var(--cn-on-fill);
  padding-inline: 14px;
  font-size: 15px;
  box-shadow: none;
  border-radius: 0;
}
.cn-hero__search select {
  border-inline-end: 1px solid var(--cn-white-a20);
  flex: 0 0 auto;
  max-width: 190px;
}
.cn-hero__search select option { color: var(--cn-ink); }
.cn-hero__search input { flex: 1; min-width: 0; }
/*
 * This used to set an offset and no outline, on top of the global
 * input:focus { outline: none } -- so the site's primary search was the one
 * control on the page with no focus cue at all. Inside the ink hero the ring
 * has to be light to be visible against it.
 */
.cn-hero__search input:focus,
.cn-hero__search select:focus { box-shadow: none; }
.cn-hero__search input:focus-visible,
.cn-hero__search select:focus-visible { outline: 2px solid var(--cn-on-fill); outline-offset: -2px; }
.cn-hero__search button {
  width: 56px;
  flex: 0 0 56px;
  border: 0;
  background: var(--cn-accent);
  color: var(--cn-on-fill);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--cn-ease);
}
.cn-hero__search button:hover { background: var(--cn-accent-dark); }

/* Stacked mockups, the only decorative composition in the theme */
/* Square plates sit taller than the old 4:3 ones, so the stack grew with
   them: plate 3 now ends at 490px instead of 405px. */
.cn-hero__stack {
  position: relative;
  min-height: 510px;
}
.cn-hero__plate {
  position: absolute;
  aspect-ratio: 1;
  border: 1px solid var(--cn-white-a18);
  border-radius: var(--cn-radius-card);
  overflow: hidden;
}
.cn-hero__plate img { width: 100%; height: 100%; object-fit: cover; }
.cn-hero__plate--1 { top: 0;     inset-inline-end: 120px; width: 300px; transform: rotate(-6deg); background-color: var(--cn-ink-100); background-image: repeating-linear-gradient(135deg, var(--cn-white-a06) 0 8px, transparent 8px 16px); }
.cn-hero__plate--2 { top: 70px;  inset-inline-end: 40px;  width: 320px; transform: rotate(3deg);  background-color: var(--cn-ink-200); background-image: repeating-linear-gradient(45deg,  var(--cn-white-a06) 0 8px, transparent 8px 16px); border-color: rgba(255,255,255,.22); }
.cn-hero__plate--3 { top: 150px; inset-inline-end: 150px; width: 340px; transform: rotate(-2deg); background-color: var(--cn-ink-300); background-image: repeating-linear-gradient(90deg,  var(--cn-white-a06) 0 8px, transparent 8px 16px); border-color: rgba(255,255,255,.26); display: flex; align-items: flex-end; padding: var(--cn-space-3); }

@media (max-width: 1100px) {
  .cn-hero__stack { min-height: 410px; }
  .cn-hero__plate--1 { inset-inline-end: 60px;  width: 240px; }
  .cn-hero__plate--2 { inset-inline-end: 0;     width: 250px; }
  .cn-hero__plate--3 { inset-inline-end: 80px;  width: 270px; top: 130px; }
}
@media (max-width: 900px) {
  .cn-hero__stack { display: none; }
  .cn-hero__inner { grid-template-columns: 1fr; gap: var(--cn-space-8); }
}

/* ==========================================================================
   Campaign countdown — screen 16c
   Four cells on hairline boxes. Mono numbers, because it is data.
   ========================================================================== */

.cn-countdown {
  display: flex;
  gap: var(--cn-space-3);
  justify-content: center;
  flex-wrap: wrap;
}
.cn-countdown__cell {
  border: 1px solid var(--cn-white-a20);
  border-radius: var(--cn-radius-card);
  background: var(--cn-white-a06);
  padding: var(--cn-space-4) var(--cn-space-5);
  min-width: 92px;
  text-align: center;
}
.cn-countdown__value {
  display: block;
  font-family: var(--cn-font-display);
  font-weight: 600;
  font-size: var(--cn-fs-44);
  line-height: 1;
  letter-spacing: var(--cn-track-tight);
  font-variant-numeric: tabular-nums;
}
.cn-countdown__label {
  display: block;
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-12);
  letter-spacing: var(--cn-track-mono);
  text-transform: uppercase;
  color: var(--cn-white-a60);
  margin-top: var(--cn-space-2);
}
.cn-countdown[data-ended] .cn-countdown__value { color: var(--cn-white-a55); }

@media (max-width: 600px) {
  .cn-countdown__cell { min-width: 70px; padding: var(--cn-space-3); }
  .cn-countdown__value { font-size: var(--cn-fs-32); }
}

/* Page hero for archives and interior pages */
.cn-pagehead {
  max-width: var(--cn-max);
  margin-inline: auto;
  padding: var(--cn-space-6) var(--cn-gutter) 0;
}
.cn-pagehead h1 { margin: var(--cn-space-5) 0 var(--cn-space-4); }
.cn-pagehead__intro { color: var(--cn-graphite); max-width: 720px; font-size: 17px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.cn-footer {
  background: var(--cn-paper);
  border-top: 1px solid var(--cn-line);
}
.cn-footer__inner {
  max-width: var(--cn-max);
  margin-inline: auto;
  padding: var(--cn-space-16) var(--cn-gutter);
}
/*
 * The brand column is wider than the link columns: it carries a logo and a
 * sentence, they carry one word per line. auto-fit gave all four the same
 * width and the sentence wrapped every three words.
 */
.cn-footer__cols {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--cn-space-8);
}
@media (max-width: 900px) {
  .cn-footer__cols { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
  .cn-footer__brand { max-width: none; grid-column: 1 / -1; }
}
.cn-footer__brand { max-width: 300px; }
.cn-footer__mark { display: inline-flex; align-items: center; margin-bottom: var(--cn-space-3); }
.cn-footer__logo { max-height: calc(40px * var(--cn-logo-scale, 1)); width: auto; display: block; }
.cn-footer__about { max-width: 260px; color: var(--cn-graphite); }
.cn-footer__social {
  list-style: none;
  padding: 0;
  margin: var(--cn-space-5) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cn-space-2);
}
.cn-footer__social li { margin: 0; }
.cn-footer__social a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding-inline: 12px;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-badge);
  font-size: var(--cn-fs-14);
  color: var(--cn-ink);
}
.cn-footer__social a:hover { border-color: var(--cn-ink); color: var(--cn-accent); }
/*
 * Policy links left, copyright right, one rule. The copyright stops shrinking
 * before it wraps mid sentence, and on a phone the two stack in reading order
 * rather than sitting in two half width columns.
 */
.cn-footer__legal { min-width: 0; }
.cn-footer__legal ul { gap: var(--cn-space-5); margin: 0; }
.cn-footer__legal a { color: var(--cn-graphite); }
.cn-footer__legal a:hover { color: var(--cn-ink); }
.cn-footer__copyright { flex: 0 0 auto; color: var(--cn-graphite); text-align: end; }

/* The payment marks close the footer, under the rule rather than in it. */
.cn-footer__pay { margin-top: var(--cn-space-5); }

@media (max-width: 600px) {
  .cn-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--cn-space-3); }
  .cn-footer__copyright { text-align: start; }
}
.cn-footer__heading {
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-12);
  letter-spacing: var(--cn-track-mono);
  text-transform: uppercase;
  color: var(--cn-graphite);
  margin-bottom: var(--cn-space-4);
}
.cn-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cn-footer__list li { margin: 0; }
.cn-footer__list a {
  color: var(--cn-ink);
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
.cn-footer__list a:hover { color: var(--cn-accent); }
.cn-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cn-space-6);
  flex-wrap: wrap;
  border-top: 1px solid var(--cn-line);
  margin-top: var(--cn-space-12);
  padding-top: var(--cn-space-6);
}
.cn-paylist {
  display: flex;
  gap: var(--cn-space-2);
  flex-wrap: wrap;
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-12);
  letter-spacing: var(--cn-track-mono);
  text-transform: uppercase;
  color: var(--cn-graphite);
}
.cn-paylist span {
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-card);
  padding: 8px 12px;
}

/* Newsletter band above the footer */
.cn-newsletter__inner {
  max-width: var(--cn-max);
  margin-inline: auto;
  padding: var(--cn-section) var(--cn-gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--cn-space-12);
  align-items: center;
}
.cn-newsletter__form { display: flex; gap: var(--cn-space-3); flex-wrap: wrap; }
.cn-newsletter__form input { flex: 1; min-width: 240px; }

/* ==========================================================================
   Sticky mobile buy bar
   ========================================================================== */

.cn-stickybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--cn-z-sticky-nav);
  background: var(--cn-paper);
  border-top: 1px solid var(--cn-line);
  box-shadow: 0 -6px 18px rgba(14, 17, 22, .06);
  padding: var(--cn-space-3) var(--cn-space-4);
  display: none;
  align-items: center;
  gap: var(--cn-space-3);
  padding-bottom: calc(var(--cn-space-3) + env(safe-area-inset-bottom, 0px));
}
.cn-stickybar .cn-btn { flex: 1; }
.cn-stickybar__price {
  display: flex;
  align-items: center;
  gap: var(--cn-space-2);
  font-family: var(--cn-font-display);
  font-weight: 600;
  font-size: var(--cn-fs-20);
}

/* ==========================================================================
   Scroll spy tab strip
   ========================================================================== */

.cn-tabs {
  position: sticky;
  top: var(--cn-header);
  z-index: var(--cn-z-sticky-nav);
  background: var(--cn-paper);
  border-top: 1px solid var(--cn-line);
  border-bottom: 1px solid var(--cn-line);
}
.cn-tabs__inner {
  max-width: var(--cn-max);
  margin-inline: auto;
  padding-inline: var(--cn-gutter);
  display: flex;
  gap: var(--cn-space-8);
  overflow-x: auto;
  scrollbar-width: none;
}
.cn-tabs__inner::-webkit-scrollbar { display: none; }
.cn-tabs a {
  font-family: var(--cn-font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--cn-graphite);
  padding: 18px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--cn-ease), border-color var(--cn-ease);
}
.cn-tabs a:hover { color: var(--cn-ink); }
.cn-tabs a.is-active {
  color: var(--cn-ink);
  border-bottom-color: var(--cn-accent);
}

/* ==========================================================================
   Sidebar shells — filters and account
   ========================================================================== */

.cn-with-sidebar {
  max-width: var(--cn-max);
  margin-inline: auto;
  padding: var(--cn-space-12) var(--cn-gutter) 0;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--cn-space-12);
  align-items: start;
}
.cn-with-sidebar--account { grid-template-columns: 240px minmax(0, 1fr); }
.cn-sidebar { position: sticky; top: calc(var(--cn-header) + var(--cn-space-6)); }

.cn-account-nav {
  background: var(--cn-paper);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-card);
  overflow: hidden;
}
.cn-account-nav__who {
  padding: var(--cn-space-5);
  border-bottom: 1px solid var(--cn-line);
  display: flex;
  gap: var(--cn-space-3);
  align-items: center;
}
.cn-avatar {
  width: 40px; height: 40px;
  flex: 0 0 40px;
  border-radius: var(--cn-radius-badge);
  background: var(--cn-ink);
  color: var(--cn-on-fill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cn-font-display);
  font-weight: 600;
  font-size: var(--cn-fs-14);
  overflow: hidden;
}
.cn-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cn-account-nav ul { list-style: none; margin: 0; padding: 0; }
.cn-account-nav li { margin: 0; border-top: 1px solid var(--cn-line); }
.cn-account-nav li:first-child { border-top: 0; }
.cn-account-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cn-space-3);
  min-height: 48px;
  padding-inline: var(--cn-space-5);
  color: var(--cn-ink);
  border-inline-start: 2px solid transparent;
}
.cn-account-nav a:hover { background: var(--cn-surface); color: var(--cn-ink); }
.cn-account-nav .is-active > a,
.cn-account-nav li.is-active a {
  background: var(--cn-accent-a08);
  color: var(--cn-accent);
  font-weight: 500;
  border-inline-start-color: var(--cn-accent);
}
.cn-account-nav__count {
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-12);
  letter-spacing: var(--cn-track-mono);
  color: var(--cn-graphite);
}

/* At 390 the nav is a scroll strip, as drawn on screen 12c. A stacked list
   there costs a whole screen before the content starts. */
@media (max-width: 600px) {
  .cn-account-nav {
    border-inline: 0;
    border-radius: 0;
    overflow: visible;
    margin-inline: calc(var(--cn-gutter) * -1);
  }
  .cn-account-nav__who { padding-inline: var(--cn-gutter); }

  .cn-account-nav ul {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--cn-line);
    padding-inline: var(--cn-gutter);
    scroll-snap-type: x proximity;
  }
  .cn-account-nav ul::-webkit-scrollbar { display: none; }

  .cn-account-nav li { border-top: 0; scroll-snap-align: start; }

  .cn-account-nav a {
    white-space: nowrap;
    padding-inline: var(--cn-space-4);
    border-inline-start: 0;
    border-bottom: 2px solid transparent;
  }
  .cn-account-nav .is-active > a,
  .cn-account-nav li.is-active a {
    background: transparent;
    border-inline-start-color: transparent;
    border-bottom-color: var(--cn-accent);
  }
}

/* Contents rail, used on legal and long form articles */
.cn-contents__label {
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-12);
  letter-spacing: var(--cn-track-mono);
  text-transform: uppercase;
  color: var(--cn-graphite);
  margin-bottom: var(--cn-space-4);
  padding-bottom: var(--cn-space-3);
  border-bottom: 1px solid var(--cn-line);
}
.cn-contents__list {
  display: flex;
  flex-direction: column;
  gap: var(--cn-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.cn-contents__list li { margin: 0; }
.cn-contents__list a {
  font-size: 15px;
  color: var(--cn-graphite);
  border-inline-start: 2px solid var(--cn-line);
  padding-inline-start: var(--cn-space-3);
  display: block;
}
.cn-contents__list a:hover { color: var(--cn-ink); }
/*
 * On a phone the rail is a stack of 24px links 12px apart, which is a 36px
 * pitch for a thumb. Padding takes each one to 44px and the gap comes down so
 * the block only grows by a line or two.
 */
@media (max-width: 780px) {
  .cn-contents__list { gap: var(--cn-space-1); }
  .cn-contents__list a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: var(--cn-space-2);
  }
}
.cn-contents__list a.is-active {
  color: var(--cn-accent);
  font-weight: 500;
  border-inline-start-color: var(--cn-accent);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* 1100 and below: the mega menu trigger goes, search shrinks. */
@media (max-width: 1100px) {
  .cn-header__cats { display: none; }
  .cn-header__bar { gap: var(--cn-space-4); }
}

/* At 768 the sidebar becomes a drawer and grids drop to two columns. */
@media (max-width: 900px) {
  .cn-with-sidebar,
  .cn-with-sidebar--account { grid-template-columns: minmax(0, 1fr); gap: var(--cn-space-8); }
  .cn-sidebar { position: static; }
  .cn-sidebar--drawer { display: none; }
  .cn-header__bar { height: 64px; }
  .cn-brand { font-size: var(--cn-fs-20); }
  .cn-tabs { top: 0; }
}

/* Mobile: burger appears, header search collapses to an icon. */
@media (max-width: 780px) {
  .cn-header__burger {
    display: inline-flex;
    margin-inline-start: calc(var(--cn-space-2) * -1);
  }
  .cn-header__bar {
    height: 56px;
    gap: var(--cn-space-1);
    padding-inline: var(--cn-space-2);
    justify-content: space-between;
  }
  .cn-brand { font-size: 19px; }
  .cn-header__search { display: none; }
  .cn-header__search.is-expanded {
    display: block;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    max-width: none;
    background: var(--cn-paper);
    border-bottom: 1px solid var(--cn-line);
    padding: var(--cn-space-3) var(--cn-space-4);
    z-index: var(--cn-z-dropdown);
  }
  .cn-header__freebies { display: none; }
  .cn-header__tools { gap: 0; }
  .cn-stickybar { display: flex; }
  body.cn-has-stickybar { padding-bottom: 84px; }
  .cn-footer__inner { padding-block: var(--cn-space-12); }
  .cn-footer__bottom { margin-top: var(--cn-space-8); }
}

@media (max-width: 600px) {
  .cn-grid--250,
  .cn-grid--240 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cn-space-3); }
  .cn-newsletter__inner { gap: var(--cn-space-6); }

  /* The welded hero control has no room for a select beside the field at
     390, so the select takes its own row rather than squeezing the input
     down to four characters. */
  .cn-hero__search {
    flex-wrap: wrap;
    height: auto;
  }
  .cn-hero__search select {
    flex: 1 0 100%;
    max-width: none;
    border-inline-end: 0;
    border-bottom: 1px solid var(--cn-white-a20);
  }
  /* basis 0, not auto: the base width:100% would otherwise push the search
     button onto a third line of its own. */
  .cn-hero__search input { flex: 1 1 0; width: auto; min-width: 0; }

  .cn-pagehead h1 { margin-block: var(--cn-space-4); }
  .cn-footer__cols { gap: var(--cn-space-6); }
}

/* Related documents read as links, not as contents entries — screen 13 */
.cn-contents__list--related a { color: var(--cn-accent); }
.cn-contents__list--related a:hover { color: var(--cn-accent-dark, var(--cn-accent)); text-decoration: underline; }

/* No filter widgets, no sidebar column: otherwise the grid keeps the 260px
   track and the products sit in it. */
.cn-with-sidebar--alone { grid-template-columns: minmax(0, 1fr); }

/* The no-JavaScript menu. Only ever rendered inside <noscript>, so it costs a
   scripted visitor nothing; it wraps rather than scrolls because it is the
   only navigation that visitor has. */
.cn-header__nojs { border-bottom: 1px solid var(--cn-line); background: var(--cn-surface); }
.cn-header__nojs-list {
  display: flex; flex-wrap: wrap; gap: var(--cn-space-4);
  list-style: none; margin: 0;
  padding: var(--cn-space-3) var(--cn-gutter);
  font-size: 14px;
}
.cn-header__nojs-list a { color: var(--cn-ink); text-decoration: none; }
.cn-header__nojs-list a:hover { text-decoration: underline; }

/* The mobile search magnifier: hidden where the inline field is visible. */
.cn-header__searchtoggle { display: none; }
@media (max-width: 780px) {
  .cn-header__searchtoggle { display: inline-flex; }
}

/*
 * A row that opens. The parent no longer links straight through -- clicking it
 * shows what is under it, and the link to the parent itself sits at the end of
 * what opens, where somebody who did want the whole category will look.
 */
.cn-mega__row { display: block; }
.cn-mega__item--open { cursor: pointer; list-style: none; }
.cn-mega__item--open::-webkit-details-marker { display: none; }
.cn-mega__chevron {
  margin-inline-start: auto;
  font-size: 20px;
  line-height: 1;
  color: var(--cn-graphite);
  transition: transform var(--cn-ease);
}
details[open] > .cn-mega__item--open .cn-mega__chevron { transform: rotate(90deg); }
.cn-mega__body {
  padding: 0 var(--cn-space-4) var(--cn-space-4) 60px;
  /* A last guard: even twelve chips wrap taller on a short laptop screen. */
  max-height: 40vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cn-mega__all { display: inline-flex; align-items: center; gap: 6px; font-size: var(--cn-fs-14); }

.cn-mega__children {
  list-style: none;
  margin: 0 0 var(--cn-space-3);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 2px var(--cn-space-3);
}
.cn-mega__children li { margin: 0; }
.cn-mega__children a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding-inline: 10px;
  border-radius: var(--cn-radius-badge);
  font-size: var(--cn-fs-13, 13px);
  color: var(--cn-graphite);
}
.cn-mega__children a:hover { background: var(--cn-surface); color: var(--cn-ink); }
.cn-mega__childcount {
  font-family: var(--cn-font-mono);
  font-size: 11px;
  letter-spacing: var(--cn-track-mono);
  color: var(--cn-graphite);
}