/* ============================================================
   Dynamic category navigation (header mega-menu + mobile)
   and the home "أقسام المتجر" subcategory enhancement.
   Brand palette pulled from theme vars with brown fallbacks.
   ============================================================ */
:root {
    --yc-cat-accent: var(--primary, #a3763f);
    --yc-cat-accent-2: var(--primary-dark, #8a6234);
    --yc-cat-surface: #fff;
    --yc-cat-ink: #4a3b2a;
    --yc-cat-muted: #8b7b68;
    --yc-cat-line: rgba(139, 98, 52, .14);
}

/* ---------- Desktop mega dropdown ---------- */
.nav-menu .nav-item.yc-has-mega { position: relative; }

.nav-item.yc-has-mega > .nav-link .yc-caret {
    font-size: .62em;
    margin-inline-start: 4px;
    transition: transform .25s ease;
    opacity: .7;
}
.nav-item.yc-has-mega:hover > .nav-link .yc-caret { transform: rotate(180deg); }

.yc-mega {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-start: 50%;
    transform: translateX(50%) translateY(8px);
    min-width: 460px;
    max-width: 620px;
    background: var(--yc-cat-surface);
    border: 1px solid var(--yc-cat-line);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(74, 59, 42, .18);
    padding: 14px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    z-index: 1200;
}
/* bridge the 10px gap so hover doesn't drop */
.yc-mega::before {
    content: "";
    position: absolute;
    top: -12px; left: 0; right: 0;
    height: 12px;
}
.nav-item.yc-has-mega:hover .yc-mega,
.nav-item.yc-has-mega:focus-within .yc-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(50%) translateY(0);
}
.yc-mega-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}
.yc-mega-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 11px;
    color: var(--yc-cat-ink);
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.yc-mega-link:hover {
    background: linear-gradient(135deg, rgba(163,118,63,.12), rgba(163,118,63,.05));
    color: var(--yc-cat-accent-2);
    transform: translateX(-3px);
}
.yc-mega-thumb {
    width: 34px; height: 34px;
    border-radius: 9px;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid var(--yc-cat-line);
}
.yc-mega-dot {
    width: 34px; height: 34px;
    border-radius: 9px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--yc-cat-accent), var(--yc-cat-accent-2));
    font-size: .8rem;
}

/* ---------- Mobile category accordion ---------- */
.yc-m-dept > a {
    font-weight: 700 !important;
    color: var(--yc-cat-accent-2) !important;
}
.yc-m-sub > a {
    padding-inline-start: 26px !important;
    font-size: .9rem;
    opacity: .9;
}
.yc-m-sub > a i { font-size: .75em; opacity: .6; }

/* ---------- Home category cards: subcategory chips ---------- */
.category-card-inner { position: relative; }
.cat-subs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 10px;
}
.cat-sub-chip {
    font-size: .74rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(163, 118, 63, .10);
    color: var(--yc-cat-accent-2);
    text-decoration: none;
    border: 1px solid var(--yc-cat-line);
    transition: background .18s ease, color .18s ease, transform .18s ease;
    position: relative;
    z-index: 3;
}
.cat-sub-chip:hover {
    background: var(--yc-cat-accent);
    color: #fff;
    transform: translateY(-2px);
}
.cat-sub-more {
    font-size: .74rem;
    font-weight: 700;
    color: var(--yc-cat-muted);
    align-self: center;
}

@media (max-width: 991px) {
    .yc-mega { min-width: 320px; }
    .yc-mega-inner { grid-template-columns: 1fr; }
}

/* ============================================================
   Home "أقسام المتجر" — centered modern category tree
   ============================================================ */
.yc-cats-modern { text-align: center; }
.yc-cats-head {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    margin-bottom: 6px;
}
.yc-cats-head .section-title { margin: 0; }
.yc-cats-all {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--yc-cat-accent-2); font-weight: 700; text-decoration: none;
    padding: 6px 15px; border-radius: 999px; border: 1px solid var(--yc-cat-line);
    transition: background .18s ease, color .18s ease;
}
.yc-cats-all:hover { background: var(--yc-cat-accent); color: #fff; }

/* ---- Modern responsive category card grid ---- */
.yc-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 22px;
    margin-top: 34px;
    text-align: start;
}
.yc-cat-grid:has(.yc-cat-card:only-child) { grid-template-columns: minmax(340px, 560px); justify-content: center; }

.yc-cat-card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--yc-cat-surface);
    border: 1px solid var(--yc-cat-line);
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 16px 38px rgba(74, 59, 42, .08);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.yc-cat-card::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 5px;
    background: linear-gradient(180deg, var(--yc-cat-accent), var(--yc-cat-accent-2));
    opacity: 0; transition: opacity .22s ease;
}
.yc-cat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 52px rgba(74, 59, 42, .16);
    border-color: rgba(163, 118, 63, .3);
}
.yc-cat-card:hover::before { opacity: 1; }

.yc-cat-card-head {
    display: flex; align-items: center; gap: 15px;
    text-decoration: none; color: var(--yc-cat-ink);
}
.yc-cat-card-ico {
    flex: 0 0 auto;
    width: 66px; height: 66px; display: grid; place-items: center; overflow: hidden;
    clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
    background: linear-gradient(135deg, var(--yc-cat-accent), var(--yc-cat-accent-2));
    color: #fff; font-size: 1.55rem;
    box-shadow: 0 10px 22px rgba(139, 98, 52, .28);
    transition: transform .22s ease;
}
.yc-cat-card:hover .yc-cat-card-ico { transform: scale(1.06) rotate(-3deg); }
.yc-cat-card-ico img { width: 100%; height: 100%; object-fit: cover; }
.yc-cat-card-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.yc-cat-card-name {
    font-size: 1.18rem; font-weight: 800; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yc-cat-card-count {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .8rem; color: var(--yc-cat-muted); font-weight: 600;
}
.yc-cat-card-count i { font-size: .72rem; color: var(--yc-cat-accent); }
.yc-cat-card-arrow {
    flex: 0 0 auto;
    width: 34px; height: 34px; display: grid; place-items: center;
    border-radius: 50%; background: rgba(163, 118, 63, .09);
    color: var(--yc-cat-accent-2); font-size: .85rem;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.yc-cat-card:hover .yc-cat-card-arrow {
    background: var(--yc-cat-accent); color: #fff; transform: translateX(-3px);
}

.yc-cat-card-subs {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 16px; padding-top: 16px;
    border-top: 1px dashed var(--yc-cat-line);
}
.yc-cat-chip {
    font-size: .8rem; font-weight: 600; padding: 6px 14px; border-radius: 999px;
    background: rgba(163, 118, 63, .08); color: var(--yc-cat-accent-2);
    border: 1px solid var(--yc-cat-line); text-decoration: none;
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.yc-cat-chip:hover {
    background: var(--yc-cat-accent); color: #fff; transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(139, 98, 52, .25);
}

@media (max-width: 575px) {
    .yc-cat-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 26px; }
    .yc-cat-card { padding: 16px; border-radius: 18px; }
    .yc-cat-card-ico { width: 56px; height: 56px; font-size: 1.3rem; }
    .yc-cat-card-name { font-size: 1.05rem; }
}