/* ==========================================================================
   AVE Trade — UI revamp, OPTION B
   From "AVE Trade Revamp.dc.html" (Host Grotesk direction).

   The approved direction. layout/users.blade.php loads avetrade-ui.css first
   (shared tokens and components, tuned to match this) and then this file, which
   adds the shell — header, nav, footer — and the home page's own components.

   Character: Host Grotesk throughout, 2px radii, open borderless tiles
   separated by hairline rules, warm paper, and #ef2b07 as the action colour
   with #ff6833 as its hover.
   ========================================================================== */

:root {
  /* Colour ------------------------------------------------------------- */
  --b-ink: #17181a;          /* headings, primary text        */
  --b-ink-2: #57544d;        /* body copy                     */
  --b-sub: #7a766e;          /* secondary text                */
  --b-faint: #a3a09a;        /* captions, meta                */
  --b-paper: #fbfaf8;        /* page background               */
  --b-surface: #ffffff;
  --b-line: #e6e2db;         /* hairlines                     */
  --b-line-2: #efece6;       /* lighter rule                  */
  --b-action: #ef2b07;       /* primary action                */
  --b-action-hover: #ff6833;
  --b-orange: #ff6833;       /* brand highlight               */
  --b-ink-panel: #212327;    /* inset panel on dark           */
  --b-on-dark: #fbfaf8;
  --b-on-dark-dim: #b0aba0;
  --b-ok: #1a7a43;
  --b-warn: #8a5a00;
  --b-err: #b3261e;

  --b-font: 'Host Grotesk', 'Inter', system-ui, sans-serif;
  --b-radius: 2px;
  --b-control-h: 48px;
  --b-touch-h: 44px;
  --b-gutter: 48px;
}

@media (max-width: 991.98px) { :root { --b-gutter: 16px; } }

/* ==========================================================================
   Base
   ========================================================================== */

body {
  font-family: var(--b-font);
  background: var(--b-paper);
  color: var(--b-ink-2);
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--b-font);
  color: var(--b-ink);
  letter-spacing: -.01em;
  margin: 0;
}
h1 { font-size: 60px; font-weight: 700; line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: 30px; font-weight: 600; }
h3 { font-size: 26px; font-weight: 600; }
h4 { font-size: 20px; font-weight: 600; }

@media (max-width: 991.98px) {
  h1 { font-size: 38px; line-height: 1.04; }
  h2 { font-size: 22px; }
  h3 { font-size: 20px; }
}

a { color: var(--b-action); text-decoration: none; }
a:hover { color: var(--b-action-hover); }

.b-sub     { color: var(--b-sub); }
.b-meta    { font-size: 13px; color: var(--b-sub); }
.b-caption { font-size: 12px; color: var(--b-faint); }
.b-eyebrow {
  font-size: 13px; font-weight: 600; color: var(--b-orange); letter-spacing: .02em;
}
.b-label-up {
  font-size: 12px; color: var(--b-faint);
  letter-spacing: .04em; text-transform: uppercase;
}
.b-num { font-variant-numeric: tabular-nums; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--b-action);
  outline-offset: 2px;
}

/* ==========================================================================
   Header — keeps the original site's solid #ff6833 band.

   The original paired that orange with white text (2.85:1, fails AA), so the
   band here carries INK text and the black logo instead: #17181a on #ff6833 is
   6.4:1, which passes AA while keeping the brand colour people recognise.
   ========================================================================== */

.b-header { background: var(--b-surface); }

