/* ============================================================
/* ============================================================
   WoodCorner — Design System / Brand Variables
   ============================================================ */
@font-face {
    font-family: 'AvenirArabic';
    src: url('/fonts/alfont_com_AlFont_com_AvenirArabic-Medium.otf') format('opentype');
    font-style: normal;
}
/* Hide old bottom-bar usage - not used when inline icons are present */
.wc-mobile-bar { display: none !important; }



:root {
    /* ?? Brand Colors ??????????????????????????????????????????? */
    --wc-primary: #493628; /* Primary Dark Brown          */
    --wc-secondary: #7f583c; /* Secondary Brown             */
    --wc-accent: #b9926d; /* Accent Beige                */
    --wc-accent-light: #d4b49a; /* Light Accent                */
    --wc-accent-pale: #f0e0d0; /* Pale Accent                 */
    --wc-gold: #b9926d; /* Gold = Accent Beige         */
    --wc-gold-light: #d4b49a;
    --wc-gold-pale: #f0e0d0;
    --wc-cream: #faf7f4; /* Warm cream page bg          */
    --wc-light: #f5ede4; /* Off-white section bg        */
    --wc-dark: #1a110a; /* Near black body text        */
    --wc-muted: #7a6050; /* Muted brown subtitles       */
    --wc-border: #e8d5c4; /* Warm border                 */
    --wc-white: #ffffff;
    /* ?? Typography ????????????????????????????????????????????? */
    --wc-font-en: 'AvenirArabic', sans-serif;
    --wc-font-ar: 'AvenirArabic', sans-serif;
    --wc-font-size-base: 1rem;
    --wc-line-height: 1.7;
    /* ?? Spacing ???????????????????????????????????????????????? */
    --wc-section-py: 5rem;
    --wc-card-radius: 1rem;
    --wc-btn-radius: 0.5rem;
    /* ?? Shadows ???????????????????????????????????????????????? */
    --wc-shadow-sm: 0 2px 8px rgba(73, 54, 40, 0.08);
    --wc-shadow-md: 0 6px 24px rgba(73, 54, 40, 0.14);
    --wc-shadow-lg: 0 12px 40px rgba(73, 54, 40, 0.20);
    --wc-shadow-gold: 0 4px 20px rgba(185, 146, 109, 0.30);
    /* ?? Transitions ???????????????????????????????????????????? */
    --wc-transition: all 0.3s ease;
}

/* Footer maps layout: two smaller maps stacked or side-by-side depending on breakpoint */
.wc-footer__map-col { padding: 0; }
.wc-footer__maps { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.wc-footer__map-item { width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 8px; }
.wc-footer__map-item iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 991.98px) {
    .wc-footer__maps { grid-template-columns: 1fr; }
}

/* Secondary title under main logo in footer */
.wc-footer__logo { text-align: center; }
.wc-footer__logo-ar { font-weight: 800; color: var(--wc-primary); }
.wc-footer__logo-en { color: var(--wc-accent); font-size: .9rem; }
.wc-footer__logo-sub { color: var(--wc-muted); font-size: .95rem; margin-top: .25rem; }

/* ?? Google Fonts ??????????????????????????????????????????????? */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ?? Base Reset ????????????????????????????????????????????????? */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--wc-font-ar);
    font-size: var(--wc-font-size-base);
    line-height: var(--wc-line-height);
    color: var(--wc-dark);
    background-color: var(--wc-cream);
}
body.lang-en { font-family: var(--wc-font-en); }

/* ?? Scrollbar ?????????????????????????????????????????????????? */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--wc-light); }
::-webkit-scrollbar-thumb { background: var(--wc-accent); border-radius: 3px; }

/* ?? Selection ?????????????????????????????????????????????????? */
::selection { background: var(--wc-accent-pale); color: var(--wc-primary); }

/* ?? Utilities ?????????????????????????????????????????????????? */
.text-gold         { color: var(--wc-accent) !important; }
.text-primary-wc   { color: var(--wc-primary) !important; }
.text-muted-wc     { color: var(--wc-muted) !important; }
.bg-cream          { background-color: var(--wc-cream) !important; }
.bg-light-wc       { background-color: var(--wc-light) !important; }
.bg-primary-wc     { background-color: var(--wc-primary) !important; }
.bg-gold           { background-color: var(--wc-accent) !important; }
.border-gold       { border-color: var(--wc-accent) !important; }

/* ?? Buttons ???????????????????????????????????????????????????? */
.btn-wc-primary {
    background-color: var(--wc-primary);
    color: var(--wc-white);
    border: 2px solid var(--wc-primary);
    border-radius: var(--wc-btn-radius);
    padding: 0.65rem 1.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: var(--wc-transition);
}
.btn-wc-primary:hover {
    background-color: var(--wc-secondary);
    border-color: var(--wc-secondary);
    color: var(--wc-white);
    box-shadow: var(--wc-shadow-md);
    transform: translateY(-2px);
}

