/* ============================================================
   MB TRADERS
   Styles for the product gallery and the contact list.
   Colours are lifted from the parent Ahmad Brothers site so the two
   pages read as one brand.
   ============================================================ */

:root {
  --bg: #05070f;
  --surface: #0b1020;
  --surface-2: #101830;
  --text: #e8ecf6;
  --muted: #9aa6c2;
  --line: rgba(255, 255, 255, 0.09);
  --brand: #4f8cff;
  --brand-2: #22d3ee;
  --radius: 16px;
  --max: 1140px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2 {
  line-height: 1.2;
  margin: 0 0 0.5em;
  letter-spacing: -0.02em;
  font-weight: 800;
}

h1 {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
}

h2 {
  font-size: 1.05rem;
  font-weight: 700;
}

p {
  margin: 0 0 1em;
  color: var(--muted);
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 22px;
}

/* visible only when focused — keeps the tab order sane */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 10px 16px;
  background: var(--brand-2);
  color: #03080f;
  font-weight: 700;
  border-radius: 0 0 10px 0;
}

.skip-link:focus {
  left: 0;
}

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-2);
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.25);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
  position: relative;
  padding: clamp(44px, 6vw, 84px) 0;
}

.section-alt {
  background-color: var(--surface);
}

/* drifting gradient behind the gallery and contact blocks */
.gallery-glow,
.contact-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(120deg,
    rgba(79, 140, 255, 0.16) 0%,
    rgba(34, 211, 238, 0.12) 30%,
    rgba(124, 92, 255, 0.14) 58%,
    rgba(34, 211, 238, 0.12) 85%,
    rgba(79, 140, 255, 0.16) 100%);
  background-size: 300% 300%;
  animation: wash-drift 26s ease-in-out infinite;
}

@keyframes wash-drift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.section > .container {
  position: relative;
  z-index: 1;
}

.section-head {
  max-width: 640px;
  margin: 0 auto 30px;
  text-align: center;
}

/* ============================================================
   FILTERS
   ============================================================ */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-bottom: 26px;
}

.filter {
  padding: 8px 15px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.22s ease, background 0.22s ease,
    border-color 0.22s ease, transform 0.22s ease;
}

.filter:hover {
  color: var(--text);
  transform: translateY(-2px);
}

.filter[aria-pressed="true"] {
  color: #06101f;
  background-image: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: transparent;
}

.filter:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
}

/* ============================================================
   PRODUCT GALLERY
   ============================================================ */
.p-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  /* explicit, so every card in a row fills the row height */
  align-items: stretch;
}

/* ---------- 55 / 45 card split ----------
   The image takes 55% of the card and the details 45%. A percentage
   flex-basis only resolves against a definite container height, so the
   card gets an explicit height here — which is also what makes the
   ratio exact rather than approximate. The height is sized so 45%
   still fits the title, a two-line description and the price:

     details content  14 + 15 padding, 40 two-line title, 6 gap,
                      41 two lines of copy, 12 gap, 23 price  = 152px
     152 / 0.45                                           = 338px
     set to 345px, which keeps ~4px of slack in the 45% band  */
.p-card {
  display: flex;
  flex-direction: column;
  height: 345px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  /* the float is driven by the standalone translate property, so a
     hover transform still composes instead of overriding it */
  animation: card-float 7s ease-in-out infinite;
  animation-delay: var(--fd, 0s);
}

.p-card:hover {
  border-color: rgba(34, 211, 238, 0.42);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(34, 211, 238, 0.14);
}

@keyframes card-float {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -6px;
  }
}

.p-thumb {
  position: relative;
  display: grid;
  place-items: center;
  /* 55% of the card. aspect-ratio is dropped on purpose — flex-basis
     now owns the height, and leaving a ratio in place would fight it. */
  flex: 0 0 55%;
  min-height: 0;
  background-image: linear-gradient(140deg, var(--c1, #1d4ed8), var(--c2, #0e7490));
  overflow: hidden;
}

.p-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(120% 90% at 20% 10%, rgba(255, 255, 255, 0.22), transparent 60%);
}

/* swap the gradient tile for a real photo when one is supplied */
.p-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-initials {
  position: relative;
  z-index: 1;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.45);
}

