/* Add custom CSS styles below */ 
:root {
  --mj-brown: #3b2a1a;
  --mj-gold: #c8a96a;
  --mj-cream: #e9dfcc;
  --mj-olive: #55603a;
  --mj-charcoal: #1f1f1f;
  --mj-ink: #2a2017;
  --mj-soft: #f7f1e7;
  --mj-line: rgba(200, 169, 106, .38);
  --mj-shadow: 0 14px 34px rgba(59, 42, 26, .13);
}

html,
body {
  background:
    radial-gradient(circle at 85% 12%, rgba(200, 169, 106, .2), transparent 28rem),
    linear-gradient(180deg, #fffaf1 0%, var(--mj-soft) 42%, #f4ebdc 100%) !important;
  color: var(--mj-ink) !important;
  letter-spacing: 0 !important;
}

body,
button,
input,
textarea,
select {
  letter-spacing: 0 !important;
}

a {
  color: inherit;
}

.store-header,
header.store-header {
  background: linear-gradient(90deg, rgba(31, 31, 31, .94), rgba(59, 42, 26, .95)) !important;
  border-bottom: 1px solid rgba(200, 169, 106, .34) !important;
  box-shadow: 0 16px 38px rgba(31, 31, 31, .2) !important;
  backdrop-filter: blur(12px);
}

.store-header img[alt*="متاجر"],
.store-header .navbar-brand img,
.store-header a[href$="/ar"] img {
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .22));
  transform: scale(1.06);
}

.header-btn,
.bottom-header-icon,
.s-cart-summary-wrapper,
.mburger,
.store-header button,
.store-header a {
  color: #f7eddc !important;
}

.header-btn,
.s-cart-summary-wrapper {
  border: 1px solid rgba(200, 169, 106, .32) !important;
  border-radius: 999px !important;
  background: rgba(233, 223, 204, .08) !important;
}

.s-cart-summary-count,
.s-cart-summary-total,
.s-cart-summary-wrapper span,
.s-cart-summary-wrapper p {
  color: var(--mj-gold) !important;
}

img[alt="hero banner"],
.main-slider img,
.s-block--fixed-banner img {
  border-radius: 0 0 18px 18px !important;
  filter: saturate(.9) contrast(1.04) sepia(.1) brightness(.92);
}

section > h2,
.s-block__title h2,
h2,
h3:not(.s-product-card-content-title),
.section-title {
  color: var(--mj-brown) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

h2,
.s-block__title h2 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-block: 26px 18px !important;
}

h2::before,
h2::after,
.s-block__title h2::before,
.slide--cat-entry {
    border-radius: .375rem;
    flex-direction: column;
    height: 10rem;
    overflow: hidden;
    --tw-bg-opacity: 1;
    align-items: center;
    background-color: #fff;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1));
    display: initial;
    text-align: center;
    transition-duration: .5s;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}