/* Add custom CSS styles below */ 
/* =========================================================
   HIKES — PREMIUM STORE CSS
   English + Arabic / LTR + RTL
   ========================================================= */


/* =========================
   1. GLOBAL
   ========================= */

:root {
    --hikes-black: #0b0b0b;
    --hikes-white: #ffffff;
    --hikes-grey: #777777;
    --hikes-light: #f6f6f4;
    --hikes-border: #e7e7e5;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #ffffff !important;
    color: var(--hikes-black) !important;
}


/* =========================
   2. HEADER
   ========================= */

header {
    background: #ffffff !important;
    border-bottom: 1px solid #eeeeee !important;
}

header a {
    color: var(--hikes-black) !important;
    transition: opacity 0.2s ease !important;
}

header a:hover {
    opacity: 0.55 !important;
}


/* Header buttons */

header button {
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

header button svg {
    stroke-width: 1.5 !important;
}


/* Account / login button */

header button[aria-label*="account"],
header button[aria-label*="Account"],
header button[aria-label*="login"],
header button[aria-label*="Login"] {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #e5e5e5 !important;
}

header button[aria-label*="account"] svg,
header button[aria-label*="Account"] svg,
header button[aria-label*="login"] svg,
header button[aria-label*="Login"] svg {
    stroke: #111111 !important;
}


/* =========================
   3. NAVIGATION
   ========================= */

nav a {
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1px !important;
}

nav a:hover {
    opacity: 0.5 !important;
}


/* =========================
   4. HERO / BANNERS
   ========================= */

.banner,
.swiper,
.swiper-slide {
    overflow: hidden !important;
}

.banner img,
.swiper-slide img {
    transition: transform 0.6s ease !important;
}


/* =========================
   5. PRODUCT CARDS
   ========================= */

.product-card,
.product-item {
    background: #ffffff !important;
}

.product-card img,
.product-item img {
    transition: transform 0.45s ease !important;
}

.product-card:hover img,
.product-item:hover img {
    transform: scale(1.025) !important;
}


/* Product titles */

.product-card h3,
.product-item h3 {
    color: #111111 !important;
    font-weight: 500 !important;
}


/* Prices */

.product-card .price,
.product-item .price {
    color: #111111 !important;
    font-weight: 600 !important;
}


/* =========================
   6. BUTTONS
   ========================= */

button,
.btn,
a[role="button"] {
    transition: all 0.2s ease !important;
}


/* Primary buttons */

button[type="submit"],
.btn-primary {
    background: #0b0b0b !important;
    color: #ffffff !important;
    border: 1px solid #0b0b0b !important;
    border-radius: 3px !important;
    font-weight: 600 !important;
}

button[type="submit"]:hover,
.btn-primary:hover {
    background: #ffffff !important;
    color: #0b0b0b !important;
}


/* =========================
   7. INPUTS
   ========================= */

input,
textarea,
select {
    border: 1px solid #dddddd !important;
    border-radius: 3px !important;
    background: #ffffff !important;
    color: #111111 !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #111111 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #111111 !important;
}


/* =========================
   8. LOGIN / ACCOUNT POPUP
   ========================= */

[role="dialog"] {
    background: #ffffff !important;
    border: 1px solid #eeeeee !important;
    border-radius: 4px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.14) !important;
    overflow: hidden !important;
}


/* Popup heading */

[role="dialog"] h1,
[role="dialog"] h2 {
    color: #111111 !important;
    font-weight: 600 !important;
    letter-spacing: -0.3px !important;
}


/* Popup inputs */

[role="dialog"] input {
    height: 50px !important;
    border: 1px solid #dddddd !important;
    border-radius: 3px !important;
}

[role="dialog"] input:focus {
    border-color: #111111 !important;
    box-shadow: 0 0 0 1px #111111 !important;
}


/* Popup primary button */

[role="dialog"] button[type="submit"] {
    background: #0b0b0b !important;
    color: #ffffff !important;
    border: 1px solid #0b0b0b !important;
    border-radius: 3px !important;
    height: 50px !important;
}

[role="dialog"] button[type="submit"]:hover {
    background: #ffffff !important;
    color: #0b0b0b !important;
}


/* Popup close button */

[role="dialog"] button[aria-label*="close"],
[role="dialog"] button[aria-label*="Close"] {
    background: #0b0b0b !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
}


/* =========================
   9. CART / DRAWERS
   ========================= */

[role="dialog"] a {
    color: #111111 !important;
}

