/* omniat.net additions on top of the shared Noor site.css.
   Kept in a second file so site.css stays byte-identical to the Noor copy and
   the two can be diffed when the palette changes. */

/* The company page has no app icon of its own, so the masthead carries a
   typographic wordmark rather than an invented logo. */
.company-mark {
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 3.1rem);
  font-weight: 400;
  letter-spacing: .09em;
  color: var(--green);
  line-height: 1;
  margin-bottom: .35rem;
}
[lang="ar"] .company-mark { font-family: var(--display-ar); letter-spacing: 0; }

/* Registered particulars: a definition list, so the entity name and its
   identifiers stay machine-readable for the store verifiers who read this. */
.particulars {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .55rem 1.4rem;
  margin: 0;
  padding: 1.35rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.particulars dt {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  align-self: baseline;
}
[lang="ar"] .particulars dt { letter-spacing: 0; text-transform: none; font-size: .88rem; }
.particulars dd { margin: 0; color: var(--ink); }
.particulars dd strong { color: var(--green); }

@media (max-width: 34rem) {
  .particulars { grid-template-columns: 1fr; gap: .15rem; padding: 1.2rem 1.25rem; }
  .particulars dd { margin-bottom: .8rem; }
  .particulars dd:last-child { margin-bottom: 0; }
}

/* Single product entry — the .features grid is built for three cards and
   leaves one stranded, so the product gets its own row. */
.product {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 14px 32px rgba(12, 44, 29, .10);
}
.product img { border-radius: 24%; flex: none; }
.product-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.product-text strong { font-family: var(--display); font-size: 1.25rem; font-weight: 400; color: var(--green); letter-spacing: .03em; }
[lang="ar"] .product-text strong { font-family: var(--display-ar); letter-spacing: 0; }
.product-text span { color: var(--ink-soft); font-size: .93rem; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .product, .product:hover { transition: none; transform: none; }
}