/*
Theme Name: DÂR - Palestinian Heritage Center (مركز التراث الفلسطيني - دار)
Theme URI: https://dar.org.tr
Author: TaraTech
Author URI: https://tarazigrup.com/taratech
Description: Custom WordPress & WooCommerce Theme for Filistin Miras Merkezi – DÂR (مركز التراث الفلسطيني - دار). Features authentic Palestinian Tatreez visual motifs, multilingual URL routing & browser detection (Turkish, Arabic, English), and multi-currency integration (TRY, USD, EUR).
Version: 1.1.0
Text Domain: dar-theme
Domain Path: /languages
Requires at least: 6.0
Tested up to: 6.6
WC requires at least: 7.0
WC tested up to: 9.0
*/

/* ==========================================================================
   1. FONT FACES (Fresco Arabic, Thmanyah Sans, Gotham)
   ========================================================================== */

@font-face {
    font-family: 'Fresco Arabic';
    src: url('assets/fonts/Fresco-Arabic-Regular.otf') format('opentype'),
         url('assets/fonts/Fresco Arabic Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fresco Arabic';
    src: url('assets/fonts/Fresco-Arabic-Bold.otf') format('opentype'),
         url('assets/fonts/Fresco Arabic Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Thmanyah Sans';
    src: url('assets/fonts/thmanyahsans-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Thmanyah Sans';
    src: url('assets/fonts/thmanyahsans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Thmanyah Sans';
    src: url('assets/fonts/thmanyahsans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Thmanyah Sans';
    src: url('assets/fonts/thmanyahsans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Thmanyah Serif Display';
    src: url('assets/fonts/thmanyahserifdisplay-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Gotham Font Family (from F:\مواقع\dar\fonts\gotham: Light 300, Book/Regular 400 for paragraphs, Medium 500, Bold 700, Black 800) */
@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-Light.otf') format('opentype'),
         url('assets/fonts/Gotham Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-Book.otf') format('opentype'),
         url('assets/fonts/Gotham-Regular.otf') format('opentype'),
         url('assets/fonts/Gotham Book.otf') format('opentype'),
         url('assets/fonts/Gotham Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-Medium.otf') format('opentype'),
         url('assets/fonts/Gotham Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-Bold.otf') format('opentype'),
         url('assets/fonts/Gotham Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-Black.otf') format('opentype'),
         url('assets/fonts/Gotham Black.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   2. DESIGN TOKENS & BRAND COLORS
   ========================================================================== */

:root {
    /* Core Brand Palette from colors.jpeg */
    --dar-olive: #374639;
    --dar-olive-dark: #253027;
    --dar-olive-light: #4A5D4D;
    --dar-terracotta: #B25426;
    --dar-terracotta-dark: #8F4019;
    --dar-terracotta-light: #CC6B3B;
    --dar-cream: #F7EDDF;
    --dar-cream-dark: #EADBC6;
    --dar-cream-light: #FCF8F2;
    --dar-gold-accent: #C89D66;

    /* Typography by Language (Default: Turkish / English -> Gotham) */
    --font-heading: 'Gotham', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Gotham', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Layout & Transitions */
    --container-max: 1340px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --shadow-soft: 0 12px 32px rgba(55, 70, 57, 0.08);
    --shadow-hover: 0 18px 42px rgba(55, 70, 57, 0.16);
    --transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Arabic Language Typography Override */
html[lang="ar"],
body.lang-ar,
[dir="rtl"] {
    --font-heading: 'Fresco Arabic', 'Thmanyah Serif Display', serif;
    --font-body: 'Thmanyah Sans', sans-serif;
}

/* ==========================================================================
   3. RESET & GLOBAL BASE
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

section[id] {
    scroll-margin-top: 90px;
}

body {
    background-color: var(--dar-cream);
    color: var(--dar-olive);
    font-family: var(--font-body);
    font-weight: 400; /* Uses Gotham Book / Regular 400, never Medium */
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

button,
input,
select,
textarea,
optgroup {
    font-family: var(--font-body);
    font-size: inherit;
    line-height: inherit;
}

button {
    font-family: var(--font-body);
    cursor: pointer;
}

p, li, span, input, textarea, select, button {
    font-weight: 400; /* Gotham Book / Regular */
}

.offcanvas-nav-link,
.offcanvas-theme-text,
.theme-toggle-text,
.dar-theme-toggle-btn {
    font-family: var(--font-body) !important;
}

p {
    font-weight: 400;
    line-height: 1.75;
}

/* ==========================================================================
   WordPress Admin Bar Isolation (Fix for Dashicons and Font Family Leak)
   ========================================================================== */
#wpadminbar,
#wpadminbar * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

#wpadminbar .ab-icon,
#wpadminbar .ab-icon::before,
#wpadminbar .ab-item::before,
#wpadminbar .dashicons,
#wpadminbar .dashicons-before::before {
    font-family: dashicons !important;
    display: inline-block !important;
}

/* ==========================================================================
   Global Font Awesome Icons Protection
   Guarantees no font or weight overrides break Font Awesome glyphs
   ========================================================================== */
.fa-solid, .fas {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
}

.fa-regular, .far {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

.fa-brands, .fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.25;
    color: var(--dar-olive);
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 {
    line-height: 1.4;
    letter-spacing: 0;
}

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

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

ul {
    list-style: none;
}

.dar-container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ==========================================================================
   4. PALESTINIAN TATREEZ MOTIFS & DIVIDERS (نقوش الثوب الفلسطيني)
   ========================================================================== */

/* Horizontal Cross-Stitch Tatreez Divider Strip */
.tatreez-divider {
    width: 100%;
    height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23B25426' d='M24 0h8v4h-8V0zm-4 4h4v4h-4V4zm12 0h4v4h-4V4zm-16 4h4v4h-4V8zm20 0h4v4h-4V8zM12 12h4v4h-4v-4zm28 0h4v4h-4v-4zM16 16h4v4h-4v-4zm20 0h4v4h-4v-4zm-16 4h4v4h-4v-4zm12 0h4v4h-4v-4zm-8 4h8v4h-8v-4z'/%3E%3Cpath fill='%23374639' d='M26 10h4v8h-4v-8zm-2 2h8v4h-8v-4zM0 12h4v4H0v-4zm52 0h4v4h-4v-4zM4 8h4v4H4V8zm44 0h4v4h-4V8zM4 16h4v4H4v-4zm44 0h4v4h-4v-4z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: center;
    margin: 0;
    opacity: 0.9;
}

.tatreez-divider.divider-light {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23F7EDDF' d='M24 0h8v4h-8V0zm-4 4h4v4h-4V4zm12 0h4v4h-4V4zm-16 4h4v4h-4V8zm20 0h4v4h-4V8zM12 12h4v4h-4v-4zm28 0h4v4h-4v-4zM16 16h4v4h-4v-4zm20 0h4v4h-4v-4zm-16 4h4v4h-4v-4zm12 0h4v4h-4v-4zm-8 4h8v4h-8v-4z'/%3E%3Cpath fill='%23B25426' d='M26 10h4v8h-4v-8zm-2 2h8v4h-8v-4zM0 12h4v4H0v-4zm52 0h4v4h-4v-4z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Section Heading (Requirement #7: Removed max-width) */
.section-header {
    text-align: center;
    margin: 0 auto 56px;
    position: relative;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--dar-terracotta);
    font-weight: 700;
    margin-bottom: 12px;
}

html[lang="ar"] .section-eyebrow,
[dir="rtl"] .section-eyebrow {
    letter-spacing: 0;
    font-size: 1rem;
}

.section-title {
    font-size: clamp(1.65rem, 2.8vw, 2.25rem);
    color: var(--dar-olive);
    margin-bottom: 14px;
    position: relative;
}

.section-desc {
    font-size: 0.95rem;
    color: var(--dar-olive-light);
    line-height: 1.75;
}

/* ==========================================================================
   5. TOP BAR & DROPDOWN / POPUP SWITCHERS (Language & Currency)
   ========================================================================== */

.dar-topbar {
    background-color: var(--dar-olive-dark);
    color: var(--dar-cream);
    font-size: 0.84rem;
    padding: 8px 0;
    border-bottom: 1px solid rgba(247, 237, 223, 0.12);
    position: relative;
    z-index: 105;
}

.dar-topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.topbar-slogan {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.topbar-slogan i {
    color: var(--dar-terracotta);
    font-size: 0.9rem;
}

.topbar-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Desktop Dropdowns for Language & Currency */
.dar-dropdown {
    position: relative;
}

.dar-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(247, 237, 223, 0.08);
    border: 1px solid rgba(247, 237, 223, 0.22);
    color: var(--dar-cream);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: var(--transition);
}

.dar-dropdown-toggle:hover,
.dar-dropdown.open .dar-dropdown-toggle {
    background: rgba(178, 84, 38, 0.28);
    border-color: var(--dar-terracotta-light);
}

.dar-dropdown-toggle i.icon-main {
    color: var(--dar-terracotta-light);
    font-size: 0.85rem;
}

.dar-dropdown-toggle i.icon-caret {
    font-size: 0.7rem;
    opacity: 0.8;
    transition: transform 0.25s ease;
}

.dar-dropdown.open .dar-dropdown-toggle i.icon-caret {
    transform: rotate(180deg);
}

.dar-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 175px;
    background-color: var(--dar-cream-light);
    color: var(--dar-olive);
    border: 1px solid rgba(178, 84, 38, 0.35);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-hover);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.25s ease;
    z-index: 200;
}

.dar-dropdown.open .dar-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dar-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--dar-olive) !important;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: start;
    text-decoration: none !important;
    transition: var(--transition);
}

.dar-dropdown-item span,
a.dar-dropdown-item span,
button.dar-dropdown-item span,
.dar-topbar .dar-dropdown-menu span {
    color: var(--dar-olive) !important;
}

.dar-dropdown-item:hover {
    background-color: rgba(178, 84, 38, 0.1);
    color: var(--dar-terracotta) !important;
}

.dar-dropdown-item:hover span,
a.dar-dropdown-item:hover span,
button.dar-dropdown-item:hover span,
.dar-topbar .dar-dropdown-item:hover span {
    color: var(--dar-terracotta) !important;
}

.dar-dropdown-item.active {
    background-color: var(--dar-olive) !important;
    color: #ffffff !important;
}

.dar-dropdown-item.active span,
a.dar-dropdown-item.active span,
button.dar-dropdown-item.active span,
.dar-topbar .dar-dropdown-item.active span {
    color: #ffffff !important;
}

.dar-dropdown-item i.check-icon {
    opacity: 0;
    font-size: 0.75rem;
    color: var(--dar-terracotta-light);
}

.dar-dropdown-item.active i.check-icon {
    opacity: 1;
}

/* Mobile Trigger Button for Language/Currency Popup Modal */
.mobile-prefs-trigger {
    display: none;
    align-items: center;
    gap: 8px;
    background: rgba(247, 237, 223, 0.1);
    border: 1px solid rgba(247, 237, 223, 0.25);
    color: #f7eddf;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    cursor: pointer;
}

.mobile-prefs-trigger span {
    color: #f7eddf;
}

.mobile-prefs-trigger i.fa-globe,
.mobile-prefs-trigger i.fa-coins,
.mobile-prefs-trigger > i:first-child {
    color: var(--dar-terracotta-light) !important;
}

.mobile-prefs-trigger i.fa-chevron-down {
    color: rgba(247, 237, 223, 0.75) !important;
}

/* ==========================================================================
   6. MAIN STICKY HEADER & NAVIGATION WITH SUBMENU
   ========================================================================== */

.dar-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    background-color: rgba(247, 237, 223, 0.96);
    backdrop-filter: blur(12px);
    border-bottom: 2px solid rgba(178, 84, 38, 0.18);
    transition: all 0.35s ease;
}

.dar-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 94px;
    gap: 24px;
    transition: height 0.35s ease;
}

.dar-logo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dar-logo img {
    height: 70px;
    width: auto;
    object-fit: contain;
    transition: height 0.35s ease, transform 0.35s ease;
}

/* Requirement #4: Shrink logo & header height when sticky/scrolled */
.dar-header.is-sticky {
    box-shadow: 0 8px 28px rgba(37, 48, 39, 0.12);
    background-color: rgba(247, 237, 223, 0.99);
}

.dar-header.is-sticky .dar-header-inner {
    height: 68px;
}

.dar-header.is-sticky .dar-logo img {
    height: 46px;
}

/* Navigation Menu & Shop Submenu (Requirement #5) */
.dar-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.dar-nav-list {
    display: flex;
    align-items: center;
    gap: 28px;
}

.dar-nav-item {
    position: relative;
}

.dar-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.96rem;
    font-weight: 500;
    color: var(--dar-olive);
    position: relative;
    padding: 10px 0;
}

.dar-nav-link,
.dar-nav-link span {
    font-weight: 500 !important;
}

.dar-nav-link i.submenu-arrow,
.submenu-arrow {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-size: 0.72rem !important;
    color: var(--dar-terracotta) !important;
    transition: transform 0.3s ease;
    display: inline-block !important;
}

.dar-nav-item.has-submenu:hover .dar-nav-link i.submenu-arrow {
    transform: rotate(180deg);
}

.dar-nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    inset-inline-start: 0;
    width: 0;
    height: 2px;
    background-color: var(--dar-terracotta);
    transition: var(--transition);
}

.dar-nav-link:hover,
.dar-nav-link.active {
    color: var(--dar-terracotta);
}

.dar-nav-link.active {
    font-weight: 700 !important;
}

.dar-nav-link.active span {
    font-weight: 700 !important;
}

.dar-nav-link:hover::after,
.dar-nav-link.active::after {
    width: 100%;
}

/* WooCommerce Categories Submenu Dropdown */
.dar-submenu {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 260px;
    background-color: var(--dar-cream-light);
    border: 1px solid rgba(178, 84, 38, 0.3);
    border-top: 3px solid var(--dar-terracotta);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-hover);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all 0.28s ease;
    z-index: 120;
}

.dar-nav-item.has-submenu:hover .dar-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dar-submenu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dar-olive);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.dar-submenu li a i {
    color: var(--dar-terracotta);
    width: 18px;
    text-align: center;
    font-size: 0.88rem;
}

.dar-submenu li a:hover {
    background-color: rgba(178, 84, 38, 0.1);
    color: var(--dar-terracotta);
    padding-inline-start: 18px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cart-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--dar-olive);
    color: var(--dar-cream);
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid var(--dar-olive);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.cart-label-text,
.cart-trigger span,
.header-account-btn span {
    font-family: inherit;
}

.cart-trigger i {
    color: var(--dar-terracotta-light);
    font-size: 1rem;
    transition: var(--transition);
}

.cart-trigger:hover {
    background-color: var(--dar-terracotta);
    border-color: var(--dar-terracotta);
}

.cart-trigger:hover i {
    color: var(--dar-cream);
}

.cart-count {
    background-color: var(--dar-terracotta);
    color: var(--dar-cream);
    font-size: 0.75rem;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--dar-cream-light);
    border: 1.5px solid var(--dar-olive);
    color: var(--dar-olive);
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition);
}

.mobile-menu-toggle:hover {
    background: var(--dar-olive);
    color: var(--dar-cream);
}

/* ==========================================================================
   7. MOBILE OFF-CANVAS MENU & POPUP MODAL (Requirements #1 & #2)
   ========================================================================== */

.dar-offcanvas-overlay {
    position: fixed;
    inset: 0;
    background: rgba(25, 33, 27, 0.65);
    backdrop-filter: blur(4px);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s ease;
}

.dar-offcanvas-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Off-Canvas Menu Drawer:
   - Foreign Languages (LTR / TR / EN): Opens on RIGHT side of screen
   - Arabic Language (RTL / AR): Opens on LEFT side of screen */
.dar-offcanvas {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0 !important;
    left: auto !important;
    width: 320px;
    max-width: 86vw;
    background-color: var(--dar-cream);
    color: var(--dar-olive);
    z-index: 999;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
    transform: translateX(105%);
    transition: transform 0.38s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-left: 3px solid var(--dar-terracotta);
    border-right: none;
}

html[lang="ar"] .dar-offcanvas,
html[dir="rtl"] .dar-offcanvas,
body.rtl .dar-offcanvas,
body.lang-ar .dar-offcanvas {
    right: auto !important;
    left: 0 !important;
    transform: translateX(-105%);
    border-left: none;
    border-right: 3px solid var(--dar-terracotta);
}

.dar-offcanvas.open {
    transform: translateX(0) !important;
}

.offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    background-color: var(--dar-cream-light);
    border-bottom: 1px solid rgba(178, 84, 38, 0.2);
}

.offcanvas-header img {
    height: 48px;
    width: auto;
}

.offcanvas-close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(55, 70, 57, 0.25);
    background: transparent;
    color: var(--dar-olive);
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.offcanvas-close:hover {
    background-color: var(--dar-terracotta);
    color: var(--dar-cream);
    border-color: var(--dar-terracotta);
}

.offcanvas-body {
    padding: 20px 22px;
    overflow-y: auto;
    flex-grow: 1;
}

.offcanvas-nav li {
    border-bottom: 1px solid rgba(55, 70, 57, 0.1);
}

.offcanvas-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 4px;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--dar-olive);
}

.offcanvas-nav-link.active,
.offcanvas-nav-link.active > span,
.offcanvas-nav-link.active > a {
    color: var(--dar-terracotta) !important;
}

.offcanvas-nav-link i {
    color: var(--dar-terracotta);
}

.offcanvas-submenu-toggle {
    background: rgba(178, 84, 38, 0.1);
    border: none;
    color: var(--dar-terracotta);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.offcanvas-submenu {
    display: none;
    padding: 6px 0 14px 14px;
}

html[lang="ar"] .offcanvas-submenu,
[dir="rtl"] .offcanvas-submenu {
    padding: 6px 14px 14px 0;
}

.offcanvas-submenu.open {
    display: block;
}

.offcanvas-submenu li {
    border-bottom: none;
}

.offcanvas-submenu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--dar-olive-light);
}

.offcanvas-submenu a i {
    color: var(--dar-terracotta);
    font-size: 0.85rem;
}

/* Requirement #6: Social Media Icons inside Off-Canvas Footer */
.offcanvas-footer {
    padding: 18px 22px;
    background-color: var(--dar-olive-dark);
    color: var(--dar-cream);
    text-align: center;
    border-top: 2px solid var(--dar-terracotta);
}

.offcanvas-social-title {
    display: block;
    font-size: 0.78rem;
    color: rgba(247, 237, 223, 0.7);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.offcanvas-social-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.offcanvas-social-list a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(247, 237, 223, 0.1);
    border: 1px solid rgba(178, 84, 38, 0.45);
    color: var(--dar-cream);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    transition: var(--transition);
}

.offcanvas-social-list a:hover {
    background-color: var(--dar-terracotta);
    border-color: var(--dar-terracotta);
    color: var(--dar-cream);
    transform: translateY(-2px);
}

/* ==========================================================================
   7B. OFF-CANVAS MINI CART DRAWER (Requirement #4)
   ========================================================================== */

.dar-cart-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(25, 33, 27, 0.65);
    backdrop-filter: blur(4px);
    z-index: 1010;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s ease;
}

.dar-cart-drawer-overlay.open {
    opacity: 1;
    visibility: visible;
}

.dar-cart-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0 !important;
    left: auto !important;
    width: 390px;
    max-width: 92vw;
    background-color: var(--dar-cream-light);
    color: var(--dar-olive);
    z-index: 1011;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.4);
    transform: translateX(105%);
    transition: transform 0.38s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-left: 3px solid var(--dar-terracotta);
}

html[lang="ar"] .dar-cart-drawer,
html[dir="rtl"] .dar-cart-drawer,
body.rtl .dar-cart-drawer,
body.lang-ar .dar-cart-drawer {
    right: auto !important;
    left: 0 !important;
    transform: translateX(-105%);
    border-left: none;
    border-right: 3px solid var(--dar-terracotta);
}

.dar-cart-drawer.open {
    transform: translateX(0) !important;
}

.cart-drawer-header {
    padding: 20px 24px;
    background-color: var(--dar-olive);
    color: var(--dar-cream);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--dar-terracotta);
}

.cart-drawer-header h3 {
    color: var(--dar-cream);
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.cart-drawer-header h3 i {
    color: var(--dar-terracotta-light);
}

.cart-drawer-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(247, 237, 223, 0.25);
    background: transparent;
    color: var(--dar-cream);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.cart-drawer-close:hover {
    background-color: var(--dar-terracotta);
    border-color: var(--dar-terracotta);
}

.cart-drawer-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex-grow: 1;
}

.cart-drawer-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cart-drawer-item {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 12px;
    align-items: center;
    background-color: var(--dar-cream);
    padding: 12px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(55, 70, 57, 0.12);
    transition: opacity 0.2s ease;
}

.cart-drawer-img-link {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.cart-drawer-img-link img,
.cart-drawer-item img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
    transition: transform 0.25s ease;
}

.cart-drawer-img-link:hover img {
    transform: scale(1.06);
}

.cart-item-info h4 {
    font-size: 0.92rem;
    line-height: 1.35;
    margin-bottom: 4px;
    color: var(--dar-olive);
}

.cart-drawer-title-link {
    color: var(--dar-olive);
    text-decoration: none;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-drawer-title-link:hover {
    color: var(--dar-terracotta);
}

.cart-drawer-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    gap: 8px;
}

.cart-drawer-qty-ctrl {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(55, 70, 57, 0.25);
    border-radius: 4px;
    background: #ffffff;
    overflow: hidden;
}

.cart-drawer-qty-btn {
    background: transparent;
    border: none;
    width: 24px;
    height: 24px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dar-olive);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cart-drawer-qty-btn:hover {
    background-color: var(--dar-cream-dark);
    color: var(--dar-terracotta);
}

.cart-drawer-qty-val {
    min-width: 24px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--dar-olive);
}

