/* Almstafid - Accessories & Hardware. Namespaced to avoid breaking existing styles. */
#hardware { scroll-margin-top: 100px; }
.amh-section, .amh-section * { box-sizing: border-box; }
.amh-section {
  position: relative;
  padding: clamp(58px, 7vw, 100px) 22px 84px;
  background: radial-gradient(ellipse 420px 340px at -5% 20%, #d7f1ff 0%, transparent 85%),
              radial-gradient(ellipse 440px 360px at 104% 15%, #dff3ff 0%, transparent 85%),
              linear-gradient(180deg, #fafdff 0%, #f0f9ff 100%);
  overflow: hidden;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.amh-section::before { content: ""; position: absolute; top: -190px; right: -180px;
  width: 360px; height: 360px; border: 64px solid rgba(7,138,231,.07); border-radius: 50%; pointer-events:none; }
.amh-container { max-width: 1380px; margin-inline: auto; position: relative; z-index: 1; }
.amh-heading { text-align: center; margin: 0 auto 31px; }
.amh-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px;
  letter-spacing: 3px; color: #1682cc; font-weight: 800; }
.amh-eyebrow::before,.amh-eyebrow::after { content:""; height: 1px; width: 24px; background: #73c8f9; }
.amh-heading h2 { font-size: clamp(30px, 4.1vw, 55px); line-height: 1.15;
  font-weight: 850; margin: 10px 0 8px; letter-spacing: -1.5px; color: #092449; }
.amh-heading h2 span { color: #098cea; }
.amh-heading p { margin: 0 auto; max-width: 600px; font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.6; color: #556980; }
.amh-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; align-items: stretch; }
.amh-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: #fff; border: 1px solid #e2eef7; border-radius: 18px;
  box-shadow: 0 9px 28px rgba(13,71,118,.055); transition: transform .22s ease, box-shadow .22s ease; }
.amh-card:hover { transform: translateY(-4px); box-shadow: 0 17px 37px rgba(13,71,118,.11); }
.amh-card[hidden] { display: none !important; }
.amh-photo { position: relative; height: clamp(165px,18vw,230px); padding: 12px 17px 0;
  display: grid; place-items: center; isolation: isolate; overflow: hidden; }
.amh-photo-glow { position: absolute; z-index: -1; width: min(78%,215px);
  aspect-ratio: 1; border-radius: 50%; background: #e9f7ff; top: 10px; left: 50%; transform: translateX(-50%); }
.amh-photo img { display: block; max-width: 100%; width: 100%; height: 100%;
  object-fit: contain; object-position: center; filter: none !important; box-shadow: none !important; }
.amh-missing-photo { position: absolute; inset: 0; display: none; place-content: center;
  gap: 9px; text-align: center; color: #9bbbd0; }
.amh-missing-photo .fa-solid { font-size: 38px; }
.amh-missing-photo small { font-size: 12px; }
.amh-photo.amh-is-missing img { display: none; }
.amh-photo.amh-is-missing .amh-missing-photo { display: grid; }
.amh-card-content { padding: 7px 20px 14px; display: flex; flex-direction: column; flex: 1; }
.amh-card h3 { margin: 0 0 13px; color: #092449; font-weight: 800;
  font-size: clamp(14px, 1.16vw, 17px); line-height: 1.35; min-height: 45px; }
.amh-specs { padding: 0; margin: 0 0 17px; list-style: none; display: grid; gap: 8px; }
.amh-specs li { display: flex; align-items: center; gap: 10px; min-width: 0;
  color: #344b68; font-size: 13px; line-height: 1.3; }
.amh-specs li > span:last-child { min-width: 0; }
.amh-spec-icon { flex: 0 0 34px; width: 34px; height: 34px;
  display: inline-grid; place-items: center; border-radius: 50%;
  color: #0b5598; background: #def4ff; font-size: 13px; }
.amh-ask { margin-top: auto; width: min(100%,224px); min-height: 44px;
  align-self: center; display: flex; align-items: center; justify-content: center; gap: 12px;
  text-decoration: none !important; font-weight: 750; color: #fff !important;
  font-size: 13px; border-radius: 100px; background: linear-gradient(90deg,#06b7f7,#0879ed);
  box-shadow: 0 6px 17px rgba(0,135,224,.13); padding: 5px 8px 5px 22px; }
.amh-ask:hover,.amh-ask:focus-visible { background: linear-gradient(90deg,#00a0e8,#0367d3); }
.amh-ask i { display: grid; place-items: center; background: #fff; color: #087fe9;
  height: 31px; width: 31px; flex: 0 0 31px; border-radius: 50%; margin-left: auto; }
.amh-show-more { display: flex; align-items: center; justify-content: center; gap: 13px;
  background: #fff; color: #0a70ca; border: 1.5px solid #b3e0ff;
  font-size: 14px; font-weight: 800; border-radius: 999px; cursor: pointer;
  padding: 14px 27px; margin: 35px auto 0; }
.amh-show-more:hover,.amh-show-more:focus-visible { background: #e6f6ff; }
.amh-show-more .fa-solid { transition: transform .2s; }
.amh-show-more[aria-expanded="true"] .fa-solid { transform: rotate(180deg); }
.amh-quick-contact { position: fixed; right: 18px; bottom: 24px;
  z-index: 950; display: flex; flex-direction: column; gap: 9px; }
.amh-quick-contact a { display: grid; place-items: center; width: 49px; height: 49px;
  border: 2px solid #fff; border-radius: 50%; text-decoration: none !important;
  box-shadow: 0 5px 15px rgba(0,28,63,.2); color: #fff !important; font-size: 24px; }
.amh-quick-whatsapp { background: #20c75a; }
.amh-quick-phone { background: linear-gradient(135deg,#08bdf5,#0865e6); }
@media(max-width: 1160px) { .amh-grid {grid-template-columns: repeat(3,minmax(0,1fr));} .amh-photo{height:210px;} }
@media(max-width: 740px) {
  .amh-section { padding: 62px 12px 76px; }
  .amh-grid {grid-template-columns: repeat(2,minmax(0,1fr));gap: 12px;}
  .amh-heading{margin-bottom:27px;}
  .amh-heading h2{letter-spacing:-.7px;}
  .amh-card{border-radius:15px;}
  .amh-photo{height: 155px; padding: 8px 9px 0;}
  .amh-photo-glow{width:75%;}
  .amh-card-content{padding:8px 10px 12px;}
  .amh-card h3{font-size:13px;min-height:38px;margin-bottom:10px;}
  .amh-specs{gap:7px;margin-bottom:12px;}
  .amh-specs li{font-size:11px;gap:6px;line-height:1.3;}
  .amh-spec-icon{width:27px;height:27px;flex-basis:27px;font-size:11px;}
  .amh-ask{font-size:12px;gap:3px;min-height:37px;padding:4px 5px 4px 10px;}
  .amh-ask i{width:28px;height:28px;flex-basis:28px;}
  .amh-quick-contact{right:11px;bottom:14px;}
  .amh-quick-contact a{width:43px;height:43px;font-size:21px;}
}
@media(max-width:350px){.amh-section{padding-inline:15px}.amh-grid{grid-template-columns:1fr}.amh-photo{height:220px}}
@media(prefers-reduced-motion:reduce){.amh-card,.amh-ask,.amh-show-more .fa-solid{transition:none!important}}