/*
Theme Name: ErbilOriginal
Theme URI: https://example.com/erbiloriginal
Author: طراحی و توسعه توسط تاج وب
Author URI: https://tajweb.ir
Description: قالب اختصاصی و لوکس فروشگاه اینترنتی لوازم آرایشی و بهداشتی اربیل اورجینال. طراحی و کدنویسی شده توسط تاج وب (tajweb.ir).
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: erbiloriginal
Tags: فروشگاهی, ووکامرس, لوازم آرایشی, تاج وب, ecommerce, woocommerce, cosmetics
*/

/* ============================================
   CSS VARIABLES — Soft Pink & White Palette
   ============================================ */
:root {
    /* Backgrounds */
    --color-bg: #fffcfd;
    --color-bg-white: #ffffff;
    --color-bg-soft: #fef1f4;
    --color-bg-search: #f1f5f9;

    /* Premium Palette */
    --color-premium-bg: #faf9ff;
    --color-deep-rose: #ff4270;
    --color-soft-coral: #ff7b8f;
    --color-purple-hint: #ba54f5;
    --color-shadow-pink: rgba(255, 77, 121, 0.08);
    --color-shadow-pink-hover: rgba(255, 66, 112, 0.15);
    --color-glow-neon: rgba(255, 66, 112, 0.6);
    --color-gradient-border: linear-gradient(135deg, #ff4270, #ba54f5, #ff7b8f);
    --color-gradient-mesh: linear-gradient(135deg, #ff4270 0%, #ff6b8a 40%, #ba54f5 100%);
    --color-inner-light: rgba(255, 255, 255, 0.2);

    /* Pink Accents */
    --color-pink: #ff4d79;
    --color-pink-dark: #e0355f;
    --color-pink-light: #ff8fa8;
    --color-pink-ultra: #fff0f5;
    --color-pink-gradient: linear-gradient(135deg, #fef1f4 0%, #ffe3ea 100%);

    /* Text */
    --color-text: #2d2d2d;
    --color-text-body: #555555;
    --color-text-muted: #8a8a95;
    --color-text-inverse: #ffffff;

    /* Borders */
    --color-border: #f0f0f0;
    --color-border-soft: #f5f5f7;

    /* Shadows */
    --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 10px 25px rgba(0, 0, 0, 0.04);
    --shadow-header: 0 2px 12px rgba(0, 0, 0, 0.03);
    --shadow-pink: 0 8px 22px rgba(255, 77, 121, 0.28);

    /* Typography */
    --font-primary: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
    --font-heading: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --spacing-4xl: 6rem;

    /* Border Radius */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 1.75rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal: 500;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* ============================================
   GLOBAL HORIZONTAL OVERFLOW LOCK (RTL-safe)
   ============================================
   In an RTL document the scroll origin is the RIGHT edge. Any element that
   pokes past the right edge widens the document's scrollable region, and the
   browser then anchors the whole page at that widened right edge — shifting
   the layout sideways (content clipped on the right, empty gutter on the
   left). Locking BOTH html and body prevents that.
   NOTE: `clip` is preferred over `hidden` because `hidden` on both html and
   body turns <body> into a scroll container, which breaks the sticky header.
   `clip` clips without creating a scroll container, so position: sticky keeps
   working. `hidden` is kept first as a fallback for older browsers. */
html,
body {
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    overflow-x: hidden !important;
    overflow-x: clip !important;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--color-pink);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--color-pink-dark);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-body);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.vc-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.vc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0.85rem 1.9rem;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
}

.vc-btn-sm {
    padding: 0.6rem 1.35rem;
    font-size: 0.9rem;
}

.vc-btn-primary {
    background: var(--color-pink);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-pink);
}

.vc-btn-primary:hover {
    background: var(--color-pink-dark);
    color: var(--color-text-inverse);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(255, 77, 121, 0.38);
}

.vc-btn-ghost {
    background: var(--color-bg-white);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.vc-btn-ghost:hover {
    color: var(--color-pink);
    border-color: var(--color-pink-light);
    background: var(--color-pink-ultra);
}

/* ============================================
   HEADER / NAVIGATION
   ============================================ */
.vc-header {
    position: sticky;
    top: 0;
    z-index: var(--z-fixed);
    background: var(--color-bg-white);
    border-bottom: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-header);
}

.vc-header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.vc-header-inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    min-height: 76px;
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
}

/* Right side: logo + nav */
.vc-header-right {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

.vc-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: -0.02em;
}

.vc-logo:hover {
    color: var(--color-text);
}

.vc-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: var(--color-pink-ultra);
    color: var(--color-pink);
}

.vc-logo-text {
    background: linear-gradient(135deg, var(--color-pink) 0%, var(--color-pink-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vc-nav-menu {
    display: flex;
    align-items: center;
    gap: 18px;
    list-style: none;
}

.vc-nav-menu a {
    color: var(--color-text-body);
    font-weight: 500;
    font-size: 0.95rem;
    padding: var(--spacing-sm) var(--spacing-sm);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.vc-nav-menu a:hover,
.vc-nav-menu .current-menu-item > a {
    color: var(--color-pink);
}

/* Center: search */
.vc-header-center {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
}

/* Search container — wide, prominent, and the anchor for the live dropdown */
.header-search,
.vc-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 320px;
    width: 100%;
    max-width: 380px;
    min-width: 240px;
    background: transparent;
    border: none;
    border-radius: 14px;
    padding: 0;
    transition: all 0.25s;
}

/* The input itself is the styled pill */
.vc-search-input {
    flex: 1 1 auto;
    width: 100%;
    height: 44px;
    border: 1.5px solid #eee;
    outline: none;
    background: #f7f7fa;
    border-radius: 14px;
    font-family: var(--font-primary);
    font-size: 0.95rem;
    color: var(--color-text);
    padding: 0 42px 0 36px;
    transition: all 0.25s;
    -webkit-appearance: none;
    appearance: none;
}

.vc-search-input::placeholder {
    color: var(--color-text-muted);
}

.vc-search-input:focus {
    background: #fff;
    border-color: #ec407a;
    box-shadow: 0 4px 16px rgba(236, 64, 122, 0.12);
}

/* Hide the native WebKit clear affordance (we render our own). */
.vc-search-input::-webkit-search-cancel-button,
.vc-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* Leading search icon (start / right in RTL) */
.vc-search-icon {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--color-text-muted);
    pointer-events: none;
    z-index: 2;
}

/* Clear button (end / left in RTL) */
.erbil-search-clear {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #ececf1;
    color: #8a8a99;
    cursor: pointer;
    z-index: 3;
    transition: all 0.2s;
}

.erbil-search-clear:hover {
    background: #ec407a;
    color: #fff;
}

.erbil-search-clear[hidden] {
    display: none;
}

/* Subtle pink loading spinner inside the search bar */
.erbil-search-spinner {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid rgba(236, 64, 122, 0.25);
    border-top-color: #ec407a;
    border-radius: 50%;
    animation: erbil-spin 0.7s linear infinite;
    z-index: 3;
}

.erbil-search-spinner[hidden] {
    display: none;
}

@keyframes erbil-spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* Never clip the absolutely-positioned live search dropdown. */
header,
.site-header,
.header-search {
    overflow: visible !important;
}

/* Live search results dropdown */
.erbil-live-search-results {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    z-index: 99999;
    background: #fff;
    border: 1px solid #f4dce6;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    display: none;
    overflow: hidden;
    max-height: 420px;
    overflow-y: auto;
}

.erbil-live-search-results.is-active {
    display: block !important;
}

.erbil-live-search-results[hidden] {
    display: none;
}

.erbil-live-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #f6f6f8;
    color: var(--color-text);
    text-decoration: none;
    transition: background 0.2s;
}

.erbil-live-search-item:last-child {
    border-bottom: none;
}

.erbil-live-search-item:hover {
    background: #fdf2f6;
}

.erbil-live-search-thumb {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    object-fit: cover;
    background: #f7f7fa;
}

.erbil-live-search-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.erbil-live-search-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.erbil-live-search-price {
    font-size: 0.82rem;
    font-weight: 700;
    color: #ec407a;
}

.erbil-live-search-price .amount,
.erbil-live-search-price ins {
    color: #ec407a;
}

.erbil-live-search-price del {
    color: #b0b0bd;
    font-weight: 500;
    margin-inline-start: 6px;
}

.erbil-live-search-empty {
    padding: 18px 14px;
    text-align: center;
    font-size: 0.88rem;
    color: var(--color-text-muted);
}

.erbil-live-search-footer {
    display: block;
    padding: 12px 14px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ec407a;
    background: #fdf2f6;
    border-top: 1px solid #f6f6f8;
    text-decoration: none;
}

.erbil-live-search-footer:hover {
    background: #fce4ec;
}

/* Left side: icons + CTA */
.vc-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.vc-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    color: var(--color-text);
    background: transparent;
    transition: all var(--transition-base);
}

.vc-icon-btn:hover {
    color: var(--color-pink);
    background: var(--color-pink-ultra);
}

.vc-cart-count {
    position: absolute;
    top: -4px !important;
    right: -6px !important;
    left: auto !important;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--color-text-inverse);
    background: var(--color-pink);
    border-radius: var(--radius-full);
    line-height: 1 !important;
}

.vc-header-cta {
    margin-inline-start: var(--spacing-sm);
}

/* Mobile toggle */
.vc-mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-sm);
    margin-inline-start: auto;
}

.vc-mobile-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: all var(--transition-base);
}

/* ============================================
   HERO BANNER
   ============================================ */
.vc-hero {
    padding: var(--spacing-xl) 0;
}

.vc-hero-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2xl);
    background: var(--color-pink-gradient);
    border-radius: 32px;
    padding: var(--spacing-2xl) var(--spacing-3xl);
    overflow: hidden;
    position: relative;
    width: 98%;
    max-width: 1440px;
    margin: 40px auto;
    min-height: 380px;
    max-height: 420px;
}

.vc-hero-text {
    flex: 1 1 55%;
    max-width: 560px;
}

.vc-hero-tag {
    display: inline-block;
    padding: 0.4rem 1rem;
    background: var(--color-bg-white);
    color: var(--color-pink);
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-soft);
}

.vc-hero-title {
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    font-weight: 800;
    line-height: 1.5;
    margin-bottom: var(--spacing-lg);
    color: var(--color-text);
}

.vc-hero-title-accent {
    display: block;
    color: var(--color-pink);
}

.vc-hero-desc {
    font-size: 1.05rem;
    color: var(--color-text-body);
    margin-bottom: var(--spacing-xl);
    max-width: 480px;
}

.vc-hero-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.vc-hero-image {
    flex: 1 1 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.vc-hero-image img {
    width: 100%;
    max-width: 420px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(255, 77, 121, 0.18));
}

/* ============================================
   SECTION HEADERS
   ============================================ */
.vc-section-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    /* Contain the decorative ambient-glow blobs (::before / ::after) so they
       can never poke past the viewport edges and shift the RTL layout. */
    position: relative;
    overflow: hidden;
}

.vc-section-title {
    position: relative;
    display: inline-block;
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.vc-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--color-pink);
}

.vc-section-desc {
    max-width: 560px;
    margin: 0 auto;
    color: var(--color-text-muted);
}

/* ============================================
   CATEGORIES GRID — Premium Glass & Glow
   ============================================ */
.vc-categories {
    padding: var(--spacing-3xl) 0 var(--spacing-4xl);
    position: relative;
}

.vc-categories-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--spacing-xl);
    position: relative;
    z-index: 1;
}

/* Premium Glass & Glow Category Cards */
.vc-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 24px;
    padding: var(--spacing-2xl) var(--spacing-md);
    color: var(--color-text);
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Diffuse colored shadow */
    box-shadow: 0 15px 35px rgba(255, 77, 121, 0.06), 0 5px 15px rgba(0, 0, 0, 0.03);
}

/* Shimmering gradient top border */
.vc-category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff4270, #ba54f5, #ff7b8f, #ba54f5, #ff4270);
    background-size: 200% 100%;
    border-radius: 24px 24px 0 0;
    animation: vcShimmer 4s ease-in-out infinite;
    opacity: 0.7;
    transition: opacity 0.4s ease;
}

.vc-category-card:hover::before {
    opacity: 1;
}

/* Subtle inner glow */
.vc-category-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: radial-gradient(ellipse at top center, rgba(255, 66, 112, 0.03), transparent 70%);
    pointer-events: none;
    transition: background 0.4s ease;
}

.vc-category-card:hover::after {
    background: radial-gradient(ellipse at top center, rgba(255, 66, 112, 0.06), transparent 70%);
}

/* Hover: Float up 8px, enhanced shadow, icon bounce */
.vc-category-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(255, 77, 121, 0.12), 0 10px 25px rgba(0, 0, 0, 0.04);
    border-color: rgba(255, 66, 112, 0.15);
}

/* Premium Icon Container */
.vc-category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-pink-ultra), rgba(255, 66, 112, 0.08));
    color: var(--color-pink);
    margin-bottom: var(--spacing-sm);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 15px rgba(255, 77, 121, 0.1);
}

.vc-category-card:hover .vc-category-icon {
    background: linear-gradient(135deg, var(--color-pink), var(--color-deep-rose));
    color: var(--color-text-inverse);
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(255, 66, 112, 0.3);
    animation: vcIconBounce 0.6s ease;
}

.vc-category-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    position: relative;
    z-index: 1;
    letter-spacing: -0.01em;
}

.vc-category-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-pink);
    margin-top: var(--spacing-xs);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0.6;
    position: relative;
    z-index: 1;
}

.vc-category-card:hover .vc-category-arrow {
    transform: translateX(-6px);
    opacity: 1;
}

/* ============================================
   CATEGORY CAROUSEL (Swiper)
   ============================================ */
/* Fix container spacing */
.vc-cat-swiper {
    padding: 20px 10px 40px !important;
}

.vc-cat-swiper .swiper-wrapper {
    display: flex !important;
    gap: 0 !important;
}

.vc-cat-swiper .swiper-slide {
    height: auto;
}

.vc-cat-swiper .vc-category-card {
    width: 100% !important;
    margin: 0 !important;
}

/* Elegant Navigation Arrows */
.vc-cat-swiper .swiper-button-next,
.vc-cat-swiper .swiper-button-prev {
    background-color: #ffffff !important;
    color: #ec407a !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    top: 50% !important;
    margin-top: -22px !important;
}

/* Arrow Icon Size */
.vc-cat-swiper .swiper-button-next::after,
.vc-cat-swiper .swiper-button-prev::after {
    font-size: 16px !important;
    font-weight: 900 !important;
}

/* ============================================
   SPECIAL OFFERS SLIDER (شگفت‌انگیز) — Premium Gradient Mesh
   ============================================ */
.vc-special-offers {
    padding: var(--spacing-3xl) 0 var(--spacing-4xl);
}

/* Premium Gradient Mesh Container */
.vc-offers-panel {
    background: var(--color-gradient-mesh);
    background-size: 200% 200%;
    animation: vcGradientShift 12s ease-in-out infinite;
    border-radius: 40px;
    padding: 24px;
    color: var(--color-text-inverse);
    position: relative;
    /* Was `visible`: the ::after glow blob (bottom:-150px; right:-100px) then
       escaped the panel and overflowed the viewport on the right. Clipping it
       keeps the glow inside the panel and the page inside the viewport. */
    overflow: hidden;
    border: 1px solid var(--color-inner-light);
    box-shadow:
        0 30px 60px rgba(255, 66, 112, 0.2),
        0 15px 30px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Inner light reflection overlay */
.vc-offers-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 40px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%, rgba(186, 84, 245, 0.08) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Ambient glow behind the panel */
.vc-offers-panel::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(186, 84, 245, 0.2), transparent 70%);
    bottom: -150px;
    right: -100px;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

@keyframes vcGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Header row */
.vc-offers-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: 0 var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    margin-bottom: var(--spacing-lg);
}

.vc-offers-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-inverse);
}

.vc-offers-title svg {
    color: var(--color-text-inverse);
    flex-shrink: 0;
}

/* Mobile-only compact title (hidden on desktop so the desktop layout is untouched). */
.vc-offers-title-mobile {
    display: none;
}

.vc-offers-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-inverse);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    transition: opacity var(--transition-base);
}

.vc-offers-link:hover {
    color: var(--color-text-inverse);
    opacity: 0.85;
}

/* Content: intro + slider */
.vc-offers-content {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-lg);
}

/* Right column: intro */
.vc-offers-intro {
    flex: 0 0 230px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-sm);
}

.vc-offers-intro-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.5;
    color: var(--color-text-inverse);
}

.vc-offers-percent {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
    color: rgba(255, 255, 255, 0.9);
}

/* Compact decorative discount badge (replaces the oversized plain %) */
.vc-offers-deco-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--color-text-inverse);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    backdrop-filter: blur(6px);
}

/* ============================================
   SPECIAL OFFERS — COUNTDOWN TIMER
   ============================================ */
.erbil-countdown-timer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    /* Clock reads left-to-right (روز : ساعت : دقیقه : ثانیه). */
    direction: ltr;
    flex-wrap: wrap;
}

/* The [hidden] attribute must win over the flex display below. */
.erbil-countdown-timer [hidden] {
    display: none !important;
}

.erbil-countdown-timer .timer-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.95);
    color: #d81b60;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    text-align: center;
    line-height: 1.1;
}

.erbil-countdown-timer .timer-num {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.erbil-countdown-timer .timer-label {
    font-size: 10px;
    color: #666;
    margin-top: 2px;
}

.erbil-countdown-timer .timer-colon {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    animation: erbilColonBlink 1s steps(1) infinite;
}

@keyframes erbilColonBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.2; }
}

/* Compact inline pill — mobile only (hidden on desktop). */
.erbil-countdown-mobile {
    display: none;
}

.vc-offers-discover {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.6rem 1.3rem;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-full);
    color: var(--color-text-inverse);
    font-size: 0.9rem;
    font-weight: 600;
    transition: all var(--transition-base);
}

.vc-offers-discover:hover {
    background: var(--color-bg-white);
    color: #ef396d;
}

/* Left column: Swiper carousel */
.vc-offers-slider-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.vc-offers-swiper {
    width: 100%;
    padding: 4px 2px 8px;
    overflow: hidden;
}

.vc-offers-swiper .swiper-slide {
    height: auto;
}

/* Premium Navigation Arrows */
.vc-offers-nav {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
}

.vc-offers-prev,
.vc-offers-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 66, 112, 0.1);
    border-radius: 50%;
    color: var(--color-pink);
    cursor: pointer;
    pointer-events: auto;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(255, 66, 112, 0.1);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 11;
}

.vc-offers-prev::before,
.vc-offers-next::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 66, 112, 0.2), rgba(186, 84, 245, 0.15));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.vc-offers-prev:hover::before,
.vc-offers-next:hover::before {
    opacity: 1;
}

.vc-offers-prev {
    right: -10px;
}

.vc-offers-next {
    left: -10px;
}

.vc-offers-prev:hover,
.vc-offers-next:hover {
    background: linear-gradient(135deg, var(--color-pink), var(--color-deep-rose));
    color: var(--color-text-inverse);
    transform: translateY(-50%) scale(1.1);
    box-shadow:
        0 8px 25px rgba(255, 66, 112, 0.35),
        0 3px 10px rgba(0, 0, 0, 0.1);
}

.vc-offers-prev:active,
.vc-offers-next:active {
    transform: translateY(-50%) scale(1.05);
}

.vc-offers-prev.swiper-button-disabled,
.vc-offers-next.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
    transform: translateY(-50%);
}

/* Premium Product Cards */
.vc-offer-card {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--color-bg-white);
    border-radius: 20px;
    padding: 14px;
    overflow: visible;
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.06),
        0 4px 12px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.vc-offer-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.1),
        0 8px 20px rgba(0, 0, 0, 0.05);
}