.btn-wc-gold {
    background-color: var(--wc-accent);
    color: var(--wc-white);
    border: 2px solid var(--wc-accent);
    border-radius: var(--wc-btn-radius);
    padding: 0.65rem 1.8rem;
    font-weight: 600;
    transition: var(--wc-transition);
}
.btn-wc-gold:hover {
    background-color: var(--wc-secondary);
    border-color: var(--wc-secondary);
    color: var(--wc-white);
    box-shadow: var(--wc-shadow-gold);
    transform: translateY(-2px);
}

.btn-wc-outline {
    background-color: transparent;
    color: var(--wc-primary);
    border: 2px solid var(--wc-primary);
    border-radius: var(--wc-btn-radius);
    padding: 0.65rem 1.8rem;
    font-weight: 600;
    transition: var(--wc-transition);
}
.btn-wc-outline:hover {
    background-color: var(--wc-primary);
    color: var(--wc-white);
    transform: translateY(-2px);
}

/* ?? Cards ?????????????????????????????????????????????????????? */
.wc-card {
    background: var(--wc-white);
    border-radius: var(--wc-card-radius);
    border: 1px solid var(--wc-border);
    box-shadow: var(--wc-shadow-sm);
    overflow: hidden;
    transition: var(--wc-transition);
}
.wc-card:hover {
    box-shadow: var(--wc-shadow-md);
    transform: translateY(-4px);
}

/* ?? Section Titles ????????????????????????????????????????????? */
.wc-section-title {
    color: var(--wc-primary);
    font-weight: 800;
    position: relative;
    display: inline-block;
    margin-bottom: 0.5rem;
}
.wc-section-title::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 0;
    width: 50px;
    height: 3px;
    background: var(--wc-accent);
    border-radius: 2px;
}
.lang-en .wc-section-title::after { right: auto; left: 0; }

.wc-section-subtitle {
    color: var(--wc-muted);
    font-weight: 400;
    font-size: 1.05rem;
}

/* ?? Eyebrow Labels ????????????????????????????????????????????? */
.wc-eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--wc-accent);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.wc-eyebrow::before, .wc-eyebrow::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--wc-accent);
    opacity: 0.4;
    min-width: 24px;
}

/* ?? Navbar ????????????????????????????????????????????????????? */
.wc-navbar {
    background: rgba(26, 17, 10, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(185, 146, 109, 0.2);
    padding: 0.75rem 0;
    transition: background 0.3s, box-shadow 0.3s, padding 0.3s;
    z-index: 1030;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    overflow: visible !important; /* ensure inline icons are visible */
}

/* Keep navbar padding stable when scrolled to avoid shifting inline icons */
.wc-navbar--scrolled {
    padding: 0.75rem 0 !important;
}
.wc-navbar--scrolled {
    background: rgba(26, 17, 10, 0.98);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(185, 146, 109, 0.25);
}

.wc-navbar__brand {
    display: flex;
    /* Default: stack Arabic + English logo vertically for desktop */
    flex-direction: column;
    align-items: flex-start;
    gap: 0.12rem;
    text-decoration: none !important;
    /* keep brand as a positioning context and prevent logo text wrapping */
    position: relative;
    white-space: nowrap;
}
.wc-navbar__logo-ar {
    font-size: 1rem; /* slightly smaller to prevent wrapping */
    font-weight: 800;
    color: var(--wc-white);
    line-height: 1.1;
    display: block;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.wc-navbar__logo-en {
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: var(--wc-accent);
    display: block;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.wc-nav-link {
    color: rgba(255,255,255,0.95) !important;
    font-weight: 600;
    font-size: 0.85rem; /* slightly smaller for tighter navbar */
    padding: 0.45rem 0.6rem !important;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
    position: relative;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    white-space:nowrap;
}
.wc-nav-link:hover,
.wc-nav-link.active {
    color: var(--wc-accent) !important;
    background: rgba(185, 146, 109, 0.15);
}

.wc-lang-btn {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 0.9rem;
    border-radius: 20px;
    border: 1px solid rgba(185, 146, 109, 0.6);
    color: rgba(255,255,255,0.95);
    background: rgba(0, 0, 0, 0.2);
    transition: var(--wc-transition);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.wc-lang-btn:hover {
    background: var(--wc-accent);
    border-color: var(--wc-accent);
    color: var(--wc-white);
}
.wc-measure-nav-btn {
    background: var(--wc-accent);
    border-color: var(--wc-accent);
    color: var(--wc-white);
    box-shadow: 0 2px 8px rgba(185, 146, 109, 0.3);
}
.wc-measure-nav-btn:hover {
    background: var(--wc-secondary);
    border-color: var(--wc-secondary);
    color: var(--wc-white);
}
.wc-jobs-nav-btn {
    border-color: rgba(185, 146, 109, 0.6);
    color: var(--wc-accent);
}
.wc-jobs-nav-btn:hover {
    background: var(--wc-primary);
    border-color: var(--wc-primary);
    color: var(--wc-white);
}

.navbar-toggler.wc-navbar__toggler {
    border: none;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    outline: none;
    box-shadow: none;
}
.wc-navbar__toggler span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--wc-accent);
    border-radius: 2px;
    transition: var(--wc-transition);
}
@media (min-width: 992px) {
    .wc-navbar .wc-navbar__toggler {
        display: none;
    }
}
/* ?? Hero Section ??????????????????????????????????????????????? */
.wc-hero {
    position: relative;
    min-height: 100vh;
  /*  display: flex;*/
    align-items: center;
    background: var(--wc-primary);
    overflow: hidden;
}
.wc-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.3;
}
.wc-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(73, 54, 40, 0.92) 0%,
        rgba(73, 54, 40, 0.70) 50%,
        rgba(127, 88, 60, 0.60) 100%
    );
}
.wc-hero__content {
    position: relative;
    z-index: 2;
    color: var(--wc-white);
}
.wc-hero__eyebrow { color: var(--wc-accent); }
.wc-hero__title {
    font-size: clamp(2.2rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--wc-white);
    margin-bottom: 1.2rem;
}
.wc-hero__title span { color: var(--wc-accent); }
.wc-hero__desc {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.8);
    max-width: 540px;
    margin-bottom: 2rem;
}
.wc-hero__stats {
    display: flex;
    gap: 2.5rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}