.cart-drawer-line-price {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--dar-terracotta);
}

.cart-item-meta {
    font-size: 0.85rem;
    color: var(--dar-terracotta);
    font-weight: 700;
}

.cart-item-remove {
    background: none;
    border: none;
    color: rgba(55, 70, 57, 0.45);
    cursor: pointer;
    font-size: 1rem;
    padding: 6px;
    transition: var(--transition);
}

.cart-item-remove:hover {
    color: #c0392b;
}

.cart-drawer-empty {
    text-align: center;
    padding: 48px 16px;
    color: var(--dar-olive-light);
}

.cart-drawer-empty i {
    font-size: 2.8rem;
    color: var(--dar-terracotta);
    opacity: 0.5;
    margin-bottom: 14px;
    display: block;
}

.cart-drawer-footer {
    padding: 20px 24px;
    background-color: var(--dar-cream);
    border-top: 1px solid rgba(55, 70, 57, 0.15);
}

.cart-subtotal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dar-olive);
    margin-bottom: 16px;
}

.cart-subtotal-amount {
    color: var(--dar-terracotta);
    font-size: 1.25rem;
}

.cart-drawer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.btn-cart-view,
.btn-cart-checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.86rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    white-space: nowrap !important;
    text-decoration: none;
    box-sizing: border-box;
    width: auto;
    transition: all 0.3s ease, var(--transition);
}

.cart-drawer-actions .btn-cart-view,
.cart-drawer-actions .btn-cart-checkout {
    width: 100%;
}

.btn-cart-view {
    background-color: transparent;
    border: 1.5px solid var(--dar-olive);
    color: var(--dar-olive);
    transition: all 0.3s ease, var(--transition);
}

.btn-cart-view i,
.btn-cart-view span {
    color: inherit;
    transition: all 0.3s ease, var(--transition);
}

.btn-cart-view:hover {
    background-color: var(--dar-olive);
    border-color: var(--dar-olive);
    color: var(--dar-cream);
}

.btn-cart-view:hover i,
.btn-cart-view:hover span {
    color: var(--dar-cream);
}

.btn-cart-checkout {
    background-color: var(--dar-terracotta);
    border: 1.5px solid var(--dar-terracotta);
    color: #f7eddf;
    transition: all 0.3s ease, var(--transition);
}

.btn-cart-checkout i,
.btn-cart-checkout span {
    color: #f7eddf;
    transition: all 0.3s ease, var(--transition);
}

.btn-cart-checkout:hover {
    background-color: var(--dar-terracotta-dark);
    border-color: var(--dar-terracotta-dark);
    color: #ffffff;
}

.btn-cart-checkout:hover i,
.btn-cart-checkout:hover span {
    color: #ffffff;
}

/* Mobile Popup Modal for Language & Currency (Requirement #1) */
.dar-prefs-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(25, 33, 27, 0.72);
    backdrop-filter: blur(5px);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.dar-prefs-modal-backdrop.open {
    opacity: 1;
    visibility: visible;
}

.dar-prefs-modal {
    background-color: var(--dar-cream-light);
    color: var(--dar-olive);
    width: 100%;
    max-width: 400px;
    border-radius: var(--radius-lg);
    border: 2px solid var(--dar-terracotta);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transform: scale(0.92) translateY(16px);
    transition: all 0.3s ease;
}

.dar-prefs-modal-backdrop.open .dar-prefs-modal {
    transform: scale(1) translateY(0);
}

.prefs-modal-header {
    background-color: var(--dar-olive);
    color: var(--dar-cream);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.prefs-modal-header h3 {
    color: var(--dar-cream);
    font-size: 1.08rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.prefs-modal-header h3 i {
    color: var(--dar-terracotta-light);
}

.prefs-modal-close {
    background: rgba(247, 237, 223, 0.12);
    border: none;
    color: var(--dar-cream);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.prefs-modal-body {
    padding: 22px;
}

.prefs-group-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--dar-terracotta);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.prefs-options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 20px;
}

.prefs-options-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 4px;
}

.prefs-option-btn {
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    border: 1.5px solid rgba(55, 70, 57, 0.2);
    background-color: var(--dar-cream);
    color: var(--dar-olive);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: var(--transition);
}

.prefs-options-grid.cols-3 .prefs-option-btn {
    justify-content: center;
}

.prefs-option-btn.active {
    background-color: var(--dar-olive);
    color: var(--dar-cream);
    border-color: var(--dar-olive);
}

.prefs-option-btn.active i {
    color: var(--dar-terracotta-light);
}

/* ==========================================================================
   8. SECTION 1: HERO VIDEO SECTION (الواجهة الرئيسية)
   ========================================================================== */

.dar-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--dar-olive-dark);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--dar-cream);
    padding: 80px 0;
}

.dar-hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    object-position: center;
    z-index: 1;
    opacity: 1;
    pointer-events: none;
    background-color: var(--dar-olive-dark);
}

.dar-hero.hero-video-active {
    background-image: none !important;
}

.dar-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(circle at center, rgba(37, 48, 39, 0) 0%, rgba(37, 48, 39, 0.15) 100%);
    pointer-events: none;
}

/* Authentic Tatreez Frame Corners Inside Hero */
.hero-tatreez-corner {
    position: absolute;
    width: 110px;
    height: 110px;
    z-index: 3;
    opacity: 0.55;
    pointer-events: none;
}

.hero-tatreez-corner.tl { top: 28px; left: 28px; }
.hero-tatreez-corner.tr { top: 28px; right: 28px; transform: scaleX(-1); }
.hero-tatreez-corner.bl { bottom: 28px; left: 28px; transform: scaleY(-1); }
.hero-tatreez-corner.br { bottom: 28px; right: 28px; transform: scale(-1, -1); }

/* Requirement #7: Removed max-width from .dar-hero-content */
.dar-hero-content {
    position: relative;
    z-index: 4;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

.hero-star-logo {
    width: 118px;
    height: auto;
    margin: 0 auto 20px;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
    animation: heroFadeIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both, floatStar 6s ease-in-out 0.9s infinite;
}

@keyframes heroFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.92);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes floatStar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(178, 84, 38, 0.28);
    border: 1px solid var(--dar-terracotta-light);
    color: var(--dar-cream);
    padding: 6px 20px;
    border-radius: 30px;
    font-size: 0.92rem;
    letter-spacing: 1.5px;
    margin-bottom: 28px;
    backdrop-filter: blur(4px);
    animation: heroFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.hero-cta-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    animation: heroFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

@keyframes heroFadeUp {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

html[lang="ar"] .hero-badge,
[dir="rtl"] .hero-badge {
    letter-spacing: 0;
}

.hero-title,
.hero-title-badge,
.dar-hero-content .hero-title-badge,
html.dar-dark-mode .hero-title-badge,
html.dar-dark-mode .dar-hero-content .hero-title-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(55, 70, 57, 0.5) !important;
    border: 1.5px solid rgba(247, 237, 223, 0.35) !important;
    color: #f7eddf !important;
    padding: 10px 32px !important;
    border-radius: 50px !important;
    font-size: clamp(2rem, 4.5vw, 2.6rem) !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin-bottom: 16px !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
    animation: heroFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
    max-width: 95%;
    text-align: center;
}

.hero-invitation {
    font-size: clamp(0.96rem, 1.5vw, 1.14rem);
    color: rgba(247, 237, 223, 0.92);
    max-width: 820px;
    margin: 0 auto 30px;
    line-height: 1.75;
}

.hero-welcome-sub {
    font-size: 1.1rem;
    color: var(--dar-terracotta-light);
    font-weight: 700;
    margin-bottom: 36px;
}

.hero-cta-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--dar-terracotta);
    color: #f7eddf;
    padding: 15px 34px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    border: 2px solid var(--dar-terracotta);
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(178, 84, 38, 0.35);
    transition: var(--transition);
}

.btn-primary i,
.btn-primary span {
    color: #f7eddf;
}

.btn-primary:hover {
    background-color: var(--dar-terracotta-dark);
    border-color: var(--dar-terracotta-dark);
    color: #ffffff;
    transform: translateY(-2px);
}

.btn-primary:hover i,
.btn-primary:hover span {
    color: #ffffff;
}

.btn-outline-cream {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #374639;
    background-color: #374639;
    color: #f7eddf;
    padding: 15px 32px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
    transition: var(--transition);
}

.btn-outline-cream:hover {
    background-color: #b25426;
    color: #ffffff;
    border: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

/* ==========================================================================
   9. SECTION 2: ABOUT US (من نحن + ما نقدمه + الرؤية والرسالة والقيم)
   ========================================================================== */

/* Compact About Brief on Homepage (Two adjacent matching-size cards: Content card & Media card) */
.about-brief-wrapper {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 32px;
    align-items: stretch;
}

.about-brief-card {
    background-color: var(--dar-cream-light);
    border: 2px solid rgba(178, 84, 38, 0.28);
    border-radius: var(--radius-md);
    padding: 52px 48px;
    position: relative;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: start;
    box-sizing: border-box;
    height: 100%;
}

.about-brief-card::before,
.about-brief-card::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='48' viewBox='0 0 24 48'%3E%3Cpath fill='%23B25426' d='M0 0h8v8H0V0zm8 8h8v8H8V8zm8 8h8v8h-8v-8zM8 24h8v8H8v-8zM0 32h8v8H0v-32z'/%3E%3Cpath fill='%23374639' d='M16 0h8v8h-8V0zM0 16h8v8H0v-8zm16 16h8v8h-8v-8zM8 40h8v8H8v-8z'/%3E%3C/svg%3E");
    background-repeat: repeat-y;
    opacity: 0.85;
}

.about-brief-card::before { left: 0; }
.about-brief-card::after { right: 0; transform: scaleX(-1); }

.about-brief-content {
    position: relative;
    z-index: 2;
}

.about-brief-lead {
    font-size: 0.98rem;
    line-height: 1.78;
    color: var(--dar-olive);
    margin: 0 0 26px;
    font-weight: 400;
}

.about-brief-media {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid rgba(178, 84, 38, 0.28);
    box-shadow: var(--shadow-soft);
    display: flex;
    height: 100%;
    min-height: 400px;
    box-sizing: border-box;
}

.about-brief-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: calc(var(--radius-md) - 2px);
    transition: transform 0.5s ease;
}

.about-brief-media:hover .about-brief-img {
    transform: scale(1.03);
}

@media (max-width: 991px) {
    .about-brief-wrapper {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .about-brief-card {
        padding: 40px 30px;
        text-align: center;
    }
    .about-brief-lead {
        margin: 0 auto 24px;
    }
    .about-brief-media {
        min-height: 280px;
        max-height: 380px;
    }
}

/* ==========================================================================
   17. BESPOKE WOOCOMMERCE PAGES (Shop Archive, Single Product, Cart, Checkout, My Account)
   ========================================================================== */

.dar-page-banner {
    background-color: var(--dar-olive-dark);
    color: var(--dar-cream);
    padding: 68px 0;
    text-align: center;
    position: relative;
    border-bottom: 3px solid var(--dar-terracotta);
    overflow: hidden;
}

.dar-page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(178, 84, 38, 0.16) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}

.dar-page-banner h1 {
    color: var(--dar-cream);
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}

.dar-breadcrumbs {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: rgba(247, 237, 223, 0.78);
    position: relative;
    z-index: 2;
}

.dar-breadcrumbs a:hover {
    color: var(--dar-terracotta-light);
}

/* 17A. Bespoke Shop Archive Page (صفحة الأرشيف والمتجر) */
.dar-shop-wrapper {
    padding: 72px 0 100px;
}

.dar-shop-layout {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 36px;
    align-items: start;
}

.dar-shop-sidebar {
    background-color: var(--dar-cream-light);
    border: 2px solid rgba(178, 84, 38, 0.25);
    border-radius: var(--radius-md);
    padding: 28px 24px;
    box-shadow: var(--shadow-soft);
    position: sticky;
    top: 96px;
}

.sidebar-mobile-header,
.dar-mobile-filter-btn,
.dar-sidebar-overlay {
    display: none;
}

.sidebar-widget {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px dashed rgba(55, 70, 57, 0.18);
}

.sidebar-widget:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.sidebar-widget-title {
    font-size: 1.08rem;
    color: var(--dar-olive);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-widget-title i {
    color: var(--dar-terracotta);
}

.sidebar-cat-list li {
    margin-bottom: 10px;
}

.sidebar-cat-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--dar-olive);
    background-color: var(--dar-cream);
    border: 1px solid transparent;
}

.sidebar-cat-list a:hover,
.sidebar-cat-list a.active {
    background-color: var(--dar-olive);
    color: var(--dar-cream);
    border-color: var(--dar-terracotta);
}

.sidebar-cat-count {
    font-size: 0.76rem;
    background-color: rgba(178, 84, 38, 0.16);
    color: var(--dar-terracotta);
    padding: 2px 8px;
    border-radius: 12px;
}

.sidebar-cat-list a.active .sidebar-cat-count,
.sidebar-cat-list a:hover .sidebar-cat-count {
    background-color: var(--dar-terracotta);
    color: var(--dar-cream);
}

.dar-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background-color: var(--dar-cream-light);
    border: 1px solid rgba(178, 84, 38, 0.22);
    padding: 16px 24px;
    border-radius: var(--radius-md);
    margin-bottom: 30px;
}

.dar-shop-result-count {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--dar-olive);
}

.dar-sort-select,
.dar-shop-toolbar select.orderby {
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid rgba(55, 70, 57, 0.25);
    background-color: var(--dar-cream);
    color: var(--dar-olive);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.dar-shop-main .products-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* Custom Pagination */
.dar-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 48px;
}

.dar-page-num {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    border: 1.5px solid rgba(55, 70, 57, 0.25);
    background-color: var(--dar-cream-light);
    color: var(--dar-olive);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.92rem;
}

.dar-page-num.active,
.dar-page-num:hover {
    background-color: var(--dar-terracotta);
    border-color: var(--dar-terracotta);
    color: var(--dar-cream);
}

/* Empty Shop / Category Notice */
.dar-empty-shop-notice {
    text-align: center;
    padding: 60px 24px;
    background-color: #ffffff;
    border-radius: var(--radius-md);
    border: 1px solid var(--dar-cream-dark);
    box-shadow: var(--shadow-soft);
    margin: 20px 0 40px;
}

.dar-empty-shop-notice i.fa-box-open {
    font-size: 3rem;
    color: var(--dar-terracotta);
    margin-bottom: 16px;
    display: block;
}

.dar-empty-shop-notice h3 {
    color: var(--dar-olive);
    font-size: 1.35rem;
    margin-bottom: 10px;
    font-family: var(--font-heading);
}

.dar-empty-shop-notice p {
    color: var(--dar-olive-light);
    font-size: 0.95rem;
    margin-bottom: 24px;
    line-height: 1.6;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

.dar-empty-shop-notice .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* 17B. Bespoke Single Product Page (صفحة المنتج) */
.dar-single-product {
    padding: 72px 0 100px;
}

.single-product-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 52px;
    align-items: start;
    margin-bottom: 72px;
}

.single-product-gallery {
    background-color: var(--dar-cream-light);
    border: 2px solid rgba(178, 84, 38, 0.28);
    border-radius: var(--radius-md);
    padding: 18px;
    box-shadow: var(--shadow-soft);
}

.gallery-main-viewport {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    background-color: var(--dar-cream-dark);
    width: 100%;
    height: 500px;
}

.single-product-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

/* Gallery Slider Navigation Arrows (Requirement #4) */
.gallery-arrow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(55, 70, 57, 0.85);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(247, 237, 223, 0.3);
    color: var(--dar-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    z-index: 6;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.gallery-arrow-btn:hover {
    background: var(--dar-terracotta);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

.gallery-arrow-btn.prev {
    left: 14px;
}

.gallery-arrow-btn.next {
    right: 14px;
}

/* Slide Transition Animations (Requirement #4) */
.dar-slide-next {
    animation: darSlideInRight 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.dar-slide-prev {
    animation: darSlideInLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.dar-slide-fade {
    animation: darSlideFade 0.35s ease forwards;
}

@keyframes darSlideInRight {
    from {
        opacity: 0.3;
        transform: translateX(45px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes darSlideInLeft {
    from {
        opacity: 0.3;
        transform: translateX(-45px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes darSlideFade {
    from {
        opacity: 0.3;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Product Video Player Wrapper (Requirement #2) */
.single-product-video-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    background: #000;
}

.single-product-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.single-product-video-iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Gallery Thumbnails (Images & Video) */
.single-product-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.gallery-thumb-item {
    position: relative;
    height: 92px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition);
    background: var(--dar-cream-dark);
}

.gallery-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-thumb-item.active,
.gallery-thumb-item:hover {
    border-color: var(--dar-terracotta);
}

.video-thumb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(37, 48, 39, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    transition: var(--transition);
}

.gallery-thumb-item:hover .video-thumb-overlay {
    background: rgba(178, 84, 38, 0.7);
    transform: scale(1.05);
}

.video-thumb-tag {
    position: absolute;
    bottom: 4px;
    right: 4px;
    left: 4px;
    background: rgba(55, 70, 57, 0.9);
    color: var(--dar-cream);
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
    padding: 2px 4px;
    border-radius: 4px;
}

.single-product-summary .product-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dar-terracotta);
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.single-product-summary h1 {
    font-size: clamp(1.85rem, 3vw, 2.55rem);
    margin-bottom: 14px;
}

.single-product-price {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.single-product-price del.dar-old-price {
    font-size: 1.25rem;
    font-weight: 400;
    color: rgba(55, 70, 57, 0.45);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(178, 84, 38, 0.6);
}

.single-product-price ins.dar-current-price,
.single-product-price .dar-current-price {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--dar-terracotta);
    text-decoration: none;
}

.single-product-desc {
    font-size: 1.02rem;
    color: var(--dar-olive-light);
    line-height: 1.85;
    margin-bottom: 26px;
}

.piece-story-box {
    background-color: var(--dar-cream-light);
    border: 1px solid rgba(178, 84, 38, 0.32);
    border-inline-start: 4px solid var(--dar-terracotta);
    padding: 22px 24px;
    border-radius: var(--radius-md);
    margin-bottom: 28px;
}

.piece-story-box h4 {
    color: var(--dar-terracotta);
    font-size: 1.05rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.single-purchase-row {
    display: flex;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 6px;
}

/* BEDEN (Size) Attribute Selector */
.single-product-beden-wrapper {
    margin: 18px 0 22px;
    padding: 14px 0;
    border-top: 1px dashed rgba(55, 70, 57, 0.16);
    border-bottom: 1px dashed rgba(55, 70, 57, 0.16);
}

.beden-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--dar-olive);
    margin-bottom: 12px;
}

.beden-label strong {
    color: var(--dar-terracotta);
    font-size: 0.96rem;
    font-weight: 800;
}

.dar-beden-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dar-beden-btn {
    min-width: 46px;
    height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dar-cream-light);
    border: 1.5px solid rgba(55, 70, 57, 0.22);
    border-radius: var(--radius-sm);
    color: var(--dar-olive);
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dar-beden-btn:hover {
    border-color: var(--dar-terracotta);
    color: var(--dar-terracotta);
    background-color: #fff;
    transform: translateY(-1px);
}

.dar-beden-btn.active {
    background-color: var(--dar-terracotta);
    border-color: var(--dar-terracotta);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(178, 84, 38, 0.28);
}

.beden-required-alert {
    animation: darShake 0.4s ease-in-out;
}

.beden-required-alert .dar-beden-btn {
    border-color: #d9534f !important;
}

.beden-error-message {
    color: #c9302c;
    font-size: 0.86rem;
    font-weight: 700;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

@keyframes darShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* Toast Notification for Alerts (Beden selection warning, etc.) */
.dar-toast-notification {
    position: fixed;
    top: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(-80px);
    background-color: var(--dar-terracotta);
    color: #ffffff;
    padding: 14px 26px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    z-index: 999999;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

.dar-toast-notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.dar-toast-notification i {
    font-size: 1.2rem;
}

/* Single Product Minimal Underline Quantity Selector (Exactly matching user image) */
.single-purchase-row .qty-selector {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 124px !important;
    min-width: 124px !important;
    height: 52px !important;
    min-height: 52px !important;
    border: none !important;
    border-bottom: 2px solid rgba(55, 70, 57, 0.28) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 4px 4px !important;
    box-sizing: border-box !important;
}

.single-purchase-row .qty-selector .qty-btn {
    width: 32px !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    color: #111111 !important;
    font-size: 1.55rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: color 0.15s ease, transform 0.15s ease !important;
}

.single-purchase-row .qty-selector .qty-btn:hover {
    color: var(--dar-terracotta) !important;
    background: transparent !important;
    transform: scale(1.2) !important;
}

.single-purchase-row .qty-selector .qty-input {
    width: 44px !important;
    height: 100% !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    font-family: var(--font-heading) !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #111111 !important;
    padding: 0 !important;
    outline: none !important;
    -moz-appearance: textfield !important;
}

.single-purchase-row .qty-selector .qty-input::-webkit-outer-spin-button,
.single-purchase-row .qty-selector .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* WhatsApp Order Button */
.btn-whatsapp-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 34px;
    background-color: #25D366;
    color: #ffffff !important;
    border: 2px solid #20ba5a;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.24);
    margin-top: 10px;
    box-sizing: border-box;
}

.btn-whatsapp-order:hover {
    background-color: #1ebd5a;
    border-color: #1aa64e;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
    color: #ffffff !important;
}

.btn-whatsapp-order i {
    font-size: 1.25rem;
}

.qty-selector {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--dar-olive);
    border-radius: var(--radius-sm);
    background-color: var(--dar-cream-light);
    height: 52px;
    box-sizing: border-box;
}

.qty-btn {
    width: 42px;
    height: 100%;
    background: none;
    border: none;
    color: var(--dar-olive);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-btn:hover {
    background-color: var(--dar-terracotta);
    color: var(--dar-cream);
}

.qty-input {
    width: 52px;
    height: 100%;
    text-align: center;
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--dar-olive);
}

/* Single Product Page Add to Cart Button (Taller, Prominent & Matching Height) */
.single-purchase-row .add-to-cart-btn {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 32px !important;
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    border-radius: var(--radius-sm) !important;
    box-sizing: border-box !important;
    flex-grow: 1 !important;
    background-color: var(--dar-terracotta) !important;
    border: 2px solid var(--dar-terracotta) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 12px rgba(178, 84, 38, 0.3) !important;
}

.single-purchase-row .add-to-cart-btn span,
.single-purchase-row .add-to-cart-btn i {
    color: #ffffff !important;
}

.single-purchase-row .add-to-cart-btn:hover {
    background-color: var(--dar-terracotta-dark) !important;
    border-color: var(--dar-terracotta-dark) !important;
    color: #ffffff !important;
}

.product-trust-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-top: 22px;
    border-top: 1px dashed rgba(55, 70, 57, 0.2);
}

.trust-badge-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dar-olive);
    background-color: var(--dar-cream-light);
    padding: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(55, 70, 57, 0.1);
}

.trust-badge-item i {
    color: var(--dar-terracotta);
    font-size: 1.1rem;
}

/* Full Product Description Section in Single Product Page (Ürün Açıklaması) */
.dar-product-description-section {
    margin-top: 60px;
    padding: 44px 40px;
    background-color: var(--dar-cream-light);
    border: 2px solid rgba(178, 84, 38, 0.25);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    position: relative;
}

.product-description-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--dar-cream-dark);
}

.product-description-header .section-title {
    font-size: 1.45rem;
    color: var(--dar-olive);
    margin-bottom: 0;
}

.product-description-body {
    font-size: 0.98rem;
    line-height: 1.8;
    color: var(--dar-olive);
}

.product-description-body p {
    margin-bottom: 16px;
}

.product-description-body p:last-child {
    margin-bottom: 0;
}

/* Related Products Section in Single Product Page (İlgili Ürünler) */
.dar-related-products-section {
    margin-top: 72px;
    padding-top: 56px;
    border-top: 2px dashed rgba(178, 84, 38, 0.25);
    position: relative;
}

.related-products-header {
    text-align: center;
    margin-bottom: 40px;
}

.related-products-header .section-title {
    font-size: 1.55rem;
    color: var(--dar-olive);
    margin-bottom: 0;
}

/* 17C. Bespoke Cart Page (صفحة السلة المخصصة بالكامل) */
.dar-wc-section {
    padding: 72px 0 100px;
}

.dar-cart-layout {
    display: grid;
    grid-template-columns: 1.5fr 0.85fr;
    gap: 36px;
    align-items: start;
}

.dar-cart-table-card,
.dar-cart-totals-card {
    background-color: var(--dar-cream-light);
    border: 2px solid rgba(178, 84, 38, 0.26);
    border-radius: var(--radius-md);
    padding: 32px;
    box-shadow: var(--shadow-soft);
    position: relative;
    box-sizing: border-box;
}

.dar-cart-card-header {
    font-size: 1.45rem;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--dar-cream-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dar-cart-back-shop {
    font-size: 0.88rem;
    color: var(--dar-terracotta);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
}

.dar-cart-back-shop:hover {
    color: var(--dar-olive);
}

.dar-cart-item-row {
    display: grid;
    grid-template-columns: 95px 1.4fr auto auto auto;
    gap: 20px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(55, 70, 57, 0.12);
}

.dar-cart-item-main,
.dar-cart-item-controls {
    display: contents;
}

.dar-cart-item-row:last-child {
    border-bottom: none;
}

.dar-cart-item-img {
    width: 95px;
    height: 95px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(178, 84, 38, 0.3);
}

.dar-cart-item-title {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--dar-olive);
    margin-bottom: 4px;
}

.dar-cart-item-cat {
    font-size: 0.8rem;
    color: var(--dar-terracotta);
    font-weight: 600;
}

.dar-cart-item-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dar-olive);
}

/* WooCommerce Notices (Success messages, Coupon applied, Errors) */
.woocommerce-notices-wrapper {
    width: 100%;
    margin-bottom: 24px;
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    padding: 14px 20px !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-body) !important;
    font-size: 0.94rem !important;
    font-weight: 600 !important;
    margin-bottom: 18px !important;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.woocommerce-message {
    background-color: rgba(55, 70, 57, 0.08) !important;
    border: 1.5px solid var(--dar-olive) !important;
    color: var(--dar-olive) !important;
}

.woocommerce-error {
    background-color: rgba(178, 84, 38, 0.08) !important;
    border: 1.5px solid var(--dar-terracotta) !important;
    color: var(--dar-terracotta) !important;
}

.woocommerce-info {
    background-color: var(--dar-cream-light) !important;
    border: 1.5px solid rgba(55, 70, 57, 0.25) !important;
    color: var(--dar-olive) !important;
}

.dar-coupon-discount-line {
    font-weight: 700;
}

.dar-coupon-discount-line .woocommerce-remove-coupon {
    display: none !important;
}

.dar-coupon-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px dashed rgba(55, 70, 57, 0.2);
}

.dar-coupon-bar .dar-input {
    flex: 1;
    min-width: 0;
    max-width: 320px;
    margin-bottom: 0;
}

.dar-coupon-bar .btn-cart-view,
.dar-coupon-bar button[name="apply_coupon"],
.dar-coupon-bar #dar-apply-coupon-btn {
    width: auto !important;
    max-width: fit-content !important;
    flex-shrink: 0;
    align-self: center;
    padding: 12px 22px !important;
    font-size: 0.88rem !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.3s ease, var(--transition) !important;
}