/* Floating Discount Badge — Neon Pill */
.vc-offer-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;
    z-index: 14;
    padding: 4px 10px;
    background: linear-gradient(135deg, #ff4270, #ff2d5c);
    color: var(--color-text-inverse);
    font-size: 11px;
    font-weight: 800;
    border-radius: 50px;
    box-shadow:
        0 4px 15px rgba(255, 45, 92, 0.4),
        0 2px 6px rgba(255, 45, 92, 0.3);
    letter-spacing: 0.02em;
}

/* Premium Favorite Button */
.vc-offer-fav {
    position: absolute;
    top: 12px;
    left: 12px;
    right: auto;
    z-index: 15;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 66, 112, 0.1);
    border-radius: 50%;
    color: #ef396d;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vc-offer-fav:hover {
    transform: scale(1.15);
    background: var(--color-pink);
    color: var(--color-text-inverse);
    box-shadow: 0 6px 20px rgba(255, 66, 112, 0.35);
}

.vc-offer-fav.active {
    background: var(--color-pink);
    color: var(--color-text-inverse);
    box-shadow: 0 4px 15px rgba(255, 66, 112, 0.3);
}

/* Product Image Container */
.vc-offer-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
    padding: 10px;
    border-radius: 16px;
    background: linear-gradient(135deg, #faf9ff, #fff5f7);
    transition: all 0.4s ease;
}

.vc-offer-card:hover .vc-offer-image {
    transform: scale(1.02);
}

.vc-offer-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.vc-offer-card:hover .vc-offer-image img {
    transform: scale(1.05);
}

.vc-offer-name {
    margin: 0;
    text-align: right;
    color: #2d2d32;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

.vc-offer-card:hover .vc-offer-name {
    color: var(--color-pink);
}

.vc-offer-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}

.vc-offer-prices {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.vc-offer-old {
    color: #a0a0a8;
    font-size: 11px;
    text-decoration: line-through;
    font-weight: 500;
}

.vc-offer-new {
    color: #2d2d32;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* Premium Add to Cart Button */
.vc-offer-cart {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffe3ea, #ffd1dc);
    border: 1px solid rgba(255, 66, 112, 0.1);
    border-radius: 12px;
    color: #d81b52;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

/* The button also carries WooCommerce's `.button` class (required for the
   AJAX add-to-cart handler). Neutralise WooCommerce's generic button styling
   so the compact icon-button look is preserved. Placed before the :hover
   rules so those still take precedence. */
.vc-offer-cart.button {
    padding: 0;
    min-width: 0;
    line-height: 1;
    font-size: inherit;
    text-decoration: none;
    box-shadow: none;
    background: linear-gradient(135deg, #ffe3ea, #ffd1dc);
    border: 1px solid rgba(255, 66, 112, 0.1);
    border-radius: 12px;
    color: #d81b52;
}

.vc-offer-cart::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-pink), var(--color-deep-rose));
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 12px;
}

.vc-offer-cart:hover::before {
    opacity: 1;
}

.vc-offer-cart:hover {
    color: var(--color-text-inverse);
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(255, 66, 112, 0.35);
}

.vc-offer-cart svg {
    position: relative;
    z-index: 1;
}

/* Glowing animation for cart on hover */
.vc-offer-card:hover .vc-offer-cart {
    animation: vcPulseGlow 2s ease-in-out infinite;
}

/* Special offers — responsive */
@media (max-width: 900px) {
    .vc-offers-content {
        flex-direction: column;
    }

    .vc-offers-intro {
        flex: 1 1 auto;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }

    .vc-offers-intro-title {
        font-size: 1.3rem;
    }

    .vc-offers-percent {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .vc-offers-panel {
        border-radius: 20px;
        padding: 14px;
    }

    .vc-offers-header {
        flex-wrap: wrap;
    }

    .vc-offers-title {
        font-size: 1rem;
    }

    .vc-offers-prev,
    .vc-offers-next {
        width: 34px;
        height: 34px;
    }

    .vc-offers-prev {
        right: -2px;
    }

    .vc-offers-next {
        left: -2px;
    }
}

/* Special offers — mobile declutter (<= 768px). Desktop layout is untouched. */
@media (max-width: 768px) {
    /* 1. Hide the redundant stacked promo sidebar (giant %, stacked
       "شگفت انگیزهای امروز" title and duplicate "کشف همه" button). It
       duplicated the header and consumed ~220px of vertical space. */
    .vc-offers-intro {
        display: none !important;
    }

    /* 2. Single-line mobile header bar. */
    .vc-offers-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        padding: 14px 16px;
        margin-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Right side: compact title. */
    .vc-offers-title {
        font-size: 16px;
        font-weight: 800;
        color: #fff;
        white-space: nowrap;
    }

    /* Swap the long desktop title for the compact mobile title. */
    .vc-offers-title-text {
        display: none !important;
    }

    .vc-offers-title-mobile {
        display: inline !important;
    }

    /* Left side: "همه پیشنهادها ←" as a semi-transparent pill. */
    .vc-offers-link {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }

    /* 3. Hide the overlapping Swiper arrows — mobile users swipe by touch. */
    .vc-special-offers .vc-offers-nav,
    .vc-special-offers .vc-offers-prev,
    .vc-special-offers .vc-offers-next,
    .vc-special-offers .swiper-button-next,
    .vc-special-offers .swiper-button-prev {
        display: none !important;
    }

    /* 4. Tighter outer container; drop the gap left by the hidden intro. */
    .vc-offers-panel {
        padding: 16px 12px 20px !important;
        border-radius: 20px;
    }

    .vc-offers-content {
        gap: 0;
    }

    /* 5. Compact inline countdown pill inside the top header bar.
       It sits on the same line as the title so it adds zero vertical height. */
    .erbil-countdown-mobile {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 4px 10px;
        background: rgba(255, 255, 255, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 20px;
        direction: ltr;
        flex-wrap: nowrap;
        flex-shrink: 0;
    }

    .erbil-countdown-mobile .timer-unit {
        min-width: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
        color: #fff;
        flex-direction: row;
    }

    .erbil-countdown-mobile .timer-num {
        font-size: 13px;
        color: #fff;
    }

    .erbil-countdown-mobile .timer-label {
        display: none;
    }

    .erbil-countdown-mobile .timer-colon {
        font-size: 13px;
        color: #fff;
    }

    .erbil-countdown-mobile::after {
        content: '⏱';
        font-size: 12px;
        margin-left: 2px;
    }

    /* Keep the single-line header from overflowing on narrow phones. */
    .vc-offers-header {
        gap: 8px;
    }

    .vc-offers-title {
        font-size: 14px;
    }
}

@media (max-width: 400px) {
    .vc-offers-title {
        font-size: 12px;
    }

    .erbil-countdown-mobile {
        padding: 3px 7px;
    }

    .erbil-countdown-mobile .timer-num,
    .erbil-countdown-mobile .timer-colon {
        font-size: 11px;
    }
}

/* ============================================
   CONTENT AREA
   ============================================ */
.vc-content {
    padding: var(--spacing-3xl) 0;
}

.vc-single-header {
    margin-bottom: var(--spacing-2xl);
}

.vc-single-title {
    margin-bottom: var(--spacing-md);
}

.vc-single-thumbnail {
    margin-bottom: var(--spacing-2xl);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.vc-single-thumbnail .vc-post-thumbnail {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.entry-content {
    color: var(--color-text-body);
}

.entry-content h1,
.entry-content h2,
.entry-content h3 {
    color: var(--color-text);
}

/* ============================================
   BLOG / POSTS SECTION
   ============================================ */
.vc-posts-section {
    margin-top: var(--spacing-3xl);
}

.vc-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-xl);
}

.vc-post-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.vc-post-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

.vc-post-thumbnail {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.vc-post-content {
    padding: var(--spacing-xl);
}

.vc-post-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.vc-post-meta span {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.vc-post-title {
    font-size: 1.15rem;
    margin-bottom: var(--spacing-md);
    line-height: 1.5;
}

.vc-post-title a {
    color: var(--color-text);
}

.vc-post-title a:hover {
    color: var(--color-pink);
}

.vc-post-excerpt {
    color: var(--color-text-body);
    font-size: 0.95rem;
    margin-bottom: var(--spacing-lg);
}

.vc-read-more {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-pink);
    font-weight: 600;
    font-size: 0.9rem;
}

.vc-read-more:hover {
    gap: var(--spacing-md);
}

/* ============================================
   FOOTER
   ============================================ */
.vc-footer {
    background: var(--color-bg-white);
    border-top: 1px solid var(--color-border-soft);
    padding: var(--spacing-3xl) 0 var(--spacing-xl);
}

.vc-footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: var(--spacing-3xl);
    margin-bottom: var(--spacing-3xl);
}

.vc-footer-brand p {
    color: var(--color-text-muted);
    margin-top: var(--spacing-md);
    max-width: 300px;
}

.vc-footer-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    color: var(--color-text);
}

.vc-footer-links {
    list-style: none;
}

.vc-footer-links li {
    margin-bottom: var(--spacing-sm);
}

.vc-footer-links a {
    color: var(--color-text-body);
    font-size: 0.95rem;
    transition: all var(--transition-base);
}

.vc-footer-links a:hover {
    color: var(--color-pink);
    padding-inline-start: var(--spacing-sm);
}

.vc-footer-bottom {
    border-top: 1px solid var(--color-border-soft);
    padding-top: var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.vc-footer-bottom p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.vc-social-links {
    display: flex;
    gap: var(--spacing-md);
}

.vc-social-links a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-body);
    transition: all var(--transition-base);
}

.vc-social-links a:hover {
    background: var(--color-pink-ultra);
    border-color: var(--color-pink-light);
    color: var(--color-pink);
    transform: translateY(-3px);
}

/* ============================================
   WIDGETS
   ============================================ */
.widget {
    margin-bottom: var(--spacing-xl);
}

.widget:last-child {
    margin-bottom: 0;
}

.widget-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-border);
    position: relative;
}

.widget-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 50px;
    height: 2px;
    background: var(--color-pink);
}

/* ============================================
   BLOCK EDITOR COMPATIBILITY
   ============================================ */
.wp-block-separator {
    border: none;
    border-top: 2px solid var(--color-border);
    margin: var(--spacing-3xl) auto;
}

.wp-block-button__link {
    background: var(--color-pink);
    color: var(--color-text-inverse);
    border-radius: var(--radius-full);
    padding: 0.75rem 1.75rem;
    font-weight: 600;
}

/* ============================================
   COMMENTS
   ============================================ */
.comments-area {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    margin-top: var(--spacing-3xl);
}

.comment-list {
    list-style: none;
}

.comment {
    padding: var(--spacing-xl) 0;
    border-bottom: 1px solid var(--color-border);
}

.comment:last-child {
    border-bottom: none;
}

.comment-form p {
    margin-bottom: var(--spacing-md);
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--color-bg-search);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-family: var(--font-primary);
    transition: border-color var(--transition-base);
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--color-pink-light);
    box-shadow: 0 0 0 3px rgba(255, 77, 121, 0.12);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1200px) {
    .vc-categories-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1024px) {
    .vc-header-right {
        gap: var(--spacing-lg);
    }

    .vc-nav-menu {
        gap: var(--spacing-md);
    }

    .vc-header-cta {
        display: none;
    }

    .vc-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .vc-header-inner {
        flex-wrap: wrap;
        row-gap: var(--spacing-sm);
    }

    .vc-header-center {
        order: 3;
        flex-basis: 100%;
        max-width: 100%;
    }

    .vc-search {
        max-width: 100%;
    }

    .vc-hero-banner {
        flex-direction: column-reverse;
        text-align: center;
        padding: var(--spacing-xl) var(--spacing-lg);
        width: 96%;
        margin: 24px auto;
        min-height: auto;
        max-height: none;
        border-radius: 24px;
    }

    .vc-hero-text {
        max-width: 100%;
    }

    .vc-hero-desc {
        margin-inline: auto;
    }

    .vc-hero-actions {
        justify-content: center;
    }

    .vc-hero-image img {
        max-width: 320px;
    }
}

@media (max-width: 768px) {
    :root {
        --spacing-4xl: 4rem;
        --spacing-3xl: 3rem;
    }

    .vc-hero-banner {
        flex-direction: column-reverse;
        text-align: center;
        padding: var(--spacing-lg) var(--spacing-md);
        width: 96%;
        margin: 20px auto;
        min-height: auto;
        max-height: none;
        border-radius: 20px;
        gap: var(--spacing-lg);
    }

    .vc-hero-text {
        max-width: 100%;
    }

    .vc-hero-desc {
        margin-inline: auto;
        max-width: 100%;
    }

    .vc-hero-actions {
        justify-content: center;
    }

    .vc-hero-image img {
        max-width: 260px;
    }

    .vc-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(300px, 82vw);
        background: var(--color-bg-white);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.08);
        padding: var(--spacing-3xl) var(--spacing-xl);
        transform: translateX(100%);
        transition: transform var(--transition-slow);
        z-index: var(--z-fixed);
        overflow-y: auto;
    }

    .vc-nav.active {
        transform: translateX(0);
    }

    .vc-nav-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
        width: 100%;
    }

    .vc-nav-menu a {
        font-size: 1.1rem;
        padding: var(--spacing-md) var(--spacing-sm);
        width: 100%;
    }

    .vc-mobile-toggle {
        display: flex;
    }

    .vc-mobile-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .vc-mobile-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .vc-mobile-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .vc-categories-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
    }

    .vc-category-card {
        padding: var(--spacing-lg) var(--spacing-sm);
    }

    .vc-category-icon {
        width: 54px;
        height: 54px;
    }

    .vc-category-name {
        font-size: 0.88rem;
    }

    .vc-posts-grid {
        grid-template-columns: 1fr;
    }

    .vc-footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }

    .vc-footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    /* ============================================
       MOBILE HORIZONTAL-OVERFLOW HARDENING
       ============================================ */

    /* Every section wrapper fits the viewport with 16px gutters. */
    .vc-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* --- Header: clean 2-row layout --- */
    .vc-header-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 16px !important;
        margin: 0 !important;
        min-height: 0;
        flex-wrap: wrap;
        gap: 10px 12px;
    }

    /* Row 1 (right): hamburger + brand logo */
    .vc-mobile-toggle {
        order: -1;
        margin-inline-start: 0;
    }

    .vc-header-right {
        order: 0;
        flex: 0 1 auto;
        min-width: 0;
    }

    /* Row 1 (left): user / wishlist / cart icons + compact auth button */
    .vc-header-left {
        order: 1;
        margin-inline-start: auto;
        gap: 4px;
    }

    .vc-header-cta {
        display: inline-flex !important;
        padding: 0.4rem 0.8rem;
        font-size: 0.75rem;
        margin-inline-start: 4px;
    }

    /* Keep row 1 on a single line on tablets/phones. */
    .vc-logo {
        font-size: 1.2rem;
    }

    .vc-icon-btn {
        width: 40px;
        height: 40px;
    }

    /* Row 2: full-width search bar that can never overflow */
    .vc-header-center {
        order: 5;
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .vc-search {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* --- Hero banner fits the viewport with 16px gutters --- */
    .vc-hero {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 16px !important;
        margin: 16px auto !important;
    }

    .vc-hero-banner {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* --- Section headings: centered, 22px so they fit on one line --- */
    .vc-section-title {
        text-align: center !important;
        width: 100% !important;
        font-size: 22px !important;
    }

    /* --- Category carousel: keep slides inside the viewport, smaller arrows --- */
    .vc-cat-swiper {
        overflow: hidden !important;
    }

    .vc-cat-swiper .swiper-button-next,
    .vc-cat-swiper .swiper-button-prev {
        width: 34px !important;
        height: 34px !important;
        margin-top: -17px !important;
    }

    .vc-cat-swiper .swiper-button-next::after,
    .vc-cat-swiper .swiper-button-prev::after {
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    .vc-container {
        padding: 0 var(--spacing-md);
    }

    /* Small phones: drop the brand wordmark (keep the logo mark) and tighten
       the icons/CTA so the whole row 1 fits on one line without overflowing. */
    .vc-logo-text {
        display: none;
    }

    .vc-icon-btn {
        width: 36px;
        height: 36px;
    }

    .vc-header-cta {
        padding: 0.35rem 0.65rem;
        font-size: 0.7rem;
    }

    .vc-hero-banner {
        border-radius: 20px;
        padding: var(--spacing-xl) var(--spacing-lg);
    }

    .vc-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .vc-hero-actions .vc-btn {
        width: 100%;
    }

    .vc-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vc-post-content {
        padding: var(--spacing-lg);
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes vcFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vc-animate {
    animation: vcFadeInUp 0.8s ease forwards;
}

/* ============================================
   PREMIUM AMBIENT GLOW & BLOBS
   ============================================ */
.vc-section-header::before,
.vc-section-header::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

.vc-section-header::before {
    background: radial-gradient(circle, rgba(255, 66, 112, 0.25), transparent 70%);
    top: -200px;
    right: -100px;
}

.vc-section-header::after {
    background: radial-gradient(circle, rgba(186, 84, 245, 0.2), transparent 70%);
    bottom: -150px;
    left: -100px;
}

/* Ambient floating blobs */
@keyframes vcFloatBlob1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.05); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

@keyframes vcFloatBlob2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-25px, 25px) scale(1.08); }
    66% { transform: translate(35px, -15px) scale(0.92); }
}

@keyframes vcShimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes vcIconBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

@keyframes vcPulseGlow {
    0%, 100% { box-shadow: 0 0 8px var(--color-glow-neon); }
    50% { box-shadow: 0 0 20px var(--color-glow-neon), 0 0 40px rgba(255, 66, 112, 0.3); }
}

/* Premium section wrapper */
.vc-premium-section {
    position: relative;
    overflow: hidden;
}

.vc-premium-section::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 66, 112, 0.08), transparent 70%);
    top: -250px;
    left: -150px;
    border-radius: 50%;
    filter: blur(100px);
    animation: vcFloatBlob1 15s ease-in-out infinite;
    pointer-events: none;
}

/* ============================================
   ABOUT US PAGE — Global Styles
   ============================================ */

.about-us-page {
    background-color: var(--color-bg-body, #f8f9fa);
}

.about-us-page .about-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg, 1.5rem);
}

/* ============================================
   ABOUT US PAGE — Hero Section
   ============================================ */

.about-us-page .about-hero {
    background: linear-gradient(135deg, var(--color-pink, #ff4d79) 0%, var(--color-pink-dark, #e0355f) 100%);
    padding: var(--spacing-2xl, 3rem) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.about-us-page .about-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.about-us-page .about-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.about-us-page .about-hero-content {
    position: relative;
    z-index: 1;
}

/* Constrain hero text wrapper */
.about-us-page .about-hero-text {
    max-width: 800px;
    margin: 0 auto;
}

/* Reduced from 3rem → 32px for better proportions */
.about-us-page .about-hero-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-text-inverse, #ffffff);
    margin-bottom: var(--spacing-md, 1rem);
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    line-height: 1.4;
}

.about-us-page .about-hero-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.95);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.8;
}

/* ============================================
   ABOUT US PAGE — Brands Section
   ============================================ */

.about-brands-wrapper {
    padding: 40px 20px;
    background: #fff;
    border-bottom: 1px solid #f5f5f7;
}

.brands-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 45px;
    max-width: 1200px;
    margin: 0 auto;
}

.brands-flex img {
    max-width: 110px !important;
    height: auto !important;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
}

.about-brand-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-heading, #2d2d2d);
    letter-spacing: -0.01em;
    white-space: nowrap;
    user-select: none;
}

/* ============================================
   ABOUT US PAGE — Mission / Story Section
   ============================================ */

.about-story-grid {
    display: grid !important;
    grid-template-columns: 1.2fr 0.8fr !important;
    gap: 48px !important;
    align-items: center !important;
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    direction: rtl;
}

