/* AZ Techcom upgrade styles — scoped with the azc- prefix so existing pages are unaffected */
.azc-section { padding: 28px 0 10px; }
.azc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.azc-head h2 { font-size: 26px; font-weight: 800; margin: 0; color: #111827; }
.azc-build { background: linear-gradient(90deg, #f7a600, #f26b1d); color: #fff !important; font-weight: 700; padding: 9px 16px; border-radius: 999px; text-decoration: none; box-shadow: 0 6px 16px rgba(242,107,29,.3); }
.azc-build:hover { filter: brightness(1.05); transform: translateY(-1px); }
.azc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
.azc-tile { --c: #f26b1d; position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 16px; border-radius: 16px; overflow: hidden; isolation: isolate; text-decoration: none !important;
  background: linear-gradient(155deg, color-mix(in srgb, var(--c) 22%, #fff) 0%, color-mix(in srgb, var(--c) 7%, #fff) 62%, #fff 100%);
  border: 1px solid color-mix(in srgb, var(--c) 28%, #e5e7eb); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.azc-tile::before { content: ""; position: absolute; width: 170px; height: 170px; right: -48px; top: -54px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 45%, transparent) 0%, transparent 70%); z-index: -1; transition: transform .3s ease; }
.azc-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 30px color-mix(in srgb, var(--c) 30%, transparent); border-color: var(--c); }
.azc-tile:hover::before { transform: scale(1.25); }
.azc-pic { height: 124px; margin: 2px 0 8px; display: grid; place-items: center; position: relative; }
.azc-pic > * { grid-area: 1 / 1; }
.azc-initial { width: 78px; height: 78px; border-radius: 22px; display: grid; place-items: center; font-size: 38px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #000)); box-shadow: 0 10px 20px color-mix(in srgb, var(--c) 35%, transparent); }
.azc-initial { display: none; }
.azc-pic.noimg .azc-initial { display: grid; }
.azc-pic.loading::after { content: ""; width: 70%; height: 80%; border-radius: 14px; background: linear-gradient(100deg, color-mix(in srgb, var(--c) 8%, #fff) 30%, color-mix(in srgb, var(--c) 18%, #fff) 50%, color-mix(in srgb, var(--c) 8%, #fff) 70%); background-size: 200% 100%; animation: azc-shimmer 1.2s linear infinite; grid-area: 1 / 1; }
.azc-pic.loading img { opacity: 0; }
.azc-pic img { transition: opacity .3s ease, transform .25s ease; }
@keyframes azc-shimmer { to { background-position: -200% 0; } }
.azc-pic img { max-width: 100%; max-height: 124px; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(0 8px 10px rgba(15,23,34,.18)); transition: transform .25s ease; }
.azc-tile:hover .azc-pic img { transform: scale(1.07) rotate(-1.5deg); }
.azc-name { font-weight: 800; font-size: 15px; line-height: 1.25; color: #111827; }
.azc-count { font-size: 12.5px; font-weight: 700; color: color-mix(in srgb, var(--c) 75%, #111827); display: flex; justify-content: space-between; }
.azc-count b { opacity: 0; transform: translateX(-6px); transition: .18s; }
.azc-tile:hover .azc-count b { opacity: 1; transform: none; }
.azc-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.azc-pills a { --c: #f26b1d; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none !important;
  background: color-mix(in srgb, var(--c) 10%, #fff); border: 1px solid color-mix(in srgb, var(--c) 30%, #e5e7eb); color: color-mix(in srgb, var(--c) 70%, #111827); transition: .15s; }
.azc-pills a span { font-size: 11px; opacity: .75; }
.azc-pills a:hover { background: var(--c); color: #fff; border-color: var(--c); }
@media (max-width: 700px) {
  .azc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .azc-pic { height: 96px; } .azc-pic img { max-height: 96px; }
  .azc-head h2 { font-size: 21px; }
}

/* ---------- category page banner ---------- */
.azb { --c: #f26b1d; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 18px; padding: 22px 26px; min-height: 128px; border-radius: 18px; color: #fff;
  background: radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--c) 55%, #fff) 0%, transparent 45%), linear-gradient(120deg, color-mix(in srgb, var(--c) 82%, #000) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 70%, #fff) 100%); }
.azb::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.5px); background-size: 16px 16px; pointer-events: none; }
.azb-txt { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; min-width: 0; }
.azb-chip { width: 54px; height: 54px; flex: none; border-radius: 15px; display: grid; place-items: center; font-size: 26px; font-weight: 800; background: rgba(255,255,255,.22); color: #fff; }
.azb-title { font-size: clamp(22px, 3vw, 32px); font-weight: 800; line-height: 1.15; color: #fff; }
.azb-sub { font-size: 14px; color: rgba(255,255,255,.9); margin-top: 3px; }
.azb-pics { display: flex; align-items: center; position: relative; z-index: 1; flex: none; padding-right: 6px; }
.azb-pic { width: 100px; height: 100px; border-radius: 16px; background: #fff; display: grid; place-items: center; padding: 8px; box-shadow: 0 10px 24px rgba(0,0,0,.22); transition: transform .2s; }
.azb-pic + .azb-pic { margin-left: -16px; }
.azb-p0 { transform: rotate(-6deg); } .azb-p1 { transform: translateY(-8px) rotate(3deg); z-index: 1; } .azb-p2 { transform: rotate(7deg); }
.azb-pic:hover { transform: scale(1.08); z-index: 2; }
.azb-pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* the page's own heading stays for Google, the banner shows it visually */
.azb ~ .tt-filters-options h1.tt-title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 700px) { .azb { padding: 16px; min-height: 0; } .azb-pics { display: none; } .azb-chip { width: 44px; height: 44px; font-size: 21px; } }