/* 
   Darak Theme — main.css
   Brand: #30364F (Primary Dark) | #ACBAC4 (Mid Tone) | #FFFFFF (BG)
*/

/* =========================================================
   UTILITIES
   ========================================================= */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}
.relative { position: relative; }
.text-center { text-align: center; }
a { text-decoration: none; color: inherit; }
a:hover { color: var(--primary-dark); }

.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
    background: var(--primary-dark);
    color: #fff;
}
.btn-primary:hover {
    background: #3f4769;
    color: #fff;
}

.section-heading {
    font-size: 28px;
    font-weight: 800;
    color: var(--primary-dark);
    margin: 0 0 8px;
}

/* =========================================================
   FADE-IN ANIMATIONS (Intersection Observer)
   ========================================================= */
.fade-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-section.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered product card fade-in */
.product-card-anim {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.product-card-anim.in-view { opacity: 1; transform: translateY(0); }

/* =========================================================
   ANNOUNCEMENT BAR
   ========================================================= */
.darak-announcement-bar {
    background-color: #C62828 !important;
    color: #fff !important;
    text-align: center;
    padding: 10px 40px;
    position: relative;
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
}
.darak-announcement-content {
    display: inline-block;
    white-space: nowrap;
    animation: ticker 25s linear infinite;
}
@keyframes ticker {
    0%   { transform: translateX(50%); }
    100% { transform: translateX(-100%); }
}
.darak-announcement-close {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    z-index: 2;
    animation: none;
    opacity: 1;
    transition: opacity 0.2s;
}
.darak-announcement-close:hover { opacity: 0.7; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
    background-color: #FFFFFF;
    color: var(--primary-dark);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow 0.3s ease;
}
.site-header.scrolled {
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.header-main {
    padding: 14px 0;
}
.header-main-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.header-border {
    border-bottom: 1px solid #eef0f2;
}
.site-branding { 
    flex-shrink: 0;
}
.site-branding h1,
.site-branding .site-title {
    margin: 0;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: var(--primary-dark);
}
.site-branding img.custom-logo { max-height: 52px; width: auto; }
.site-branding a.custom-logo-link { display: block; max-height: 52px; max-width: 180px; line-height: 0; }
.site-branding a.custom-logo-link img,
.site-branding a.custom-logo-link svg { max-height: 52px; max-width: 180px; width: auto; height: auto; display: block; object-fit: contain; }

/* Delivery pill */
.header-location {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
}
.flag-icon { font-size: 20px; }
.header-location .delivery-to { display: block; color: var(--mid-tone); font-size: 11px; line-height: 1.2; }
.header-location .country { font-weight: 700; font-size: 14px; }

/* =========================================================
   SEARCH BAR
   ========================================================= */
.header-search { flex-grow: 1; max-width: 580px; position: relative; }
.header-search form,
.darak-search-form {
    display: flex;
    width: 100%;
    position: relative;
}
.header-search input[type="search"],
.darak-search-input {
    width: 100%;
    padding: 11px 48px 11px 20px;
    border: 1.5px solid var(--mid-tone);
    border-radius: 25px;
    outline: none;
    font-size: 14px;
    font-family: var(--font-family);
    color: var(--text-main);
    background: #fff;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    -webkit-appearance: none;
}
.header-search input[type="search"]:focus,
.darak-search-input:focus {
    border-color: var(--primary-dark);
    box-shadow: 0 0 0 3px rgba(48,54,79,0.08);
}
.header-search input[type="search"]::placeholder { color: #b0b8be; }
.search-submit-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    color: var(--mid-tone);
    transition: color 0.2s;
}
.search-submit-btn:hover { color: var(--primary-dark); }

/* Search Autocomplete */
.search-autocomplete {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid var(--mid-tone);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    z-index: 9999;
    max-height: 280px;
    overflow-y: auto;
    display: none;
}
.search-autocomplete.open { display: block; }
.autocomplete-item {
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid #f4f4f4;
    transition: background 0.15s;
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background: #f8f9fa; }

/* Mobile search toggle */
.mobile-search-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--primary-dark);
}

/* Header actions */
.header-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.lang-toggle { display: flex; gap: 4px; align-items: center; font-size: 13px; }
.lang-toggle a { color: var(--mid-tone); padding: 4px 6px; border-radius: 4px; transition: all 0.2s; }
.lang-toggle a.active { color: var(--primary-dark); font-weight: 700; }
.my-account-nav a { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; }
.cart-nav { position: relative; }
.cart-contents { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; position: relative; }
.cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #C62828;
    color: #fff;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: 700;
    position: absolute;
    top: -6px;
    right: -6px;
    line-height: 1;
    padding: 0 3px;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.cart-count.hidden {
    display: none;
}

/* =========================================================
   NAVIGATION
   ========================================================= */
.header-navigation { 
    background: #fff; 
    border-bottom: 1px solid #eef0f2;
}
.category-nav-list { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    gap: 0;
}
.cat-nav-item a { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    padding: 14px 22px; 
    font-weight: 600; 
    font-size: 14px; 
    position: relative; 
    white-space: nowrap;
    color: var(--text-main);
    transition: color 0.2s;
}
.cat-nav-item a:hover { color: var(--primary-dark); }
.cat-nav-item img, .cat-nav-item svg { width: 20px; height: 20px; object-fit: contain; }
.cat-nav-item a::after {
    content: ''; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 0; 
    height: 3px; 
    background: var(--primary-dark); 
    transition: width 0.3s ease;
}
.cat-nav-item a:hover::after { width: 100%; }

/* =========================================================
   HERO SLIDER
   ========================================================= */
.hero-slider-section { padding: 0; }
.hero-slider-wrapper { position: relative; overflow: hidden; }

.hero-track {
    display: flex;
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}
.hero-slide {
    min-width: 100%;
    min-height: 480px;
    display: flex;
    background: var(--primary-dark);
    position: relative;
    flex-shrink: 0;
}
.hero-content {
    flex: 1;
    padding: 70px 60px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.hero-badge {
    display: inline-block;
    background: var(--warm-accent);
    color: var(--primary-dark);
    padding: 6px 14px;
    font-weight: 700;
    font-size: 13px;
    border-radius: 4px;
    max-width: max-content;
    margin-bottom: 20px;
    letter-spacing: 1px;
}
.hero-title { 
    font-size: 52px; 
    margin: 0 0 12px; 
    font-weight: 900; 
    line-height: 1.1; 
    color: #fff;
}
.hero-subtitle { 
    font-size: 16px; 
    color: rgba(255,255,255,0.8); 
    margin-bottom: 32px; 
    max-width: 400px;
}
.hero-btn { 
    background: var(--warm-accent); 
    color: var(--primary-dark); 
    align-self: flex-start;
    font-size: 15px;
    font-weight: 700;
}
.hero-btn:hover { background: #fff; color: var(--primary-dark); }
.hero-image {
    flex: 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 30px;
    min-height: 420px;
}

/* Slider controls */
.hero-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    border: 1.5px solid rgba(255,255,255,0.3);
    transition: background 0.2s;
    line-height: 1;
}
.hero-slider-btn:hover { background: rgba(255,255,255,0.35); }
.hero-slider-btn.prev { left: 20px; }
.hero-slider-btn.next { right: 20px; }

/* Dots */
.hero-dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 20;
}
.hero-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    cursor: pointer;
    border: none;
    padding: 0;
    transition: all 0.3s;
}
.hero-dot.active {
    background: #fff;
    transform: scale(1.3);
}