.about-story-content {
    background: #fff;
    padding: 36px;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
    line-height: 2;
    text-align: justify;
}

.about-story-content .about-mission-label {
    display: inline-block;
    background: var(--color-pink-ultra, #fff0f5);
    color: var(--color-pink, #ff4d79);
    padding: var(--spacing-xs, 0.25rem) var(--spacing-md, 1rem);
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md, 1rem);
}

.about-story-content .about-mission-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-text-heading, #2d2d2d);
    margin-bottom: var(--spacing-md, 1rem);
    line-height: 1.4;
}

.about-story-content .about-mission-body {
    font-size: 1.05rem;
    color: var(--color-text-body, #555555);
    line-height: 2;
    margin-bottom: var(--spacing-md, 1rem);
}

.about-story-content .about-mission-body p {
    line-height: 2;
    margin-bottom: var(--spacing-md, 1rem);
}

.about-story-visual {
    width: 100%;
    height: 100%;
    min-height: 380px;
    border-radius: 20px;
    overflow: hidden;
}

.about-story-visual img,
.about-story-visual .mission-visual-placeholder {
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
}

.mission-visual-placeholder {
    background: linear-gradient(135deg, var(--color-pink-light, #ff8fa8) 0%, var(--color-pink, #ff4d79) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-inverse, #ffffff);
    font-size: 4rem;
}

/* ============================================
   ABOUT US PAGE — Values Section
   ============================================ */

.about-us-page .about-values {
    padding: var(--spacing-2xl, 3rem) 0;
    background: var(--color-bg-body, #f8f9fa);
}

.about-us-page .about-values-header {
    text-align: center;
    margin-bottom: var(--spacing-xl, 2rem);
}

.about-us-page .about-values-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-text-heading, #2d2d2d);
    margin-bottom: var(--spacing-sm, 0.5rem);
}

.about-us-page .about-values-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-muted, #888888);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.8;
}

.about-us-page .about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg, 1.5rem);
}

/* Premium value cards with hover effects */
.about-us-page .about-value-card {
    background: var(--color-bg-white, #ffffff);
    border-radius: var(--radius-md, 0.75rem);
    padding: var(--spacing-xl, 2rem);
    text-align: center;
    box-shadow: var(--shadow-soft, 0 4px 20px rgba(0, 0, 0, 0.05));
    transition: transform var(--transition-normal, 0.3s ease), box-shadow var(--transition-normal, 0.3s ease);
}

.about-us-page .about-value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(236, 64, 122, 0.08);
}

/* 64px soft pink icon circle */
.about-us-page .about-value-icon {
    width: 64px;
    height: 64px;
    background: #fff0f5;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 28px;
    color: var(--color-pink, #ff4d79);
    transition: background var(--transition-fast, 0.2s ease), color var(--transition-fast, 0.2s ease);
}

.about-us-page .about-value-card:hover .about-value-icon {
    background: var(--color-pink, #ff4d79);
    color: var(--color-text-inverse, #ffffff);
}

.about-us-page .about-value-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-heading, #2d2d2d);
    margin-bottom: var(--spacing-sm, 0.5rem);
}

.about-us-page .about-value-text {
    font-size: 1rem;
    color: var(--color-text-body, #555555);
    line-height: 1.8;
}

/* ============================================
   ABOUT US PAGE — CTA Section
   ============================================ */

.about-us-page .about-cta {
    padding: var(--spacing-2xl, 3rem) 0;
    background: var(--color-bg-white, #ffffff);
}

.about-us-page .about-cta-box {
    background: linear-gradient(135deg, var(--color-pink, #ff4d79) 0%, var(--color-pink-dark, #e0355f) 100%);
    border-radius: var(--radius-lg, 1rem);
    padding: var(--spacing-2xl, 3rem);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.about-us-page .about-cta-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.about-us-page .about-cta-content {
    position: relative;
    z-index: 1;
}

.about-us-page .about-cta-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-inverse, #ffffff);
    margin-bottom: var(--spacing-md, 1rem);
    line-height: 1.4;
}

.about-us-page .about-cta-text {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.95);
    max-width: 500px;
    margin: 0 auto var(--spacing-lg, 1.5rem);
    line-height: 1.8;
}

.about-us-page .about-cta-button {
    display: inline-block;
    background: var(--color-text-inverse, #ffffff);
    color: var(--color-pink, #ff4d79);
    padding: var(--spacing-md, 1rem) var(--spacing-xl, 2rem);
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--transition-fast, 0.2s ease), box-shadow var(--transition-fast, 0.2s ease);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.about-us-page .about-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* ============================================
   ABOUT US PAGE — Responsive
   ============================================ */

@media (max-width: 992px) {
    .about-story-grid {
        grid-template-columns: 1fr !important;
    }

    .brands-flex {
        gap: 25px;
    }

    .brands-flex img {
        max-width: 80px !important;
    }

    .about-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .about-hero-title {
        font-size: 24px;
    }

    .about-hero-subtitle {
        font-size: 1.1rem;
    }

    .about-mission-title {
        font-size: 1.75rem;
    }

    .about-values-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md, 1rem);
    }

    .about-cta-box {
        padding: var(--spacing-xl, 2rem);
    }

    .about-cta-title {
        font-size: 1.5rem;
    }

    .about-brand-logo {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .about-hero {
        padding: var(--spacing-xl, 2rem) 0;
    }

    .about-hero-title {
        font-size: 20px;
    }

    .about-hero-subtitle {
        font-size: 1rem;
        padding: 0 var(--spacing-md, 1rem);
    }

    .about-mission-title {
        font-size: 1.5rem;
    }

    .about-values-title {
        font-size: 1.75rem;
    }

    .about-brand-logo {
        font-size: 1.1rem;
    }
}

.vc-premium-section::after {
    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(186, 84, 245, 0.06), transparent 70%);
    bottom: -225px;
    right: -100px;
    border-radius: 50%;
    filter: blur(100px);
    animation: vcFloatBlob2 18s ease-in-out infinite;
    pointer-events: none;
}

/* ============================================
   CONTACT US PAGE
   ============================================ */

.erbil-contact-page {
    background-color: var(--color-bg-body, #f8f9fa);
}

/* Hero Banner */
.erbil-contact-page .contact-hero {
    background: linear-gradient(135deg, var(--color-pink, #ff4d79) 0%, var(--color-pink-dark, #e0355f) 100%);
    padding: var(--spacing-2xl, 3rem) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.erbil-contact-page .contact-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.erbil-contact-page .contact-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.erbil-contact-page .contact-hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.erbil-contact-page .contact-hero-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-text-inverse, #ffffff);
    margin-bottom: var(--spacing-md, 1rem);
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    line-height: 1.4;
}

.erbil-contact-page .contact-hero-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.95);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.8;
}

/* Main 2-Column Grid */
.erbil-contact-page .contact-grid-container {
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 36px;
    align-items: start;
}

/* Right Column — Info cards */
.erbil-contact-page .contact-info-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.erbil-contact-page .contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border: 1px solid #f0f0f4;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s;
}

.erbil-contact-page .contact-info-card:hover {
    transform: translateY(-4px);
}

.erbil-contact-page .contact-info-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff0f5;
    color: #ec407a;
    border-radius: 12px;
    font-size: 1.4rem;
}

.erbil-contact-page .contact-info-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-heading, #2d2d2d);
    margin-bottom: 6px;
}

.erbil-contact-page .contact-info-text {
    font-size: 0.98rem;
    color: var(--color-text-body, #555555);
    line-height: 1.9;
    margin: 0;
}

.erbil-contact-page .contact-info-text a {
    color: #ec407a;
    font-weight: 600;
}

.erbil-contact-page .contact-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.erbil-contact-page .contact-info-list li {
    font-size: 0.95rem;
    color: var(--color-text-body, #555555);
    line-height: 1.9;
    padding-right: 16px;
    position: relative;
}

.erbil-contact-page .contact-info-list li::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0.75em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ec407a;
}

/* Left Column — Form card */
.erbil-contact-page .contact-form-card {
    background: #fff;
    padding: 36px;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
    border: 1px solid #f0f0f4;
}

.erbil-contact-page .contact-form-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text-heading, #2d2d2d);
    margin-bottom: 24px;
}

.erbil-contact-page .contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.erbil-contact-page .contact-form-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.erbil-contact-page .contact-form-field label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-heading, #2d2d2d);
    margin-bottom: 8px;
}

.erbil-contact-page .contact-form-field input,
.erbil-contact-page .contact-form-field textarea {
    width: 100%;
    background: #fafafa;
    border: 1px solid #e4e4e9;
    border-radius: 12px;
    padding: 12px 16px;
    font-family: var(--font-primary);
    font-size: 0.95rem;
    color: var(--color-text, #2d2d2d);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.erbil-contact-page .contact-form-field input:focus,
.erbil-contact-page .contact-form-field textarea:focus {
    outline: none;
    border-color: #ec407a;
    box-shadow: 0 0 0 3px rgba(236, 64, 122, 0.15);
}

.erbil-contact-page .contact-form-field textarea {
    resize: vertical;
    min-height: 120px;
}

.erbil-contact-page .contact-submit {
    width: 100%;
    border: none;
    cursor: pointer;
    padding: 14px 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-pink, #ff4d79) 0%, var(--color-pink-dark, #e0355f) 100%);
    color: #fff;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 8px 22px rgba(255, 77, 121, 0.28);
}

.erbil-contact-page .contact-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 77, 121, 0.35);
}

/* Responsive */
@media (max-width: 992px) {
    .erbil-contact-page .contact-grid-container {
        grid-template-columns: 1fr;
    }

    .erbil-contact-page .contact-form-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   CATEGORIES MEGA MENU (Shopbbani-style)
   ============================================ */
.erbil-mega-wrapper {
    position: static !important;
    display: inline-flex;
    align-items: center;
}

.erbil-mega-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff0f5;
    color: #ec407a;
    border: 1px solid #f8dce7;
    border-radius: 12px;
    padding: 10px 18px;
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.erbil-mega-trigger:hover,
.erbil-mega-wrapper.is-open .erbil-mega-trigger {
    background: #ffe3ee;
    box-shadow: 0 8px 20px rgba(236, 64, 122, 0.15);
}

.erbil-mega-trigger-icon,
.erbil-mega-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.erbil-mega-chevron {
    transition: transform 0.25s ease;
}

.erbil-mega-trigger:hover .erbil-mega-chevron,
.erbil-mega-wrapper.is-open .erbil-mega-chevron {
    transform: rotate(180deg);
}

.erbil-mega-dropdown {
    position: fixed;
    top: 82px;
    left: 50% !important;
    right: auto !important;
    width: min(1240px, 94vw);
    background: #ffffff;
    border-radius: 22px;
    padding: 28px 32px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    border: 1px solid #f8dce7;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(10px);
    transition: opacity 0.28s ease, visibility 0.28s ease, transform 0.28s ease;
}

.erbil-mega-wrapper:hover .erbil-mega-dropdown,
.erbil-mega-wrapper.is-open .erbil-mega-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.erbil-mega-head {
    text-align: right;
    border-bottom: 1px solid #f6e4ec;
    padding-bottom: 16px;
}

.erbil-mega-title {
    margin: 0 0 4px;
    color: #ec407a;
    font-weight: 800;
    font-size: 1.15rem;
}

.erbil-mega-subtitle {
    margin: 0;
    color: #8a8a8a;
    font-size: 0.85rem;
}

.erbil-mega-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
    direction: rtl;
}

.erbil-mega-card {
    background: #fffafb;
    border: 1px solid #f9e2ec;
    border-radius: 16px;
    padding: 14px 16px;
    overflow: hidden !important;
    transition: all 0.25s ease;
}

.erbil-mega-card:hover {
    border-color: #f48fb1;
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(236, 64, 122, 0.1);
}

.mega-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #f6e4ec;
}

.mega-card-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #333;
    font-weight: 700;
    font-size: 0.95rem;
}

.mega-card-title:hover {
    color: #ec407a;
}

.mega-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #fff0f5;
    color: #ec407a;
    flex-shrink: 0;
}

.mega-card-all {
    color: #ec407a;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.mega-card-all:hover {
    text-decoration: underline;
}

.mega-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden !important;
}

.mega-card-list a {
    color: #555;
    font-size: 13.5px;
    padding: 4px 0;
    display: block;
    transition: color 0.2s, padding-right 0.2s;
}

.mega-card-list a:hover {
    color: #ec407a;
    padding-right: 6px;
}

.mega-more-link a {
    color: #ec407a;
    font-weight: 700;
}

.erbil-mega-empty {
    margin: 20px 0 0;
    color: #8a8a8a;
    text-align: right;
}

/* Mega menu responsive */
@media (max-width: 1024px) {
    .erbil-mega-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .erbil-mega-grid {
        grid-template-columns: 1fr;
    }

    .erbil-mega-dropdown {
        width: 94vw;
        padding: 20px 18px;
    }
}

/* ============================================
   MOBILE DRAWER — CATEGORY ACCORDION
   Hidden on desktop; only rendered inside the
   slide-out drawer at <= 992px.
   ============================================ */
.vc-mobile-cats {
    display: none;
}

/* ============================================
   MOBILE DRAWER — TOP BAR + BACKDROP OVERLAY
   ============================================ */
.mobile-menu-head {
    display: none;
}

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

body.menu-open .mobile-menu-overlay {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   MOBILE HEADER (<= 992px) — STRICT 2-ROW LAYOUT
   Row 1: hamburger + brand (right) | wishlist + cart + auth (left)
   Row 2: full-width search bar
   ============================================ */
@media (max-width: 992px) {
    /* 1) Hide the desktop mega menu — categories now live in the drawer. */
    .erbil-mega-wrapper {
        display: none !important;
    }

    /* Row 1 container: single flex row that never wraps its top-bar items. */
    .vc-header-inner {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        width: 100% !important;
        max-width: 100% !important;
        gap: 8px;
        padding: 12px 16px !important;
        margin: 0 !important;
        min-height: 52px;
    }

    /* Row 1 (right): hamburger anchored to the right edge. */
    .vc-mobile-toggle {
        display: flex;
        order: -1;
        margin-left: auto;
        flex-shrink: 0;
        z-index: 2;
    }

    .vc-header-right {
        order: 0;
        flex: 0 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        gap: 8px;
    }

    /* Row 2: balanced action bar (auth pill on one side, cart + wishlist grouped on the other). */
    .vc-header-left {
        order: 2;
        flex: 0 0 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 4px;
        flex-wrap: nowrap;
        padding: 6px 4px;
        margin-top: 8px;
        border-top: 1px solid #f9eef3;
    }

    /* Brand logo: dead-center of the top row, independent of the side items. */
    .vc-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 800;
        min-width: 0;
        max-width: 60%;
        white-space: nowrap;
        z-index: 1;
    }

    .vc-logo-mark {
        flex-shrink: 0;
    }

    .vc-logo-text {
        display: inline;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vc-icon-btn {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .vc-header-cta {
        display: inline-flex !important;
        padding: 6px 12px;
        font-size: 12px;
        margin-inline-start: auto;
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Row 2: full-width search bar. */
    .vc-header-center {
        order: 5;
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin-top: 10px;
    }

    .vc-search {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Slide-out drawer. */
    .vc-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(320px, 86vw);
        background: var(--color-bg-white);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.08);
        padding: var(--spacing-xl) var(--spacing-xl);
        transform: translateX(100%);
        transition: transform var(--transition-slow);
        z-index: 99999;
        overflow-y: auto;
    }

    .vc-nav.active {
        transform: translateX(0);
    }

    /* Drawer top bar: brand + close button. */
    .mobile-menu-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 16px;
        margin-bottom: 16px;
        border-bottom: 1px solid var(--color-border-soft);
    }

    .mobile-menu-brand {
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--color-text);
    }

    .mobile-menu-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        border: 1px solid #f8dce7;
        border-radius: 10px;
        background: #fff0f5;
        color: #ec407a;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        transition: background 0.25s ease, transform 0.25s ease;
    }

    .mobile-menu-close:hover {
        background: #ffe3ee;
        transform: rotate(90deg);
    }

    .vc-nav-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
        width: 100%;
    }

    .vc-nav-menu a {
        font-size: 1.05rem;
        padding: var(--spacing-md) var(--spacing-sm);
        width: 100%;
    }

    /* --- Category accordion inside the drawer --- */
    .vc-mobile-cats {
        display: block;
        width: 100%;
        margin-bottom: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
        border-bottom: 1px solid var(--color-border-soft);
    }

    .vc-mobile-cats-title {
        margin: 0 0 12px;
        font-size: 0.95rem;
        font-weight: 800;
        color: #ec407a;
        text-align: right;
    }

    .vc-mobile-cats-list {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .vc-mobile-cat-item {
        border-bottom: 1px solid #f6e4ec;
    }

    .vc-mobile-cat-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .vc-mobile-cat-link {
        flex: 1 1 auto;
        padding: 12px 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-text);
    }

    .vc-mobile-cat-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        border: 1px solid #f8dce7;
        border-radius: 8px;
        background: #fff0f5;
        color: #ec407a;
        cursor: pointer;
        transition: transform 0.25s ease, background 0.25s ease;
    }

    .vc-mobile-cat-item.is-open .vc-mobile-cat-toggle {
        transform: rotate(45deg);
        background: #ffe3ee;
    }

    .vc-mobile-cat-children {
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    /* Fallback if JS is unavailable; JS sets an exact inline max-height. */
    .vc-mobile-cat-item.is-open .vc-mobile-cat-children {
        max-height: 1000px;
    }

    .vc-mobile-cat-children a {
        display: block;
        padding: 8px 12px;
        font-size: 0.9rem;
        color: #555;
        transition: color 0.2s ease, padding-right 0.2s ease;
    }

    .vc-mobile-cat-children a:hover {
        color: #ec407a;
        padding-right: 18px;
    }

    .vc-mobile-cat-all a {
        color: #ec407a;
        font-weight: 700;
    }
}

/* ============================================================
   HOMEPAGE LUXURY SECTIONS
   (New Arrivals · Promo Banners · Best Sellers · Brands & Trust)
   ============================================================ */

.erbil-lux-section {
    padding: 50px 0;
    background: #ffffff;
    direction: rtl;
    overflow: hidden;
}

.erbil-lux-section.erbil-best-sellers {
    background: #fdf9fb;
}

.erbil-lux-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* --- Shared section header --- */
.erbil-lux-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

/* Right-side group: "view all" link + slider arrows in the header bar. */
.erbil-lux-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.erbil-lux-header-actions .erbil-lux-nav {
    margin-top: 0;
}

.erbil-lux-heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.erbil-lux-title {
    font-size: 1.7rem;
    font-weight: 800;
    color: #2c2c2c;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.4;
}

.erbil-lux-subtitle {
    font-size: 0.95rem;
    color: #8a8a9e;
    margin: 0;
}

.erbil-lux-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ec407a;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: gap 0.2s ease, color 0.2s ease;
}

.erbil-lux-link:hover {
    gap: 10px;
    color: #c2185b;
}

/* --- Slider wrapper + navigation --- */
.erbil-lux-slider-wrap {
    position: relative;
}

.erbil-lux-slider-wrap .swiper {
    padding: 6px 4px 12px;
    overflow: hidden;
}

.erbil-lux-nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.erbil-lux-nav button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #f4bfd4;
    background: #ffffff;
    color: #ec407a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(236, 64, 122, 0.12);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.erbil-lux-nav button:hover {
    background: #ec407a;
    color: #ffffff;
    transform: translateY(-2px);
}

.erbil-lux-nav button.swiper-button-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* --- Swiper product card (reuses theme card markup) --- */
.erbil-swiper-card {
    height: 100%;
    background: #ffffff;
    border: 1px solid #f0f0f4;
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.erbil-swiper-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(236, 64, 122, 0.12);
    border-color: #f8bbd0;
}

