/*
 * The single storefront template.
 *
 * Colours, corner radius and hero overlay come from CSS variables the Blade
 * template writes out of `theme_settings`, so a merchant restyles the store
 * without anyone touching this file.
 */

.mj-announcement {
    background: var(--mj-secondary, #111827);
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 16px;
    letter-spacing: .2px;
}

/* ---------- hero ---------- */
.mj-hero { position: relative; overflow: hidden; display: flex; align-items: center; }
.mj-hero-short  { min-height: 320px; }
.mj-hero-medium { min-height: 460px; }
.mj-hero-tall   { min-height: 620px; }

.mj-hero-media,
.mj-hero-media img,
.mj-hero-media video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.mj-hero-media { z-index: 0; }
.mj-hero .carousel, .mj-hero .carousel-inner, .mj-hero .carousel-item { height: 100%; }

.mj-hero-scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, calc(var(--mj-hero-overlay, .35) * .6)) 0%,
        rgba(0, 0, 0, var(--mj-hero-overlay, .35)) 100%);
}

.mj-hero-inner { position: relative; z-index: 2; text-align: center; padding: 56px 16px; color: #fff; }
.mj-hero-title { font-size: clamp(28px, 5vw, 52px); font-weight: 800; margin-bottom: 12px; color: #fff; }
.mj-hero-subtitle { font-size: clamp(15px, 2vw, 19px); max-width: 640px; margin: 0 auto 24px; opacity: .95; }

/* ---------- buttons ---------- */
.mj-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: calc(var(--mj-radius, 16px) / 2);
    padding: 11px 22px; font-weight: 700; font-size: 15px;
    cursor: pointer; text-decoration: none; transition: filter .15s ease, transform .15s ease;
}
.mj-btn:hover { filter: brightness(.94); transform: translateY(-1px); }
.mj-btn-lg { padding: 14px 34px; font-size: 16px; }
.mj-btn-solid { background: var(--mj-accent, #ff6b00); color: #fff; }
.mj-btn-solid:hover { color: #fff; }
.mj-btn-soft { background: rgba(0, 0, 0, .05); color: #111827; }
.mj-btn-soft:hover { background: rgba(0, 0, 0, .08); color: #111827; }

/* ---------- trust badges ---------- */
.mj-badges { padding: 28px 0; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.mj-badge-item { display: flex; align-items: center; gap: 14px; justify-content: center; }
.mj-badge-item i { font-size: 22px; color: var(--mj-accent, #ff6b00); }
.mj-badge-item strong { display: block; font-size: 15px; color: #111827; }
.mj-badge-item span { display: block; font-size: 13px; color: #6b7280; }

/* ---------- sections ---------- */
.mj-section { padding: 52px 0; }
.mj-section-muted { background: #f8f9fa; }
.mj-section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.mj-section-head h2 { font-size: clamp(20px, 3vw, 28px); font-weight: 800; margin: 0; color: #111827; }
.mj-section-head a { font-size: 14px; font-weight: 600; color: var(--mj-accent, #ff6b00); text-decoration: none; }
.mj-section-head a:hover { text-decoration: underline; }

/* ---------- cards ---------- */
.mj-card {
    background: #fff; border: 1px solid rgba(0, 0, 0, .07);
    border-radius: var(--mj-radius, 16px); overflow: hidden; height: 100%;
    transition: box-shadow .18s ease, transform .18s ease;
}
.mj-card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .09); transform: translateY(-2px); }

.mj-product { display: flex; flex-direction: column; }
.mj-product-media { position: relative; display: block; aspect-ratio: 1 / 1; background: #f3f4f6; }
.mj-product-media img { width: 100%; height: 100%; object-fit: cover; }
.mj-badge {
    position: absolute; inset-inline-start: 10px; top: 10px;
    background: var(--mj-accent, #ff6b00); color: #fff;
    font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
}
.mj-product-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mj-product-title { font-size: 15px; font-weight: 700; margin: 0; line-height: 1.4; }
.mj-product-title a { color: #111827; text-decoration: none; }
.mj-product-title a:hover { color: var(--mj-accent, #ff6b00); }
.mj-product-meta { font-size: 13px; color: #6b7280; display: flex; align-items: center; gap: 6px; }
.mj-product-price { font-size: 17px; font-weight: 800; color: var(--mj-accent, #ff6b00); margin-top: auto; }

.mj-category { position: relative; display: block; aspect-ratio: 4 / 3; }
.mj-category img { width: 100%; height: 100%; object-fit: cover; }
.mj-category-overlay {
    position: absolute; inset: 0; display: flex; align-items: flex-end;
    padding: 14px; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .62) 100%);
}
.mj-category-name { color: #fff; font-weight: 700; font-size: 15px; }

.mj-banner { width: 100%; height: 100%; object-fit: cover; border-radius: var(--mj-radius, 16px); }

.mj-who { text-align: center; }
.mj-who img { width: 84px; height: 84px; object-fit: cover; border-radius: 50%; margin-bottom: 12px; }
.mj-who h3 { font-size: 17px; font-weight: 700; color: #111827; }
.mj-who p { font-size: 14px; color: #6b7280; margin: 0; }

.mj-testimonial {
    background: #fff; border: 1px solid rgba(0, 0, 0, .07);
    border-radius: var(--mj-radius, 16px); padding: 20px; height: 100%;
}
.mj-testimonial p { font-size: 14px; color: #4b5563; margin: 10px 0; }
.mj-testimonial strong { font-size: 14px; color: #111827; }
.mj-stars i { color: #f59e0b; font-size: 13px; }

/* ---------- phones ---------- */
@media (max-width: 767.98px) {
    /* The trust row stacked into three tall lines and pushed the products a
       screen further down; three compact tiles read the same in one line. */
    .mj-badges { padding: 18px 0; }
    .mj-badge-item {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }
    .mj-badge-item i { font-size: 19px; }
    .mj-badge-item strong { font-size: 12px; line-height: 1.35; }
    .mj-badge-item span { font-size: 11px; }
    .mj-badges .row > [class*="col"] { flex: 0 0 33.3333%; max-width: 33.3333%; }
}

@media (max-width: 575.98px) {
    .mj-section { padding: 32px 0; }
    .mj-hero-inner { padding: 36px 16px; }

    /* A hero that fills the whole screen buries everything under it. */
    .mj-hero-short  { min-height: 240px; }
    .mj-hero-medium { min-height: 320px; }
    .mj-hero-tall   { min-height: 400px; }

    .mj-hero-title { font-size: 26px; }
    .mj-hero-subtitle { font-size: 14px; margin-bottom: 18px; }
    .mj-btn-lg { padding: 12px 26px; font-size: 15px; }

    /* Long Arabic headings collided with the "view all" link on one line. */
    .mj-section-head { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 16px; }
    .mj-section-head h2 { font-size: 19px; }

    .mj-product-body { padding: 11px; gap: 6px; }
    .mj-product-title { font-size: 13px; }
    .mj-product-price { font-size: 15px; }
    .mj-btn { padding: 9px 14px; font-size: 13px; }
    .mj-category-name { font-size: 13px; }
}

/* The storefront pins a navigation bar to the bottom on phones; without room
   for it the last section sits underneath and looks cut off. */
@media (max-width: 991.98px) {
    body { padding-bottom: 64px; }
}

/* ---------------------------------------------------------------------------
   Shared storefront chrome
   The header and footer are shared by every page and were not part of the
   template consolidation, so they still carried the original script's styling
   and read as a different product from the page beneath them. These rules pull
   them onto the same design language — same accent, same radius, same spacing —
   without rewriting 2,400 lines of markup.
   --------------------------------------------------------------------------- */

/* Announcement strip sits above the header, so the header must not overlap it. */
.mj-announcement + .top-header,
.mj-announcement + .navbar { border-top: 0; }

.top-header {
    background: var(--mj-secondary, #111827);
    border-bottom: 0 !important;
}
.top-header,
.top-header a,
.top-header .header-contact,
.top-header .header-contact a {
    color: rgba(255, 255, 255, .88) !important;
    font-size: 13px;
}
.top-header a:hover { color: #fff !important; }
.top-header .social-rounded {
    color: #fff !important;
    opacity: .85;
}
.top-header .social-rounded:hover { opacity: 1; }

.main-header {
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.main-header .main-menu a {
    font-weight: 600;
    color: #111827;
    text-decoration: none;
}
.main-header .main-menu a:hover,
.main-header .main-menu a.menu-active {
    color: var(--mj-accent, #ff6b00);
}

/* The mobile bar showed only a globe and the logo, which looked unfinished.
   Give the row real height and spacing so the controls that are there read as
   a deliberate header. */
@media (max-width: 991.98px) {
    .main-header .container { min-height: 58px; }
    .mobile-header { gap: 10px; }
    .main-header .navbar-brand img,
    .main-header .logo-h-55-px { max-height: 42px; width: auto; }
}

/* The storefront's fixed bottom bar on phones. */
.mobile-footer-menu,
.bottom-fixed-menu {
    border-top: 1px solid rgba(0, 0, 0, .08);
    background: #fff;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .06);
}
.mobile-footer-menu a.active,
.bottom-fixed-menu a.active { color: var(--mj-accent, #ff6b00) !important; }

/* ===========================================================================
   Storefront character
   Colour, shape and section rhythm, all driven by data-attributes the header
   writes from `theme_settings`. This is what stops every store on the platform
   from looking like the same store.
   =========================================================================== */

/* ---------- buttons follow the chosen shape ---------- */
.mj-btn { border-radius: var(--mj-btn-radius, 10px); }
.mj-btn-solid {
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--mj-accent) 70%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .mj-btn-solid { box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .35); }
}

/* Gradient accents, when the merchant turns them on. */
body[data-mj-gradient="1"] .mj-btn-solid,
body[data-mj-gradient="1"] .mj-badge {
    background: linear-gradient(135deg, var(--mj-accent), color-mix(in srgb, var(--mj-accent) 45%, var(--mj-secondary)));
}
body[data-mj-gradient="1"] .mj-section-head h2 {
    background: linear-gradient(120deg, var(--mj-secondary), var(--mj-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- section headings ---------- */
body[data-mj-align="center"] .mj-section-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}
/* A short accent rule under the heading gives each section a visual anchor. */
.mj-section-head h2 { position: relative; padding-bottom: 12px; }
.mj-section-head h2::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 46px;
    height: 4px;
    border-radius: 4px;
    background: var(--mj-accent);
}
body[data-mj-align="center"] .mj-section-head h2::after {
    inset-inline-start: 50%;
    transform: translateX(-50%);
}

/* ---------- alternating tint instead of flat grey ---------- */
body[data-mj-tint="1"] .mj-section-muted {
    background: color-mix(in srgb, var(--mj-accent) 5%, #fff);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    body[data-mj-tint="1"] .mj-section-muted { background: #f8f9fa; }
}
body[data-mj-tint="0"] .mj-section-muted { background: #f8f9fa; }

/* ---------- dividers between sections ---------- */
.mj-section + .mj-section { position: relative; }

body[data-mj-divider="line"] .mj-section + .mj-section::before {
    content: "";
    position: absolute; top: 0; inset-inline: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .10), transparent);
}
body[data-mj-divider="gradient"] .mj-section + .mj-section::before {
    content: "";
    position: absolute; top: 0; inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--mj-accent), var(--mj-secondary), transparent);
    opacity: .55;
}
body[data-mj-divider="dots"] .mj-section + .mj-section::before {
    content: "";
    position: absolute; top: 0; inset-inline: 0;
    height: 6px;
    background-image: radial-gradient(circle, var(--mj-accent) 1.6px, transparent 1.7px);
    background-size: 14px 6px;
    background-repeat: repeat-x;
    opacity: .5;
}
body[data-mj-divider="wave"] .mj-section + .mj-section::before {
    content: "";
    position: absolute; top: -1px; inset-inline: 0;
    height: 18px;
    background-repeat: repeat-x;
    background-size: 60px 18px;
    background-image:
        radial-gradient(circle at 15px 22px, transparent 14px, var(--mj-accent) 14px, var(--mj-accent) 15px, transparent 15px);
    opacity: .35;
}

/* ---------- header carries the brand ---------- */
/* The base theme sets `.main-header { background-color: #fff !important }`, so
   these overrides have to answer in kind. */
body[data-mj-header="dark"] .main-header {
    background-color: var(--mj-secondary) !important;
    background-image: none !important;
    border-bottom-color: rgba(255, 255, 255, .10) !important;
}
body[data-mj-header="dark"] .main-header ul li a,
body[data-mj-header="dark"] .main-header .nav-link { color: #fff !important; }
body[data-mj-header="dark"] .main-header ul li a:hover { color: var(--mj-accent) !important; }
body[data-mj-header="dark"] .main-header .main-menu a,
body[data-mj-header="dark"] .main-header i,
body[data-mj-header="dark"] .main-header a { color: #fff !important; }
body[data-mj-header="dark"] .main-header .main-menu a:hover,
body[data-mj-header="dark"] .main-header .main-menu a.menu-active { color: var(--mj-accent) !important; }

body[data-mj-header="accent"] .top-header { background: var(--mj-accent) !important; }
body[data-mj-header="accent"] .main-header { border-bottom: 3px solid var(--mj-accent) !important; }
body[data-mj-header="accent"] .main-header .main-menu a.menu-active { color: var(--mj-accent) !important; }

/* A hairline of brand colour under the sticky header ties it to the page. */
.main-header::after {
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(90deg, var(--mj-accent), transparent 65%);
    opacity: .85;
}
body[data-mj-header="accent"] .main-header::after { display: none; }

/* ---------- cards get a touch of the brand on hover ---------- */
.mj-card:hover { border-color: color-mix(in srgb, var(--mj-accent) 35%, rgba(0, 0, 0, .07)); }
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .mj-card:hover { border-color: rgba(0, 0, 0, .14); }
}
.mj-product-media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--mj-accent) 16%, transparent));
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
.mj-card:hover .mj-product-media::after { opacity: 1; }