.dar-coupon-bar .btn-cart-view i,
.dar-coupon-bar .btn-cart-view span,
.dar-coupon-bar button[name="apply_coupon"] i,
.dar-coupon-bar button[name="apply_coupon"] span,
.dar-coupon-bar #dar-apply-coupon-btn i,
.dar-coupon-bar #dar-apply-coupon-btn span {
    color: inherit;
    transition: all 0.3s ease, var(--transition) !important;
}

.dar-coupon-bar .btn-cart-view:hover,
.dar-coupon-bar button[name="apply_coupon"]:hover,
.dar-coupon-bar #dar-apply-coupon-btn:hover {
    background-color: var(--dar-olive) !important;
    border-color: var(--dar-olive) !important;
    color: var(--dar-cream) !important;
}

.dar-coupon-bar .btn-cart-view:hover i,
.dar-coupon-bar .btn-cart-view:hover span,
.dar-coupon-bar button[name="apply_coupon"]:hover i,
.dar-coupon-bar button[name="apply_coupon"]:hover span,
.dar-coupon-bar #dar-apply-coupon-btn:hover i,
.dar-coupon-bar #dar-apply-coupon-btn:hover span {
    color: var(--dar-cream) !important;
}

.dar-input {
    width: 100%;
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid rgba(55, 70, 57, 0.25);
    background-color: var(--dar-cream);
    color: var(--dar-olive);
    font-family: var(--font-body);
    font-size: 0.94rem;
    transition: var(--transition);
}

.dar-input:focus {
    outline: none;
    border-color: var(--dar-terracotta);
    background-color: #fff;
}

select.dar-input {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23374639' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

[dir="rtl"] select.dar-input,
html[lang="ar"] select.dar-input {
    background-position: left 14px center;
    padding-right: 16px;
    padding-left: 38px;
}

.dar-input:disabled,
select.dar-input:disabled,
input.dar-input:disabled {
    background-color: #E2D2BC !important; /* Clearly darker warm beige for disabled state */
    border-color: rgba(55, 70, 57, 0.3) !important;
    color: rgba(55, 70, 57, 0.5) !important;
    -webkit-text-fill-color: rgba(55, 70, 57, 0.5) !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

select.dar-input option {
    background-color: #ffffff;
    color: var(--dar-olive);
}

html.dar-dark-mode select.dar-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f7eddf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

html.dar-dark-mode .dar-input:disabled,
html.dar-dark-mode select.dar-input:disabled,
html.dar-dark-mode input.dar-input:disabled {
    background-color: #172118 !important;
    border-color: rgba(247, 237, 223, 0.12) !important;
    color: rgba(247, 237, 223, 0.4) !important;
    -webkit-text-fill-color: rgba(247, 237, 223, 0.4) !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

html.dar-dark-mode select.dar-input option {
    background-color: #172118;
    color: #f7eddf;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(55, 70, 57, 0.15);
    font-size: 0.96rem;
}

.summary-line.total {
    border-bottom: none;
    padding-top: 18px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dar-terracotta);
}

/* 17D. Bespoke Checkout Page (صفحة إتمام الدفع المخصصة بالكامل) */
.dar-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.dar-form-group {
    margin-bottom: 18px;
}

.dar-form-group.full-width {
    grid-column: 1 / -1;
}

.dar-form-row-3 {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 0;
}

.dar-form-row-3 .dar-form-group {
    margin-bottom: 0;
}

.dar-form-row-address {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 18px;
    margin-bottom: 0;
}

.dar-form-row-address .dar-form-group {
    margin-bottom: 0;
}

.dar-form-label {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--dar-olive);
    margin-bottom: 8px;
}

.dar-payment-methods {
    margin: 22px 0;
    display: grid;
    gap: 12px;
}

.dar-payment-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius-sm);
    background-color: var(--dar-cream);
    border: 1.5px solid rgba(55, 70, 57, 0.2);
    cursor: pointer;
}

.dar-payment-option.active {
    border-color: var(--dar-terracotta);
    background-color: rgba(178, 84, 38, 0.06);
}

/* 17E. Bespoke My Account Page (صفحة حسابي المخصصة بالكامل) */
.dar-account-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 36px;
    align-items: start;
}

.dar-account-nav-card {
    background-color: var(--dar-olive);
    color: var(--dar-cream);
    border-radius: var(--radius-md);
    padding: 28px 20px;
    border-bottom: 4px solid var(--dar-terracotta);
}

.account-user-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(247, 237, 223, 0.15);
}

.account-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: var(--dar-terracotta);
    color: var(--dar-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.dar-account-menu li {
    margin-bottom: 6px;
}

.dar-account-menu a,
.dar-account-menu button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    color: rgba(247, 237, 223, 0.85);
    background: transparent;
    border: none;
    font-family: var(--font-body);
    font-size: 0.94rem;
    font-weight: 600;
    cursor: pointer;
    text-align: start;
    transition: var(--transition);
}

.dar-account-menu a:hover,
.dar-account-menu a.active,
.dar-account-menu button:hover,
.dar-account-menu button.active {
    background-color: var(--dar-terracotta);
    color: var(--dar-cream);
}

.dar-account-content-card {
    background-color: var(--dar-cream-light);
    border: 2px solid rgba(178, 84, 38, 0.25);
    border-radius: var(--radius-md);
    padding: 36px;
    box-shadow: var(--shadow-soft);
}

@media (max-width: 768px) {
    .dar-account-content-card {
        padding: 20px 14px;
    }
}

.dar-orders-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 14px;
}

.dar-orders-table {
    width: 100%;
    border-collapse: collapse;
}

.dar-orders-table th,
.dar-orders-table td {
    padding: 15px 14px;
    text-align: start;
    border-bottom: 1px solid rgba(55, 70, 57, 0.12);
    font-size: 0.92rem;
}

.dar-orders-table th {
    background-color: var(--dar-cream);
    color: var(--dar-olive);
    font-weight: 700;
}

@media (max-width: 680px) {
    .dar-orders-table {
        display: block;
        width: 100%;
    }

    .dar-orders-table thead {
        display: none;
    }

    .dar-orders-table tbody {
        display: block;
        width: 100%;
    }

    .dar-orders-table tbody tr {
        display: block;
        background: var(--dar-cream);
        border: 1.5px solid rgba(55, 70, 57, 0.15);
        border-radius: var(--radius-sm);
        margin-bottom: 16px;
        padding: 14px 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .dar-orders-table tbody tr:hover {
        background: var(--dar-cream);
    }

    .dar-orders-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px dashed rgba(55, 70, 57, 0.12);
        font-size: 0.92rem;
        text-align: end;
    }

    [dir="rtl"] .dar-orders-table td {
        text-align: start;
    }

    .dar-orders-table td:last-child {
        border-bottom: none;
        padding-top: 12px;
        padding-bottom: 4px;
        justify-content: flex-end;
    }

    .dar-orders-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--dar-olive-light);
        font-size: 0.86rem;
        text-align: start;
        margin-inline-end: 12px;
        flex-shrink: 0;
    }

    .dar-orders-table td:last-child::before {
        display: none;
    }

    .dar-orders-table td:last-child a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background-color: var(--dar-terracotta);
        color: #ffffff !important;
        padding: 6px 18px;
        border-radius: var(--radius-sm);
        font-size: 0.85rem;
        text-decoration: none;
        font-weight: 600;
        transition: var(--transition);
    }

    .dar-orders-table td:last-child a:hover {
        background-color: var(--dar-terracotta-dark);
    }
}

.order-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    background-color: rgba(55, 70, 57, 0.12);
    color: var(--dar-olive);
}

.order-status-badge.completed {
    background-color: rgba(39, 174, 96, 0.15);
    color: #1e8449;
}

.order-status-badge.processing {
    background-color: rgba(178, 84, 38, 0.16);
    color: var(--dar-terracotta);
}

/* ============================================================== */
/* WooCommerce My Account Endpoints (edit-account, edit-address, view-order) */
/* ============================================================== */

/* Endpoint Return Header Bar */
.dar-endpoint-back-bar {
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1.5px dashed rgba(55, 70, 57, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.dar-endpoint-back-bar .btn-cart-view {
    font-size: 0.88rem;
    padding: 8px 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1.5px solid var(--dar-terracotta);
    color: var(--dar-terracotta);
    font-weight: 600;
    transition: var(--transition);
}

.dar-endpoint-back-bar .btn-cart-view:hover {
    background-color: var(--dar-terracotta);
    color: #ffffff;
}

/* Headings in WooCommerce Account */
.dar-account-content-card h2,
.dar-account-content-card h3,
.dar-account-content-card h4 {
    color: var(--dar-olive);
    font-family: var(--font-heading);
    margin-top: 10px;
    margin-bottom: 18px;
}

.dar-account-content-card h2 {
    font-size: 1.45rem;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--dar-cream-dark);
}

/* Edit Account & Address Form Rows */
.dar-account-content-card .woocommerce-EditAccountForm,
.dar-account-content-card .woocommerce-address-fields,
.dar-account-content-card form.edit-account {
    margin-top: 14px;
}

.dar-account-content-card form.edit-account::after,
.dar-account-content-card .woocommerce-address-fields::after,
.dar-account-content-card .woocommerce-address-fields__field-wrapper::after,
.dar-account-content-card fieldset::after {
    content: "";
    display: table;
    clear: both;
}

.dar-account-content-card .form-row,
.dar-account-content-card .woocommerce-form-row {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

.dar-account-content-card .form-row-wide,
.dar-account-content-card .woocommerce-form-row--wide,
.dar-account-content-card fieldset {
    clear: both !important;
}

@media (min-width: 768px) {
    .dar-account-content-card .form-row-first,
    .dar-account-content-card .woocommerce-form-row--first {
        width: 48.5% !important;
        float: left !important;
    }
    .dar-account-content-card .form-row-last,
    .dar-account-content-card .woocommerce-form-row--last {
        width: 48.5% !important;
        float: right !important;
    }
    [dir="rtl"] .dar-account-content-card .form-row-first,
    [dir="rtl"] .dar-account-content-card .woocommerce-form-row--first {
        float: right !important;
    }
    [dir="rtl"] .dar-account-content-card .form-row-last,
    [dir="rtl"] .dar-account-content-card .woocommerce-form-row--last {
        float: left !important;
    }
}

.dar-account-content-card .clear {
    clear: both;
}

/* Labels */
.dar-account-content-card label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--dar-olive);
    margin-bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dar-account-content-card label .required {
    color: #c9302c;
    text-decoration: none;
    font-weight: bold;
}

.dar-account-content-card #account_display_name_description em,
.dar-account-content-card .woocommerce-form-row em,
.dar-account-content-card .form-row em {
    display: block;
    font-size: 0.82rem;
    color: var(--dar-olive-light);
    margin-top: 6px;
    font-style: normal;
    line-height: 1.4;
}

/* Form Inputs, Selects, and Textareas */
.dar-account-content-card input.input-text,
.dar-account-content-card input[type="text"],
.dar-account-content-card input[type="email"],
.dar-account-content-card input[type="password"],
.dar-account-content-card input[type="tel"],
.dar-account-content-card select,
.dar-account-content-card textarea,
.woocommerce-account .woocommerce input.input-text,
.woocommerce-account .woocommerce-EditAccountForm input.input-text,
.woocommerce-account .woocommerce-address-fields input.input-text {
    width: 100% !important;
    max-width: 100% !important;
    padding: 13px 16px !important;
    border-radius: var(--radius-sm) !important;
    border: 1.5px solid rgba(55, 70, 57, 0.25) !important;
    background-color: var(--dar-cream) !important;
    color: var(--dar-olive) !important;
    font-family: var(--font-body) !important;
    font-size: 0.94rem !important;
    box-sizing: border-box !important;
    transition: var(--transition) !important;
    line-height: normal !important;
}

.dar-account-content-card input.input-text:focus,
.dar-account-content-card input[type="text"]:focus,
.dar-account-content-card input[type="email"]:focus,
.dar-account-content-card input[type="password"]:focus,
.dar-account-content-card input[type="tel"]:focus,
.dar-account-content-card select:focus,
.dar-account-content-card textarea:focus,
.woocommerce-account .woocommerce input.input-text:focus,
.woocommerce-account .woocommerce-EditAccountForm input.input-text:focus,
.woocommerce-account .woocommerce-address-fields input.input-text:focus {
    outline: none !important;
    border-color: var(--dar-terracotta) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(178, 84, 38, 0.15) !important;
}

/* Select2 in WooCommerce Account Address Forms */
.dar-account-content-card .select2-container--default .select2-selection--single {
    height: 50px;
    background-color: var(--dar-cream);
    border: 1.5px solid rgba(55, 70, 57, 0.25);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    padding: 0 14px;
    transition: var(--transition);
}

.dar-account-content-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--dar-olive);
    font-size: 0.94rem;
    line-height: normal;
    padding: 0;
    font-family: var(--font-body);
}

.dar-account-content-card .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 48px;
    right: 12px;
}

[dir="rtl"] .dar-account-content-card .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: auto;
    left: 12px;
}

.dar-account-content-card .select2-container--default.select2-container--focus .select2-selection--single,
.dar-account-content-card .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--dar-terracotta);
    background-color: #ffffff;
    outline: none;
}

/* Password Change Fieldset */
.dar-account-content-card fieldset,
.woocommerce-account .woocommerce fieldset {
    border: 1.5px dashed rgba(178, 84, 38, 0.35) !important;
    border-radius: var(--radius-sm) !important;
    padding: 24px !important;
    margin-top: 28px !important;
    margin-bottom: 24px !important;
    background: rgba(244, 236, 225, 0.45) !important;
    box-sizing: border-box !important;
}

.dar-account-content-card legend,
.woocommerce-account .woocommerce legend {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--dar-terracotta) !important;
    padding: 0 12px !important;
    font-family: var(--font-heading) !important;
}

/* Action Submit Buttons */
.dar-account-content-card button[type="submit"],
.dar-account-content-card .woocommerce-Button.button,
.dar-account-content-card button.button,
.dar-account-content-card a.button,
.dar-account-content-card input[type="submit"],
.woocommerce-account .woocommerce-Button.button,
.woocommerce-account button[name="save_account_details"],
.woocommerce-account button[name="save_address"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background-color: var(--dar-terracotta) !important;
    color: #ffffff !important;
    padding: 13px 30px !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    font-family: var(--font-body) !important;
    font-size: 0.95rem !important;
    border: none !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    margin-top: 14px !important;
    text-decoration: none !important;
    line-height: normal !important;
    box-shadow: 0 3px 10px rgba(178, 84, 38, 0.22) !important;
}

.dar-account-content-card button[type="submit"]:hover,
.dar-account-content-card .woocommerce-Button.button:hover,
.dar-account-content-card button.button:hover,
.dar-account-content-card a.button:hover,
.dar-account-content-card input[type="submit"]:hover,
.woocommerce-account .woocommerce-Button.button:hover,
.woocommerce-account button[name="save_account_details"]:hover,
.woocommerce-account button[name="save_address"]:hover {
    background-color: #96421b !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(178, 84, 38, 0.35) !important;
}

/* Order Details View (view-order) */
.dar-account-content-card > p mark,
.dar-account-content-card mark.order-number,
.dar-account-content-card mark.order-date,
.dar-account-content-card mark.order-status {
    background: none;
    color: var(--dar-terracotta);
    font-weight: 700;
    padding: 0 4px;
}

.dar-account-content-card > p:first-of-type,
.dar-account-content-card p:has(mark.order-number) {
    background: rgba(178, 84, 38, 0.08);
    padding: 16px 20px;
    border-radius: var(--radius-sm);
    border-inline-start: 4px solid var(--dar-terracotta);
    color: var(--dar-olive);
    font-size: 0.96rem;
    line-height: 1.6;
    margin-bottom: 24px;
}

.dar-account-content-card table.woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px;
    margin-bottom: 28px;
    background-color: #ffffff;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid rgba(55, 70, 57, 0.15);
}

.dar-account-content-card table.woocommerce-table--order-details th,
.dar-account-content-card table.woocommerce-table--order-details td {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(55, 70, 57, 0.1);
    font-size: 0.92rem;
    text-align: start;
}

.dar-account-content-card table.woocommerce-table--order-details thead th {
    background-color: var(--dar-cream);
    color: var(--dar-olive);
    font-weight: 700;
    font-size: 0.94rem;
}

