/* ================================================================ STOREFRONT
   Technical-catalogue treatment for the Lattouf Co. products page: monospaced
   SKUs, hairline rules, drawing-style glyphs instead of stock photography, and
   the accent colour reserved for actions rather than decoration. */

.pd {
  --pd-rule: #dfe3e7;
  --pd-ink: #10161c;
  --pd-mute: #6b747c;
  font-family: var(--font--primary), sans-serif;
  color: var(--pd-ink);
  background: #fff;
}

/* ---------------------------------------------------------------- masthead */
.pd-hero {
  padding: calc(var(--padding--top, 150px) + 1vw) var(--padding--lateral, 96px) 3vw;
  border-bottom: 1px solid var(--pd-rule);
}

.pd-hero_label {
  margin: 0 0 18px;
  font-family: var(--font--tertiary), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color--accent, #2a2a86);
}

.pd-hero_title {
  margin: 0;
  max-width: 16ch;
  font-family: var(--font--secondary), sans-serif;
  font-size: clamp(38px, 6vw, 84px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--color--accent, #2a2a86);
}

.pd-hero_row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-top: 40px;
}

.pd-hero_lede {
  margin: 0;
  max-width: 52ch;
  font-size: 17px;
  line-height: 1.65;
  color: var(--pd-mute);
}

.pd-facts {
  display: flex;
  gap: 40px;
  margin: 0;
}

.pd-fact_n {
  display: block;
  font-family: var(--font--secondary), sans-serif;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  color: var(--pd-ink);
}

.pd-fact_l {
  display: block;
  margin-top: 8px;
  font-family: var(--font--tertiary), sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pd-mute);
}

/* ------------------------------------------------------------------ layout */
.pd-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  align-items: start;
}

.pd-rail {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: 40px var(--size--medium, 40px) 60px var(--padding--lateral, 96px);
  border-right: 1px solid var(--pd-rule);
}

.pd-main {
  min-width: 0;
  padding: 40px var(--padding--lateral, 96px) 80px var(--size--medium, 40px);
}

.pd-rail_group + .pd-rail_group {
  margin-top: 36px;
}

.pd-rail_title {
  margin: 0 0 14px;
  font-family: var(--font--tertiary), sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pd-mute);
}

.pd-search {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font--primary), sans-serif;
  font-size: 15px;
  color: var(--pd-ink);
  background: #fff;
  border: 1px solid var(--pd-rule);
  border-radius: 6px;
}

.pd-search:focus {
  outline: none;
  border-color: var(--color--accent, #2a2a86);
  box-shadow: 0 0 0 3px #2a2a8622;
}

.pd-cats {
  display: flex;
  flex-direction: column;
}

.pd-cats button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 0;
  font-family: var(--font--primary), sans-serif;
  font-size: 15px;
  text-align: left;
  color: var(--pd-ink);
  background: none;
  border: none;
  border-bottom: 1px solid var(--pd-rule);
  cursor: pointer;
  transition: color 160ms ease, padding-left 160ms ease;
}

.pd-cats button em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--pd-mute);
}

.pd-cats button:hover {
  padding-left: 6px;
  color: var(--color--accent, #2a2a86);
}

.pd-cats button.is-on {
  padding-left: 10px;
  font-weight: 600;
  color: var(--color--accent, #2a2a86);
  box-shadow: inset 2px 0 0 var(--color--accent, #2a2a86);
}

.pd-mats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pd-mats button {
  padding: 6px 11px;
  font-family: var(--font--tertiary), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--pd-mute);
  background: #fff;
  border: 1px solid var(--pd-rule);
  border-radius: 999px;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.pd-mats button:hover {
  border-color: var(--color--accent, #2a2a86);
  color: var(--color--accent, #2a2a86);
}

.pd-mats button.is-on {
  color: #fff;
  background: var(--pd-ink);
  border-color: var(--pd-ink);
}

.pd-size {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pd-size_field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--pd-mute);
}

.pd-size_wide {
  grid-column: 1 / -1;
}

.pd-size .pd-search {
  padding: 9px 12px;
  font-size: 14px;
}

.pd-rail_note {
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--pd-rule);
  font-size: 13px;
  line-height: 1.6;
  color: var(--pd-mute);
}

.pd-rail_note a {
  color: var(--color--accent, #2a2a86);
}

/* ------------------------------------------------------------ results bar */
.pd-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--pd-rule);
}

.pd-bar_count {
  margin: 0;
  font-family: var(--font--tertiary), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pd-mute);
}

.pd-bar_sort {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--pd-mute);
}

.pd-bar_sort select {
  padding: 8px 12px;
  font-family: var(--font--primary), sans-serif;
  font-size: 14px;
  color: var(--pd-ink);
  background: #fff;
  border: 1px solid var(--pd-rule);
  border-radius: 6px;
}

/* ------------------------------------------------------------------- grid */
.pd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 1px;
  margin-top: 1px;
  background: var(--pd-rule);
  border: 1px solid var(--pd-rule);
}