.erbil-swiper-card .erbil-pcard-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fdf9fb;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.erbil-swiper-card .erbil-pcard-thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Full-size rule scoped STRICTLY to the real product thumbnail — never
   img.emoji / wp-smiley / badge icons. */
.erbil-swiper-card .erbil-pcard-thumb > a > img:not(.emoji),
.erbil-swiper-card .erbil-main-product-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 10px;
    box-sizing: border-box;
    transition: transform 0.35s ease;
}

.erbil-swiper-card:hover .erbil-pcard-thumb > a > img:not(.emoji),
.erbil-swiper-card:hover .erbil-main-product-img {
    transform: scale(1.05);
}

.erbil-swiper-card .erbil-pcard-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.erbil-swiper-card .erbil-pcard-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.65 !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    min-height: 44px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.erbil-swiper-card .erbil-pcard-title a {
    color: #2c2c2c !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.erbil-swiper-card .erbil-pcard-title a:hover {
    color: #ec407a !important;
}

.erbil-swiper-card .erbil-pcard-footer {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #f5f5f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.erbil-swiper-card .erbil-pcard-price .price {
    color: #ec407a !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.erbil-swiper-card .erbil-pcard-price .price del {
    color: #999 !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

.erbil-swiper-card .erbil-pcard-price .price ins {
    text-decoration: none !important;
    color: #ec407a !important;
    font-weight: 800 !important;
}

.erbil-swiper-card .erbil-pcard-footer .button {
    margin: 0 !important;
    background: #fff0f5 !important;
    color: #ec407a !important;
    border: 1px solid #f8bbd0 !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap;
    transition: all 0.2s ease !important;
}

.erbil-swiper-card .erbil-pcard-footer .button:hover,
.erbil-swiper-card .erbil-pcard-footer .button.added {
    background: #ec407a !important;
    color: #ffffff !important;
    border-color: #ec407a !important;
    box-shadow: 0 4px 12px rgba(236, 64, 122, 0.28);
}

.erbil-swiper-card .erbil-pcard-footer a.added_to_cart.wc-forward {
    display: none !important;
}

/* --- Badges --- */
.erbil-pcard-badge.erbil-badge-new {
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    z-index: 14 !important;
    background: linear-gradient(135deg, #b39ddb 0%, #f48fb1 100%);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    box-shadow: 0 3px 10px rgba(179, 157, 219, 0.4);
}

.erbil-pcard-badge.erbil-badge-hot {
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    z-index: 14 !important;
    background: linear-gradient(135deg, #f6c453 0%, #ec407a 100%);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    box-shadow: 0 3px 10px rgba(236, 64, 122, 0.35);
}

/* ============================================================
   SPECIAL OFFERS — "VIEW ALL" PROMO CARD
   Always rendered as the final slide/card so the pink container
   is filled edge-to-edge with zero empty void.
   ============================================================ */

.offer-view-all-slide {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    min-height: 260px;
    padding: 30px 22px;
    background: #ffffff;
    border-radius: 20px;
    text-decoration: none;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.offer-view-all-slide:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 38px rgba(236, 64, 122, 0.22);
}

.offer-view-all-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff4d79 0%, #e0355f 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(236, 64, 122, 0.35);
}

.offer-view-all-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff0f5;
    color: #ec407a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.offer-view-all-slide:hover .offer-view-all-icon {
    background: #ec407a;
    color: #ffffff;
    transform: scale(1.08);
}

.offer-view-all-title {
    font-size: 1rem;
    font-weight: 800;
    color: #2c2c2c;
    line-height: 1.6;
}

.offer-view-all-subtitle {
    font-size: 0.8rem;
    color: #8a8a9e;
    line-height: 1.7;
}

/* The Swiper slide must stretch so the card fills the full track height. */
.vc-offers-swiper .swiper-slide {
    height: auto;
}

.vc-offers-swiper .offer-view-all-slide {
    height: 100%;
}

/* ============================================================
   SECTION 2 — DUAL PASTEL PROMO BANNERS
   ============================================================ */

.erbil-bento-section {
    background: #ffffff;
    padding: 0;
}

.erbil-bento-banners {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 50px auto;
    direction: rtl;
}

.erbil-bento-card {
    position: relative;
    border-radius: 24px;
    padding: 40px 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    min-height: 240px;
    box-sizing: border-box;
}

.erbil-bento-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    flex: 1 1 auto;
    position: relative;
    z-index: 2;
}

/* Product visual sits on the LEFT of the banner (order 2 in RTL). */
.erbil-bento-visual {
    position: relative;
    order: 2;
    width: 210px;
    height: 170px;
    flex-shrink: 0;
    z-index: 1;
}

.erbil-bento-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
    z-index: 0;
}

.erbil-bento-glow-1 {
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(236, 64, 122, 0.22) 0%, rgba(236, 64, 122, 0) 70%);
    top: -10px;
    right: -10px;
}

.erbil-bento-glow-2 {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(179, 157, 219, 0.28) 0%, rgba(179, 157, 219, 0) 70%);
    bottom: -6px;
    left: -6px;
}

.erbil-bento-frame {
    position: absolute;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.erbil-bento-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Front card — fanned to the right. */
.erbil-bento-frame:first-child {
    width: 125px;
    height: 125px;
    right: 0;
    top: 22px;
    transform: rotate(6deg);
    z-index: 2;
    box-shadow: 0 14px 30px rgba(236, 64, 122, 0.16);
    border: 3px solid #ffffff;
    border-radius: 20px;
    background: #ffffff;
}

/* Back card — fanned to the left, clearly visible behind the front card. */
.erbil-bento-frame:nth-child(2) {
    width: 115px;
    height: 115px;
    left: 5px;
    top: 6px;
    transform: rotate(-10deg);
    z-index: 1;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    border: 3px solid #ffffff;
    border-radius: 18px;
    background: #ffffff;
    opacity: 0.96;
}

.erbil-bento-frame.erbil-bento-frame-empty {
    color: #ec407a;
    background: linear-gradient(135deg, #fff0f5 0%, #ffe4ec 100%);
}

.erbil-bento-card:hover .erbil-bento-frame:first-child {
    transform: rotate(8deg) translateY(-4px);
}

.erbil-bento-card:hover .erbil-bento-frame:nth-child(2) {
    transform: rotate(-14deg) translate(-6px, -4px);
}

.erbil-bento-skincare {
    background: linear-gradient(135deg, #fff0f5 0%, #ffe4ec 100%);
}

.erbil-bento-makeup {
    background: linear-gradient(135deg, #f8f0fc 0%, #fce4ec 100%);
}

.erbil-bento-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    color: #c2185b;
    background: rgba(255, 255, 255, 0.85);
    padding: 7px 16px;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(194, 24, 91, 0.1);
}

.erbil-bento-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #2c2c2c;
    margin: 0;
    line-height: 1.5;
    letter-spacing: -0.02em;
}

.erbil-bento-subtitle {
    font-size: 0.95rem;
    color: #6b6f80;
    margin: 0;
    line-height: 1.9;
    max-width: 420px;
}

.erbil-bento-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 13px 28px;
    border-radius: 50px;
    background: #ec407a;
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(236, 64, 122, 0.3);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.erbil-bento-cta:hover {
    background: #e0356f;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(236, 64, 122, 0.4);
}

/* ============================================================
   SECTION 4 — BRANDS STRIP + TRUST BADGES
   ============================================================ */

.erbil-brands-trust {
    background: #ffffff;
}

.erbil-brands {
    margin-bottom: 0;
}

.erbil-brands-title,
.erbil-trust-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #2c2c2c;
    margin: 0 0 22px;
    text-align: center;
    letter-spacing: -0.02em;
}

.erbil-brands-subtitle {
    font-size: 0.92rem;
    color: #8a8a9e;
    text-align: center;
    margin: -12px 0 24px;
}

.erbil-brands-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 14px;
}

.erbil-brand-card {
    position: relative;
    height: 84px;
    background: #ffffff;
    border: 1.5px solid #f5e0ea;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.erbil-brand-card-name {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #2c2c2c;
    text-transform: uppercase;
    line-height: 1.2;
    transition: color 0.25s ease;
}

.erbil-brand-card-sub {
    font-size: 11px;
    color: #888;
    line-height: 1.4;
}

.erbil-brand-card-cta {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.96);
    color: #ec407a;
    font-size: 11.5px;
    font-weight: 800;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.erbil-brand-card:hover {
    transform: translateY(-4px);
    border-color: #ec407a;
    box-shadow: 0 12px 26px rgba(236, 64, 122, 0.14);
}

.erbil-brand-card:hover .erbil-brand-card-name {
    color: #ec407a;
}

.erbil-brand-card:hover .erbil-brand-card-cta {
    opacity: 1;
    transform: translateY(0);
}

.erbil-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.erbil-trust-card {
    background: #fdf9fb;
    border: 1px solid #f6e2eb;
    border-radius: 20px;
    padding: 28px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.erbil-trust-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(236, 64, 122, 0.1);
}

.erbil-trust-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff0f5;
    color: #ec407a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.erbil-trust-card-title {
    font-size: 1rem;
    font-weight: 800;
    color: #2c2c2c;
    margin: 0;
    line-height: 1.6;
}

.erbil-trust-card-desc {
    font-size: 0.85rem;
    color: #8a8a9e;
    margin: 0;
    line-height: 1.9;
}

/* ============================================================
   SECTION 4 — SHOP BY SKIN CONCERN
   ============================================================ */

.erbil-skin-concern {
    background: #fdf9fb;
}

.erbil-concern-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.erbil-concern-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 26px 16px 22px;
    background: #ffffff;
    border: 1px solid #f3e5ec;
    border-radius: 20px;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.erbil-concern-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--concern-accent, #ec407a);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.erbil-concern-card:hover {
    transform: translateY(-5px);
    border-color: var(--concern-accent, #ec407a);
    box-shadow: 0 14px 30px rgba(236, 64, 122, 0.12);
}

.erbil-concern-card:hover::before {
    opacity: 1;
}

.erbil-concern-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--concern-bg, #fff0f5);
    color: var(--concern-accent, #ec407a);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    transition: transform 0.25s ease;
}

.erbil-concern-card:hover .erbil-concern-icon {
    transform: scale(1.08);
}

.erbil-concern-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #2c2c2c;
    line-height: 1.5;
}

.erbil-concern-subtitle {
    font-size: 0.78rem;
    color: #8a8a9e;
    line-height: 1.7;
}

.erbil-concern-arrow {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f7f7fa;
    color: #b0b0bd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.erbil-concern-card:hover .erbil-concern-arrow {
    background: var(--concern-accent, #ec407a);
    color: #ffffff;
    transform: translateX(-3px);
}

/* ============================================================
   SECTION 6 — TRUST BADGES
   ============================================================ */

.erbil-trust-section {
    background: #ffffff;
}

/* ============================================================
   LUXURY SECTIONS — RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .erbil-trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .erbil-brands-strip {
        grid-template-columns: repeat(4, 1fr);
    }

    .erbil-concern-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .erbil-lux-section {
        padding: 36px 0;
    }

    .erbil-lux-container {
        padding: 0 16px;
    }

    .erbil-lux-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .erbil-lux-header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .erbil-lux-title {
        font-size: 1.35rem;
    }

    .erbil-lux-subtitle {
        font-size: 0.88rem;
    }

    /* Stack the two promo banners into a single column. */
    .erbil-bento-banners {
        grid-template-columns: 1fr;
        gap: 18px;
        margin: 36px auto;
    }

    .erbil-bento-card {
        padding: 30px 24px;
        min-height: 200px;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .erbil-bento-visual {
        order: 0;
        align-self: center;
        flex: 0 0 auto;
        width: 210px;
        height: 170px;
    }

    .erbil-bento-title {
        font-size: 1.3rem;
    }

    /* Skin concern: 2 per row on mobile. */
    .erbil-concern-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .erbil-concern-card {
        padding: 20px 12px 18px;
    }

    .erbil-concern-title {
        font-size: 0.88rem;
    }

    /* Trust cards: 2 per row on mobile. */
    .erbil-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .erbil-trust-card {
        padding: 22px 16px;
    }

    .erbil-trust-card-title {
        font-size: 0.9rem;
    }

    .erbil-trust-card-desc {
        font-size: 0.8rem;
    }

    /* Brand cards: horizontal scroll on mobile. */
    .erbil-brands-strip {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 12px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .erbil-brands-strip::-webkit-scrollbar {
        display: none;
    }

    .erbil-brand-card {
        flex: 0 0 130px;
        height: 78px;
    }
}

@media (max-width: 576px) {
    /* Scale the fanned product frames down so they never crowd the text. */
    .erbil-bento-visual {
        width: 170px;
        height: 140px;
    }

    .erbil-bento-frame:first-child {
        width: 95px;
        height: 95px;
        top: 18px;
    }

    .erbil-bento-frame:nth-child(2) {
        width: 85px;
        height: 85px;
        top: 4px;
    }
}

@media (max-width: 480px) {
    .erbil-lux-nav button {
        width: 38px;
        height: 38px;
    }

    .erbil-bento-cta {
        padding: 12px 22px;
        font-size: 0.85rem;
    }
}

/* =====================================================================
   LUXURY RTL FOOTER — ErbilOriginal
   ===================================================================== */

.erbil-site-footer {
    background: linear-gradient(180deg, #fff9fb 0%, #fff0f5 100%);
    border-top: 1px solid #f8dce7;
    padding: 60px 20px 25px;
    color: #333;
    direction: rtl;
    text-align: right;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
}

.erbil-footer-container {
    max-width: 1280px;
    margin: 0 auto;
}

.erbil-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr 1fr;
    gap: 30px;
    align-items: start;
}

/* --- Column headings --- */
.footer-col-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 18px;
    position: relative;
    padding-bottom: 10px;
}

.footer-col-title::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 34px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #ec407a, #f8bbd0);
}

/* --- Col 1: Brand --- */
.footer-brand-logo {
    display: inline-block;
    margin-bottom: 12px;
    text-decoration: none;
}

.footer-brand-logo img {
    max-height: 56px;
    width: auto;
}

.footer-brand-name {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ec407a;
}

.footer-brand-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 12px;
}

.footer-brand-bio {
    font-size: 0.88rem;
    line-height: 1.9;
    color: #666;
    margin: 0 0 20px;
}

.footer-socials {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.footer-social-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #ec407a;
    border: 1px solid #f8dce7;
    box-shadow: 0 4px 12px rgba(236, 64, 122, 0.08);
    transition: all 0.3s ease;
}

.footer-social-pill:hover {
    background: #ec407a;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(236, 64, 122, 0.25);
}

/* --- Link lists (Cols 2 & 3) --- */
.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links li {
    margin-bottom: 11px;
}

.footer-links a {
    color: #666;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.25s ease, padding 0.25s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: #ec407a;
    padding-right: 5px;
}

/* --- Col 4: Contact --- */
.footer-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 0.88rem;
    line-height: 1.8;
    color: #666;
}

.footer-contact-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #fff;
    color: #ec407a;
    border: 1px solid #f8dce7;
}

.footer-contact-list a {
    color: #666;
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer-contact-list a:hover {
    color: #ec407a;
}

/* --- Col 5: Trust badges --- */
.footer-col-trust {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.enamad-badge-box {
    width: 115px;
    height: 125px;
    background: #fff;
    border: 1px solid #f2d6e2;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-shadow: 0 6px 20px rgba(236, 64, 122, 0.06);
    overflow: hidden;
}

.enamad-badge-box--secondary {
    margin-top: 14px;
}

/* Official eNamad seal — always crisp, full colour, never lazy/greyed out. */
.enamad-badge-box img,
.enamad-box img,
.footer-enamad img,
.enamad-seal-img {
    max-width: 88px !important;
    max-height: 100px;
    width: auto;
    height: auto !important;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal;
}

.enamad-seal-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.enamad-seal-wrap a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.enamad-seal-img.enamad-seal-fallback {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
}

.enamad-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    color: #c98aa6;
}

.enamad-placeholder span {
    font-size: 0.68rem;
    line-height: 1.6;
    color: #a97a90;
}

/* --- Bottom copyright bar --- */
.erbil-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 45px;
    padding: 16px 0 8px;
    line-height: 1.5;
    border-top: 1px solid #f8dce7;
}

.footer-copyright {
    margin: 0;
    font-size: 0.82rem;
    color: #777;
}

/* --- Developer credit (tajweb.ir) — zero-footprint inline --- */
.erbil-dev-credit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #777;
}

.dev-sep {
    color: #e2b8c9;
    margin: 0 6px;
}

.tajweb-badge {
    color: #ec407a;
    font-weight: 700;
    text-decoration: none;
    background: #fff;
    border: 1px solid #f8dce7;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    transition: all 0.25s ease;
}

.tajweb-badge:hover {
    background: #ec407a;
    color: #fff;
    border-color: #ec407a;
    box-shadow: 0 4px 10px rgba(236, 64, 122, 0.2);
    transform: translateY(-1px);
}

.footer-bottom-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: #666;
}

.footer-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid #f2d6e2;
    color: #ec407a;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(236, 64, 122, 0.05);
}

.footer-badge-sep {
    color: #e3b7c9;
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .erbil-footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 576px) {
    .erbil-site-footer {
        padding: 45px 16px 20px;
    }

    .erbil-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .erbil-footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* ============================================
   FOOTER — COMPACT 2-COLUMN MOBILE LAYOUT (<= 768px)
   Desktop footer (>768px) is 100% untouched.
   ============================================ */
@media (max-width: 768px) {
    /* --- 2-column mobile grid --- */
    .erbil-footer-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px 16px !important;
    }

    /* --- Col 1: Brand & Socials — full-width card --- */
    .footer-col-brand {
        grid-column: 1 / -1 !important;
        text-align: center !important;
        background: #ffffff;
        padding: 20px 16px;
        border-radius: 18px;
        border: 1px solid #f8dce7;
    }

    /* Center the brand logo, title and bio text. */
    .footer-col-brand .footer-brand-logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-col-brand .footer-brand-title {
        text-align: center !important;
    }

    .footer-col-brand .footer-brand-title::after {
        right: 0;
        left: 0;
        margin: 0 auto;
    }

    .footer-col-brand .footer-brand-bio {
        text-align: center !important;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Social icons — centered, touch-friendly soft-pink row. */
    .footer-col-brand .footer-socials {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px dashed #f8dce7;
    }

    .footer-col-brand .footer-social-pill {
        width: 44px;
        height: 44px;
        background: #fff0f5;
        color: #ec407a;
        border-radius: 14px;
        border: none;
        box-shadow: 0 4px 12px rgba(236, 64, 122, 0.08);
    }

    /* --- Cols 2 & 3: side-by-side link cards --- */
    .footer-col-links,
    .footer-col-cats {
        grid-column: span 1 !important;
        background: #fff;
        padding: 16px 14px;
        border-radius: 16px;
        border: 1px solid #f9e6ee;
    }

    .footer-col-links .footer-links li,
    .footer-col-cats .footer-links li {
        margin-bottom: 8px;
    }

    .footer-col-links .footer-links a,
    .footer-col-cats .footer-links a {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: #444;
        padding: 4px 0;
    }

    .footer-col-links .footer-links a::before,
    .footer-col-cats .footer-links a::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #f48fb1;
        display: inline-block;
        flex: 0 0 auto;
    }

    /* --- Cols 4 & 5: full-width bottom cards --- */
    .footer-col-contact,
    .footer-col-trust {
        grid-column: 1 / -1 !important;
        background: #fff;
        padding: 18px;
        border-radius: 16px;
        border: 1px solid #f9e6ee;
        text-align: center;
    }

    .footer-col-trust {
        align-items: center;
    }

    .footer-col-contact .footer-contact-list li {
        justify-content: center;
    }

    .enamad-badge-box {
        margin: 10px auto 0 !important;
    }

    /* --- Developer credit: keep compact & inline (zero extra height) --- */
    .erbil-dev-credit {
        font-size: 11.5px;
    }
}