.dar-account-content-card table.woocommerce-table--order-details tbody tr:hover {
    background-color: var(--dar-cream-light);
}

.dar-account-content-card table.woocommerce-table--order-details tbody td a {
    color: var(--dar-olive);
    font-weight: 600;
}

.dar-account-content-card table.woocommerce-table--order-details tbody td a:hover {
    color: var(--dar-terracotta);
}

.dar-account-content-card table.woocommerce-table--order-details tfoot th {
    background-color: var(--dar-cream);
    color: var(--dar-olive);
    font-weight: 600;
    text-align: start;
    border-top: 1px solid rgba(55, 70, 57, 0.1);
}

.dar-account-content-card table.woocommerce-table--order-details tfoot td {
    background-color: #ffffff;
    color: var(--dar-olive);
    font-weight: 700;
    text-align: end;
    border-top: 1px solid rgba(55, 70, 57, 0.1);
}

.dar-account-content-card .product-quantity {
    color: var(--dar-terracotta);
    font-weight: 700;
    margin-inline-start: 6px;
}

/* Customer Addresses Grid in Order Details */
.dar-account-content-card .woocommerce-customer-details {
    margin-top: 32px;
}

.dar-account-content-card .woocommerce-customer-details .woocommerce-columns--addresses,
.dar-account-content-card .woocommerce-customer-details .col2-set {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 22px !important;
    float: none !important;
    width: 100% !important;
    margin-top: 18px;
}

.dar-account-content-card .woocommerce-column,
.dar-account-content-card .woocommerce-customer-details .col-1,
.dar-account-content-card .woocommerce-customer-details .col-2 {
    background: var(--dar-cream) !important;
    border: 1.5px solid rgba(55, 70, 57, 0.15) !important;
    border-radius: var(--radius-sm) !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    float: none !important;
    width: 100% !important;
}

.dar-account-content-card .woocommerce-column h2,
.dar-account-content-card .woocommerce-column__title {
    font-size: 1.15rem;
    color: var(--dar-olive);
    margin-top: 0;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid rgba(55, 70, 57, 0.15);
}

.dar-account-content-card address {
    font-style: normal;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--dar-olive);
}

.dar-account-content-card address p {
    margin: 6px 0 0 0;
    font-weight: 600;
    color: var(--dar-olive-light);
}

.dar-account-content-card address p.woocommerce-customer-details--phone,
.dar-account-content-card address p.woocommerce-customer-details--email {
    color: var(--dar-terracotta);
    font-weight: 600;
}

@media (max-width: 960px) {
    .dar-shop-layout,
    .single-product-grid,
    .dar-cart-layout,
    .dar-account-layout {
        grid-template-columns: 1fr;
    }
    .dar-shop-main .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* Prevent page horizontal overflow in Cart & Checkout */
    .dar-wc-section {
        padding: 32px 0 54px !important;
        overflow-x: hidden !important;
    }

    .dar-wc-section .dar-container {
        padding: 0 12px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .dar-cart-layout {
        gap: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Prevent Cart Table Card and Totals Card from overflowing screen */
    .dar-cart-table-card,
    .dar-cart-totals-card {
        padding: 18px 14px !important;
        border-radius: var(--radius-sm) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .dar-cart-card-header {
        font-size: 1.25rem !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
        padding-bottom: 12px !important;
    }

    /* Cart Item Row: Clean 2-Row Stack on Mobile (Top: Image+Details, Bottom: Controls) */
    .dar-cart-item-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 16px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .dar-cart-item-main {
        display: flex !important;
        align-items: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .dar-cart-item-img {
        width: 72px !important;
        height: 72px !important;
        border-radius: var(--radius-sm) !important;
        flex-shrink: 0 !important;
    }

    .dar-cart-item-info {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .dar-cart-item-title {
        font-size: 0.96rem !important;
        line-height: 1.35 !important;
        margin-bottom: 3px !important;
    }

    .dar-cart-item-cat {
        font-size: 0.76rem !important;
        margin-bottom: 2px !important;
    }

    .dar-cart-unit-price {
        font-size: 0.82rem !important;
    }

    .dar-cart-item-controls {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        gap: 10px !important;
        padding-top: 4px !important;
    }

    .dar-cart-item-controls .qty-selector {
        width: 110px !important;
        min-width: 110px !important;
        height: 42px !important;
        min-height: 42px !important;
    }

    .dar-cart-item-controls .dar-cart-item-price {
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        margin: 0 auto 0 8px !important;
    }

    .dar-cart-item-controls .cart-item-remove {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        font-size: 1rem !important;
    }

    /* Coupon Bar Mobile Stacking */
    .dar-coupon-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
        padding-top: 18px !important;
        margin-top: 18px !important;
    }

    .dar-coupon-bar .dar-input {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 0.9rem !important;
        padding: 12px 14px !important;
    }

    .dar-coupon-bar .btn-cart-view,
    .dar-coupon-bar button[name="apply_coupon"],
    .dar-coupon-bar #dar-apply-coupon-btn {
        width: auto !important;
        align-self: flex-start !important;
        justify-content: center !important;
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
        transition: all 0.3s ease, var(--transition) !important;
    }

    /* Cart & Checkout Action Buttons Mobile Typography & Alignment */
    .dar-cart-totals-card .btn-primary,
    .dar-cart-totals-card #place_order,
    .dar-cart-totals-card .btn-whatsapp-order {
        font-size: 0.95rem !important;
        padding: 13px 18px !important;
        white-space: normal !important;
        line-height: 1.3 !important;
        min-height: 48px !important;
        box-sizing: border-box !important;
    }

    .dar-cart-totals-card .btn-whatsapp-order i,
    .dar-cart-totals-card .btn-primary i {
        font-size: 1.15rem !important;
    }

    .dar-form-row-3,
    .dar-form-row-address {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

@media (max-width: 580px) {
    .dar-shop-main .products-grid,
    .dar-form-grid,
    .product-trust-badges {
        grid-template-columns: 1fr;
    }
}



.about-tatreez-frame {
    background-color: var(--dar-cream-light);
    border: 2px solid rgba(178, 84, 38, 0.28);
    border-radius: var(--radius-md);
    padding: 64px 52px;
    position: relative;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.about-tatreez-frame::before,
.about-tatreez-frame::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='48' viewBox='0 0 24 48'%3E%3Cpath fill='%23B25426' d='M0 0h8v8H0V0zm8 8h8v8H8V8zm8 8h8v8h-8v-8zM8 24h8v8H8v-8zM0 32h8v8H0v-32z'/%3E%3Cpath fill='%23374639' d='M16 0h8v8h-8V0zM0 16h8v8H0v-8zm16 16h8v8h-8v-8zM8 40h8v8H8v-8z'/%3E%3C/svg%3E");
    background-repeat: repeat-y;
    opacity: 0.85;
}

.about-tatreez-frame::before {
    left: 0;
}

.about-tatreez-frame::after {
    right: 0;
    transform: scaleX(-1);
}

.about-main-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 0;
}

.about-lead-text {
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--dar-olive);
    margin-bottom: 24px;
    font-weight: 400;
}

.vision-mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.vm-card {
    background-color: var(--dar-cream);
    border-left: 4px solid var(--dar-terracotta);
    padding: 22px 24px;
    border-radius: var(--radius-sm);
}

html[lang="ar"] .vm-card,
[dir="rtl"] .vm-card {
    border-left: none;
    border-right: 4px solid var(--dar-terracotta);
}

.vm-card h3 {
    font-size: 1.25rem;
    color: var(--dar-terracotta);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vm-card p {
    font-size: 0.96rem;
    color: var(--dar-olive);
    line-height: 1.7;
}

.about-emblem-card {
    background-color: var(--dar-olive);
    color: var(--dar-cream);
    padding: 44px 36px;
    border-radius: var(--radius-md);
    text-align: center;
    position: relative;
    background-image: radial-gradient(rgba(178, 84, 38, 0.16) 1px, transparent 1px);
    background-size: 16px 16px;
}

.about-emblem-card img {
    width: 140px;
    margin: 0 auto 24px;
}

.values-title {
    font-size: 1.1rem;
    color: var(--dar-terracotta-light);
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

html[lang="ar"] .values-title,
[dir="rtl"] .values-title {
    letter-spacing: 0;
}

.values-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.value-pill {
    background: rgba(247, 237, 223, 0.1);
    border: 1px solid rgba(247, 237, 223, 0.3);
    color: #f7eddf;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 0.92rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.value-pill b {
    color: #f7eddf;
}

.value-pill i {
    color: var(--dar-terracotta-light);
    font-size: 0.78rem;
}

/* What We Offer at DÂR (ما نقدمه في دار - Font Awesome Icons) */
.offerings-header {
    text-align: center;
    margin-bottom: 36px;
}

.offerings-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.offering-card {
    background: var(--dar-cream-light);
    border: 1.5px solid rgba(178, 84, 38, 0.18);
    padding: 30px 24px;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(55, 70, 57, 0.05);
    transition: var(--transition);
    position: relative;
}

.offering-card:hover {
    transform: translateY(-5px);
    border-color: var(--dar-terracotta);
    box-shadow: var(--shadow-soft);
}

.offering-icon {
    width: 52px;
    height: 52px;
    background-color: rgba(178, 84, 38, 0.12);
    color: var(--dar-terracotta);
    border: 1px solid rgba(178, 84, 38, 0.25);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 1.3rem;
    transition: var(--transition);
}

.offering-card:hover .offering-icon {
    background-color: var(--dar-terracotta);
    color: var(--dar-cream);
}

.offering-card h4 {
    font-size: 1.12rem;
    margin-bottom: 10px;
    color: var(--dar-olive);
}

.offering-card p {
    font-size: 0.92rem;
    color: var(--dar-olive-light);
    line-height: 1.65;
}

/* ==========================================================================
   10. SECTION 3: BEST SELLERS (الأكثر مبيعاً - Requirement #9: No motif badge)
   ========================================================================== */

.dar-bestsellers-section {
    padding: 100px 0;
    background-color: var(--dar-cream-dark);
    position: relative;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.product-card {
    background-color: var(--dar-cream-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(55, 70, 57, 0.12);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    position: relative;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
    border-color: var(--dar-terracotta);
}

.product-media {
    position: relative;
    height: 310px;
    overflow: hidden;
    background-color: #e6d6c3;
}

.product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.product-card:hover .product-media img {
    transform: scale(1.07);
}

.product-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-category-tag {
    font-size: 0.78rem;
    color: var(--dar-terracotta);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 6px;
}

.product-title {
    font-size: 1.16rem;
    line-height: 1.35;
    color: var(--dar-olive);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    overflow-wrap: break-word;
}

.product-title a {
    color: inherit;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-story-snippet {
    font-size: 0.86rem;
    line-height: 1.35;
    color: var(--dar-olive-light);
    margin-bottom: 18px;
    border-top: 1px dashed rgba(55, 70, 57, 0.15);
    padding-top: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.product-price {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dar-olive);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0 !important;
    line-height: 1.25;
}

.product-price del.dar-old-price {
    font-size: 0.82em;
    font-weight: 400;
    color: rgba(55, 70, 57, 0.45);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(178, 84, 38, 0.6);
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2;
}

.product-price ins.dar-current-price {
    text-decoration: none;
    font-weight: 700;
    color: var(--dar-terracotta);
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2;
}

.product-price .dar-current-price {
    color: var(--dar-olive);
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2;
}

.add-to-cart-btn {
    background-color: var(--dar-olive);
    color: var(--dar-cream);
    border: none;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    padding: 0 14px;
    box-sizing: border-box !important;
    line-height: 1 !important;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    vertical-align: middle;
}

.add-to-cart-btn span {
    white-space: nowrap !important;
}

.add-to-cart-btn i {
    color: var(--dar-terracotta-light);
    transition: var(--transition);
}

.add-to-cart-btn:hover {
    background-color: var(--dar-terracotta);
}

.add-to-cart-btn:hover i {
    color: var(--dar-cream);
}

.add-to-cart-btn.select-options-btn {
    text-decoration: none !important;
}

.add-to-cart-btn.select-options-btn i {
    color: var(--dar-terracotta-light);
    transition: transform 0.2s ease, color 0.2s ease;
}

.add-to-cart-btn.select-options-btn:hover i {
    transform: translateX(3px);
    color: var(--dar-cream);
}

/* ==========================================================================
   11. SECTION 4: SHOP BY CATEGORY (تسوّق حسب الفئة)
   ========================================================================== */

.dar-categories-section {
    padding: 100px 0;
    background-color: var(--dar-cream);
}

.categories-bento {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.category-card {
    position: relative;
    height: 360px;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 36px;
    color: var(--dar-cream);
    border: 2px solid rgba(178, 84, 38, 0.25);
    box-shadow: var(--shadow-soft);
}

.category-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.65s ease;
    z-index: 1;
}

.category-card:hover img {
    transform: scale(1.06);
}

.category-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(37, 48, 39, 0.94) 0%,
        rgba(37, 48, 39, 0.45) 55%,
        rgba(37, 48, 39, 0.15) 100%
    );
    z-index: 2;
}

.category-card::after {
    content: '';
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    z-index: 3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath fill='%23F7EDDF' opacity='0.8' d='M18 0h8v8h-8V0zM8 8h8v8H8V8zm20 0h8v8h-8V8zM0 18h8v8H0v-8zm18 0h8v8h-8v-8zm18 0h8v8h-8v-8zM8 28h8v8H8v-8zm20 0h8v8h-8v-8zM18 36h8v8h-8v-8z'/%3E%3C/svg%3E");
    background-size: contain;
}

html[lang="ar"] .category-card::after,
[dir="rtl"] .category-card::after {
    right: auto;
    left: 16px;
}

.category-content {
    position: relative;
    z-index: 3;
    max-width: 460px;
}

.category-count {
    display: inline-block;
    background-color: var(--dar-terracotta);
    color: var(--dar-cream);
    font-size: 0.76rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.category-content h3 {
    color: var(--dar-cream);
    font-size: 1.75rem;
    margin-bottom: 8px;
}

.category-content p {
    font-size: 0.95rem;
    color: rgba(247, 237, 223, 0.88);
    margin-bottom: 18px;
}

.category-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dar-cream);
    font-weight: 700;
    font-size: 0.92rem;
    border-bottom: 2px solid var(--dar-terracotta);
    padding-bottom: 4px;
}

.category-link:hover {
    color: var(--dar-terracotta-light);
}

/* ==========================================================================
   12. SECTION 5: DÂR STORIES (حكايات دار - قصص المنتجات والحرفيات)
   ========================================================================== */

.dar-stories-section {
    padding: 100px 0;
    background-color: var(--dar-cream);
    position: relative;
    border-top: 1px solid rgba(178, 84, 38, 0.15);
}

body.post-type-archive-dar_story,
body.post-type-archive-dar_story main.dar-stories-section {
    background-color: var(--dar-cream) !important;
}

.stories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.story-card {
    background-color: var(--dar-cream-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1.5px solid rgba(178, 84, 38, 0.18);
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(55, 70, 57, 0.06);
    transition: var(--transition);
}

body.post-type-archive-dar_story .story-card {
    background-color: var(--dar-cream-light) !important;
}

.story-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
    border-color: var(--dar-terracotta);
}

.story-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-region-tag {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background-color: var(--dar-terracotta);
    color: var(--dar-cream);
    padding: 5px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 4px;
}

html[lang="ar"] .story-region-tag,
[dir="rtl"] .story-region-tag {
    left: auto;
    right: 14px;
}

.story-content {
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.story-stitch-name {
    font-size: 0.85rem;
    color: var(--dar-terracotta);
    font-weight: 700;
    margin-bottom: 8px;
}

.story-content h3 {
    font-size: 1.35rem;
    margin-bottom: 12px;
    color: var(--dar-olive);
}

.story-content p {
    font-size: 0.95rem;
    color: var(--dar-olive-light);
    line-height: 1.75;
    margin-bottom: 20px;
    flex-grow: 1;
}

.story-artisan-footer {
    padding-top: 16px;
    border-top: 1px solid rgba(55, 70, 57, 0.12);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--dar-olive);
}

.story-artisan-footer i {
    color: var(--dar-terracotta);
}

.story-action-wrap {
    margin-top: 18px;
    padding-top: 2px;
}

.btn-story-read {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    background-color: var(--dar-terracotta);
    color: #ffffff !important;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-decoration: none;
    border: 1.5px solid var(--dar-terracotta);
    box-shadow: 0 3px 10px rgba(178, 84, 38, 0.22);
    transition: var(--transition);
    box-sizing: border-box;
}

.btn-story-read:hover {
    background-color: var(--dar-terracotta-dark, #8f3e1b);
    border-color: var(--dar-terracotta-dark, #8f3e1b);
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(178, 84, 38, 0.35);
}

.btn-story-read i {
    font-size: 0.85rem;
    transition: transform 0.25s ease;
}

.btn-story-read:hover i {
    transform: translateX(4px);
}

[dir="rtl"] .btn-story-read:hover i,
html[lang="ar"] .btn-story-read:hover i {
    transform: translateX(-4px);
}

/* ==========================================================================
   13. SECTION 6: OUR IMPACT (أثرنا - دعم النساء والأطفال في غزة)
   ========================================================================== */

.dar-impact-section {
    padding: 110px 0;
    background-color: var(--dar-cream);
    color: var(--dar-olive);
    position: relative;
    overflow: hidden;
}

/* Full-Section Palestinian Tatreez Embroidery Pattern Background Derived from Official Site Logo Emblem (Asset 1.svg) */
.dar-impact-section::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/images/Asset-1.svg');
    background-size: 48px 49.5px;
    background-repeat: repeat;
    opacity: 0.08;
    pointer-events: none;
    z-index: 1;
}

.dar-impact-section .dar-container {
    position: relative;
    z-index: 2;
}

.dar-impact-section .section-title {
    color: var(--dar-olive);
}

.dar-impact-section .section-desc {
    color: var(--dar-olive-dark);
}

.impact-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
    margin-bottom: 40px;
}

.impact-pillars {
    display: grid;
    gap: 20px;
}

.impact-pillar-item {
    background: rgba(55, 70, 57, 0.04);
    border: 1px solid rgba(55, 70, 57, 0.12);
    border-left: 4px solid var(--dar-terracotta);
    padding: 24px 26px;
    border-radius: var(--radius-md);
}

html[lang="ar"] .impact-pillar-item,
[dir="rtl"] .impact-pillar-item {
    border-left: 1px solid rgba(55, 70, 57, 0.12);
    border-right: 4px solid var(--dar-terracotta);
}

.impact-pillar-item h3 {
    color: var(--dar-olive);
    font-size: 1.28rem;
    margin-bottom: 8px;
}

.impact-pillar-item p {
    color: rgba(55, 70, 57, 0.78);
    font-size: 0.96rem;
    line-height: 1.75;
}

.impact-media {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(55, 70, 57, 0.12);
    min-height: 380px;
    display: flex;
}

.impact-media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-md);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.impact-media:hover .impact-media-img {
    transform: scale(1.03);
}

/* Impact Statistics Box: 4 in a single horizontal row directly below impact-split */
.impact-stats-box,
.impact-stats-row {
    background: #ffffff;
    border: 1.5px solid rgba(178, 84, 38, 0.28);
    border-radius: var(--radius-md);
    padding: 32px 28px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
    width: 100%;
    box-shadow: 0 10px 30px rgba(55, 70, 57, 0.05);
}

.stat-item {
    padding: 18px 14px;
    background: rgba(247, 237, 223, 0.45);
    border: 1px dashed rgba(178, 84, 38, 0.35);
    border-radius: var(--radius-sm);
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-2px);
    background: rgba(247, 237, 223, 0.75);
}

.stat-number {
    display: block;
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dar-terracotta);
    margin-bottom: 6px;
}

.stat-label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--dar-olive);
    line-height: 1.45;
}

/* ==========================================================================
   14. SECTION 7: EVENTS & WORKSHOPS (الفعاليات والورش في مركز إسطنبول)
   ========================================================================== */

.dar-events-section {
    padding: 100px 0;
    background-color: var(--dar-cream);
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.event-card {
    background-color: var(--dar-cream-light);
    border: 1px solid rgba(55, 70, 57, 0.14);
    border-radius: var(--radius-md);
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    position: relative;
}

.event-card:hover {
    border-color: var(--dar-terracotta);
    transform: translateY(-5px);
    box-shadow: var(--shadow-soft);
}

.event-date-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.date-box {
    background-color: var(--dar-terracotta);
    color: var(--dar-cream);
    width: 58px;
    height: 58px;
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}

.date-box .day {
    font-size: 1.35rem;
    font-weight: 700;
}

.date-box .month {
    font-size: 0.72rem;
    text-transform: uppercase;
}

.event-meta {
    font-size: 0.85rem;
    color: var(--dar-olive-light);
}

.event-meta strong {
    display: block;
    color: var(--dar-olive);
    font-size: 0.92rem;
}

.event-card h3 {
    font-size: 1.28rem;
    margin-bottom: 12px;
    color: var(--dar-olive);
}

.event-card p {
    font-size: 0.94rem;
    color: var(--dar-olive-light);
    margin-bottom: 24px;
    flex-grow: 1;
}

.event-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background-color: transparent;
    border: 1.5px solid var(--dar-olive);
    color: var(--dar-olive);
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}

.event-btn i {
    color: var(--dar-terracotta);
    transition: var(--transition);
}

.event-btn:hover {
    background-color: var(--dar-olive);
    color: var(--dar-cream);
}

.event-btn:hover i {
    color: var(--dar-cream);
}

/* Section Call To Action Buttons (Tüm Hikâyeleri Gör & Tüm Etkinlikleri Gör) */
.section-cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: 48px;
    width: 100%;
}

