/* ==========================================================================
   DEXIE - homepage band, navigation, trust row, brand accordion
   Loaded last so it settles anything earlier.
   ========================================================================== */

/* ---------- 1. navigation: ink bar, legible labels ---------------------- */
/* The Bootstrap bg-primary class was setting a background whose contrast with
   the link colour was effectively nil. The nav is now an ink bar with white
   labels, which also gives the page a firm horizontal edge under the header. */
#menu.dx-nav,
nav#menu {
  background: var(--ink) !important;
  border-bottom: 0;
}
#menu.dx-nav .nav-link,
nav#menu .nav-link {
  color: rgba(255, 255, 255, .82) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 15px 18px 15px 0;
  margin-right: 10px;
  position: relative;
}
#menu.dx-nav .nav-link:hover,
#menu.dx-nav .nav-link:focus,
nav#menu .nav-link:hover {
  color: #fff !important;
}
#menu.dx-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 10px; bottom: 9px;
  height: 1px;
  background: var(--accent-lift);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s cubic-bezier(.16,.84,.44,1);
}
#menu.dx-nav .nav-link:hover::after { transform: scaleX(1); }
#menu.dx-nav .dropdown-menu { background: var(--surface); }
#menu.dx-nav .navbar-toggler { color: #fff; border-color: rgba(255,255,255,.3); }

/* The mobile bar carries no label of its own now, so the toggler sits alone. */
@media (max-width: 991px) {
  #menu.dx-nav { padding-block: 4px; }
}

/* ---------- 2. hero band layout ----------------------------------------- */
/* One 1600x900 beside two stacked 800x450. The slider is the height driver
   and the panel column stretches to it, so both outer edges stay flush
   however the container width lands. */
.dx-heroband {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 992px) {
  .dx-heroband { grid-template-columns: 2fr 1fr; align-items: stretch; }
}

.dx-promos {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 992px) { .dx-promos { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } }
@media (max-width: 575px)  { .dx-promos { grid-template-columns: 1fr; } }

/* ---------- 3. hero slider ---------------------------------------------- */
.dx-hero {
  position: relative;
  background: var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
}
.dx-hero__track {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 620px;
}
@media (max-width: 767px) { .dx-hero__track { aspect-ratio: 4 / 3; max-height: none; } }

.dx-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity .62s cubic-bezier(.16,.84,.44,1), visibility 0s linear .62s;
}
.dx-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .62s cubic-bezier(.16,.84,.44,1);
}

/* The image drifts slowly while its slide is showing - enough to feel alive,
   not enough to notice as an effect. */
.dx-slide__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 7s linear;
}
.dx-slide.is-active .dx-slide__img { transform: scale(1); }

.dx-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10,16,24,.86) 0%, rgba(10,16,24,.55) 46%, rgba(10,16,24,.12) 100%);
}

.dx-slide__dim {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 3;
  font-size: 10px;
  letter-spacing: .12em;
  font-weight: 700;
  color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.1);
  border: 1px dashed rgba(255,255,255,.35);
  padding: 5px 10px;
}

.dx-slide__body {
  position: relative;
  z-index: 2;
  padding: 0 0 clamp(30px, 4.4vw, 60px) clamp(20px, 3.6vw, 52px);
  max-width: 40rem;
  color: #fff;
}

/* Entry: each line arrives on its own clock once its slide becomes active,
   so the eye is led down the block rather than hit with all of it at once.

   Scoped to .dx-hero on purpose. These selectors used to be unscoped, which
   set opacity:0 on every .dx-slide__btn on the page - including the one in
   the trade panel further down, which was rendering invisible. */
