/* ===========================================================================
   ToolHub Kenya - product catalogue (Phase 2).
   Controls, grid, product cards and the loading/empty/error states.
   Tokens come from styles.css.
   =========================================================================== */

.products-section{padding-block:var(--s-11);background:var(--bg)}

/* ---------------------------------------------------------------------------
   Toolbar: search, category, sort
   --------------------------------------------------------------------------- */

.catalogue-toolbar{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);
  gap:var(--s-4);align-items:end;
}
.catalogue-field{display:grid;gap:var(--s-2);min-width:0}
.catalogue-field label{
  color:var(--navy);font-size:var(--fs-xs);font-weight:var(--fw-black);
  letter-spacing:.1em;text-transform:uppercase;
}
.catalogue-field select{
  width:100%;min-height:52px;padding:0 var(--s-4);
  border:1px solid var(--border-strong);border-radius:var(--r-md);
  background:var(--surface);color:var(--text);
  font:inherit;font-size:var(--fs-base);cursor:pointer;
  transition:border-color var(--t),box-shadow var(--t);
}
.catalogue-field select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}

.catalogue-search-control{position:relative;display:flex;align-items:center}
.catalogue-search-icon{
  position:absolute;left:var(--s-4);width:18px;height:18px;pointer-events:none;
  fill:none;stroke:var(--text-muted);stroke-width:2;stroke-linecap:round;
}
.catalogue-search-control input{
  width:100%;min-height:52px;
  padding:0 52px 0 48px;
  border:1px solid var(--border-strong);border-radius:var(--r-md);
  background:var(--surface);color:var(--text);
  font:inherit;font-size:var(--fs-base);
  transition:border-color var(--t),box-shadow var(--t);
}
.catalogue-search-control input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.catalogue-search-control input::placeholder{color:#9aa4ae}
.catalogue-search-control input::-webkit-search-cancel-button{display:none}

.catalogue-search-clear{
  position:absolute;right:10px;
  display:grid;place-items:center;width:34px;height:34px;padding:0;
  border:0;border-radius:50%;background:var(--surface-2);color:var(--navy);
  cursor:pointer;transition:background var(--t),color var(--t);
}
.catalogue-search-clear::before{content:"";position:absolute;inset:-7px}
.catalogue-search-clear:hover{background:var(--navy);color:#fff}
.catalogue-search-clear svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

/* ---------------------------------------------------------------------------
   Category chips (same state as the dropdown)
   --------------------------------------------------------------------------- */

.tool-type-switch{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
.tool-type{
  min-height:44px;padding:0 var(--s-5);
  border:1px solid var(--border-strong);border-radius:var(--r-pill);
  background:var(--surface);color:var(--navy);
  font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-bold);cursor:pointer;
  transition:background var(--t),border-color var(--t),color var(--t);
}
.tool-type:hover{border-color:var(--brand);color:var(--brand)}
.tool-type.active{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---------------------------------------------------------------------------
   Result status
   --------------------------------------------------------------------------- */

.catalogue-status{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s-3);margin-top:var(--s-7);
  padding-bottom:var(--s-4);border-bottom:1px solid var(--border);
}
.catalogue-count{margin:0;color:var(--text-muted);font-size:var(--fs-sm)}
.catalogue-reset{
  min-height:38px;padding:0 var(--s-4);
  border:1px solid var(--border-strong);border-radius:var(--r-pill);
  background:var(--surface);color:var(--navy);
  font:inherit;font-size:var(--fs-xs);font-weight:var(--fw-black);cursor:pointer;
  transition:border-color var(--t),color var(--t);
}
.catalogue-reset:hover{border-color:var(--brand);color:var(--brand)}

/* ---------------------------------------------------------------------------
   Grid
   --------------------------------------------------------------------------- */

.product-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--s-5);margin-top:var(--s-6);
}

/* ---------------------------------------------------------------------------
   Product card
   --------------------------------------------------------------------------- */

