/* Emirad Morgan homepage-only styles (hero carousel, category tiles,
   product grid, trust band, corridor band, bulk CTA). Sitewide chrome
   (header, search, sidebar, footer) now lives in chrome.css and loads
   on every page, not just this one. */

/* Uses the same :root variables and base reset as chrome.css, which
   is always enqueued alongside this file — no need to redeclare them. */

  /* hero row now holds a single full-width image carousel */
  .hero-row{display:block;}

  .hero-carousel{
    position:relative; overflow:hidden; border:1px solid var(--line);
    height:clamp(280px, 42vw, 420px); background:var(--charcoal);
  }
  .hc-track{position:relative; width:100%; height:100%;}
  .hc-slide{
    position:absolute; inset:0; opacity:0; transition:opacity .6s ease;
    background-size:cover; background-position:center;
    display:flex; align-items:flex-end;
  }
  .hc-slide.active{opacity:1;}
  .hc-slide::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(20,23,27,0.88) 0%, rgba(20,23,27,0.25) 55%, rgba(20,23,27,0.05) 100%);
  }
  .hc-overlay{position:relative; z-index:2; padding:32px; color:#fff; max-width:560px;}
  .hc-eyebrow{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--flame); letter-spacing:0.14em; text-transform:uppercase; margin-bottom:10px;}
  .hc-overlay h1{font-size:clamp(22px,3vw,32px); line-height:1.15; margin-bottom:16px; font-family:'Space Grotesk',sans-serif; font-weight:700;}
  .hc-overlay .btn.solid{width:fit-content;}
  .hc-dots{
    position:absolute; bottom:16px; right:20px; z-index:3;
    display:flex; gap:8px;
  }
  .hc-dot{
    width:8px; height:8px; border-radius:50%; border:1.5px solid #fff;
    background:transparent; cursor:pointer; padding:0; opacity:0.6;
  }
  .hc-dot.active{background:var(--flame); border-color:var(--flame); opacity:1;}
  .hc-fallback{
    height:100%; display:flex; flex-direction:column; justify-content:center;
    padding:38px 32px; color:#fff;
  }
  .hc-fallback .eyebrow{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--flame); letter-spacing:0.14em; text-transform:uppercase; margin-bottom:14px;}
  .hc-fallback h1{font-size:clamp(24px,3vw,34px); line-height:1.15; max-width:440px; margin-bottom:20px;}
  .hc-fallback h1 em{font-style:normal; color:var(--flame);}
  .hc-fallback .btn.solid{width:fit-content;}

  /* quick category icons */
  .quick-cats{display:grid; grid-template-columns:repeat(6,1fr); gap:10px;}
  @media (max-width:760px){ .quick-cats{grid-template-columns:repeat(3,1fr);} }
  .qc{
    border:1px solid var(--line); background:#fff; padding:14px 8px; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:8px;
  }
  .qc:hover{border-color:var(--flame);}
  .qc .ic{width:38px; height:38px; border-radius:50%; background:var(--flame-tint); display:flex; align-items:center; justify-content:center;}
  .qc span{font-size:11.5px; font-weight:500; line-height:1.25;}

  /* section head */
  .sec-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:2px;}
  .sec-head h2{font-size:17px;}
  .sec-head .view-all{font-size:12px; font-weight:600; color:var(--flame);}

  /* dense product grid, alibaba style */
  .pgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:12px;}
  @media (max-width:1180px){ .pgrid{grid-template-columns:repeat(4,1fr);} }
  @media (max-width:860px){ .pgrid{grid-template-columns:repeat(3,1fr);} }
  @media (max-width:560px){ .pgrid{grid-template-columns:repeat(2,1fr);} }

  .pcard{border:1px solid var(--line); background:#fff; display:flex; flex-direction:column; transition:box-shadow .15s, border-color .15s;}
  .pcard:hover{border-color:var(--flame); box-shadow:0 3px 10px rgba(0,0,0,0.08);}
  .pthumb{aspect-ratio:1/1; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; position:relative; border-bottom:1px solid var(--line);}
  .pthumb .ribbon{position:absolute; top:0; left:0; background:var(--flame); color:#fff; font-size:9.5px; font-weight:700; padding:3px 8px; font-family:'IBM Plex Mono', monospace;}
  .pbody{padding:10px 11px 12px; display:flex; flex-direction:column; gap:5px; flex:1;}
  .pname{font-size:12.5px; font-weight:500; line-height:1.35; min-height:34px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .pprice{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; color:var(--flame);}
  .pprice small{font-family:'Inter',sans-serif; font-weight:500; font-size:10.5px; color:var(--sub); margin-left:3px;}
  .pmoq{font-size:11px; color:var(--sub);}
  .psupplier{display:flex; align-items:center; gap:5px; font-size:10.5px; color:var(--sub); margin-top:2px; padding-top:7px; border-top:1px solid var(--line);}
  .psupplier .verified{color:var(--green); font-weight:600; display:flex; align-items:center; gap:3px;}
  .sku-tag{font-family:'IBM Plex Mono', monospace; font-size:9.5px; color:#9a9c9f; position:absolute; bottom:6px; right:8px;}

  /* supplier trust band */
  .trustband{border:1px solid var(--line); background:var(--bg-alt); padding:24px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
  @media (max-width:760px){ .trustband{grid-template-columns:1fr 1fr;} }
  .trust-item{display:flex; gap:10px; align-items:flex-start;}
  .trust-item h4{font-size:13px; margin-bottom:3px;}
  .trust-item p{font-size:11.5px; color:var(--sub);}

  /* corridor band */
  .corridor-band{border:1px solid var(--line); background:var(--charcoal); color:#fff; padding:28px 32px; display:grid; grid-template-columns:1.1fr 1fr; gap:24px;}
  @media (max-width:760px){ .corridor-band{grid-template-columns:1fr;} }
  .corridor-band .eyebrow{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--flame); letter-spacing:0.12em; text-transform:uppercase; margin-bottom:10px;}
  .corridor-band h2{font-size:19px; margin-bottom:10px;}
  .corridor-band p{font-size:13px; color:#B9BCC1; max-width:400px;}
  .route{display:flex; flex-direction:column; gap:12px; justify-content:center;}
  .route-row{display:flex; align-items:center; gap:10px;}
  .route-row .dot{width:9px; height:9px; border:2px solid var(--flame); border-radius:50%; flex-shrink:0;}
  .route-row b{font-size:13px; display:block;}
  .route-row span{font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:#9DA0A5;}
  .route-line{width:1px; height:14px; background:var(--brass); margin-left:4px;}

  /* bulk cta */
  .bulk-band{background:var(--flame); color:#fff; padding:26px 28px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
  .bulk-band h2{font-size:18px; margin-bottom:3px;}
  .bulk-band p{font-size:12.5px; opacity:0.9;}
  .bulk-band .btn{background:#fff; color:var(--flame); border-color:#fff;}
  .bulk-band .btn:hover{background:var(--charcoal); color:#fff;}

  /* Footer styling now lives in chrome.css (sitewide) */