/* ============================================================
   CHROME — the header, the mega menu, the drawer and the footer.

   There is almost nothing here on purpose. concept.css already styles every
   one of those elements; the header and the footer were not missing CSS, they
   were emitting different markup, and that is fixed in header.php / footer.php
   rather than approximated here.

   What IS here is the one thing markup cannot carry: a column count.

   The concept knows it has exactly four catalogue columns, so it can hardcode
   the grid. The theme cannot: inc/chrome.php resolves every catalogue entry
   against the product categories THIS store actually has, and drops the ones
   it cannot serve rather than advertising a 404 (demo/seed.php:450 makes the
   same call when it relinks the concept's pages). A column that loses all of
   its entries is dropped whole, and then the grid template has to follow or
   the panel ends with a visible hole where the column used to be.

   On this store, today, nothing is dropped: all fifteen of the design's
   categories are seeded, four columns are emitted, no modifier class is
   printed and not one rule below applies. They are the safety net for the
   store that seeds less — which this one did until an hour ago.
   ============================================================ */

/* concept.css:93 — .mega-inner{grid-template-columns:repeat(4,1fr) 1.25fr}
   Four catalogue columns and the promo. The promo is always present, so only
   the 1fr repeat count moves. */
.mega-inner--cols-3 { grid-template-columns: repeat(3, 1fr) 1.25fr }
.mega-inner--cols-2 { grid-template-columns: repeat(2, 1fr) 1.25fr }
.mega-inner--cols-1 { grid-template-columns: 1fr 1.25fr }

/* concept.css:1293 — .foot-cols{grid-template-columns:repeat(4,1fr)}
   concept.css:1432 collapses the band to two columns at 820px and below, which
   is right for any count, so these stop where that rule starts. */
@media (min-width: 821px) {
  .foot-cols--cols-3 { grid-template-columns: repeat(3, 1fr) }
  .foot-cols--cols-2 { grid-template-columns: repeat(2, 1fr) }
  .foot-cols--cols-1 { grid-template-columns: 1fr }
}

/* ============================================================
   `.search` IS TWO DIFFERENT THINGS AND THEY COLLIDE ON ONE PAGE
   ============================================================
   In the design, `.search` is the header's search pill — concept.css:111:

       .search{ position:relative; margin-left:auto; display:flex;
                align-items:center; gap:9px; background:var(--wash);
                border:1px solid transparent; border-radius:12px;
                padding:0 13px; height:40px; width:270px; ... }

   In WordPress, `search` is a BODY CLASS. body_class() prints
   `search search-results` on every native search-results page. So on
   /?s=anything the design's pill rule lands on <body> itself, and the whole
   document becomes a 270x40 flex row: every top-level block — the announcement
   bar, the header, <main>, the footer — turns into a shrink-to-fit flex item
   sitting side by side. Measured on /?s=abutment before this rule:
   document.body.scrollWidth 2353 against a 1440 viewport, body height 575,
   `.announce` 104px wide by 268 tall with its sentence wrapped one word per
   line, and the results themselves off-screen. The page is unusable.

   Nothing is wrong with either definition on its own, and neither is ours to
   change: concept.css is the design and is read-only, and WordPress is not
   going to stop writing that body class. So the collision is undone here, on
   the one element where the two meanings meet.

   Specificity: the design's rule is `.search` (0,1,0); `body.search` is
   (0,1,1) and wins without !important. `:focus-within` gets the same treatment
   because it widens and repaints the pill, and something on the page is nearly
   always focused — `.search:focus-within` is (0,2,0), `body.search:focus-within`
   is (0,2,1). Only <body> is touched: the real pill in the header keeps every
   rule the design gives it, on this page and on every other. */
body.search,
body.search:focus-within {
  display: block;
  position: static;
  width: auto;
  height: auto;
  margin-left: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: none;
  color: inherit;
}

/* ============================================================
   TWO-ROW DESKTOP HEADER

   The original 68px row asked the logo, six navigation targets, live search,
   wallet progress and cart to share 1,240px. Nothing was technically missing,
   but the two things customers use most — finding a part and understanding
   their credit — were reduced to status widgets. The first row now belongs to
   those tasks; navigation gets its own quieter row below it.
   ============================================================ */