.wc-hero__stat-num {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--wc-accent);
    line-height: 1;
}
.wc-hero__stat-label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.65);
    margin-top: 0.2rem;
}
.wc-hero__scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255,255,255,0.5);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.wc-hero__scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--wc-accent));
    animation: wc-scroll-pulse 2s ease infinite;
}
@keyframes wc-scroll-pulse {
    0%,100% { opacity: 0.4; transform: scaleY(1); }
    50%      { opacity: 1;   transform: scaleY(1.1); }
}

/* Mobile bottom bar */
.wc-mobile-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 62px;
    background: rgba(26,17,10,0.95);
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: 6px 10px;
    align-items: center;
    justify-content: space-around;
    z-index: 1100;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.25);
}
.wc-mobile-bar__item {
    color: var(--wc-white);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.75rem;
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    position: relative;
}
.wc-mobile-bar__item i {
    font-size: 1.1rem;
    display: block;
    color: var(--wc-white) !important;
}
.wc-mobile-bar__label { font-size: .7rem; margin-top: 2px; display:block; }
.wc-mobile-bar .wc-cart-badge {
    position: absolute;
    top: 6px;
    right: 14px;
    background: var(--wc-accent);
    color: var(--wc-white);
    border-radius: 12px;
    padding: 2px 6px;
    font-size: .65rem;
}

/* Offcanvas cart tweaks */
.offcanvas#offcanvasCart .offcanvas-body { padding: 0.75rem; }
.wc-offcanvas-cart-item { display:flex; gap:0.75rem; padding:0.75rem 0; border-bottom:1px solid rgba(0,0,0,0.06); }
.wc-offcanvas-cart-item img { width:64px; height:64px; object-fit:cover; border-radius:6px; }
.wc-offcanvas-cart-item .info { flex:1; }
.wc-offcanvas-cart-item .info h6 { margin:0 0 .25rem 0; font-size: .9rem; }

/* Make cart offcanvas narrower on small screens so it doesn't cover whole viewport */
@media (max-width: 991.98px) {
    .offcanvas#offcanvasCart {
        width: 340px !important;
        max-width: 90vw !important;
    }
}

/* Ensure mobile badges and labels are visible */
.wc-mobile-bar .wc-cart-badge { background: var(--wc-accent); color: #fff; }
.wc-mobile-bar__label, .wc-mobile-bar__item i { color: var(--wc-white); }
.wc-offcanvas-cart-subtotal { display:flex; justify-content:space-between; align-items:center; padding:1rem 0; font-weight:700; }
.wc-offcanvas-cart-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.wc-offcanvas-cart-actions .btn { flex:1; }

/* Offcanvas cart buttons: make outline buttons visible on light background */
.offcanvas#offcanvasCart .wc-offcanvas-cart-actions .btn {
    min-width: 110px;
    padding: .6rem .75rem;
    border-radius: .5rem;
    font-weight: 700;
}
.offcanvas#offcanvasCart .wc-offcanvas-cart-actions .btn.btn-outline-light {
    /* visible border and text on white background */
    border: 1px solid var(--wc-border);
    color: var(--wc-dark);
    background: transparent;
    box-shadow: none;
}
.offcanvas#offcanvasCart .wc-offcanvas-cart-actions .btn.wc-btn-primary {
    background: var(--wc-primary);
    border-color: var(--wc-primary);
    color: var(--wc-white);
}