/* =========================================================
   CATEGORY ICONS ROW
   ========================================================= */
.category-circles-section { padding: 48px 0 36px; }
.category-circles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.category-circle-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}
.circle-icon-wrap {
    width: 96px;
    height: 96px;
    background: var(--primary-dark);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 22px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.circle-icon-wrap svg { width: 44px; height: 44px; color: var(--mid-tone); }
.category-circle-item a:hover .circle-icon-wrap {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(48,54,79,0.25);
}
.circle-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--primary-dark);
    text-align: center;
}

/* =========================================================
   PRODUCT SECTIONS
   ========================================================= */
.product-section { padding: 48px 0; }
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}
.view-all {
    font-weight: 600;
    font-size: 14px;
    color: var(--primary-dark);
    border: 1.5px solid var(--primary-dark);
    padding: 7px 18px;
    border-radius: 20px;
    transition: all 0.2s;
}
.view-all:hover {
    background: var(--primary-dark);
    color: #fff;
}

/* Scrollable row */
.product-scroll-row {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding-bottom: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
}
.product-scroll-row::-webkit-scrollbar { display: none; }
.product-scroll-row .product-card { min-width: 240px; flex-shrink: 0; }

/* 4-col grid */
.product-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Product Card */
.product-card {
    border: 1px solid #e8ecef;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.product-card:hover {
    border-color: var(--mid-tone);
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.09);
}
.product-badge-wrap {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    display: flex;
    gap: 4px;
}
.badge-stock {
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
}
.badge-sale {
    background: #fdecea;
    color: #c62828;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
}
.product-wishlist {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
}
.product-wishlist a {
    color: var(--mid-tone);
    font-size: 18px;
    transition: color 0.2s;
}
.product-wishlist a:hover { color: #e74c3c; }

.product-img-wrap {
    text-align: center;
    margin-bottom: 14px;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: transparent; padding: 0;
}
.product-img-wrap img {
    width: 100%; height: 100%; max-height: 180px;
    object-fit: cover;
    position: relative;
    z-index: 2;
}

/* Skeleton */
@keyframes skeleton-loading {
    0%   { background-color: #eff1f3; }
    100% { background-color: #e2e5e8; }
}
.skeleton-img {
    position: absolute;
    inset: 0;
    animation: skeleton-loading 1.2s ease-in-out infinite alternate;
    border-radius: 8px;
    z-index: 1;
}
.skeleton-img.loaded { display: none; }

.product-info { padding: 4px 0; }
.product-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 40px;
}
.product-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #f9a825;
    margin-bottom: 8px;
}
.product-rating .review-count { color: var(--mid-tone); font-size: 12px; }
.product-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.product-price .price ins { text-decoration: none; font-weight: 800; font-size: 18px; color: var(--primary-dark); }
.product-price .price del { font-size: 13px; color: var(--text-muted); }
.discount-badge { color: #c62828; font-weight: 700; font-size: 12px; }

/* =========================================================
   FREE DELIVERY BANNER
   ========================================================= */
.delivery-banner {
    background: var(--primary-dark);
    color: #fff;
    padding: 22px 0;
    text-align: center;
}
.delivery-banner p {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.delivery-banner span {
    color: var(--warm-accent);
}

/* =========================================================
   LIFESTYLE BANNER
   ========================================================= */
.lifestyle-banner-section { padding: 48px 0; }
.lifestyle-banner-inner {
    min-height: 320px;
    border-radius: 16px;
    background: var(--primary-dark);
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    text-align: center;
    overflow: hidden;
}
.lifestyle-banner-inner .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(48,54,79,0.85), rgba(48,54,79,0.6));
    border-radius: 16px;
}
.lifestyle-banner-content {
    position: relative;
    z-index: 2;
    color: #fff;
}
.lifestyle-banner-content h2 {
    font-size: 42px;
    font-weight: 900;
    margin: 0 0 16px;
}
.lifestyle-banner-content p {
    font-size: 16px;
    opacity: 0.85;
    margin-bottom: 28px;
}
.lifestyle-btn {
    background: var(--warm-accent);
    color: var(--primary-dark);
    font-size: 16px;
    font-weight: 700;
    padding: 14px 36px;
}
.lifestyle-btn:hover { background: #fff; color: var(--primary-dark); }

/* =========================================================
   WHY CHOOSE US
   ========================================================= */
.why-us-section { padding: 64px 0; background: #f8f9fb; }
.why-us-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: 40px;
}
.why-us-card {
    background: #fff;
    border-radius: 14px;
    padding: 32px 24px;
    text-align: center;
    border: 1px solid #eef0f4;
    transition: box-shadow 0.3s;
}
.why-us-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.08); }
.why-us-icon {
    width: 62px;
    height: 62px;
    background: var(--primary-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: transform 0.3s ease;
}
.why-us-card:hover .why-us-icon { transform: rotate(10deg); }
.why-us-icon svg { width: 30px; height: 30px; color: var(--mid-tone); }
.why-us-card h3 { font-size: 17px; font-weight: 700; margin: 0 0 8px; color: var(--primary-dark); }
.why-us-card p { font-size: 14px; color: var(--text-muted); margin: 0; line-height: 1.6; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--primary-dark); color: rgba(255,255,255,0.8); padding: 60px 0 0; }
.footer-container { display: flex; gap: 32px; }
.footer-widget-area { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; width: 100%; }
.footer-column h3 { color: #fff; font-size: 15px; font-weight: 700; margin: 0 0 18px; letter-spacing: 0.5px; }
.footer-column p { font-size: 14px; line-height: 1.7; }
.footer-column ul { list-style: none; padding: 0; margin: 0; }
.footer-column ul li { margin-bottom: 10px; }
.footer-column ul li a { color: rgba(255,255,255,0.65); font-size: 14px; transition: color 0.2s; }
.footer-column ul li a:hover { color: #fff; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
    margin-top: 48px;
    padding: 20px 0;
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,0.4);
}

/* =========================================================
   WOOCOMMERCE — ARCHIVE PAGE
   ========================================================= */
.category-hero {
    background: var(--primary-dark);
    color: #fff;
    padding: 48px 0;
    margin-bottom: 40px;
}
.category-hero h1 {
    font-size: 36px;
    font-weight: 900;
    margin: 0 0 8px;
}
.breadcrumb {
    font-size: 14px;
    color: rgba(255,255,255,0.65);
}
.breadcrumb a { color: rgba(255,255,255,0.65); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { margin: 0 6px; }

.archive-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
    padding-bottom: 60px;
}
.archive-sidebar { }
.filter-widget {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}
.filter-widget h4 { font-size: 14px; font-weight: 700; color: var(--primary-dark); margin: 0 0 14px; }
.filter-widget input[type="range"] { width: 100%; accent-color: var(--primary-dark); }
.filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 8px;
    cursor: pointer;
}
.filter-option input[type="checkbox"] { accent-color: var(--primary-dark); width: 16px; height: 16px; }
.star-filter { color: #f9a825; font-size: 15px; }

.archive-main { }
.archive-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}
.archive-count { font-size: 14px; color: var(--text-muted); }
.sort-select {
    padding: 9px 16px;
    border: 1.5px solid var(--mid-tone);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-main);
    background: #fff;
    cursor: pointer;
    outline: none;
}
.product-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.archive-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.archive-pagination a,
.archive-pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1.5px solid #e0e3e8;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    transition: all 0.2s;
}
.archive-pagination .current,
.archive-pagination a:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}