.product-card{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.product-card:hover{border-color:var(--border-strong);box-shadow:var(--sh-md);transform:translateY(-3px)}
.product-card:focus-within{border-color:var(--brand);box-shadow:var(--sh-md)}

.product-media{
  position:relative;overflow:hidden;
  aspect-ratio:1;
  background:var(--surface);border-bottom:1px solid var(--border);
}
.product-media img{
  position:absolute;inset:0;margin:auto;
  width:auto;height:auto;
  max-width:calc(100% - var(--s-8));max-height:calc(100% - var(--s-8));
  object-fit:contain;
}
.product-media.is-placeholder img{opacity:.55}

.product-info{display:flex;flex-direction:column;gap:var(--s-2);flex:1;padding:var(--s-5)}

.product-category{
  align-self:flex-start;
  padding:5px 10px;border-radius:var(--r-sm);
  background:var(--brand-tint);color:#b94200;
  font-size:.68rem;font-weight:var(--fw-black);
  letter-spacing:.1em;text-transform:uppercase;
}
.product-card[data-tool-type="Hand Tools"] .product-category{background:#e9f1f7;color:#164b70}
.product-card[data-tool-type="Accessories"] .product-category{background:var(--surface-2);color:#4a5762}

.product-title{
  margin:var(--s-1) 0 0;
  color:var(--navy);font-size:.99rem;font-weight:var(--fw-bold);line-height:1.34;
  text-wrap:pretty;
}

.product-price{margin:var(--s-1) 0 0;color:var(--navy);font-size:1.05rem;font-weight:var(--fw-black)}
.product-price::before{
  content:"Price: ";
  color:var(--text-muted);font-size:.7rem;font-weight:var(--fw-bold);
  letter-spacing:.08em;text-transform:uppercase;
}
.product-price[data-has-price="false"]{color:var(--text-muted);font-size:.86rem;font-weight:var(--fw-semibold)}
.product-price[data-has-price="false"]::before{content:none}
.pp-price{margin:var(--s-2) 0 var(--s-3);font-size:1.5rem}

.product-summary{flex:1;margin:var(--s-2) 0 0;color:var(--text-muted);font-size:.84rem;line-height:1.55}

.product-actions{
  display:grid;gap:var(--s-2);
  margin-top:var(--s-4);padding-top:var(--s-4);
  border-top:1px solid var(--border);
}
.product-view{
  min-height:38px;padding:0;
  border:0;background:none;color:var(--text-muted);
  font:inherit;font-size:.78rem;font-weight:var(--fw-bold);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color var(--t);
}
.product-view:hover{color:var(--brand)}

.product-enquire{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:44px;
  border:1px solid var(--navy);border-radius:var(--r-pill);
  background:transparent;color:var(--navy);
  font-size:.8rem;font-weight:var(--fw-black);
  transition:background var(--t),color var(--t),border-color var(--t);
}
.product-enquire::after{content:"\2192"}
.product-enquire:hover{background:var(--navy);border-color:var(--navy);color:#fff}

.product-sku{margin:var(--s-3) 0 0;color:var(--text-muted);font-size:.7rem;letter-spacing:.04em}

/* ---------------------------------------------------------------------------
   Loading, empty and error states
   --------------------------------------------------------------------------- */

.product-skeleton{
  position:relative;overflow:hidden;min-height:400px;
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-2);
}
.product-skeleton::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(7,23,38,.05) 50%,transparent 100%);
  animation:catalogue-shimmer 1.3s infinite;
}
@keyframes catalogue-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

.catalogue-empty,.catalogue-error{
  margin:var(--s-8) auto 0;max-width:560px;
  padding:var(--s-9) var(--s-6);
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);color:var(--text-muted);
  text-align:center;font-size:var(--fs-sm);line-height:1.6;
}
.catalogue-error{display:grid;gap:var(--s-5);justify-items:center}
.catalogue-error p{margin:0}