/* Slight separation and container padding to make buttons stand out */
.offcanvas#offcanvasCart .offcanvas-body { padding: 1rem; background: var(--wc-white); }
.wc-offcanvas-cart-subtotal { margin-top: .5rem; }

@media (min-width: 992px) {
    .wc-mobile-bar { display:none !important; }
}

/* Desktop icons hidden on small screens; inline icons visible on small screens */
.wc-desktop-icons { display: flex; }
.wc-inline-icons { display: none; }
@media (max-width: 991.98px) {
    .wc-desktop-icons { display: none !important; }
    /* position the inline icons next to the brand and nudge them slightly to the right
       translateX moves visually to the right regardless of LTR/RTL, which helps
       avoid overlap with the menu toggle */
    /* Inline icons placed relative to the brand so they stay beside the logo
       and do not wrap under it. Use logical properties so they flip in RTL/LTR. */
    .wc-navbar__brand { flex-direction: row; align-items: center; gap: 0.5rem; }
    .wc-navbar__brand > .wc-inline-icons { display: flex !important; position: absolute; top: 50%; transform: translateY(-50%); z-index:1100; inset-inline-start: calc(100% + 0.5rem); }
    /* RTL: place inline icons to the left of the brand */
    html[dir="rtl"] .wc-navbar__brand > .wc-inline-icons { inset-inline-start: auto; inset-inline-end: calc(100% + 0.5rem); }
}

.wc-inline-icons .wc-navbar-icon {
    padding: .25rem .5rem;
    border-radius: 6px;
    color: var(--wc-white);
    z-index: 1100;
}
.wc-inline-icons .wc-cart-badge { top: 0; right: -6px; background: var(--wc-accent); color: #fff; }

/* ?? Sections ??????????????????????????????????????????????????? */
.wc-section {
    padding: var(--wc-section-py) 0;
}
.wc-section--cream { background: var(--wc-cream); }
.wc-section--light { background: var(--wc-light); }
.wc-section--white { background: var(--wc-white); }
.wc-section--dark  {
    background: var(--wc-primary);
    color: var(--wc-white);
}

/* ?? Project / Product Cards ???????????????????????????????????? */
.wc-project-card {
    background: var(--wc-white);
    border-radius: var(--wc-card-radius);
    border: 1px solid var(--wc-border);
    overflow: hidden;
    transition: var(--wc-transition);
    box-shadow: var(--wc-shadow-sm);
}
.wc-project-card:hover {
    box-shadow: var(--wc-shadow-lg);
    transform: translateY(-6px);
}
.wc-project-card__img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.wc-project-card:hover .wc-project-card__img { transform: scale(1.05); }
.wc-project-card__body {
    padding: 1.2rem 1.4rem;
}
.wc-project-card__cat {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wc-accent);
    margin-bottom: 0.4rem;
}
.wc-project-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--wc-primary);
    margin-bottom: 0.5rem;
}
.wc-project-card__price {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--wc-secondary);
}
.wc-project-card__old-price {
    font-size: 0.85rem;
    color: var(--wc-muted);
    text-decoration: line-through;
}
.wc-project-card__badge {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    background: var(--wc-accent);
    color: var(--wc-white);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}
.wc-project-card__actions {
    display: flex;
    gap: 0.5rem;
    padding: 0 1.4rem 1.2rem;
}