/* =========================================================
   PAGE TEMPLATES — CONTACT / FAQ / RETURNS
   ========================================================= */
.page-hero {
    background: var(--primary-dark);
    color: #fff;
    padding: 52px 0;
    text-align: center;
}
.page-hero h1 { font-size: 38px; font-weight: 900; margin: 0 0 10px; }
.page-hero p { font-size: 16px; color: rgba(255,255,255,0.75); margin: 0; }

/* Contact */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 48px;
    padding: 60px 0;
}
.contact-form-wrap h2, .contact-info-wrap h2 {
    font-size: 22px; font-weight: 700; color: var(--primary-dark); margin: 0 0 24px;
}
.contact-form .form-row {
    margin-bottom: 18px;
}
.contact-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 6px;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #dde1e7;
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--font-family);
    color: var(--text-main);
    background: #fff;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--primary-dark);
    outline: none;
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form .submit-btn {
    background: var(--primary-dark);
    color: #fff;
    padding: 13px 36px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}
.contact-form .submit-btn:hover { background: #3f4769; }

.contact-info-item {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
    align-items: flex-start;
}
.contact-info-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-dark);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-info-icon svg { width: 20px; height: 20px; color: var(--mid-tone); }
.contact-info-item h4 { font-size: 13px; font-weight: 700; color: var(--primary-dark); margin: 0 0 4px; }
.contact-info-item p { font-size: 14px; color: var(--text-muted); margin: 0; line-height: 1.6; }
.map-placeholder {
    background: var(--primary-dark);
    border-radius: 12px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.6);
    font-size: 16px;
    font-weight: 600;
    margin-top: 28px;
}

/* FAQ Accordion */
.faq-section { padding: 60px 0; }
.faq-list { max-width: 820px; margin: 40px auto 0; }
.faq-item {
    border: 1.5px solid #e8ecef;
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
}
.faq-question {
    width: 100%;
    text-align: left;
    background: #fff;
    border: none;
    padding: 20px 24px;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-dark);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}
.faq-question:hover { background: #f8f9fb; }
.faq-question .faq-arrow {
    font-size: 20px;
    transition: transform 0.3s ease;
    font-weight: 400;
    color: var(--mid-tone);
}
.faq-item.open .faq-arrow { transform: rotate(45deg); }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0 24px;
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.7;
    background: #fff;
}
.faq-item.open .faq-answer { max-height: 300px; padding: 0 24px 20px; }

/* Returns */
.returns-section { padding: 60px 0; }
.returns-content { max-width: 820px; margin: 0 auto; }
.returns-block {
    border-bottom: 1px solid #eef0f4;
    padding: 32px 0;
}
.returns-block:last-child { border-bottom: none; }
.returns-block h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-dark);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.returns-block p, .returns-block ul {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}
.returns-block ul { padding-left: 20px; }
.returns-block ul li { margin-bottom: 6px; }

/* =========================================================
   HAMBURGER BUTTON — hidden on desktop
   ========================================================= */
.hamburger-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    background: none;
    border: none;
    order: 0;
    flex-shrink: 0;
}
.hamburger-btn span {
    width: 24px;
    height: 2px;
    background: var(--primary-dark);
    display: block;
    transition: all 0.3s ease;
    border-radius: 2px;
}

/* Mobile nav overlay */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
}
.nav-overlay.open { display: block; }

/* Nav close button */
.nav-close-btn {
    display: none;
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 22px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary-dark);
    line-height: 1;
    padding: 4px;
    z-index: 10;
}

/* Filter toggle button — hidden on desktop */
.filter-toggle-btn { display: none; }