.b-header-band {
  background: var(--b-orange);
  color: #fff;
}
.b-header-band-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px var(--b-gutter);
  font-size: 13px;
  font-weight: 500;
  flex-wrap: wrap;
}
.b-header-band a { color: #fff; font-weight: 600; }
.b-header-band a:hover { color: #fff; text-decoration: underline; }
.b-header-band-links { margin-left: auto; display: flex; gap: 22px; }

.b-header-main {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px var(--b-gutter);
}
.b-logo { height: 26px; width: auto; display: block; }

/* Underline search, per the concept */
.b-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1.5px solid var(--b-ink);
  max-width: 440px;
  padding-bottom: 8px;
}
.b-search input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 15px;
  outline: none;
  color: var(--b-ink);
  font-family: inherit;
  padding: 0;
  height: auto;
}
.b-search input::placeholder { color: var(--b-faint); }
.b-search button {
  border: 0;
  background: none;
  color: var(--b-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 2px;
  font-family: inherit;
}
.b-search button:hover { color: var(--b-action); }

.b-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
}
.b-header-link { color: var(--b-ink-2); }
.b-header-link:hover { color: var(--b-ink); }

/* Icon-only header action (sign in), sized to match the cart button */
.b-header-icon {
  color: var(--b-ink-2);
  align-items: center; justify-content: center;
  width: var(--b-touch-h); height: var(--b-touch-h);
}
.b-header-icon:hover { color: var(--b-ink); }
.b-header-icon .material-icons-round { font-size: 22px; }

/* Location picker, drawn as plain text with the orange dot */
.b-location { display: flex; align-items: center; gap: 7px; color: var(--b-ink); }
.b-dot {
  width: 7px; height: 7px; background: var(--b-orange);
  border-radius: 50%; display: block; flex-shrink: 0;
}
.b-location-select {
  border: 0; background: transparent; padding: 0 16px 0 0;
  height: auto; width: auto;
  font-family: inherit; font-size: 14px; font-weight: 500; color: var(--b-ink);
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2317181a'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center; background-size: 14px;
}