.pd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.pd-card:hover {
  z-index: 2;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px #10161c14;
}

.pd-card_art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  background: radial-gradient(circle at 50% 45%, #fff 0%, #eef1f4 100%), #eef1f4;
  color: var(--color--accent, #2a2a86);
  overflow: hidden;
}

.pd-card_art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#10161c0a 1px, transparent 1px),
    linear-gradient(90deg, #10161c0a 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
}

.pd-glyph {
  position: relative;
  z-index: 1;
  width: 82%;
  height: auto;
  margin-top: 14px;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pd-card:hover .pd-glyph {
  transform: scale(1.04);
}

.pd-glyph_fill {
  fill: currentColor;
  fill-opacity: 0.16;
}

.pd-glyph_dim {
  stroke: var(--pd-ink);
  stroke-width: 1.1;
}

.pd-glyph_guide {
  stroke: var(--pd-mute);
  stroke-width: 0.7;
  stroke-dasharray: 2 2;
}

.pd-glyph_label {
  font-family: var(--font--tertiary), sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  fill: var(--pd-ink);
  stroke: none;
}

/* a product photo, once one is listed in catalogue-data.js */
.pd-card_img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pd-card_cat {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
  padding: 4px 9px;
  font-family: var(--font--tertiary), sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pd-mute);
  background: #ffffffe0;
  border-radius: 999px;
}

.pd-card_body {
  flex: 1;
  padding: 18px 18px 14px;
}

.pd-card_sku {
  margin: 0 0 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color--accent, #2a2a86);
}

.pd-card_name {
  margin: 0 0 12px;
  font-family: var(--font--secondary), sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pd-ink);
}

.pd-spec {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: 13px;
}

.pd-spec dt {
  padding-top: 2px;
  font-family: var(--font--tertiary), sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pd-mute);
}

.pd-spec dd {
  margin: 0;
  color: var(--pd-ink);
}

.pd-card_foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--pd-rule);
}

.pd-card_foot .pd-add {
  flex: 1;
}

/* --------------------------------------------------------- quantity + add */
.pd-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--pd-rule);
  border-radius: 6px;
  overflow: hidden;
}

.pd-qty button {
  width: 28px;
  height: 32px;
  font-size: 15px;
  line-height: 1;
  color: var(--pd-ink);
  background: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.pd-qty button:hover {
  background: #eef1f4;
}

.pd-qty input {
  width: 34px;
  height: 32px;
  font-family: var(--font--primary), sans-serif;
  font-size: 14px;
  text-align: center;
  color: var(--pd-ink);
  background: #fff;
  border: none;
  border-left: 1px solid var(--pd-rule);
  border-right: 1px solid var(--pd-rule);
}

.pd-qty input:focus {
  outline: none;
  background: #eef1f4;
}

.pd-add {
  height: 34px;
  padding: 0 16px;
  font-family: var(--font--tertiary), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--pd-ink);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 180ms ease;
}

.pd-add:hover {
  background: var(--color--accent, #2a2a86);
}

.pd-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 60px 24px;
  text-align: center;
  line-height: 1.6;
  background: #fff;
  color: var(--pd-mute);
}

/* ------------------------------------------------------------------ pager */
.pd-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 32px;
}

.pd-pager button {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  font-family: var(--font--primary), sans-serif;
  font-size: 14px;
  color: var(--pd-ink);
  background: #fff;
  border: 1px solid var(--pd-rule);
  border-radius: 6px;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.pd-pager button:hover:not(:disabled) {
  border-color: var(--color--accent, #2a2a86);
  color: var(--color--accent, #2a2a86);
}

.pd-pager button.is-current {
  color: #fff;
  background: var(--pd-ink);
  border-color: var(--pd-ink);
}

.pd-pager button:disabled {
  opacity: 0.4;
  cursor: default;
}

.pd-gap {
  padding: 0 4px;
  color: var(--pd-mute);
}

/* ----------------------------------------------------------- cart drawer */
html.pd-cart-open,
html.pd-cart-open body {
  overflow: hidden !important;
}

.pd-cart {
  position: fixed;
  inset: 0;
  z-index: 9500;
  pointer-events: none;
}

.pd-cart_veil {
  position: absolute;
  inset: 0;
  background: #10161c66;
  opacity: 0;
  transition: opacity 320ms ease;
}

.pd-cart_panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  background: #fff;
  /* shadow only while open: parked off-screen it bled a haze down the right edge */
  box-shadow: none;
  transform: translateX(100%);
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 380ms ease;
}

.pd-cart.is-open {
  pointer-events: auto;
}

.pd-cart.is-open .pd-cart_veil {
  opacity: 1;
}

.pd-cart.is-open .pd-cart_panel {
  box-shadow: -20px 0 60px #10161c1f;
  transform: translateX(0);
}

/* clear the solid mobile navbar (lattouf-nav.css) */
@media screen and (max-width: 767px) {
  .pd-hero {
    padding-top: calc(var(--lc-bar-h, 78px) + 32px);
  }
}

.pd-cart_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--pd-rule);
}