/* Language switcher buttons */
.lang-switcher { display: flex; align-items: center; gap: 4px; }
.lang-btn {
    background: none;
    border: none;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(48,54,79,0.6);
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
    font-family: inherit;
    min-height: 28px;
}
.lang-btn.active,
.lang-btn:hover {
    color: var(--primary-dark);
    background: rgba(48,54,79,0.06);
}
.lang-divider { color: #ccc; font-size: 12px; }
.my-account-text { display: inline; }

/* =========================================================
   RESPONSIVE — TABLET (max-width: 1024px)
   ========================================================= */
@media (max-width: 1024px) {
    .product-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .product-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .why-us-grid    { grid-template-columns: repeat(2, 1fr); }
    .archive-layout { grid-template-columns: 200px 1fr; }
    .footer-widget-area { grid-template-columns: 1fr 1fr; }
    .contact-layout { grid-template-columns: 1fr; }
    .category-circles-grid { grid-template-columns: repeat(4, 1fr); }
}



/* =========================================================
   FULL RTL LAYOUT (From Global to Mobile)
   ========================================================= */

/* Direction */
* { box-sizing: border-box; }
body { direction: rtl; text-align: right; }

/* Global Header Components RTL */
.header-search input { text-align: right; padding-right: 16px; padding-left: 44px; }
.search-icon { right: auto; left: 12px; }
.cart-count { right: auto; left: -6px; }

/* Navigation & Header RTL */
.category-nav, .main-nav { direction: rtl; }
.cat-nav-item { flex-direction: row-reverse; gap: 6px; }

/* Section headings */
.section-header { flex-direction: row-reverse; }
.section-title { text-align: right; }

/* Forms */
input, textarea, select { text-align: right; direction: rtl; }

/* Breadcrumbs & dropdowns */
.breadcrumb { text-align: right; direction: rtl; }
.dropdown-menu { right: 0; left: auto; text-align: right; }
.slider-prev { right: 16px; left: auto; }
.slider-next { left: 16px; right: auto; }
.why-choose-grid { direction: rtl; }
.why-choose-item { text-align: center; }

/* Footer Global RTL */
.footer-widget-area { flex-direction: row-reverse; }
.footer-column { text-align: right; }
.footer-column ul { padding-right: 0; text-align: right; }

/* =========================================================
   RESPONSIVE — MOBILE UNIFIED (max-width: 768px)


/* =========================================================
   MOBILE RESPONSIVE CLASSES (per user spec)
   ========================================================= */
@media (max-width: 768px) {

/* Mobile nav hidden by default */
.main-nav, .nav-bar {
    display: none !important;
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: 75%;
    max-width: 280px;
    height: 100vh;
    background: #ffffff;
    z-index: 99999;
    flex-direction: column;
    align-items: flex-start;
    padding: 70px 24px 24px;
    box-shadow: -4px 0 24px rgba(0,0,0,0.2);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
}

.main-nav.open,
.category-nav.open {
    display: flex !important;
    transform: translateX(0);
}

/* Dark overlay when nav is open */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99998;
}
.nav-overlay.open {
    display: block;
}

/* Close button inside nav */
.nav-close-btn {
    display: block;
    position: absolute;
    top: 16px;
    left: 16px;
    right: auto;
    background: none;
    border: none;
    font-size: 26px;
    color: #30364F;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
}

/* Category Navigation List Layout */
.category-nav,
.category-nav-list {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Nav items inside mobile drawer */
.nav-item,
.menu-item,
.cat-nav-item {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 16px;
    font-family: 'Cairo', sans-serif;
    text-align: right;
    color: #30364F;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* Hamburger button — show on mobile */
.hamburger-btn {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    background: none;
    border: none;
    order: 0;
}
.hamburger-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: #30364F;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Announcement bar */
.announcement-bar, .darak-announcement-bar {
    font-size: 11px;
    padding: 7px 40px 7px 12px;
    text-align: center;
    background: #C62828;
    color: #fff;
    position: relative;
}
.announcement-bar .dismiss-btn, .darak-announcement-close {
    position: absolute;
    left: 10px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
}

/* Header row */
.header-inner, .header-main-inner {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: nowrap;
    background: #ffffff;
    border-bottom: 1px solid #eee;
}

/* Logo */
.header-logo, .site-branding {
    flex: 1;
    display: flex;
    justify-content: center;
    order: 1;
}
.header-logo img, .site-branding img {
    height: 40px;
    width: auto;
}

/* Icons group */
.header-icons, .header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    order: 2;
}
.header-icons .cart-icon-link,
.header-icons .wishlist-link,
.header-icons .account-link,
.header-actions .cart-nav,
.header-actions .wishlist-nav,
.header-actions .my-account-nav {
    font-size: 20px;
    color: #30364F;
    position: relative;
}
.cart-count {
    position: absolute;
    top: -6px;
    left: -6px;
    right: auto;
    background: #C62828;
    color: #fff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* Hide deliver to on mobile */
.delivery-location { display: none !important; }

/* Search bar — full width below header */
.header-search, .header-search-row {
    width: 100%;
    padding: 8px 14px;
    background: #fff;
    border-bottom: 1px solid #eee;
    order: 3;
    flex: 1 1 100%;
}
.search-input, .darak-search-input {
    width: 100%;
    height: 40px;
    border: 1.5px solid #ACBAC4;
    border-radius: 20px;
    padding: 0 40px 0 16px;
    font-size: 14px;
    font-family: 'Cairo', sans-serif;
    text-align: right;
    direction: rtl;
    outline: none;
}
.search-submit-btn, .search-icon {
    position: absolute;
    right: 12px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
}
.my-account-text { display: none; }

/* MOBILE HERO SLIDER */
.hero-slider-section, .hero-slider {
    width: 100%;
    min-height: 240px;
    max-height: 320px;
    overflow: hidden;
    position: relative;
}
.hero-slide {
    width: 100%;
    min-height: 240px;
    position: relative;
    flex-direction: row;
}
.hero-image, .hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
}
.hero-content {
    position: absolute;
    top: 50%;
    right: 16px;
    left: 16px;
    transform: translateY(-50%);
    text-align: right;
    z-index: 2;
    background: none;
    padding: 0;
}
.slide-badge, .hero-badge {
    font-size: 10px;
    padding: 3px 10px;
    border-radius: 12px;
    background: #C62828;
    color: #fff;
    display: inline-block;
    margin-bottom: 6px;
}
.slide-title, .hero-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 6px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.slide-subtitle, .hero-subtitle {
    font-size: 12px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 12px;
}
.slide-btn, .hero-btn {
    display: inline-block;
    padding: 9px 20px;
    background: #30364F;
    color: #fff;
    border-radius: 20px;
    font-size: 13px;
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    text-decoration: none;
}
.slider-dots, .hero-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 3;
}
.slider-dot, .hero-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    transition: background 0.3s;
}
.slider-dot.active, .hero-dot.active { background: #fff; }

/* Hide arrows on very small screens */
.slider-arrow, .hero-slider-btn { display: none; }

/* MOBILE CATEGORIES ROW */
.category-circles-section {
    padding: 20px 14px;
    background: #fff;
}
.category-circles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    overflow-x: visible;
}
.category-card, .circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 6px;
    background: #f8f8f4;
    border-radius: 12px;
    border: 1px solid #E1D9BC;
    text-decoration: none;
    transition: transform 0.2s ease;
}
.category-card:active, .circle-item:active { transform: scale(0.97); }
.circle-icon-wrap {
    width: 36px;
    height: 36px;
    margin-bottom: 6px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.circle-icon-wrap svg {
    width: 32px;
    height: 32px;
}
.category-name, .circle-title {
    font-size: 11px;
    font-family: 'Cairo', sans-serif;
    color: #30364F;
    font-weight: 600;
    line-height: 1.3;
}

@media (max-width: 360px) {
    .category-circles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .category-card, .circle-item { padding: 14px 8px; }
    .category-name, .circle-title { font-size: 12px; }
}

/* MOBILE PRODUCT CARDS */
.product-section, .section-wrapper {
    padding: 20px 0;
}
.section-header {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    margin-bottom: 14px;
}
.section-heading, .section-title {
    font-size: 17px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #30364F;
    margin: 0;
}
.view-all, .view-all-link {
    font-size: 13px;
    color: #30364F;
    text-decoration: none;
    font-family: 'Cairo', sans-serif;
    padding: 0;
    background: none;
}

.products-grid, .product-grid-4, .product-grid-3,
.products-scroll-row, .product-scroll-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
    padding: 0 14px;
    overflow: visible;
}

.product-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    overflow: hidden;
    min-width: unset;
    display: flex;
    flex-direction: column;
}
.product-img-wrap, .product-image-wrap {
    width: 100%;
    height: 140px;
    overflow: hidden;
    background: transparent;
    position: relative;
    padding: 0;
}
.product-img-wrap img, .product-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
}
.product-info {
    padding: 8px 10px 12px;
    text-align: right;
    direction: rtl;
}
.product-title {
    font-size: 12px;
    font-family: 'Cairo', sans-serif;
    color: #1a1e2e;
    margin-bottom: 4px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: unset;
}
.product-rating {
    font-size: 11px;
    margin-bottom: 4px;
    text-align: right;
}
.product-price {
    font-size: 13px;
    font-weight: 700;
    color: #30364F;
    font-family: 'Cairo', sans-serif;
}
.product-price del {
    font-size: 11px;
    color: #999;
    font-weight: 400;
    margin-left: 4px;
}
.product-discount-badge {
    font-size: 10px;
    color: #C62828;
    font-weight: 600;
}
.stock-badge, .stock-status {
    position: absolute;
    top: 8px;
    right: 8px;
    left: auto;
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 8px;
    background: #2e7d32;
    color: #fff;
    font-family: 'Cairo', sans-serif;
}
.sale-badge, .sale-badge-card {
    position: absolute;
    top: 8px;
    left: 8px;
    right: auto;
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 8px;
    background: #C62828;
    color: #fff;
}
.wishlist-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    right: auto;
    background: rgba(255,255,255,0.85);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
}