.catalogue-more-wrap{display:flex;justify-content:center;margin-top:var(--s-8)}
.catalogue-more{min-width:240px}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media (max-width:1080px){
  .product-grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:900px){
  .products-section{padding-block:var(--s-10)}
  .catalogue-toolbar{grid-template-columns:1fr 1fr}
  .catalogue-field-search{grid-column:1 / -1}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .catalogue-status{margin-top:var(--s-6)}
}

@media (max-width:560px){
  .catalogue-toolbar{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr;gap:var(--s-4)}
  .product-media{aspect-ratio:4/3}
  .product-title{font-size:1.02rem}
  .tool-type-switch{gap:var(--s-2)}
  .tool-type{padding:0 var(--s-4)}
  .catalogue-more{width:100%;min-width:0}
  .product-skeleton{min-height:320px}
  .product-view{min-height:44px}
}

@media (prefers-reduced-motion:reduce){
  .product-card:hover{transform:none}
  .product-skeleton::before{animation:none}
}

/* ---------------------------------------------------------------------------
   Product quick view
   --------------------------------------------------------------------------- */

.product-dialog{
  width:min(920px,calc(100vw - 2 * var(--s-5)));
  max-height:min(86vh,760px);
  padding:0;overflow:hidden;
  border:0;border-radius:var(--r-xl);
  background:var(--surface);color:var(--text);
  box-shadow:var(--sh-lg);
}
.product-dialog::backdrop{background:rgba(7,23,38,.62)}
.product-dialog[open]{display:block}
.product-dialog-body{
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  max-height:min(86vh,760px);
}

.product-dialog-close{
  position:absolute;top:var(--s-4);right:var(--s-4);z-index:2;
  display:grid;place-items:center;width:40px;height:40px;padding:0;
  border:1px solid var(--border);border-radius:50%;
  background:var(--surface);color:var(--navy);cursor:pointer;
  transition:background var(--t),color var(--t);
}
.product-dialog-close:hover{background:var(--navy);color:#fff}
.product-dialog-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

.product-dialog-media{
  position:relative;background:var(--surface-2);
  border-right:1px solid var(--border);
  min-height:280px;
}
.product-dialog-media img{
  position:absolute;inset:0;margin:auto;
  width:auto;height:auto;
  max-width:calc(100% - var(--s-9));max-height:calc(100% - var(--s-9));
  object-fit:contain;
}

.product-dialog-copy{
  display:flex;flex-direction:column;gap:var(--s-3);
  padding:var(--s-9) var(--s-7) var(--s-7);
  overflow-y:auto;
}
.product-dialog-title{margin:0;color:var(--navy);font-size:1.3rem;line-height:1.28;font-weight:var(--fw-black)}
.product-dialog-sku{margin:0;color:var(--text-muted);font-size:.76rem;letter-spacing:.04em}
.product-dialog-details{
  margin-top:var(--s-2);padding-top:var(--s-4);
  border-top:1px solid var(--border);
  color:var(--text-muted);font-size:.86rem;line-height:1.65;
}
.product-dialog-details p{margin:0 0 var(--s-3)}
.product-dialog-details p:last-child{margin-bottom:0}
.product-dialog-details strong{color:var(--navy)}
.product-dialog-actions{display:grid;gap:var(--s-3);margin-top:auto;padding-top:var(--s-5)}

body.dialog-open{overflow:hidden}

@media (max-width:760px){
  .product-dialog{width:calc(100vw - var(--s-5));max-height:90vh}
  .product-dialog-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);max-height:90vh}
  .product-dialog-media{min-height:210px;border-right:0;border-bottom:1px solid var(--border)}
  .product-dialog-copy{padding:var(--s-6) var(--s-5) var(--s-6)}
  .product-dialog-close{top:var(--s-3);right:var(--s-3);width:38px;height:38px}
}