.dar-section-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: var(--dar-terracotta);
    color: #f7eddf !important;
    padding: 14px 34px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    text-decoration: none !important;
    border: 2px solid var(--dar-terracotta);
    box-shadow: 0 10px 24px rgba(178, 84, 38, 0.28);
    transition: all 0.3s ease, var(--transition);
    cursor: pointer;
}

.dar-section-more-btn i,
.dar-section-more-btn span {
    color: #f7eddf !important;
    transition: all 0.3s ease, var(--transition);
}

.dar-section-more-btn:hover {
    background-color: var(--dar-terracotta-dark);
    border-color: var(--dar-terracotta-dark);
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(178, 84, 38, 0.38);
}

.dar-section-more-btn:hover i,
.dar-section-more-btn:hover span {
    color: #ffffff !important;
}

.dar-section-more-btn:hover .fa-arrow-right {
    transform: translateX(4px);
}

[dir="rtl"] .dar-section-more-btn:hover .fa-arrow-right,
html[lang="ar"] .dar-section-more-btn:hover .fa-arrow-right {
    transform: rotate(180deg) translateX(4px);
}

[dir="rtl"] .rtl-flip,
html[lang="ar"] .rtl-flip {
    transform: rotate(180deg);
}

html.dar-dark-mode .dar-section-more-btn {
    background-color: var(--dar-terracotta);
    border-color: var(--dar-terracotta);
    color: #f7eddf !important;
}

html.dar-dark-mode .dar-section-more-btn:hover {
    background-color: var(--dar-terracotta-light);
    border-color: var(--dar-terracotta-light);
    color: #ffffff !important;
}

/* ==========================================================================
   15. FOOTER (الفوتر التراثي + TaraTech Credit + Font Awesome Icons)
   ========================================================================== */

.dar-footer {
    background-color: var(--dar-olive-dark);
    color: var(--dar-cream);
    padding: 80px 0 36px;
    border-top: 4px solid var(--dar-terracotta);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 0.9fr 1.2fr;
    gap: 40px;
    margin-bottom: 56px;
}

.footer-brand img {
    height: 92px;
    width: auto;
    margin-bottom: 20px;
}

.footer-brand p {
    color: rgba(247, 237, 223, 0.8);
    font-size: 0.95rem;
    margin-bottom: 20px;
    max-width: 340px;
}

.footer-heading {
    color: var(--dar-terracotta-light);
    font-size: 1.12rem;
    margin-bottom: 20px;
    position: relative;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

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

.footer-links a {
    color: rgba(247, 237, 223, 0.82);
    font-size: 0.94rem;
}

.footer-links a:hover {
    color: var(--dar-terracotta-light);
    padding-inline-start: 6px;
}

.contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
    font-size: 0.92rem;
    color: rgba(247, 237, 223, 0.9);
}

.contact-icon {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: rgba(178, 84, 38, 0.18);
    border: 1px solid rgba(178, 84, 38, 0.35);
    color: var(--dar-terracotta-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 0.9rem;
}

.contact-label {
    display: block;
    font-size: 0.78rem;
    color: rgba(247, 237, 223, 0.6);
    text-transform: uppercase;
}

.footer-bottom {
    padding-top: 28px;
    border-top: 1px solid rgba(247, 237, 223, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.88rem;
    color: rgba(247, 237, 223, 0.72);
}

.footer-copyright-wrap {
    margin: 0;
    font-size: 0.88rem;
    color: rgba(247, 237, 223, 0.72);
    line-height: 1.6;
}

.footer-copyright-wrap a,
.taratech-credit a {
    color: var(--dar-terracotta-light);
    font-weight: 700;
    border-bottom: 1px dashed var(--dar-terracotta-light);
    text-decoration: none;
    transition: var(--transition);
}

.footer-copyright-wrap a:hover,
.taratech-credit a:hover {
    color: var(--dar-cream);
    border-bottom-color: var(--dar-cream);
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dar-cream);
    font-weight: 600;
}

.footer-social a i {
    color: var(--dar-terracotta-light);
    font-size: 1.1rem;
}

/* ==========================================================================
   16. RESPONSIVE DESIGN (Mobile Circular Cart, Off-Canvas, Popup Switcher)
   ========================================================================== */

@media (max-width: 1100px) {
    .offerings-grid,
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .about-main-grid,
    .impact-split {
        grid-template-columns: 1fr;
    }
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    /* Hide Desktop Nav & Desktop Dropdowns; Show Off-Canvas Toggle & Mobile Popup Trigger */
    .dar-nav {
        display: none !important;
    }
    .dar-dropdown {
        display: none !important;
    }
    .mobile-prefs-trigger {
        display: inline-flex;
    }
    .mobile-menu-toggle {
        display: inline-flex;
    }

    /* Requirement: Remove Slogan from Mobile Header */
    .topbar-slogan {
        display: none !important;
    }
    .dar-topbar-inner {
        justify-content: center !important;
    }
    .topbar-controls {
        width: 100% !important;
        justify-content: center !important;
        gap: 14px !important;
    }

    /* Hero Section Sizing on Mobile & Tablets */
    .dar-hero {
        min-height: 30vh !important;
        padding: 20px 0 !important;
    }
    .hero-star-logo {
        width: 60px !important;
        margin: 0 auto 10px !important;
    }
    .hero-badge {
        font-size: 0.68rem !important;
        padding: 4px 12px !important;
        margin-bottom: 10px !important;
    }
    .hero-title-badge {
        font-size: 1.3rem !important;
        padding: 6px 18px !important;
        margin-bottom: 10px !important;
    }
    .hero-badge i {
        font-size: 0.64rem !important;
    }
    .hero-cta-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 330px !important;
        margin: 0 auto !important;
    }
    .hero-cta-group .btn-primary,
    .hero-cta-group .btn-outline-cream {
        width: auto !important;
        flex: 1 1 0 !important;
        justify-content: center !important;
        font-size: 0.72rem !important;
        padding: 7px 10px !important;
        min-height: 34px !important;
        height: 34px !important;
        white-space: nowrap !important;
        gap: 5px !important;
        border-radius: var(--radius-sm) !important;
    }
    .hero-cta-group .btn-primary i,
    .hero-cta-group .btn-outline-cream i {
        font-size: 0.72rem !important;
    }

    /* Shrink .hero-tatreez-corner to width: 50px on mobile only */
    .hero-tatreez-corner {
        width: 50px;
        height: 50px;
    }

    /* Requirement: .gallery-main-viewport height: 300px on mobile */
    .gallery-main-viewport {
        height: 300px !important;
    }

    /* Single Product Purchase Row & Taller Add to Cart Button on Mobile */
    .single-purchase-row {
        display: flex !important;
        align-items: stretch !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .single-purchase-row .qty-selector {
        height: 52px !important;
        min-height: 52px !important;
        box-sizing: border-box !important;
    }

    .single-purchase-row .add-to-cart-btn {
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 20px !important;
        font-size: 0.98rem !important;
        flex: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* Mobile Header Actions (Account, Cart, Theme Toggle & Menu Toggle) */
    .header-actions {
        gap: 8px !important;
    }

    /* 1. Light Mode on Mobile: Circular Theme Toggle, Account & Cart with Light Background */
    .header-actions .dar-header-theme-toggle,
    .header-actions .header-account-btn,
    .header-actions .cart-trigger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        position: relative !important;
        background-color: var(--dar-olive) !important;
        border: 1.5px solid var(--dar-olive) !important;
        color: var(--dar-cream) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    }

    .header-actions .cart-label-text {
        display: none !important;
    }

    .header-actions .dar-header-theme-toggle i,
    .header-actions .header-account-btn i,
    .header-actions .cart-trigger i,
    .header-actions .mobile-menu-toggle i {
        color: var(--dar-cream, #f7eddf) !important;
        font-size: 0.98rem !important;
    }

    .header-actions .dar-header-theme-toggle:hover,
    .header-actions .header-account-btn:hover,
    .header-actions .cart-trigger:hover {
        background-color: var(--dar-cream-light) !important;
        border-color: var(--dar-terracotta) !important;
    }

    .header-actions .dar-header-theme-toggle:hover i,
    .header-actions .header-account-btn:hover i,
    .header-actions .cart-trigger:hover i {
        color: var(--dar-terracotta) !important;
    }

    /* Cart Badge Position on Mobile Circular Cart */
    .header-actions .cart-trigger .cart-count {
        position: absolute !important;
        top: -4px !important;
        inset-inline-end: -4px !important;
        width: 19px !important;
        height: 19px !important;
        font-size: 0.68rem !important;
        font-weight: 700 !important;
        background-color: var(--dar-terracotta) !important;
        color: #ffffff !important;
        border: 2px solid #ffffff !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 5 !important;
    }

    /* 2. Light Mode on Mobile: Menu Toggle Button with Dark Background */
    .mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: var(--dar-olive) !important;
        border: 1.5px solid var(--dar-olive) !important;
        color: var(--dar-cream) !important;
        box-shadow: 0 3px 10px rgba(55, 70, 57, 0.28) !important;
        font-size: 1rem !important;
        cursor: pointer;
        transition: var(--transition);
    }

    .mobile-menu-toggle i {
        color: var(--dar-cream) !important;
    }

    .mobile-menu-toggle:hover {
        background-color: var(--dar-terracotta) !important;
        border-color: var(--dar-terracotta) !important;
        color: #ffffff !important;
    }

    .mobile-menu-toggle:hover i {
        color: #ffffff !important;
    }

    /* 3. Dark Mode Mobile Header Actions Sizing & Colors */
    html.dar-dark-mode .header-actions .dar-header-theme-toggle,
    html.dar-dark-mode .header-actions .header-account-btn,
    html.dar-dark-mode .header-actions .cart-trigger {
        background-color: rgba(247, 237, 223, 0.08) !important;
        border: 1.5px solid rgba(247, 237, 223, 0.2) !important;
        color: #f7eddf !important;
    }

    html.dar-dark-mode .header-actions .header-account-btn i,
    html.dar-dark-mode .header-actions .cart-trigger i {
        color: #f7eddf !important;
    }

    html.dar-dark-mode .header-actions .dar-header-theme-toggle i {
        color: var(--dar-terracotta) !important;
    }

    html.dar-dark-mode .header-actions .cart-trigger .cart-count {
        border-color: #141c15 !important;
    }

    html.dar-dark-mode .mobile-menu-toggle {
        background-color: #f7eddf !important;
        border: 1.5px solid #f7eddf !important;
        color: #141c15 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
    }

    html.dar-dark-mode .mobile-menu-toggle i {
        color: #141c15 !important;
    }

    html.dar-dark-mode .mobile-menu-toggle:hover {
        background-color: var(--dar-terracotta) !important;
        border-color: var(--dar-terracotta) !important;
        color: #ffffff !important;
    }

    html.dar-dark-mode .mobile-menu-toggle:hover i {
        color: #ffffff !important;
    }

    .categories-bento,
    .stories-grid,
    .events-grid,
    .vision-mission-grid {
        grid-template-columns: 1fr;
    }
    .about-tatreez-frame {
        padding: 40px 46px;
    }

    /* Off-Canvas Shop Filter Drawer on Mobile (max-width: 991px) */
    .dar-shop-layout,
    .dar-shop-wrapper {
        display: block !important;
        width: 100% !important;
    }

    .dar-shop-main {
        width: 100% !important;
        display: block !important;
    }

    /* Shop Toolbar Mobile Layout & Overflow Prevention */
    .dar-shop-toolbar {
        padding: 12px 14px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .dar-shop-result-count {
        width: 100% !important;
        font-size: 0.84rem !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .dar-shop-toolbar-actions {
        display: grid !important;
        grid-template-columns: 110px 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        align-items: center !important;
    }

    .dar-mobile-filter-btn {
        width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        background-color: var(--dar-olive) !important;
        color: var(--dar-cream) !important;
        border: 1px solid var(--dar-terracotta) !important;
        padding: 8px 10px !important;
        border-radius: var(--radius-sm) !important;
        font-family: var(--font-body) !important;
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        transition: var(--transition) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    }

    .dar-mobile-filter-btn:hover {
        background-color: var(--dar-terracotta) !important;
        color: #fff !important;
    }

    .dar-order-form,
    .woocommerce-ordering {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .dar-sort-select,
    .dar-shop-toolbar select.orderby,
    .woocommerce-ordering select.orderby {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        padding: 8px 24px 8px 10px !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        border-radius: var(--radius-sm) !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    [dir="rtl"] .dar-sort-select,
    [dir="rtl"] .dar-shop-toolbar select.orderby,
    [dir="rtl"] .woocommerce-ordering select.orderby,
    html[lang="ar"] .dar-sort-select,
    html[lang="ar"] .woocommerce-ordering select.orderby {
        padding: 8px 10px 8px 24px !important;
    }

    /* Off-Canvas Shop Filter Drawer: Full Height, Zero Bottom Gap */
    .dar-shop-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 320px !important;
        max-width: 85vw !important;
        height: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100% !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        z-index: 999999 !important;
        background-color: var(--dar-cream-light) !important;
        border-radius: 0 !important;
        border: none !important;
        border-right: 3px solid var(--dar-terracotta) !important;
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.35) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 24px 20px 40px !important;
        transform: translateX(-105%) !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s !important;
    }

    body.admin-bar .dar-shop-sidebar {
        height: calc(100% - 46px) !important;
        height: calc(100dvh - 46px) !important;
    }

    @media (min-width: 783px) {
        body.admin-bar .dar-shop-sidebar {
            top: 32px !important;
            height: calc(100% - 32px) !important;
            height: calc(100dvh - 32px) !important;
        }
    }

    .dar-shop-sidebar.active {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* RTL Support for Off-Canvas Filter Drawer (Slides from Right in Arabic) */
    [dir="rtl"] .dar-shop-sidebar,
    html[lang="ar"] .dar-shop-sidebar {
        left: auto !important;
        right: 0 !important;
        border-right: none !important;
        border-left: 3px solid var(--dar-terracotta) !important;
        box-shadow: -4px 0 30px rgba(0, 0, 0, 0.35) !important;
        transform: translateX(105%) !important;
    }

    [dir="rtl"] .dar-shop-sidebar.active,
    html[lang="ar"] .dar-shop-sidebar.active {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .sidebar-mobile-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-bottom: 14px !important;
        margin-bottom: 20px !important;
        border-bottom: 2px solid var(--dar-cream-dark) !important;
    }

    .sidebar-mobile-header h3 {
        font-size: 1.15rem !important;
        color: var(--dar-olive) !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    .sidebar-close-btn {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: var(--dar-cream) !important;
        border: 1px solid var(--dar-cream-dark) !important;
        color: var(--dar-olive) !important;
        font-size: 1.15rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: var(--transition) !important;
    }

    .sidebar-close-btn:hover {
        background: var(--dar-terracotta) !important;
        color: #fff !important;
    }

    .dar-sidebar-overlay {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(37, 48, 39, 0.6) !important;
        backdrop-filter: blur(4px) !important;
        z-index: 999990 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }

    .dar-sidebar-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ==========================================================================
   HOMEPAGE MOBILE TYPOGRAPHY & 2-COLUMN PRODUCTS GRID (Requirements #3 & #4)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Global Paragraphs & Body Scaling on Mobile */
    body, p {
        font-size: 0.88rem !important;
        line-height: 1.65 !important;
        font-weight: 400 !important;
    }

    /* 2. Hero Section Mobile Typography & Layout */
    .dar-hero {
        min-height: 30vh !important;
        padding: 20px 0 !important;
    }
    .hero-star-logo {
        width: 60px !important;
        margin: 0 auto 10px !important;
    }
    .hero-badge {
        font-size: 0.68rem !important;
        padding: 4px 12px !important;
        margin-bottom: 10px !important;
    }
    .hero-title-badge {
        font-size: 1.3rem !important;
        padding: 6px 18px !important;
        margin-bottom: 10px !important;
    }
    .hero-badge i {
        font-size: 0.64rem !important;
    }
    .hero-title {
        font-size: 1.3rem !important;
        line-height: 1.28 !important;
        margin-bottom: 12px !important;
    }
    .hero-invitation {
        font-size: 0.9rem !important;
        line-height: 1.58 !important;
        margin-bottom: 10px !important;
        font-weight: 400 !important;
    }
    .hero-welcome-sub {
        font-size: 0.82rem !important;
        margin-bottom: 20px !important;
        font-weight: 400 !important;
    }
    .hero-cta-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 330px !important;
        margin: 0 auto !important;
    }
    .hero-cta-group .btn-primary,
    .hero-cta-group .btn-outline-cream {
        width: auto !important;
        flex: 1 1 0 !important;
        justify-content: center !important;
        font-size: 0.72rem !important;
        padding: 7px 10px !important;
        min-height: 34px !important;
        height: 34px !important;
        white-space: nowrap !important;
        gap: 5px !important;
        border-radius: var(--radius-sm) !important;
    }
    .hero-cta-group .btn-primary i,
    .hero-cta-group .btn-outline-cream i {
        font-size: 0.72rem !important;
    }

    /* 3. Section Headers Mobile Typography */
    .section-header {
        margin: 0 auto 24px !important;
    }
    .section-eyebrow {
        font-size: 0.76rem !important;
        margin-bottom: 8px !important;
        gap: 6px !important;
    }
    .section-title {
        font-size: 1.25rem !important;
        line-height: 1.35 !important;
        margin-bottom: 10px !important;
    }
    .section-desc {
        font-size: 0.84rem !important;
        line-height: 1.55 !important;
        font-weight: 400 !important;
    }

    /* 4. About Brief Mobile Typography */
    .about-brief-lead {
        font-size: 0.84rem !important;
        line-height: 1.6 !important;
        font-weight: 400 !important;
        margin-bottom: 18px !important;
    }
    .about-brief-card .btn-primary {
        font-size: 0.82rem !important;
        padding: 10px 18px !important;
    }
    .value-pill {
        width: 150px;
        justify-content: center;
    }

    /* 5. Categories Section Mobile Typography */
    .category-content h3 {
        font-size: 1.12rem !important;
        margin-bottom: 6px !important;
    }
    .category-content p {
        font-size: 0.8rem !important;
        line-height: 1.48 !important;
        margin-bottom: 10px !important;
        font-weight: 400 !important;
    }
    .category-count {
        font-size: 0.7rem !important;
        margin-bottom: 6px !important;
    }
    .category-link {
        font-size: 0.78rem !important;
        gap: 6px !important;
    }

    /* 6. Dâr Stories Mobile Typography */
    .story-content h3 {
        font-size: 1.02rem !important;
        line-height: 1.38 !important;
        margin-bottom: 8px !important;
    }
    .story-content p {
        font-size: 0.82rem !important;
        line-height: 1.58 !important;
        font-weight: 400 !important;
    }
    .story-stitch-name {
        font-size: 0.72rem !important;
        margin-bottom: 6px !important;
    }
    .story-region-tag {
        font-size: 0.68rem !important;
        padding: 4px 10px !important;
    }
    .story-artisan-footer {
        font-size: 0.74rem !important;
        gap: 6px !important;
    }

    /* 7. Impact Section Mobile Typography & Spacing */
    .dar-impact-section {
        padding: 50px 0 !important;
    }
    .dar-impact-section::after {
        background-size: 36px 37.1px !important;
        opacity: 0.075 !important;
    }
    .impact-split {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        margin-bottom: 24px !important;
    }
    .impact-pillars {
        gap: 14px !important;
    }
    .impact-pillar-item {
        padding: 18px 16px !important;
    }
    .impact-media {
        min-height: 260px !important;
        max-height: 380px !important;
    }
    .impact-stats-box,
    .impact-stats-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 20px 14px !important;
    }
    .stat-item {
        padding: 14px 8px !important;
    }
    .impact-pillar-item h3 {
        font-size: 0.98rem !important;
        margin-bottom: 6px !important;
    }
    .impact-pillar-item p {
        font-size: 0.82rem !important;
        line-height: 1.55 !important;
        font-weight: 400 !important;
    }
    .stat-item .stat-number {
        font-size: 1.5rem !important;
        margin-bottom: 4px !important;
    }
    .stat-item .stat-label {
        font-size: 0.74rem !important;
        line-height: 1.35 !important;
    }

    /* 8. Events & Workshops Mobile Typography */
    .event-card h3 {
        font-size: 1.02rem !important;
        line-height: 1.38 !important;
        margin-bottom: 8px !important;
    }
    .event-card p {
        font-size: 0.82rem !important;
        line-height: 1.58 !important;
        font-weight: 400 !important;
        margin-bottom: 14px !important;
    }
    .event-meta strong {
        font-size: 0.82rem !important;
    }
    .event-meta span {
        font-size: 0.74rem !important;
    }
    .event-btn {
        font-size: 0.78rem !important;
        padding: 8px 14px !important;
    }

    /* 9. All General Buttons on Mobile */
    .btn-primary,
    .btn-secondary,
    .btn-outline-cream,
    .btn-cart-view,
    .btn-cart-checkout,
    .btn-whatsapp-order {
        font-size: 0.8rem !important;
        padding: 10px 8px !important;
        white-space: nowrap !important;
    }

    /* Cart & Checkout Page Total Actions on Mobile (Match Güvenli Ödemeye Geç, Siparişi Onayla & WhatsApp ile Sipariş Ver) */
    .dar-cart-totals-card .btn-primary,
    .dar-cart-totals-card #place_order,
    .dar-cart-totals-card .btn-whatsapp-order {
        font-size: 0.95rem !important;
        padding: 13px 16px !important;
        white-space: normal !important;
        min-height: 48px !important;
        line-height: 1.3 !important;
        box-sizing: border-box !important;
    }
    .dar-cart-totals-card .btn-whatsapp-order i,
    .dar-cart-totals-card .btn-primary i {
        font-size: 1.15rem !important;
    }
    .cart-drawer-footer {
        padding: 16px 14px !important;
    }
    .cart-drawer-actions {
        gap: 8px !important;
    }

    /* 10. Requirement #4: Exactly 2 Products Per Row on Mobile */
    .products-grid,
    .dar-shop-main .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
    }
    .product-card {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        border-radius: var(--radius-sm) !important;
    }
    .product-media {
        height: 180px !important;
    }
    .product-body {
        padding: 12px 10px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
    .product-category-tag {
        font-size: 0.68rem !important;
        margin-bottom: 4px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }
    .product-title {
        font-size: 0.88rem !important;
        line-height: 1.35 !important;
        margin-bottom: 6px !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }
    .product-title a {
        word-break: normal !important;
        overflow-wrap: break-word !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .product-story-snippet {
        font-size: 0.74rem !important;
        line-height: 1.35 !important;
        margin-bottom: 8px !important;
        padding-top: 6px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .product-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        margin-top: auto !important;
    }
    .product-price {
        font-size: 0.94rem !important;
        text-align: center !important;
        align-items: center !important;
        gap: 0 !important;
    }
    .product-footer .add-to-cart-btn,
    .product-card .add-to-cart-btn {
        width: 100% !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        justify-content: center !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
        line-height: 1 !important;
        font-size: 0.74rem !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }
    .product-footer .add-to-cart-btn span,
    .product-card .add-to-cart-btn span {
        white-space: nowrap !important;
    }

    /* Single Product Title on Mobile */
    .single-product-summary h1 {
        font-size: 1.35rem !important;
        line-height: 1.35 !important;
        margin-bottom: 12px !important;
    }

    .single-purchase-row .add-to-cart-btn {
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 24px !important;
        font-size: 1rem !important;
        flex: 1 !important;
    }

    .dar-product-description-section {
        margin-top: 40px !important;
        padding: 28px 20px !important;
    }
    .product-description-header .section-title {
        font-size: 1.35rem !important;
    }
    .product-description-body {
        font-size: 0.94rem !important;
    }

    .dar-related-products-section {
        margin-top: 48px !important;
        padding-top: 36px !important;
    }
    .related-products-header {
        margin-bottom: 24px !important;
    }
    .related-products-header .section-title {
        font-size: 1.45rem !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 12px !important;
        padding-top: 20px !important;
    }
    .footer-copyright-wrap {
        font-size: 0.78rem !important;
        line-height: 1.55 !important;
        text-align: center !important;
        width: 100% !important;
    }
}

@media (max-width: 560px) {
    .offerings-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .impact-stats-box,
    .impact-stats-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 18px 12px !important;
    }
    .products-grid,
    .dar-shop-main .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .product-media {
        height: 160px !important;
    }
    .single-product-summary h1 {
        font-size: 1.18rem !important;
        line-height: 1.35 !important;
    }
    .footer-copyright-wrap {
        font-size: 0.72rem !important;
        line-height: 1.55 !important;
    }
    .topbar-slogan {
        display: none !important;
    }
}

/* ==========================================================================
   Back To Top Button (Fixed Bottom Left)
   ========================================================================== */
.dar-scroll-top-btn {
    position: fixed;
    bottom: 26px;
    left: 26px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--dar-olive);
    color: var(--dar-cream) !important;
    border: 2px solid rgba(247, 237, 223, 0.4);
    box-shadow: 0 8px 24px rgba(55, 70, 57, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    cursor: pointer;
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.9);
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.25s ease,
                border-color 0.25s ease,
                box-shadow 0.25s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.dar-scroll-top-btn:hover {
    background-color: var(--dar-terracotta);
    border-color: var(--dar-terracotta);
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 28px rgba(178, 84, 38, 0.45);
}

.dar-scroll-top-btn:active {
    transform: translateY(0) scale(0.96);
}

.dar-scroll-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

@media (max-width: 768px) {
    .dar-scroll-top-btn {
        bottom: 20px;
        left: 20px;
        width: 42px;
        height: 42px;
        font-size: 0.95rem;
    }
}

/* ==========================================================================
   Gentle Entrance Reveal Animations (دخول انيميشن خفيف لطيف)
   ========================================================================== */
.dar-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.dar-reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger Delays for Cards and Grid Elements */
.dar-stagger-1 { transition-delay: 0.08s; }
.dar-stagger-2 { transition-delay: 0.16s; }
.dar-stagger-3 { transition-delay: 0.24s; }
.dar-stagger-4 { transition-delay: 0.32s; }
.dar-stagger-5 { transition-delay: 0.40s; }
.dar-stagger-6 { transition-delay: 0.48s; }

/* Safe Fallback for Users with Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .dar-reveal,
    .hero-star-logo,
    .dar-hero-content .hero-badge,
    .dar-hero-content .hero-cta-group {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   THEME MODE TOGGLE & DARK / LIGHT SYSTEM (الوضع النهاري والليلي)
   ========================================================================== */

/* 1. Dual Logo Visibility (Day / Night) */
.dar-logo .logo-dark,
.offcanvas-logo .logo-dark {
    display: none !important;
}
.dar-logo .logo-light,
.offcanvas-logo .logo-light {
    display: block !important;
}

html.dar-dark-mode .dar-logo .logo-light,
html.dar-dark-mode .offcanvas-logo .logo-light {
    display: none !important;
}
html.dar-dark-mode .dar-logo .logo-dark,
html.dar-dark-mode .offcanvas-logo .logo-dark {
    display: block !important;
}

/* 2. Theme Toggle Button Icons Switch */
.dar-theme-toggle-btn .icon-sun {
    display: none !important;
}
.dar-theme-toggle-btn .icon-moon {
    display: inline-block !important;
}

html.dar-dark-mode .dar-theme-toggle-btn .icon-sun {
    display: inline-block !important;
    color: var(--dar-terracotta) !important;
}
html.dar-dark-mode .dar-theme-toggle-btn .icon-moon {
    display: none !important;
}

/* 3. Header Theme Toggle (Sticky Header) */
.dar-header-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    background-color: var(--dar-olive);
    color: var(--dar-cream);
    border: 1.5px solid var(--dar-olive);
    cursor: pointer;
    transition: var(--transition);
    font-size: 1.05rem;
    box-sizing: border-box;
    padding: 0;
}

.dar-header-theme-toggle:hover {
    background-color: var(--dar-terracotta);
    border-color: var(--dar-terracotta);
    color: var(--dar-cream);
    transform: translateY(-1px);
}

.dar-header-theme-toggle i {
    color: var(--dar-terracotta);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
}

.dar-header-theme-toggle:hover i {
    color: var(--dar-cream, #f7eddf) !important;
    transform: rotate(18deg) scale(1.15);
}

html.dar-dark-mode .dar-header-theme-toggle {
    background-color: rgba(247, 237, 223, 0.08);
    color: #f7eddf;
    border-color: rgba(247, 237, 223, 0.2);
}

html.dar-dark-mode .dar-header-theme-toggle:hover {
    background-color: var(--dar-terracotta);
    border-color: var(--dar-terracotta);
    color: #ffffff;
}

html.dar-dark-mode .dar-header-theme-toggle i {
    color: var(--dar-terracotta) !important;
}

/* 4. Topbar Theme Toggle (Desktop) */
.dar-topbar-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(247, 237, 223, 0.1);
    border: 1px solid rgba(247, 237, 223, 0.25);
    color: var(--dar-cream);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.dar-topbar-theme-toggle:hover {
    background: rgba(247, 237, 223, 0.2);
    border-color: rgba(247, 237, 223, 0.45);
}

.dar-topbar-theme-toggle i {
    color: var(--dar-terracotta-light);
    font-size: 0.85rem;
}

/* Mobile Theme Toggle Trigger in Topbar */
.mobile-prefs-trigger.dar-theme-toggle-btn {
    border-color: rgba(247, 237, 223, 0.3);
}

/* 5. Offcanvas Drawer Theme Switch */
.offcanvas-theme-item {
    border-bottom: 1px solid rgba(55, 70, 57, 0.12);
    margin-bottom: 6px;
    padding-bottom: 4px;
}

.offcanvas-theme-switch-pill {
    display: inline-flex;
    align-items: center;
    width: 46px;
    height: 24px;
    border-radius: 12px;
    background-color: rgba(55, 70, 57, 0.25);
    position: relative;
    transition: var(--transition);
    border: 1px solid rgba(55, 70, 57, 0.35);
    flex-shrink: 0;
}

.offcanvas-theme-switch-pill .pill-knob {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--dar-olive);
    color: var(--dar-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    position: absolute;
    left: 2px;
    top: 2px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
}

[dir="rtl"] .offcanvas-theme-switch-pill .pill-knob,
html[lang="ar"] .offcanvas-theme-switch-pill .pill-knob {
    left: auto;
    right: 2px;
}

html.dar-dark-mode .offcanvas-theme-switch-pill {
    background-color: var(--dar-terracotta);
    border-color: var(--dar-terracotta);
}

html.dar-dark-mode .offcanvas-theme-switch-pill .pill-knob {
    transform: translateX(22px);
    background-color: #ffffff;
    color: #d25f2d;
}

[dir="rtl"] html.dar-dark-mode .offcanvas-theme-switch-pill .pill-knob,
html[lang="ar"].dar-dark-mode .offcanvas-theme-switch-pill .pill-knob {
    transform: translateX(-22px);
}

@media (max-width: 991px) {
    .dar-header-theme-toggle {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
    }
    .dar-topbar-theme-toggle {
        display: none !important;
    }
}

/* ==========================================================================
   6. GLOBAL DARK MODE PALETTE & COMPONENT STYLING
   ========================================================================== */
html.dar-dark-mode,
body.dar-dark-mode {
    --dar-cream: #141c15;
    --dar-cream-dark: #1a241b;
    --dar-cream-light: #202c21;
    --dar-olive: #f7eddf;
    --dar-olive-dark: #0c120d;
    --dar-olive-light: #d1c5b4;
    --dar-terracotta: #d25f2d;
    --dar-terracotta-light: #e67d4d;
    --dar-gold-accent: #dfb47e;
    --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.55);
    --shadow-hover: 0 18px 42px rgba(0, 0, 0, 0.75);
    color-scheme: dark;
}

html.dar-dark-mode body {
    background-color: var(--dar-cream);
    color: var(--dar-olive);
}

/* Header & Sticky */
html.dar-dark-mode .dar-header {
    background-color: rgba(20, 28, 21, 0.94);
    border-bottom: 2px solid rgba(247, 237, 223, 0.12);
}

html.dar-dark-mode .dar-header.is-sticky {
    background-color: rgba(16, 23, 17, 0.98);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.65);
}

html.dar-dark-mode .dar-nav-link {
    color: var(--dar-olive);
}

html.dar-dark-mode .dar-nav-link:hover,
html.dar-dark-mode .dar-nav-link.active {
    color: var(--dar-terracotta-light);
}

html.dar-dark-mode .cart-trigger {
    background-color: rgba(247, 237, 223, 0.08);
    color: #f7eddf !important;
    border-color: rgba(247, 237, 223, 0.2);
}

html.dar-dark-mode .cart-trigger:hover {
    background-color: var(--dar-terracotta);
    border-color: var(--dar-terracotta);
    color: #ffffff !important;
}

html.dar-dark-mode .mobile-menu-toggle {
    background-color: #f7eddf;
    border-color: #f7eddf;
    color: #141c15;
}

html.dar-dark-mode .mobile-menu-toggle i {
    color: #141c15;
}

/* Topbar */
html.dar-dark-mode .dar-topbar {
    background-color: #0c120d;
    border-bottom-color: rgba(247, 237, 223, 0.08);
}

html.dar-dark-mode .mobile-prefs-trigger {
    background: rgba(247, 237, 223, 0.08);
    border-color: rgba(247, 237, 223, 0.2);
    color: #f7eddf;
}

/* Submenu & Dropdowns */
html.dar-dark-mode .dar-submenu,
html.dar-dark-mode .dar-dropdown-menu {
    background-color: #202c21;
    border-color: rgba(247, 237, 223, 0.16);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
}

html.dar-dark-mode .dar-dropdown-item {
    color: #f7eddf;
}

html.dar-dark-mode .dar-dropdown-item:hover,
html.dar-dark-mode .dar-dropdown-item.active {
    background-color: rgba(247, 237, 223, 0.1);
}

/* Modals */
html.dar-dark-mode .dar-modal-dialog {
    background-color: #202c21;
    border-color: rgba(247, 237, 223, 0.18);
    color: #f7eddf;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8);
}

html.dar-dark-mode .dar-modal-header {
    border-bottom-color: rgba(247, 237, 223, 0.12);
}

html.dar-dark-mode .dar-modal-item {
    background-color: #172118;
    border-color: rgba(247, 237, 223, 0.15);
    color: #f7eddf;
}

html.dar-dark-mode .dar-modal-item:hover,
html.dar-dark-mode .dar-modal-item.active {
    border-color: var(--dar-terracotta);
}

/* Mobile Offcanvas Drawer */
html.dar-dark-mode .dar-offcanvas {
    background-color: #141c15;
    color: #f7eddf;
}

html.dar-dark-mode .offcanvas-header {
    background-color: #0c120d;
    border-bottom-color: rgba(247, 237, 223, 0.12);
}

html.dar-dark-mode .offcanvas-nav-link {
    color: #f7eddf;
    border-bottom-color: rgba(247, 237, 223, 0.08);
}

html.dar-dark-mode .offcanvas-footer {
    background-color: #0c120d;
    border-top-color: rgba(247, 237, 223, 0.1);
}

/* Cart Drawer */
html.dar-dark-mode .cart-drawer {
    background-color: #141c15;
    color: #f7eddf;
}

html.dar-dark-mode .cart-drawer-header {
    background-color: #0c120d;
}

html.dar-dark-mode .cart-drawer-item {
    background-color: #202c21;
    border-color: rgba(247, 237, 223, 0.1);
}

html.dar-dark-mode .cart-item-info h4,
html.dar-dark-mode .cart-drawer-title-link,
html.dar-dark-mode .cart-drawer-qty-val,
html.dar-dark-mode .cart-subtotal-row {
    color: #f7eddf;
}

html.dar-dark-mode .cart-drawer-qty-selector {
    background-color: #172118;
    border-color: rgba(247, 237, 223, 0.18);
}

html.dar-dark-mode .cart-drawer-qty-btn {
    color: #f7eddf;
}

html.dar-dark-mode .cart-drawer-footer {
    background-color: #0c120d;
    border-top-color: rgba(247, 237, 223, 0.1);
}

/* Sections & Cards */
html.dar-dark-mode .dar-about-section {
    background-color: var(--dar-cream);
}

html.dar-dark-mode .about-brief-card {
    background-color: #202c21;
    border-color: rgba(178, 84, 38, 0.35);
}

html.dar-dark-mode .about-brief-card::before,
html.dar-dark-mode .about-brief-card::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='48' viewBox='0 0 24 48'%3E%3Cpath fill='%23B25426' d='M0 0h8v8H0V0zm8 8h8v8H8V8zm8 8h8v8h-8v-8zM8 24h8v8H8v-8zM0 32h8v8H0v-32z'/%3E%3Cpath fill='%23F7EDDF' d='M16 0h8v8h-8V0zM0 16h8v8H0v-8zm16 16h8v8h-8v-8zM8 40h8v8H8v-8z'/%3E%3C/svg%3E");
    opacity: 0.75;
}

html.dar-dark-mode .about-brief-lead {
    color: #d1c5b4;
}

html.dar-dark-mode .about-tatreez-frame {
    background-color: #202c21;
    border-color: rgba(178, 84, 38, 0.35);
}

html.dar-dark-mode .about-tatreez-frame::before,
html.dar-dark-mode .about-tatreez-frame::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='48' viewBox='0 0 24 48'%3E%3Cpath fill='%23B25426' d='M0 0h8v8H0V0zm8 8h8v8H8V8zm8 8h8v8h-8v-8zM8 24h8v8H8v-8zM0 32h8v8H0v-32z'/%3E%3Cpath fill='%23F7EDDF' d='M16 0h8v8h-8V0zM0 16h8v8H0v-8zm16 16h8v8h-8v-8zM8 40h8v8H8v-8z'/%3E%3C/svg%3E") !important;
    opacity: 0.75 !important;
}