.dx-hero .dx-slide__eyebrow,
.dx-hero .dx-slide__title,
.dx-hero .dx-slide__text,
.dx-hero .dx-slide__btn {
  opacity: 0;
  transform: translateY(22px);
}
.dx-slide.is-active .dx-slide__eyebrow,
.dx-slide.is-active .dx-slide__title,
.dx-slide.is-active .dx-slide__text,
.dx-slide.is-active .dx-slide__btn {
  animation: dxRise .7s cubic-bezier(.16,.84,.44,1) forwards;
}
.dx-slide.is-active .dx-slide__eyebrow { animation-delay: .08s; }
.dx-slide.is-active .dx-slide__title   { animation-delay: .22s; }
.dx-slide.is-active .dx-slide__text    { animation-delay: .40s; }
.dx-slide.is-active .dx-slide__btn     { animation-delay: .58s; }

@keyframes dxRise { to { opacity: 1; transform: none; } }

/* A rule draws itself under the eyebrow, on its own delay again. */
.dx-slide__eyebrow {
  position: relative;
  font-size: 10.5px; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: var(--accent-lift); margin: 0 0 14px;
  padding-bottom: 10px;
}
.dx-slide__eyebrow::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 46px; height: 2px;
  background: var(--accent-lift);
  transform: scaleX(0);
  transform-origin: left;
}
.dx-slide.is-active .dx-slide__eyebrow::after {
  animation: dxWipe .5s cubic-bezier(.16,.84,.44,1) .34s forwards;
}
@keyframes dxWipe { to { transform: scaleX(1); } }

.dx-slide__title {
  font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 3.3rem);
  line-height: .95;
  letter-spacing: -.05em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: #fff;
  text-wrap: balance;
}
.dx-slide__text {
  font-size: 14.5px; line-height: 1.55; margin: 0 0 24px;
  color: rgba(255,255,255,.78); max-width: 36ch;
}
.dx-slide__btn {
  display: inline-block;
  background: #fff; color: var(--ink);
  border: 1px solid #fff; border-radius: var(--radius);
  font-size: 11.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; padding: 14px 30px; text-decoration: none;
  transition: background .16s, color .16s;
}
.dx-slide__btn:hover { background: transparent; color: #fff; }

/* ---------- 4. hero controls -------------------------------------------- */
.dx-hero__nav {
  position: absolute;
  right: clamp(18px, 3vw, 34px); bottom: clamp(20px, 3vw, 32px);
  z-index: 4;
  display: flex; gap: 8px;
}
.dx-hero__dot {
  width: 26px; height: 3px;
  background: rgba(255,255,255,.32);
  border: 0; padding: 0; cursor: pointer;
  transition: background .2s;
}
.dx-hero__dot.is-active { background: var(--accent-lift); }

.dx-hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 4;
  width: 42px; height: 42px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff; cursor: pointer;
  opacity: 0;
  transition: background .18s, border-color .18s, opacity .2s;
}
.dx-hero:hover .dx-hero__arrow,
.dx-hero:focus-within .dx-hero__arrow { opacity: 1; }
.dx-hero__arrow:hover { background: rgba(255,255,255,.22); border-color: #fff; }
.dx-hero__arrow--prev { left: clamp(10px, 1.4vw, 16px); }
.dx-hero__arrow--next { right: clamp(10px, 1.4vw, 16px); }
@media (max-width: 991px) { .dx-hero__arrow { display: none; } }

/* ---------- 5. the two 800x450 panels ----------------------------------- */
.dx-promo {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ink);
  border-radius: var(--radius);
  text-decoration: none;
  min-height: 168px;
  isolation: isolate;
}
@media (max-width: 991px) { .dx-promo { aspect-ratio: 16 / 9; min-height: 0; } }

.dx-promo__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .7s cubic-bezier(.16,.84,.44,1);
}
.dx-promo:hover .dx-promo__img { transform: scale(1.07); }

.dx-promo::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,16,24,.10) 0%, rgba(10,16,24,.78) 100%);
  transition: background .3s;
}
.dx-promo:hover::after {
  background: linear-gradient(180deg, rgba(10,16,24,.24) 0%, rgba(10,16,24,.86) 100%);
}