/* ============================================
   EQUAL-HEIGHT PRODUCT CARDS & SLIDERS
   Enforces strictly equal card heights across all
   product sliders and grids. Cards with sale prices
   (2-line <del> + <ins>) no longer grow taller than
   regular-priced cards, and <ins> loses its default
   underline.
   ============================================ */

/* --- 1. Equal-Height Swiper Slides & Cards --- */
.swiper-wrapper {
    align-items: stretch !important;
}

.swiper-slide {
    height: auto !important;
    display: flex !important;
}

/* All product card containers stretch to fill their slide/grid cell. */
.erbil-product-card,
.product-card,
li.product,
.vc-offer-card,
.offer-product-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between;
    width: 100%;
    height: 100% !important;
    box-sizing: border-box;
}

/* --- 2. Strict 2-Line Title Lock ---
   1-line and 2-line titles occupy the exact same vertical space. */
.erbil-product-card h3,
.erbil-product-card .product-title,
.erbil-product-card .woocommerce-loop-product__title,
.product-card h3,
.product-card .product-title,
.product-card .woocommerce-loop-product__title,
li.product h3,
li.product .product-title,
li.product .woocommerce-loop-product__title,
.vc-offer-card .vc-offer-name,
.offer-product-card .offer-product-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    line-height: 1.6 !important;
    height: 3.2em !important;
    min-height: 3.2em !important;
    margin-bottom: 12px;
}

/* --- 3. Pin Card Footer & Normalize Price Box Height ---
   Bottom row (add-to-cart button + price) is pinned to the card base. */
.erbil-product-card .erbil-pcard-footer,
.erbil-product-card .product-footer,
.product-card .product-card-footer,
.product-card .product-footer,
li.product .product-footer,
li.product .erbil-pcard-footer,
.vc-offer-footer {
    margin-top: auto !important;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #f7eff3;
}

/* Price wrapper: fixed vertical rhythm so 1-line and 2-line prices match. */
.erbil-product-card .price,
.erbil-product-card .erbil-pcard-price,
.product-card .price,
li.product .price,
.vc-offer-prices {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 44px;
    line-height: 1.3;
}

/* Cosmetics template keeps its horizontal price row but locks the height. */
.offer-product-card .offer-product-price {
    min-height: 44px;
    line-height: 1.3;
    margin-top: auto !important;
}

/* --- 4. Clean Price Styling --- */
/* Remove the ugly default underline from <ins> (sale price). */
.erbil-product-card ins,
.product-card ins,
li.product ins,
.vc-offer-card ins,
.offer-product-card ins,
ins {
    text-decoration: none !important;
    font-weight: 800;
    color: #111;
    font-size: 15px;
}

/* Style <del> (original price) cleanly. */
.erbil-product-card del,
.product-card del,
li.product del,
.vc-offer-card del,
.offer-product-card del,
del {
    color: #9ca3af;
    font-size: 12px;
    text-decoration: line-through;
}

/* ============================================================
   MOBILE UI/UX FIXES — ErbilOriginal
   (Hero slider overlay, product-card footer overflow,
    best-seller badge clipping, placeholder image, and
    clipped section headers)
   ============================================================ */

/* --- 1. Product cards clip their own content so the footer can never
       protrude past the card border. --- */
.erbil-product-card,
.erbil-swiper-card,
.offer-product-card,
.vc-offer-card,
li.product.erbil-product-card {
    overflow: hidden;
}

/* --- 2. Best-seller badge: styled identically to the «جدید» badge and
       pinned to the top-left corner so it is never clipped. --- */
.erbil-pcard-badge.badge-bestseller,
.erbil-pcard-badge.erbil-badge-bestseller,
.erbil-pcard-badge.erbil-badge-hot {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    padding: 4px 12px !important;
    border-radius: 20px;
    background: linear-gradient(135deg, #ff6b6b, #ec407a);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    z-index: 14 !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* --- 2b. Hard protection: emoji / smiley / badge icons must NEVER be
       stretched by the product-image rules. --- */
img.emoji,
img.wp-smiley,
.badge-bestseller img,
.erbil-badge-hot img {
    width: 14px !important;
    height: 14px !important;
    position: static !important;
    display: inline-block !important;
    object-fit: contain !important;
}

/* --- 3. Clean, subtle placeholder for products without a thumbnail.
       Never a giant emoji/SVG that clips the badge. --- */
.erbil-pcard-thumb img.erbil-pcard-placeholder,
.erbil-swiper-card .erbil-pcard-thumb img.erbil-pcard-placeholder {
    width: auto !important;
    height: auto !important;
    max-width: 80px !important;
    max-height: 80px !important;
    object-fit: contain !important;
    padding: 0 !important;
    opacity: 0.55;
}

/* --- 4. Section wrappers: allow the header to breathe so it is never
       vertically clipped. --- */
.erbil-new-arrivals,
.erbil-bestsellers,
.erbil-best-sellers,
.erbil-brands-trust,
.erbil-bento-section {
    overflow: visible;
}

/* --- 5. Mobile: stack the card footer so the add-to-cart button spans the
       full card width and never overflows the left border. --- */
@media (max-width: 768px) {
    .erbil-new-arrivals,
    .erbil-bestsellers,
    .erbil-best-sellers,
    .erbil-brands-trust,
    .erbil-bento-section {
        padding-top: 24px;
        margin-top: 16px;
        overflow: visible;
    }

    .erbil-pcard-footer,
    .erbil-swiper-card .erbil-pcard-footer,
    .vc-offer-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    /* The add-to-cart button spans the full card width and is centered, so it
       can never protrude past the card border. */
    .erbil-pcard-footer .button,
    .erbil-swiper-card .erbil-pcard-footer .button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center;
        box-sizing: border-box;
        white-space: normal;
    }

    /* The offers slider uses a compact icon-only button — keep it small but
       prevent it from overflowing the card. */
    .vc-offer-cart {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .erbil-pcard-price,
    .erbil-swiper-card .erbil-pcard-price {
        align-items: flex-start;
        width: 100%;
    }

    /* Cosmetics offer cards: let the price row wrap instead of overflowing. */
    .offer-product-price {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Section header wraps cleanly instead of clipping. */
    .erbil-lux-header {
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
}

/* ============================================
   CUSTOM BRAND LOGO — STRICT AUTO-SIZING
   Guarantees ANY uploaded image size (square, wide, tall or huge)
   fits cleanly without stretching or breaking the header layout.
   ============================================ */

/* Logo link containers: consistent inline-flex alignment. */
.vc-logo,
.footer-brand-logo,
.mobile-menu-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    text-decoration: none;
}

.erbil-logo-img-wrap {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    /* Clean breathing room so the logo never feels cramped next to the
       دسته‌بندی‌ها button. */
    margin-left: 14px;
    padding: 4px 0;
}

/* Desktop: proportional scaling, never stretched. */
.erbil-custom-logo {
    height: auto !important;
    max-height: 58px !important;
    width: auto !important;
    max-width: 210px !important;
    object-fit: contain !important;
    display: block;
    transition: transform 0.25s ease;
}

.erbil-custom-logo:hover {
    transform: scale(1.02);
}

.erbil-brand-title {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--color-pink) 0%, var(--color-pink-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Tablet */
@media (max-width: 992px) {
    .erbil-custom-logo {
        max-height: 46px !important;
        max-width: 165px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .erbil-custom-logo {
        max-height: 40px !important;
        max-width: 145px !important;
    }
}

/* Footer: slightly larger allowance. */
.erbil-site-footer .erbil-custom-logo {
    max-height: 52px !important;
    max-width: 180px !important;
}

/* Footer brand text: solid pink to match the existing footer wordmark. */
.erbil-site-footer .erbil-brand-title {
    background: none;
    -webkit-text-fill-color: #ec407a;
    color: #ec407a;
}

/* ============================================
   USER ACCOUNT DROPDOWN MENU
   ============================================ */

.erbil-user-menu-wrap {
    position: relative;
}

/* Trigger button: pink pill + user icon + chevron. */
.erbil-user-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.erbil-user-trigger-icon {
    flex-shrink: 0;
}

.erbil-user-trigger-text {
    white-space: nowrap;
}

.erbil-user-chevron {
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.erbil-user-menu-wrap:hover .erbil-user-chevron,
.erbil-user-menu-wrap.is-open .erbil-user-chevron {
    transform: rotate(180deg);
}

/* Dropdown panel. */
.erbil-user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 250px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid #f8dce7;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
    padding: 10px;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.22s ease;
    direction: rtl;
    text-align: right;
}

.erbil-user-menu-wrap:hover .erbil-user-dropdown,
.erbil-user-menu-wrap.is-open .erbil-user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Top user info header. */
.user-dropdown-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    background: #fff5f8;
    margin-bottom: 8px;
}

.user-dropdown-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-pink) 0%, var(--color-pink-dark) 100%);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
}

.user-dropdown-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-dropdown-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-dropdown-email {
    font-size: 0.76rem;
    color: var(--color-text-muted, #8a8a8a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Menu links list. */
.user-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.user-dropdown-list li {
    margin: 0;
}

.user-dropdown-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    color: var(--color-text-body);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
}

.user-dropdown-list a svg {
    flex-shrink: 0;
    color: var(--color-pink);
}

.user-dropdown-list a:hover {
    background: #fff5f8;
    color: var(--color-pink);
}

/* Divider + logout. */
.user-dropdown-divider {
    height: 1px;
    margin: 8px 4px;
    background: #f8dce7;
}

.user-dropdown-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    color: #e11d48;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.18s ease;
}

.user-dropdown-logout svg {
    flex-shrink: 0;
}

.user-dropdown-logout:hover {
    background: #fff1f3;
    color: #e11d48;
}

/* ============================================================
   WOOCOMMERCE CHECKOUT — LUXURY IRANIAN UX OVERHAUL
   ============================================================ */

/* --- 0. Hide the locked country field. The field is intentionally
       kept in the DOM (never unset) because the Persian WooCommerce
       state/city AJAX scripts depend on it. --- */
.erbil-hidden-country,
#billing_country_field,
#shipping_country_field {
    display: none !important;
}

/* --- 1. Fix the clipped top headings ("سفارش شما" / "جزئیات صورتحساب").
       Give the checkout container enough top breathing room so the
       headings never slide under the sticky header. --- */
body.woocommerce-checkout form.checkout.woocommerce-checkout {
    padding-top: 36px;
    margin-top: 20px;
}

/* --- 1b. Luxury coupon notice bar (replaces the default blue border) --- */
.woocommerce-form-coupon-toggle .woocommerce-info {
    background: #fff8fb !important;
    border: 1px dashed #ec407a !important;
    border-radius: 16px !important;
    padding: 18px 24px !important;
    color: #555 !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 15px rgba(236, 64, 122, 0.04) !important;
    margin-bottom: 30px !important;
}

/* The "click here to enter your code" link inside the coupon banner. */
.woocommerce-form-coupon-toggle .woocommerce-info a,
.woocommerce-form-coupon-toggle .woocommerce-info .showcoupon {
    color: #ec407a !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

.woocommerce-form-coupon-toggle .woocommerce-info a:hover,
.woocommerce-form-coupon-toggle .woocommerce-info .showcoupon:hover {
    color: #d81b60 !important;
    text-decoration: underline !important;
}

/* --- 2. Checkout progress stepper --- */
.erbil-checkout-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 1280px;
    margin: 0 auto 28px;
    padding: 18px 22px;
    background: #ffffff;
    border: 1px solid #f8dce7;
    border-radius: 18px;
    box-shadow: 0 8px 26px rgba(236, 64, 122, 0.05);
    direction: rtl;
}

.erbil-step {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #8a8a9e;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.erbil-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #f1f1f5;
    color: #8a8a9e;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1;
}

.erbil-step-done {
    color: #1d9e58;
}

.erbil-step-done .erbil-step-dot {
    background: #e6f6ee;
    color: #1d9e58;
}

.erbil-step-active {
    color: #ec407a;
}

.erbil-step-active .erbil-step-dot {
    background: #ec407a;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(236, 64, 122, 0.35);
}

.erbil-step-line {
    flex: 1 1 auto;
    height: 2px;
    min-width: 24px;
    border-radius: 2px;
    background: linear-gradient(90deg, #f8dce7, #fce4ec);
}

/* --- 3. Luxury order-summary card (left column) --- */
body.woocommerce-checkout form.checkout #order_review {
    background: #ffffff;
    border: 1px solid #f8dce7;
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(236, 64, 122, 0.06);
    padding: 28px;
}

/* --- 3b. Desktop only: align the "سفارش شما" heading with the top of the
       left card. The card spans both grid rows and reserves top padding for
       the heading, which sits inside the card's top area so the left and
       right columns start at the exact same vertical level. --- */
@media (min-width: 993px) {
    body.woocommerce-checkout form.checkout #order_review {
        grid-row: 1 / span 2;
        padding-top: 70px;
        position: sticky;
        top: 100px;
    }

    body.woocommerce-checkout form.checkout #order_review_heading {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        z-index: auto;
        margin: 0;
        padding: 24px 28px 0;
        background: transparent;
        border: none;
        font-size: 18px;
        font-weight: 800;
        color: #1f2233;
        position: static;
        top: auto;
    }
}

/* --- 3c. The "سفارش شما" heading must never float over the order box.
       It is a separate grid cell from #order_review, so it cannot share
       the card's sticky behaviour. Keep it in normal flow and let only
       the #order_review card stick. --- */
body.woocommerce-checkout form.checkout #order_review_heading {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
}

/* --- 4. Clean 2-column RTL form grid --- */
body.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout form.checkout .woocommerce-shipping-fields__field-wrapper,
body.woocommerce-checkout form.checkout .woocommerce-additional-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

body.woocommerce-checkout form.checkout .form-row {
    box-sizing: border-box;
}

body.woocommerce-checkout form.checkout .form-row-first,
body.woocommerce-checkout form.checkout .form-row-last {
    flex: 0 0 48.5% !important;
    width: 48.5% !important;
    max-width: 48.5% !important;
    float: none !important;
    clear: none !important;
}

body.woocommerce-checkout form.checkout .form-row-wide {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
}

/* --- 5. Consistent inputs, selects & Select2 dropdowns --- */
body.woocommerce-checkout form.checkout .form-row input.input-text,
body.woocommerce-checkout form.checkout .form-row select,
body.woocommerce-checkout form.checkout .select2-container .select2-selection--single {
    height: 48px !important;
    border-radius: 12px !important;
    border: 1.5px solid #eaeaea !important;
    background: #fcfcfd !important;
    padding: 0 14px !important;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
    box-shadow: none !important;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

body.woocommerce-checkout form.checkout .form-row input.input-text:focus,
body.woocommerce-checkout form.checkout .form-row select:focus,
body.woocommerce-checkout form.checkout .select2-container--focus .select2-selection--single,
body.woocommerce-checkout form.checkout .select2-container--open .select2-selection--single {
    border-color: #ec407a !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(236, 64, 122, 0.1) !important;
    outline: none;
}

/* Select2 inner text + arrow alignment inside the 48px control. */
body.woocommerce-checkout form.checkout .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 46px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    color: #333;
}

body.woocommerce-checkout form.checkout .select2-container .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
    top: 0 !important;
    margin-top: 0 !important;
}

/* --- 5b. Order notes textarea (excluded from the 48px input rule) --- */
#order_comments_field,
.woocommerce-additional-fields,
.woocommerce-additional-fields__field-wrapper {
    width: 100% !important;
    float: none !important;
    clear: both !important;
}

#order_comments_field {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

textarea#order_comments {
    width: 100% !important;
    min-height: 115px !important;
    height: auto !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    border: 1.5px solid #eaeaea !important;
    background: #fcfcfd !important;
    resize: vertical;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.7;
    box-sizing: border-box !important;
}

textarea#order_comments:focus {
    border-color: #ec407a !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(236, 64, 122, 0.1) !important;
    outline: none;
}

/* --- 6. Order-review table polish + product thumbnails --- */
body.woocommerce-checkout form.checkout #order_review table.shop_table {
    border: none;
    margin: 0 0 18px;
}

body.woocommerce-checkout form.checkout #order_review table.shop_table th,
body.woocommerce-checkout form.checkout #order_review table.shop_table td {
    padding: 12px 0;
    border-bottom: 1px dashed #f3e2ea;
    background: transparent;
    text-align: right;
    vertical-align: middle;
}

body.woocommerce-checkout form.checkout #order_review table.shop_table td {
    text-align: left;
}

body.woocommerce-checkout form.checkout #order_review table.shop_table tr:last-child th,
body.woocommerce-checkout form.checkout #order_review table.shop_table tr:last-child td {
    border-bottom: none;
}

.erbil-checkout-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.erbil-checkout-thumb {
    width: 44px !important;
    height: 44px !important;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #f0f0f3;
    flex-shrink: 0;
    display: block;
}

.erbil-checkout-item-name {
    font-weight: 600;
    color: #1f2233;
    line-height: 1.6;
}

/* --- 6b. Bulletproof flex-block order-review table.
       The table hierarchy is forced to full-width blocks so the flex
       rows never collapse, and flex children are prevented from
       shrinking (images / prices). --- */

/* 1. Force the table hierarchy to behave as full-width blocks */
.woocommerce-checkout-review-order-table,
.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout-review-order-table tfoot,
.woocommerce-checkout-review-order-table thead {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. Fix the Body Rows (Products) */
.woocommerce-checkout-review-order-table tbody tr {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 16px 0 !important;
    border-bottom: 1px dashed #f0e4ea !important;
    box-sizing: border-box !important;
}

/* 3. Fix the Product Name Cell (Image + Title) */
.woocommerce-checkout-review-order-table tbody td.product-name {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    flex: 1 1 auto !important; /* Grow to take available space */
    min-width: 0 !important; /* Prevent text overflow breaking flex */
    padding: 0 !important;
    border: none !important;
    text-align: right !important;
}

/* 4. Prevent Image and Price from shrinking */
.woocommerce-checkout-review-order-table tbody td.product-name img {
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important; /* STRICTLY prevent shrinking */
    border-radius: 10px !important;
    object-fit: cover !important;
    border: 1px solid #f5dce7 !important;
}

.woocommerce-checkout-review-order-table tbody td.product-total {
    flex: 0 0 auto !important; /* STRICTLY prevent shrinking */
    padding: 0 !important;
    border: none !important;
    font-weight: 800 !important;
    font-size: 14.5px !important;
    color: #222 !important;
    white-space: nowrap !important;
    text-align: left !important;
}

/* 5. Fix TFOOT Rows (Subtotal, Shipping, Total) */
.woocommerce-checkout-review-order-table tfoot tr {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    border-bottom: 1px solid #f5e4ec !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
    display: block !important;
    padding: 16px 0 !important;
    border: none !important;
    font-size: 14px !important;
    background: transparent !important;
}

.woocommerce-checkout-review-order-table tfoot th {
    text-align: right !important;
    color: #555 !important;
}

.woocommerce-checkout-review-order-table tfoot td {
    text-align: left !important;
    font-weight: 700 !important;
    color: #222 !important;
}

.woocommerce-checkout-review-order-table tfoot tr.order-total {
    border-bottom: none !important;
}

.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout-review-order-table tfoot tr.order-total td {
    font-size: 17px !important;
    font-weight: 900 !important;
    color: #ec407a !important;
}

/* --- 7. "Free shipping" Persian badge --- */
.erbil-free-ship-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 50px;
    background: #e6f6ee;
    color: #1d9e58;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.6;
}

/* --- 8. Trust micro-copy below the Place Order button --- */
.erbil-checkout-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 14px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #f8dce7;
}

.erbil-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: #6b6f80;
    white-space: nowrap;
}