html.dar-dark-mode .about-emblem-card {
    background-color: #172118;
    border: 1px solid rgba(247, 237, 223, 0.15);
}

html.dar-dark-mode .values-title {
    color: var(--dar-terracotta-light) !important;
}

html.dar-dark-mode .value-pill,
html.dar-dark-mode .value-pill b,
.values-pills .value-pill,
.values-pills .value-pill b {
    color: #f7eddf !important;
}

html.dar-dark-mode .value-pill {
    background-color: rgba(247, 237, 223, 0.1) !important;
    border-color: rgba(247, 237, 223, 0.28) !important;
}

html.dar-dark-mode .value-pill i {
    color: var(--dar-terracotta-light) !important;
}

html.dar-dark-mode .offering-card {
    background-color: #202c21 !important;
    border-color: rgba(247, 237, 223, 0.14) !important;
}

html.dar-dark-mode .offering-card h4 {
    color: #f7eddf !important;
}

html.dar-dark-mode .offering-card p {
    color: #d1c5b4 !important;
}

html.dar-dark-mode .tatreez-divider {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23B25426' d='M24 0h8v4h-8V0zm-4 4h4v4h-4V4zm12 0h4v4h-4V4zm-16 4h4v4h-4V8zm20 0h4v4h-4V8zM12 12h4v4h-4v-4zm28 0h4v4h-4v-4zM16 16h4v4h-4v-4zm20 0h4v4h-4v-4zm-16 4h4v4h-4v-4zm12 0h4v4h-4v-4zm-8 4h8v4h-8v-4z'/%3E%3Cpath fill='%23F7EDDF' d='M26 10h4v8h-4v-8zm-2 2h8v4h-8v-4zM0 12h4v4H0v-4zm52 0h4v4h-4v-4zM4 8h4v4H4V8zm44 0h4v4h-4V8zM4 16h4v4H4v-4zm44 0h4v4h-4v-4z'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.85;
}

/* Product Cards & Shop */
html.dar-dark-mode .product-card {
    background-color: #202c21;
    border: 1px solid rgba(247, 237, 223, 0.12);
}

html.dar-dark-mode .product-body {
    background-color: #202c21;
}

html.dar-dark-mode .product-title a {
    color: #f7eddf;
}

html.dar-dark-mode .product-title a:hover {
    color: var(--dar-terracotta-light);
}

html.dar-dark-mode .product-story-snippet {
    color: #d1c5b4;
}

html.dar-dark-mode .dar-shop-sidebar {
    background-color: #202c21;
    border-color: rgba(178, 84, 38, 0.35);
}

html.dar-dark-mode .sidebar-widget {
    border-bottom-color: rgba(247, 237, 223, 0.12);
}

html.dar-dark-mode .sidebar-widget-title {
    color: #f7eddf;
}

html.dar-dark-mode .sidebar-cat-list a {
    background-color: #172118;
    color: #f7eddf;
}

html.dar-dark-mode .sidebar-cat-list a:hover,
html.dar-dark-mode .sidebar-cat-list a.active {
    background-color: var(--dar-terracotta);
    color: #ffffff;
}

html.dar-dark-mode .dar-shop-toolbar {
    background-color: #202c21;
    border-color: rgba(178, 84, 38, 0.3);
}

html.dar-dark-mode .dar-shop-result-count {
    color: #f7eddf;
}

html.dar-dark-mode .dar-sort-select,
html.dar-dark-mode .dar-shop-toolbar select.orderby {
    background-color: #172118;
    border-color: rgba(247, 237, 223, 0.2);
    color: #f7eddf;
}

html.dar-dark-mode .dar-page-num {
    background-color: #202c21;
    border-color: rgba(247, 237, 223, 0.18);
    color: #f7eddf;
}

/* Empty Shop Notice Dark Mode */
html.dar-dark-mode .dar-empty-shop-notice {
    background-color: #202c21 !important;
    border-color: rgba(247, 237, 223, 0.15) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4) !important;
}

html.dar-dark-mode .dar-empty-shop-notice i.fa-box-open {
    color: var(--dar-terracotta) !important;
}

html.dar-dark-mode .dar-empty-shop-notice h3 {
    color: #f7eddf !important;
}

html.dar-dark-mode .dar-empty-shop-notice p {
    color: rgba(247, 237, 223, 0.75) !important;
}

/* Stories & Events */
html.dar-dark-mode body.post-type-archive-dar_story,
html.dar-dark-mode body.post-type-archive-dar_story main.dar-stories-section,
html.dar-dark-mode .dar-stories-section {
    background-color: #172118 !important;
}

html.dar-dark-mode .story-card,
html.dar-dark-mode body.post-type-archive-dar_story .story-card {
    background-color: #202c21 !important;
    border: 1px solid rgba(247, 237, 223, 0.12) !important;
}

html.dar-dark-mode .story-content h3 {
    color: #f7eddf;
}

html.dar-dark-mode .story-content p {
    color: #d1c5b4;
}

html.dar-dark-mode .story-artisan-footer {
    color: #d1c5b4;
    border-top: 1px dashed rgba(247, 237, 223, 0.12);
}

html.dar-dark-mode .event-card {
    background-color: #202c21;
    border-color: rgba(247, 237, 223, 0.12);
}

html.dar-dark-mode .event-card h3 {
    color: #f7eddf;
}

html.dar-dark-mode .event-card p {
    color: #d1c5b4;
}

html.dar-dark-mode .event-btn {
    border-color: rgba(247, 237, 223, 0.35);
    color: #f7eddf;
}

html.dar-dark-mode .event-btn:hover {
    background-color: var(--dar-terracotta);
    border-color: var(--dar-terracotta);
    color: #ffffff;
}

/* Single Product Page */
html.dar-dark-mode .single-product-gallery {
    background-color: #202c21;
    border-color: rgba(178, 84, 38, 0.35);
}

html.dar-dark-mode .gallery-main-viewport {
    background-color: #172118;
}

html.dar-dark-mode .gallery-thumb-item {
    background-color: #172118;
}