/* Cart — ink block, not red */
.b-cart {
  display: flex; align-items: center; gap: 8px;
  background: var(--b-orange); color: #fff;
  padding: 11px 16px; border-radius: var(--b-radius);
  font-size: 14px; font-weight: 500;
}
.b-cart:hover { background: var(--b-action); color: #fff; }
.b-cart-count { font-size: 12px; opacity: .75; font-variant-numeric: tabular-nums; }
.b-cart-count:empty { display: none; }

/* Primary nav — hairline rule, orange underline on hover/active */
.b-nav {
  display: flex;
  gap: 32px;
  padding: 0 var(--b-gutter);
  border-top: 1px solid var(--b-line);
  border-bottom: 1px solid var(--b-line);
  align-items: center;
  flex-wrap: wrap;
}
.b-nav-link {
  font-size: 15px; font-weight: 500;
  padding: 15px 0;
  color: var(--b-ink);
  border-bottom: 2px solid transparent;
}
.b-nav-link:hover { color: var(--b-ink); border-bottom-color: var(--b-orange); }
.b-nav-link.is-active { border-bottom-color: var(--b-orange); }
.b-nav-secondary {
  margin-left: auto; display: flex; gap: 26px;
  font-size: 14px; color: var(--b-sub); align-items: center;
}
.b-nav-secondary a { color: var(--b-sub); }
.b-nav-secondary a:hover { color: var(--b-ink); }

/* Mobile header */
.b-header-mobile-row {
  display: none;
  align-items: center; justify-content: space-between;
  padding: 10px 16px;
}
.b-icon-btn {
  width: var(--b-touch-h); height: var(--b-touch-h);
  border: 0; background: none; color: var(--b-ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 991.98px) {
  .b-header-main { flex-wrap: wrap; padding: 10px 16px 14px; gap: 12px; }
  .b-header-mobile-row { display: flex; }
  .b-header-main .b-logo { height: 20px; }
  .b-search { max-width: none; flex-basis: 100%; order: 3; }
  .b-search input { font-size: 16px; }
  .b-header-actions { margin-left: auto; gap: 14px; }
  .b-nav { display: none; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.b-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: inherit; font-size: 15px; font-weight: 600;
  padding: 15px 28px;
  border-radius: var(--b-radius);
  border: 0; cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.b-btn-primary { background: var(--b-action); color: #fff; }
.b-btn-primary:hover { background: var(--b-action-hover); color: #fff; }

.b-btn-outline {
  background: transparent; color: var(--b-ink);
  border: 1px solid var(--b-ink);
}
.b-btn-outline:hover { background: var(--b-ink); color: #fff; }

.b-btn-sm { padding: 11px 18px; font-size: 14px; }
.b-btn-block { width: 100%; }
.b-btn:disabled { background: var(--b-line); color: var(--b-faint); cursor: not-allowed; }

/* ==========================================================================
   Sections
   ========================================================================== */

.b-section { padding: 60px var(--b-gutter) 0; }
.b-section-last { padding-bottom: 60px; }
.b-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
@media (max-width: 991.98px) {
  .b-section { padding: 32px 16px 0; }
  .b-section-last { padding-bottom: 32px; }
}

/* Hero */
.b-hero {
  padding: 64px var(--b-gutter) 56px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.b-hero-copy { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.b-hero-copy p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--b-ink-2); max-width: 44ch; }
.b-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.b-hero-media {
  min-height: 420px;
  background: repeating-linear-gradient(135deg, #f0ede7 0 12px, #e8e4dc 12px 24px);
  border-radius: var(--b-radius);
  overflow: hidden;
}
.b-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 420px; }
@media (max-width: 991.98px) {
  .b-hero { grid-template-columns: 1fr; gap: 24px; padding: 28px 16px 32px; }
  .b-hero-media, .b-hero-media img { min-height: 220px; }
}

/* Promise strip — four columns divided by hairlines */
.b-promises {
  border-top: 1px solid var(--b-line);
  border-bottom: 1px solid var(--b-line);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.b-promise {
  padding: 24px 28px;
  border-right: 1px solid var(--b-line);
  display: flex; flex-direction: column; gap: 5px;
}
.b-promise:last-child { border-right: 0; }
.b-promise-t { font-size: 16px; font-weight: 600; color: var(--b-ink); }
.b-promise-b { font-size: 13px; color: var(--b-sub); line-height: 1.5; }
@media (max-width: 991.98px) {
  .b-promises { grid-template-columns: 1fr 1fr; }
  .b-promise { padding: 16px; }
  .b-promise:nth-child(2n) { border-right: 0; }
  .b-promise:nth-child(-n+2) { border-bottom: 1px solid var(--b-line); }
}

/* ==========================================================================
   Category tiles — image over a rule, no card chrome
   ========================================================================== */

.b-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.b-cat { display: flex; flex-direction: column; gap: 14px; color: var(--b-ink); }
.b-cat:hover { color: var(--b-ink); }
.b-cat-media {
  height: 230px;
  background: repeating-linear-gradient(135deg, #f0ede7 0 10px, #e8e4dc 10px 20px);
  border-radius: var(--b-radius);
  overflow: hidden;
  display: block;
}
.b-cat-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-cat-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  border-top: 1px solid var(--b-ink);
  padding-top: 10px;
  transition: border-color .12s ease;
}
.b-cat:hover .b-cat-foot { border-top-color: var(--b-orange); }
.b-cat-name { font-size: 20px; font-weight: 600; color: var(--b-ink); }
@media (max-width: 991.98px) {
  .b-cat-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .b-cat-media { height: 140px; }
  .b-cat-name { font-size: 16px; }
}
/* Two tiles per row leaves no room for the trailing meta — drop it. */
@media (max-width: 767.98px) { .b-cat-foot .b-meta { display: none; } }

/* ==========================================================================
   Product tiles — open, no border, outline "Add to order"
   ========================================================================== */

.b-prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.b-prod { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.b-prod-media {
  height: 230px;
  background: repeating-linear-gradient(135deg, #f0ede7 0 10px, #e8e4dc 10px 20px);
  border-radius: var(--b-radius);
  overflow: hidden;
  display: block;
}
.b-prod-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-prod-name {
  font-size: 16px; font-weight: 500; line-height: 1.3;
  color: var(--b-ink); min-height: 42px;
}
a.b-prod-name:hover { color: var(--b-action); }
.b-prod-price-row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.b-prod-price {
  font-size: 24px; font-weight: 600; color: var(--b-ink);
  font-variant-numeric: tabular-nums;
}
.b-prod-was {
  font-size: 12px; color: var(--b-faint);
  text-decoration: line-through; font-variant-numeric: tabular-nums;
}
.b-prod-note { font-size: 12px; color: var(--b-faint); }
.b-prod .b-btn { margin-top: auto; }
@media (max-width: 1199.98px) { .b-prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991.98px) {
  .b-prod-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .b-prod-media { height: 150px; }
}

/* Slick inside the featured rail */
.b-card-slider { margin: 0 -10px; }
.b-card-slider .slick-track { display: flex; align-items: stretch; }
.b-card-slider .slick-slide { height: auto; padding: 0 10px; }
.b-card-slider .slick-slide > div,
.b-card-slider .product-item { height: 100%; }

/* ==========================================================================
   Two-up panel row: dark quick-look + location detail
   ========================================================================== */

.b-panels {
  padding: 40px var(--b-gutter);
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 20px;
  align-items: stretch;
}
.b-panel-dark {
  background: var(--b-ink); color: var(--b-on-dark);
  padding: 28px; border-radius: var(--b-radius);
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.b-panel-dark h3 { color: #fff; font-size: 24px; line-height: 1.15; }
.b-panel-dark p { margin: 0; font-size: 14px; color: var(--b-on-dark-dim); line-height: 1.6; max-width: 46ch; }
/* Button sits at the foot of the card, whatever the copy above it does */
.b-panel-dark .b-btn { margin-top: auto; }
.b-panel-code {
  background: var(--b-ink-panel);
  padding: 14px;
  font-size: 13px; color: #c6c1b6; line-height: 1.9;
  width: 100%;
  font-variant-numeric: tabular-nums;
}
.b-panel-light {
  border: 1px solid var(--b-line);
  padding: 28px; border-radius: var(--b-radius);
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  min-height: 0;
  background: var(--b-surface);
}
.b-kv {
  display: flex; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--b-line-2);
  padding-bottom: 9px; font-size: 14px; width: 100%;
}

/* Location panel — data only, no labels */
.b-loc-lines {
  display: flex; flex-direction: column; gap: 7px; width: 100%;
  font-size: 14px; line-height: 1.5;
}
.b-loc-line { color: var(--b-ink); }
a.b-loc-line:hover { text-decoration: underline; }
.b-kv span:first-child { color: var(--b-sub); }
.b-kv span:last-child { color: var(--b-ink); font-weight: 500; }
/* Reviews panel — narrow column, so it sets its own rhythm */
.b-panel-reviews { justify-content: flex-start; height: 100%; min-height: 0; }
.b-review-head { font-size: 20px; line-height: 1.2; margin: 0; }
.b-review-blurb { margin: 0; font-size: 14px; color: var(--b-sub); line-height: 1.6; }
.b-review-score { display: flex; align-items: center; gap: 10px; }
.b-review-stars { display: inline-flex; color: var(--b-orange); }
/* Remainder stays a filled glyph, just muted — no outline/filled mix */
.b-review-stars .is-empty { color: var(--b-line); }
/* style.css renders .material-icons-round via Material Symbols Rounded, whose
   FILL axis the layout requests as 0..1. Icons stay outline by default; stars
   opt into the solid glyph here. Scoped, so no other icon changes. */
.b-review-stars .material-icons-round {
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  font-size: 20px;
}
.b-review-num { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.b-review-stars-sm .material-icons-round { font-size: 14px; }
.b-review-list {
  list-style: none; margin: 0; padding: 0 8px 0 0; width: 100%;
  display: flex; flex-direction: column; gap: 14px;
  /* flex-basis 0 + min-height 0 keeps this out of the grid row's height
     calculation, so the panel matches its siblings and scrolls instead. */
  flex: 1 1 0; min-height: 0; overflow-y: auto;
  scrollbar-width: thin;
}
.b-review-list::-webkit-scrollbar { width: 6px; }
.b-review-list::-webkit-scrollbar-thumb {
  background: var(--b-line); border-radius: 3px;
}
.b-panel-reviews .b-btn { margin-top: auto; flex-shrink: 0; }
.b-review-item {
  display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid var(--b-line-2); padding-top: 12px;
}
.b-review-item:first-child { border-top: 0; padding-top: 0; }
.b-review-text {
  margin: 0; font-size: 13px; line-height: 1.55; color: var(--b-ink);
}
.b-review-by { font-size: 12px; color: var(--b-sub); }

/* The two narrow panels drop under the search panel before going single-column */
@media (max-width: 1199.98px) {
  .b-panels { grid-template-columns: 1fr 1fr; }
  .b-panel-dark { grid-column: 1 / -1; }
}
@media (max-width: 991.98px) {
  .b-panels { grid-template-columns: 1fr; padding: 28px 16px; }
  .b-panel-dark, .b-panel-light { padding: 22px; }
  .b-panel-dark { grid-column: auto; }
  /* Stacked, there is no sibling to borrow height from — cap it instead */
  .b-panel-reviews { height: auto; }
  .b-review-list { max-height: 260px; }
}

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

.b-footer { background: var(--b-ink); color: var(--b-on-dark-dim); }
.b-footer a { color: var(--b-on-dark-dim); }
.b-footer a:hover { color: #fff; }
.b-footer-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
  padding: 48px var(--b-gutter) 36px;
}
.b-footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.b-footer-head { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.b-footer-blurb { margin: 0; font-size: 14px; line-height: 1.6; max-width: 44ch; }
.b-footer-bottom {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 18px var(--b-gutter);
  border-top: 1px solid #2b2d31;
  font-size: 13px;
}
.b-footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
@media (max-width: 991.98px) {
  .b-footer-top { grid-template-columns: 1fr 1fr; gap: 24px; padding: 32px 16px 24px; }
  .b-footer-bottom { flex-direction: column; padding: 18px 16px; }
}
@media (max-width: 575.98px) { .b-footer-top { grid-template-columns: 1fr; } }

/* ==========================================================================
   Empty state, modal, side nav
   ========================================================================== */

.b-empty {
  border: 1px solid var(--b-line);
  background: var(--b-surface);
  border-radius: var(--b-radius);
  padding: 40px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}

#locationModal .modal-content {
  border: 1px solid var(--b-line);
  border-radius: var(--b-radius);
  background: var(--b-surface);
}

/* Reuses the existing openNav()/closeNav() width animation from script.js */
.sidenav {
  background: var(--b-surface); padding-top: 0;
  /* No border-right: the drawer sits at left:0 with width:0 when closed, so a
     border would still paint a 1px hairline down the whole viewport (above the
     footer, at z-index 4). The hairline goes on ::after instead, which the
     existing overflow-x:hidden clips away while the drawer is collapsed. */
  border-right: 0;
}
.sidenav::after {
  content: ""; position: absolute; top: 0; right: 0;
  width: 1px; height: 100%; background: var(--b-line);
}
.sidenav a:not(.closebtn) {
  font-family: var(--b-font); font-size: 16px; font-weight: 500;
  color: var(--b-ink); padding: 13px 20px; display: flex; align-items: center;
}
.sidenav a:not(.closebtn):hover { background: var(--b-paper); }
.sidenav .dropdown-btn {
  font-family: var(--b-font); font-size: 16px; font-weight: 500; color: var(--b-ink);
  background: none; border: 0; width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 20px; cursor: pointer;
}
.sidenav .dropdown-container { background: var(--b-paper); }
.sidenav .dropdown-container a { font-size: 15px; color: var(--b-ink-2); padding-left: 32px; }
.sidenav a.closebtn { padding: 12px 16px; display: inline-flex; color: var(--b-ink); }
.sidenav hr { border-color: var(--b-line); opacity: 1; margin: 8px 0; }

.b-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--b-ink); color: #fff; padding: 12px 16px; z-index: 1100;
}
.b-skip:focus { left: 0; color: #fff; }

/* style.css offsets <main> for the old fixed header; not needed here. */
#ave-main { margin-top: 0; }