/** Shopify CDN: Minification failed

Line 314:5 Unexpected "("
Line 314:76 Unterminated string token
Line 428:14 Unexpected "`"

**/
/*
 * custom-fullsource.css
 * ---------------------------------------------------------------
 * Distributor-density overrides for the Trade theme.
 *
 * Goal: match the information density and shopping mechanics of a
 * catalog distributor (search-first header, tight facet rail, compact
 * product rows) WITHOUT touching the palette. Every colour below is
 * inherited from the active colour scheme via --color-* variables, so
 * the taupe/greige identity is preserved.
 *
 * Loaded last in theme.liquid so it wins the cascade over base.css.
 * ---------------------------------------------------------------
 */

/* ===============================================================
   1. HEADER — logo left, search open and prominent
   ===============================================================
   Stock Trade hides search behind a magnifier modal. On a catalog
   this size search is the primary navigation, so it stays open.     */

.header__search-inline {
  display: none;
}

@media screen and (min-width: 990px) {
  /* NOTE: base.css declares `.header` TWICE — `display: grid` at ~line 2353
     and `display: flex` at ~line 3629. The later flex rule wins, so all the
     grid-template-areas machinery in base.css is dead code and items simply
     flow in source order. Lay this out with flex, not grid.

     Target: logo | search (grows) | icons on row one, nav wrapped to its own
     full-width row beneath — the FullSource header shape. */
  .header {
    flex-wrap: wrap;
    align-items: center;
    column-gap: 2.4rem;
  }

  .header__heading,
  .header__heading-link {
    order: 1;
    flex: 0 0 auto;
  }

  .header__search-inline {
    display: block;
    order: 2;
    flex: 1 1 auto;
    position: relative;
    min-width: 32rem;
    max-width: 72rem;
  }

  .header__icons {
    order: 3;
    flex: 0 0 auto;
  }

  /* Full-width second row for the mega nav. */
  .header__inline-menu {
    order: 4;
    flex: 0 0 100%;
    margin-top: 0.4rem;
  }

  .header__search-inline .search-inline {
    display: block;
    position: relative;
  }

  .header__search-inline .field {
    width: 100%;
  }

  .header__search-inline .field__input {
    height: 4.4rem;
    padding-left: 1.6rem;
    font-size: 1.4rem;
  }

  /* The floating label would sit on top of the placeholder in an always-open
     field. Dawn hides placeholders (base.css: .field__input::placeholder
     { opacity: 0 }) precisely because it relies on that floating label — so
     hiding the label without re-showing the placeholder leaves an empty box
     with no affordance. Do both together. */
  .header__search-inline .field__label {
    display: none;
  }

  .header__search-inline .field__input::placeholder {
    opacity: 1;
    color: rgba(var(--color-foreground), 0.55);
  }

  .header__search-inline .search__button {
    right: 0;
  }

  /* Predictive results hang below the open field rather than below a modal
     sheet. The theme renders suggestions and products as TWO columns; if the
     panel is only as wide as the input, the product column is pushed out of
     view and the dropdown looks like it returns no products. */
  .header__search-inline .predictive-search {
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    min-width: 64rem;
    z-index: 10;
  }

  /* The magnifier modal is redundant once the bar is always visible —
     but keep it on mobile, where the bar is hidden. */
  .header__icons .header__search {
    display: none;
  }

  /* Logo hard left, no centring. */
  .header--top-left .header__heading,
  .header--top-left .header__heading-link {
    justify-self: start;
  }
}

/* ===============================================================
   2. UTILITY BAR — phone / account / support strip above the header
   =============================================================== */

.utility-bar {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  font-size: 1.2rem;
  line-height: 1;
}

.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
  min-height: 3.2rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.utility-bar__item {
  color: rgba(var(--color-foreground), 0.72);
  text-decoration: none;
  white-space: nowrap;
}

.utility-bar__item:hover {
  color: rgb(var(--color-foreground));
  text-decoration: underline;
}

.utility-bar__phone {
  font-weight: 600;
  color: rgb(var(--color-foreground));
  margin-right: auto;
}

@media screen and (max-width: 749px) {
  /* Keep only the phone number on small screens. */
  .utility-bar__item:not(.utility-bar__phone) {
    display: none;
  }
}

/* ===============================================================
   2b. PURCHASE ORDER FIELD (cart)
   ===============================================================
   Replaces the inline-styled afterthought this used to be. Shown to
   everyone, required only for B2B-tagged accounts.                 */

.cart-po-box {
  margin-top: 2rem;
  max-width: 36rem;
  margin-left: auto;
}

.cart-po-box__label {
  display: block;
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.cart-po-box__required {
  color: rgb(var(--color-foreground));
  margin-left: 0.2rem;
}

.cart-po-box__input {
  width: 100%;
  min-height: 4.4rem;
  padding: 0 1.2rem;
  font-size: 1.4rem;
  font-family: inherit;
  color: rgb(var(--color-foreground));
  background: rgb(var(--color-background));
  border: 0.1rem solid rgba(var(--color-foreground), 0.25);
  border-radius: var(--inputs-radius, 0);
}

.cart-po-box__input:focus {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.1rem;
}

/* Browser-native validation styling, so the message and the field agree. */
.cart-po-box__input:required:invalid {
  border-color: rgba(var(--color-foreground), 0.55);
}

.cart-po-box__hint {
  margin: 0.6rem 0 0;
  font-size: 1.2rem;
  opacity: 0.7;
}

/* ===============================================================
   2c. PRODUCT PAGE — get the buy table above the fold
   ===============================================================
   Stock Trade gives the product page an apparel shape: huge title, tall
   hero image, long description. On a distributor catalog the buy table
   (quick-order-list) is a SEPARATE section below all of it, so every
   pixel spent up top pushes purchasing off screen.                  */

.product__title h1,
.product__title .h1 {
  font-size: 2.6rem;
  line-height: 1.25;
  margin-bottom: 0.4rem;
}

/* Brand + part number, directly under the title. */
.product__idline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
  font-size: 1.3rem;
}