.dx-promo__body {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  padding: clamp(18px, 2.2vw, 28px);
  color: #fff;
}
.dx-promo__eyebrow {
  display: block;
  font-size: 9.5px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent-lift); margin-bottom: 9px;
}
.dx-promo__title {
  display: block;
  font-weight: 800; font-size: clamp(1.05rem, 1.6vw, 1.42rem);
  line-height: 1.02; letter-spacing: -.035em; text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
}
.dx-promo__cta {
  display: inline-block;
  margin-top: 16px;
  border: 1px solid #fff; background: #fff; color: var(--ink);
  border-radius: var(--radius);
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; padding: 12px 22px;
  transition: background .16s, color .16s;
}
.dx-promo:hover .dx-promo__cta { background: transparent; color: #fff; }

/* Without artwork the panel is a light card with a solid button, so it reads
   as a deliberate design rather than as a hole waiting for an image. Once a
   banner is uploaded the dark treatment above takes over unchanged. */
.dx-promo--empty {
  background: var(--surface-2);
  border: 1px solid var(--rule);
}
.dx-promo--empty::after { content: none; }
.dx-promo--empty .dx-promo__eyebrow { color: var(--ink-3); }
.dx-promo--empty .dx-promo__title   { color: var(--ink); }
.dx-promo--empty .dx-promo__cta {
  background: var(--ink); border-color: var(--ink); color: var(--accent-ink);
}
.dx-promo--empty:hover .dx-promo__cta { background: transparent; color: var(--ink); }

.dx-promo__dim {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  font-size: 9.5px; letter-spacing: .12em; font-weight: 700;
  color: var(--ink-3);
  background: var(--surface);
  border: 1px dashed var(--rule-2);
  padding: 4px 8px;
}

/* Entry: the two panels arrive a beat after the slider, one after the other.
   dexie.js adds .dx-reveal / .is-in; these are the per-panel offsets. */
.dx-promos > *:nth-child(1) { transition-delay: .10s; }
.dx-promos > *:nth-child(2) { transition-delay: .20s; }

/* ---------- 6. trade panel, with optional background image -------------- */
/* The image is carried on a custom property set by the template, so the
   panel works identically whether or not a banner has been uploaded. */
.dx-tradecta { position: relative; overflow: hidden; isolation: isolate; }
.dx-tradecta.has-image::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background-image: var(--dx-trade-img);
  background-size: cover;
  background-position: center;
}
.dx-tradecta.has-image::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(10,16,24,.93) 0%, rgba(10,16,24,.74) 52%, rgba(10,16,24,.42) 100%);
}

/* ---------- 7. the four-point trust row ---------------------------------- */
/* Directly under the banner band, because these are the four things a
   first-time visitor needs settled before they will look at a price. */
.dx-trust {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .dx-trust { grid-template-columns: repeat(2, 1fr); } }
/* Column flow rather than a fixed count, so the row is always exactly as wide
   as the container however many points are being made. A fixed count is what
   left an empty slot in the category row. */
@media (min-width: 1000px) { .dx-trust { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; } }

.dx-trust__item {
  background: var(--surface);
  padding: 26px 24px 28px;
  border-top: 2px solid transparent;
  transition: border-color .22s, background .22s;
}
.dx-trust__item:hover { border-top-color: var(--accent); background: var(--ground); }
.dx-trust__item h4 {
  font-size: 12.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink); margin: 0 0 10px;
}
.dx-trust__item p {
  margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
}

/* ---------- 8. category tiles fill their row ---------------------------- */
/* The grid was a fixed six columns. With five categories that left a sixth
   column of empty space on the right, which read as a missing box. Laying
   the children out as columns instead means the row is always exactly as
   wide as the container, whatever the catalogue is doing. */