@media (min-width: 1081px) {
  .nav-inner {
    display: block;
    height: auto;
  }

  .nav-top {
    display: grid;
    grid-template-columns: 210px minmax(360px, 1fr) minmax(232px, 252px) 52px;
    align-items: center;
    gap: 24px;
    min-height: 88px;
  }

  .nav-top .logo {
    display: inline-flex;
    align-items: center;
    width: fit-content;
  }

  .nav-top .logo img {
    width: 196px;
    height: auto;
  }

  .nav-top .search {
    width: 100%;
    height: 52px;
    margin-left: 0;
    padding: 0 16px;
    gap: 11px;
    border-color: var(--line);
    border-radius: 15px;
    background: var(--wash);
  }

  .nav-top .search:focus-within {
    width: 100%;
  }

  .nav-top .search input,
  .nav-top .typed {
    font-size: 15px;
  }

  .nav-top .typed {
    left: 45px;
    right: 52px;
  }

  .nav-top .kbd {
    padding: 4px 6px;
  }

  .nav-top .mchip {
    width: 100%;
    min-width: 0;
    min-height: 60px;
    gap: 12px;
    padding: 9px 15px 13px;
    border-radius: 15px;
    background: linear-gradient(148deg, #fff 0%, #f7fbf2 100%);
  }

  .nav-top .mchip-dot {
    width: 13px;
    height: 13px;
  }

  .nav-top .mchip-body {
    flex: 1;
    gap: 1px;
    line-height: 1.15;
  }

  .nav-top .mchip-kicker {
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
  }

  .nav-top .mchip-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
  }

  .nav-top .mchip-main b {
    color: var(--ink);
    font-size: 18px;
    font-weight: 680;
    letter-spacing: -.02em;
  }

  .nav-top .mchip-main em {
    overflow: hidden;
    color: var(--body);
    font-size: 11px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-top .mchip-goal {
    overflow: hidden;
    color: var(--muted);
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-top .mchip-bar {
    right: 15px;
    bottom: 7px;
    left: 15px;
    height: 4px;
  }

  .nav-top .mchip--guest {
    padding-bottom: 10px;
  }

  .nav-top .nav-cart {
    width: 52px;
    height: 52px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
  }

  .nav-top .nav-cart:hover {
    border-color: #cfd6da;
    box-shadow: var(--shadow);
  }

  .nav-top .nav-cart .badge {
    top: 5px;
    right: 5px;
  }

  .nav-bottom {
    display: flex;
    align-items: center;
    min-height: 49px;
    border-top: 1px solid var(--line);
  }

  .nav-bottom .menu {
    width: 100%;
    margin-left: -12px;
    gap: 4px;
  }

  .nav-bottom .menu-item {
    padding: 9px 13px;
  }

  .nav-bottom .menu-toggle::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 0 3px 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }

  .mega {
    top: calc(100% + 8px);
  }
}

/* One recognisable silhouette introduces each major category. Subcategories
   stay as full-width text links underneath it, so their names never surrender
   half of an already narrow column to a thumbnail. */
.mega-col .mega-category {
  display: grid;
  place-items: center;
  position: relative;
  height: 122px;
  margin: 0 8px 8px;
  padding: 8px 12px !important;
  overflow: hidden;
  border: 1px solid #e0e5e6;
  border-radius: 15px;
  background:
    radial-gradient(85% 52% at 50% 88%, rgba(63, 94, 38, .07) 0%, transparent 70%),
    linear-gradient(155deg, #fbfcfc 0%, #f2f5f5 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .95), 0 5px 14px rgba(17, 21, 23, .045);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}

.mega-col .mega-category:hover {
  border-color: #cad8bd;
  background:
    radial-gradient(85% 52% at 50% 88%, rgba(63, 94, 38, .1) 0%, transparent 70%),
    linear-gradient(155deg, #fff 0%, #f4f8f0 100%);
  box-shadow: inset 0 1px #fff, 0 10px 24px rgba(32, 54, 18, .09);
  transform: translateY(-2px);
}

.mega-col .mega-category__media {
  display: grid;
  place-items: center;
  position: relative;
  width: 100%;
  height: 104px;
  margin: 0;
  color: var(--green-ink);
  transition: transform .3s var(--ease);
}

.mega-category__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate(var(--media-x, 0), var(--media-y, 0)) scale(var(--media-scale, 1));
  transform-origin: center;
  filter: saturate(1.02) contrast(1.025);
}

.mega-category:hover .mega-category__media {
  transform: scale(1.025);
}

/* The source photographs have very different transparent canvases. These four
   values align the visible objects — not the PNG rectangles — to one optical
   baseline and one apparent height. */
.mega-category--screw { --media-scale: 1.50; --media-x: -4px; --media-y: 2px }
.mega-category--abutments { --media-scale: .91; --media-y: -1px }
.mega-category--tools { --media-scale: 1.07; --media-y: 1px }
.mega-category--digital { --media-scale: 1.05; --media-y: -1px }

/* Center the visible product bodies inside equal-height cards. Intrinsic PNG
   padding differs by category; scaling is based on the opaque product bounds. */
.quote-inner > h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.2; margin: 0 0 20px }
.quote-inner > p { max-width: 660px; margin: 0 auto 24px; font-size: 18px; line-height: 1.65 }

.mega-category--fallback .mega-category__media {
  border-radius: 10px;
  background: var(--green-soft);
}

.mega-subnav a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 50px;
  padding: 6px 10px;
  border-radius: 9px;
}

.mega-subnav a strong {
  line-height: 1.3;
  white-space: normal;
}

.mega-subnav a span {
  line-height: 1.35;
  white-space: normal;
}

/* At the narrow edge of desktop, five columns force product names into three
   lines. The two “Start here” links already exist in the main navigation, so
   they step aside here and the four shopping columns keep a useful measure. */
@media (min-width: 1081px) and (max-width: 1239px) {
  .mega-inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .mega-inner--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .mega-inner--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .mega-inner--cols-1 { grid-template-columns: minmax(0, 1fr) }

  .mega-promo {
    display: none;
  }
}

/* The whole card carries the member's metal — not only the 11px dot. Labels
   remain dark on the three light tiers; metal is used on surfaces and rules,
   preserving the contrast of the readable text. */
.mchip--bronze {
  --member-accent: #965722;
  --member-track: rgba(116, 61, 20, .18);
  --member-pill: #f0d0b0;
  --member-surface:
    linear-gradient(112deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .18) 22%, transparent 39%),
    linear-gradient(145deg, #fff6ed 0%, #dfb083 43%, #f1d2b2 68%, #bd7840 100%);
  border-color: #a9632b;
  background: var(--member-surface);
  box-shadow: inset 5px 0 0 var(--member-accent), inset 0 1px rgba(255, 255, 255, .72), 0 6px 18px rgba(117, 65, 25, .12);
}

.mchip--silver {
  --member-accent: #73736f;
  --member-track: rgba(80, 80, 76, .17);
  --member-pill: #dededb;
  --member-surface:
    linear-gradient(112deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .2) 21%, transparent 38%),
    linear-gradient(145deg, #fafaf9 0%, #c8c8c4 43%, #efefec 67%, #b4b4af 100%);
  border-color: #aaa9a4;
  background: var(--member-surface);
  box-shadow: inset 5px 0 0 var(--member-accent), inset 0 1px rgba(255, 255, 255, .9), 0 6px 18px rgba(63, 63, 60, .11);
}

.mchip--gold {
  --member-accent: #956508;
  --member-track: rgba(112, 72, 0, .2);
  --member-pill: #efd071;
  --member-surface:
    linear-gradient(112deg, rgba(255, 255, 255, .68) 0%, rgba(255, 255, 255, .12) 23%, transparent 40%),
    linear-gradient(145deg, #fff5cf 0%, #d0a02f 42%, #f0d16e 67%, #b87908 100%);
  border-color: #a8730d;
  background: var(--member-surface);
  box-shadow: inset 5px 0 0 var(--member-accent), inset 0 1px rgba(255, 255, 255, .7), 0 7px 20px rgba(121, 82, 7, .14);
}

.mchip--platinum {
  --member-accent: #d5dee5;
  --member-track: #37434c;
  --member-pill: rgba(255, 255, 255, .08);
  --member-surface:
    radial-gradient(85% 150% at 92% -30%, rgba(238, 246, 251, .2) 0%, transparent 48%),
    repeating-linear-gradient(118deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, #2b363e 0%, #11171b 58%, #070a0c 100%);
  border-color: #7a8994;
  background: var(--member-surface);
  box-shadow: inset 5px 0 0 #c8d2d9, inset 0 1px rgba(255, 255, 255, .22), 0 10px 28px rgba(9, 13, 16, .26);
}

.mchip--platinum::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 15px;
  left: 15px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #f5fafc 38%, #87949e 62%, transparent);
  opacity: .9;
}

.mchip--bronze .mchip-bar,
.mchip--silver .mchip-bar,
.mchip--gold .mchip-bar,
.mchip--platinum .mchip-bar {
  background: var(--member-track);
}

.mchip--bronze .mchip-bar i,
.mchip--silver .mchip-bar i,
.mchip--gold .mchip-bar i {
  background: var(--member-accent);
}

.mchip--platinum .mchip-bar i {
  background: linear-gradient(90deg, #7d8b96, #e2e9ee 55%, #a8b5bf);
}

.mchip--platinum .mchip-dot {
  background: #d5dee5 !important;
  box-shadow: 0 0 0 3px rgba(213, 222, 229, .16);
}

.mchip--platinum .mchip-body b {
  color: #f4f7f9;
}

.mchip--platinum .mchip-kicker,
.mchip--platinum .mchip-main em,
.mchip--platinum .mchip-goal {
  color: #b7c1c9;
}

.mchip--bronze .mchip-kicker,
.mchip--bronze .mchip-goal { color: #5b3c24 }
.mchip--silver .mchip-kicker,
.mchip--silver .mchip-goal { color: #41413f }
.mchip--gold .mchip-kicker,
.mchip--gold .mchip-goal { color: #493706 }

.mchip--platinum:focus-visible {
  outline-color: #e6edf2;
}

@media (min-width: 1081px) {
  .nav-top .mchip-main em {
    padding: 2px 7px;
    border: 1px solid color-mix(in srgb, var(--member-accent, #8a96a3) 30%, transparent);
    border-radius: 999px;
    background: var(--member-pill, var(--wash));
    color: var(--ink-2);
    font-weight: 600;
  }

  .nav-top .mchip.mchip--bronze,
  .nav-top .mchip.mchip--silver,
  .nav-top .mchip.mchip--gold,
  .nav-top .mchip.mchip--platinum {
    background: var(--member-surface);
  }
}


/* Keep the menu and search controls below WordPress's signed-in toolbar. */
.admin-bar .drawer,
.admin-bar .search.is-sheet {
  top: var(--wp-admin--admin-bar--height, 32px);
}

.admin-bar .search.is-sheet .sresults {
  top: calc(64px + var(--wp-admin--admin-bar--height, 32px));
}

/* The mobile header remains the intentionally compact, one-row app bar. */
@media (max-width: 1080px) {
  .nav-inner {
    display: block;
    height: auto;
  }

  .nav-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 60px;
  }

  .nav-bottom {
    display: none;
  }

  .nav-top .mchip-kicker,
  .nav-top .mchip-main em,
  .nav-top .mchip-goal {
    display: none;
  }

  .nav-top .mchip-main {
    display: block;
  }

  /* concept.css hides every span in the compact chip. The redesigned value is
     itself wrapped in a span, so restore that one wrapper and keep its extras
     hidden; signed-in customers still see their balance on a phone. */
  .nav-top .mchip .mchip-body .mchip-main {
    display: block;
  }
}

/* Keep the announcement readable on the narrowest phones. */
@media (max-width: 360px) {
  .announce { white-space: normal; }
}

/* The duplicate-post shortcut is an icon on mobile. Preserve its accessible
   name without letting the plugin's text widen the signed-in page. */
@media (max-width: 782px) {
  #wpadminbar #wp-admin-bar-duplicate-post .ab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Keep all six admin shortcuts on one row on 320px screens. */
@media (max-width: 360px) {
  #wpadminbar #wp-admin-bar-root-default > li > .ab-item,
  #wpadminbar #wp-admin-bar-my-account > .ab-item {
    width: 44px;
  }
  #wpadminbar #wp-admin-bar-root-default > li > .ab-item .ab-icon {
    width: 44px;
    text-align: center;
  }
}