/* Fashion — editorial storefront skin (classic layout)
   Fonts are loaded via <link> from themes.php (not @import) so mobile CSS is not blocked. */

body.theme-fashion {
    --fn-ink: #141414;
    --fn-ink-soft: #2c2c2c;
    --fn-blush: #c48b7a;
    --fn-blush-deep: #a56f5f;
    --fn-mist: #f6f5f3;
    --fn-stone: #eceae6;
    --fn-line: #ddd9d2;
    --fn-muted: #6f6a64;
    --brand: #141414;
    --brand-dark: #000000;
    --accent: #c48b7a;
    --text-main: #171717;
    --text-soft: #6f6a64;
    --surface: #ffffff;
    --surface-alt: #f6f5f3;
    --line: #ddd9d2;
    --success: #3d6b5a;
    background:
        radial-gradient(1200px 480px at 12% -10%, rgba(196, 139, 122, 0.14), transparent 55%),
        radial-gradient(900px 420px at 100% 0%, rgba(20, 20, 20, 0.05), transparent 50%),
        linear-gradient(180deg, #f8f7f5 0%, #f3f1ee 100%) !important;
    color: var(--text-main);
    font-family: "Manrope", "Segoe UI", sans-serif !important;
    letter-spacing: 0.01em;
}

body.theme-fashion.app-rtl,
body.theme-fashion[dir="rtl"],
html[dir="rtl"] body.theme-fashion {
    font-family: "Noto Sans Arabic", "Manrope", "Segoe UI", sans-serif !important;
}

body.theme-fashion h1,
body.theme-fashion h2,
body.theme-fashion h3,
body.theme-fashion .section-title,
body.theme-fashion .product-title,
body.theme-fashion .hero-shop h1,
body.theme-fashion .home-section-head h2,
body.theme-fashion .footer-title,
body.theme-fashion .brand-modern {
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}

body.theme-fashion.app-rtl h1,
body.theme-fashion.app-rtl h2,
body.theme-fashion.app-rtl h3,
body.theme-fashion.app-rtl .section-title,
body.theme-fashion.app-rtl .product-title,
body.theme-fashion.app-rtl .hero-shop h1,
body.theme-fashion.app-rtl .home-section-head h2,
body.theme-fashion.app-rtl .footer-title,
body.theme-fashion.app-rtl .brand-modern {
    font-family: "Noto Sans Arabic", "Cormorant Garamond", Georgia, serif !important;
}

/* Keep icon font intact */
body.theme-fashion .bi,
body.theme-fashion [class^="bi-"]::before,
body.theme-fashion [class*=" bi-"]::before {
    font-family: "bootstrap-icons" !important;
}

/* Header */
body.theme-fashion .navbar-modern {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--fn-line) !important;
    box-shadow: none !important;
}

body.theme-fashion .navbar-modern .nav-link {
    color: var(--fn-ink) !important;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.78rem;
}

body.theme-fashion .navbar-modern .nav-link:hover {
    color: var(--fn-blush-deep) !important;
}

body.theme-fashion .announcement-bar {
    background: var(--fn-ink) !important;
    color: #f8f5f2 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 500;
}

body.theme-fashion .brand-modern,
body.theme-fashion .navbar-brand {
    color: var(--fn-ink) !important;
    letter-spacing: 0.06em;
}

/* Buttons */
body.theme-fashion .ui-btn {
    border-radius: 999px !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 600;
}

body.theme-fashion .ui-btn-primary {
    background: linear-gradient(135deg, var(--fn-ink), var(--fn-ink-soft)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(20, 20, 20, 0.18) !important;
}

body.theme-fashion .ui-btn-primary:hover {
    background: linear-gradient(135deg, #000, var(--fn-ink)) !important;
    box-shadow: 0 16px 32px rgba(20, 20, 20, 0.24) !important;
}

body.theme-fashion .ui-btn-soft {
    background: var(--fn-stone) !important;
    color: var(--fn-ink) !important;
    border-color: transparent !important;
}

body.theme-fashion .ui-btn-outline {
    border-color: var(--fn-ink) !important;
    color: var(--fn-ink) !important;
    background: transparent !important;
}

body.theme-fashion .ui-btn-outline:hover {
    background: var(--fn-ink) !important;
    color: #fff !important;
}

/* Hero */
body.theme-fashion .hero-shop,
body.theme-fashion .home-hero-layout {
    border-radius: 1.25rem;
    overflow: hidden;
}

body.theme-fashion .hero-shop h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    line-height: 1.05;
    color: var(--fn-ink);
}

body.theme-fashion .hero-pill {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--fn-line);
    color: var(--fn-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.68rem;
}

body.theme-fashion .hero-slide,
body.theme-fashion .hero-carousel-home .hero-slide {
    border-radius: 0;
}

body.theme-fashion .home-hero-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--fn-line);
    border-radius: 1rem;
    box-shadow: 0 18px 40px rgba(20, 20, 20, 0.06);
}

body.theme-fashion .home-hero-card-label {
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.68rem;
    color: var(--fn-blush-deep);
}

/* Sections */
body.theme-fashion .home-section-head h2,
body.theme-fashion .section-title {
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    color: var(--fn-ink);
}