html.dar-dark-mode .single-product-summary h1 {
    color: #f7eddf;
}

html.dar-dark-mode .single-product-desc {
    color: #d1c5b4;
}

html.dar-dark-mode .piece-story-box {
    background-color: #202c21;
    border-color: rgba(178, 84, 38, 0.35);
}

html.dar-dark-mode .piece-story-box p {
    color: #d1c5b4;
}

html.dar-dark-mode .single-product-beden-wrapper {
    border-top-color: rgba(247, 237, 223, 0.12);
    border-bottom-color: rgba(247, 237, 223, 0.12);
}

html.dar-dark-mode .beden-label {
    color: #f7eddf;
}

html.dar-dark-mode .dar-beden-btn {
    background-color: #172118;
    border-color: rgba(247, 237, 223, 0.2);
    color: #f7eddf;
}

html.dar-dark-mode .dar-beden-btn:hover {
    background-color: #2b392d;
    border-color: var(--dar-terracotta);
    color: var(--dar-terracotta-light);
}

html.dar-dark-mode .qty-selector {
    background-color: #172118;
    border-color: rgba(247, 237, 223, 0.2);
}

html.dar-dark-mode .qty-btn,
html.dar-dark-mode .qty-input {
    color: #f7eddf;
}

/* Single Product Add to Cart Button in Dark Mode */
html.dar-dark-mode .single-purchase-row .add-to-cart-btn,
html.dar-dark-mode .single-product-summary .add-to-cart-btn,
html.dar-dark-mode .single-product .single_add_to_cart_button,
html.dar-dark-mode .single-product .add-to-cart-btn {
    background-color: var(--dar-terracotta) !important;
    border: 2px solid var(--dar-terracotta) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 18px rgba(210, 95, 45, 0.45) !important;
}

html.dar-dark-mode .single-purchase-row .add-to-cart-btn span,
html.dar-dark-mode .single-purchase-row .add-to-cart-btn i,
html.dar-dark-mode .single-product-summary .add-to-cart-btn span,
html.dar-dark-mode .single-product-summary .add-to-cart-btn i,
html.dar-dark-mode .single-product .single_add_to_cart_button span,
html.dar-dark-mode .single-product .single_add_to_cart_button i,
html.dar-dark-mode .single-product .add-to-cart-btn span,
html.dar-dark-mode .single-product .add-to-cart-btn i {
    color: #ffffff !important;
}

html.dar-dark-mode .single-purchase-row .add-to-cart-btn:hover,
html.dar-dark-mode .single-product-summary .add-to-cart-btn:hover,
html.dar-dark-mode .single-product .single_add_to_cart_button:hover,
html.dar-dark-mode .single-product .add-to-cart-btn:hover {
    background-color: var(--dar-terracotta-dark) !important;
    border-color: var(--dar-terracotta-dark) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

html.dar-dark-mode .product-trust-badges {
    border-top-color: rgba(247, 237, 223, 0.14);
}

html.dar-dark-mode .trust-badge-item {
    background-color: #202c21;
    border-color: rgba(247, 237, 223, 0.1);
    color: #f7eddf;
}

html.dar-dark-mode .dar-product-description-section {
    background-color: #202c21;
    border-color: rgba(178, 84, 38, 0.35);
}

html.dar-dark-mode .product-description-header {
    border-bottom-color: rgba(247, 237, 223, 0.12);
}

html.dar-dark-mode .product-description-header .section-title,
html.dar-dark-mode .product-description-body {
    color: #f7eddf;
}

html.dar-dark-mode .dar-related-products-section {
    border-top-color: rgba(178, 84, 38, 0.35);
}

html.dar-dark-mode .related-products-header .section-title {
    color: #f7eddf;
}

/* Cart & Checkout Pages */
html.dar-dark-mode .dar-cart-table-card,
html.dar-dark-mode .dar-cart-totals-card {
    background-color: #202c21;
    border-color: rgba(178, 84, 38, 0.3);
}

html.dar-dark-mode .dar-cart-card-header {
    border-bottom-color: rgba(247, 237, 223, 0.12);
    color: #f7eddf;
}

html.dar-dark-mode .dar-cart-item-row {
    border-bottom-color: rgba(247, 237, 223, 0.1);
}

html.dar-dark-mode .dar-cart-item-name a,
html.dar-dark-mode .dar-cart-item-name {
    color: #f7eddf;
}

html.dar-dark-mode .summary-line {
    border-bottom-color: rgba(247, 237, 223, 0.1);
    color: #d1c5b4;
}

html.dar-dark-mode .dar-coupon-bar {
    border-top-color: rgba(247, 237, 223, 0.12) !important;
}

html.dar-dark-mode .btn-cart-view,
html.dar-dark-mode .dar-coupon-bar .btn-cart-view,
html.dar-dark-mode .dar-coupon-bar button[name="apply_coupon"],
html.dar-dark-mode .dar-coupon-bar #dar-apply-coupon-btn {
    border-color: rgba(247, 237, 223, 0.35) !important;
    color: #f7eddf !important;
    background-color: transparent !important;
    transition: all 0.3s ease, var(--transition) !important;
}

html.dar-dark-mode .btn-cart-view i,
html.dar-dark-mode .btn-cart-view span,
html.dar-dark-mode .dar-coupon-bar .btn-cart-view i,
html.dar-dark-mode .dar-coupon-bar .btn-cart-view span,
html.dar-dark-mode .dar-coupon-bar button[name="apply_coupon"] i,
html.dar-dark-mode .dar-coupon-bar button[name="apply_coupon"] span,
html.dar-dark-mode .dar-coupon-bar #dar-apply-coupon-btn i,
html.dar-dark-mode .dar-coupon-bar #dar-apply-coupon-btn span {
    color: #f7eddf !important;
    transition: all 0.3s ease, var(--transition) !important;
}

html.dar-dark-mode .btn-cart-view:hover,
html.dar-dark-mode .dar-coupon-bar .btn-cart-view:hover,
html.dar-dark-mode .dar-coupon-bar button[name="apply_coupon"]:hover,
html.dar-dark-mode .dar-coupon-bar #dar-apply-coupon-btn:hover {
    background-color: var(--dar-terracotta) !important;
    border-color: var(--dar-terracotta) !important;
    color: #ffffff !important;
}

html.dar-dark-mode .btn-cart-view:hover i,
html.dar-dark-mode .btn-cart-view:hover span,
html.dar-dark-mode .dar-coupon-bar .btn-cart-view:hover i,
html.dar-dark-mode .dar-coupon-bar .btn-cart-view:hover span,
html.dar-dark-mode .dar-coupon-bar button[name="apply_coupon"]:hover i,
html.dar-dark-mode .dar-coupon-bar button[name="apply_coupon"]:hover span,
html.dar-dark-mode .dar-coupon-bar #dar-apply-coupon-btn:hover i,
html.dar-dark-mode .dar-coupon-bar #dar-apply-coupon-btn:hover span {
    color: #ffffff !important;
}

html.dar-dark-mode #dar-coupon-feedback,
html.dar-dark-mode #dar-cart-coupon-feedback {
    background-color: rgba(247, 237, 223, 0.08) !important;
    color: #f7eddf !important;
    border: 1px solid rgba(247, 237, 223, 0.18) !important;
}

html.dar-dark-mode .dar-input {
    background-color: #172118;
    border-color: rgba(247, 237, 223, 0.2);
    color: #f7eddf;
}

html.dar-dark-mode .dar-input:focus {
    background-color: #202c21;
    border-color: var(--dar-terracotta);
    color: #ffffff;
}

html.dar-dark-mode .dar-payment-option {
    background-color: #172118;
    border-color: rgba(247, 237, 223, 0.16);
    color: #f7eddf;
}

html.dar-dark-mode .dar-payment-option label {
    color: #f7eddf;
}

/* My Account */
html.dar-dark-mode .dar-account-nav-card {
    background-color: #0c120d;
}

html.dar-dark-mode .dar-account-content-card {
    background-color: #202c21;
    border-color: rgba(178, 84, 38, 0.3);
}

html.dar-dark-mode .dar-orders-table th {
    background-color: #172118;
    color: #f7eddf;
    border-bottom-color: rgba(247, 237, 223, 0.15);
}

html.dar-dark-mode .dar-orders-table td {
    border-bottom-color: rgba(247, 237, 223, 0.1);
    color: #d1c5b4;
}

@media (max-width: 680px) {
    html.dar-dark-mode .dar-orders-table tbody tr {
        background: #172118;
        border-color: rgba(247, 237, 223, 0.15);
    }

    html.dar-dark-mode .dar-orders-table tbody tr:hover {
        background: #172118;
    }

    html.dar-dark-mode .dar-orders-table td {
        border-bottom-color: rgba(247, 237, 223, 0.1);
    }

    html.dar-dark-mode .dar-orders-table td::before {
        color: #d1c5b4;
    }
}

html.dar-dark-mode .dar-endpoint-back-bar {
    border-bottom-color: rgba(247, 237, 223, 0.2);
}

html.dar-dark-mode .dar-endpoint-back-bar .btn-cart-view {
    color: var(--dar-terracotta);
    border-color: var(--dar-terracotta);
}

html.dar-dark-mode .dar-endpoint-back-bar .btn-cart-view:hover {
    background-color: var(--dar-terracotta);
    color: #ffffff;
}

html.dar-dark-mode .dar-account-content-card h2,
html.dar-dark-mode .dar-account-content-card h3,
html.dar-dark-mode .dar-account-content-card h4,
html.dar-dark-mode .dar-account-content-card label,
html.dar-dark-mode .dar-account-content-card address {
    color: #f7eddf;
}

html.dar-dark-mode .dar-account-content-card h2 {
    border-bottom-color: rgba(247, 237, 223, 0.15);
}

html.dar-dark-mode .dar-account-content-card input.input-text,
html.dar-dark-mode .dar-account-content-card input[type="text"],
html.dar-dark-mode .dar-account-content-card input[type="email"],
html.dar-dark-mode .dar-account-content-card input[type="password"],
html.dar-dark-mode .dar-account-content-card input[type="tel"],
html.dar-dark-mode .dar-account-content-card select,
html.dar-dark-mode .dar-account-content-card textarea,
html.dar-dark-mode .dar-account-content-card .select2-container--default .select2-selection--single {
    background-color: #172118;
    border-color: rgba(247, 237, 223, 0.2);
    color: #f7eddf;
}

html.dar-dark-mode .dar-account-content-card input.input-text:focus,
html.dar-dark-mode .dar-account-content-card input[type="text"]:focus,
html.dar-dark-mode .dar-account-content-card input[type="email"]:focus,
html.dar-dark-mode .dar-account-content-card input[type="password"]:focus,
html.dar-dark-mode .dar-account-content-card input[type="tel"]:focus,
html.dar-dark-mode .dar-account-content-card select:focus,
html.dar-dark-mode .dar-account-content-card textarea:focus {
    background-color: #202c21;
    border-color: var(--dar-terracotta);
    color: #ffffff;
}

html.dar-dark-mode .dar-account-content-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f7eddf;
}

html.dar-dark-mode .dar-account-content-card fieldset {
    background-color: rgba(23, 33, 24, 0.6);
    border-color: rgba(178, 84, 38, 0.4);
}

html.dar-dark-mode .dar-account-content-card > p:first-of-type {
    background-color: rgba(178, 84, 38, 0.15);
    color: #f7eddf;
}

html.dar-dark-mode .dar-account-content-card table.woocommerce-table--order-details {
    background-color: #172118;
    border-color: rgba(247, 237, 223, 0.15);
}

html.dar-dark-mode .dar-account-content-card table.woocommerce-table--order-details thead th,
html.dar-dark-mode .dar-account-content-card table.woocommerce-table--order-details tfoot th {
    background-color: #111a12;
    color: #f7eddf;
    border-bottom-color: rgba(247, 237, 223, 0.15);
}

html.dar-dark-mode .dar-account-content-card table.woocommerce-table--order-details td {
    color: #d1c5b4;
    border-bottom-color: rgba(247, 237, 223, 0.1);
}

html.dar-dark-mode .dar-account-content-card table.woocommerce-table--order-details tbody td a {
    color: #f7eddf;
}

html.dar-dark-mode .dar-account-content-card table.woocommerce-table--order-details tfoot td {
    background-color: #172118;
    color: #f7eddf;
    border-top-color: rgba(247, 237, 223, 0.15);
}

html.dar-dark-mode .dar-account-content-card .woocommerce-column {
    background-color: #172118;
    border-color: rgba(247, 237, 223, 0.15);
}

html.dar-dark-mode .dar-account-content-card .woocommerce-column h2,
html.dar-dark-mode .dar-account-content-card .woocommerce-column__title {
    border-bottom-color: rgba(247, 237, 223, 0.15);
    color: #f7eddf;
}

html.dar-dark-mode .btn-story-read {
    background-color: var(--dar-terracotta);
    border-color: var(--dar-terracotta);
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

html.dar-dark-mode .btn-story-read:hover {
    background-color: #c76132;
    border-color: #c76132;
}

/* Scroll To Top */
html.dar-dark-mode .dar-scroll-top-btn {
    background-color: #202c21;
    border-color: rgba(247, 237, 223, 0.3);
    color: #f7eddf !important;
}

html.dar-dark-mode .dar-scroll-top-btn:hover {
    background-color: var(--dar-terracotta);
    border-color: var(--dar-terracotta);
    color: #ffffff !important;
}

/* ==========================================================================
   7. DARK MODE COMPREHENSIVE REFINEMENTS (Items 1-13)
   ========================================================================== */

/* 1. Hero Badge & 'Hikâyemizi Tanıyın' CTA Button (Light Colors on Hero) */
.hero-badge,
.dar-hero-content .hero-badge,
html.dar-dark-mode .hero-badge,
html.dar-dark-mode .dar-hero-content .hero-badge {
    color: #f7eddf !important;
    background: rgba(178, 84, 38, 0.35) !important;
    border-color: rgba(230, 125, 77, 0.65) !important;
}

.hero-badge span,
.hero-badge i,
.dar-hero-content .hero-badge span,
.dar-hero-content .hero-badge i,
html.dar-dark-mode .hero-badge span,
html.dar-dark-mode .hero-badge i,
html.dar-dark-mode .dar-hero-content .hero-badge span,
html.dar-dark-mode .dar-hero-content .hero-badge i {
    color: #f7eddf !important;
}



/* Hero CTA Button: 'تعرّف على حكايتنا' (Hikâyemizi Tanıyın / Discover Our Story) - Fixed Olive & Cream Style matching Light Mode */
.btn-outline-cream,
.dar-hero-content .btn-outline-cream,
html.dar-dark-mode .btn-outline-cream,
html.dar-dark-mode .dar-hero-content .btn-outline-cream {
    background: #374639 !important;
    background-color: #374639 !important;
    border: none !important;
    color: #f7eddf !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22) !important;
}

.btn-outline-cream span,
.btn-outline-cream i,
.dar-hero-content .btn-outline-cream span,
.dar-hero-content .btn-outline-cream i,
html.dar-dark-mode .btn-outline-cream span,
html.dar-dark-mode .btn-outline-cream i,
html.dar-dark-mode .dar-hero-content .btn-outline-cream span,
html.dar-dark-mode .dar-hero-content .btn-outline-cream i {
    color: #f7eddf !important;
}

.btn-outline-cream:hover,
.dar-hero-content .btn-outline-cream:hover,
html.dar-dark-mode .btn-outline-cream:hover,
html.dar-dark-mode .dar-hero-content .btn-outline-cream:hover {
    background: #b25426 !important;
    background-color: #b25426 !important;
    border: none !important;
    border-color: transparent !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28) !important;
}

.btn-outline-cream:hover span,
.btn-outline-cream:hover i,
.dar-hero-content .btn-outline-cream:hover span,
.dar-hero-content .btn-outline-cream:hover i,
html.dar-dark-mode .btn-outline-cream:hover span,
html.dar-dark-mode .btn-outline-cream:hover i,
html.dar-dark-mode .dar-hero-content .btn-outline-cream:hover span,
html.dar-dark-mode .dar-hero-content .btn-outline-cream:hover i {
    color: #ffffff !important;
}

/* All Orange Primary Buttons (Hero, About, Cart, Checkout, Add to Cart): Always Light Text in Dark Mode */
.btn-primary,
.btn-cart-checkout,
.dar-hero-content .btn-primary,
html.dar-dark-mode .btn-primary,
html.dar-dark-mode .btn-cart-checkout,
html.dar-dark-mode #place_order,
html.dar-dark-mode .add-to-cart-btn.btn-primary,
html.dar-dark-mode button.btn-primary,
html.dar-dark-mode a.btn-primary,
html.dar-dark-mode input[type="submit"].btn-primary,
html.dar-dark-mode .woocommerce-Button.btn-primary,
html.dar-dark-mode .woocommerce-button.btn-primary,
html.dar-dark-mode .dar-hero-content .btn-primary,
html.dar-dark-mode .btn-terracotta {
    color: #f7eddf !important;
}

.btn-primary span,
.btn-primary i,
.btn-cart-checkout span,
.btn-cart-checkout i,
.dar-hero-content .btn-primary span,
.dar-hero-content .btn-primary i,
html.dar-dark-mode .btn-primary span,
html.dar-dark-mode .btn-primary i,
html.dar-dark-mode .btn-cart-checkout span,
html.dar-dark-mode .btn-cart-checkout i,
html.dar-dark-mode #place_order span,
html.dar-dark-mode #place_order i,
html.dar-dark-mode .add-to-cart-btn.btn-primary span,
html.dar-dark-mode .add-to-cart-btn.btn-primary i,
html.dar-dark-mode .dar-hero-content .btn-primary span,
html.dar-dark-mode .dar-hero-content .btn-primary i,
html.dar-dark-mode .btn-terracotta span,
html.dar-dark-mode .btn-terracotta i {
    color: #f7eddf !important;
}

.btn-primary:hover,
.btn-cart-checkout:hover,
.dar-hero-content .btn-primary:hover,
html.dar-dark-mode .btn-primary:hover,
html.dar-dark-mode .btn-cart-checkout:hover,
html.dar-dark-mode #place_order:hover,
html.dar-dark-mode .add-to-cart-btn.btn-primary:hover,
html.dar-dark-mode button.btn-primary:hover,
html.dar-dark-mode a.btn-primary:hover,
html.dar-dark-mode .dar-hero-content .btn-primary:hover,
html.dar-dark-mode .btn-terracotta:hover {
    color: #ffffff !important;
}

.btn-primary:hover span,
.btn-primary:hover i,
.btn-cart-checkout:hover span,
.btn-cart-checkout:hover i,
.dar-hero-content .btn-primary:hover span,
.dar-hero-content .btn-primary:hover i,
html.dar-dark-mode .btn-primary:hover span,
html.dar-dark-mode .btn-primary:hover i,
html.dar-dark-mode .btn-cart-checkout:hover span,
html.dar-dark-mode .btn-cart-checkout:hover i,
html.dar-dark-mode #place_order:hover span,
html.dar-dark-mode #place_order:hover i,
html.dar-dark-mode .add-to-cart-btn.btn-primary:hover span,
html.dar-dark-mode .add-to-cart-btn.btn-primary:hover i,
html.dar-dark-mode .dar-hero-content .btn-primary:hover span,
html.dar-dark-mode .dar-hero-content .btn-primary:hover i,
html.dar-dark-mode .btn-terracotta:hover span,
html.dar-dark-mode .btn-terracotta:hover i {
    color: #ffffff !important;
}

/* 2. Topbar Slogan Light Text */
.dar-topbar,
html.dar-dark-mode .dar-topbar {
    color: #f7eddf !important;
}

.topbar-slogan,
.topbar-slogan span,
html.dar-dark-mode .topbar-slogan,
html.dar-dark-mode .topbar-slogan span {
    color: #f7eddf !important;
}

.topbar-slogan i,
html.dar-dark-mode .topbar-slogan i {
    color: var(--dar-terracotta-light) !important;
}

/* Topbar Controls & Dropdowns (Always Light Typography in Dark Mode) */
.dar-topbar .topbar-controls,
html.dar-dark-mode .dar-topbar .topbar-controls,
.dar-topbar .topbar-controls span,
html.dar-dark-mode .dar-topbar .topbar-controls span {
    color: #f7eddf;
}

html.dar-dark-mode .dar-dropdown-toggle,
html.dar-dark-mode .dar-dropdown-toggle span,
html.dar-dark-mode #current-lang-label,
html.dar-dark-mode #current-curr-label {
    color: #f7eddf !important;
}

html.dar-dark-mode .dar-dropdown-toggle {
    background: rgba(247, 237, 223, 0.08) !important;
    border: 1px solid rgba(247, 237, 223, 0.22) !important;
}

html.dar-dark-mode .dar-dropdown-toggle:hover,
html.dar-dark-mode .dar-dropdown.open .dar-dropdown-toggle {
    background: rgba(178, 84, 38, 0.28) !important;
    border-color: var(--dar-terracotta-light) !important;
}

html.dar-dark-mode .dar-dropdown-toggle i.icon-main {
    color: var(--dar-terracotta-light) !important;
}

html.dar-dark-mode .dar-dropdown-toggle i.icon-caret {
    color: rgba(247, 237, 223, 0.75) !important;
}

html.dar-dark-mode .dar-dropdown-menu {
    background-color: #202c21 !important;
    border: 1px solid rgba(247, 237, 223, 0.16) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7) !important;
}

html.dar-dark-mode .dar-dropdown-item,
html.dar-dark-mode .dar-dropdown-item span,
html.dar-dark-mode .dar-topbar .dar-dropdown-menu span {
    color: #f7eddf !important;
}

html.dar-dark-mode .dar-dropdown-item:hover,
html.dar-dark-mode .dar-dropdown-item.active {
    background-color: rgba(247, 237, 223, 0.12) !important;
}

