/* Bin Obaid photographic cover and icon-first category cards.
   Deliberately independent from the large base theme. 2026-11-11 */
.hero.hero-photo{
  position:relative;isolation:isolate;overflow:hidden;
  color:#fff;background-color:#0f172a;
  background-image:linear-gradient(105deg,rgba(11,22,36,.72),rgba(11,22,36,.57)),
    url("https://images.unsplash.com/photo-1503387762-592deb58ef4e?q=82&w=1800&auto=format&fit=crop");
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
.hero-photo-shade{position:absolute;inset:0;background:rgba(15,23,42,.36);pointer-events:none;z-index:-1}
.hero-photo .hero-photo-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:520px;padding-block:clamp(76px,10vw,124px) clamp(92px,11vw,132px);text-align:center}
.hero-photo .hero-copy{width:min(100%,850px);margin-inline:auto}
.hero-photo .eyebrow{color:#eddca9;justify-content:center;margin-bottom:18px}
.hero-photo .eyebrow-dot{background:#d4af37}
.hero-photo .eyebrow-line{background:rgba(212,175,55,.6)}
.hero-photo h1{color:#fff;font-size:clamp(31px,4.2vw,57px);line-height:1.5;letter-spacing:-1.2px;text-shadow:0 3px 14px rgba(0,0,0,.48);margin:0 auto 19px;max-width:850px}
.hero-photo .hero-description{color:#e0e7ef;font-size:clamp(14px,1.5vw,18px);line-height:2;max-width:760px;margin:0 auto 27px;text-wrap:pretty}
.hero-photo .hero-buttons{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.hero-photo .hero-buttons .button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;border-radius:9px;padding:12px 28px;font-size:14px;font-weight:900;transition:transform .2s,background .2s,color .2s,border-color .2s}
.hero-photo .button-primary{background:#d4af37!important;border:2px solid #d4af37!important;color:#111827!important;box-shadow:0 8px 24px rgba(0,0,0,.16)}
.hero-photo .button-ghost{background:rgba(15,23,42,.24)!important;border:2px solid #d4af37!important;color:#f4d87a!important;backdrop-filter:blur(4px)}
.hero-photo .button-primary:hover{background:#f0cd68!important;border-color:#f0cd68!important}
.hero-photo .button-ghost:hover{background:rgba(212,175,55,.13)!important;color:#fff!important}
.hero-photo .hero-highlights{justify-content:center;gap:12px 28px;max-width:850px;color:#e0e7ef;font-size:12px;border-top:1px solid rgba(255,255,255,.22);margin:29px auto 0;padding-top:19px}
.hero-photo .highlight-icon{background:rgba(212,175,55,.17);color:#ffe09b}
.hero-photo .chat-symbol{color:#d4af37}
.hero-photo .hero-bottom{position:absolute;bottom:0;inset-inline:0;z-index:2;background:rgba(9,18,32,.58);border-top:1px solid rgba(255,255,255,.13);backdrop-filter:blur(3px)}
.hero-photo .hero-bottom-inner,.hero-photo .hero-bottom-inner a{color:#e0e7ef}
.hero-photo .hero-bottom-inner a:hover{color:#f9d579}
.hero-photo .button:focus-visible,.category-card a:focus-visible,.directory-card a:focus-visible{outline:3px solid #f7d477;outline-offset:3px}

/* Compact premium-dark cards for all home categories, including DB-generated ones */
.categories-grid .category-card{
  display:grid;grid-template-columns:58px minmax(0,1fr);align-content:start;align-items:center;
  gap:0 14px;min-height:246px;padding:22px 21px;border:1px solid #334155;
  border-radius:14px;background:#1e293b;box-shadow:0 7px 19px rgba(12,28,49,.06);
  color:#fff;text-align:right;transition:transform .25s,box-shadow .25s,border-color .25s
}
.categories-grid .category-card:hover,.categories-grid .category-card:focus-within{transform:translateY(-5px);border-color:#d4af37;box-shadow:0 16px 34px rgba(13,25,41,.2)}
.categories-grid .category-card[hidden]{display:none!important}
.categories-grid .category-top{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.categories-grid .category-count{color:#bac7d7;font-size:11px;letter-spacing:0}
.categories-grid .category-arrow{color:#d4af37;border-color:#536477}
.categories-grid .category-illustration{grid-column:1;grid-row:auto;width:56px;height:56px;min-height:56px;
  border-radius:50%;margin:0;padding:13px;display:grid;place-items:center;
  background:rgba(212,175,55,.12)!important;color:#d4af37!important}
.categories-grid .category-illustration svg{display:block;width:28px;height:28px;max-width:28px;max-height:28px;stroke:currentColor}
.categories-grid .category-illustration span{font-size:25px}
.categories-grid .category-card h3{grid-column:2;font-size:clamp(14px,1.6vw,19px);line-height:1.65;color:#fff;font-weight:900;margin:0}
.categories-grid .category-card p{grid-column:1/-1;color:#aebed1;font-size:12px;line-height:1.85;margin:17px 0 19px}
.categories-grid .category-card>a:not(.category-card){grid-column:1/-1;display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;margin-top:auto;
  padding-top:11px;color:#e1be55;font-weight:900;font-size:12px;text-decoration:none}
.categories-grid .category-card>a:not(.category-card):hover{color:#ffe49a}
.categories-grid .category-more{display:flex;align-items:flex-start;justify-content:center;gap:12px}
.categories-grid .category-more .category-illustration{margin:0 0 12px}
.categories-grid .category-more h3,.categories-grid .category-more p{margin:0;color:#fff}
.categories-grid .category-more p{color:#afbed0;margin-top:8px}

/* Keep the same icon-led visual language on the main /categories page */
.category-directory .directory-card{
  background:#1e293b;border:1px solid #334155;border-radius:14px;
  padding:24px;color:#fff;transition:transform .25s,box-shadow .25s,border-color .25s
}
.category-directory .directory-card:hover,.category-directory .directory-card:focus-within{border-color:#d4af37;transform:translateY(-4px);box-shadow:0 16px 34px rgba(13,25,41,.17)}
.category-directory .directory-icon{width:58px;height:58px;min-height:58px;display:grid;place-items:center;
  padding:14px;margin:0 0 15px;border-radius:50%;background:rgba(212,175,55,.12);color:#d4af37}
.category-directory .directory-icon svg{width:28px;height:28px}
.category-directory .directory-card h2{color:#fff;font-size:20px;line-height:1.65}
.category-directory .directory-card p{color:#aebed1;line-height:1.9}
.category-directory .directory-count{color:#e1be55}
.category-directory .directory-card .directory-main-link{display:inline-flex;color:#e1be55;padding-block:10px}
.category-directory .directory-subgroups{border-top-color:#405267}
.category-directory .directory-subgroup{background:#27364b;border:1px solid #405267;color:#ecf2f8}
.category-directory .directory-subgroup:hover{background:#32465b;border-color:#d4af37}
.category-directory .directory-subgroup span{color:#e5c66c}

@media(max-width:900px){
  .hero-photo .hero-photo-inner{min-height:460px}
  .hero-photo .hero-bottom-inner span:first-child{display:none}
  .categories-grid .category-card{padding:20px 17px;min-height:242px}
}
@media(max-width:600px){
  .hero-photo{background-position:55% center}
  .hero-photo .hero-photo-inner{min-height:500px;padding:68px 18px 92px}
  .hero-photo h1{font-size:clamp(27px,7.3vw,37px);letter-spacing:-.7px;line-height:1.5}
  .hero-photo .eyebrow{font-size:11px}
  .hero-photo .hero-description{font-size:13px;line-height:1.95}
  .hero-photo .hero-buttons{width:100%;gap:11px}
  .hero-photo .hero-buttons .button{width:100%;max-width:340px;min-height:49px;font-size:13px}
  .hero-photo .hero-highlights{gap:9px 16px;font-size:10px;margin-top:24px}
  .hero-photo .hero-bottom-inner{justify-content:center;min-height:42px}
  .hero-photo .hero-bottom-inner span:nth-child(2){display:none}
  .categories-grid .category-card{padding:17px 15px;grid-template-columns:48px minmax(0,1fr);gap:0 10px;min-height:225px}
  .categories-grid .category-illustration{width:48px;height:48px;min-height:48px;padding:10px}
  .categories-grid .category-illustration svg{width:26px;height:26px}
  .categories-grid .category-card h3{font-size:14px}
  .categories-grid .category-card p{font-size:11px}
}
@media(max-width:400px){
  .categories-grid{grid-template-columns:1fr}
  .categories-grid .category-card{min-height:190px}
}
@media(prefers-reduced-motion:reduce){
  .hero-photo .hero-buttons .button,.categories-grid .category-card,.category-directory .directory-card{transition:none!important}
}
.hero-product-search{width:min(650px,100%);margin:24px 0 4px;padding:14px 16px;border:1px solid rgba(255,255,255,.24);border-radius:16px;background:rgba(12,19,32,.72);backdrop-filter:blur(12px);box-shadow:0 16px 36px rgba(0,0,0,.2);display:grid;gap:9px;color:#fff;text-align:start}
.hero-product-search>label{font-size:12px;font-weight:900;color:#fff}
.hero-product-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}
.hero-product-search-row input{width:100%;min-width:0;min-height:54px;padding:12px 15px;border:1px solid rgba(255,255,255,.25);border-radius:10px;background:#fff;color:#162a36;font:inherit;font-size:14px}
.hero-product-search-row input:focus{outline:3px solid rgba(226,156,64,.65);outline-offset:2px}
.hero-product-search-row button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:10px 17px;border:0;border-radius:10px;background:#d78a32;color:#101820;font:inherit;font-size:13px;font-weight:900;cursor:pointer}
.hero-product-search-row button:hover{background:#eda84b}
.hero-product-search-row button svg{width:19px;height:19px}
.hero-product-search>p{margin:0;color:rgba(255,255,255,.76);font-size:11px;line-height:1.7}
@media(max-width:600px){.hero-product-search{padding:12px;border-radius:13px}.hero-product-search-row{grid-template-columns:1fr}.hero-product-search-row input,.hero-product-search-row button{min-height:48px}.hero-product-search-row button{width:100%}}