.p-badge {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  padding: 4px 9px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #06101f;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
}

.p-body {
  display: flex;
  flex-direction: column;
  /* 45% of the card, matching the thumb above */
  flex: 0 0 45%;
  min-height: 0;
  overflow: hidden;
  padding: 14px 15px 15px;
}

.p-body h2 {
  margin: 0 0 6px;
  /* Two lines reserved. Names like "Stainless Cookware Set" wrap in the
     3-column tier, and a one-line clamp truncated them there — trimming
     the copy was agreed, losing the product name was not. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-body p {
  margin: 0 0 12px;
  font-size: 0.86rem;
  line-height: 1.5;
  /* Two lines, which is what fits inside the 45% allowance. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-foot {
  display: flex;
  align-items: center;
  margin-top: auto;
}

.p-price {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--brand-2);
}

.empty-note {
  text-align: center;
  color: var(--muted);
}

/* ============================================================
   CONTACT — links only, no form
   ============================================================ */
.contact-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  animation: contact-bob 5s ease-in-out infinite;
  animation-delay: var(--bd, 0s);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-link:hover {
  border-color: rgba(34, 211, 238, 0.45);
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
}

.contact-link:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 3px;
}

.c-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 11px;
  color: var(--brand-2);
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.22);
  transition: background 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.c-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.contact-link:hover .c-icon {
  color: #06101f;
  background-image: linear-gradient(135deg, var(--brand), var(--brand-2));
  transform: scale(1.08);
}

.c-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.c-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7d8aa8;
}

.c-value {
  font-size: 0.9rem;
  color: #dbe2f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes contact-bob {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -7px;
  }
}

/* ---------- Scroll reveal ----------
   Only applied once script.js marks the page, so with JS off the
   content is simply visible. */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-ready .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   CATEGORY SIDE NAVIGATION
   Mobile only. On wider screens the inline .filters chips do the job,
   so the drawer and its trigger are removed from the layout entirely
   rather than merely hidden.
   ============================================================ */
.cat-nav,
.cat-nav-backdrop,
.cat-nav-toggle {
  display: none;
}

