/* Safety Products & Solutions: public catalogue (Phase 7).
   Loaded only by safety-products/index.html. Built on the site tokens from
   styles.css (Apple layer), so light and dark themes follow automatically. */

.spx-hero .container{position:relative;z-index:1}
.spx-hero h1{max-width:900px;text-wrap:balance}
.spx-hero .lede{max-width:62ch}
.spx-hero .eyebrow{color:var(--ap-tile-action,#3ec090);background:rgba(62,192,144,.12)}

.spx-preview{background:#fff4d6;color:#5c3d00;border-bottom:1px solid rgba(92,61,0,.18);font-size:.9rem;padding:.75rem 0}
.spx-preview strong{font-weight:600}
.spx-preview-blockers{margin-top:.4rem}
.spx-preview-blockers ul{margin:.25rem 0 0 1.1rem;list-style:disc}
:root[data-theme="dark"] .spx-preview{background:#3a2c08;color:#ffe2a3;border-color:rgba(255,226,163,.2)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .spx-preview{background:#3a2c08;color:#ffe2a3;border-color:rgba(255,226,163,.2)}}

.spx-section{padding-block:clamp(2.5rem,5vw,4rem)}
.spx-section-tight{padding-top:0}
.spx-section-alt{background:var(--bg-alt);border-top:1px solid var(--border)}
.spx-h2{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:600;letter-spacing:-.02em;margin-bottom:1.25rem;text-wrap:balance}
.spx-h3{font-size:1.1rem;font-weight:600;margin:0 0 .75rem}
.spx-muted{color:var(--fg-muted);max-width:52ch}
.spx-empty{color:var(--fg-muted);font-size:1.05rem;padding:1.5rem 0}

/* Categories */
.spx-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.spx-cat{display:flex;flex-direction:column;gap:.45rem;padding:1.3rem 1.4rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md,18px);color:var(--fg);text-decoration:none;transition:border-color .2s ease}
.spx-cat:hover,.spx-cat:focus-visible{border-color:var(--brand)}
.spx-cat-name{font-size:1.15rem;font-weight:600;letter-spacing:-.01em}
.spx-cat-desc{color:var(--fg-muted);font-size:.92rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.spx-cat-meta{margin-top:auto;color:var(--fg-subtle);font-size:.82rem}

.spx-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.spx-chip{padding:.45rem .95rem;border-radius:999px;border:1px solid rgba(255,255,255,.25);color:var(--ap-on-tile,#fff);text-decoration:none;font-size:.88rem}
.spx-chip:hover{border-color:rgba(255,255,255,.6)}
.spx-chip.is-active{background:var(--ap-on-tile,#fff);color:var(--ap-tile,#1d1f1e);border-color:transparent;font-weight:600}

/* Product grid */
.spx-search{width:100%;max-width:440px;margin-bottom:1.25rem;padding:.75rem 1rem;border-radius:12px;border:1px solid var(--border-strong);background:var(--surface);color:var(--fg);font:inherit}
.spx-search:focus{outline:2px solid var(--brand);outline-offset:1px}
.spx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.spx-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md,18px);overflow:hidden;transition:border-color .2s ease}
.spx-card:hover,.spx-card:focus-within{border-color:var(--border-strong)}
.spx-card-media{display:block}
.spx-thumb,.spx-gallery-main{position:relative;aspect-ratio:4/3;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.spx-thumb img,.spx-gallery-main img{width:100%;height:100%;object-fit:contain;padding:6%}
.spx-thumb-empty{color:var(--fg-subtle);width:28%;max-width:72px;opacity:.55}
:root[data-theme="dark"] .spx-thumb,:root[data-theme="dark"] .spx-gallery-main{background:#f3f4f3}
.spx-card-body{display:flex;flex-direction:column;gap:.4rem;padding:1rem 1.1rem 1.15rem;flex:1}
.spx-card-cat{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-subtle);font-weight:600}
.spx-card h3{font-size:1.02rem;font-weight:600;line-height:1.3}
.spx-card h3 a{color:var(--fg);text-decoration:none}
.spx-card h3 a::after{content:"";position:absolute;inset:0}
.spx-card{position:relative}
.spx-card h3 a:focus-visible{outline:none}
.spx-card:focus-within{outline:2px solid var(--brand);outline-offset:2px}
.spx-card-brand{font-size:.85rem;color:var(--fg-muted)}
.spx-card-summary{font-size:.88rem;color:var(--fg-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.spx-card-foot{margin-top:auto;padding-top:.5rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}

.spx-price{font-variant-numeric:tabular-nums;font-size:.95rem}
.spx-price b{font-weight:600;font-size:1.05rem}
.spx-price small,.spx-price-from{color:var(--fg-subtle);font-size:.78rem}
.spx-price.is-muted{color:var(--fg-subtle);font-size:.88rem}
.spx-badges{display:flex;gap:.35rem;flex-wrap:wrap}
.spx-badge{font-size:.75rem;padding:.2rem .6rem;border-radius:999px;background:var(--bg);color:var(--fg-muted);border:1px solid var(--border)}
.spx-badge.is-good{background:var(--brand-soft);color:var(--brand-strong);border-color:transparent}

/* Product page */
.spx-product{padding-block:clamp(1.5rem,4vw,3rem)}
.spx-product-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.spx-gallery{display:flex;flex-direction:column;gap:.75rem;position:sticky;top:6rem}
.spx-gallery-main{border:1px solid var(--border);border-radius:var(--r-md,18px)}
.spx-gallery-strip{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.25rem}
.spx-gallery-thumb{flex:0 0 72px;height:72px;border-radius:12px;border:1px solid var(--border);background:#fff;padding:4px;cursor:pointer}
.spx-gallery-thumb img{width:100%;height:100%;object-fit:contain}
.spx-gallery-thumb.is-active{border:2px solid var(--brand)}
.spx-info{display:flex;flex-direction:column;gap:.85rem;min-width:0}
.spx-info .breadcrumbs{margin-bottom:.25rem}
.spx-title{font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:600;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
.spx-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem 1.25rem;padding:1rem 0;border-block:1px solid var(--border);margin:.25rem 0}
.spx-facts dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-subtle);font-weight:600}
.spx-facts dd{margin:.15rem 0 0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.spx-info .spx-price{font-size:1.1rem}
.spx-info .spx-price b{font-size:1.6rem}
.spx-cta{align-self:flex-start;margin-top:.25rem}

.spx-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem}
.spx-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md,18px);padding:1.4rem;min-width:0}
.spx-block p{color:var(--fg-muted);max-width:68ch}
.spx-block p+p{margin-top:.75rem}
.spx-block .spx-h3:not(:first-child){margin-top:1.25rem}
.spx-table-wrap{overflow-x:auto}
.spx-spec,.spx-variants{width:100%;border-collapse:collapse;font-size:.92rem}
.spx-spec th,.spx-spec td,.spx-variants th,.spx-variants td{text-align:start;padding:.6rem .5rem;border-bottom:1px solid var(--border);vertical-align:top}
.spx-spec th{color:var(--fg-muted);font-weight:500;width:42%}
.spx-variants thead th{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-subtle);font-weight:600}
.spx-variants .is-num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.spx-sub{display:block;color:var(--fg-subtle);font-size:.8rem}
.spx-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.spx-tags li{padding:.3rem .7rem;border-radius:8px;background:var(--bg);border:1px solid var(--border);font-size:.85rem;font-variant-numeric:tabular-nums}
.spx-list{margin-left:1.1rem;list-style:disc;color:var(--fg-muted);display:grid;gap:.3rem}
.spx-downloads{display:grid;gap:.5rem}
.spx-downloads a{display:flex;gap:.75rem;align-items:center;padding:.7rem .85rem;border-radius:12px;border:1px solid var(--border);color:var(--fg);text-decoration:none}
.spx-downloads a:hover{border-color:var(--brand)}
.spx-downloads svg{width:22px;height:22px;flex:0 0 22px;color:var(--brand-strong)}
.spx-downloads strong{display:block;font-weight:600;font-size:.92rem}
.spx-downloads small{color:var(--fg-subtle);font-size:.8rem}

/* Forms */
.spx-enquiry{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.spx-quote-item{margin-top:1rem;font-weight:600}
.spx-form{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md,18px);padding:clamp(1.1rem,3vw,1.75rem)}
.spx-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1rem}
.spx-field{display:flex;flex-direction:column;gap:.35rem;font-size:.88rem;font-weight:500;min-width:0}
.spx-field em{font-style:normal;color:var(--fg-subtle)}
.spx-field.is-wide{grid-column:1/-1}
.spx-field input,.spx-field select,.spx-field textarea{width:100%;padding:.7rem .85rem;border-radius:10px;border:1px solid var(--border-strong);background:var(--bg-alt);color:var(--fg);font:inherit;font-weight:400}
.spx-field input:focus,.spx-field select:focus,.spx-field textarea:focus{outline:2px solid var(--brand);outline-offset:1px}
.spx-hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.spx-check{display:flex;gap:.6rem;align-items:flex-start;margin-top:1rem;font-size:.86rem;color:var(--fg-muted)}
.spx-check input{margin-top:.2rem;flex:0 0 auto}
.spx-check a{color:var(--brand-strong)}
.spx-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1.1rem}
.spx-form-note{color:var(--fg-subtle);font-size:.85rem}
.spx-form-status{margin-top:.75rem;font-size:.9rem}
.spx-form-status.is-error{color:var(--danger-600,#b42318)}
.spx-thanks{display:grid;gap:.4rem}
.spx-thanks strong{font-size:1.1rem;font-weight:600;color:var(--brand-strong)}
.spx-thanks p{color:var(--fg-muted)}
.spx-message{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;font-size:1.05rem;color:var(--fg-muted)}

/* Phase 8: cart */
.spx-cart-link{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.92rem;color:var(--brand-strong);text-decoration:none;padding:.45rem .95rem;border-radius:999px;border:1px solid var(--border-strong);align-self:flex-start}
.spx-cart-link:hover{border-color:var(--brand)}
.spx-hero .spx-cart-link{margin-top:1.25rem;color:var(--ap-on-tile,#fff);border-color:rgba(255,255,255,.3)}
.spx-addcart{display:grid;gap:.4rem;padding:1rem;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.spx-addcart-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end}
.spx-addcart select,.spx-qty{padding:.65rem .8rem;border-radius:10px;border:1px solid var(--border-strong);background:var(--bg-alt);color:var(--fg);font:inherit}
.spx-addcart select{flex:1 1 180px;min-width:0}
.spx-qty{width:6.5rem}
.spx-qty-label{display:flex;flex-direction:column;gap:.2rem;font-size:.78rem;color:var(--fg-subtle)}
.spx-cart td{vertical-align:middle}
.spx-remove{background:none;border:0;color:var(--fg-subtle);text-decoration:underline;cursor:pointer;font:inherit;font-size:.85rem;padding:.25rem}
.spx-remove:hover{color:var(--danger-600,#b42318)}
.spx-cart-totals{display:grid;gap:.4rem;margin-top:1rem;justify-items:end;text-align:end}
.spx-cart-sum{display:flex;gap:1rem;align-items:baseline;font-variant-numeric:tabular-nums}
.spx-cart-sum b{font-size:1.25rem;font-weight:600}
@media (max-width:560px){.spx-cart.has-prices th:nth-child(2),.spx-cart.has-prices td:nth-child(2){display:none}.spx-cart .spx-qty{width:4.5rem}.spx-cart th,.spx-cart td{padding:.55rem .35rem}.spx-block{padding:1rem}}
@media (max-width:900px){
  .spx-product-grid,.spx-enquiry{grid-template-columns:1fr}
  .spx-gallery{position:static}
}
@media (max-width:560px){
  .spx-form-grid{grid-template-columns:1fr}
  .spx-grid{grid-template-columns:1fr 1fr;gap:.65rem}
  .spx-card-body{padding:.8rem .85rem .9rem}
  .spx-card-summary{display:none}
}
@media (max-width:380px){.spx-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.spx-cat,.spx-card{transition:none}}
[dir="rtl"] .spx-hero .breadcrumbs svg,[dir="rtl"] .spx-info .breadcrumbs svg{transform:scaleX(-1)}