/* --- 9. Responsive: stack the 2-column grid on mobile --- */
@media (max-width: 768px) {
    body.woocommerce-checkout form.checkout .form-row-first,
    body.woocommerce-checkout form.checkout .form-row-last {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .erbil-checkout-steps {
        flex-wrap: wrap;
        gap: 8px;
        padding: 14px 16px;
    }

    .erbil-step {
        font-size: 0.8rem;
    }

    .erbil-step-line {
        min-width: 12px;
    }
}

/* ============================================================
   WOOCOMMERCE CHECKOUT — LAYOUT & RTL ALIGNMENT FIXES
   ============================================================ */

/* --- A. Place Order button + trust badges: force a vertical stack so
       the injected trust row never squeezes beside the button or
       overflows outside the gray #payment box. --- */
.woocommerce-checkout #payment .form-row.place-order {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout #payment #place_order {
    width: 100% !important;
    float: none !important;
    margin: 12px 0 0 0 !important;
    height: 52px;
    font-size: 16px;
    font-weight: 800;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.woocommerce-checkout #payment .erbil-checkout-trust {
    width: 100% !important;
    clear: both !important;
    margin-top: 16px !important;
    padding-top: 14px;
    border-top: 1px dashed #e5d5dc;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #555;
    text-align: center;
    box-sizing: border-box;
}

/* --- B. Order-review product name: strict RTL alignment for mixed
       Persian/English titles. --- */
.woocommerce-checkout-review-order-table th.product-name,
.woocommerce-checkout-review-order-table td.product-name {
    text-align: right !important;
    direction: rtl !important;
    vertical-align: middle;
}

.woocommerce-checkout-review-order-table td.product-name .erbil-checkout-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    text-align: right !important;
    direction: rtl !important;
}

.woocommerce-checkout-review-order-table td.product-name .erbil-checkout-item img,
.woocommerce-checkout-review-order-table td.product-name .erbil-checkout-thumb {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border-radius: 10px;
    object-fit: cover;
}

.woocommerce-checkout-review-order-table td.product-name .erbil-checkout-prod-title {
    text-align: right !important;
    direction: rtl !important;
    unicode-bidi: isolate;
    flex: 1;
    line-height: 1.6;
}

.woocommerce-checkout-review-order-table th.product-total,
.woocommerce-checkout-review-order-table td.product-total {
    text-align: left !important;
    white-space: nowrap;
    vertical-align: middle;
}

/* --- C. Coupon bar: remove the overlapping default info icon. --- */
.woocommerce-form-coupon-toggle .woocommerce-info::before {
    display: none !important;
}

.woocommerce-form-coupon-toggle .woocommerce-info {
    padding-right: 24px !important;
}

/* --- D. Lock the billing 2-column grid order regardless of the
       address-i18n.js DOM re-sorting. --- */
.woocommerce-billing-fields__field-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 0 3%;
}

#billing_first_name_field {
    order: 1;
    flex: 0 0 48.5% !important;
    width: 48.5% !important;
}

#billing_last_name_field {
    order: 2;
    flex: 0 0 48.5% !important;
    width: 48.5% !important;
}

#billing_phone_field {
    order: 3;
    flex: 0 0 48.5% !important;
    width: 48.5% !important;
}

#billing_email_field {
    order: 4;
    flex: 0 0 48.5% !important;
    width: 48.5% !important;
}

#billing_state_field {
    order: 5;
    flex: 0 0 48.5% !important;
    width: 48.5% !important;
}

#billing_city_field {
    order: 6;
    flex: 0 0 48.5% !important;
    width: 48.5% !important;
}

#billing_address_1_field {
    order: 7;
    flex: 0 0 100% !important;
    width: 100% !important;
}

#billing_postcode_field {
    order: 8;
    flex: 0 0 100% !important;
    width: 100% !important;
}

@media (max-width: 768px) {
    #billing_first_name_field,
    #billing_last_name_field,
    #billing_phone_field,
    #billing_email_field,
    #billing_state_field,
    #billing_city_field,
    #billing_address_1_field,
    #billing_postcode_field {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
}

/* ============================================================
   MOBILE SHOP / ARCHIVE — SURGICAL FIX  (@media max-width: 768px)
   ------------------------------------------------------------
   Scoped to mobile ONLY; desktop (>768px) is untouched.
   `body` prefixes raise specificity so these rules win over the
   later-loaded css/woocommerce.css declarations.
   ============================================================ */
@media (max-width: 768px) {

    /* --- Kill WooCommerce clearfix pseudo-elements that break CSS Grid --- */
    ul.products::before,
    ul.products::after,
    .products::before,
    .products::after {
        display: none !important;
        content: none !important;
    }

    /* --- Constrain every parent wrapper so cards never overflow the viewport --- */
    body.archive,
    body.post-type-archive-product,
    body.tax-product_cat,
    body.woocommerce-page {
        overflow-x: hidden !important;
    }

    /* Outer archive chain: symmetric 12px gutters. NEVER use 100vw here —
       in RTL a 100vw child inside a padded parent overflows off the LEFT edge. */
    body.archive .site-main,
    body.archive .container,
    body.archive .erbil-container,
    .erbil-shop-wrap,
    .erbil-shop-wrapper,
    .erbil-shop-container,
    .erbil-archive-wrap,
    .shop-layout,
    .erbil-shop-content,
    .woocommerce-products-header,
    .content-area,
    main#main,
    main#primary,
    .site-main {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Nested wrappers inside the padded container: ZERO extra horizontal
       padding/margin so the grid is perfectly centered (12px left = 12px right). */
    .erbil-shop-layout,
    .erbil-shop-main,
    .erbil-shop-layout > *,
    ul.products,
    .woocommerce ul.products,
    .erbil-shop-grid,
    .erbil-products-grid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* --- Strict 2-column product grid --- */
    body.woocommerce ul.products,
    body.archive ul.products,
    body.tax-product_cat ul.products,
    body.post-type-archive-product ul.products,
    body .woocommerce ul.products,
    body ul.products,
    body .erbil-shop-main ul.products,
    body .erbil-shop-grid,
    body .erbil-products-grid,
    body .archive .products {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* --- Product card shell --- */
    body.woocommerce ul.products li.product,
    body.archive ul.products > li.product,
    body.tax-product_cat ul.products > li.product,
    body.post-type-archive-product ul.products > li.product,
    body .woocommerce ul.products li.product,
    body ul.products li.product,
    body .erbil-shop-grid > *,
    body .erbil-products-grid > *,
    body .erbil-product-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        background: #fff !important;
        border-radius: 14px !important;
        padding: 10px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
        border: 1px solid #f8e1ec;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* --- Image wrapper / thumbnail --- */
    body .erbil-pcard-thumb,
    body .woocommerce ul.products li.product .woocommerce-loop-product__link {
        width: 100% !important;
        height: 145px !important;
        aspect-ratio: 1 / 1 !important;
        margin-bottom: 8px !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    body .erbil-pcard-thumb img,
    body .erbil-pcard-thumb > a > img:not(.emoji),
    body .woocommerce ul.products li.product a img {
        max-height: 135px !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border-radius: 10px !important;
    }

    /* --- Product title --- */
    body .woocommerce ul.products li.product h2.woocommerce-loop-product__title,
    body .woocommerce ul.products li.product .product-title,
    body .erbil-product-card h2.woocommerce-loop-product__title,
    body .erbil-product-card .product-title,
    body .erbil-pcard-title {
        font-size: 12px !important;
        line-height: 1.5 !important;
        height: 2.9em !important;
        min-height: 2.9em !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        text-align: right !important;
        padding: 0 2px !important;
        margin-bottom: 6px !important;
        color: #222 !important;
        word-break: break-word !important;
    }

    /* --- Price --- */
    body .woocommerce ul.products li.product .price,
    body .woocommerce ul.products li.product .price ins,
    body .woocommerce ul.products li.product .price .amount,
    body .erbil-product-card .price,
    body .erbil-product-card .price ins,
    body .erbil-product-card .price .amount,
    body .erbil-pcard-price .price {
        font-size: 13px !important;
        font-weight: 800 !important;
        color: #111 !important;
        text-align: center !important;
        width: 100% !important;
        margin: 4px 0 8px !important;
    }

    /* --- Card footer stacks price above the button --- */
    body .erbil-pcard-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
    }

    /* --- Add-to-cart button --- */
    body .woocommerce ul.products li.product .button,
    body .woocommerce ul.products li.product .add_to_cart_button,
    body .erbil-product-card .button,
    body .erbil-product-card .add_to_cart_button,
    body .erbil-pcard-footer .button,
    body .erbil-pcard-footer .add_to_cart_button {
        width: 100% !important;
        max-width: 100% !important;
        height: 36px !important;
        padding: 0 8px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ec407a !important;
        color: #fff !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        white-space: normal !important;
    }

    /* --- Compact single-row toolbar (result count + ordering) --- */
    .erbil-shop-toolbar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        margin-bottom: 12px !important;
        box-sizing: border-box !important;
    }

    .erbil-shop-toolbar .woocommerce-result-count {
        font-size: 12px !important;
        color: #666 !important;
        margin: 0 !important;
        float: none !important;
        white-space: nowrap !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .erbil-shop-toolbar .woocommerce-ordering {
        margin: 0 !important;
        float: none !important;
        flex: 0 1 170px !important;
        max-width: 170px !important;
    }

    .erbil-shop-toolbar .woocommerce-ordering select.orderby {
        width: 100% !important;
        height: 36px !important;
        font-size: 12px !important;
        padding: 0 10px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    /* --- Horizontal category pill bar --- */
    body .erbil-shop-cat-list,
    body .erbil-shop-sidebar .erbil-shop-cat-list,
    body .erbil-category-filter,
    body .product-categories {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding: 8px 10px 14px !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    body .erbil-shop-cat-list::-webkit-scrollbar,
    body .product-categories::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    /* --- Category pills --- */
    body .erbil-shop-cat-list li,
    body .product-categories li {
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    body .erbil-shop-cat-list li a,
    body .product-categories li a {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        border-radius: 20px !important;
    }

    /* --- Active category pill (is-active / current-cat / active) --- */
    body .erbil-shop-cat-list li.is-active a,
    body .erbil-shop-cat-list li.current-cat a,
    body .erbil-shop-cat-list li.active a,
    body .product-categories li.current-cat a,
    body .product-categories li.active a {
        background: #ec407a !important;
        color: #fff !important;
        border-color: #ec407a !important;
    }
}

/* ============================================================
   SINGLE PRODUCT — FULL-WIDTH LAYOUT GUARD
   Keeps the product page and footer from being squeezed into
   half the viewport by a stray sidebar / grid / float rule.
   ============================================================ */
body.single-product,
body.single-product #main-content,
body.single-product .vc-main {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    display: block !important;
    box-sizing: border-box !important;
}

body.single-product .site-main,
body.single-product .content-area,
body.single-product #primary,
body.single-product #main,
body.single-product .erbil-shop-main,
body.single-product .erbil-single-product-wrap,
body.single-product .erbil-single-container {
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    float: none !important;
    display: block !important;
    box-sizing: border-box !important;
    grid-template-columns: none !important;
}

body.single-product .erbil-single-product-wrapper {
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    display: block !important;
    box-sizing: border-box !important;
}

body.single-product .widget-area,
body.single-product .sidebar,
body.single-product #secondary,
body.single-product .erbil-shop-sidebar {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================
   WISHLIST — LUXURY PERSIAN EXPERIENCE
   ============================================================ */

/* --- Header heart counter badge --- */
.vc-wishlist-btn {
    position: relative;
}

.wishlist-count-badge {
    position: absolute;
    top: -4px !important;
    right: -6px !important;
    left: auto !important;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--color-pink);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1 !important;
    box-shadow: 0 4px 10px rgba(236, 64, 122, 0.28);
    pointer-events: none;
}

.wishlist-count-badge[hidden] {
    display: none !important;
}

/* --- Page shell --- */
.erbil-wishlist-main {
    width: 100%;
    background: #fffcfd;
    padding: 0 0 60px;
    box-sizing: border-box;
}

.erbil-wishlist-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* --- Hero banner --- */
.erbil-wishlist-hero {
    background: linear-gradient(135deg, #fff0f6 0%, #fce4ec 100%);
    border-radius: 24px;
    padding: 28px 36px;
    margin: 24px 0 32px;
    border: 1px solid #f8bbd0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    box-shadow: 0 12px 34px rgba(236, 64, 122, 0.06);
}

.erbil-wishlist-hero-right {
    flex: 1 1 420px;
    min-width: 0;
}

.erbil-wishlist-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #9a6b7d;
    margin-bottom: 10px;
}

.erbil-wishlist-breadcrumb a {
    color: #c2185b;
    text-decoration: none;
    font-weight: 600;
}

.erbil-wishlist-breadcrumb a:hover {
    text-decoration: underline;
}

.erbil-wishlist-breadcrumb-sep {
    color: #e3a5bb;
}

.erbil-wishlist-breadcrumb-current {
    color: #7a4a5c;
    font-weight: 700;
}

.erbil-wishlist-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 900;
    color: #2d2d2d;
    line-height: 1.4;
}

.erbil-wishlist-title-heart {
    font-size: 26px;
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(236, 64, 122, 0.25));
}

.erbil-wishlist-subtitle {
    margin: 0;
    font-size: 14px;
    color: #7a5a66;
    line-height: 1.8;
}

.erbil-wishlist-hero-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.erbil-wishlist-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: 12px 18px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid #f8bbd0;
    box-shadow: 0 8px 20px rgba(236, 64, 122, 0.08);
}

.wishlist-count-num {
    font-size: 26px;
    font-weight: 900;
    color: #ec407a;
    line-height: 1.1;
}

.erbil-wishlist-counter-label {
    font-size: 11.5px;
    color: #8a6b76;
    font-weight: 600;
    margin-top: 2px;
}

.erbil-wishlist-clear-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 18px;
    border-radius: 14px;
    border: 1px solid #f3b6c9;
    background: #fff;
    color: #d81b60;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
}

.erbil-wishlist-clear-all:hover {
    background: #fff0f6;
    border-color: #ec407a;
    transform: translateY(-1px);
}

/* --- Populated grid --- */
.erbil-wishlist-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.erbil-wishlist-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #f5dce7;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(236, 64, 122, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;
}

.erbil-wishlist-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(236, 64, 122, 0.12);
}

.erbil-wishlist-card.is-removing {
    opacity: 0;
    transform: scale(0.94);
}

.erbil-wishlist-remove {
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;
    z-index: 3;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #f3b6c9;
    background: rgba(255, 255, 255, 0.95);
    color: #d81b60;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(236, 64, 122, 0.12);
}

.erbil-wishlist-remove:hover {
    background: #ec407a;
    color: #fff;
    border-color: #ec407a;
    transform: rotate(90deg);
}

.erbil-wishlist-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 18px;
    background: #fffafc;
    overflow: hidden;
}

.erbil-wishlist-thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.35s ease;
}

.erbil-wishlist-card:hover .erbil-wishlist-thumb img {
    transform: scale(1.05);
}

.erbil-wishlist-discount {
    position: absolute;
    top: 12px;
    left: 12px;
    right: auto;
    z-index: 2;
    background: linear-gradient(135deg, #ec407a, #d81b60);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    padding: 4px 9px;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(236, 64, 122, 0.3);
}

.erbil-wishlist-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px 16px 16px;
}

.erbil-wishlist-card-title {
    margin: 0 0 8px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.7;
    color: #2d2d2d;
    min-height: 2.9em;
}

.erbil-wishlist-card-title a {
    color: inherit;
    text-decoration: none;
}

.erbil-wishlist-card-title a:hover {
    color: #ec407a;
}

.erbil-wishlist-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    margin-bottom: 8px;
}

.erbil-wishlist-stock.is-in-stock {
    color: #2e7d32;
}

.erbil-wishlist-stock.is-out-of-stock {
    color: #c62828;
}

.erbil-wishlist-stock-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12);
}

.erbil-wishlist-stock.is-out-of-stock .erbil-wishlist-stock-dot {
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12);
}

.erbil-wishlist-price {
    margin-top: auto;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 900;
    color: #d81b60;
}

.erbil-wishlist-price del {
    color: #b0a0a6;
    font-size: 12px;
    font-weight: 500;
    margin-left: 6px;
}

.erbil-wishlist-price ins {
    text-decoration: none;
}

.erbil-wishlist-add-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 11px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ec407a, #d81b60) !important;
    color: #fff !important;
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
    border: none !important;
    box-shadow: 0 8px 18px rgba(236, 64, 122, 0.22);
    transition: all 0.2s ease;
}

.erbil-wishlist-add-cart:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(236, 64, 122, 0.3);
    color: #fff;
}

/* --- Empty state --- */
.erbil-wishlist-empty {
    max-width: 580px;
    margin: 20px auto 60px;
    background: #fff;
    border-radius: 28px;
    padding: 48px 36px;
    text-align: center;
    border: 1px solid #f5dce7;
    box-shadow: 0 16px 50px rgba(236, 64, 122, 0.06);
}

.erbil-wishlist-empty-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #fff0f6;
    color: #ec407a;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: erbilWishlistFloat 3s ease-in-out infinite;
    box-shadow: inset 0 0 0 1px #f8bbd0, 0 12px 30px rgba(236, 64, 122, 0.12);
}

@keyframes erbilWishlistFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.erbil-wishlist-empty-title {
    font-size: 20px;
    font-weight: 800;
    color: #222;
    margin: 0 0 10px;
}

.erbil-wishlist-empty-text {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    margin: 0 0 26px;
}

.erbil-wishlist-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #ec407a, #d81b60);
    color: #fff !important;
    padding: 14px 32px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 14.5px;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(236, 64, 122, 0.25);
    transition: all 0.2s ease;
}

.erbil-wishlist-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(236, 64, 122, 0.32);
}

.erbil-wishlist-cta-arrow {
    font-size: 16px;
}

/* --- Suggestions (CRO boost) --- */
.erbil-wishlist-suggestions {
    margin: 0 auto 40px;
    max-width: 1320px;
}

.erbil-wishlist-suggestions-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 900;
    color: #2d2d2d;
    margin: 0 0 18px;
}

.erbil-wishlist-suggestions-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.erbil-wishlist-suggestion-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #f5dce7;
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 8px 24px rgba(236, 64, 122, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.erbil-wishlist-suggestion-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(236, 64, 122, 0.12);
}

.erbil-suggestion-heart {
    position: absolute;
    top: 10px;
    right: 10px;
    left: auto;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #f3b6c9;
    background: #fff;
    color: #d81b60;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.erbil-suggestion-heart:hover,
.erbil-suggestion-heart.is-active,
.erbil-suggestion-heart.is-wishlisted {
    background: #ec407a;
    color: #fff;
    border-color: #ec407a;
}

.erbil-suggestion-heart.is-active svg,
.erbil-suggestion-heart.is-wishlisted svg {
    fill: currentColor;
}

.erbil-suggestion-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 10px;
    background: #fffafc;
    border-radius: 12px;
    overflow: hidden;
}

.erbil-suggestion-thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.35s ease;
}

.erbil-wishlist-suggestion-card:hover .erbil-suggestion-thumb img {
    transform: scale(1.05);
}

.erbil-suggestion-title {
    margin: 10px 0 6px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.55;
    color: #2d2d2d;
    height: 3.1em;
    min-height: 3.1em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.erbil-suggestion-title a {
    color: inherit;
    text-decoration: none;
}

.erbil-suggestion-title a:hover {
    color: #ec407a;
}

.erbil-suggestion-price {
    font-size: 13.5px;
    font-weight: 900;
    color: #d81b60;
    margin-bottom: 10px;
}

.erbil-suggestion-price del {
    color: #b0a0a6;
    font-size: 11px;
    font-weight: 500;
    margin-left: 5px;
}

.erbil-suggestion-price ins {
    text-decoration: none;
}

.erbil-suggestion-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: auto;
    padding: 9px 10px;
    border-radius: 10px;
    background: #fff0f6 !important;
    color: #d81b60 !important;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid #f8bbd0 !important;
    transition: all 0.2s ease;
}