/* MOBILE WHY CHOOSE US */
.why-us-section, .why-choose-section {
    padding: 24px 14px;
    background: #f8f8f4;
}
.why-choose-title {
    text-align: center;
    font-size: 18px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #30364F;
    margin-bottom: 20px;
}
.why-us-grid, .why-choose-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px;
    padding: 0;
}
.why-us-card, .why-choose-item {
    background: #fff;
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    border: 1px solid #E1D9BC;
}
.why-us-icon, .why-icon {
    font-size: 28px;
    margin-bottom: 8px;
    display: block;
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
}
.why-us-icon svg, .why-icon svg { width: 32px; height: 32px; fill: #30364F; }
.why-us-card h3, .why-title {
    font-size: 13px;
    font-weight: 700;
    color: #30364F;
    font-family: 'Cairo', sans-serif;
    margin-bottom: 4px;
}
.why-us-card p, .why-desc {
    font-size: 11px;
    color: #6b7280;
    font-family: 'Cairo', sans-serif;
}

/* MOBILE FOOTER */
.site-footer {
    background: #30364F;
    padding: 30px 0 0;
}
.footer-widget-area, .footer-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0;
    padding: 0;
}
.footer-column, .footer-widget {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-align: right;
    direction: rtl;
    width: 100%;
}
.footer-column h3, .footer-widget h3 {
    font-size: 15px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}
.footer-column p,
.footer-column li,
.footer-column a,
.footer-widget p,
.footer-widget li,
.footer-widget a {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    font-family: 'Cairo', sans-serif;
    line-height: 1.8;
    text-decoration: none;
}
.footer-column ul, .footer-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}
.footer-column ul li, .footer-widget ul li { margin-bottom: 6px; }
.footer-bottom {
    background: rgba(0,0,0,0.2);
    text-align: center;
    padding: 14px 16px;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    font-family: 'Cairo', sans-serif;
}

} /* end mobile */


   WOOCOMMERCE RTL
   ========================================================= */

/* Cart page */
.woocommerce-cart table.cart { direction: rtl; }
.woocommerce-cart .cart-collaterals { 
    float: right; 
    text-align: right; 
}

/* Checkout page */
.woocommerce-checkout .col2-set { 
    direction: rtl; 
}
.woocommerce form .form-row label { 
    text-align: right; 
    display: block; 
}
.woocommerce form .form-row input,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
    text-align: right;
    direction: rtl;
}

/* My Account page */
.woocommerce-account .woocommerce-MyAccount-navigation {
    float: right;
    text-align: right;
}
.woocommerce-account .woocommerce-MyAccount-content {
    float: left;
}

/* Product page */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    direction: rtl;
}
.woocommerce div.product p.price { text-align: right; }
.woocommerce div.product .woocommerce-product-rating {
    text-align: right;
}

/* Shop/archive page */
.woocommerce .woocommerce-ordering { float: right; }
.woocommerce-result-count { float: left; }


/* =========================================================
   FILTER SIDEBAR ENHANCEMENTS
   ========================================================= */