body.theme-fashion .home-section-head p,
body.theme-fashion .muted,
body.theme-fashion .admin-muted {
    color: var(--fn-muted) !important;
}

body.theme-fashion .home-section-head::after {
    content: "";
    display: block;
    width: 48px;
    height: 1px;
    margin-top: 0.85rem;
    background: linear-gradient(90deg, var(--fn-blush), transparent);
}

/* Product cards */
body.theme-fashion .product-card {
    background: #fff;
    border: 1px solid rgba(20, 20, 20, 0.06) !important;
    border-radius: 0.85rem !important;
    box-shadow: none !important;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

body.theme-fashion .product-card:hover {
    transform: translateY(-4px);
    border-color: rgba(196, 139, 122, 0.45) !important;
    box-shadow: 0 22px 40px rgba(20, 20, 20, 0.08) !important;
}

body.theme-fashion .product-card-media {
    background: var(--fn-mist);
    border-radius: 0 !important;
}

body.theme-fashion .product-card .product-content,
body.theme-fashion .product-card-pricing {
    padding-inline: 0.85rem;
}

body.theme-fashion .product-card .product-title,
body.theme-fashion .product-card h3,
body.theme-fashion .product-card .item-title {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

body.theme-fashion .product-card-price-option.is-active,
body.theme-fashion .product-card-price-option:hover {
    border-color: var(--fn-blush) !important;
    color: var(--fn-ink);
}

body.theme-fashion .product-card-media-tags .item-tag-sale {
    background: var(--fn-ink) !important;
    color: #fff !important;
}

body.theme-fashion .product-card-media-tags .item-tag-gold {
    background: var(--fn-blush) !important;
    color: #fff !important;
}

body.theme-fashion .quick-add-btn,
body.theme-fashion .product-card [data-cart-add] {
    border-radius: 999px !important;
}

/* Product detail */
body.theme-fashion .product-showcase,
body.theme-fashion .product-info-card,
body.theme-fashion .product-media-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--fn-line);
    border-radius: 1.1rem;
    box-shadow: 0 18px 42px rgba(20, 20, 20, 0.05);
}

body.theme-fashion .product-title {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
}

body.theme-fashion .product-vendor-label,
body.theme-fashion .product-option-label,
body.theme-fashion .product-breadcrumb {
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.72rem;
    color: var(--fn-muted);
}

body.theme-fashion .product-color-swatch.is-selected,
body.theme-fashion .product-color-swatch:focus-visible {
    outline: 2px solid var(--fn-ink);
    outline-offset: 2px;
}

body.theme-fashion .product-thumb.is-active {
    border-color: var(--fn-ink) !important;
    box-shadow: 0 0 0 1px var(--fn-ink);
}

body.theme-fashion .mobile-buy-bar {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--fn-line);
}

/* Forms / shop toolbar */
body.theme-fashion .shop-toolbar,
body.theme-fashion .panel,
body.theme-fashion .account-card,
body.theme-fashion .cart-drawer,
body.theme-fashion .search-result-bar {
    background: #fff;
    border-color: var(--fn-line) !important;
}

body.theme-fashion .form-control,
body.theme-fashion .form-select,
body.theme-fashion input[type="text"],
body.theme-fashion input[type="email"],
body.theme-fashion input[type="password"],
body.theme-fashion textarea,
body.theme-fashion select {
    border-radius: 0.75rem !important;
    border-color: var(--fn-line) !important;
}

body.theme-fashion .form-control:focus,
body.theme-fashion .form-select:focus,
body.theme-fashion input:focus,
body.theme-fashion textarea:focus,
body.theme-fashion select:focus {
    border-color: var(--fn-blush) !important;
    box-shadow: 0 0 0 3px rgba(196, 139, 122, 0.2) !important;
}

/* Footer */
body.theme-fashion footer,
body.theme-fashion .site-footer,
body.theme-fashion .footer-modern {
    background: var(--fn-ink) !important;
    color: #ebe7e2 !important;
    border-top: 0 !important;
}

body.theme-fashion footer a,
body.theme-fashion .footer-links a,
body.theme-fashion .footer-text,
body.theme-fashion .footer-muted {
    color: rgba(235, 231, 226, 0.78) !important;
}

body.theme-fashion footer a:hover,
body.theme-fashion .footer-links a:hover {
    color: #fff !important;
}

body.theme-fashion .footer-title {
    color: #fff !important;
    letter-spacing: 0.04em;
}

body.theme-fashion .footer-newsletter input {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
}

/* Cart pill / floating */
body.theme-fashion .cart-pill-floating,
body.theme-fashion .whatsapp-agent {
    box-shadow: 0 14px 30px rgba(20, 20, 20, 0.18);
}

body.theme-fashion .brands-marquee {
    border-color: var(--fn-line);
    background: rgba(255, 255, 255, 0.55);
}

@media (max-width: 768px) {
    body.theme-fashion .hero-shop h1 {
        font-size: 2.1rem;
    }

    body.theme-fashion .product-card .product-title,
    body.theme-fashion .product-card h3 {
        font-size: 1.05rem;
    }
}