/* ?? Color Swatches ????????????????????????????????????????????? */
.wc-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0.5rem;
}
.wc-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--wc-border);
    cursor: pointer;
    transition: var(--wc-transition);
    position: relative;
}
.wc-swatch:hover,
.wc-swatch.active {
    border-color: var(--wc-primary);
    transform: scale(1.2);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.wc-swatch.active::after {
    content: '?';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* ?? Filters / Tags ????????????????????????????????????????????? */
.wc-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.wc-filter-btn {
    padding: 0.4rem 1.1rem;
    border-radius: 20px;
    border: 1.5px solid var(--wc-border);
    background: var(--wc-white);
    color: var(--wc-muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--wc-transition);
}
.wc-filter-btn:hover,
.wc-filter-btn.active {
    background: var(--wc-primary);
    border-color: var(--wc-primary);
    color: var(--wc-white);
}

/* ?? Badges ????????????????????????????????????????????????????? */
.wc-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.wc-badge--primary  { background: var(--wc-accent-pale); color: var(--wc-primary); }
.wc-badge--success  { background: #d4f4e2; color: #1a7a46; }
.wc-badge--warning  { background: #fff3cd; color: #856404; }
.wc-badge--danger   { background: #ffe0e0; color: #a01010; }
.wc-badge--info     { background: #d1ecf1; color: #0c5460; }
.wc-badge--dark     { background: var(--wc-primary); color: var(--wc-white); }

/* ?? Forms ?????????????????????????????????????????????????????? */
.wc-form-control {
    background: var(--wc-white);
    border: 1.5px solid var(--wc-border);
    border-radius: 8px;
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    color: var(--wc-dark);
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}
.wc-form-control:focus {
    outline: none;
    border-color: var(--wc-accent);
    box-shadow: 0 0 0 3px rgba(185, 146, 109, 0.15);
}
.wc-form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wc-primary);
    margin-bottom: 0.4rem;
    display: block;
}

/* ?? Tables ????????????????????????????????????????????????????? */
.wc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--wc-white);
    border-radius: var(--wc-card-radius);
    overflow: hidden;
    box-shadow: var(--wc-shadow-sm);
}
.wc-table th {
    background: var(--wc-light);
    color: var(--wc-primary);
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.85rem 1rem;
    border-bottom: 2px solid var(--wc-border);
}
.wc-table td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--wc-border);
    color: var(--wc-dark);
    font-size: 0.9rem;
    vertical-align: middle;
}
.wc-table tr:last-child td { border-bottom: none; }
.wc-table tr:hover td { background: var(--wc-accent-pale); }

/* ?? Pagination ????????????????????????????????????????????????? */
.wc-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: center;
    margin-top: 2rem;
}
.wc-pagination__btn {
    min-width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1.5px solid var(--wc-border);
    background: var(--wc-white);
    color: var(--wc-muted);
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: var(--wc-transition);
    padding: 0 0.6rem;
}
.wc-pagination__btn:hover,
.wc-pagination__btn.active {
    background: var(--wc-primary);
    border-color: var(--wc-primary);
    color: var(--wc-white);
}
.wc-pagination__btn.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ?? Alerts ????????????????????????????????????????????????????? */
.wc-alert {
    padding: 1rem 1.2rem;
    border-radius: 8px;
    border-inline-start: 4px solid;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
.wc-alert--success {
    background: #d4f4e2;
    border-color: #1a7a46;
    color: #155534;
}
.wc-alert--danger {
    background: #ffe0e0;
    border-color: #a01010;
    color: #7a0c0c;
}
.wc-alert--warning {
    background: #fff3cd;
    border-color: #f0ad4e;
    color: #856404;
}
.wc-alert--info {
    background: #d1ecf1;
    border-color: #17a2b8;
    color: #0c5460;
}

/* ?? Cart ??????????????????????????????????????????????????????? */
.wc-cart-page { padding: calc(var(--dash-topbar-h, 64px) + 2rem) 0 4rem; }
.wc-cart-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--wc-border);
    align-items: center;
}
.wc-cart-item__img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.wc-cart-item__title { font-weight: 700; color: var(--wc-primary); }
.wc-cart-summary {
    background: var(--wc-light);
    border-radius: var(--wc-card-radius);
    padding: 1.5rem;
    border: 1px solid var(--wc-border);
}
.wc-cart-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.9rem;
}
.wc-cart-summary__total {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--wc-primary);
    border-top: 2px solid var(--wc-border);
    padding-top: 0.8rem;
    margin-top: 0.5rem;
}

/* ?? Measurement / Jobs Form ???????????????????????????????????? */
.wc-measure-page {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--wc-primary) 0%, var(--wc-secondary) 100%);
    display: flex;
    align-items: center;
    padding: 2rem 1rem;
}
.wc-measure-card {
    background: var(--wc-white);
    border-radius: 1.5rem;
    padding: 2.5rem;
    max-width: 680px;
    width: 100%;
    margin: auto;
    box-shadow: var(--wc-shadow-lg);
}
.wc-measure-brand {
    text-align: center;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--wc-primary);
    margin-bottom: 0.3rem;
}
.wc-measure-title {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--wc-primary);
    margin-bottom: 0.5rem;
}
.wc-measure-subtitle {
    text-align: center;
    color: var(--wc-muted);
    font-size: 0.9rem;
    margin-bottom: 2rem;
}
.wc-field-error {
    color: #dc3545;
    font-size: .78rem;
    margin-top: -.75rem;
    margin-bottom: .6rem;
    display: block;
}