.erbil-suggestion-cart:hover {
    background: linear-gradient(135deg, #ec407a, #d81b60);
    color: #fff !important;
    border-color: #ec407a;
}

/* --- Shared heart buttons across the site --- */
.wishlist-btn {
    cursor: pointer;
}

.wishlist-btn.is-active svg,
.wishlist-btn.is-wishlisted svg,
.wishlist-btn.active svg,
.vc-offer-fav.is-active svg,
.vc-offer-fav.is-wishlisted svg,
.favorite-btn.is-active svg,
.favorite-btn.is-wishlisted svg {
    fill: #ec407a;
    stroke: #ec407a;
}

.vc-offer-fav.is-active,
.vc-offer-fav.is-wishlisted,
.favorite-btn.is-active,
.favorite-btn.is-wishlisted {
    color: #ec407a;
}

.erbil-pcard-thumb {
    position: relative;
}

.erbil-pcard-wishlist {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    z-index: 15 !important;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #f3b6c9;
    background: rgba(255, 255, 255, 0.95);
    color: #d81b60;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(236, 64, 122, 0.12);
}

.erbil-pcard-wishlist:hover,
.erbil-pcard-wishlist.is-active,
.erbil-pcard-wishlist.is-wishlisted {
    background: #ec407a;
    color: #fff;
    border-color: #ec407a;
}

.erbil-pcard-wishlist.is-active svg,
.erbil-pcard-wishlist.is-wishlisted svg {
    fill: #fff;
    stroke: #fff;
}

.erbil-sp-wishlist-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid #f3b6c9;
    background: #fff0f6;
    color: #d81b60;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
}

.erbil-sp-wishlist-btn:hover,
.erbil-sp-wishlist-btn.is-active,
.erbil-sp-wishlist-btn.is-wishlisted {
    background: linear-gradient(135deg, #ec407a, #d81b60);
    color: #fff;
    border-color: #ec407a;
}

.erbil-sp-wishlist-btn.is-active svg,
.erbil-sp-wishlist-btn.is-wishlisted svg {
    fill: #fff;
    stroke: #fff;
}

/* --- Toast notifications --- */
.erbil-wishlist-toast-wrap {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    pointer-events: none;
    width: min(92vw, 420px);
}

.erbil-wishlist-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 18px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #f5dce7;
    box-shadow: 0 16px 40px rgba(236, 64, 122, 0.18);
    color: #2d2d2d;
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.erbil-wishlist-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.erbil-wishlist-toast.is-success {
    border-color: #f8bbd0;
}

.erbil-wishlist-toast.is-removed {
    border-color: #e0e0e0;
}

.erbil-wishlist-toast.is-error {
    border-color: #ef9a9a;
    color: #b71c1c;
}

.erbil-wishlist-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff0f6;
    color: #ec407a;
    font-size: 15px;
    flex-shrink: 0;
}

.erbil-wishlist-toast.is-error .erbil-wishlist-toast-icon {
    background: #ffebee;
    color: #c62828;
}

.erbil-wishlist-toast-text {
    line-height: 1.6;
}

/* --- Suppress any raw My Account navigation dump on /wishlist/ --- */
.erbil-wishlist-page .woocommerce-MyAccount-navigation,
.erbil-wishlist-page nav.woocommerce-MyAccount-navigation,
.erbil-wishlist-page .woocommerce-MyAccount-navigation-link,
.erbil-wishlist-page ul.woocommerce-MyAccount-navigation-link {
    display: none !important;
}

/* --- Third-party wishlist plugin table styling --- */
.erbil-wishlist-page table.wishlist_table,
.erbil-wishlist-page .wishlist_table,
.erbil-wishlist-page .yith-wcwl-wishlist-section,
.erbil-wishlist-page .woocommerce-wishlist {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #f5dce7;
    border-radius: 20px;
    overflow: hidden;
}

.erbil-wishlist-page table.wishlist_table th {
    background: #fff0f6;
    color: #7a4a5c;
    font-size: 12.5px;
    font-weight: 800;
    padding: 14px 16px;
    text-align: right;
}

.erbil-wishlist-page table.wishlist_table td {
    padding: 14px 16px;
    border-top: 1px solid #f8e6ee;
    vertical-align: middle;
}

.erbil-wishlist-page table.wishlist_table .product-name a {
    color: #2d2d2d;
    font-weight: 700;
    text-decoration: none;
}

.erbil-wishlist-page table.wishlist_table .product-name a:hover {
    color: #ec407a;
}

.erbil-wishlist-page table.wishlist_table .button,
.erbil-wishlist-page .wishlist_table .button {
    background: linear-gradient(135deg, #ec407a, #d81b60) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 9px 16px !important;
    font-weight: 800 !important;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .erbil-wishlist-grid,
    .erbil-wishlist-suggestions-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .erbil-wishlist-container {
        padding: 0 14px;
    }

    .erbil-wishlist-hero {
        padding: 22px 20px;
        border-radius: 20px;
        margin: 16px 0 24px;
        flex-direction: column;
        align-items: stretch;
    }

    .erbil-wishlist-hero-left {
        justify-content: space-between;
    }

    .erbil-wishlist-title {
        font-size: 22px;
    }

    .erbil-wishlist-subtitle {
        font-size: 13px;
    }

    .erbil-wishlist-grid,
    .erbil-wishlist-suggestions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .erbil-wishlist-card-body {
        padding: 12px;
    }

    .erbil-wishlist-card-title {
        font-size: 12px;
    }

    .erbil-wishlist-empty {
        padding: 36px 22px;
        border-radius: 22px;
        margin-bottom: 40px;
    }

    .erbil-wishlist-empty-icon {
        width: 80px;
        height: 80px;
    }

    .erbil-wishlist-empty-title {
        font-size: 18px;
    }

    .erbil-wishlist-empty-text {
        font-size: 13px;
    }

    .erbil-wishlist-cta {
        padding: 12px 24px;
        font-size: 13.5px;
    }
}

@media (max-width: 420px) {
    .erbil-wishlist-grid,
    .erbil-wishlist-suggestions-grid {
        gap: 10px;
    }

    .erbil-wishlist-card-title {
        font-size: 11.5px;
    }

    .erbil-wishlist-add-cart {
        font-size: 11.5px;
        padding: 10px 8px;
    }
}

/* ============================================================
   PRODUCT CARD CORNER SEPARATION — FINAL OVERRIDES
   Wishlist heart  → ALWAYS top-left
   Product badges  → ALWAYS top-right
   Prevents the heart from sitting on top of «جدید» / «پرفروش»
   / sale badges on every product card across the theme.
   ============================================================ */

/* --- Wishlist heart: strictly top-left of the product image wrapper --- */
.erbil-pcard-thumb .erbil-wishlist-btn,
.erbil-pcard-thumb .wishlist-btn,
.erbil-pcard-thumb .offer-wishlist-btn,
.erbil-pcard-thumb .erbil-pcard-wishlist,
.erbil-product-card .erbil-wishlist-btn,
.erbil-swiper-card .erbil-wishlist-btn,
.offer-product-card .erbil-wishlist-btn,
.offer-product-card .wishlist-btn,
.offer-product-card .favorite-btn,
.vc-offer-card .erbil-wishlist-btn,
.vc-offer-card .wishlist-btn,
.vc-offer-card .vc-offer-fav {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    z-index: 15 !important;
}

/* --- Product badges: strictly top-right of the product image wrapper --- */
.erbil-pcard-thumb .erbil-pcard-badge,
.erbil-pcard-thumb .erbil-badge-new,
.erbil-pcard-thumb .erbil-badge-bestseller,
.erbil-pcard-thumb .badge-new,
.erbil-pcard-thumb .badge-hot,
.erbil-pcard-thumb .onsale,
.erbil-pcard-thumb [class*="badge"],
.erbil-product-card .erbil-pcard-badge,
.erbil-swiper-card .erbil-pcard-badge,
.offer-product-card .discount-badge,
.offer-product-card [class*="badge"],
.vc-offer-card .vc-offer-badge,
.vc-offer-card [class*="badge"] {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    z-index: 14 !important;
}

/* --- Header heart & cart counters: keep them inside the header bounds --- */
.wishlist-count-badge,
.vc-cart-count,
.cart-count,
.header-cart-count {
    top: -4px !important;
    right: -6px !important;
    left: auto !important;
    line-height: 1 !important;
}

/* ============================================================
   BEAUTY MAGAZINE / BLOG SYSTEM
   ============================================================ */

/* --- Archive shell --- */
.erbil-blog-main {
    background: #fffafc;
    padding-bottom: 60px;
}

/* --- A. Magazine hero header --- */
.erbil-blog-hero {
    width: 100%;
    max-width: 1320px;
    margin: 28px auto 32px;
    padding: 0 20px;
    box-sizing: border-box;
}

.erbil-blog-hero-inner {
    background: linear-gradient(135deg, #fff0f6 0%, #fce4ec 55%, #f3e5f5 100%);
    border-radius: 28px;
    padding: 38px 44px;
    border: 1px solid #f8bbd0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-sizing: border-box;
}

.erbil-blog-hero-text {
    flex: 1 1 auto;
    min-width: 0;
}

.erbil-blog-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.75);
    color: #d81b60;
    border: 1px solid #f8bbd0;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 14px;
}

.erbil-blog-hero-title {
    font-size: 30px;
    font-weight: 900;
    color: #2d2d2d;
    line-height: 1.5;
    margin: 0 0 10px;
}

.erbil-blog-hero-sub {
    font-size: 14px;
    color: #6b5b63;
    line-height: 1.9;
    margin: 0;
    max-width: 640px;
}

.erbil-blog-hero-side {
    flex: 0 0 340px;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.erbil-blog-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #f3dce6;
    border-radius: 999px;
    padding: 6px 8px 6px 16px;
    box-shadow: 0 8px 22px rgba(236, 64, 122, 0.08);
}

.erbil-blog-search-icon {
    font-size: 15px;
    line-height: 1;
    flex: 0 0 auto;
}

.erbil-blog-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-primary);
    font-size: 13px;
    color: #333;
    padding: 8px 0;
}

.erbil-blog-search button {
    flex: 0 0 auto;
    border: none;
    background: linear-gradient(135deg, #ec407a, #d81b60);
    color: #fff;
    font-family: var(--font-primary);
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 999px;
    padding: 9px 18px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.erbil-blog-search button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(236, 64, 122, 0.28);
}

.erbil-blog-count {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #f8bbd0;
    color: #ad1457;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
}

/* --- B. Category filter pills --- */
.erbil-blog-cats {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto 28px;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    box-sizing: border-box;
}

.erbil-blog-cat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #f3dce6;
    color: #6b5b63;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.erbil-blog-cat:hover {
    border-color: #f48fb1;
    color: #d81b60;
    transform: translateY(-1px);
}

.erbil-blog-cat.is-active {
    background: linear-gradient(135deg, #ec407a, #d81b60);
    border-color: #ec407a;
    color: #fff;
    box-shadow: 0 8px 20px rgba(236, 64, 122, 0.25);
}

/* --- C. Featured spotlight article --- */
.erbil-blog-featured {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto 36px;
    padding: 24px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 32px;
    align-items: center;
    background: #fff;
    border-radius: 26px;
    border: 1px solid #f3dce6;
    box-shadow: 0 15px 45px rgba(236, 64, 122, 0.06);
    box-sizing: border-box;
}

.erbil-blog-featured-media {
    position: relative;
    display: block;
    height: 320px;
    border-radius: 20px;
    overflow: hidden;
    background: #fff8fb;
}

/* Only the actual post thumbnail (direct child) fills the media box.
   Nested icons inside the badge are intentionally excluded. */
.erbil-blog-featured-media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.erbil-blog-featured:hover .erbil-blog-featured-media > img {
    transform: scale(1.04);
}

.erbil-blog-featured-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.94);
    color: #d81b60;
    border: 1px solid #f8bbd0;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 11.5px;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    z-index: 2;
}

/* Keep the fire icon inside the badge at true icon size. */
.erbil-blog-featured-badge img,
.erbil-blog-featured-badge svg,
.erbil-blog-featured-badge .badge-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    flex: 0 0 auto !important;
}

.erbil-blog-featured-body {
    min-width: 0;
}

.erbil-blog-featured-cat {
    display: inline-flex;
    align-items: center;
    background: #fff0f6;
    color: #d81b60;
    border: 1px solid #f8bbd0;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 11.5px;
    font-weight: 800;
    text-decoration: none;
    margin-bottom: 12px;
}

.erbil-blog-featured-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12px;
    color: #888;
    margin-bottom: 12px;
}

.erbil-blog-featured-title {
    font-size: 22px;
    font-weight: 900;
    line-height: 1.6;
    color: #222;
    margin: 0 0 12px;
}

.erbil-blog-featured-title a {
    color: inherit;
    text-decoration: none;
}

.erbil-blog-featured-title a:hover {
    color: #d81b60;
}

.erbil-blog-featured-excerpt {
    font-size: 13.5px;
    color: #666;
    line-height: 1.9;
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.erbil-blog-featured-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #ec407a, #d81b60);
    color: #fff;
    border-radius: 999px;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(236, 64, 122, 0.25);
    transition: transform 0.2s, box-shadow 0.2s;
}

.erbil-blog-featured-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(236, 64, 122, 0.32);
}

/* --- D. 3-column article grid --- */
.erbil-blog-grid {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    box-sizing: border-box;
}

.erbil-blog-card {
    background: #fff;
    border-radius: 22px;
    border: 1px solid #f3dce6;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);
    transition: transform 0.25s, box-shadow 0.25s;
}

.erbil-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(236, 64, 122, 0.1);
}

.erbil-blog-card-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    background: #fff8fb;
    overflow: hidden;
}

.erbil-blog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.erbil-blog-card:hover .erbil-blog-card-media img {
    transform: scale(1.05);
}

.erbil-blog-card-cat {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.94);
    color: #d81b60;
    border: 1px solid #f8bbd0;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 10.5px;
    font-weight: 800;
    z-index: 2;
}

.erbil-blog-card-body {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.erbil-blog-card-meta {
    font-size: 12px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.erbil-blog-card-title {
    font-size: 16px;
    font-weight: 800;
    color: #222;
    line-height: 1.6;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.erbil-blog-card-title a {
    color: inherit;
    text-decoration: none;
}

.erbil-blog-card-title a:hover {
    color: #d81b60;
}

.erbil-blog-card-excerpt {
    font-size: 13.5px;
    color: #666;
    line-height: 1.75;
    margin: 0 0 18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.erbil-blog-card-footer {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed #f3dce6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.erbil-blog-card-author {
    font-size: 11.5px;
    color: #999;
    font-weight: 600;
}

.erbil-blog-card-link {
    font-size: 12.5px;
    font-weight: 800;
    color: #d81b60;
    text-decoration: none;
    white-space: nowrap;
}

.erbil-blog-card-link:hover {
    color: #ad1457;
}

/* --- Shared image placeholder --- */
.erbil-blog-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    background: linear-gradient(135deg, #fff0f6, #f3e5f5);
    color: #f48fb1;
}

/* --- Empty state --- */
.erbil-blog-empty {
    max-width: 1320px;
    margin: 0 auto;
    padding: 60px 20px;
    text-align: center;
    color: #888;
    font-size: 15px;
}

.erbil-blog-empty-icon {
    display: block;
    font-size: 46px;
    margin-bottom: 14px;
}

.erbil-blog-empty h2 {
    font-size: 20px;
    font-weight: 900;
    color: #333;
    margin: 0 0 10px;
}

.erbil-blog-empty p {
    margin: 0 0 22px;
    line-height: 1.9;
}

/* --- Pagination --- */
.erbil-blog-pagination {
    max-width: 1320px;
    margin: 36px auto 0;
    padding: 0 20px;
    display: flex;
    justify-content: center;
}

.erbil-blog-pagination ul.page-numbers {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.erbil-blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #f3dce6;
    color: #6b5b63;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.erbil-blog-pagination .page-numbers.current,
.erbil-blog-pagination .page-numbers:hover {
    background: linear-gradient(135deg, #ec407a, #d81b60);
    border-color: #ec407a;
    color: #fff;
}

/* --- E. Bottom CRO banner --- */
.erbil-blog-cro {
    max-width: 1320px;
    margin: 40px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
}

.erbil-blog-cro-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(135deg, #2d2d2d 0%, #4a2c3a 100%);
    border-radius: 24px;
    padding: 30px 36px;
    box-shadow: 0 18px 45px rgba(45, 45, 45, 0.18);
}

.erbil-blog-cro-title {
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    margin: 0 0 8px;
}

.erbil-blog-cro-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.8;
    margin: 0;
    max-width: 640px;
}

.erbil-blog-cro-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #ec407a, #d81b60);
    color: #fff;
    border-radius: 999px;
    padding: 13px 26px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(236, 64, 122, 0.3);
    transition: transform 0.2s;
}

.erbil-blog-cro-btn:hover {
    transform: translateY(-2px);
}

/* ============================================================
   SINGLE ARTICLE — LUXURY 2-COLUMN RTL READING LAYOUT
   ============================================================ */
.erbil-single-main {
    background: #fffafc;
    padding-bottom: 60px;
}

.erbil-single-wrap {
    max-width: 1240px;
    margin: 32px auto 60px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: start;
    box-sizing: border-box;
}

.erbil-single-article {
    background: #fff;
    border: 1px solid #f3dce6;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 12px 35px rgba(236, 64, 122, 0.05);
    min-width: 0;
}

.erbil-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: #999;
    margin-bottom: 18px;
}

.erbil-breadcrumbs a {
    color: #d81b60;
    text-decoration: none;
    font-weight: 600;
}

.erbil-breadcrumbs a:hover {
    text-decoration: underline;
}

.erbil-bc-sep {
    color: #ccc;
}

.erbil-bc-current {
    color: #777;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erbil-single-cat {
    display: inline-flex;
    align-items: center;
    background: #fff0f6;
    color: #d81b60;
    border: 1px solid #f8bbd0;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 11.5px;
    font-weight: 800;
    text-decoration: none;
    margin-bottom: 14px;
}

.erbil-single-title {
    font-size: 30px;
    font-weight: 900;
    line-height: 1.6;
    color: #222;
    margin: 0 0 16px;
}

.erbil-single-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12.5px;
    color: #888;
    padding-bottom: 20px;
    border-bottom: 1px dashed #f3dce6;
    margin-bottom: 24px;
}

.erbil-single-hero {
    margin: 0 0 26px;
    border-radius: 20px;
    overflow: hidden;
    background: #fff8fb;
}

.erbil-single-hero img {
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: cover;
    display: block;
}

.erbil-single-content {
    line-height: 2;
    font-size: 15.5px;
    color: #333;
}

.erbil-single-content p {
    margin: 0 0 18px;
}

.erbil-single-content h2 {
    font-size: 22px;
    font-weight: 900;
    color: #222;
    line-height: 1.6;
    margin: 30px 0 14px;
    padding-right: 14px;
    border-right: 4px solid #ec407a;
}

.erbil-single-content h3 {
    font-size: 18px;
    font-weight: 800;
    color: #2d2d2d;
    line-height: 1.6;
    margin: 24px 0 12px;
}

.erbil-single-content ul,
.erbil-single-content ol {
    margin: 0 0 20px;
    padding-right: 22px;
}

.erbil-single-content li {
    margin-bottom: 8px;
}

.erbil-single-content strong {
    color: #222;
}

.erbil-single-content a {
    color: #d81b60;
    text-decoration: underline;
}

.erbil-single-content img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
}

.erbil-single-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed #f3dce6;
}