.pd-cart_head h2 {
  margin: 0;
  font-family: var(--font--secondary), sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--pd-ink);
}

.pd-cart_close {
  width: 34px;
  height: 34px;
  font-size: 20px;
  line-height: 1;
  color: var(--pd-mute);
  background: none;
  border: 1px solid var(--pd-rule);
  border-radius: 999px;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}

.pd-cart_close:hover {
  color: var(--pd-ink);
  border-color: var(--pd-ink);
}

.pd-cart_body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 24px;
}

.pd-cart_empty {
  margin: 40px 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--pd-mute);
}

.pd-line {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--pd-rule);
}

.pd-line_main {
  flex: 1;
  min-width: 0;
}

.pd-line_sku {
  margin: 0 0 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--color--accent, #2a2a86);
}

.pd-line_name {
  margin: 0;
  font-family: var(--font--secondary), sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--pd-ink);
}

.pd-line_dim {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--pd-mute);
}

.pd-line_side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.pd-line_del {
  padding: 0;
  font-family: var(--font--tertiary), sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  color: var(--pd-mute);
  background: none;
  border: none;
  cursor: pointer;
}

.pd-line_del:hover {
  color: #c0442a;
}

.pd-cart_foot {
  padding: 20px 24px 24px;
  border-top: 1px solid var(--pd-rule);
  background: #fbfbfc;
}

.pd-cart_hint {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--pd-mute);
}

.pd-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 20px;
  font-family: var(--font--tertiary), sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: #fff;
  background: #1faa54;
  border-radius: 8px;
  transition: background-color 200ms ease, transform 200ms ease;
}

.pd-wa:hover {
  background: #178c44;
  transform: translateY(-2px);
}

.pd-wa svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.pd-cart_clear {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 0;
  font-family: var(--font--tertiary), sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  color: var(--pd-mute);
  background: none;
  border: none;
  cursor: pointer;
}

.pd-cart_clear:hover {
  color: var(--pd-ink);
}

/* ------------------------------------------------------------------ toast */
.pd-flash {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 9600;
  padding: 12px 22px;
  font-family: var(--font--tertiary), sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #fff;
  background: #10161c;
  border-radius: 999px;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease, transform 260ms ease;
}

.pd-flash.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 991px) {
  .pd-hero,
  .pd-main {
    padding-left: var(--size--medium, 40px);
    padding-right: var(--size--medium, 40px);
  }

  .pd-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .pd-rail {
    position: static;
    max-height: none;
    padding: 32px var(--size--medium, 40px);
    border-right: none;
    border-bottom: 1px solid var(--pd-rule);
  }

  .pd-rail_group + .pd-rail_group {
    margin-top: 24px;
  }

  .pd-cats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }

  .pd-cats button {
    width: auto;
    padding: 7px 12px;
    border: 1px solid var(--pd-rule);
    border-radius: 999px;
  }

  .pd-cats button.is-on {
    padding-left: 12px;
    color: #fff;
    background: var(--color--accent, #2a2a86);
    border-color: var(--color--accent, #2a2a86);
    box-shadow: none;
  }

  .pd-cats button.is-on em {
    color: #ffffffb8;
  }
}

@media (max-width: 767px) {
  .pd-facts {
    gap: 24px;
  }

  .pd-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

/* ------------------------------------------------- navbar over white paper
   Every page ships the navbar in its `is-negative` state, which paints the
   controls white. That reads correctly over the dark hero sections elsewhere,
   but this page is white, so the region pill, the Contact button and the cart
   all disappeared. catalogue.js re-applies `is-negative` at runtime, so the
   class cannot simply be dropped from the markup — the colour is corrected
   here instead. This file only loads on the catalogue, so it needs no
   page-scoping selector. */
.nav_switch.is-negative,
.nav_cart.is-negative,
.button.is-fixed.is-negative {
  color: var(--color--accent, #2a2a86);
}

.nav_cart.is-negative:hover,
.nav_cart.is-negative:focus-visible {
  color: var(--color--neutral-light, #fff);
  background: var(--color--accent, #2a2a86);
}

/* lattouf-custom.css states this hover at ID weight, which would repaint the
   pill white-on-white; restated here at equal weight and later in the cascade */
#region-switch.is-negative:hover,
#region-switch.is-negative:focus-visible {
  color: var(--color--neutral-light, #fff);
  background: var(--color--accent, #2a2a86);
}

/* --------------------------------------------- cart drawer above the navbar
   .page-wrapper carries `z-index:1; position:relative`, which opens a stacking
   context. The drawer sits inside it, so its z-index:9500 is resolved *within*
   that context and the whole wrapper competes against .navbar's z-index:100 as
   a 1 — the fixed navbar on the right therefore covered the drawer's right
   edge. Lift the wrapper past the navbar only while the drawer is open, so the
   nav menu overlay keeps working normally the rest of the time. */
html.pd-cart-open .page-wrapper.pd {
  z-index: 9000;
}