/* ?? Footer ????????????????????????????????????????????????????? */
.wc-footer {
    background: var(--wc-primary);
    color: rgba(255,255,255,0.75);
    padding: 4rem 0 2rem;
}
.wc-footer__logo-ar {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--wc-white);
    line-height: 1;
}
.wc-footer__logo-en {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    color: var(--wc-accent);
    text-transform: uppercase;
}
.wc-footer__heading {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wc-accent);
    margin-bottom: 1rem;
}
.wc-footer__link {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 0.88rem;
    display: block;
    margin-bottom: 0.5rem;
    transition: color 0.2s;
}
.wc-footer__link:hover { color: var(--wc-accent); }
.wc-footer__divider {
    border-color: rgba(255,255,255,0.08);
    margin: 2rem 0 1rem;
}
.wc-footer__bottom {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.4);
}
.wc-footer__social { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.wc-footer__social-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(185, 146, 109, 0.3);
    color: var(--wc-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1rem;
    transition: var(--wc-transition);
}
.wc-footer__social-btn:hover {
    background: var(--wc-accent);
    border-color: var(--wc-accent);
    color: var(--wc-white);
}

/* ?? Scroll Top ????????????????????????????????????????????????? */
.wc-scroll-top {
    position: fixed;
    bottom: 6rem;
    inset-inline-start: 2rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--wc-accent);
    color: var(--wc-white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: var(--wc-shadow-md);
    opacity: 0;
    transform: translateY(10px);
    transition: var(--wc-transition);
    z-index: 2000;
}
.wc-scroll-top.active { opacity: 1; transform: translateY(0); }
.wc-scroll-top:hover { background: var(--wc-primary); }

/* ?? About page ????????????????????????????????????????????????? */
.wc-about-hero {
    background: linear-gradient(135deg, var(--wc-primary) 0%, var(--wc-secondary) 100%);
    padding: calc(var(--wc-section-py) + 3rem) 0 var(--wc-section-py);
    color: var(--wc-white);
}
.wc-stat-box {
    background: var(--wc-white);
    border-radius: var(--wc-card-radius);
    padding: 1.5rem;
    text-align: center;
    border: 1px solid var(--wc-border);
    box-shadow: var(--wc-shadow-sm);
    transition: var(--wc-transition);
}
.wc-stat-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--wc-shadow-md);
}
.wc-stat-box__num {
    font-size: 2rem;
    font-weight: 800;
    color: var(--wc-accent);
    line-height: 1;
}
.wc-stat-box__label {
    font-size: 0.82rem;
    color: var(--wc-muted);
    margin-top: 0.3rem;
}

/* ?? Team card ?????????????????????????????????????????????????? */
.wc-team-card {
    background: var(--wc-white);
    border-radius: var(--wc-card-radius);
    overflow: hidden;
    border: 1px solid var(--wc-border);
    box-shadow: var(--wc-shadow-sm);
    transition: var(--wc-transition);
    text-align: center;
}
.wc-team-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--wc-shadow-md);
}
.wc-team-card__img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}
.wc-team-card__name {
    font-weight: 700;
    color: var(--wc-primary);
    margin-top: 0.8rem;
}
.wc-team-card__role {
    font-size: 0.82rem;
    color: var(--wc-accent);
    margin-bottom: 0.8rem;
}

/* ?? Site content visibility ???????????????????????????????????? */
#wc-site-content {
    opacity: 0;
    transition: opacity 0.5s ease;

}
#wc-site-content.wc-site--visible { opacity: 1; }

/* ?? Discount Ribbon ???????????????????????????????????????????? */
.wc-discount-ribbon {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    background: var(--wc-accent);
    color: var(--wc-white);
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 0 var(--wc-card-radius) 0 var(--wc-card-radius);
}

/* ?? Shop hero ?????????????????????????????????????????????????? */
.wc-shop-hero {
    position: relative;
    height: 38vh;
    min-height: 260px;
    background: var(--wc-primary);
    display: flex;
    align-items: center;
    overflow: hidden;
}
.wc-shop-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.25;
}
.wc-shop-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(73, 54, 40, 0.85) 0%,
        rgba(127, 88, 60, 0.6) 100%
    );
}
.wc-shop-hero__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wc-accent);
    margin-bottom: 0.5rem;
}
.wc-shop-hero__title {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--wc-white);
    margin: 0;
}

/* ?? Projects hero ?????????????????????????????????????????????? */
.wc-projects-hero {
    background: linear-gradient(135deg, var(--wc-primary) 0%, var(--wc-secondary) 100%);
    padding: calc(var(--wc-section-py) + 4rem) 0 var(--wc-section-py);
    position: relative;
    overflow: hidden;
}
.wc-projects-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23b9926d' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.wc-projects-hero__eyebrow { color: var(--wc-accent); }
.wc-projects-hero__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    color: var(--wc-white);
}
.wc-projects-hero__title span { color: var(--wc-accent); }