@media (min-width: 780px) {
  .dx-tiles {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

/* Two up on a phone, so an odd number of categories leaves a half-empty last
   row. The odd one out takes the whole row instead of trailing a gap. */
@media (max-width: 779px) {
  .dx-tiles > :last-child:nth-child(odd) { grid-column: span 2; }
}

/* ---------- 9. brand accordion ------------------------------------------ */
/* A fixed grid says "we stock this many brands". The accordion says "there
   is more behind this", and gives each house a moment of its own: the open
   panel steps along on its own clock, and pointing at one takes that over. */
.dx-acc {
  display: flex;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  height: 236px;
}

.dx-acc__panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  background: var(--surface);
  text-decoration: none;
  overflow: hidden;
  transition: flex-grow .58s cubic-bezier(.16,.84,.44,1), background .3s;
}
.dx-acc__panel.is-open { flex-grow: 3.1; background: var(--ground); }

.dx-acc__logo {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 22px 10px;
  transition: transform .58s cubic-bezier(.16,.84,.44,1);
}
.dx-acc__panel.is-open .dx-acc__logo { transform: translateY(-16px); }

.dx-acc__logo img {
  max-width: 88%; max-height: 60px;
  width: auto; height: auto;
  filter: grayscale(1) contrast(.85);
  opacity: .5;
  mix-blend-mode: multiply;
  transition: filter .34s, opacity .34s, transform .58s cubic-bezier(.16,.84,.44,1);
}
.dx-acc__panel.is-open .dx-acc__logo img { filter: none; opacity: 1; transform: scale(1.06); }

.dx-acc__meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 16px 20px;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s .1s, transform .42s cubic-bezier(.16,.84,.44,1) .1s;
  pointer-events: none;
}
.dx-acc__panel.is-open .dx-acc__meta { opacity: 1; transform: none; }

.dx-acc__name {
  display: block;
  font-size: 13px; font-weight: 800; letter-spacing: -.01em;
  text-transform: uppercase; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dx-acc__cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
  white-space: nowrap;
}
.dx-acc__cta i { transition: transform .3s cubic-bezier(.16,.84,.44,1); }
.dx-acc__panel:hover .dx-acc__cta i { transform: translateX(5px); }

/* The last panel is the way out to everything not shown. */
.dx-acc__panel--all { background: var(--surface-2); }
.dx-acc__panel--all.is-open { background: var(--ink); }
.dx-acc__panel--all.is-open .dx-acc__name { color: var(--accent-ink); }
.dx-acc__plus {
  font-size: 34px; font-weight: 300; line-height: 1;
  color: var(--rule-2);
  transition: color .34s, transform .58s cubic-bezier(.16,.84,.44,1);
}
.dx-acc__panel--all.is-open .dx-acc__plus { color: var(--accent); transform: rotate(90deg); }

/* On a phone the accordion has nowhere to expand into, so it becomes a row
   to swipe with every brand already legible. */
@media (max-width: 767px) {
  .dx-acc { height: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dx-acc__panel { flex: 0 0 138px; height: 156px; }
  .dx-acc__panel.is-open { flex-grow: 0; background: var(--surface); }
  .dx-acc__logo { position: static; height: 104px; padding: 18px 12px 6px; transform: none; }
  .dx-acc__panel.is-open .dx-acc__logo { transform: none; }
  .dx-acc__logo img { filter: none; opacity: 1; max-height: 46px; }
  .dx-acc__panel.is-open .dx-acc__logo img { transform: none; }
  .dx-acc__meta { position: static; opacity: 1; transform: none; padding: 0 10px 16px; }
  .dx-acc__cta { display: none; }
  .dx-acc__name { font-size: 11px; }
  .dx-acc__panel--all.is-open { background: var(--surface-2); }
  .dx-acc__panel--all.is-open .dx-acc__name { color: var(--ink); }
}

/* Two links can sit in one section head. */
.dx-sechead__links { display: flex; align-items: center; gap: 18px; }
.dx-sechead__link--accent { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- 10. wholesale page ------------------------------------------- */
.dx-wsband {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--hero-wash);
  border-radius: var(--radius);
  color: #fff;
  padding: clamp(34px, 5vw, 74px) clamp(22px, 4vw, 62px);
}
.dx-wsband.has-image::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background-image: var(--dx-ws-img);
  background-size: cover; background-position: center;
}
.dx-wsband.has-image::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(10,16,24,.93) 0%, rgba(10,16,24,.76) 54%, rgba(10,16,24,.44) 100%);
}