.product__idline-brand {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: rgb(var(--color-foreground));
  text-decoration: none;
}

.product__idline-brand:hover {
  text-decoration: underline;
}

.product__idline-sku {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: rgba(var(--color-foreground), 0.7);
}

/* Description collapsed behind a disclosure. */
.product__details-toggle {
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.12);
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.12);
  margin: 1.6rem 0;
}

.product__details-summary {
  cursor: pointer;
  padding: 1.2rem 0;
  font-size: 1.4rem;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product__details-summary::-webkit-details-marker {
  display: none;
}

.product__details-summary::after {
  content: '+';
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1;
}

.product__details-toggle[open] .product__details-summary::after {
  content: '\2212';
}

.product__details-toggle .product__description {
  padding-bottom: 1.6rem;
}

@media screen and (min-width: 990px) {
  /* Cap the hero so it stops dictating page height.
     NOTE: max-height alone does NOT work here — Dawn's .media uses the
     padding-bottom aspect-ratio trick, so height is driven by WIDTH.
     Constrain the column width instead and the height follows. Measured:
     751px tall before, which pushed the buy table off the fold. */
     The element that actually sets the size is .product-media-container
     (measured 585x585) — NOT .product__media-wrapper, which isn't even in
     the ancestor chain. Cap the container. */
  .product__media-list .product__media-item,
  .product__media-list .product-media-container {
    max-width: 40rem;
  }

  /* Products shot on white get cropped by the theme's default cover fit. */
  .product-media-container.media-fit-cover .product__media img {
    object-fit: contain;
  }
}

/* The quick-order buy table is the primary action — tighten its
   generous apparel spacing so more of it lands in view. */
.quick-order-list__container,
.quick-order-list {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}

.quick-order-list__table td,
.quick-order-list__table th {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

/* ===============================================================
   3. DENSITY — facet rail, product grid, cards
   ===============================================================
   Type family is unchanged (Jost / DM Sans); only the scale and
   spacing tighten.                                                 */

@media screen and (min-width: 990px) {
  /* Narrower, denser filter rail — closer to a distributor sidebar
     than the theme's roomy default. */
  .facets-vertical .facets-wrapper {
    flex: 0 0 24rem;
    max-width: 24rem;
    padding-right: 2rem;
  }

  .facets-vertical .facets__summary,
  .facets-vertical .facet-checkbox {
    font-size: 1.3rem;
  }

  .facets-vertical .facet-checkbox {
    padding: 0.4rem 0;
  }

  .facets-vertical .facets__disclosure {
    margin-bottom: 0.8rem;
  }
}

/* Tighter product rows. */
.product-grid.grid {
  row-gap: 1.6rem;
}

.card__information {
  padding-top: 0.8rem;
  padding-bottom: 0.4rem;
}

/* Product title: smaller and tighter, but allowed to wrap to three
   lines so long distributor titles ("PIP 251-HP1491C Safety Eyewear
   for Traverse Safety Helmet") stay readable. */
.card__heading,
.card-information .card__heading {
  font-size: 1.4rem;
  line-height: 1.35;
  margin-bottom: 0.4rem;
}

/* Brand line — quiet, above the title, the way spec catalogs run it. */
.card__information .caption-with-letter-spacing {
  font-size: 1.1rem;
  opacity: 0.7;
  margin-bottom: 0.2rem;
}

.card-information .price {
  font-size: 1.5rem;
  font-weight: 600;
}

/* Collection header takes less vertical room before the grid. */
.collection-hero__inner,
.collection .title-wrapper--self-padded-tablet-down {
  margin-bottom: 1.6rem;
}

/* Quick-add stays available — a repeat buyer shouldn't have to open the
   product page to reorder — but it should not outweigh the product it
   belongs to. Stock Trade renders it as a full-width outlined block. */
.card__inner ~ .quick-add,
.card-wrapper .quick-add {
  margin-top: 0.6rem;
}

.quick-add__submit.button,
.card-wrapper .quick-add .button {
  min-height: 3.4rem;
  padding: 0 1.2rem;
  font-size: 1.25rem;
  letter-spacing: 0.02rem;
}

/* Distributor titles run long and wrap to different line counts, which
   leaves prices floating at different heights across a row. Rather than
   truncating the title (the model number is often in the tail), stretch
   each card to full row height and pin the price block to the bottom. */
   Do NOT set `display` on .card or .card__content. base.css already gives
   .card:not(.ratio) full-height flex, and .card__content is a GRID that
   places .card__badge via grid-row-start — overriding it relocates the
   Sale badge and ignores the `badge_position` setting. */
@media screen and (min-width: 750px) {
  .product-grid .card-wrapper {
    height: 100%;
  }

  .product-grid .card__information {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .product-grid .card-information {
    margin-top: auto;
  }
}

/* Badge type only — do NOT touch .card__badge margins. Dawn positions the
   badge with auto margins driven by the `badge_position` theme setting;
   overriding margin here silently relocates it. */
.card__badge .badge {
  font-size: 1.1rem;
  padding: 0.3rem 0.8rem;
}