/* ?? Category pills nav ????????????????????????????????????????? */
.wc-shop-cats { background: var(--wc-white); border-bottom: 1px solid var(--wc-border); }
.wc-shop-cats__inner {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 1rem 0;
    scrollbar-width: none;
}
.wc-shop-cats__inner::-webkit-scrollbar { display: none; }
.wc-shop-cat-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    min-width: 80px;
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
    border: 1.5px solid var(--wc-border);
    background: var(--wc-white);
    color: var(--wc-muted);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    transition: var(--wc-transition);
    white-space: nowrap;
}
.wc-shop-cat-btn:hover,
.wc-shop-cat-btn.active {
    background: var(--wc-primary);
    border-color: var(--wc-primary);
    color: var(--wc-white);
}
.wc-shop-cat-btn img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 8px;
}

/* ?? Wishlist page ?????????????????????????????????????????????? */
.wc-wishlist-page { padding: 7rem 0 4rem; min-height: 80vh; }
.wc-wishlist-empty { text-align: center; padding: 4rem 0; color: var(--wc-muted); }
.wc-wishlist-empty i { font-size: 4rem; color: var(--wc-accent); margin-bottom: 1rem; }

/* ?? Category nav component ????????????????????????????????????? */
.wc-nav-dropdown {
    position: relative;
}
.wc-nav-dropdown__menu {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    background: var(--wc-white);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-card-radius);
    box-shadow: var(--wc-shadow-md);
    min-width: 200px;
    padding: 0.5rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: var(--wc-transition);
    z-index: 1000;
}
.wc-nav-dropdown:hover .wc-nav-dropdown__menu,
.wc-nav-dropdown__menu.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.wc-nav-dropdown__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    color: var(--wc-dark);
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.88rem;
    transition: background 0.2s;

}
.wc-nav-dropdown__item:hover {
    background: var(--wc-accent-pale);
    color: var(--wc-primary);
}

    /* ?? Brand Colors ????????????????????????????????????????? */
    --wc-primary:       #6B3A2A;   /* Dark Brown   — headings, nav */
    --wc-secondary:     #8B5E3C;   /* Medium Brown — buttons       */
    --wc-gold:          #C4973B;   /* Warm Gold    — accents       */
    --wc-gold-light:    #D4AF6E;   /* Light Gold   — hover         */
    --wc-gold-pale:     #EDD9A3;   /* Pale Gold    — badges        */
    --wc-cream:         #FAF6F0;   /* Cream        — page bg       */
    --wc-light:         #F5EFE6;   /* Off-White    — section bg    */
    --wc-dark:          #1C1008;   /* Near Black   — body text     */
    --wc-muted:         #7A6652;   /* Muted Brown  — subtitles     */
    --wc-border:        #E2D0BA;   /* Warm Border  — dividers      */
    --wc-white:         #FFFFFF;

    /* ?? Typography ??????????????????????????????????????????? */
    --wc-font-en:       'Poppins', sans-serif;
    --wc-font-ar:       'Cairo', sans-serif;
    --wc-font-size-base: 1rem;
    --wc-line-height:   1.7;

    /* ?? Spacing ??????????????????????????????????????????????? */
    --wc-section-py:    5rem;
    --wc-card-radius:   1rem;
    --wc-btn-radius:    0.5rem;

    /* ?? Shadows ??????????????????????????????????????????????? */
    --wc-shadow-sm:   0 2px 8px rgba(107, 58, 42, 0.08);
    --wc-shadow-md:   0 6px 24px rgba(107, 58, 42, 0.14);
    --wc-shadow-lg:   0 12px 40px rgba(107, 58, 42, 0.20);
    --wc-shadow-gold: 0 4px 20px rgba(196, 151, 59, 0.30);

    /* ?? Transitions ??????????????????????????????????????????? */
    --wc-transition:  all 0.3s ease;
}

/* ?? Google Fonts Import ????????????????????????????????????? */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ?? Base Reset ?????????????????????????????????????????????? */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--wc-font-ar);
    font-size: var(--wc-font-size-base);
    line-height: var(--wc-line-height);
    color: var(--wc-dark);
    background-color: var(--wc-cream);
}

body.lang-en {
    font-family: var(--wc-font-en);
}

/* ?? Scrollbar ??????????????????????????????????????????????? */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--wc-light); }
::-webkit-scrollbar-thumb { background: var(--wc-gold); border-radius: 3px; }

/* ?? Selection ??????????????????????????????????????????????? */
::selection { background: var(--wc-gold-pale); color: var(--wc-primary); }

/* ?? Utility Classes ????????????????????????????????????????? */
.text-gold         { color: var(--wc-gold) !important; }
.text-primary-wc   { color: var(--wc-primary) !important; }
.text-muted-wc     { color: var(--wc-muted) !important; }
.bg-cream          { background-color: var(--wc-cream) !important; }
.bg-light-wc       { background-color: var(--wc-light) !important; }
.bg-primary-wc     { background-color: var(--wc-primary) !important; }
.bg-gold           { background-color: var(--wc-gold) !important; }
.border-gold       { border-color: var(--wc-gold) !important; }