[role="dialog"] button {
    transition: all 0.2s ease !important;
}


/* =========================
   10. CATEGORY PAGES
   ========================= */

.category-card img {
    transition: transform 0.45s ease !important;
}

.category-card:hover img {
    transform: scale(1.025) !important;
}


/* =========================
   11. FOOTER
   ========================= */

footer {
    background: #0b0b0b !important;
    color: #ffffff !important;
}

footer a {
    color: #ffffff !important;
    opacity: 0.85;
    transition: opacity 0.2s ease !important;
}

footer a:hover {
    opacity: 1 !important;
}


/* =========================
   12. ARABIC / RTL
   ========================= */

html[dir="rtl"],
body[dir="rtl"] {
    direction: rtl !important;
    text-align: right;
}


/* Arabic navigation */

html[dir="rtl"] nav,
body[dir="rtl"] nav {
    direction: rtl !important;
}


/* Arabic forms */

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
body[dir="rtl"] input,
body[dir="rtl"] textarea,
body[dir="rtl"] select {
    text-align: right !important;
}


/* Arabic popup */

html[dir="rtl"] [role="dialog"],
body[dir="rtl"] [role="dialog"] {
    direction: rtl !important;
    text-align: right !important;
}


/* Keep close button on the correct side */

html[dir="rtl"] [role="dialog"] button[aria-label*="close"],
html[dir="rtl"] [role="dialog"] button[aria-label*="Close"] {
    right: auto !important;
    left: 16px !important;
}


/* =========================
   13. MOBILE
   ========================= */

@media (max-width: 768px) {

    header {
        border-bottom: 1px solid #eeeeee !important;
    }

    nav a {
        font-size: 13px !important;
    }

    [role="dialog"] {
        width: calc(100vw - 24px) !important;
        max-width: 400px !important;
        border-radius: 4px !important;
    }

    [role="dialog"] input,
    [role="dialog"] button[type="submit"] {
        height: 48px !important;
    }
}


/* =========================
   14. REMOVE UNNECESSARY HEAVY SHADOWS
   ========================= */

.card,
.product-card,
.category-card {
    box-shadow: none !important;
}


/* =========================
   15. PREMIUM HOVER EFFECT
   ========================= */

a,
button {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible {
    outline: 1px solid #111111 !important;
    outline-offset: 3px !important;
}/* =========================================================
   HIKES — PREMIUM FOOTER FIX
   ========================================================= */

footer,
footer.s-footer,
.s-footer {
    background: #0b0b0b !important;
    background-color: #0b0b0b !important;
    color: #ffffff !important;
    border-top: 1px solid #0b0b0b !important;
}

/* All footer text */
footer *,
footer.s-footer *,
.s-footer * {
    color: #ffffff !important;
}

/* Footer headings */
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
.s-footer h1,
.s-footer h2,
.s-footer h3,
.s-footer h4,
.s-footer h5,
.s-footer h6 {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Footer links */
footer a,
footer.s-footer a,
.s-footer a {
    color: #ffffff !important;
    opacity: 0.85 !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease !important;
}

footer a:hover,
footer.s-footer a:hover,
.s-footer a:hover {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Footer icons */
footer svg,
footer.s-footer svg,
.s-footer svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Social media circles */
footer button,
footer a[aria-label],
.s-footer button,
.s-footer a[aria-label] {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.25) !important;
}

/* Registration / VAT information */
footer p,
footer span,
footer div {
    color: #ffffff !important;
}

/* Keep government/commercial registration image visible */
footer img,
.s-footer img {
    opacity: 1 !important;
    filter: none !important;
}

/* Arabic RTL footer */
html[dir="rtl"] footer,
body[dir="rtl"] footer {
    direction: rtl !important;
    text-align: right !important;
}

/* Mobile */
@media (max-width: 768px) {
    footer,
    .s-footer {
        padding-left: 20px !important;
        padding-right: 20px !important;
/* HIKES - Footer only */

footer,
.s-footer {
    background: #111111 !important;
    background-color: #111111 !important;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer p,
footer span,
footer a,
.s-footer h1,
.s-footer h2,
.s-footer h3,
.s-footer h4,
.s-footer p,
.s-footer span,
.s-footer a {
    color: #ffffff !important;
}

footer svg,
.s-footer svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}/* HIKES FOOTER - COLOR ONLY */

.s-footer {
    --color-primary: #111111 !important;
    --color-secondary: #111111 !important;
    --color-background: #111111 !important;
    background: #111111 !important;
    background-color: #111111 !important;
}