/* MAKEEL identity — Raed / Salla
   Append after existing custom CSS; preview before publishing.
   Palette inspired by the supplied logo. Uses the store's loaded font.
   Remove this entire block to revert. */

:root {
  --mk-paper: #fcf9f4;
  --mk-surface: #fffdfa;
  --mk-ink: #454541;
  --mk-muted: #706c65;
  --mk-line: #e4ddd3;
  --mk-soft: #f1ece4;
  --color-primary: #454541;
  --color-primary-dark: #30302d;
  --color-primary-light: #65655f;
  --color-primary-reverse: #ffffff;
}

body {
  background-color: var(--mk-paper);
  color: var(--mk-ink);
  font-family: var(--font-main, "El Messiri"), Tahoma, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.store-header,
#mainnav .inner,
.main-nav-container {
  background-color: var(--mk-paper);
  color: var(--mk-ink);
}

#mainnav .inner {
  border-bottom: 1px solid var(--mk-line);
  box-shadow: 0 4px 18px rgb(69 69 65 / 4%);
}

.top-navbar {
  background-color: var(--mk-soft);
  color: var(--mk-ink);
  border-bottom: 1px solid var(--mk-line);
}

.store-header .header-btn__icon {
  color: var(--mk-ink);
  border-color: var(--mk-line);
}

.main-menu > li > a {
  color: var(--mk-ink);
  font-weight: 600;
}

.s-block__title h2,
.s-product-card-content-title a {
  color: var(--mk-ink);
  line-height: 1.65;
}

.s-product-card-entry {
  background-color: var(--mk-surface);
  border: 1px solid var(--mk-line);
  border-radius: 12px;
  box-shadow: 0 3px 14px rgb(69 69 65 / 3%);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.s-product-card-image {
  background-color: var(--mk-surface);
  border-start-start-radius: 11px;
  border-start-end-radius: 11px;
}

.s-product-card-price {
  color: var(--mk-ink);
  font-weight: 700;
}

.s-product-card-content-subtitle,
.s-breadcrumb-item {
  color: var(--mk-muted);
}

.s-button-primary {
  background-color: var(--mk-ink);
  border-color: var(--mk-ink);
  color: #ffffff;
  border-radius: 8px;
  box-shadow: none;
}

.s-button-outline-primary {
  background-color: transparent;
  border-color: var(--mk-ink);
  color: var(--mk-ink);
  border-radius: 8px;
}

.s-button-primary:disabled,
.s-button-outline-primary:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.s-form-control,
.s-search-input {
  border-color: var(--mk-line);
  background-color: var(--mk-surface);
  color: var(--mk-ink);
  border-radius: 8px;
}

.s-form-control::placeholder,
.s-search-input::placeholder {
  color: var(--mk-muted);
  opacity: 1;
}

.store-footer,
.store-footer__inner {
  background-color: var(--mk-soft);
  color: var(--mk-ink);
}

.store-footer__inner {
  border-top: 1px solid var(--mk-line);
}

.store-footer h3,
.store-footer a,
.store-footer .s-contacts-item,
.store-footer .s-social-link {
  color: var(--mk-ink);
}

.store-footer .s-social-link {
  border-color: var(--mk-line);
}

/* Keep keyboard navigation visible. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--mk-ink);
  outline-offset: 4px;
}

@media (hover: hover) {
  .s-product-card-entry:hover {
    border-color: #bdb4a7;
    box-shadow: 0 8px 24px rgb(69 69 65 / 8%);
  }
  .s-button-primary:not(:disabled):hover {
    background-color: #30302d;
    border-color: #30302d;
  }
  .s-button-outline-primary:not(:disabled):hover {
    background-color: var(--mk-soft);
  }
  .main-menu > li > a:hover,
  .store-footer a:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .s-product-card-entry { transition: none; }
}