body.has-cat-nav {
  overflow: hidden;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .p-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .contact-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  /* ---------- Category side navigation ----------
     The chip row is replaced by a single bar that opens an off-canvas
     list, because nine chips wrap onto three rows on a phone and push
     the grid well below the fold. */
  .filters {
    display: none;
  }

  .cat-nav-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin-bottom: 14px;
    padding: 10px 13px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
    border-radius: 11px;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease;
  }

  .cat-nav-toggle:hover,
  .cat-nav-toggle:focus-visible {
    border-color: rgba(34, 211, 238, 0.45);
    background: rgba(255, 255, 255, 0.08);
  }

  .cat-nav-toggle:focus-visible {
    outline: 2px solid var(--brand-2);
    outline-offset: 2px;
  }

  .cat-nav-toggle svg {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--brand-2);
  }

  .cat-nav-current {
    margin-left: auto;
    padding: 2px 9px;
    font-size: 0.7rem;
    color: #06101f;
    background-image: linear-gradient(135deg, var(--brand), var(--brand-2));
    border-radius: 999px;
  }

  .cat-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(2, 5, 12, 0.62);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }

  .cat-nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0s;
  }

  .cat-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 90;
    width: min(272px, 80vw);
    padding: 18px 16px 24px;
    background: linear-gradient(180deg, #0a1020 0%, #070b16 100%);
    border-right: 1px solid var(--line);
    box-shadow: 24px 0 60px rgba(0, 0, 0, 0.5);
    transform: translateX(-100%);
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* visibility flips with no delay on open so the panel is focusable
       from the first frame, and only after the slide on close */
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s;
  }

  .cat-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
  }

  .cat-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }

  .cat-nav-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-2);
  }

  .cat-nav-close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
  }

  .cat-nav-close svg {
    display: block;
    width: 15px;
    height: 15px;
  }

  .cat-nav-close:hover,
  .cat-nav-close:focus-visible {
    color: #06101f;
    background-image: linear-gradient(135deg, var(--brand), var(--brand-2));
  }

  .cat-nav-close:focus-visible {
    outline: 2px solid var(--brand-2);
    outline-offset: 2px;
  }

  .cat-nav-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .cat-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    text-align: left;
    color: #c8d0e2;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .cat-nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
  }

  .cat-nav-item:focus-visible {
    outline: 2px solid var(--brand-2);
    outline-offset: 2px;
  }

  .cat-nav-item[aria-pressed="true"] {
    color: #06101f;
    background-image: linear-gradient(135deg, var(--brand), var(--brand-2));
    border-color: transparent;
    font-weight: 600;
  }

  .cat-nav-count {
    padding: 2px 8px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #8b97b3;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 999px;
  }

  .cat-nav-item[aria-pressed="true"] .cat-nav-count {
    color: #06101f;
    background: rgba(6, 16, 31, 0.22);
  }

  /* ---------- Product card text, smaller ----------
     Only the details block shrinks; the 45% band is unchanged, so the
     smaller type simply leaves more room rather than reflowing. */
  .p-body h2 {
    font-size: 0.82rem;
  }

  .p-body p {
    font-size: 0.68rem;
    line-height: 1.4;
  }

  .p-price {
    font-size: 0.74rem;
  }

  .p-badge {
    font-size: 0.54rem;
    padding: 2px 6px;
  }

  .p-initials {
    font-size: 1rem;
  }

  /* Two columns all the way down. Below 460px this used to drop to a
     single column, which made the cards *wider* on the smallest
     phones — the opposite of what a phone needs. Two columns at ~150px
     is what actually shrinks them. */
  .p-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .contact-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* ---------- Product cards, compact ----------
     The phone tier keeps the one-line teaser — at this type size two
     lines of copy would not fit the 45% band without squeezing the
     card past the size that makes it compact. Sized against exactly
     what it holds:
       10 + 11 padding, 35 two-line title, 4 gap,
       17 one line of copy, 8 gap, 21 price  =  106px
       106 / 0.45                             = 235px
       set to 240px, which keeps ~2px of slack                     */
  .p-card {
    height: 240px;
  }

  .p-thumb {
    flex: 0 0 55%;
  }

  .p-badge {
    top: 6px;
    left: 6px;
    padding: 3px 7px;
    font-size: 0.58rem;
  }

  .p-initials {
    font-size: 1.15rem;
  }

  .p-body {
    flex: 0 0 45%;
    padding: 10px 11px 11px;
  }

  /* names do wrap at this width, so two lines are kept here.
     The type is stepped down a further notch for phones: the details
     band is a fixed 45% of a fixed-height card, so smaller text buys
     breathing room inside it rather than just squeezing the glyphs. */
  .p-body h2 {
    font-size: 0.82rem;
    line-height: 1.2;
    margin-bottom: 4px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .p-body p {
    font-size: 0.7rem;
    line-height: 1.4;
    margin-bottom: 8px;
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }

  .p-price {
    font-size: 0.74rem;
    line-height: 1.4;
  }

  .p-badge {
    font-size: 0.54rem;
  }

  /* ---------- Contact cards, compact ---------- */
  .contact-link {
    gap: 10px;
    padding: 11px 12px;
    border-radius: 12px;
  }

  .c-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  .c-icon svg {
    width: 15px;
    height: 15px;
  }

  .c-label {
    font-size: 0.6rem;
  }

  .c-value {
    font-size: 0.82rem;
  }

  .section {
    padding: 34px 0;
  }

  .section-head {
    margin-bottom: 20px;
  }

  .filter {
    padding: 6px 12px;
    font-size: 0.78rem;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .gallery-glow,
  .contact-glow,
  .p-card,
  .contact-link {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }

  .p-card,
  .contact-link,
  .filter:hover {
    transform: none;
  }

  .reveal-ready .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}