/* =====================================================================
   Harf & Esem — Products page
   productsbook.css  |  Product grid, status badges, filters, detail rows
   Extends the shared design tokens in stylebook-apple.css
   ===================================================================== */

:root{
  --in:    #2a9d8f;   /* in stock  (brand teal)  */
  --in-bg: #e7f4f2;
  --soon:    #bf8b2e; /* coming soon (brand gold)*/
  --soon-bg: #faf1dd;
  --out:    #c0392b;  /* out of stock           */
  --out-bg: #fbeae8;
  --lim:    #e8801a;  /* limited stock (orange) */
  --lim-bg: #fdecd7;
}

/* ---------- Products hero ---------- */
.pd-hero{
  text-align:center;
  padding: clamp(96px,14vh,150px) 0 clamp(34px,6vh,60px);
  background:
    radial-gradient(60% 80% at 50% -10%, #eef5ff 0%, rgba(238,245,255,0) 60%),
    var(--bg);
}
.pd-hero .eyebrow{ display:block; margin-bottom:10px; }
.pd-hero .lead{ max-width: 720px; margin: 14px auto 0; color: var(--sub); }

/* mini key showing what the badges mean */
.pd-legend{
  display:flex; flex-wrap:wrap; gap:10px 18px; justify-content:center;
  margin-top: 26px;
}
.pd-legend span{
  display:inline-flex; align-items:center; gap:7px;
  font-size:14px; color:var(--sub); font-weight:500;
}
.pd-legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.pd-legend .d-in{   background:var(--in); }
.pd-legend .d-soon{ background:var(--soon); }
.pd-legend .d-out{  background:var(--out); }

/* ---------- Filter chips ---------- */
.pd-filters{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin: 34px auto 0; max-width: var(--maxw);
}
.pd-chip{
  appearance:none; cursor:pointer; font:inherit;
  border:1px solid var(--line); background:var(--bg); color:var(--ink);
  padding:9px 18px; border-radius:980px; font-size:15px; font-weight:500;
  transition: all .2s var(--ease);
}
.pd-chip:hover{ border-color:#b9b9c0; }
.pd-chip.is-active{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------- Product grid ---------- */
.pd-grid{
  display:grid; gap: clamp(20px,3vw,30px);
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(28px,5vh,48px);
}
@media (max-width: 980px){ .pd-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .pd-grid{ grid-template-columns: 1fr; } }

.pd-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--bg); border:1px solid var(--line);
  border-radius: var(--radius); overflow:hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  will-change: transform;
}
.pd-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(0,0,0,.12);
  border-color: transparent;
}

.pd-media{
  position:relative; aspect-ratio: 4/3.5; background:var(--bg2);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.pd-media img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .6s var(--ease);
}
.pd-card:hover .pd-media img{ transform: scale(1.05); }

/* status badge floating on image */
.pd-badge{
  position:absolute; top:14px; inset-inline-start:14px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:980px;
  font-size:13px; font-weight:600; letter-spacing:.01em;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pd-badge i{ width:8px; height:8px; border-radius:50%; }
.pd-badge.in{   background:var(--in-bg);   color:#1c6a60; }
.pd-badge.in i{ background:var(--in); }
.pd-badge.soon{   background:var(--soon-bg); color:#8a6516; }
.pd-badge.soon i{ background:var(--soon); }
.pd-badge.out{   background:var(--out-bg);  color:#962419; }
.pd-badge.out i{ background:var(--out); }
.pd-badge.limited{   background:var(--lim-bg); color:#9a5512; }
.pd-badge.limited i{ background:var(--lim); }

/* category tag, top-right */
.pd-cat{
  position:absolute; top:14px; inset-inline-end:14px; z-index:2;
  font-size:12px; font-weight:600; color:var(--sub);
  background:rgba(255,255,255,.82); backdrop-filter: blur(8px);
  padding:6px 11px; border-radius:980px;
}

.pd-body{ padding: clamp(18px,2.4vw,24px); display:flex; flex-direction:column; flex:1; }
.pd-title{ font-size: clamp(20px,2.4vw,24px); font-weight:600; line-height:1.12; }
.pd-tag{ color:var(--sub); margin-top:7px; font-size:15.5px; line-height:1.45; }

/* spec / meta list */
.pd-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.pd-meta span{
  font-size:12.5px; color:var(--ink); background:var(--bg2);
  padding:5px 11px; border-radius:8px; font-weight:500;
}

/* actions pinned to bottom */
.pd-actions{
  margin-top:auto; padding-top:18px;
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px;
}
.pd-dl{
  display:inline-flex; align-items:center; gap:7px;
  font-size:15px; font-weight:500; color:var(--blue);
}
.pd-dl svg{ width:17px; height:17px; }
.pd-dl:hover{ text-decoration:underline; }
.pd-link2{ font-size:15px; }

/* dim out-of-stock / coming-soon media slightly */
.pd-card.is-soon .pd-media::after,
.pd-card.is-out .pd-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(255,255,255,.10), rgba(255,255,255,.10));
}

/* hide on filter */
.pd-card.hide{ display:none; }

/* ---------- Inquiry band ---------- */
.pd-inquiry{
  background: var(--dark); color:#fff; border-radius: var(--radius);
  padding: clamp(40px,6vw,72px) clamp(24px,5vw,64px);
  text-align:center; margin-top: clamp(40px,7vh,80px);
}
.pd-inquiry h2{ color:#fff; }
.pd-inquiry p{ color:#c9c9cf; max-width:620px; margin:14px auto 0; font-size:clamp(17px,2vw,20px); }
.pd-inquiry .cta-row{ justify-content:center; margin-top:30px; }
.pd-inquiry .btn{ background:#fff; color:var(--ink); }
.pd-inquiry .btn:hover{ background:#e9e9ee; }
.pd-inquiry .btn--ghost{ background:transparent; color:#fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.pd-inquiry .btn--ghost:hover{ background:rgba(255,255,255,.10); }

/* ---------- RTL niceties ---------- */
html[dir="rtl"] .pd-dl svg{ transform: scaleX(-1); }