.clear-filters-btn {
    display: inline-block;
    padding: 8px 16px;
    background: #fff0f0;
    color: #C62828;
    border: 1px solid #C62828;
    border-radius: 20px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.clear-filters-btn:hover { background: #C62828; color: #fff; }

.price-range-display {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-muted, #6b7280);
    margin-bottom: 10px;
    font-family: 'Cairo', sans-serif;
    direction: ltr;
}
.apply-price-btn {
    display: block;
    width: 100%;
    padding: 9px 0;
    background: #30364F;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.apply-price-btn:hover { background: #3f4769; }

/* noUiSlider RTL color overrides */
.noUi-connect { background: #30364F; }
.noUi-handle { border-radius: 50%; border: 2px solid #30364F; box-shadow: none; }
.noUi-handle::before, .noUi-handle::after { display: none; }

.filter-close-btn {
    display: none;
    position: absolute;
    top: 14px;
    left: 14px;
    right: auto;
    background: none;
    border: none;
    font-size: 22px;
    color: #30364F;
    cursor: pointer;
    padding: 4px 8px;
    z-index: 10;
}

.filter-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
}
.filter-overlay.open { display: block; }

@media (max-width: 768px) {
    .filter-close-btn { display: block; }
    .filter-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 14px;
        background: #30364F;
        color: #fff;
        border: none;
        border-radius: 10px;
        font-family: 'Cairo', sans-serif;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        margin-bottom: 16px;
    }
    .archive-sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        max-height: 80vh;
        overflow-y: auto;
        background: #fff;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -4px 30px rgba(0,0,0,0.18);
        padding: 48px 20px 32px;
        z-index: 9999;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.25,0.8,0.25,1);
        display: block !important;
    }
    .archive-sidebar.open { transform: translateY(0); }
}

/* =========================================================
   TOAST NOTIFICATION
   ========================================================= */
.darak-toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: #30364F;
    color: #fff;
    padding: 12px 24px;
    border-radius: 25px;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    z-index: 999999;
    opacity: 0;
    transition: all 0.3s ease;
    white-space: nowrap;
    pointer-events: none;
}
.darak-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.darak-toast.red { background: #C62828; }

/* =========================================================
   WISHLIST BUTTON ON PRODUCT CARD
   ========================================================= */
.product-wishlist .wishlist-btn {
    background: rgba(255,255,255,0.92);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    color: #30364F;
    transition: color 0.2s, transform 0.15s;
    line-height: 1;
    padding: 0;
}
.product-wishlist .wishlist-btn:hover { transform: scale(1.15); }

/* =========================================================
   WISHLIST PAGE
   ========================================================= */
.wishlist-page {
    padding: 40px 0;
    min-height: 60vh;
    direction: rtl;
}
.wishlist-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.wishlist-title {
    font-size: 24px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #30364F;
    margin-bottom: 30px;
    text-align: right;
    padding-bottom: 12px;
    border-bottom: 2px solid #E1D9BC;
}
.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.wishlist-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    overflow: hidden;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
}
.wishlist-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.remove-fav-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    right: auto;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 18px;
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.remove-fav-btn:hover { color: #C62828; }
.wishlist-img-wrap {
    height: 180px;
    overflow: hidden;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wishlist-img-wrap img { max-height: 100%; object-fit: cover; width: 100%; padding: 0; }
.wishlist-info { padding: 12px; text-align: right; }
.wishlist-info h3 {
    font-size: 14px;
    font-family: 'Cairo', sans-serif;
    color: #1a1e2e;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wishlist-price { font-size: 15px; font-weight: 700; color: #30364F; font-family: 'Cairo', sans-serif; }
.wishlist-add-cart-btn {
    display: block;
    margin: 0 12px 12px;
    padding: 10px;
    background: #30364F;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.wishlist-add-cart-btn:hover { background: #3f4769; color: #fff; }
.wishlist-empty { text-align: center; padding: 80px 20px; }
.empty-icon { font-size: 64px; color: #ACBAC4; margin-bottom: 16px; }
.wishlist-empty h2 { font-size: 20px; font-family: 'Cairo', sans-serif; color: #30364F; margin-bottom: 8px; }
.wishlist-empty p { font-size: 14px; color: #6b7280; font-family: 'Cairo', sans-serif; margin-bottom: 24px; }
.btn-shop-now {
    display: inline-block;
    padding: 12px 32px;
    background: #30364F;
    color: #fff;
    border-radius: 25px;
    font-family: 'Cairo', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
.btn-shop-now:hover { background: #3f4769; color: #fff; }

@media (max-width: 768px) {
    .wishlist-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .wishlist-img-wrap { height: 140px; }
    .wishlist-title { font-size: 20px; }
}

/* =========================================================
   FIX — PRODUCT IMAGE GREY BACKGROUND
   ========================================================= */

/* Remove grey background from product image wrapper */
.product-image-wrap,
.product-img-wrap,
.woocommerce ul.products li.product a img,
.woocommerce-loop-product__link img,
.attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product img {
    background: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Make image fill the full rectangle */
.product-image-wrap,
.product-img-wrap {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: transparent !important;
    border-radius: 12px 12px 0 0;
}

.product-image-wrap img,
.product-img-wrap img,
.woocommerce ul.products li.product a img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center;
    display: block;
    background: transparent !important;
    padding: 0 !important;
}

/* Remove any inner shadow or border on image */
.product-card .product-image-wrap,
.product-card img {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* WooCommerce default image overrides */
.woocommerce ul.products li.product {
    background: transparent !important;
}
.woocommerce ul.products li.product a {
    background: transparent !important;
}

/* Also fix on single product page */
.woocommerce div.product div.images img {
    background: transparent !important;
    padding: 0 !important;
}
.woocommerce div.product div.images {
    background: transparent !important;
}

/* Fix for archive/category pages */
.archive .product-card,
.tax-product_cat .product-card {
    overflow: hidden;
}
.archive .product-image-wrap,
.tax-product_cat .product-image-wrap {
    background: transparent !important;
    padding: 0 !important;
}

/* Mobile */
@media (max-width: 768px) {
    .product-image-wrap,
    .product-img-wrap {
        height: 160px;
        background: transparent !important;
    }
}

/* =========================================================
   AGGRESSIVE FIX FOR PRODUCT IMAGES
   ========================================================= */

/* The wrapper must have no padding and fill the space */
.product-img-wrap, 
.product-image-wrap,
.wishlist-img-wrap {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    display: block !important;
}

/* Hide the skeleton loader entirely as it leaves a permanent grey box */
.skeleton-img {
    display: none !important;
    background: transparent !important;
}

/* The A tag inside the wrapper must fill the wrapper */
.product-img-wrap a, 
.product-image-wrap a,
.wishlist-img-wrap a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* The image itself must cover the whole area */
.product-img-wrap img, 
.product-img-wrap a img,
.wishlist-img-wrap img,
.product-image-wrap img,
.woocommerce ul.products li.product a img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Make sure the card itself has the right border radius so the image doesn't overflow corners */
.product-card, .wishlist-card {
    overflow: hidden !important;
}

/* =========================================================
   MOBILE ARCHIVE & FILTER FIXES
   ========================================================= */
@media (max-width: 768px) {

/* Hide filter sidebar completely on mobile */
.filter-sidebar,
.archive-sidebar,
.widget-area,
.shop-sidebar,
.woocommerce-sidebar {
    display: none !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-height: 80vh !important;
    background: #ffffff !important;
    z-index: 99999 !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 24px 20px !important;
    overflow-y: auto !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.15) !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s ease !important;
}

.filter-sidebar.open,
.archive-sidebar.open {
    display: block !important;
    transform: translateY(0) !important;
}

/* Dark overlay when filter is open */
.filter-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99998;
}
.filter-overlay.open { display: block !important; }

/* Filter toggle button — show on mobile */
.filter-toggle-btn {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #30364F;
    color: #fff;
    border: none;
    border-radius: 25px;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 16px;
}
.filter-toggle-btn svg {
    width: 16px;
    height: 16px;
}

/* Close button inside filter sheet */
.filter-close-btn {
    display: block;
    position: absolute;
    top: 16px;
    left: 16px;
    background: none;
    border: none;
    font-size: 24px;
    color: #30364F;
    cursor: pointer;
}

/* Filter sheet header */
.filter-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}
.filter-sheet-title {
    font-size: 16px;
    font-weight: 700;
    font-family: 'Cairo', sans-serif;
    color: #30364F;
}

/* Full width layout — no sidebar column */
.archive-layout {
    display: block !important;
    width: 100% !important;
    padding: 0 12px !important;
}

.archive-products {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* Mobile filter bar */
.mobile-filter-bar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    margin-bottom: 8px;
}
.products-count-mobile {
    font-size: 13px;
    font-family: 'Cairo', sans-serif;
    color: #6b7280;
}

/* Sort bar */
.archive-sort-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 14px;
}
.archive-sort-bar select {
    padding: 8px 12px;
    border: 1px solid #ACBAC4;
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    color: #30364F;
    background: #fff;
    direction: rtl;
}

/* Product grid — 2 proper columns */
.products-grid,
.woocommerce ul.products,
ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
}

/* Product card */
.product-card,
.woocommerce ul.products li.product,
ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    position: relative;
}

/* Product image */
.product-image-wrap,
.woocommerce ul.products li.product a img {
    width: 100% !important;
    height: 150px !important;
    object-fit: cover !important;
    object-position: center !important;
    background: transparent !important;
    padding: 0 !important;
    display: block !important;
}

/* Product info area */
.product-info,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.product-card .product-details {
    padding: 8px 10px 12px !important;
    text-align: right !important;
    direction: rtl !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Product title */
.product-card .product-title,
.woocommerce-loop-product__title {
    font-size: 12px !important;
    font-family: 'Cairo', sans-serif !important;
    color: #1a1e2e !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-align: right !important;
}

/* Price */
.product-card .product-price,
.woocommerce ul.products li.product .price {
    font-size: 13px !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700 !important;
    color: #30364F !important;
    text-align: right !important;
    margin: 4px 0 !important;
    direction: rtl !important;
}
.woocommerce ul.products li.product .price del {
    font-size: 11px !important;
    color: #999 !important;
    font-weight: 400 !important;
}
.woocommerce ul.products li.product .price ins {
    text-decoration: none !important;
    font-weight: 700 !important;
}

/* Add to cart button */
.product-card .add-to-cart-btn,
.woocommerce ul.products li.product .button {
    display: block !important;
    width: calc(100% - 20px) !important;
    margin: 8px 10px 10px !important;
    padding: 8px 10px !important;
    background: #30364F !important;
    color: #fff !important;
    text-align: center !important;
    border-radius: 8px !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

/* Badges */
.stock-badge,
.in-stock-badge,
.badge-stock {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    font-size: 9px !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
    background: #2e7d32 !important;
    color: #fff !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 600 !important;
    z-index: 2 !important;
}
.sale-badge,
.onsale,
.badge-sale {
    position: absolute !important;
    top: 8px !important;
    left: auto !important;
    right: 8px !important;
    font-size: 9px !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
    background: #C62828 !important;
    color: #fff !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 600 !important;
    z-index: 2 !important;
}

.stock-badge + .sale-badge,
.in-stock-badge + .onsale,
.badge-stock + .badge-sale {
    top: 34px !important;
}

/* Heart/wishlist button */
.wishlist-btn,
.product-wishlist-btn {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: auto !important;
    background: rgba(255,255,255,0.9) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 14px !important;
    z-index: 2 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
}

/* Star rating */
.star-rating,
.product-rating {
    font-size: 11px !important;
    margin: 4px 0 !important;
    text-align: right !important;
    direction: rtl !important;
}

.filter-sidebar {
    font-family: 'Cairo', sans-serif;
    direction: rtl;
    text-align: right;
}

.filter-section h3,
.filter-group h3,
.widget-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #30364F !important;
    margin-bottom: 14px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #eee !important;
    font-family: 'Cairo', sans-serif !important;
}

.noUi-target {
    margin: 16px 0 !important;
}
.price-range-display {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 12px;
    text-align: center;
    display: flex;
    justify-content: space-around;
}

.filter-checkbox-item,
.brand-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #f5f5f5 !important;
    font-size: 14px !important;
    color: #1a1e2e !important;
    font-family: 'Cairo', sans-serif !important;
    cursor: pointer !important;
}
.filter-checkbox-item input[type="checkbox"],
.brand-item input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #30364F !important;
    cursor: pointer !important;
    order: -1 !important;
}

.rating-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #f5f5f5 !important;
    cursor: pointer !important;
}
.rating-item .stars {
    color: #f59e0b !important;
    font-size: 14px !important;
}
.rating-item .rating-label {
    font-size: 13px !important;
    color: #6b7280 !important;
    font-family: 'Cairo', sans-serif !important;
}
.rating-item input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #30364F !important;
    order: -1 !important;
}

.filter-actions {
    display: flex !important;
    gap: 10px !important;
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid #eee !important;
}
.filter-apply-btn {
    flex: 1 !important;
    padding: 12px !important;
    background: #30364F !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}
.filter-clear-btn {
    flex: 1 !important;
    padding: 12px !important;
    background: #fff !important;
    color: #30364F !important;
    border: 1.5px solid #30364F !important;
    border-radius: 10px !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

}

/* Very small screens */
@media (max-width: 360px) {
    .product-card .product-title,
    .woocommerce-loop-product__title {
        font-size: 11px !important;
    }
    .product-card .product-price,
    .woocommerce ul.products li.product .price {
        font-size: 12px !important;
    }
    .products-grid,
    .woocommerce ul.products,
    ul.products {
        gap: 8px !important;
    }
}

/* =========================================================
   DESKTOP FIXES (HIDING MOBILE ELEMENTS)
   ========================================================= */
@media (min-width: 769px) {
    .mobile-filter-bar { display: none !important; }
    .filter-overlay { display: none !important; }
    .filter-toggle-btn { display: none !important; }
    
    /* Ensure the sidebar appears normally on desktop */
    .filter-sidebar, .archive-sidebar {
        display: block !important;
        position: static !important;
        transform: none !important;
    }
}

/* =========================================================
   BULLETPROOF MOBILE PRODUCT CARD DESIGN
   ========================================================= */
@media (max-width: 768px) {
    /* The 2-column layout for the grid */
    .products-grid,
    .woocommerce ul.products,
    ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px 8px !important; /* 8px horizontal gap */
        padding: 0 4px !important;
        margin: 0 !important;
        list-style: none !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* The individual card */
    .product-card,
    .woocommerce ul.products li.product,
    ul.products li.product {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        border-radius: 12px !important;
        border: 1px solid #e2e5e8 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        overflow: hidden !important; 
    }

    /* The image wrapper */
    .product-card .product-img-wrap,
    .product-card .product-image-wrap,
    .woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
        width: 100% !important;
        height: 140px !important;
        position: relative !important;
        background: #f8f9fa !important; /* Give a soft backdrop for the AC images */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid #f1f3f5 !important;
    }

    /* The image itself */
    .product-card .product-img-wrap img,
    .product-card .product-image-wrap img,
    .woocommerce ul.products li.product a img {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important; /* Contain prevents the AC unit from being cropped if background is grey */
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        background: transparent !important;
        mix-blend-mode: multiply !important; /* Removes white canvas baked into jpeg/pngs */
    }

    /* The Info section */
    .product-card .product-info,
    .product-card .product-details,
    .woocommerce ul.products li.product .product-info {
        padding: 10px 8px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        flex: 1 !important;
        background: #fff !important;
    }

    /* Product Title */
    .product-card .product-title,
    .product-card h3,
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 11px !important;
        line-height: 1.4 !important;
        font-family: 'Cairo', sans-serif !important;
        color: #1a1e2e !important;
        font-weight: 700 !important;
        margin: 0 0 6px 0 !important;
        text-align: right !important;
        direction: rtl !important;
        /* clamp to 2 lines */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
    }

    /* Price styling */
    .product-card .product-price,
    .woocommerce ul.products li.product .price {
        font-size: 13px !important;
        font-weight: 800 !important;
        color: #30364F !important;
        text-align: right !important;
        margin: 4px 0 !important;
        font-family: 'Cairo', sans-serif !important;
        direction: rtl !important;
    }
    
    .woocommerce ul.products li.product .price del,
    .product-card .product-price del {
        font-size: 10px !important;
        color: #9ca3af !important;
        font-weight: 500 !important;
        display: block !important;
        margin-bottom: -2px !important;
    }
    .woocommerce ul.products li.product .price ins,
    .product-card .product-price ins {
        text-decoration: none !important;
        font-weight: 800 !important;
        color: #C62828 !important;
    }

    /* Centered Add to cart button */
    .product-card .add-to-cart-btn,
    .product-card .wishlist-btn-mobile,
    .woocommerce ul.products li.product .button {
        display: block !important;
        width: 100% !important;
        margin: 8px 0 0 0 !important;
        padding: 8px !important;
        background: #30364F !important;
        color: #fff !important;
        text-align: center !important;
        border-radius: 6px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        font-family: 'Cairo', sans-serif !important;
    }

    /* BADGES (Stock / Sale) - FIX PLACEMENT INSIDE */
    .product-card .badge-stock,
    .product-card .badge-sale,
    .stock-badge,
    .in-stock-badge,
    .sale-badge,
    .onsale,
    .product-badge-wrap span {
        position: absolute !important;
        top: 6px !important;
        font-size: 9px !important;
        padding: 4px 6px !important;
        border-radius: 4px !important;
        color: #fff !important;
        font-family: 'Cairo', sans-serif !important;
        font-weight: 700 !important;
        z-index: 10 !important;
        line-height: 1 !important;
        display: inline-block !important;
    }
    
    /* Green Stock Badge on RIGHT inside the border */
    .product-card .badge-stock,
    .stock-badge,
    .in-stock-badge {
        right: 6px !important;
        left: auto !important;
        background: #2e7d32 !important;
    }

    /* Red Sale Badge slightly below the stock badge */
    .product-card .badge-sale,
    .sale-badge,
    .onsale {
        right: 6px !important;
        left: auto !important;
        top: 28px !important;
        background: #C62828 !important;
    }

    /* HEART/WISHLIST - on the LEFT inside the border */
    .wishlist-btn,
    .product-wishlist-btn,
    .product-card .product-wishlist button {
        position: absolute !important;
        top: 6px !important;
        left: 6px !important;
        right: auto !important;
        background: #fff !important;
        color: #cbd5e1 !important;
        border: 1px solid #e2e5e8 !important;
        border-radius: 50% !important;
        width: 26px !important;
        height: 26px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 15px !important;
        z-index: 10 !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    /* Star rating - align properly */
    .star-rating,
    .product-rating,
    .product-card .stars {
        font-size: 10px !important;
        margin: 4px 0 6px 0 !important;
        text-align: right !important;
        color: #f59e0b !important;
        letter-spacing: 1px !important;
    }
}

/* =========================================================
   FIX MOBILE BADGE WRAPPERS
   ========================================================= */
@media (max-width: 768px) {
    /* Kill the absolute positioning on the wrappers so the children can anchor to the card! */
    .product-card .product-badge-wrap,
    .product-card .product-wishlist {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }
}

/* =========================================================
   MOBILE WISHLIST FIX
   ========================================================= */
@media (max-width: 768px) {
    /* Ensure the grid gracefully handles a single item without pushing it to the far right uncomfortably */
    .wishlist-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    /* Make the wishlist card robust */
    .wishlist-card {
        width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        padding-bottom: 50px !important; /* Space for the absolute button */
    }

    /* Wrap the price text beautifully so it never overflows off-screen */
    .wishlist-card .wishlist-info {
        padding: 10px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .wishlist-card h3 {
        font-size: 11px !important;
        line-height: 1.4 !important;
        font-family: 'Cairo', sans-serif !important;
        font-weight: 700 !important;
        margin-bottom: 8px !important;
        /* Line clamping */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .wishlist-card .wishlist-price {
        font-size: 11px !important; /* Smaller size to fit long strings */
        color: #30364F !important;
        font-weight: 700 !important;
        line-height: 1.6 !important;
        font-family: 'Cairo', sans-serif !important;
        /* CRITICAL FOR NOT CUTTING OFF NUMBERS */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        width: 100% !important;
        text-align: right !important;
        direction: rtl !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Fix Add to Cart Button overlapping or placement */
    .wishlist-card .wishlist-add-cart-btn {
        display: block !important;
        width: calc(100% - 16px) !important;
        position: absolute !important;
        bottom: 8px !important;
        left: 8px !important;
        right: 8px !important;
        padding: 8px !important;
        background: #30364F !important;
        color: #fff !important;
        text-align: center !important;
        border-radius: 6px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        font-family: 'Cairo', sans-serif !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }
}

/* Very small screens for wishlist */
@media (max-width: 360px) {
    .wishlist-grid { 
        /* Switch to 1 column on tiny phones so the text never gets crushed */
        grid-template-columns: 1fr !important; 
    }
    .wishlist-card .wishlist-price {
        font-size: 12px !important;
    }
}

/* =========================================================
   MOBILE-ONLY UI FIXES  (max-width: 768px)
   — Header logo, Footer logo, Related products grid
   ========================================================= */
@media (max-width: 768px) {

    /* ── 1. Header logo: far right, reduced size ── */
    .header-logo, .site-branding {
        flex: 0 0 auto;
        justify-content: flex-end;
        margin-right: auto;
        order: 1;
    }
    .site-branding a.custom-logo-link,
    .header-logo a.custom-logo-link {
        display: block;
        max-height: 36px;
        max-width: 120px;
        line-height: 0;
    }
    .site-branding a.custom-logo-link img,
    .site-branding a.custom-logo-link svg,
    .header-logo a.custom-logo-link img,
    .header-logo a.custom-logo-link svg {
        max-height: 36px;
        max-width: 120px;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
    }

    /* ── 2. Footer logo: hide broken img, show text brand ── */
    .footer-logo-image { display: none; }
    .footer-logo-text { display: block; margin-bottom: 10px; }
    .footer-logo-text a {
        font-family: 'Cairo', sans-serif;
        font-size: 22px;
        font-weight: 900;
        color: #ffffff;
        text-decoration: none;
        letter-spacing: -0.5px;
        line-height: 1;
    }

    /* ── 3. Related products grid ── */
    .related.products > h2, .woocommerce .related h2 {
        text-align: center !important;
        font-family: 'Cairo', sans-serif !important;
        font-size: 20px !important;
        font-weight: 800 !important;
        color: #30364F !important;
        margin: 24px 0 16px !important;
        padding: 0 14px !important;
    }
    .related.products ul.products,
    .woocommerce .related ul.products,
    .woocommerce-page .related ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 14px !important;
        margin: 0 !important;
        list-style: none !important;
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .related.products ul.products li.product,
    .woocommerce .related ul.products li.product {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        background: #fff !important;
        border: 1px solid #eee !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
        position: relative !important;
        box-sizing: border-box !important;
    }
    .related.products ul.products li.product a img,
    .woocommerce .related ul.products li.product a img {
        width: 100% !important;
        height: 130px !important;
        object-fit: contain !important;
        padding: 8px !important;
        background: #fff !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    .related.products ul.products li.product .onsale,
    .woocommerce .related ul.products li.product .onsale {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        left: auto !important;
        background: #C62828 !important;
        color: #fff !important;
        font-family: 'Cairo', sans-serif !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        padding: 3px 8px !important;
        border-radius: 20px !important;
        min-width: unset !important;
        min-height: unset !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }
    .related.products ul.products li.product .woocommerce-loop-product__title,
    .woocommerce .related ul.products li.product h2 {
        font-family: 'Cairo', sans-serif !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #1a1e2e !important;
        padding: 8px 10px 4px !important;
        margin: 0 !important;
        line-height: 1.4 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-align: right !important;
    }
    .related.products ul.products li.product .price,
    .woocommerce .related ul.products li.product .price {
        display: block !important;
        padding: 2px 10px 6px !important;
        margin: 0 !important;
        font-family: 'Cairo', sans-serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #30364F !important;
        text-align: right !important;
        direction: rtl !important;
        overflow: hidden !important;
    }
    .related.products ul.products li.product .price del,
    .woocommerce .related ul.products li.product .price del {
        font-size: 10px !important;
        color: #999 !important;
        font-weight: 400 !important;
        display: block !important;
        white-space: nowrap !important;
    }
    .related.products ul.products li.product .price ins,
    .woocommerce .related ul.products li.product .price ins {
        text-decoration: none !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #30364F !important;
        display: block !important;
        background: transparent !important;
    }
    .related.products ul.products li.product .button,
    .related.products ul.products li.product a.button,
    .woocommerce .related ul.products li.product .button,
    .woocommerce .related ul.products li.product a.button {
        display: block !important;
        width: calc(100% - 16px) !important;
        margin: auto 8px 8px !important;
        padding: 10px 6px !important;
        background: #30364F !important;
        color: #fff !important;
        border: none !important;
        border-radius: 8px !important;
        font-family: 'Cairo', sans-serif !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-align: center !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        margin-top: auto !important;
        text-decoration: none !important;
    }

} /* end mobile-only UI fixes */