.erbil-single-tags-label {
    font-size: 12px;
    font-weight: 800;
    color: #777;
}

.erbil-single-tag {
    display: inline-flex;
    align-items: center;
    background: #fff8fb;
    border: 1px solid #f3dce6;
    color: #ad1457;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
}

.erbil-single-tag:hover {
    background: #fff0f6;
}

.erbil-single-comments {
    margin-top: 30px;
}

.erbil-single-comments .comments-area {
    margin-top: 0;
    border: none;
    padding: 0;
    background: transparent;
}

.erbil-single-comments .comments-title {
    font-size: 18px;
    font-weight: 900;
    color: #222;
    margin: 0 0 18px;
}

.erbil-single-comments .comments-count {
    color: #d81b60;
}

.erbil-single-comments .comment-reply-title {
    font-size: 16px;
    font-weight: 900;
    color: #222;
    margin: 24px 0 14px;
}

.erbil-single-comments .comment-notes {
    font-size: 12px;
    color: #999;
    margin-bottom: 14px;
}

.erbil-single-comments .form-submit .submit {
    background: linear-gradient(135deg, #ec407a, #d81b60);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 28px;
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(236, 64, 122, 0.25);
}

/* --- Sticky sidebar --- */
.erbil-single-sidebar {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.erbil-sidebar-widget {
    background: #fff;
    border: 1px solid #f3dce6;
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);
}

.erbil-sidebar-title {
    font-size: 14px;
    font-weight: 900;
    color: #222;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #f3dce6;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.6;
}

.erbil-sidebar-products {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.erbil-sidebar-product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid #f7e6ee;
    border-radius: 16px;
    background: #fffafc;
    text-decoration: none;
    transition: border-color 0.2s, transform 0.2s;
}

.erbil-sidebar-product:hover {
    border-color: #f48fb1;
    transform: translateY(-1px);
}

.erbil-sidebar-product-thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.erbil-sidebar-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.erbil-sidebar-product-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.erbil-sidebar-product-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #333;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.erbil-sidebar-product-price {
    font-size: 12px;
    font-weight: 800;
    color: #d81b60;
}

.erbil-sidebar-product-price .price {
    color: #d81b60;
}

.erbil-sidebar-product-price del {
    color: #aaa;
    font-weight: 500;
    margin-left: 4px;
}

.erbil-sidebar-product-link {
    font-size: 11px;
    font-weight: 800;
    color: #ad1457;
}

.erbil-sidebar-posts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.erbil-sidebar-post {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.erbil-sidebar-post-thumb {
    position: relative;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    background: #fff8fb;
}

.erbil-sidebar-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.erbil-sidebar-post-thumb .erbil-blog-placeholder {
    font-size: 20px;
}

.erbil-sidebar-post-info {
    flex: 1 1 auto;
    min-width: 0;
}

.erbil-sidebar-post-title {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.erbil-sidebar-post:hover .erbil-sidebar-post-title {
    color: #d81b60;
}

.erbil-sidebar-post-date {
    display: block;
    font-size: 10.5px;
    color: #999;
    margin-top: 3px;
}

/* ============================================================
   BEAUTY MAGAZINE — RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .erbil-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .erbil-single-wrap {
        grid-template-columns: 1fr;
    }

    .erbil-single-sidebar {
        position: static;
    }
}

@media (max-width: 900px) {
    .erbil-blog-hero-inner {
        flex-direction: column;
        align-items: stretch;
        padding: 30px 26px;
    }

    .erbil-blog-hero-side {
        flex: 1 1 auto;
        max-width: 100%;
    }

    .erbil-blog-featured {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .erbil-blog-featured-media {
        height: 260px;
    }
}

@media (max-width: 768px) {
    /* --- Global blog container overflow fix --- */
    .erbil-blog-archive {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 14px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .erbil-blog-hero,
    .erbil-blog-featured,
    .erbil-blog-cats,
    .erbil-blog-grid {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* --- A. Hero banner --- */
    .erbil-blog-hero {
        margin-top: 18px !important;
        margin-bottom: 24px !important;
        padding: 0 !important;
    }

    .erbil-blog-hero-inner {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 24px 16px !important;
        text-align: center !important;
        border-radius: 20px !important;
        gap: 16px !important;
    }

    .erbil-blog-hero-text {
        width: 100% !important;
        max-width: 100% !important;
    }

    .erbil-blog-hero-title {
        font-size: 20px !important;
        line-height: 1.5 !important;
    }

    .erbil-blog-hero-sub {
        font-size: 13px !important;
        max-width: 100% !important;
    }

    .erbil-blog-hero-side {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }

    .erbil-blog-search {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .erbil-blog-count {
        align-self: center !important;
    }

    /* --- B. Category pills --- */
    .erbil-blog-cats {
        padding: 0 !important;
        gap: 8px !important;
        margin-bottom: 22px !important;
    }

    .erbil-blog-cat {
        padding: 8px 14px !important;
        font-size: 11.5px !important;
    }

    /* --- C. Featured spotlight article --- */
    .erbil-blog-featured {
        display: flex !important;
        flex-direction: column !important;
        padding: 16px !important;
        gap: 16px !important;
        border-radius: 20px !important;
        margin-bottom: 28px !important;
    }

    .erbil-blog-featured-media {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
        margin: 0 !important;
        border-radius: 14px !important;
    }

    /* Scope the fill rule to the real thumbnail only (direct child),
       so badge icons are never stretched. */
    .erbil-blog-featured-media > img,
    .erbil-blog-featured-media .wp-post-image {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        aspect-ratio: auto !important;
        object-fit: cover !important;
    }

    /* Badge fire icon — locked to icon size on mobile. */
    .erbil-blog-featured-badge img,
    .erbil-blog-featured-badge svg,
    .erbil-blog-featured-badge .badge-icon {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-block !important;
        object-fit: contain !important;
        flex: 0 0 auto !important;
    }

    .erbil-blog-featured-body {
        width: 100% !important;
        max-width: 100% !important;
        text-align: right !important;
    }

    .erbil-blog-featured-title {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    .erbil-blog-featured-excerpt {
        font-size: 13px !important;
        line-height: 1.9 !important;
    }

    .erbil-blog-featured-btn {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        justify-content: center !important;
        height: 48px !important;
        margin-top: 10px !important;
    }

    /* --- D. Standard article grid --- */
    .erbil-blog-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 0 !important;
    }

    .erbil-blog-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .erbil-blog-card-body {
        padding: 16px !important;
    }

    .erbil-blog-cro {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .erbil-blog-cro-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 20px;
        border-radius: 20px;
    }

    .erbil-blog-cro-title {
        font-size: 17px;
    }

    .erbil-single-wrap {
        margin: 20px auto 40px;
        padding: 0 14px;
        gap: 20px;
    }

    .erbil-single-article {
        padding: 20px 16px;
        border-radius: 20px;
    }

    .erbil-single-title {
        font-size: 22px;
    }

    .erbil-single-content {
        font-size: 14.5px;
        line-height: 1.95;
    }

    .erbil-single-content h2 {
        font-size: 19px;
    }

    .erbil-single-content h3 {
        font-size: 16.5px;
    }

    .erbil-single-hero img {
        max-height: 300px;
    }
}

@media (max-width: 480px) {
    .erbil-blog-hero-title {
        font-size: 19px;
    }

    .erbil-blog-search {
        padding: 5px 6px 5px 12px;
    }

    .erbil-blog-search button {
        padding: 8px 14px;
        font-size: 11.5px;
    }

    .erbil-blog-featured-media {
        height: 190px;
    }

    .erbil-blog-card-body {
        padding: 16px;
    }

    .erbil-single-title {
        font-size: 20px;
    }
}

/* ============================================================
   MY ACCOUNT AUTH CARD — MOBILE OVERFLOW FIX (<= 768px)
   Scoped strictly to small screens; desktop is untouched.
   ============================================================ */
@media (max-width: 768px) {
    /* 1. Screen & card width — kill horizontal overflow */
    html body.woocommerce-account .site-main,
    html body.woocommerce-account .entry-content,
    html body.woocommerce-account .woocommerce {
        padding: 0 14px !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    html body.woocommerce-account:not(.logged-in) #customer_login.erbil-auth-card,
    html body.woocommerce-account #customer_login.erbil-auth-card,
    html body.woocommerce-account .erbil-auth-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* 2. Reduce internal padding on both columns */
    html body.woocommerce-account .erbil-auth-form-col,
    html body.woocommerce-account .erbil-auth-brand-col {
        padding: 24px 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* 3. Tab switcher — no overflow, equal-width buttons */
    html body.woocommerce-account .erbil-auth-tabs {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        height: auto !important;
        grid-template-columns: none !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    html body.woocommerce-account .erbil-auth-tabs .erbil-auth-tab {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 10px 4px !important;
        font-size: 11.5px !important;
        white-space: normal !important;
        line-height: 1.4 !important;
        text-align: center !important;
        height: auto !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    /* Keep the sliding pill aligned with the two flex buttons */
    html body.woocommerce-account .erbil-auth-tabs .erbil-auth-tab-pill {
        width: calc(50% - 5px) !important;
    }
}

/* ============================================================
   SINGLE PRODUCT — MOBILE HORIZONTAL OVERFLOW FIX  (@media <=768px)
   ------------------------------------------------------------
   RTL document: any child that pokes past the right edge widens the
   document's scrollable region and the browser anchors the viewport at
   that widened edge — which reads as the whole page being pulled to the
   left with content clipped. The rules below contain every wide block on
   the product page (topic pill nav, sticky buy bar, spec tables and the
   summary cards) so nothing can widen the page.

   NOTE: `overflow-x: clip` is declared after `hidden` on purpose. `hidden`
   on both html and body turns <body> into a scroll container and breaks
   the sticky header + sticky topic nav; `clip` clips without doing that.
   Wrappers use `clip` only (no `hidden` fallback) so sticky keeps working.
   `html body.single-product` prefixes outrank the later-loaded
   css/woocommerce.css declarations.
   ============================================================ */
@media (max-width: 768px) {

    /* --- 1. Global mobile overflow safety net ------------------------- */
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        position: relative;
        overflow-x: hidden !important;
        overflow-x: clip !important;
    }

    /* Page shell: constrain, never let a child dictate the width. */
    html body.single-product .site-main,
    html body.single-product .content-area,
    html body.single-product #primary,
    html body.single-product #main,
    html body.single-product #main-content,
    html body.single-product .vc-main,
    html body.single-product .product,
    html body.single-product .erbil-single-product-wrapper,
    html body.single-product .erbil-single-product-wrap,
    html body.single-product .erbil-single-container,
    html body.single-product .erbil-sp-top,
    html body.single-product .erbil-sp-bottom {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        overflow-x: clip !important;
    }

    /* Every grid / flex child on the page must be allowed to shrink. */
    html body.single-product .erbil-sp-gallery,
    html body.single-product .erbil-sp-info,
    html body.single-product .erbil-sp-buy-box,
    html body.single-product .erbil-sp-key-specs,
    html body.single-product .erbil-sp-key-specs > *,
    html body.single-product .erbil-sp-meta-row,
    html body.single-product .erbil-sp-meta-row > *,
    html body.single-product .erbil-sp-assurance,
    html body.single-product .erbil-sp-assurance-row,
    html body.single-product .erbil-topic-sections,
    html body.single-product .erbil-topic-section,
    html body.single-product .erbil-sp-bottom .related,
    html body.single-product .erbil-sp-bottom .upsells,
    html body.single-product .erbil-sp-bottom .related.products ul.products,
    html body.single-product .erbil-sp-bottom .upsells ul.products,
    html body.single-product .erbil-sp-bottom .related.products ul.products li.product,
    html body.single-product .erbil-sp-bottom .upsells ul.products li.product {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* --- 2. Product tab / topic pill nav -------------------------------
       The pill row ("معرفی محصول", "ویژگی‌ها", …) scrolls horizontally
       inside its own box instead of stretching the page. */
    html body.single-product .erbil-topic-nav-bar,
    html body.single-product .woocommerce-tabs ul.tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-bottom: 5px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        box-sizing: border-box !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    html body.single-product .erbil-topic-nav-bar::-webkit-scrollbar,
    html body.single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    html body.single-product .erbil-topic-pill,
    html body.single-product .woocommerce-tabs ul.tabs li {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        max-width: none !important;
    }

    /* --- 3. Sticky bottom purchase bar ---------------------------------
       Fixed bar is pinned to both edges and boxed so its padding can
       never add to the viewport width. */
    html body.single-product .erbil-mobile-buy-bar,
    html body.single-product .erbil-sticky-bottom-cart {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    html body.single-product .erbil-mobile-buy-price {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
    }

    html body.single-product .erbil-mobile-buy-price .price {
        white-space: normal !important;
    }

    html body.single-product .erbil-mobile-buy-btn {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        max-width: 60% !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html body.single-product .woocommerce-variation-add-to-cart {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* --- 4. Summary / tab-panel cards ---------------------------------- */
    html body.single-product .erbil-product-summary,
    html body.single-product .erbil-meta-box,
    html body.single-product .woocommerce-Tabs-panel,
    html body.single-product .erbil-topic-body,
    html body.single-product .erbil-topic-reviews,
    html body.single-product .woocommerce-tabs,
    html body.single-product .erbil-sp-jump-btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* --- 5. Media & tables cannot widen the page ------------------------ */
    html body.single-product .erbil-sp-info img,
    html body.single-product .erbil-sp-gallery img,
    html body.single-product .erbil-topic-body img,
    html body.single-product .erbil-topic-body video,
    html body.single-product .erbil-topic-body iframe,
    html body.single-product .woocommerce-Tabs-panel img,
    html body.single-product .woocommerce-Tabs-panel iframe {
        max-width: 100% !important;
        height: auto !important;
    }

    html body.single-product .erbil-specs-table,
    html body.single-product .woocommerce-Tabs-panel table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }

    html body.single-product .erbil-specs-table th,
    html body.single-product .erbil-specs-table td,
    html body.single-product .woocommerce-Tabs-panel th,
    html body.single-product .woocommerce-Tabs-panel td {
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
    }

    /* Long Persian/URL strings wrap instead of pushing the box wider. */
    html body.single-product .product_title,
    html body.single-product .erbil-sp-info,
    html body.single-product .erbil-topic-section,
    html body.single-product .erbil-topic-body,
    html body.single-product .woocommerce-Tabs-panel {
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }
}

/* ============================================================
   UI POLISH — MOBILE HEADER, STICKY FIX, BADGES & PRICE LEGIBILITY
   ------------------------------------------------------------
   Findings from the desktop + 390px visual audit:
   • The mobile header stacked to three rows / 188px, and a stray
     `body { overflow-x: hidden }` on WooCommerce pages turned <body>
     into a scroll container, which silently killed the sticky header
     and the sticky product topic nav. Fixed with `overflow-x: clip`
     (no scroll container) and a compact two-row header.
   • The account CTA moved into the slide-out drawer on phones; it is
     still one tap away and frees a full row of vertical space.
   • The WooCommerce default "Sale!" flash (olive #958e09) outranked
     the theme's rose rule due to `span.onsale` specificity. Re-skinned
     as a rose pill that matches the product cards.
   • Old (crossed-out) prices were too faint to read comfortably; a
     slightly deeper muted tone keeps them secondary but legible.
   ============================================================ */
/* Drawer-only: never let the account CTA leak into the desktop header. */
.vc-mobile-account {
    display: none;
}

@media (max-width: 768px) {

    /* --- 1. Sticky-header fix ---------------------------------------
       `overflow-x: hidden` on <body> makes it a scroll container, so
       position: sticky elements scroll away. `clip` clips without
       creating a scroll container; overflow-y must stay visible. */
    html body,
    html body.woocommerce-page,
    html body.woocommerce-shop,
    html body.archive,
    html body.single-product,
    html body.woocommerce-account,
    html body.woocommerce-cart,
    html body.woocommerce-checkout {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }

    /* --- 2. Compact two-row mobile header --------------------------- */
    .vc-header-inner {
        padding: 8px 14px !important;
        gap: 8px !important;
    }

    .vc-header-left {
        display: contents !important;
    }

    .vc-header-left > .vc-icon-btn {
        order: 1;
        width: 38px !important;
        height: 38px !important;
    }

    /* Account lives in the drawer on phones (see .vc-mobile-account). */
    .vc-header-left > .vc-header-cta,
    .vc-header-left > .erbil-user-menu-wrap {
        display: none !important;
    }

    .vc-header-center {
        order: 5;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .vc-search {
        height: 38px !important;
        min-height: 38px !important;
        max-width: 100% !important;
    }

    .vc-logo {
        font-size: 15px !important;
    }

    .vc-logo-mark {
        width: 36px !important;
        height: 36px !important;
    }

    /* --- 3. Drawer account CTA -------------------------------------- */
    .vc-mobile-account {
        display: block;
        margin: 2px 0 18px;
    }

    .vc-mobile-account-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        padding: 10px 16px;
        border-radius: 12px;
        background: linear-gradient(135deg, #ec407a, #d81b60);
        color: #fff;
        font-size: 14px;
        font-weight: 800;
        text-decoration: none;
        box-sizing: border-box;
        box-shadow: 0 8px 20px rgba(236, 64, 122, 0.24);
    }

    .vc-mobile-account-btn:hover,
    .vc-mobile-account-btn:focus {
        color: #fff;
    }

    .vc-mobile-account-btn svg {
        flex: 0 0 auto;
    }

    /* --- 4. Product topic nav clears the 101px sticky header --------- */
    html body.single-product .erbil-topic-nav-bar {
        top: 101px !important;
    }

    html body.single-product .erbil-topic-section {
        scroll-margin-top: 165px !important;
    }

    /* --- 5. Hero heading hierarchy ----------------------------------
       `html body` raises specificity above css/slider.css, which loads
       after this file and also uses !important. */
    html body .erbil-slide-title {
        font-size: 26px !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 480px) {
    html body .erbil-slide-title {
        font-size: 24px !important;
    }
}

/* --- 6. Sale flash: beat WooCommerce's `.woocommerce span.onsale` --- */
html body .erbil-sp-gallery span.onsale {
    background: #ec407a !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    top: 14px !important;
    right: 14px !important;
    box-shadow: 0 6px 16px rgba(236, 64, 122, 0.28) !important;
}

/* --- 7. Old prices: secondary but readable ------------------------- */
html body .erbil-pcard-price .price del {
    color: #8a8a9e !important;
}

html body.single-product .erbil-sp-buy-box .price del {
    color: #8a8a9e !important;
}

html body.single-product .erbil-mobile-buy-price .price del {
    color: #9a9aa8 !important;
}

/* --- 8. Brand-rose shimmer on category cards (was purple) ---------- */
.vc-category-card::before {
    background-image: linear-gradient(90deg, #ff9ab8, #ec407a, #d81b60, #ec407a, #ff9ab8) !important;
}

/* --- 9. Accessible small rose links -------------------------------- */
.erbil-lux-link {
    color: #d81b60;
}

.erbil-lux-link:hover {
    color: #ad1457;
}

/* --- 10. Footer: drop the duplicated brand name ---------------------
   The logo already renders "اربیل اورجینال"; the <h3> below repeats it. */
.footer-col-brand:has(.footer-brand-logo .footer-brand-name) .footer-brand-title {
    display: none;
}

/* --- 11. Bento promos on phones: let the photography lead ---------- */
@media (max-width: 576px) {
    .erbil-bento-card {
        padding: 24px 20px !important;
    }

    .erbil-bento-visual {
        width: 190px !important;
        height: 150px !important;
    }

    .erbil-bento-frame:first-child {
        width: 105px !important;
        height: 105px !important;
    }

    .erbil-bento-frame:nth-child(2) {
        width: 92px !important;
        height: 92px !important;
    }
}

/* --- 12. Visible keyboard focus (accessibility) -------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #d81b60;
    outline-offset: 2px;
}