.dx-wsband__eyebrow {
  position: relative;
  font-size: 10.5px; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: var(--accent-lift);
  margin: 0 0 16px; padding-bottom: 10px;
}
.dx-wsband__eyebrow::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 46px; height: 2px; background: var(--accent-lift);
}
.dx-wsband__title {
  font-weight: 800;
  font-size: clamp(1.9rem, 4.4vw, 3.6rem);
  line-height: .95; letter-spacing: -.05em;
  text-transform: uppercase; color: #fff;
  margin: 0 0 18px;
}
.dx-wsband__lede {
  font-size: 15.5px; line-height: 1.55;
  color: rgba(255,255,255,.8);
  max-width: 46ch; margin: 0 0 30px;
}
.dx-wsband__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
}
.dx-wsband__ghost {
  font-size: 11.5px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: rgba(255,255,255,.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.35);
  padding-bottom: 3px;
  transition: color .16s, border-color .16s;
}
.dx-wsband__ghost:hover { color: #fff; border-color: #fff; }

.dx-wsband__actions .dx-slide__btn i { margin-left: 10px; font-size: 10.5px; }
.dx-wsband__note {
  font-size: 12.5px; line-height: 1.5;
  color: rgba(255,255,255,.6);
  max-width: 34ch;
}

.dx-wsgrid {
  display: grid; gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .dx-wsgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dx-wsgrid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; } }

.dx-wscard {
  background: var(--surface);
  padding: 30px 26px 32px;
  border-top: 2px solid transparent;
  transition: border-color .2s, background .2s;
}
.dx-wscard:hover { border-top-color: var(--accent); background: var(--ground); }
.dx-wscard h4 {
  font-size: 13px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; margin: 0 0 12px; color: var(--ink);
}
.dx-wscard p {
  margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2);
}

.dx-wscontact {
  margin-top: 16px !important;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
}
.dx-wscontact a {
  color: var(--ground);
  border-bottom: 1px solid rgba(252,251,249,.4);
  padding-bottom: 2px;
  transition: border-color .16s;
}
.dx-wscontact a:hover { border-color: var(--ground); color: var(--ground); }
.dx-wscontact__sep { opacity: .4; margin: 0 10px; }

/* ---------- 11. reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dx-slide, .dx-slide__img, .dx-promo__img, .dx-promo::after { transition: none; }
  .dx-slide.is-active .dx-slide__eyebrow,
  .dx-slide.is-active .dx-slide__title,
  .dx-slide.is-active .dx-slide__text,
  .dx-slide.is-active .dx-slide__btn {
    animation: none; opacity: 1; transform: none;
  }
  .dx-slide.is-active .dx-slide__eyebrow::after { animation: none; transform: scaleX(1); }
  .dx-slide.is-active .dx-slide__img { transform: none; }
  .dx-hero__arrow { opacity: 1; }
  #menu.dx-nav .nav-link::after { transition: none; }

  /* The accordion stops stepping along on its own and stops sliding; it still
     opens on hover, just immediately. */
  .dx-acc__panel,
  .dx-acc__logo,
  .dx-acc__logo img,
  .dx-acc__meta,
  .dx-acc__cta i,
  .dx-acc__plus { transition: none; }
  .dx-acc__panel--all.is-open .dx-acc__plus { transform: none; }
}