/* ---------------------------------------------------------------------------
   Popular strip under the hero (built from _src/popular.json)
   --------------------------------------------------------------------------- */

.popular-section{padding-top:var(--s-7);padding-bottom:var(--s-7)}
.popular-grid{grid-template-columns:repeat(4,1fr)}
.popular-card .product-info{display:flex;flex-direction:column;gap:var(--s-2)}
.popular-card .product-title{font-size:1rem;line-height:1.35}
.popular-card .product-actions{border-top:0;padding-top:var(--s-3);margin-top:auto}
.popular-card .button{display:inline-flex;align-items:center;justify-content:center;gap:.4em;width:100%;text-align:center}
.popular-card .button svg{width:1.05em;height:1.05em;flex:none;fill:currentColor}
@media (max-width:1080px){.popular-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.popular-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.popular-card .product-title{font-size:.94rem}}

/* ---------------------------------------------------------------------------
   Single product page (products/<slug>/)
   --------------------------------------------------------------------------- */

.product-page{padding-top:var(--s-5)}
.pp-grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:var(--s-7);align-items:start}
.pp-media{
  border:1px solid var(--border);border-radius:var(--r-lg);background:#fff;
  padding:var(--s-5);display:flex;align-items:center;justify-content:center;
}
.pp-media img{width:100%;height:auto;max-height:420px;object-fit:contain}
.pp-copy h1{margin:var(--s-2) 0 var(--s-2);font-size:clamp(1.45rem,1.1rem + 1.4vw,2.1rem);line-height:1.2}
.pp-sku{color:var(--muted);font-size:.9rem;margin:0 0 var(--s-4)}
.pp-use{font-size:1.05rem;line-height:1.6;margin:0 0 var(--s-4)}
.pp-specs{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;padding:0;margin:0 0 var(--s-4)}
.pp-specs li{
  border:1px solid var(--border);border-radius:999px;
  padding:.3em .8em;font-size:.85rem;font-weight:600;background:var(--surface);
}
.pp-note{color:var(--muted);line-height:1.6;margin:0 0 var(--s-5)}
.pp-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-bottom:var(--s-4)}
.pp-meta{font-size:.9rem;color:var(--muted);margin:0}
.popular-card .product-title a{color:inherit;text-decoration:none}
.popular-card .product-title a:hover{text-decoration:underline}
@media (max-width:860px){
  .pp-grid{grid-template-columns:1fr;gap:var(--s-5)}
  .pp-media img{max-height:320px}
  .pp-actions .button{flex:1 1 100%;text-align:center}
}
.pp-copy .product-category{display:inline-block;align-self:flex-start;width:auto}
.product-title a{color:inherit;text-decoration:none}
.product-title a:hover{text-decoration:underline}
.product-page-link{
  display:inline-flex;align-items:center;justify-content:center;min-height:36px;
  border:1px solid var(--border-strong);border-radius:var(--r-md);
  color:var(--navy);font-size:.85rem;font-weight:var(--fw-black);text-decoration:none;
}
.product-page-link:hover{background:var(--surface);border-color:var(--navy)}

/* Specification table on a product page, built from what the name states */
.pp-spec-table{margin:0 0 var(--s-5)}
.pp-spec-table h2{font-size:1.05rem;margin:0 0 var(--s-3)}
.pp-spec-table table{width:100%;border-collapse:collapse;font-size:.95rem}
.pp-spec-table th{
  text-align:left;font-weight:600;color:var(--muted);width:42%;
  padding:8px 12px 8px 0;border-bottom:1px solid var(--border);vertical-align:top;
}
.pp-spec-table td{padding:8px 0;border-bottom:1px solid var(--border);font-weight:600}
.pp-spec-table tr:last-child th,.pp-spec-table tr:last-child td{border-bottom:0}
.pp-spec-table .pp-meta{margin-top:var(--s-3)}