/*
 * Taqaseem Tech - enterprise computer-accessories design system.
 * Loaded after the compiled Storefront theme; overrides it without a build step.
 * Source of truth: design-system/taqaseem-tech/MASTER.md
 *
 * Tokens: navy #0F172A, slate text, accent = storefront theme colour (#0369A1).
 * Logical properties are used so one file serves both LTR and RTL.
 */

:root {
    --et-navy: #0f172a;
    --et-navy-2: #162238;
    --et-ink: #1e293b;
    --et-muted: #526071;      /* 4.5:1+ on white */
    --et-line: #e2e8f0;
    --et-bg: #f4f7fb;
    --et-card: #ffffff;
    --et-accent: var(--color-primary, #0369a1);
    --et-accent-soft: rgba(3, 105, 161, .08);
    --et-radius: 12px;
    --et-radius-sm: 8px;
    --et-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 18px rgba(15, 23, 42, .06);
    --et-shadow-lg: 0 2px 4px rgba(15, 23, 42, .06), 0 14px 32px rgba(15, 23, 42, .12);
    --et-font: 'Almarai', 'Segoe UI', Tahoma, 'Helvetica Neue', Arial, sans-serif;
}

/* ------------------------------------------------------------------ base */
body.page-template,
body.page-template .btn,
body.page-template input,
body.page-template select,
body.page-template textarea,
body.page-template .nice-select {
    font-family: var(--et-font);
}

body.page-template {
    background: var(--et-bg);
    color: var(--et-ink);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body.page-template h1, body.page-template h2, body.page-template h3,
body.page-template h4, body.page-template h5, body.page-template h6 {
    color: var(--et-navy);
    font-weight: 800;
    line-height: 1.3;
}

a { color: var(--et-accent); }
a:hover { color: var(--color-primary-hover, #075985); }

:focus-visible {
    outline: 3px solid #38bdf8;
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    inset-inline-start: 12px;
    top: -60px;
    z-index: 1000;
    padding: 10px 16px;
    background: var(--et-navy);
    color: #fff;
    border-radius: 0 0 var(--et-radius-sm) var(--et-radius-sm);
    transition: top .15s ease;
}
.skip-link:focus { top: 0; color: #fff; }

.whatsapp-float {
    position: fixed;
    inset-inline-end: 24px;
    bottom: 24px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #1fa855;      /* white icon contrast >= 3:1 */
    color: #fff;
    font-size: 30px;
    box-shadow: var(--et-shadow-lg);
    transition: transform .2s ease;
}
.whatsapp-float:hover { color: #fff; transform: translateY(-2px); }

/* --------------------------------------------------------------- buttons */
body.page-template .btn { border-radius: var(--et-radius-sm); font-weight: 700; transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s; }
body.page-template .btn-primary { background: var(--et-accent); border-color: var(--et-accent); color: #fff; }
body.page-template .btn-primary:hover,
body.page-template .btn-primary:focus { background: var(--color-primary-hover, #075985); border-color: var(--color-primary-hover, #075985); color: #fff; }
body.page-template .btn-default,
body.page-template .btn-outline { background: #fff; border: 1px solid #cbd5e1; color: var(--et-ink); }
body.page-template .form-control,
body.page-template .custom-select { border-radius: var(--et-radius-sm); border-color: #cbd5e1; }
body.page-template .form-control:focus { border-color: var(--et-accent); box-shadow: 0 0 0 3px var(--et-accent-soft); }

/* --------------------------------------------------------------- top bar */
.top-nav-wrap { background: var(--et-navy); border-bottom: 0; }
.top-nav { padding: 8px 15px; font-size: 13px; color: #cbd5e1; }
.top-nav .top-nav-right-list > li { border-color: rgba(255, 255, 255, .14); }
.top-nav .top-nav-right-list > li > a,
.top-nav .dropdown-toggle { color: #e2e8f0; }
.top-nav .top-nav-right-list > li > a:hover,
.top-nav .dropdown-toggle:hover { color: #fff; text-decoration: underline; }
.top-nav .top-nav-right-list > li > a > i,
.top-nav .top-nav-right-list > li > i,
.top-nav .dropdown > i { color: #7dd3fc; }
.top-nav .custom-select-option,
.top-nav .nice-select { background-color: transparent; color: #e2e8f0; border: 0; }
.top-nav .nice-select.arrow-black { background-image: none; }
.top-nav select option { color: var(--et-navy); }
.top-nav .top-nav-right-list .nice-select,
.top-nav .top-nav-right-list .nice-select .current { color: #e2e8f0; }
.top-nav .top-nav-right-list .nice-select:after { border-color: #e2e8f0; }
.top-nav .nice-select .list { background: #fff; border-radius: var(--et-radius-sm); box-shadow: var(--et-shadow-lg); }
.top-nav .top-nav-right-list .nice-select .option { color: var(--et-ink); }

/* ---------------------------------------------------------------- header */
.header-wrap { background: #fff; border-bottom: 1px solid var(--et-line); }
.header-wrap-inner.py-4 { padding-top: 16px !important; padding-bottom: 16px !important; }
.header-logo { width: auto; min-width: 200px; height: 52px; padding-inline: 15px; overflow: visible; }
.header-logo img { height: 46px; width: auto; max-width: 240px; }

.header-search .header-search-lg {
    border: 1.5px solid #cbd5e1;
    border-radius: var(--et-radius);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.header-search .header-search-lg:focus-within { border-color: var(--et-accent); box-shadow: 0 0 0 3px var(--et-accent-soft); }
.header-search .header-search-lg .search-input { height: 50px; font-size: 15px; }
.header-search .header-search-lg .btn-search { border-radius: var(--et-radius-sm); background: var(--et-accent); color: #fff; }
.header-column-right .icon-wrap > i { color: var(--et-navy); }
.header-column-right .icon-wrap > .count { background: var(--et-accent); font-weight: 700; }
.header-column-right .header-cart:hover .icon-wrap > i,
.header-column-right .header-wishlist:hover .icon-wrap > i { color: var(--et-accent); }
.header-column-right .header-cart > span,
.header-column-right .header-wishlist > span { color: var(--et-navy); font-weight: 700; }

/* ------------------------------------------------------------ navigation */
.navigation-wrap { background: #fff; border-bottom: 1px solid var(--et-line); box-shadow: 0 1px 0 rgba(15, 23, 42, .02); }
.navigation-inner { border: 0; border-radius: 0; }
.category-nav .category-nav-inner { background: var(--et-navy); border-radius: var(--et-radius-sm); font-weight: 800; }
.category-nav .category-nav-inner:hover { background: var(--et-navy-2); }
.horizontal-megamenu > li > a.nav-link,
.horizontal-megamenu .menu-item { color: var(--et-ink); font-weight: 700; font-size: 14px; }
.horizontal-megamenu > li > a.nav-link:hover { color: var(--et-accent); }
.navigation-inner .navigation-text { color: #a16207; font-weight: 700; font-size: 13px; }

.category-nav .category-dropdown-wrap { border-radius: 0 0 var(--et-radius) var(--et-radius); border-color: var(--et-line); box-shadow: var(--et-shadow); }
.vertical-megamenu > li > a { font-weight: 700; color: var(--et-ink); }
.vertical-megamenu > li > a:hover { color: var(--et-accent); background: var(--et-accent-soft); }
.vertical-megamenu .menu-item-icon { color: var(--et-accent); }
.mega-menu .dropdown > .sub-menu { border-radius: var(--et-radius-sm); box-shadow: var(--et-shadow-lg); border: 1px solid var(--et-line); }
.mega-menu .dropdown > .sub-menu > li > a { color: var(--et-ink); }
.mega-menu .dropdown > .sub-menu > li > a:hover { color: var(--et-accent); background: var(--et-accent-soft); }

/* ------------------------------------------------------------- hero area */
.home-section-wrap { margin-top: 24px; }
.home-section-inner .home-slider-wrap { width: 100%; }
.home-section-inner .home-banner-wrap { display: none; }   /* promo tiles live in their own section below */
.home-slider { border-radius: 16px; box-shadow: var(--et-shadow); background: var(--et-navy); }
.home-slider .slide { border-radius: 16px; }
.home-slider .slide .slider-image { min-height: 260px; object-fit: cover; }

.home-slider .slide-content .captions { width: min(46%, 400px); }
.home-slider .slide-content .caption-1 {
    color: #fff;
    font-size: clamp(22px, 3.1vw, 38px);
    font-weight: 800;
    line-height: 1.25;
    display: block;
}
.home-slider .slide-content .caption-2 {
    color: #cbd5e1;
    font-size: clamp(13px, 1.4vw, 17px);
    line-height: 1.6;
    margin-top: 12px;
}
.home-slider .slide-content .btn-slider { margin-top: 24px; padding: 11px 26px; font-size: 15px; background: #38bdf8; border-color: #38bdf8; color: var(--et-navy); }
.home-slider .slide-content .btn-slider:hover { background: #7dd3fc; border-color: #7dd3fc; color: var(--et-navy); }
.home-slider .slick-arrow { opacity: .55; background: rgba(15, 23, 42, .7); }
.home-slider .slick-arrow:hover { opacity: 1; }
.home-slider .slick-dots li button:before { color: #fff; opacity: .5; }
.home-slider .slick-dots li.slick-active button:before { opacity: 1; color: #38bdf8; }

/* -------------------------------------------------------- trust features */
.features-wrap { margin-top: 24px; }
.features {
    background: var(--et-card);
    border: 1px solid var(--et-line);
    border-radius: var(--et-radius);
    box-shadow: var(--et-shadow);
}
.feature-list { background: transparent; border: 0; box-shadow: none; }
.single-feature { border-color: var(--et-line) !important; }
.single-feature .feature-icon { color: var(--et-accent); }
.single-feature .feature-details .title { color: var(--et-navy); font-weight: 800; font-size: 14px; }
.single-feature .feature-details span { color: var(--et-muted); font-size: 12.5px; }

/* ------------------------------------------------------- section headings */
.section-title, .featured-categories-text h2, .daily-deals-header .section-title { color: var(--et-navy); font-weight: 800; }
.section-title:after { border-bottom: 3px solid var(--et-accent); border-radius: 3px; }
.featured-categories-text .excerpt { color: var(--et-muted); }

.featured-categories-tabs .tab-item,
.tabs .tab-item { border-radius: var(--et-radius); border-color: var(--et-line); background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.featured-categories-tabs .tab-item:hover { border-color: var(--et-accent); box-shadow: var(--et-shadow); transform: translateY(-2px); }
.featured-categories-tabs .tab-item.active { border-color: var(--et-accent); background: var(--et-accent-soft); }
.featured-category-name { color: var(--et-ink); font-weight: 700; font-size: 13px; }
.tab-products-header .tab-item.active, .tab-products-header .nav-link.active { color: var(--et-accent); border-color: var(--et-accent); }

/* --------------------------------------------------------- product cards */
.product-card {
    background: var(--et-card);
    border: 1px solid var(--et-line);
    border-radius: var(--et-radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.product-card:hover { box-shadow: var(--et-shadow-lg); border-color: #cbd5e1; transform: translateY(-2px); }
.product-card .product-image { border-radius: var(--et-radius-sm); background: linear-gradient(180deg, #f8fafc, #eef3f9); }
.product-card .product-name { color: var(--et-navy); }
.product-card .product-name h6 { background: transparent; font-weight: 700; font-size: 14px; }
.product-card .product-name:hover { color: var(--et-accent); }
.product-card .product-card-bottom { border-top-color: var(--et-line); }
.product-card .product-price:after { display: none; }       /* remove decorative notch */
.product-price { color: var(--et-navy); font-weight: 800; font-size: 16px; }
.product-price .previous-price { color: var(--et-muted); font-weight: 400; }
.product-card .product-card-actions .btn { border-radius: var(--et-radius-sm); }
.product-card .btn-add-to-cart { border-radius: var(--et-radius-sm); }
.front-stars, .rating-percent { color: #f59e0b; }
.rating-count { color: var(--et-muted); }

.product-badge .badge { border-radius: 0 0 var(--et-radius-sm) var(--et-radius-sm); font-weight: 700; letter-spacing: .2px; }
.product-badge .badge.badge-primary { background: var(--et-accent); }
.product-badge .badge.badge-danger { background: #be123c; }
.product-badge .badge.badge-success { background: #0f766e; }

/* ---------------------------------------------------- deals & vertical rows */
.daily-deals-wrap, .vertical-products-wrap .vertical-products {
    background: var(--et-card);
    border: 1px solid var(--et-line);
    border-radius: var(--et-radius);
    box-shadow: var(--et-shadow);
}
.daily-deals-wrap { padding: 20px; }
.daily-deals-header, .vertical-products .vertical-products-header { border-bottom-color: var(--et-line); }
.countdown-amount { background: var(--et-navy) !important; color: #fff !important; border-radius: var(--et-radius-sm); font-weight: 800; }
.countdown-period { color: var(--et-muted); font-size: 12px; }
.deal-progress .progress-bar, .progress-bar { background: var(--et-accent); }
.vertical-product-card { border-radius: var(--et-radius-sm); }

/* ----------------------------------------------------------- banners / brands */
.banner-wrap img, .two-column-banner img, .one-column-banner img { border-radius: var(--et-radius); box-shadow: var(--et-shadow); }
.top-brands { background: var(--et-card); border-color: var(--et-line); border-radius: var(--et-radius); box-shadow: var(--et-shadow); }
.top-brands .top-brand-image > img { filter: none; }
.grid-products-wrap { background: transparent; }

/* ----------------------------------------------------------------- footer */
.footer-wrap { background: var(--et-navy); color: #cbd5e1; margin-top: 56px; }
.footer { padding-top: 56px; }
.footer .footer-logo img { height: 44px; width: auto; background: #fff; border-radius: var(--et-radius-sm); padding: 6px 10px; }
.footer-tagline { margin: 16px 0; color: #cbd5e1; max-width: 360px; }
.footer .contact-info li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: #e2e8f0; }
.footer .contact-info i { color: #7dd3fc; font-size: 18px; }
.footer a { color: #e2e8f0; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer-top .title { color: #fff; font-size: 16px; font-weight: 800; }
.footer-links:not(.footer-tags) .list-inline li a { color: #cbd5e1; }
.footer-links:not(.footer-tags) .list-inline li a:hover { color: #fff; }
.footer-bottom { border-top-color: rgba(255, 255, 255, .12); margin-top: 40px; }
.footer-text, .footer-text a { color: #94a3b8; }
.footer-text a { font-weight: 700; }
.footer .social-links a { color: #e2e8f0; }
.footer-payment img { max-height: 32px; }

/* ----------------------------------------------------- category index page */
.category-index { padding: 28px 0 8px; }
.category-index .page-title { font-size: 28px; margin-bottom: 24px; }
.category-group { background: var(--et-card); border: 1px solid var(--et-line); border-radius: var(--et-radius); box-shadow: var(--et-shadow); margin-bottom: 20px; overflow: hidden; }
.category-group-head { display: flex; align-items: center; gap: 16px; padding: 16px 20px; color: var(--et-navy); }
.category-group-head img { width: 64px; height: 64px; border-radius: var(--et-radius-sm); object-fit: cover; }
.category-group-head h2 { flex: 1; margin: 0; font-size: 20px; }
.category-group-head:hover { background: var(--et-accent-soft); color: var(--et-accent); }
.category-children { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0 20px 20px; }
.category-children li { flex: 0 0 auto; }
.category-children a { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border: 1px solid var(--et-line); border-radius: 999px; color: var(--et-ink); font-weight: 700; font-size: 14px; }
.category-children a:hover { border-color: var(--et-accent); color: var(--et-accent); background: var(--et-accent-soft); }
.category-children img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

/* ---------------------------------------------------- product / listing pages */
.breadcrumb { background: transparent; padding-inline: 0; }
.breadcrumb a { color: var(--et-muted); }
.product-details .product-name, .product-details h1 { font-weight: 800; }
.products-list-wrap, .filter-section-wrap, .product-details-wrap, .tab-content { border-radius: var(--et-radius); }
.add-to-cart-form .btn-add-to-cart, .product-details .btn-add-to-cart { padding-inline: 28px; }

/* ----------------------------------------------------- narrow screens */
@media (max-width: 767.98px) {
    .top-nav-right-list > li { padding-inline: 10px; }
    .home-slider .slide .slider-image { min-height: 200px; }
    .home-slider .slide-content .captions { width: 58%; }
    .home-slider .slide-content .btn-slider { margin-top: 12px; padding: 8px 16px; font-size: 13px; }
    .whatsapp-float { width: 50px; height: 50px; inset-inline-end: 16px; bottom: 16px; }
}

/* ----------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .product-card:hover, .featured-categories-tabs .tab-item:hover { transform: none; }
}