/* ?? Buttons ????????????????????????????????????????????????? */
.btn-wc-primary {
    background-color: var(--wc-primary);
    color: var(--wc-white);
    border: 2px solid var(--wc-primary);
    border-radius: var(--wc-btn-radius);
    padding: 0.65rem 1.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: var(--wc-transition);
}
.btn-wc-primary:hover {
    background-color: var(--wc-secondary);
    border-color: var(--wc-secondary);
    color: var(--wc-white);
    box-shadow: var(--wc-shadow-md);
    transform: translateY(-2px);
}

.btn-wc-gold {
    background-color: var(--wc-gold);
    color: var(--wc-white);
    border: 2px solid var(--wc-gold);
    border-radius: var(--wc-btn-radius);
    padding: 0.65rem 1.8rem;
    font-weight: 600;
    transition: var(--wc-transition);
}
.btn-wc-gold:hover {
    background-color: var(--wc-gold-light);
    border-color: var(--wc-gold-light);
    color: var(--wc-white);
    box-shadow: var(--wc-shadow-gold);
    transform: translateY(-2px);
}

.btn-wc-outline {
    background-color: transparent;
    color: var(--wc-primary);
    border: 2px solid var(--wc-primary);
    border-radius: var(--wc-btn-radius);
    padding: 0.65rem 1.8rem;
    font-weight: 600;
    transition: var(--wc-transition);
}
.btn-wc-outline:hover {
    background-color: var(--wc-primary);
    color: var(--wc-white);
    transform: translateY(-2px);
}

/* ?? Cards ??????????????????????????????????????????????????? */
.wc-card {
    background: var(--wc-white);
    border-radius: var(--wc-card-radius);
    border: 1px solid var(--wc-border);
    box-shadow: var(--wc-shadow-sm);
    overflow: hidden;
    transition: var(--wc-transition);
}
.wc-card:hover {
    box-shadow: var(--wc-shadow-md);
    transform: translateY(-4px);
}

/* ?? Section Titles ?????????????????????????????????????????? */
.wc-section-title {
    color: var(--wc-primary);
    font-weight: 800;
    position: relative;
    display: inline-block;
    margin-bottom: 0.5rem;
}
.wc-section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 0;
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, var(--wc-gold), transparent);
    border-radius: 2px;
}
body.lang-en .wc-section-title::after {
    right: auto;
    left: 0;
    background: linear-gradient(90deg, transparent, var(--wc-gold));
}

/* ?? Divider ????????????????????????????????????????????????? */
.wc-divider {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--wc-gold), var(--wc-gold-light));
    border-radius: 2px;
    margin: 0 auto;
}

/* ?? Badges ?????????????????????????????????????????????????? */
.badge-wc {
    background-color: var(--wc-gold-pale);
    color: var(--wc-primary);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 50px;
    border: 1px solid var(--wc-gold-light);
}

/* ?? Inputs ?????????????????????????????????????????????????? */
.form-control:focus, .form-select:focus {
    border-color: var(--wc-gold);
    box-shadow: 0 0 0 0.2rem rgba(196, 151, 59, 0.20);
}

/* ?? Image utilities ????????????????????????????????????????? */
.wc-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wc-img-hover {
    transition: transform 0.5s ease;
}
.wc-img-hover:hover { transform: scale(1.06); }

/* ?? RTL Support ????????????????????????????????????????????? */
[dir="rtl"] .wc-section-title::after {
    right: 0; left: auto;
    background: linear-gradient(90deg, var(--wc-gold), transparent);
}
[dir="ltr"] .wc-section-title::after {
    left: 0; right: auto;
    background: linear-gradient(90deg, var(--wc-gold), transparent);
}

/* ?? Overlay ????????????????????????????????????????????????? */
.wc-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(107,58,42,0.85) 0%, transparent 60%);
}

/* ?? Loading Spinner ????????????????????????????????????????? */
.wc-spinner {
    width: 40px; height: 40px;
    border: 4px solid var(--wc-border);
    border-top-color: var(--wc-gold);
    border-radius: 50%;
    animation: wc-spin 0.8s linear infinite;
}
@keyframes wc-spin { to { transform: rotate(360deg); } }

/* ?? Animations ?????????????????????????????????????????????? */
@keyframes wc-fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.wc-fade-up { animation: wc-fadeUp 0.6s ease forwards; }

/* ?? Responsive ??????????????????????????????????????????????? */
@media (max-width: 991.98px) {
    :root { --wc-section-py: 3.5rem; }
}
@media (max-width: 575.98px) {
    :root { --wc-section-py: 2.5rem; }
}