/* ============================================================
   POLISH PASS (Nov 2026)
   Loaded right after app.css. Removing the <link> in
   layouts/app.blade.php reverts every rule in this file.
   ============================================================ */

/* 1. One text family. The code-style font made prices, labels and
      filters read like a developer tool. Every rule that asked for
      --font-mono now gets Inter, with figures that line up in columns. */
:root{--font-mono:var(--font-body);}
.prod-price,.was-price,.hero-stats b,[class*="price"]{font-variant-numeric:tabular-nums;}

/* 2. "Request Quote" was a small text link; on a B2B card it is the
      main action, so give it the shape of a button. */
.rfq-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
  border-radius:9px;background:var(--orange);color:#fff;font-size:12.5px;
  font-weight:700;line-height:1;transition:background .15s,transform .15s;}
.rfq-btn:hover{background:var(--orange-dark);color:#fff;}
.rfq-btn:active{transform:translateY(1px);}

/* 3. Scroll entrance: shorter and subtler, so a section is never seen
      empty while someone scrolls at normal speed. */
@media (prefers-reduced-motion:no-preference){
  .js-reveal{transform:translateY(8px);}
  .js-reveal.is-in{transition:opacity .32s ease-out,transform .32s ease-out;}
  .js-reveal.is-in:nth-child(n){transition-delay:0s;}
  .js-reveal.is-in:nth-child(2){transition-delay:.04s;}
  .js-reveal.is-in:nth-child(3){transition-delay:.08s;}
  .js-reveal.is-in:nth-child(4){transition-delay:.12s;}
}

/* 4. Hero numbers: next to the manifest card there is not enough width
      for four columns, and labels broke over four lines. Two by two
      until the hero has room. */
@media (min-width:901px) and (max-width:1180px){
  .hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  .hero-stats > div{margin-right:0;padding-right:16px;}
  .hero-stats > div:nth-child(odd)::before{display:none;}
  .hero-stats > div:nth-child(even)::before{left:-14px;}
  .hero-stats > div:nth-child(even){padding-left:14px;}
}

/* 5. Supplier card on the product page (products/show.blade.php). */
.pdp-supplier{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 14px;
  padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md,14px);background:#fff;}
.pdp-supplier-logo{width:44px;height:44px;flex-shrink:0;border-radius:11px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--indigo-wash);
  color:var(--navy);font-family:var(--font-display);font-weight:700;font-size:18px;}
.pdp-supplier-logo img{width:100%;height:100%;object-fit:cover;}
.pdp-supplier-info{flex:1;min-width:160px;display:flex;flex-direction:column;gap:3px;}
.pdp-supplier-info b{color:var(--navy);font-size:14.5px;}
.pdp-supplier-info > span{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.pdp-supplier-info .verified-chip{font-style:normal;}
.pdp-supplier-link{font-size:13px;font-weight:700;color:var(--orange);white-space:nowrap;}
.pdp-supplier-link:hover{color:var(--orange-dark);}

/* 6. Phones: search stays visible under the header. A marketplace
      visitor's first move is to search, not to open a menu. */
@media (max-width:900px){
  .header .mob-search{display:block!important;padding:0 16px 12px;border-top:0;}
}

/* 7. PREMIUM LAYER — depth, motion and finish. */
::selection{background:var(--orange);color:#fff;}

/* Trust strip floats over the bottom of the hero as one card. */
.hero{padding-bottom:110px;}
.trust-strip{background:transparent;box-shadow:none;margin-top:-64px;position:relative;z-index:3;}
.trust-strip > .container-xl{background:#fff;border-radius:20px;
  box-shadow:0 30px 60px -28px rgba(19,16,48,.35),0 2px 6px rgba(16,28,44,.05);}
.trust-strip .icon-wrap{background:var(--indigo-wash);color:var(--navy);border-radius:14px;}
@media (max-width:900px){.trust-strip > .container-xl{margin-left:16px;margin-right:16px;width:auto;}}

/* Section headings: eyebrow as a pill, larger title. */
.eyebrow-sm{display:inline-block;width:max-content;max-width:100%;padding:5px 12px;
  border-radius:999px;background:#FEF1E8;color:var(--orange-dark);letter-spacing:.08em;}
.section-head .eyebrow-sm::after,.eyebrow-sm::after{display:none;content:none;}
.section-head h2{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.03em;}

/* Category tiles: lift and tint on hover. */
.cat-slide{transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;}
.cat-slide:hover{transform:translateY(-4px);border-color:#F6C6A6;
  box-shadow:0 18px 36px -18px rgba(19,16,48,.28);}
.cat-slide-icon{background:linear-gradient(135deg,#FEF1E8,#FDE3D2);color:var(--orange-dark);
  display:grid;place-items:center;}
.cat-slide-name{font-family:var(--font-display);font-weight:600;}

/* Product cards: soft image stage, lift and zoom on hover. */
.prod-card{overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;}
.prod-card:hover{transform:translateY(-5px);border-color:transparent;
  box-shadow:0 26px 48px -22px rgba(19,16,48,.32);}
.prod-img{background:linear-gradient(180deg,#F7F6F3,#EFEDE8);overflow:hidden;}
.prod-img img{transition:transform .45s var(--ease);mix-blend-mode:multiply;}
.prod-card:hover .prod-img img{transform:scale(1.05);}
.cat-tag{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--indigo-wash);
  color:var(--navy-2);font-size:10.5px;letter-spacing:.05em;width:auto;}
.prod-body h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;}

/* Buttons: a little lift and glow. */
.btn-orange,.rfq-btn{transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s;}
.btn-orange:hover,.rfq-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(242,136,75,.65);}