html.dar-dark-mode .dar-dropdown-item:hover span,
html.dar-dark-mode .dar-dropdown-item.active span {
    color: #ffffff !important;
}

html.dar-dark-mode .dar-dropdown-item i.check-icon {
    color: var(--dar-terracotta-light) !important;
}

/* Mobile Topbar Triggers (Language, Currency & Theme) */
html.dar-dark-mode .mobile-prefs-trigger,
html.dar-dark-mode .mobile-prefs-trigger span,
html.dar-dark-mode #mobile-prefs-lang,
html.dar-dark-mode #mobile-prefs-curr,
html.dar-dark-mode .theme-toggle-mobile-text {
    color: #f7eddf !important;
}

html.dar-dark-mode .mobile-prefs-trigger {
    background: rgba(247, 237, 223, 0.08) !important;
    border: 1px solid rgba(247, 237, 223, 0.22) !important;
}

html.dar-dark-mode .mobile-prefs-trigger:hover {
    background: rgba(178, 84, 38, 0.28) !important;
    border-color: var(--dar-terracotta-light) !important;
}

.mobile-prefs-trigger i.fa-globe,
.mobile-prefs-trigger i.fa-coins,
.mobile-prefs-trigger > i:first-child,
html.dar-dark-mode .mobile-prefs-trigger i.fa-globe,
html.dar-dark-mode .mobile-prefs-trigger i.fa-coins,
html.dar-dark-mode .mobile-prefs-trigger > i:first-child {
    color: var(--dar-terracotta-light) !important;
}

.mobile-prefs-trigger i.fa-chevron-down,
html.dar-dark-mode .mobile-prefs-trigger i.fa-chevron-down {
    color: rgba(247, 237, 223, 0.75) !important;
}

html.dar-dark-mode .mobile-prefs-trigger.dar-theme-toggle-btn i.icon-sun {
    color: var(--dar-terracotta) !important;
}

/* 4. Unified Header Buttons (Account, Cart & Theme Toggle Symmetry - Icon Only) */
.header-actions .cart-trigger,
.header-actions .header-account-btn,
.header-actions .dar-header-theme-toggle {
    width: 42px;
    height: 42px;
    min-width: 42px;
    max-width: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    background-color: var(--dar-olive);
    border: 1.5px solid var(--dar-olive);
    color: var(--dar-cream);
    cursor: pointer;
    transition: var(--transition);
}

.header-actions .cart-label-text {
    display: none !important;
}

.header-actions .cart-trigger .cart-count {
    position: absolute;
    top: -6px;
    inset-inline-end: -6px;
    width: 20px;
    height: 20px;
    min-width: 20px;
    max-width: 20px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--dar-terracotta);
    color: #ffffff !important;
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid var(--dar-cream-light);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    z-index: 5;
}

.header-actions .header-account-btn i,
.header-actions .cart-trigger i,
.header-actions .dar-header-theme-toggle i,
.header-actions .mobile-menu-toggle i,
html:not(.dar-dark-mode) .header-actions .header-account-btn i,
html:not(.dar-dark-mode) .header-actions .cart-trigger i,
html:not(.dar-dark-mode) .header-actions .dar-header-theme-toggle i,
html:not(.dar-dark-mode) .header-actions .mobile-menu-toggle i {
    color: var(--dar-cream, #f7eddf) !important;
    font-size: 1.05rem;
    transition: var(--transition);
}

/* Light Mode: Green Header Buttons on Hover (Background turns Terracotta Orange, Icon & Text turn Light Cream) */
.header-actions .header-account-btn:hover,
.header-actions .cart-trigger:hover,
.header-actions .dar-header-theme-toggle:hover,
.cart-trigger:hover,
.header-account-btn:hover,
.dar-header-theme-toggle:hover {
    background-color: var(--dar-terracotta) !important;
    border-color: var(--dar-terracotta) !important;
    color: var(--dar-cream, #f7eddf) !important;
}

.header-actions .header-account-btn:hover i,
.header-actions .cart-trigger:hover i,
.header-actions .dar-header-theme-toggle:hover i,
.cart-trigger:hover i,
.header-account-btn:hover i,
.dar-header-theme-toggle:hover i,
.cart-trigger:hover .cart-label-text,
.header-account-btn:hover .cart-label-text {
    color: var(--dar-cream, #f7eddf) !important;
}

.header-actions .dar-header-theme-toggle:hover i {
    transform: rotate(18deg) scale(1.15);
}

.header-actions .cart-trigger:hover .cart-count,
.cart-trigger:hover .cart-count {
    background-color: var(--dar-cream, #f7eddf) !important;
    color: var(--dar-terracotta, #b25426) !important;
}

.add-to-cart-btn:hover i,
.product-card .add-to-cart-btn:hover i,
.product-footer .add-to-cart-btn:hover i {
    color: var(--dar-cream, #f7eddf) !important;
}

html.dar-dark-mode .header-actions .cart-trigger,
html.dar-dark-mode .header-actions .header-account-btn,
html.dar-dark-mode .dar-header-theme-toggle {
    background-color: rgba(247, 237, 223, 0.08) !important;
    border: 1.5px solid rgba(247, 237, 223, 0.2) !important;
    color: #f7eddf !important;
    height: 42px !important;
}

html.dar-dark-mode .header-actions .header-account-btn i,
html.dar-dark-mode .header-actions .cart-trigger i {
    color: var(--dar-terracotta-light) !important;
}

html.dar-dark-mode .header-actions .cart-trigger .cart-count {
    border-color: #141c15 !important;
}

html.dar-dark-mode .header-actions .cart-trigger:hover,
html.dar-dark-mode .header-actions .header-account-btn:hover,
html.dar-dark-mode .dar-header-theme-toggle:hover {
    background-color: var(--dar-terracotta) !important;
    border-color: var(--dar-terracotta) !important;
    color: #ffffff !important;
}

html.dar-dark-mode .header-actions .cart-trigger:hover i,
html.dar-dark-mode .header-actions .header-account-btn:hover i,
html.dar-dark-mode .dar-header-theme-toggle:hover i {
    color: #ffffff !important;
}

/* 5 & 10. Strikethrough Old Price (Soft Light with Subtle Opacity) */
html.dar-dark-mode del,
html.dar-dark-mode del.dar-old-price,
html.dar-dark-mode .dar-old-price,
html.dar-dark-mode .product-price del,
html.dar-dark-mode .single-product-price del,
html.dar-dark-mode .product-price del.dar-old-price,
html.dar-dark-mode .single-product-price del.dar-old-price,
html.dar-dark-mode .price del,
html.dar-dark-mode .price del .woocommerce-Price-amount {
    color: rgba(247, 237, 223, 0.55) !important;
    text-decoration: line-through !important;
    text-decoration-color: rgba(247, 237, 223, 0.45) !important;
    opacity: 1 !important;
}

/* 6. Shop Category Cards (Light Typography in Dark Mode) */
html.dar-dark-mode .category-card,
html.dar-dark-mode .category-content,
html.dar-dark-mode .category-content h3,
html.dar-dark-mode .category-content p,
html.dar-dark-mode .category-link,
html.dar-dark-mode .category-count {
    color: #f7eddf !important;
}

html.dar-dark-mode .category-link {
    border-bottom-color: var(--dar-terracotta) !important;
}

html.dar-dark-mode .category-link:hover {
    color: var(--dar-terracotta-light) !important;
}

/* 7. Impact & Solidarity Section Dark Heritage Styling */
html.dar-dark-mode .dar-impact-section {
    background-color: var(--dar-cream) !important;
    color: #f7eddf !important;
}

html.dar-dark-mode .dar-impact-section::after {
    background-image: url('assets/images/tatreez-star-pattern.svg') !important;
    opacity: 0.08 !important;
}

html.dar-dark-mode .dar-impact-section .section-title {
    color: #f7eddf !important;
}

html.dar-dark-mode .dar-impact-section .section-desc {
    color: rgba(247, 237, 223, 0.85) !important;
}

html.dar-dark-mode .impact-pillar-item {
    background: rgba(20, 28, 21, 0.8) !important;
    border-left: 3px solid var(--dar-terracotta) !important;
}

html.dar-dark-mode .impact-pillar-item h3 {
    color: #f7eddf !important;
}

html.dar-dark-mode .impact-pillar-item p {
    color: rgba(247, 237, 223, 0.82) !important;
}

html.dar-dark-mode .impact-media {
    border-color: rgba(247, 237, 223, 0.15) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35) !important;
}

html.dar-dark-mode .impact-stats-box,
html.dar-dark-mode .impact-stats-row {
    background: rgba(20, 28, 21, 0.9) !important;
    border: 2px solid rgba(178, 84, 38, 0.45) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important;
}

html.dar-dark-mode .impact-stats-box .stat-item,
html.dar-dark-mode .impact-stats-row .stat-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px dashed rgba(247, 237, 223, 0.16) !important;
}

html.dar-dark-mode .stat-number {
    color: var(--dar-terracotta-light) !important;
}

html.dar-dark-mode .stat-label {
    color: rgba(247, 237, 223, 0.88) !important;
}

/* 8. Quantity Selector Light Typography & Subtle Underline */
html.dar-dark-mode .single-purchase-row .qty-selector,
html.dar-dark-mode .qty-selector {
    background-color: transparent !important;
    border-bottom: 2px solid rgba(247, 237, 223, 0.35) !important;
}

html.dar-dark-mode .single-purchase-row .qty-selector .qty-btn,
html.dar-dark-mode .single-purchase-row .qty-selector .qty-input,
html.dar-dark-mode .qty-selector .qty-btn,
html.dar-dark-mode .qty-selector .qty-input,
html.dar-dark-mode .qty-btn,
html.dar-dark-mode .qty-input {
    color: #f7eddf !important;
}

html.dar-dark-mode .single-purchase-row .qty-selector .qty-btn:hover,
html.dar-dark-mode .qty-selector .qty-btn:hover {
    color: var(--dar-terracotta-light) !important;
}

/* 9. Size (Beden) Active / Selected Option in Brand Terracotta Orange */
html.dar-dark-mode .dar-beden-btn.active,
html.dar-dark-mode .dar-beden-btn.selected,
html.dar-dark-mode .dar-beden-btn:active,
html.dar-dark-mode input[name="beden"]:checked + .dar-beden-btn {
    background-color: var(--dar-terracotta) !important;
    border-color: var(--dar-terracotta) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(210, 95, 45, 0.5) !important;
}

/* 11. Single Product Gallery Navigation Arrows Light */
html.dar-dark-mode .gallery-arrow-btn,
html.dar-dark-mode .gallery-arrow-btn.prev,
html.dar-dark-mode .gallery-arrow-btn.next {
    background: rgba(32, 44, 33, 0.9) !important;
    border-color: rgba(247, 237, 223, 0.28) !important;
    color: #f7eddf !important;
}

html.dar-dark-mode .gallery-arrow-btn i,
html.dar-dark-mode .gallery-arrow-btn.next i,
html.dar-dark-mode .gallery-arrow-btn.prev i {
    color: #f7eddf !important;
}

html.dar-dark-mode .gallery-arrow-btn:hover,
html.dar-dark-mode .gallery-arrow-btn:hover i {
    background: var(--dar-terracotta) !important;
    border-color: var(--dar-terracotta) !important;
    color: #ffffff !important;
}

/* 12. Page Banners H1 & Breadcrumbs Light Typography */
.dar-page-banner h1,
html.dar-dark-mode .dar-page-banner h1,
html.dar-dark-mode .dar-page-banner {
    color: #f7eddf !important;
}

html.dar-dark-mode .dar-breadcrumbs,
html.dar-dark-mode .dar-breadcrumbs a,
html.dar-dark-mode .dar-breadcrumbs span {
    color: rgba(247, 237, 223, 0.85) !important;
}

/* 13. My Account Profile Username Light */
.account-user-name,
html.dar-dark-mode .account-user-name,
html.dar-dark-mode .account-user-profile strong {
    color: #f7eddf !important;
}

html.dar-dark-mode .account-user-profile span {
    color: rgba(247, 237, 223, 0.75) !important;
}

/* ==========================================================================
   8. DARK MODE ADDITIONAL REFINEMENTS (Offcanvas, Social, Cart Drawer & Trash Icon)
   ========================================================================== */

/* 1. Offcanvas Social Icons (Bright Light Icons & Soft Background in Dark Mode) */
html.dar-dark-mode .offcanvas-social-list a {
    background-color: rgba(247, 237, 223, 0.1) !important;
    border: 1px solid rgba(247, 237, 223, 0.25) !important;
    color: #f7eddf !important;
}

html.dar-dark-mode .offcanvas-social-list a i {
    color: #f7eddf !important;
}

html.dar-dark-mode .offcanvas-social-list a:hover {
    background-color: var(--dar-terracotta) !important;
    border-color: var(--dar-terracotta) !important;
    color: #ffffff !important;
}

html.dar-dark-mode .offcanvas-social-list a:hover i {
    color: #ffffff !important;
}

html.dar-dark-mode .offcanvas-social-title {
    color: rgba(247, 237, 223, 0.75) !important;
}

/* 2. Offcanvas Theme Item as Last Item Styling */
.offcanvas-theme-item {
    border-top: 1px solid rgba(55, 70, 57, 0.12);
    border-bottom: none !important;
    margin-top: 10px;
    padding-top: 10px;
}

html.dar-dark-mode .offcanvas-theme-item {
    border-top: 1px solid rgba(247, 237, 223, 0.12) !important;
    border-bottom: none !important;
}

/* 3. Footer Dark Mode Background & Instagram Account Handle (@filistinmirasmerkezi_dar) */
html.dar-dark-mode .dar-footer {
    background-color: var(--dar-cream-dark) !important;
}

.footer-social a,
.footer-social a span,
html.dar-dark-mode .footer-social a,
html.dar-dark-mode .footer-social a span {
    color: #f7eddf !important;
}

.footer-social a i,
html.dar-dark-mode .footer-social a i {
    color: var(--dar-terracotta-light) !important;
}

html.dar-dark-mode .footer-social a:hover,
html.dar-dark-mode .footer-social a:hover span {
    color: var(--dar-terracotta-light) !important;
}

/* 4. Cart Drawer Quantity Control (Dark Background with Light Controls) */
html.dar-dark-mode .cart-drawer-qty-ctrl,
html.dar-dark-mode .cart-drawer-qty-selector {
    background-color: #172118 !important;
    border: 1px solid rgba(247, 237, 223, 0.2) !important;
}

html.dar-dark-mode .cart-drawer-qty-ctrl .cart-drawer-qty-btn,
html.dar-dark-mode .cart-drawer-qty-btn {
    background: transparent !important;
    color: #f7eddf !important;
}

html.dar-dark-mode .cart-drawer-qty-ctrl .cart-drawer-qty-btn:hover {
    background-color: rgba(247, 237, 223, 0.1) !important;
    color: var(--dar-terracotta-light) !important;
}

html.dar-dark-mode .cart-drawer-qty-ctrl .cart-drawer-qty-val,
html.dar-dark-mode .cart-drawer-qty-val {
    color: #f7eddf !important;
}

/* 5. Cart Drawer Header Title & Close 'X' Button Light */
html.dar-dark-mode .cart-drawer-header h3,
html.dar-dark-mode .cart-drawer-header h3 span {
    color: #f7eddf !important;
}

html.dar-dark-mode .cart-drawer-header h3 i {
    color: var(--dar-terracotta-light) !important;
}

html.dar-dark-mode .cart-drawer-close,
html.dar-dark-mode .cart-drawer-close i,
html.dar-dark-mode .cart-drawer-close .fa-xmark {
    color: #f7eddf !important;
    border: 1px solid rgba(247, 237, 223, 0.25) !important;
    background-color: rgba(247, 237, 223, 0.08) !important;
}

html.dar-dark-mode .cart-drawer-close:hover {
    background-color: var(--dar-terracotta) !important;
    border-color: var(--dar-terracotta) !important;
    color: #ffffff !important;
}

html.dar-dark-mode .cart-drawer-close:hover i {
    color: #ffffff !important;
}

/* 6. Trash Can (Kaldır) Icon Light Typography in Dark Mode */
html.dar-dark-mode .cart-item-remove,
html.dar-dark-mode .cart-item-remove i,
html.dar-dark-mode .cart-item-remove .fa-trash-can,
html.dar-dark-mode i.fa-trash-can {
    color: rgba(247, 237, 223, 0.75) !important;
}

html.dar-dark-mode .cart-item-remove:hover,
html.dar-dark-mode .cart-item-remove:hover i,
html.dar-dark-mode .cart-item-remove:hover .fa-trash-can {
    color: #ff6b6b !important;
}

/* ==========================================================================
   9. MOBILE HEADER ACTIONS (Light Mode Circular & Dark Menu Toggle)
   ========================================================================== */
@media (max-width: 991px) {
    .header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* 1. Light Mode on Mobile: Circular Theme Toggle, Account & Cart with Light Background */
    .header-actions .dar-header-theme-toggle,
    .header-actions .header-account-btn,
    .header-actions .cart-trigger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        position: relative !important;
        background-color: var(--dar-olive) !important;
        border: 1.5px solid var(--dar-olive) !important;
        color: var(--dar-cream) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        flex: none !important;
    }

    .header-actions .cart-label-text {
        display: none !important;
    }

    .header-actions .dar-header-theme-toggle i,
    .header-actions .header-account-btn i,
    .header-actions .cart-trigger i,
    .header-actions .mobile-menu-toggle i {
        color: var(--dar-cream, #f7eddf) !important;
        font-size: 1rem !important;
    }

    .header-actions .dar-header-theme-toggle:hover,
    .header-actions .header-account-btn:hover,
    .header-actions .cart-trigger:hover {
        background-color: var(--dar-cream-light) !important;
        border-color: var(--dar-terracotta) !important;
    }

    .header-actions .dar-header-theme-toggle:hover i,
    .header-actions .header-account-btn:hover i,
    .header-actions .cart-trigger:hover i {
        color: var(--dar-terracotta) !important;
    }

    /* Cart Badge on Mobile Circular Cart */
    .header-actions .cart-trigger .cart-count {
        position: absolute !important;
        top: -4px !important;
        inset-inline-end: -4px !important;
        width: 19px !important;
        height: 19px !important;
        font-size: 0.68rem !important;
        font-weight: 700 !important;
        background-color: var(--dar-terracotta) !important;
        color: #ffffff !important;
        border: 2px solid #ffffff !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 5 !important;
        padding: 0 !important;
    }

    /* 2. Light Mode on Mobile: Menu Toggle Button with Dark Background */
    .mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: var(--dar-olive) !important;
        border: 1.5px solid var(--dar-olive) !important;
        color: var(--dar-cream) !important;
        box-shadow: 0 3px 10px rgba(55, 70, 57, 0.28) !important;
        font-size: 1rem !important;
        cursor: pointer;
        transition: var(--transition);
        flex: none !important;
    }

    .mobile-menu-toggle i {
        color: var(--dar-cream) !important;
        font-size: 1.05rem !important;
    }

    .mobile-menu-toggle:hover {
        background-color: var(--dar-terracotta) !important;
        border-color: var(--dar-terracotta) !important;
        color: #ffffff !important;
    }

    .mobile-menu-toggle:hover i {
        color: #ffffff !important;
    }

    /* 3. Dark Mode Mobile Header Actions Adjustments */
    html.dar-dark-mode .header-actions .dar-header-theme-toggle,
    html.dar-dark-mode .header-actions .header-account-btn,
    html.dar-dark-mode .header-actions .cart-trigger {
        background-color: rgba(247, 237, 223, 0.08) !important;
        border: 1.5px solid rgba(247, 237, 223, 0.2) !important;
        color: #f7eddf !important;
    }

    html.dar-dark-mode .header-actions .header-account-btn i,
    html.dar-dark-mode .header-actions .cart-trigger i {
        color: #f7eddf !important;
    }

    html.dar-dark-mode .header-actions .dar-header-theme-toggle i {
        color: var(--dar-terracotta) !important;
    }

    html.dar-dark-mode .header-actions .cart-trigger .cart-count {
        border-color: #141c15 !important;
    }

    html.dar-dark-mode .mobile-menu-toggle {
        background-color: #f7eddf !important;
        border: 1.5px solid #f7eddf !important;
        color: #141c15 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
    }

    html.dar-dark-mode .mobile-menu-toggle i {
        color: #141c15 !important;
    }

    html.dar-dark-mode .mobile-menu-toggle:hover {
        background-color: var(--dar-terracotta) !important;
        border-color: var(--dar-terracotta) !important;
        color: #ffffff !important;
    }

    html.dar-dark-mode .mobile-menu-toggle:hover i {
        color: #ffffff !important;
    }
}

/* ==========================================================================
   10. FOOTER LANGUAGE SWITCHER (Dil & Lisan Seçimi)
   ========================================================================== */
.footer-lang-switcher {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
}

.footer-lang-pill-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(247, 237, 223, 0.08);
    border: 1px solid rgba(247, 237, 223, 0.22);
    border-radius: 30px;
    padding: 6px 14px;
    transition: var(--transition);
}

.footer-lang-pill-wrap:hover {
    background: rgba(247, 237, 223, 0.14);
    border-color: var(--dar-terracotta-light);
}

.footer-lang-icon {
    color: var(--dar-terracotta-light);
    font-size: 0.95rem;
}

.footer-lang-list {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
}

.footer-lang-item {
    color: #f7eddf;
    font-size: 0.84rem;
    font-weight: 500;
    text-decoration: none;
    font-family: var(--font-body);
    transition: var(--transition);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    line-height: 1.2;
}

.footer-lang-item:hover {
    color: #ffffff;
    background: rgba(204, 107, 59, 0.25);
}

.footer-lang-item.active {
    color: #ffffff !important;
    background-color: var(--dar-terracotta) !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(178, 84, 38, 0.4);
}

.footer-lang-sep {
    color: rgba(247, 237, 223, 0.35);
    font-size: 0.78rem;
    user-select: none;
}