/* ===== GILROY FONTS ===== */
@font-face {
    font-family: "Gilroy";
    src: url("../fonts/gilroy/Gilroy-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gilroy";
    src: url("../fonts/gilroy/Gilroy-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gilroy";
    src: url("../fonts/gilroy/Gilroy-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gilroy";
    src: url("../fonts/gilroy/Gilroy-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gilroy";
    src: url("../fonts/gilroy/Gilroy-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* ===== ZIL FONT (English Primary) ===== */
@font-face {
    font-family: "Zil";
    src: url("../fonts/Zilla_Slab/ZillaSlab-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Zil";
    src: url("../fonts/Zilla_Slab/ZillaSlab-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Zil";
    src: url("../fonts/Zilla_Slab/ZillaSlab-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Zil";
    src: url("../fonts/Zilla_Slab/ZillaSlab-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Zil";
    src: url("../fonts/Zilla_Slab/ZillaSlab-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* ===== HACEN FONT (Arabic Primary & Secondary) ===== */
@font-face {
    font-family: "Hacen Tunisia";
    src: url("../fonts/Hacen%20Tunisia.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Hacen Tunisia";
    src: url("../fonts/Hacen%20Tunisia.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Hacen Tunisia";
    src: url("../fonts/Hacen%20Tunisia.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Hacen Tunisia";
    src: url("../fonts/Hacen%20Tunisia.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Hacen Tunisia";
    src: url("../fonts/Hacen%20Tunisia.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Brand Colors - Extracted from Flower Link Logo */
/* Primary: Golden Yellow | Secondary: Navy Blue */
:root {
    --primary-color: #ffcb00;
    --primary-dark: #e6b800;
    --primary-light: #ffe066;
    --secondary-color: #000654;
    --secondary-dark: #00043a;
    --secondary-light: #1a1f6e;
    --accent-color: #e53935;
    --text-dark: #1a1a1a;
    --text-light: #555555;
    --text-muted: #888888;
    --bg-cream: #fffef5;
    --bg-light: #fff9e6;
    --bg-peach: #fff8e1;
    --white: #ffffff;
    --shadow-sm: 0 2px 8px rgba(30, 58, 95, 0.08);
    --shadow-md: 0 4px 20px rgba(30, 58, 95, 0.12);
    --shadow-lg: 0 8px 40px rgba(30, 58, 95, 0.15);
    --border-radius: 16px;
    --transition: all 0.3s ease;

    /* Font Variables */
    --font-primary: "Zil", serif;
    /* Use Gilroy for secondary text */
    --font-secondary: "Gilroy", Calibri, sans-serif;
    --font-accent: "Dancing Script", cursive;
}

/* ===== RTL (Arabic) FONT OVERRIDES ===== */
[dir="rtl"] {
    --font-primary: "Hacen Tunisia", serif;
    --font-secondary: "Hacen Tunisia", "Gilroy", Calibri, sans-serif;
}

/* Ensure body and all text elements use the correct fonts in RTL */
[dir="rtl"] body {
    font-family: var(--font-secondary) !important;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    font-family: var(--font-primary) !important;
}

/* Apply Hacen to all common text elements in RTL */
[dir="rtl"] p,
[dir="rtl"] span,
[dir="rtl"] div,
[dir="rtl"] a,
[dir="rtl"] label,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] li,
[dir="rtl"] td,
[dir="rtl"] th,
[dir="rtl"] strong,
[dir="rtl"] em,
[dir="rtl"] small,
[dir="rtl"] .text,
[dir="rtl"] .title,
[dir="rtl"] .description,
[dir="rtl"] .content {
    font-family: "Hacen Tunisia", "Gilroy", Calibri, sans-serif !important;
}

/* Ensure placeholder text also uses Hacen */
[dir="rtl"] input::placeholder,
[dir="rtl"] textarea::placeholder {
    font-family: "Hacen Tunisia", "Gilroy", Calibri, sans-serif !important;
}

/* ===== GLOBAL FONT APPLICATION ===== */
/* Ensure all elements inherit font from body by default */
* {
    font-family: inherit;
}

/* Apply Zil font globally for English (LTR) */
html:not([dir="rtl"]) body {
    font-family: var(--font-secondary) !important;
}

html:not([dir="rtl"]) h1,
html:not([dir="rtl"]) h2,
html:not([dir="rtl"]) h3,
html:not([dir="rtl"]) h4,
html:not([dir="rtl"]) h5,
html:not([dir="rtl"]) h6 {
    font-family: var(--font-primary) !important;
}

/* ===== DECORATIVE LEAF STYLES ===== */
.theme-leaves-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.leaf-decor {
    position: absolute;
    width: 350px;
    opacity: 0.08;
    transition: all 0.5s ease;
}

.leaf-top-left {
    top: -50px;
    left: -100px;
    transform: rotate(135deg);
}

.leaf-center-right {
    top: 40%;
    right: -120px;
    transform: rotate(-45deg);
}

/* ===== BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-secondary);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

body.inner-page {
    background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
    background-attachment: fixed;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
    font-weight: 600;
}

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

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

/* ===== TOP BAR (Removed - Superseded by layout-overrides.css) ===== */
/* ===== MAIN NAVIGATION (Removed - Superseded by layout-overrides.css) ===== */

/* ===== HERO SECTION ===== */
.hero-section {
    background: var(--bg-cream);
    overflow: hidden;
    position: relative;
}

.hero-slide {
    min-height: 100vh;
    display: flex;
    /* align-items: center; */
    padding: 60px 0;
    position: relative;
}

.hero-slide-2 {
    background: linear-gradient(180deg, #e8f4fc 0%, var(--bg-cream) 100%);
}

.hero-slide-3 {
    background: linear-gradient(180deg, #e6f7f7 0%, var(--bg-cream) 100%);
}

/* Centered Hero Layout */
.hero-centered {
    text-align: center;
}

.hero-content-wrapper {
    position: relative;
    min-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 40px;
}

.hero-center-content {
    position: relative;
    z-index: 10;
    animation: fadeInDown 0.8s ease;
}

.hero-brand-text {
    font-family: var(--font-primary);
    font-style: italic;
    font-size: 2rem;
    color: var(--secondary-light);
    font-weight: 500;
    display: block;
    margin-bottom: 10px;
    letter-spacing: 2px;
    animation: fadeIn 1s ease;
}

.hero-title-large {
    font-family: var(--font-primary);
    font-size: 2.8rem;
    font-weight: 400;
    color: var(--secondary-color);
    line-height: 1.2;
    margin: 0;
    letter-spacing: 1px;
    animation: fadeInUp 0.8s ease 0.2s backwards;
}

.hero-title-accent {
    font-family: var(--font-primary);
    font-size: 7rem;
    font-weight: 500;
    color: var(--secondary-color);
    line-height: 0.95;
    margin: 0 0 25px 0;
    letter-spacing: -2px;
    animation: fadeInUp 0.8s ease 0.3s backwards;
}

.hero-tagline {
    font-size: 1.2rem;
    color: var(--text-light);
    margin-bottom: 20px;
    animation: fadeIn 1s ease 0.5s backwards;
}

.btn-hero {
    background: var(--secondary-color);
    color: var(--white);
    padding: 14px 35px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 30px;
    border: none;
    transition: all 0.4s ease;
    animation: fadeInUp 0.8s ease 0.4s backwards;
    position: relative;
    overflow: hidden;
}

.btn-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
    transition: 0.5s;
}

.btn-hero:hover {
    background: var(--primary-color);
    color: var(--secondary-color);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(245, 197, 24, 0.4);
}

.btn-hero:hover::before {
    left: 100%;
}

.btn-hero i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.btn-hero:hover i {
    transform: translateX(5px);
}

/* Hero Side Text */
.hero-side-text {
    position: absolute;
    top: 25%;
    max-width: 200px;
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.7;
    animation: fadeIn 1s ease 0.6s backwards;
}

.hero-side-left {
    left: 0;
    text-align: left;
}

.hero-side-right {
    right: 0;
    text-align: right;
}

/* Hero Flower Center */
.hero-flower-center {
    position: absolute;
    bottom: -60px;
    /* Lower it slightly to anchor */
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    animation: floatUp 1s ease 0.3s backwards;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.hero-flower-center img {
    max-height: 75vh;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    /* Stronger transparency for white */
    filter: contrast(1.15) brightness(1.08);
    /* Blow out background */
    animation: gentleFloat 4s ease-in-out infinite;
}

/* Background Pill Shape */
.hero-background-pill {
    position: absolute;
    top: 50%;
    /* Center vertically */
    left: 50%;
    transform: translate(-50%, -45%);
    width: 450px;
    height: 85vh;
    display: block;
    border-radius: 300px;
    background: linear-gradient(180deg, #fffcf5 0%, #fff4e0 100%);
    z-index: 1;
    pointer-events: none;
}

.hero-content-wrapper {
    position: relative;
    z-index: 2;
}

.hero-center-content {
    position: relative;
    z-index: 2;
    /* Text behind flowers */
    margin-top: 10vh;
}

/* Refined Hero Titles for Overlap */
.hero-title-accent {
    font-family: var(--font-primary);
    font-size: 9rem;
    /* Bigger */
    font-weight: 500;
    color: var(--secondary-color);
    line-height: 0.8;
    margin: 0;
    letter-spacing: -3px;
    position: relative;
    z-index: 2;
}

/* Floating Pill Button */
.btn-pill-floating {
    position: absolute;
    bottom: 25%;
    /* Adjust based on image stem height */
    z-index: 10;
    background: var(--white);
    color: var(--secondary-color);
    border-radius: 50px;
    padding: 12px 40px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    font-family: var(--font-secondary);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.5px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.btn-pill-floating:hover {
    background: var(--primary-color);
    color: var(--secondary-color);
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(245, 197, 24, 0.3);
}

/* Side Text Adjustments */
.hero-side-text {
    z-index: 10;
    /* Keep on top */
    top: 45%;
}

/* Overlapping Hero Layout */
.hero-overlap-layout {
    height: calc(100vh - 100px);
    display: flex;
    /* align-items: center; */
    padding: 16px 0 20px;
    position: relative;
    overflow: hidden;

    /* Smooth yellow-to-white gradient - only on hero section */
    background: linear-gradient(to bottom, #fffef5 0%, #ffffff 100%);
}

.hero-overlap-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Top Title Section */
.hero-top-title {
    text-align: center;
    margin-bottom: 40px;
    z-index: 3;
    position: relative;
}

.hero-brand-small {
    font-family: var(--font-accent);
    font-size: 2.4rem;
    color: var(--secondary-light);
    display: block;
    margin-bottom: 2px;
    font-weight: 500;
    opacity: 0.9;
    letter-spacing: 1px;
}

.hero-subtitle {
    font-family: var(--font-primary);
    font-size: 2.2rem;
    font-weight: 500;
    color: var(--secondary-color);
    margin-bottom: 0.5rem;
    line-height: 1.2;
    letter-spacing: 0.5px;
}

/* Huge Overlapping Main Title */
/* Huge Overlapping Main Title */
.hero-main-title {
    font-family: var(--font-primary);
    font-size: clamp(4rem, 11vw, 8.5rem);
    /*    font-weight: 500;
*/
    color: var(--secondary-color);
    line-height: 0.85;
    text-align: center;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 2;
    letter-spacing: -6px;
    margin: 0;
    pointer-events: none;
    opacity: 0.95;
}

/* Flower Overlapping Through Text */
.hero-flower-overlap {
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-flower-overlap img {
    max-height: 78vh;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    filter: contrast(1.15) brightness(1.08);
    animation: gentleFloat 4s ease-in-out infinite;
}

/* Side Text for Overlap Layout */
.hero-overlap-layout .hero-side-text {
    position: absolute;
    max-width: 180px;
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.7;
    z-index: 5;
}

.hero-overlap-layout .hero-side-left {
    left: 20px;
    top: 50%;
    text-align: left;
}

.hero-overlap-layout .hero-side-right {
    right: 20px;
    top: 50%;
    text-align: right;
}

/* Button Positioning for Overlap */
.hero-overlap-layout .btn-pill-floating {
    margin-top: -150px;
    position: relative;
    z-index: 10;
    background: #ffffff;
    padding: 10px 26px;
    font-size: 0.8rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    border: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hero-overlap-layout .btn-pill-floating:hover {
    transform: translateY(-5px) scale(1.05);
    background: var(--secondary-color);
    color: #ffffff;
}

/* Legacy Hero Styles (for compatibility) */
.hero-badge {
    display: inline-block;
    background: rgba(245, 197, 24, 0.2);
    color: var(--secondary-color);
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
    animation: fadeInUp 0.8s ease;
}

.hero-title {
    font-size: 4.5rem;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 25px;
    color: var(--secondary-color);
    animation: fadeInUp 0.8s ease 0.2s backwards;
}

.hero-title span {
    color: var(--primary-color);
    display: block;
}

.hero-text {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 35px;
    max-width: 480px;
    animation: fadeInUp 0.8s ease 0.4s backwards;
}

.hero-btn {
    padding: 15px 35px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 30px;
    animation: fadeInUp 0.8s ease 0.6s backwards;
}

.hero-btn i {
    margin-left: 8px;
    transition: var(--transition);
}

.hero-btn:hover i {
    transform: translateX(5px);
}

.hero-image {
    position: relative;
    animation: gentleFloat 4s ease-in-out infinite;
}

.hero-image img {
    max-height: 550px;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(30, 58, 95, 0.12));
}

/* Carousel Controls */
.carousel-control-prev,
.carousel-control-next {
    width: 60px;
    height: 60px;
    background: var(--white);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: var(--primary-color);
    transform: translateY(-50%) scale(1.1);
    box-shadow: var(--shadow-lg);
}

.carousel-control-prev {
    left: 30px;
    right: auto;
    /* Explicitly reset right */
}

.carousel-control-next {
    right: 30px;
    left: auto;
    /* Explicitly reset left */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: none;
    /* Remove Bootstrap default invert opacity filter to show black ink */
}

/* Custom Hand-Drawn Left Chevron */
.carousel-control-prev-icon {
    /* More organic hand-drawn path using curves instead of straight lines */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 19 C 14 17 8 13 8 12 C 8 11 14 7 16 5' /%3E%3C/svg%3E");
}

/* Custom Hand-Drawn Right Chevron */
.carousel-control-next-icon {
    /* More organic hand-drawn path using curves instead of straight lines */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5 C 10 7 16 11 16 12 C 16 13 10 17 8 19' /%3E%3C/svg%3E");
}

.carousel-indicators {
    display: none;
}

.carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary-light);
    border: none;
    margin: 0 6px;
    transition: all 0.3s ease;
}

.carousel-indicators button.active {
    background: var(--primary-color);
    width: 40px;
    border-radius: 6px;
}

/* ===== RTL SUPPORT FOR HERO CAROUSEL CONTROLS ===== */

/* RTL: Swap button positions - prev button moves to right, next button moves to left */
[dir="rtl"] .carousel-control-prev,
html[dir="rtl"] .carousel-control-prev,
[dir="rtl"] #heroCarousel .carousel-control-prev,
html[dir="rtl"] #heroCarousel .carousel-control-prev {
    left: auto !important;
    right: 30px !important;
}

[dir="rtl"] .carousel-control-next,
html[dir="rtl"] .carousel-control-next,
[dir="rtl"] #heroCarousel .carousel-control-next,
html[dir="rtl"] #heroCarousel .carousel-control-next {
    right: auto !important;
    left: 30px !important;
}

/* RTL: Swap custom SVG arrow icons */
[dir="rtl"] .carousel-control-prev-icon,
html[dir="rtl"] .carousel-control-prev-icon {
    /* Show right arrow for prev button in RTL */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5 C 10 7 16 11 16 12 C 16 13 10 17 8 19' /%3E%3C/svg%3E") !important;
}

[dir="rtl"] .carousel-control-next-icon,
html[dir="rtl"] .carousel-control-next-icon {
    /* Show left arrow for next button in RTL */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 19 C 14 17 8 13 8 12 C 8 11 14 7 16 5' /%3E%3C/svg%3E") !important;
}

/* RTL: Swap Bootstrap Icons (if using bi-arrow-left/right instead of custom icons) */
[dir="rtl"] .carousel-control-prev .bi-arrow-left::before,
html[dir="rtl"] .carousel-control-prev .bi-arrow-left::before {
    content: "\f285" !important;
    /* bi-arrow-right icon code */
}

[dir="rtl"] .carousel-control-next .bi-arrow-right::before,
html[dir="rtl"] .carousel-control-next .bi-arrow-right::before {
    content: "\f284" !important;
    /* bi-arrow-left icon code */
}

/* RTL: Ensure hover effects work correctly */
[dir="rtl"] .carousel-control-prev:hover,
[dir="rtl"] .carousel-control-next:hover,
html[dir="rtl"] .carousel-control-prev:hover,
html[dir="rtl"] .carousel-control-next:hover {
    transform: translateY(-50%) scale(1.1) !important;
}

/* ===== FEATURES SECTION ===== */
.features-section {
    padding: 80px 0;
    background: var(--white);
}

.feature-card {
    background: var(--bg-cream);
    padding: 35px 25px;
    border-radius: var(--border-radius);
    text-align: center;
    transition: var(--transition);
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
}

.feature-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg,
            var(--primary-color) 0%,
            var(--primary-dark) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--white);
    margin: 0 auto 20px;
}

.feature-card h5 {
    font-size: 18px;
    margin-bottom: 12px;
    color: var(--secondary-color);
}

.feature-card p {
    font-size: 14px;
    color: var(--text-light);
    margin: 0;
}

/* ===== SECTION STYLES ===== */
.section-header {
    margin-bottom: 50px;
}

.section-title {
    font-size: 2.8rem;
    font-weight: 500;
    color: var(--secondary-color);
    margin-bottom: 32px;
}

.section-title span {
    color: var(--primary-color);
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
}

/* ===== CATEGORIES SECTION ===== */
.categories-section {
    margin-top: 4.5rem;
    padding: 0px !important;
    /* background: #ffffff; */
    /* Pure white background */
}

.category-card {
    display: block;
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    height: 350px;
}

.category-image {
    height: 100%;
    overflow: hidden;
}

.category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

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

.category-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 25px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: var(--white);
    transition: var(--transition);
}

.category-overlay h4 {
    font-size: 24px;
    margin-bottom: 5px;
}

.category-overlay span {
    font-size: 14px;
    opacity: 0.9;
}

.category-card:hover .category-overlay {
    background: linear-gradient(transparent, rgba(255, 224, 111, 0.9));
}

/* ===== PRODUCTS SECTION ===== */
.products-section {
    padding: 80px 0;
}

.featured-products {
    background: var(--white);
}

.all-products {
    background: #ffffff;
    /* Pure white background */
}

/* Ensure proper grid layout at different breakpoints */
@media (min-width: 992px) {
    .all-products .col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .all-products .col-md-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
}

@media (max-width: 767px) {
    .all-products .col-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .categories-section {
        margin-top: 0rem !important;
    }
}

/* ===== OCCASION SECTIONS ===== */
.occasion-section {
    padding: 100px 0;
}

.occasion-birthday {
    background: linear-gradient(135deg, #fff5f5 0%, var(--bg-cream) 100%);
}

.occasion-wedding {
    background: linear-gradient(135deg, #f0f8ff 0%, var(--bg-light) 100%);
}

.occasion-anniversary {
    background: linear-gradient(135deg, #fff0f5 0%, var(--bg-cream) 100%);
}

.occasion-sympathy {
    background: linear-gradient(135deg, #f5f5f5 0%, var(--bg-light) 100%);
}

.occasion-content {
    padding-right: 40px;
}

.occasion-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    color: var(--primary-dark);
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.occasion-content h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--secondary-color);
}

.occasion-content h2 span {
    color: var(--primary-color);
    display: block;
}

.occasion-content p {
    color: var(--text-light);
    margin-bottom: 30px;
    font-size: 1rem;
}

/* ===== INSTAGRAM SECTION ===== */
.instagram-section {
    padding: 80px 0;
    background: var(--white);
}

.instagram-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

.instagram-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.instagram-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.instagram-overlay {
    position: absolute;
    inset: 0;
    background: rgba(245, 197, 24, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}

.instagram-overlay i {
    font-size: 32px;
    color: var(--white);
    transform: scale(0.5);
    transition: var(--transition);
}

.instagram-item:hover img {
    transform: scale(1.1);
}

.instagram-item:hover .instagram-overlay {
    opacity: 1;
}

.instagram-item:hover .instagram-overlay i {
    transform: scale(1);
}

/* ===== NEWSLETTER SECTION ===== */
.newsletter-section {
    padding: 40px 0;
    background: var(--secondary-color);
    /* Solid color matching theme */
}

.newsletter-wrapper {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    padding: 50px;
}

.newsletter-section h3 {
    font-size: 2rem;
    color: var(--white);
    margin-bottom: 10px;
}

.newsletter-section p {
    color: rgba(255, 255, 255, 0.7);
}

.newsletter-form .form-control {
    padding: 18px 25px;
    border: none;
    border-radius: 30px 0 0 30px;
    font-size: 16px;
}

.newsletter-form .btn {
    padding: 18px 35px;
    border-radius: 0 30px 30px 0;
    font-weight: 500;
    min-width: unset;
    /* Reset min-width if set elsewhere */
}

.newsletter-form .btn i {
    margin-left: 8px;
}

/* ===== FOOTER ===== */
.main-footer {
    background: var(--secondary-color);
    color: var(--white);
    padding: 60px 0 0px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.footer-logo .brand-text {
    color: var(--white);
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 25px;
    line-height: 1.8;
}

.footer-social {
    display: flex;
    gap: 12px;
}

.footer-social a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--white);
    transition: var(--transition);
}

.footer-social a:hover {
    background: var(--primary-color);
    transform: translateY(-3px);
}

.main-footer h5 {
    font-size: 18px;
    margin-bottom: 25px;
    color: var(--white);
}

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

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

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--primary-color);
    padding-left: 5px;
}

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

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.footer-contact i {
    color: var(--primary-color);
    margin-top: 3px;
}

.download-apps {
    margin-top: 25px;
}

.download-apps h6 {
    font-size: 14px;
    margin-bottom: 15px;
    color: var(--white);
}

.app-buttons {
    display: flex;
    gap: 10px;
}

.app-buttons img {
    height: 40px;
    border-radius: 8px;
    transition: var(--transition);
}

.app-buttons img:hover {
    transform: scale(1.05);
}

.footer-payment {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.footer-payment h6 {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 15px;
}

.payment-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.5);
}

.payment-text {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}

.footer-bottom {
    background: rgba(0, 0, 0, 0.2);
    padding: 20px 0;
    margin-top: 50px;
}

.footer-bottom p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.footer-bottom a {
    color: rgba(255, 255, 255, 0.6);
    margin: 0 8px;
}

.footer-bottom a:hover {
    color: var(--primary-color);
}

/* ===== BACK TO TOP ===== */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
    z-index: 999;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: var(--primary-dark);
    transform: translateY(-5px);
}

/* ===== SEARCH MODAL ===== */
.search-form .form-control {
    border-radius: 30px 0 0 30px;
    padding: 18px 25px;
    border: 2px solid var(--bg-light);
}

.search-form .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: none;
}

.search-form .btn {
    border-radius: 0 30px 30px 0;
    padding: 18px 30px;
}

.search-suggestions h6 {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 15px;
}

.suggestion-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.suggestion-tag {
    background: var(--bg-light);
    color: var(--text-dark);
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 14px;
    transition: var(--transition);
}

.suggestion-tag:hover {
    background: var(--primary-color);
    color: var(--white);
}

/* ===== BUTTONS ===== */
.btn-primary {
    background: linear-gradient(135deg,
            var(--primary-color) 0%,
            var(--primary-dark) 100%);
    border: none;
    color: var(--secondary-color);
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 30px;
    transition: var(--transition);
}

.btn-primary:hover {
    background: linear-gradient(135deg,
            var(--primary-dark) 0%,
            var(--primary-color) 100%);
    color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(245, 197, 24, 0.4);
}

.btn-outline-primary {
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
    font-weight: 500;
    padding: 10px 26px;
    border-radius: 30px;
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--white);
    transform: translateY(-2px);
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes gentleFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

@keyframes floatUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Footer Brand Logo */
.footer-brand-logo {
    height: 70px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    margin-bottom: 20px;
    background: var(--white);
    padding: 8px 12px;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.footer-brand-logo:hover {
    transform: scale(1.03);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .hero-title {
        font-size: 3.5rem;
    }

    .section-title {
        font-size: 2.4rem;
    }
}

@media (max-width: 991px) {
    .top-bar .row>div {
        text-align: center !important;
        margin: 5px 0;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-title-large {
        font-size: 2.2rem;
    }

    .hero-title-accent {
        font-size: 5rem;
    }

    .hero-side-text {
        display: none;
    }

    .hero-slide {
        min-height: auto;
        padding: 80px 0;
    }

    .hero-content-wrapper {
        min-height: 70vh;
    }

    .hero-flower-center img {
        max-height: 45vh;
    }

    .hero-image {
        margin-top: 40px;
    }

    .occasion-content {
        padding-right: 0;
        margin-bottom: 40px;
    }

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

    /* Overlapping Layout Responsive */
    .hero-main-title {
        font-size: clamp(4rem, 12vw, 8rem);
        top: 18%;
    }

    .hero-flower-overlap img {
        max-height: 50vh;
    }

    .hero-overlap-layout .hero-side-text {
        display: none;
    }
}

@media (max-width: 767px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-title-large {
        font-size: 1.8rem;
    }

    .hero-title-accent {
        font-size: 4rem;
    }

    .hero-brand-text {
        font-size: 1.5rem;
    }

    .hero-flower-center img {
        max-height: 40vh;
    }

    .section-title {
        font-size: 2rem;
    }

    .occasion-content h2 {
        font-size: 2rem;
    }

    .newsletter-wrapper {
        padding: 30px 20px;
    }

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

    .category-card {
        height: 280px;
    }

    .brand-logo {
        height: 40px;
    }

    .footer-brand-logo {
        height: 50px;
    }

    /* Overlapping Layout Tablet */
    .hero-main-title {
        font-size: clamp(3rem, 10vw, 6rem);
        top: 20%;
    }

    .hero-subtitle {
        font-size: 1.6rem;
    }

    .hero-flower-overlap img {
        max-height: 45vh;
    }
}

@media (max-width: 576px) {
    .top-bar-actions {
        margin-top: 10px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-title-large {
        font-size: 1.5rem;
    }

    .hero-title-accent {
        font-size: 3rem;
    }

    .hero-tagline {
        font-size: 1rem;
    }

    .hero-flower-center img {
        max-height: 35vh;
    }

    .hero-btn,
    .btn-hero {
        width: 100%;
        text-align: center;
    }

    .carousel-control-prev,
    .carousel-control-next {
        display: none;
    }

    /* Overlapping Layout Mobile */
    .hero-main-title {
        font-size: clamp(2.5rem, 12vw, 4rem);
        top: 22%;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .hero-brand-small {
        font-size: 1.1rem;
    }

    .hero-flower-overlap img {
        max-height: 40vh;
    }

    .hero-overlap-layout {
        padding: 60px 0 40px;
    }
}

/* Updated Top Bar Auth Links */
.auth-links {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--secondary-color);
}

.auth-links a:hover {
    color: var(--primary-color) !important;
}

/* Updated Navbar Structure */
.navbar-brand.absolute-center-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 15px;
}

.brand-line {
    display: inline-block;
    width: 60px;
    height: 1px;
    background-color: var(--secondary-color);
    opacity: 0.3;
}

.brand-logo {
    height: 45px;
    /* Slightly smaller for balance */
}

/* Adjust navigation links spacing */
.navbar-nav {
    gap: 30px;
    /* More breathing room */
}

.navbar-nav .nav-link {
    font-size: 1rem;
    text-transform: uppercase;
    /* Match image style */
    letter-spacing: 1px;
    padding: 0 !important;
}

.navbar-nav .nav-link::before {
    display: none;
    /* Remove previous floral hover icon for this cleaner look */
}

.navbar-nav .nav-link:hover {
    color: var(--primary-dark);
    background: transparent;
}

/* Nav Icons adjustments */
.nav-icons {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    gap: 15px;
}

.nav-icon {
    width: auto;
    height: auto;
    background: transparent !important;
}

.nav-icon i {
    font-size: 1.2rem;
}

.nav-icon:hover {
    transform: none;
    color: var(--primary-color);
}

/* Media Query for Responsive Nav */
@media (max-width: 991px) {
    .navbar-brand.absolute-center-brand {
        display: none !important;
    }

    .navbar-collapse {
        text-align: center;
        padding-top: 20px;
    }

    .navbar-nav {
        gap: 10px;
        margin-bottom: 20px;
    }
}

/* ===== NEW HEADER STYLES (Floward Inspired) ===== */

/* New Top Bar */
.top-bar-new {
    background-color: #faf9f6;
    /* Off-white/Cream */
    padding: 12px 0;
    font-size: 0.85rem;
    color: #1a4d4e;
    /* Dark Cyan/Teal */
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    font-family: var(--font-secondary);
}

.promo-items .promo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.promo-items i {
    font-size: 1.1rem;
    color: var(--secondary-color);
    /* Maintain brand consistency or use Teal */
}

.top-actions {
    font-size: 0.85rem;
}

.lang-switch {
    font-weight: 500;
    padding: 4px 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.lang-switch:hover {
    background-color: #e9ecef !important;
}

/* New Navbar */
.navbar-new {
    background: #ffffff;
    padding: 20px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    font-family: var(--font-secondary);
}

.nav-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nav-left,
.nav-right {
    display: flex;
    align-items: center;
    gap: 25px;
    /* Spacing between items */
    flex: 1;
    /* Take up available space */
}

.nav-right {
    justify-content: flex-end;
}

.nav-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.brand-text-logo {
    font-family: var(--font-secondary);
    font-size: 2.2rem;
    color: #1a4d4e;
    /* Deep Teal */
    letter-spacing: 1px;
    font-weight: 500;
    text-transform: uppercase;
}

.btn-nav-action {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1a4d4e;
    font-weight: 600;
    /* Bold text like existing */
    font-size: 0.95rem;
    padding: 0;
    transition: color 0.3s ease;
}

.btn-nav-action i {
    font-size: 1.3rem;
    font-weight: normal;
}

.btn-nav-action:hover {
    color: var(--primary-color);
}

/* ===== SIDEBAR MENU (Offcanvas) ===== */
/* ===== SIDEBAR MENU (Offcanvas) ===== */
.custom-sidebar {
    width: 320px !important;
    /* Standard width */
    border-right: none;
    font-family: var(--font-secondary);
    background-color: white !important;
    /* Ensure bg is solid */
    transition: transform 0.3s ease-in-out !important;
    /* Force slide */
}

.sidebar-title {
    font-family: var(--font-secondary);
    color: #1a4d4e;
    margin-bottom: 25px;
    font-size: 2rem;
}

/* Visual Cards */
.sidebar-visual-card {
    display: block;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 1/1.1;
    color: white;
}

.sidebar-visual-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.sidebar-visual-card span {
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

/* Gradient Overlay */
.sidebar-visual-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    z-index: 1;
}

.sidebar-visual-card:hover img {
    transform: scale(1.05);
}

/* Menu List Items */
.sidebar-menu-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f9fa;
    /* Light grey bg */
    padding: 12px 20px;
    border-radius: 12px;
    color: #333;
    font-weight: 500;
    transition: all 0.2s;
}

.sidebar-menu-item:hover {
    background: #f0f0f0;
    transform: translateX(2px);
}

.menu-item-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    margin-left: auto;
    /* Push to right */
    margin-right: 15px;
}

/* Responsive adjustments */
@media (max-width: 991px) {

    .nav-left,
    .nav-right {
        gap: 15px;
    }

    .brand-text-logo {
        font-size: 1.5rem;
    }

    .promo-items {
        display: none !important;
        /* Hide promos on mobile */
    }

    .top-actions {
        justify-content: center !important;
        width: 100%;
    }
}

/* ===== NEW HEADER STYLES (Floward Inspired) ===== */

/* New Top Bar */
.top-bar-new {
    background-color: #faf9f6;
    /* Off-white/Cream */
    padding: 12px 0;
    font-size: 0.85rem;
    color: #1a4d4e;
    /* Dark Cyan/Teal */
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    font-family: var(--font-secondary);
}

.promo-items .promo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.promo-items i {
    font-size: 1.1rem;
    color: var(--secondary-color);
    /* Maintain brand consistency or use Teal */
}

.top-actions {
    font-size: 0.85rem;
}

.lang-switch {
    font-weight: 500;
    padding: 4px 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.lang-switch:hover {
    background-color: #e9ecef !important;
}

/* New Navbar */
.navbar-new {
    background: #ffffff;
    padding: 20px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    font-family: var(--font-secondary);
}

.nav-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nav-left,
.nav-right {
    display: flex;
    align-items: center;
    gap: 25px;
    /* Spacing between items */
    flex: 1;
    /* Take up available space */
}

.nav-right {
    justify-content: flex-end;
}

.nav-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.brand-text-logo {
    font-family: var(--font-secondary);
    font-size: 2.2rem;
    color: #1a4d4e;
    /* Deep Teal */
    letter-spacing: 1px;
    font-weight: 500;
    text-transform: uppercase;
}

.btn-nav-action {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1a4d4e;
    font-weight: 600;
    /* Bold text like existing */
    font-size: 0.95rem;
    padding: 0;
    transition: color 0.3s ease;
    position: relative;
}

.btn-nav-action i {
    font-size: 1.3rem;
    font-weight: normal;
}

.btn-nav-action:hover {
    color: var(--primary-color);
}

/* ===== SIDEBAR MENU (Offcanvas) ===== */
.custom-sidebar {
    width: 400px !important;
    /* Wider sidebar */
    border-right: none;
    font-family: var(--font-secondary);
}

.sidebar-title {
    font-family: var(--font-secondary);
    color: #1a4d4e;
    margin-bottom: 25px;
    font-size: 2rem;
}

/* Visual Cards */
.sidebar-visual-card {
    display: block;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 1/1.1;
    color: white;
}

.sidebar-visual-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.sidebar-visual-card span {
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

/* Gradient Overlay */
.sidebar-visual-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    z-index: 1;
}

.sidebar-visual-card:hover img {
    transform: scale(1.05);
}

/* Menu List Items */
.sidebar-menu-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f9fa;
    /* Light grey bg */
    padding: 12px 20px;
    border-radius: 12px;
    color: #333;
    font-weight: 500;
    transition: all 0.2s;
}

.sidebar-menu-item:hover {
    background: #f0f0f0;
    transform: translateX(2px);
}

.menu-item-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    margin-left: auto;
    /* Push to right */
    margin-right: 15px;
}

/* Responsive adjustments */
@media (max-width: 991px) {

    .nav-left,
    .nav-right {
        gap: 15px;
    }

    .brand-text-logo {
        font-size: 1.5rem;
    }

    .promo-items {
        display: none !important;
        /* Hide promos on mobile */
    }

    .top-actions {
        justify-content: center !important;
        width: 100%;
    }
}

/* Compact Header Overrides */
.top-bar-new {
    padding: 8px 0 !important;
}

.navbar-new {
    padding: 12px 0 !important;
}

/* Font Overrides */
body,
.top-bar-new,
.feature-card,
.product-price {
    font-family: var(--font-secondary);
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand-text-logo,
.hero-title-large,
.hero-title-accent,
.hero-subtitle,
.hero-main-title,
.navbar-nav .nav-link,
.sidebar-title {
    font-family: var(--font-secondary);
}

.hero-brand-small,
.hero-brand-text {
    font-family: var(--font-primary);
    font-style: italic;
    font-size: 2rem;
}

.brand-text-logo {
    font-weight: 600;
    letter-spacing: 2px;
}

/* ===== BRAND LOGO IMAGE ===== */
.brand-image-logo img {
    height: 48px;
    /* Adjust as needed */
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.brand-image-logo:hover img {
    transform: scale(1.03);
}

/* ===== CUSTOM SEARCH MODAL ===== */
.modal-custom-search {
    border-radius: 20px;
    padding: 20px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.modal-custom-search .modal-title {
    font-family: var(--font-secondary);
    font-size: 1.8rem;
    color: #333;
}

.modal-custom-search .btn-close {
    font-size: 1.1rem;
    color: #666;
    opacity: 0.6;
}

.search-form-custom {
    margin-top: 15px;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper .form-control {
    height: 55px;
    border-radius: 30px;
    padding-left: 25px;
    padding-right: 60px;
    /* Space for button */
    border: 1px solid #eee;
    font-family: var(--font-secondary);
    font-size: 1rem;
    box-shadow: none;
    transition: border-color 0.3s;
}

.search-input-wrapper .form-control:focus {
    border-color: var(--primary-color);
}

.btn-search-submit {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #eebb00;
    /* Custom Yellow from Image */
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-search-submit:hover {
    background-color: #d4a817;
    transform: scale(1.05);
}

.suggestions-label {
    font-family: var(--font-secondary);
    font-size: 1.1rem;
    color: #777;
    margin-bottom: 15px;
}

.suggestion-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.suggestion-pill {
    background-color: #fff9e6;
    /* Light cream/yellow bg */
    color: #444;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    font-family: var(--font-secondary);
}

.suggestion-pill:hover {
    background-color: #eebb00;
    color: white;
    transform: translateY(-2px);
}

/* ===== CART SIDEBAR ===== */
/* ===== CART SIDEBAR COMPACT ===== */
.cart-sidebar {
    width: 380px !important;
    /* Compact width */
    border-left: 1px solid rgba(0, 0, 0, 0.05);
}

@media (max-width: 576px) {
    .cart-sidebar {
        width: 100% !important;
    }
}

.cart-items-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Reduced gap */
    padding: 10px 0;
}

.cart-item {
    padding-bottom: 15px;
    /* Reduced padding */
    gap: 12px;
}

.cart-item-img {
    width: 70px;
    /* Smaller image */
    height: 70px;
    border-radius: 8px;
}

.cart-summary {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 15px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.tax-note {
    font-size: 11px;
    color: #888;
    margin: 0;
}

.cart-item {
    display: flex;
    /* padding/gap handled above */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    transition: var(--transition);
}

.cart-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cart-item-img {
    /* Sizing handled above */
    overflow: hidden;
    background: var(--bg-cream);
    flex-shrink: 0;
}

.cart-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cart-item-title {
    font-family: var(--font-secondary);
    font-size: 16px;
    margin-bottom: 4px;
    color: var(--secondary-color);
}

.cart-item-variant {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.cart-item-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-item-price-row .price {
    font-weight: 600;
    color: var(--primary-dark);
}

.product-details-page .qty-control {
    display: flex;
    align-items: center;
    background: white !important;
    border-radius: 20px;
    padding: 2px 4px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.product-details-page .btn-qty {
    background: none;
    border: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    color: var(--secondary-color);
    transition: var(--transition);
}

.product-details-page .btn-qty:hover {
    color: var(--primary-color);
}

.product-details-page .qty-val {
    font-size: 13px;
    font-weight: 500;
    margin: 0 8px;
    color: var(--text-dark);
    min-width: 15px;
    text-align: center;
}

.product-details-page .btn-remove {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    color: #ff7675;
    cursor: pointer;
    opacity: 0.5;
    transition: var(--transition);
}

.product-details-page .btn-remove:hover {
    opacity: 1;
    transform: scale(1.1);
}

.offcanvas-footer {
    padding: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background: var(--white);
}

.cart-summary {
    margin-bottom: 20px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    color: var(--secondary-color);
}

.tax-note {
    font-size: 12px;
    color: var(--text-light);
    margin: 0;
}

.btn-checkout {
    padding: 15px;
    font-size: 16px;
    letter-spacing: 0.5px;
}

/* ===== PRODUCT DETAIL PAGE ===== */
.font-playfair {
    font-family: var(--font-secondary);
}

.product-gallery-wrapper {
    height: 600px;
}

.gallery-thumbnails {
    width: 100px;
    flex-shrink: 0;
}

.thumbnail-item {
    width: 100%;
    aspect-ratio: 1/1;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnail-item.active,
.thumbnail-item:hover {
    border-color: #006072;
    transform: scale(0.95);
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.product-main-title {
    color: #1a4d4e;
    line-height: 1.2;
}

.customization-card {
    transition: all 0.3s ease;
}

.customization-card:hover {
    background-color: #f8f9fa !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.payment-methods img {
    opacity: 0.8;
    transition: opacity 0.3s;
}

.payment-methods img:hover {
    opacity: 1;
}

@media (max-width: 991px) {
    .product-gallery-wrapper {
        flex-direction: column-reverse;
        height: auto;
    }

    .gallery-thumbnails {
        width: 100%;
        flex-direction: row !important;
        overflow-x: auto;
    }

    .thumbnail-item {
        width: 80px;
    }
}

/* Custom Accordion for Product Detail */
.custom-accordion .accordion-item {
    background-color: transparent;
}

.custom-accordion .accordion-button {
    font-family: var(--font-secondary);
    font-size: 1.2rem;
    padding-left: 0;
}

.custom-accordion .accordion-button:not(.collapsed) {
    color: #006072;
    background-color: transparent;
    box-shadow: none;
}

.custom-accordion .accordion-button::after {
    background-size: 1rem;
}

.custom-accordion .accordion-body {
    padding-left: 0;
}

/* Suitable For Tags */
.suitable-for-tags .badge {
    transition: all 0.3s ease;
    cursor: pointer;
}

.suitable-for-tags .badge:hover {
    background-color: #006072 !important;
    color: #fff !important;
    border-color: #006072 !important;
}

/* Similar Products */
.similar-products-section .product-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1/1;
}

.similar-products-section .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.similar-products-section .product-image:hover img {
    transform: scale(1.05);
}

/* ===== PRODUCT CARD STYLES ===== */

.product-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    z-index: 2;
    background: #ffc107;
    color: #333;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.product-badge.bg-secondary {
    background: #4a4a4a !important;
    /* Premium Dark Grey */
    color: #fff;
    opacity: 0.95;
    letter-spacing: 1px;
    font-size: 0.65rem;
}

.product-badge.new {
    background: #00c9a7;
    color: #fff;
}

.product-badge.sale {
    background: #ff8087;
    color: #fff;
}

/* ===== IMMERSIVE PRODUCT CARD STYLES ===== */
.product-card {
    position: relative;
    /* FLUID LAYOUT: Auto height based on content */
    width: 100%;
    height: auto;
    /* Let content determine height */
    /* REMOVED: aspect-ratio causes cutoff on narrow widths */

    /* CONTAINER QUERY CONTEXT */
    container-type: inline-size;
    container-name: product-card;

    border-radius: 20px;
    overflow: hidden;
    border: none;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.05);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    background: #fff;
    /* White background for bottom section */
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: none;
    /* Removed uplift */
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.15);
}

.sidbar-product .sidbar-product-inner .product-image {
    aspect-ratio: 1 / 1;
    width: 100% !important;
    height: 100% !important;
}

.product-image {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1 !important;
    /* Square image - ENFORCED */
    overflow: hidden;
    background: #f8f8f8;
    /* Light gray fallback */
    flex-shrink: 0;
    /* Prevent image from shrinking */
}

/* Bottom Vignette/Blur Effect for smooth transition */
.product-image::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25%;
    /* Cover bottom 25% of image */
    background: linear-gradient(to top,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0.2) 40%,
            transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.product-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}

.product-image .img-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.product-card:hover .product-image .img-hover {
    opacity: 1;
    transform: scale(1.08);
    /* Smoother zoom */
}

.product-card:hover .product-image .img-default {
    opacity: 0;
}

.product-actions {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    bottom: 20px;
    /* Position at bottom */
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 3;
}

.product-card:hover .product-actions {
    opacity: 1;
    transform: translateY(0);
}

.action-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #1a4d4d;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.action-btn:hover {
    background: #ffc107;
    color: #1a4d4d;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

/* Product Info - Solid White Bottom Section with Minimum Height */
.product-info {
    position: relative;
    width: 100%;
    min-height: 80px;
    /* Minimum height to prevent cutoff */
    padding: 15px;
    /* Fallback */
    background: #fff;
    /* Solid white background */
    z-index: 2;
    pointer-events: auto;
    /* Allow clicks */
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center content vertically */
}

/* FLUID TYPOGRAPHY & SPACING via Container Queries with Minimums */
@container product-card (min-width: 0px) {
    .product-info {
        padding: clamp(10px, 5cqw, 20px) clamp(12px, 6cqw, 24px);
        /* Min-preferred-max */
    }

    .product-name {
        font-size: clamp(14px, 6cqw, 20px) !important;
        /* Min 12px for readability */
        margin-bottom: clamp(4px, 2cqw, 10px) !important;
    }

    .product-price {
        font-size: clamp(14px, 5.5cqw, 22px) !important;
        /* Min 14px for prices */
    }

    .product-price .old-price {
        font-size: clamp(10px, 3.5cqw, 14px) !important;
    }

    /* Fluid Button Sizing with Minimums */
    .btn-card-add.btn-icon-only {
        width: clamp(28px, 13cqw, 44px) !important;
        height: clamp(28px, 13cqw, 44px) !important;
    }

    .btn-card-add.btn-icon-only i {
        font-size: clamp(12px, 6cqw, 20px) !important;
    }

    /* Fluid Wishlist Button with Minimums */
    .btn-card-wishlist {
        width: clamp(24px, 11cqw, 40px) !important;
        height: clamp(24px, 11cqw, 40px) !important;
        position: absolute !important;
        top: clamp(8px, 4cqw, 16px) !important;
        right: clamp(8px, 4cqw, 16px) !important;
        z-index: 10;
    }

    .btn-card-wishlist i {
        font-size: clamp(10px, 5cqw, 18px) !important;
    }

    .product-category {
        font-size: clamp(8px, 3.5cqw, 12px) !important;
        margin-bottom: clamp(2px, 2cqw, 8px) !important;
    }
}

/* Allow clicking on links inside info if needed */
.product-info a {
    pointer-events: auto;
}

.product-category {
    font-size: 0.8rem;
    /* Slightly larger */
    color: rgba(0, 0, 0, 0.6);
    /* Dark text */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-secondary);
    text-shadow: none;
}

.product-name {
    font-family: "Domaine Display", serif;
    /* Use serif for premium look */
    font-size: 1.1rem;
    /* Slightly smaller title */
    margin-bottom: 1px;
    line-height: 1.2;
    font-weight: 400;
    color: #1a1a1a;
    /* Dark text */
    text-shadow: none;
}

.product-name a {
    color: #1a1a1a;
    /* Dark text */
    text-decoration: none;
    transition: color 0.2s;
}

.product-name a:hover {
    color: var(--secondary-color);
}

.product-price {
    font-family: var(--font-secondary);
    font-size: 1.3rem;
    /* Still large layout */
    font-weight: 600;
    color: #1a1a1a;
    /* Dark text */
    margin-right: auto;
    text-shadow: none;
    display: flex;
    flex-direction: column;
    /* Stack prices vertically */
    align-items: flex-start;
    line-height: 1.1;
}

.product-price-row {
    display: flex;
    align-items: center;
    /* Center align with button */
    justify-content: space-between;
    margin-top: 10px;
    width: 100%;
}

/* Icon-only "Add to Cart" Button (Default / Grid View) */
.btn-card-add {
    pointer-events: auto;
    z-index: 5;
}

.btn-card-add i {
    margin-right: 0 !important;
}

/* Override for icon-only variant - ensures circular icon button */
.btn-card-add.btn-icon-only {
    padding: 0 !important;
}

/* Wishlist Button (Top Right) - Matching Cart Button Style */
.btn-card-wishlist {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 20 !important;
}

.product-price .old-price {
    font-size: 0.85rem;
    /* Slightly smaller for better stack */
    color: rgba(0, 0, 0, 0.5);
    /* Dark gray for white background */
    text-decoration: line-through;
    margin-right: 0;
    margin-bottom: 2px;
    font-weight: 500;
}

/* Slick Customization */
.slick-prev,
.slick-next {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    background: #000044 !important;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.slick-prev:hover,
.slick-next:hover {
    /* background: #000066 !important; */
    transform: scale(1.1);
}

.slick-prev {
    left: -15px !important;
}

.slick-next {
    right: -15px !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .product-image {
        height: 164px !important;
    }

    .product-card {
        margin-bottom: 0rem !important;
    }

    .product-actions {
        opacity: 1;
        transform: translateY(0);
        bottom: 10px;
    }

    .action-btn {
        width: 35px;
        height: 35px;
    }

    .product-info {
        padding: 15px;
    }
}

/* RTL Fixes for Product Card */
[dir="rtl"] .product-info {
    text-align: right;
}

[dir="rtl"] .product-price {
    margin-right: 0;
    margin-left: auto;
}

/* ===== CATEGORY CARD REDESIGN (MATCHING PRODUCT) ===== */
.category-card {
    display: block;
    position: relative;
    height: 420px;
    /* Consistent with product cards */
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* Soft, premium shadow */
    margin-bottom: 25px;
    background: #fff;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.category-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.category-card:hover .category-image img {
    transform: scale(1.05);
    /* Smooth zoom */
}

/* Gradient Overlay (Same as Product) */
.category-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 20px;
    /* Unified padding */
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.6) 50%,
            transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 2;
    text-align: left;
    height: 60%;
    /* Ensure gradient covers enough area */
    pointer-events: none;
}

.category-overlay h4 {
    color: #fff;
    font-family: "Domaine Display", serif;
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 5px;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    /* Strong shadow for readability */
}

/* Optional subtitle/CTA if used */
.category-overlay span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-secondary);
    display: block;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.category-overlay span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    font-weight: 500;
    width: fit-content;
    display: none;
    /* Hidden based on screenshot similarity, or keep subtle */
}

/* Ensure Product Images are strictly filling */
.product-image img,
.product-image .img-default,
.product-image .img-hover {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ===== OVERRIDES FOR SECTION TITLES AND TEXT DEFAULT ===== */
/* .section-title h2,
h2.section-title,
.section-title,
.text-default,
h2.text-default,
.category-page-title h4,
.breadcrumb-area h2 {
    font-family: "Domaine Display", serif !important;
    letter-spacing: 0.5px !important;
} */

/* Ensure hero titles are also forced if they were being overridden */
/* .hero-main-title,
.hero-subtitle,
.hero-title-accent,
.hero-title-large,
.brand-text,
.category-overlay h4 {
    font-family: "Domaine Display", serif !important;
    letter-spacing: 0.5px !important;
} */

/* ===== INSTAGRAM SECTION (Added by Assistant) ===== */
.instagram-section {
    padding: 60px 0;
    background: #fff;
    overflow: hidden;
}

.instagram-section .section-header {
    margin-bottom: 40px;
}

.instagram-slider-item {
    outline: none;
    padding: 10px;
}

.instagram-card {
    display: block;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4/5;
    width: 100%;
    margin: 0 auto;
}

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

.instagram-card:hover img {
    transform: scale(1.1);
}

.instagram-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.instagram-card:hover .instagram-overlay {
    opacity: 1;
    background: rgba(0, 0, 0, 0.4);
}

.instagram-overlay i {
    font-size: 2.5rem;
    color: white;
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.instagram-card:hover .instagram-overlay i {
    transform: scale(1);
}

/* ===== HOW IT WORKS SECTION (Modern) ===== */
.how-it-works-section {
    background-color: var(--bg-cream);
    position: relative;
    overflow: hidden;
}

.how-it-works-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(var(--primary-light) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.1;
    pointer-events: none;
}

.process-row {
    position: relative;
    padding-top: 20px;
}

/* Wishlist Button (Top Right) */
.btn-card-wishlist {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

/* Ensure .product-card context forces absolute positioning for wishlist button if not handled by container query */
.product-card .btn-card-wishlist {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 20;
}

.btn-card-wishlist:hover {
    background: #fff;
    color: #e53935;
    transform: scale(1.1);
}

.btn-card-wishlist i {
    font-size: 1.1rem;
}

/* Full "Add to Cart" Button */
.btn-card-add {
    width: auto;
    height: 38px;
    padding: 0 20px;
    border-radius: 30px;
    background: #fff;
    color: var(--secondary-color);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-card-add:hover {
    background: var(--primary-color);
    color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.btn-card-add i {
    font-weight: 500;
    font-size: 1rem;
    margin-right: 8px;
}

.process-line {
    position: absolute;
    top: 75px;
    /* Center with icon circle approx */
    left: 10%;
    width: 80%;
    height: 2px;
    background-image: linear-gradient(to right,
            var(--secondary-color) 50%,
            transparent 50%);
    background-size: 20px 100%;
    z-index: 0;
    opacity: 0.2;
}

.process-step {
    position: relative;
    z-index: 1;
    text-align: center;
    transition: transform 0.3s ease;
}

.process-step:hover {
    transform: translateY(-10px);
}

.icon-circle-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 2px solid rgba(245, 197, 24, 0.1);
    /* Subtle yellow border */
    transition: all 0.3s ease;
}

.icon-circle-wrapper i {
    font-size: 2.5rem;
    color: var(--secondary-color);
    transition: all 0.3s ease;
}

.process-step:hover .icon-circle-wrapper {
    background: var(--primary-color);
    box-shadow: 0 15px 40px rgba(245, 197, 24, 0.3);
    border-color: var(--primary-color);
    transform: scale(1.1);
}

.process-step:hover .icon-circle-wrapper i {
    color: var(--white);
    animation: pulse 1s infinite;
}

.step-number {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 30px;
    height: 30px;
    background: var(--secondary-color);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-family: var(--font-primary);
    font-size: 14px;
    border: 2px solid var(--white);
}

.process-title {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    color: var(--secondary-color);
    margin-bottom: 10px;
    font-weight: 500;
}

.process-desc {
    font-size: 0.9rem;
    color: var(--text-light);
    max-width: 200px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Animation for icons */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@media (max-width: 991px) {
    .process-line {
        display: none;
    }

    .process-step {
        margin-bottom: 30px;
    }
}

/* ===== GLOBAL THEME BUTTONS & LINKS ===== */
/* Consistent Minimal Rounded Buttons */

/* ===== GLOBAL THEME BUTTONS & LINKS ===== */
/* Consistent Minimal Rounded Buttons */

.btn-theme,
.btn-theme-primary,
.btn-theme-dark,
.btn-theme-secondary,
.btn-theme-outline,
.btn-theme-outline-primary,
.btn-theme-outline-white,
.btn-theme-ghost,
.btn-theme-danger,
.btn-theme-success,
.btn-theme-warning,
.btn-theme-muted,
.btn-theme-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 12px 28px !important;
    /* Standard MD padding */
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: var(--font-secondary) !important;
    border-radius: 50px !important;
    /* Default Pill */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    cursor: pointer;
    text-decoration: none !important;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    line-height: 1.2 !important;
    border: 1px solid transparent;
    min-width: 140px;
    text-transform: uppercase;
    box-sizing: border-box;
}

/* 1. SOLID BUTTONS */

/* Primary Button (Navy) */
.btn-theme-primary,
.btn-theme-dark {
    background: var(--secondary-color) !important;
    color: var(--white) !important;
    box-shadow: 0 4px 15px rgba(30, 58, 95, 0.2) !important;
    border-color: var(--secondary-color) !important;
}

/* Secondary Button (White) - Alias for btn-theme */
.btn-theme,
.btn-theme-secondary {
    background: var(--white) !important;
    color: var(--secondary-color) !important;
    border-color: #e0e0e0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

/* Muted Button (Previously btn-theme-secondary) */
.btn-theme-muted {
    background: #e9ecef !important;
    color: #495057 !important;
    border-color: #dee2e6 !important;
}

/* Success Button */
.btn-theme-success {
    background: #28a745 !important;
    color: var(--white) !important;
    border-color: #218838 !important;
}

/* Danger Button */
.btn-theme-danger {
    background: #e53935 !important;
    color: var(--white) !important;
    border-color: #c62828 !important;
}

/* Warning Button */
.btn-theme-warning {
    background: #ff9800 !important;
    color: var(--white) !important;
    border-color: #f57c00 !important;
}

/* Global Hover State for Solid Buttons (Brand Consistency) */
.btn-theme:hover,
.btn-theme:focus,
.btn-theme-primary:hover,
.btn-theme-primary:focus,
.btn-theme-dark:hover,
.btn-theme-dark:focus,
.btn-theme-secondary:hover,
.btn-theme-secondary:focus,
.btn-theme-success:hover,
.btn-theme-success:focus,
.btn-theme-danger:hover,
.btn-theme-danger:focus,
.btn-theme-warning:hover,
.btn-theme-warning:focus {
    background: var(--primary-color) !important;
    /* Yellow */
    color: var(--secondary-color) !important;
    /* Navy */
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(245, 197, 24, 0.4) !important;
    border-color: var(--primary-color) !important;
}

.btn-theme-muted:hover {
    background: #dee2e6 !important;
    color: #212529 !important;
    transform: translateY(-2px);
}

/* 2. OUTLINE BUTTONS */

.btn-theme-outline-primary {
    background: transparent !important;
    border: 2px solid var(--secondary-color) !important;
    color: var(--secondary-color) !important;
}

.btn-theme-outline-primary:hover {
    background: var(--secondary-color) !important;
    color: var(--white) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(30, 58, 95, 0.2) !important;
}

.btn-theme-outline-white {
    background: transparent !important;
    border: 2px solid var(--white) !important;
    color: var(--white) !important;
}

.btn-theme-outline-white:hover {
    background: var(--white) !important;
    color: var(--secondary-color) !important;
    transform: translateY(-2px);
}

/* 3. GHOST BUTTONS */

.btn-theme-ghost {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--secondary-color) !important;
    box-shadow: none !important;
    min-width: auto !important;
    padding: 8px 16px !important;
}

.btn-theme-ghost:hover {
    background: rgba(245, 197, 24, 0.15) !important;
    /* Light Yellow Tint */
    color: var(--secondary-dark) !important;
    transform: translateY(-1px);
}

/* --- Size Variants --- */

.btn-theme-xs {
    height: 28px !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
    min-width: auto !important;
}

.btn-theme-sm {
    height: 36px !important;
    padding: 6px 20px !important;
    font-size: 13px !important;
    min-width: 100px !important;
}

.btn-theme-md {
    height: 44px !important;
    padding: 12px 28px !important;
    font-size: 15px !important;
    min-width: 140px !important;
}

.btn-theme-lg {
    height: 52px !important;
    padding: 15px 40px !important;
    font-size: 17px !important;
    min-width: 180px !important;
}

.btn-theme-xl {
    height: 60px !important;
    padding: 20px 44px !important;
    font-size: 19px !important;
    min-width: 200px !important;
}

/* Special Case for Sidebar Filters */
.filterOn.btn-theme-sm {
    min-width: 72px !important;
    padding: 6px 4px !important;
}

/* --- Shape Variants --- */

.btn-theme-pill {
    border-radius: 50px !important;
}

.btn-theme-rounded {
    border-radius: 12px !important;
}

.btn-theme-square {
    border-radius: 0 !important;
}

.btn-theme-circle {
    border-radius: 50% !important;
    padding: 0 !important;
    min-width: 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-theme-circle.btn-theme-sm {
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
}

.btn-theme-circle.btn-theme-xs {
    min-width: 28px !important;
    width: 28px !important;
    height: 28px !important;
}

/* --- Icon Integration --- */

.btn-theme i,
.btn-theme-primary i,
.btn-theme-dark i {
    margin: 0 8px;
    font-size: 1.1em;
    transition: transform 0.3s ease;
}

.btn-theme:hover i,
.btn-theme-primary:hover i,
.btn-theme-dark:hover i {
    transform: translateX(4px);
}

.btn-theme-icon {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    min-width: auto !important;
    border-radius: 50% !important;
}

.btn-theme-icon i {
    margin: 0 !important;
    font-size: 1.2rem;
}

.btn-theme-icon:hover i {
    transform: scale(1.1);
}

/* --- Modal Close Button --- */
.btn-modal-close {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 1050;
    width: 40px !important;
    height: 40px !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
    border: none !important;
    color: #333 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.btn-modal-close:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
    transform: rotate(90deg) !important;
    color: #000 !important;
}

[dir="rtl"] .btn-modal-close {
    right: auto !important;
    left: 15px !important;
}

.btn-modal-close i,
.btn-modal-close span {
    font-size: 1.5rem !important;
    line-height: 1 !important;
    font-weight: 300 !important;
}

/* Glass Variant for Dark overlays */
.btn-modal-close-glass {
    background-color: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.btn-modal-close-glass:hover {
    background-color: rgba(255, 255, 255, 0.35) !important;
    color: #000000 !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

/* --- State Modifiers --- */

.btn-theme:disabled,
.btn-theme-primary:disabled,
.btn-theme-dark:disabled,
.btn-theme-secondary:disabled,
.btn-theme-outline:disabled,
.btn-theme-muted:disabled,
.btn-theme[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
    filter: grayscale(100%) !important;
}

/* Active State feedback */
.btn-theme:active,
.btn-theme-primary:active,
.btn-theme-dark:active {
    transform: scale(0.96) !important;
}

/* --- Phase 2: Premium Interactive States --- */

/* 1. Loading State */
.btn-theme-loading {
    position: relative !important;
    color: transparent !important;
    pointer-events: none !important;
    cursor: default !important;
}

.btn-theme-loading::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
    z-index: 2;
}

/* Primary/Dark secondary loading (Dark spinner) */
.btn-theme-secondary.btn-theme-loading::after,
.btn-theme-ghost.btn-theme-loading::after {
    border-color: rgba(30, 58, 95, 0.2);
    border-top-color: var(--secondary-color);
}

/* 2. Shimmer Effect (For Hero/Premium CTAs) */
.btn-theme-shimmer {
    position: relative;
    overflow: hidden;
}

.btn-theme-shimmer::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
    transform: skewX(-25deg);
    transition: none;
    animation: btn-shimmer 3s infinite;
}

/* 3. Glow Effect (For Checkout/Urgent Actions) */
.btn-theme-glow {
    animation: btn-glow 2s infinite;
}

.btn-theme-glow:hover {
    animation: none;
}

/* --- Animations --- */

@keyframes btn-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes btn-shimmer {
    0% {
        left: -100%;
    }

    20% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

@keyframes btn-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 197, 24, 0.4);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(245, 197, 24, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(245, 197, 24, 0);
    }
}

/* Minimal Link Style */
.link-theme {
    color: var(--secondary-color);
    font-weight: 600;
    position: relative;
    text-decoration: none;
    padding-bottom: 2px;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.link-theme::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.link-theme:hover {
    color: var(--secondary-color);
}

.link-theme:hover::after {
    width: 100%;
}

.link-theme i {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.link-theme:hover i {
    transform: translateX(3px);
}

/* Link Theme for Dark Backgrounds (Footer/Navy) */
.link-theme-light {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    position: relative;
    text-decoration: none;
    padding-bottom: 2px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.link-theme-light:hover {
    color: var(--primary-color);
    padding-left: 5px;
    /* Subtle movement */
}

.link-theme-light::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.link-theme-light:hover::after {
    width: 100%;
}

/* ===== SWEETALERT2 COMPACT MODAL STYLING ===== */
.swal-compact-modal.swal2-popup {
    border-radius: 24px !important;
    padding: 20px 30px 25px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
    max-width: 420px !important;
}

.swal-compact-modal .swal2-title {
    font-family: var(--font-secondary) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--secondary-color) !important;
    margin: 0 0 5px 0 !important;
}

.swal-compact-modal .swal2-html-container {
    font-size: 0.95rem !important;
    color: #6b7280 !important;
    margin: 10px 0 20px 0 !important;
    line-height: 1.5 !important;
}

.swal-compact-modal .swal2-icon {
    width: 60px !important;
    height: 60px !important;
    margin: 10px auto 15px !important;
    border-width: 3px !important;
}

.swal-compact-modal .swal2-actions {
    margin-top: 5px !important;
    gap: 15px !important;
}

/* ===== MOBILE RESPONSIVE HERO ADJUSTMENTS ===== */
@media only screen and (max-width: 991px) {
    .hero-overlap-layout {
        height: auto;
        min-height: 100vh;
        padding-top: 10px;
        padding-bottom: 60px;
        display: block;
        /* Remove flex constraint needed for desktop overlap */
    }

    .hero-overlap-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        height: auto;
    }

    /* Reset positioning for mobile stack */
    .hero-main-title {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        white-space: normal;
        /* Allow text wrapping */
        font-size: 3.5rem;
        /* Smaller font */
        margin: 20px 0 30px;
        line-height: 1.1;
        letter-spacing: -1px;
        order: 2;
    }

    .hero-top-title {
        order: 1;
        margin-bottom: 10px;
    }

    .hero-flower-overlap {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        order: 3;
        margin-bottom: 20px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-flower-overlap img {
        max-height: 400px;
        width: auto;
        max-width: 90vw;
    }

    /* Adjust button position */
    .hero-overlap-layout .btn-pill-floating {
        position: relative;
        margin-top: -30px;
        bottom: auto;
        z-index: 20;
    }

    /* Handle side texts */
    .hero-overlap-layout .hero-side-text {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        text-align: center;
        max-width: 300px;
        margin: 15px auto;
        order: 4;
    }

    .hero-side-left {
        display: none;
        /* Hide left text on mobile to declutter */
    }

    .hero-side-right {
        order: 5;
    }

    .hero-background-pill {
        width: 90%;
        height: 60%;
        top: 50%;
        transform: translate(-50%, -40%);
        display: block;
        /* Ensure visibility */
    }
}

@media only screen and (max-width: 480px) {
    .hero-main-title {
        font-size: 2.5rem;
        /* Even smaller for phones */
        margin: 10px 0 20px;
    }

    .hero-subtitle {
        font-size: 1.4rem;
    }

    .hero-flower-overlap img {
        max-height: 340px;
    }

    .hero-overlap-layout .btn-pill-floating {
        padding: 10px 30px;
        font-size: 0.9rem;
    }

    .hero-background-pill {
        height: 50%;
    }
}

/* ===== MOBILE HEADER & TOP BAR CORRECTIONS ===== */
@media only screen and (max-width: 991px) {

    /* Top Bar: Center align content and add space */
    .top-bar-new .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }

    .top-bar-new .top-actions {
        justify-content: space-between !important;
        width: 100%;
        padding: 4px 0;
    }

    .top-bar-new .auth-buttons a,
    .top-bar-new .lang-switch {
        font-size: 13px;
        /* Ensure legible size */
    }

    /* Navbar: Center Logo */
    .navbar-new .nav-content-wrapper {
        position: relative;
        justify-content: space-between;
        padding: 5px 0;
    }

    .navbar-new {
        padding: 4px 0 !important;
    }

    /* Make logo absolute centered */
    .navbar-new .brand-image-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0 !important;
        z-index: 10;
        display: flex;
        /* Ensure it behaves like a block for centering */
        justify-content: center;
    }

    .navbar-new .brand-image-logo img {
        height: 35px;
        /* Optimal size for mobile */
        width: auto;
    }

    /* Adjust Left Side (Menu button) */
    .navbar-new .nav-left {
        position: relative;
        z-index: 11;
        /* Above logo if overlap */
    }

    /* Adjust Right Side (Icons) */
    .navbar-new .nav-right {
        gap: 8px;
        /* Tighter spacing */
        position: relative;
        z-index: 11;
    }

    .btn-nav-action {
        padding: 8px;
        font-size: 14px;
    }

    .btn-nav-action i {
        font-size: 22px;
        /* Slightly larger icons for touch */
    }
}

/* ===== INSTAGRAM SECTION - CLEAN DESIGN ===== */
.instagram-section-new {
    background: var(--white);
    padding: 60px 0;
}

.instagram-section-new .section-title h2 {
    font-family: var(--font-primary);
    font-size: 2.5rem;
    margin-bottom: 0;
}

.instagram-section-new .section-title p {
    font-size: 1rem;
    color: var(--text-muted);
}

/* Instagram Widget Wrapper */
.instagram-widget-wrapper {
    position: relative;
    margin-top: 30px;
}

/* EmbedSocial widget container */
.embedsocial-hashtag {
    min-height: 300px;
    position: relative;
}

/* Style the Instagram cards to be square with rounded corners */
.embedsocial-hashtag .es-feed-item,
.embedsocial-hashtag .es-widget-item {
    aspect-ratio: 1 / 1 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.embedsocial-hashtag img {
    border-radius: 12px !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

/* Powered by link styling */
.feed-powered-by-es {
    font-size: 11px;
    opacity: 0.5;
    text-align: center;
    margin-top: 20px;
}

/* ===== BREADCRUMB STYLING ===== */
.breadcrumb {
    background-color: transparent !important;
    padding: 0.75rem 0 !important;
    margin-bottom: 0 !important;
    font-size: 0.9rem;
    font-family: var(--font-secondary);
}

.breadcrumb-item {
    color: var(--text-muted);
}

.breadcrumb-item a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-item a:hover {
    color: var(--primary-color);
}

.breadcrumb-item.active {
    color: var(--text-muted);
}

.breadcrumb-item+.breadcrumb-item::before {
    content: "/";
    color: var(--text-muted);
    padding-right: 0.5rem;
}

/* ===== WISHLIST MOBILE RESPONSIVENESS ===== */
@media only screen and (max-width: 767px) {
    .instagram-section-new {
        padding-top: 40px;
    }

    /* Transform Table to Cards */
    .wishlist-page .table,
    .wishlist-page tbody,
    .wishlist-page tr,
    .wishlist-page td {
        display: block;
        width: 100%;
    }

    /* Hide Table Header */
    .wishlist-page thead {
        display: none;
    }

    /* Card Styling for Rows */
    .wishlist-page tr {
        background: #fff;
        border: 1px solid #eee;
        border-radius: 12px;
        margin-bottom: 20px;
        padding: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
        position: relative;
        display: grid;
        grid-template-columns: 80px 1fr 30px;
        /* Image | Content | Delete Icon */
        grid-template-rows: auto auto auto;
        gap: 0 15px;
        align-items: start;
    }

    /* --- Image (Top Left) --- */
    .wishlist-page td.plantmore-product-thumbnail {
        grid-column: 1;
        grid-row: 1 / span 3;
        width: 80px;
        height: 80px;
        padding: 0;
        border: none;
        margin: 0;
    }

    .wishlist-page td.plantmore-product-thumbnail a,
    .wishlist-page td.plantmore-product-thumbnail img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover !important;
        border-radius: 8px;
        aspect-ratio: 1 / 1;
    }

    /* --- Product Name (Right of Image) --- */
    .wishlist-page td.plantmore-product-name {
        grid-column: 2;
        grid-row: 1;
        padding: 0;
        border: none;
        text-align: left;
        margin-bottom: 5px;
        width: 100%;
    }

    .wishlist-page td.plantmore-product-name a {
        font-family: var(--font-secondary);
        font-weight: 600;
        font-size: 1rem;
        color: var(--secondary-color);
        line-height: 1.3;
        display: block;
    }

    /* --- Remove Button (Top Right Icon) --- */
    .wishlist-page td.plantmore-product-remove {
        grid-column: 3;
        grid-row: 1;
        padding: 0;
        border: none;
        text-align: right;
        height: 24px;
    }

    .wishlist-page td.plantmore-product-remove button {
        background: transparent;
        border: none;
        color: #e53935;
        /* Red for delete */
        font-size: 1.2rem;
        padding: 0;
        line-height: 1;
    }

    /* --- Price (Below Name) --- */
    .wishlist-page td.plantmore-product-price {
        grid-column: 2;
        grid-row: 2;
        padding: 0;
        border: none;
        text-align: left;
        margin-bottom: 5px;
    }

    .wishlist-page td.plantmore-product-price span {
        font-weight: 500;
        color: var(--text-dark);
        font-size: 1.1rem;
    }

    /* --- Stock Status (Badge Style, Below Price) --- */
    .wishlist-page td.plantmore-product-stock-status {
        grid-column: 2;
        grid-row: 3;
        padding: 0;
        border: none;
        text-align: left;
    }

    .wishlist-page td.plantmore-product-stock-status span.stockcheck {
        display: inline-block;
        font-size: 0.75rem;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 20px;
        background-color: rgba(40, 167, 69, 0.1);
        color: #28a745 !important;
        /* Green text override */
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* --- Add to Cart (Full Width Bottom) --- */
    /* Spans all columns at the bottom */
    .wishlist-page td.plantmore-product-add-cart {
        grid-column: 1 / -1;
        grid-row: 4;
        width: 100%;
        padding: 15px 0 0;
        border-top: 1px solid #f5f5f5;
        margin-top: 15px;
    }

    .wishlist-page td.plantmore-product-add-cart .btn {
        width: 100%;
        justify-content: center;
        border-radius: 50px !important;
        /* Fully rounded pill */
        background-color: var(--secondary-color) !important;
        color: #fff !important;
        font-weight: 600;
        padding: 10px 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
    }

    .wishlist-page td.plantmore-product-add-cart .btn:hover {
        background-color: var(--primary-color) !important;
        color: var(--secondary-color) !important;
    }
}

/* ===== THEMED PRIMARY BUTTON ===== */
/* Reusable Primary Button based on Hero Style */
.btn-primary-theme {
    background: var(--secondary-color);
    color: var(--white);
    padding: 14px 35px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 30px;
    border: none;
    transition: all 0.4s ease;
    box-shadow: 0 5px 15px rgba(30, 58, 95, 0.2);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary-theme:hover {
    background: var(--primary-color);
    color: var(--secondary-color);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(245, 197, 24, 0.4);
    text-decoration: none;
}

.btn-primary-theme::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
    transition: 0.5s;
}

.btn-primary-theme:hover::before {
    left: 100%;
}

.btn-primary-theme:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.3);
}

/* ===== SHOP PAGE REFINEMENTS ===== */

/* Shop Top Bar Style */
.shop-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 15px 25px;
    border-radius: 12px;
    border: 1px solid #eee;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

/* =========================================
   LIST VIEW STYLES
   ========================================= */

/* List Layout Wrapper */
.product-layout-list {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    margin-bottom: 20px;
    padding: 20px;
    align-items: center;
    transition: all 0.3s ease;
}

.product-layout-list:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

/* Single Product Wrap (Image Container) */
.single-product-wrap .product-image {
    border-radius: 8px;
    overflow: hidden;
    height: 200px;
    /* Fixed height for consistency */
}

.single-product-wrap .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Product Content */
.product-content h4 a {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--secondary-color);
    text-decoration: none;
    transition: color 0.2s;
}

.product-content h4 a:hover {
    color: var(--primary-color);
}

.product-content p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Action Buttons */
.btn-action-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: #eee;
    color: var(--text-muted);
    transition: all 0.2s;
}

.btn-action-icon:hover {
    background: var(--secondary-color);
    color: #fff;
    border-color: var(--secondary-color);
}

.btn-action-cart {
    background: #fff;
    border: 1px solid #eee;
    color: var(--secondary-color);
    font-size: 0.85rem;
    padding: 10px 24px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-action-cart:hover {
    background: var(--secondary-color);
    color: #fff;
    border-color: var(--secondary-color);
}

/* =========================================
   RTL LIST VIEW ADJUSTMENTS
   ========================================= */

/* 1. Flex Direction - Image Right, Content Left */
[dir="rtl"] .product-layout-list {
    flex-direction: row-reverse;
}

/* 2. Content Alignment */
[dir="rtl"] .product-layout-list .product-content {
    text-align: right !important;
    /* Ensure content is right aligned */
    padding-right: 20px;
    /* Spacing from image */
    padding-left: 0;
}

/* 3. Action Buttons Alignment (Flip to Left) */
[dir="rtl"] .product-action-list {
    justify-content: flex-end !important;
    /* In RTL flex-end is Left? No. 
                                             In RTL, flex-start is Right, flex-end is Left. 
                                             Wait, standard browser logic:
                                             RTL row: start=right, end=left.
                                             So justify-content: flex-end puts items on the LEFT. Correct.
                                          */
    flex-direction: row-reverse;
    /* Flip button order: Wishlist <-> Cart */
}

/* Ensure no margins mess up alignment */
[dir="rtl"] .me-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

[dir="rtl"] .ms-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* View Mode Toggles */
.product-mode .shop-item-filter-list {
    display: flex;
    gap: 10px;
    border: none;
    padding: 0;
    margin: 0;
}

.product-mode .shop-item-filter-list li {
    margin: 0;
}

.product-mode .shop-item-filter-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #f8f9fa;
    color: #888;
    font-size: 1.4rem;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.product-mode .shop-item-filter-list li a.active {
    background: var(--secondary-color);
    color: #fff;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.15);
}

.product-mode .shop-item-filter-list li a:hover:not(.active) {
    background: #e9ecef;
    color: var(--secondary-color);
}

/* Sorting Dropdown */
.product-short {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* .product-short::before {
    content: "Sort by:";
    font-size: 0.9rem;
    font-weight: 500;
    color: #666;
} */

.product-short .nice-select {
    border: 1px solid #eee;
    border-radius: 8px;
    height: 42px;
    line-height: 40px;
    padding-left: 15px;
    padding-right: 35px;
    font-size: 0.9rem;
    font-weight: 400;
    color: #444;
    background: #f8f9fa;
    transition: all 0.3s ease;
}

.product-short .nice-select:hover {
    border-color: #ddd;
    background: #fff;
}

.product-short .nice-select:after {
    border-bottom: 2px solid #999;
    border-right: 2px solid #999;
    height: 7px;
    width: 7px;
    right: 15px;
}

.product-short .nice-select .list {
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #eee;
    margin-top: 5px;
}

.product-short .nice-select .option {
    padding-left: 15px;
    padding-right: 15px;
}

.product-short .nice-select .option:hover,
.product-short .nice-select .option.focus,
.product-short .nice-select .option.selected.focus {
    background-color: #f8f9fa;
    color: var(--secondary-color);
}

/* ===== UNIFIED SLIDER NAVIGATION ===== */
/* Standardize all slider buttons (Slick, Bootstrap, etc.) */
.btn-slider-nav {
    width: 65px !important;
    height: 65px !important;
    background: #000263 !important;
    /* Brand Dark Navy */
    color: #ffffff !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    transition: all 0.3s ease;
    opacity: 1 !important;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    padding: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

.btn-slider-nav i {
    line-height: 0;
    /* Fix vertical alignment for icons */
    display: block;
}

/* Hover State */
.btn-slider-nav:hover {
    background: #ffffff !important;
    color: #000263 !important;
    /* Brand Dark Navy */
    border-color: #000263 !important;
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(0, 2, 99, 0.4) !important;
}

/* Ensure slick arrows are visible and positioned correctly */
.slick-prev.btn-slider-nav {
    left: 10px;
}

.slick-next.btn-slider-nav {
    right: 10px;
}

@media (min-width: 1200px) {
    .slick-prev.btn-slider-nav {
        left: -32px;
        /* Pull outside container on large screens if desired, or keep inside */
    }

    .slick-next.btn-slider-nav {
        right: -32px;
    }
}

/* Mobile Responsiveness */
@media only screen and (max-width: 767px) {
    .btn-slider-nav {
        width: 35px !important;
        height: 35px !important;
        font-size: 14px !important;
        border-width: 1px !important;
    }

    .slick-prev.btn-slider-nav {
        left: 5px;
    }

    .slick-next.btn-slider-nav {
        right: 5px;
    }
}

/* ===== UNIFIED SLIDER CONTROLS ===== */

/* Base styles for all slider arrows (Slick + Bootstrap Carousel) */
.slick-arrow,
.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    background: var(--white) !important;
    border: 1px solid rgba(26, 58, 95, 0.1) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 10;
    color: var(--secondary-color) !important;
    cursor: pointer;
    /* opacity: 0.85; */
    transition:
        opacity 0.3s ease,
        box-shadow 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    padding: 0 !important;
}

/* Remove any transform on hover - only fade */
.slick-arrow:hover,
.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-50%) !important;
    /* Keep centered, no scaling */
}

/* Icon styling */
.slick-arrow i,
.carousel-control-prev-icon,
.carousel-control-next-icon {
    color: var(--secondary-color) !important;
    font-size: 18px !important;
    margin: 0 !important;
    background-image: none !important;
    /* Remove Bootstrap default backgrounds */
    width: auto !important;
    height: auto !important;
}

/* Position adjustments */
.slick-prev,
.carousel-control-prev {
    left: 10px !important;
}

.slick-next,
.carousel-control-next {
    right: 10px !important;
}

/* Mobile adjustments */
@media (max-width: 576px) {

    .slick-arrow,
    .carousel-control-prev,
    .carousel-control-next {
        width: 35px !important;
        height: 35px !important;
    }

    .slick-arrow i,
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        font-size: 16px !important;
    }

    .slick-prev,
    .carousel-control-prev {
        left: 5px !important;
    }

    .slick-next,
    .carousel-control-next {
        right: 5px !important;
    }
}

/* Ensure Bootstrap carousel icons use Bootstrap Icons instead of default chevrons */
.carousel-control-prev-icon::before {
    content: "\F285";
    /* bi-arrow-left */
    font-family: "bootstrap-icons" !important;
    font-size: 18px;
}

.carousel-control-next-icon::before {
    content: "\F288";
    /* bi-arrow-right */
    font-family: "bootstrap-icons" !important;
    font-size: 18px;
}

/* ===== NEWSLETTER SECTION REDESIGN ===== */
/* Desktop & Core Styles */
.newsletter-section {
    position: relative;
    padding: 60px 0;
    background-color: var(--bg-cream);
    /* Consistent with theme */
    color: var(--secondary-color);
}

.newsletter-section h3 {
    color: var(--secondary-color);
    font-family: "Domaine Display", serif;
    font-weight: 500;
    margin-bottom: 15px;
}

.newsletter-section p {
    color: var(--text-light);
    font-size: 1.05rem;
    max-width: 480px;
    margin-bottom: 0;
}

/* Desktop Input Group: United Pill Shape */
.newsletter-form .input-group {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    padding: 4px;
    display: flex;
    align-items: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    max-width: 500px;
    /* Prevent overly wide form on desktop */
    margin-left: auto;
    /* Align to right on desktop if in col-6 */
}

.newsletter-form .input-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 8px 25px rgba(245, 197, 24, 0.15);
    transform: translateY(-2px);
}

.newsletter-form .form-control.SubscribeEmail {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 25px;
    padding-right: 15px;
    height: 52px;
    /* Good height */
    font-size: 1rem;
    color: var(--text-dark);
    font-family: var(--font-secondary);
    border-radius: 50px 0 0 50px !important;
}

.newsletter-form .form-control.SubscribeEmail::placeholder {
    color: #999;
    font-weight: 400;
}

.newsletter-form .newsletter-btn {
    border-radius: 50px !important;
    padding: 10px 35px;
    height: 52px;
    /* Match input height */
    border: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    /* Uses btn-theme-dark colors by default */
}

/* Override btn-theme-dark shadow within input group to avoid double shadow */
.newsletter-form .newsletter-btn {
    box-shadow: none !important;
}

.newsletter-form .newsletter-btn:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Mobile Responsive Overrides */
@media (max-width: 991px) {
    .newsletter-section {
        padding: 40px 0;
    }

    .newsletter-wrapper {
        text-align: center;
    }

    .newsletter-wrapper h3 {
        font-size: 1.8rem;
        margin-bottom: 10px;
    }

    .newsletter-wrapper p {
        margin-bottom: 25px;
        padding: 0 15px;
    }

    .newsletter-section .col-lg-6 {
        margin-bottom: 0;
        /* Bootstrap adds gutter, we manage spacing via elements */
    }

    /* Reset Input Group for Stacked Layout */
    .newsletter-form .input-group {
        flex-direction: column;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
        gap: 15px;
        max-width: 100%;
        /* Full width on mobile */
        margin: 0;
    }

    .newsletter-form .input-group:focus-within {
        transform: none;
        box-shadow: none;
    }

    /* Standalone Input Pill */
    .newsletter-form .form-control.SubscribeEmail {
        background: #fff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 50px !important;
        width: 100% !important;
        height: 55px;
        /* Larger touch target */
        text-align: center;
        padding: 0 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
    }

    .newsletter-form .form-control.SubscribeEmail:focus {
        border-color: var(--primary-color) !important;
        box-shadow: 0 6px 15px rgba(245, 197, 24, 0.15) !important;
    }

    /* Standalone Button Pill */
    .newsletter-form .newsletter-btn {
        width: 100% !important;
        /* Full width */
        justify-content: center;
        height: 55px;
        /* Match input */
        font-size: 1rem;
        box-shadow: 0 6px 20px rgba(30, 58, 95, 0.2) !important;
        /* Restore shadow */
    }

    /* Ensure Icon is visible */
    .newsletter-form .newsletter-btn i {
        display: inline-block;
    }
}

/* ===== CHECKOUT ADDRESS IMPROVEMENTS ===== */

/* Address Grid Layout */
#savedAddressesList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

/* Mobile specific for address grid */
@media (max-width: 767px) {
    #savedAddressesList {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* Address Card Design */
.address-card {
    border: 2px solid #eef0f2 !important;
    border-radius: 12px !important;
    background: #fff;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
    margin-bottom: 0 !important;
    /* Override default margin */
}

.address-card:hover {
    border-color: #cbd5e0 !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.address-card .card-body {
    padding: 20px !important;
}

/* Selected State */
.address-card.selected {
    border-color: var(--secondary-color) !important;
    background-color: #f8f9ff !important;
    /* Light tint of navy */
    box-shadow: 0 5px 20px rgba(0, 2, 99, 0.12);
}

/* Add a checkmark icon to selected card */
.address-card.selected::before {
    content: "\f26e";
    /* Bootstrap Icon check2 */
    font-family: bootstrap-icons;
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--secondary-color);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    animation: scaleIn 0.2s ease;
}

@keyframes scaleIn {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

/* Address Typography */
.address-details strong {
    color: var(--secondary-color);
    font-size: 1.05rem;
    font-weight: 500;
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-primary);
}

.address-details .text-muted {
    font-size: 0.95rem;
    color: #6c757d !important;
    line-height: 1.5;
    display: block;
}

/* Buttons for Address Actions (Delete) */
.address-actions {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
}

.btn-delete-address {
    padding: 5px 12px;
    font-size: 0.85rem;
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
    border: none;
    border-radius: 6px;
    transition: all 0.2s;
}

.btn-delete-address:hover {
    background: #dc3545;
    color: white;
}

/* Unknown Address Card (Special Variant) */
.unknown-address-card {
    border: 2px dashed #cbd5e0 !important;
    background: #fcfcfc;
    margin-top: 10px;
}

.unknown-address-card:hover {
    border-color: var(--secondary-color) !important;
    background: #fff;
}

.unknown-address-card.selected {
    border-style: solid !important;
    border-color: var(--secondary-color) !important;
    background-color: #f8f9ff !important;
}

.unknown-address-card .address-details strong {
    color: #4a5568 !important;
    /* Ensure visibility */
}

/* Add New Address Button Style */
.btn-add-new-address {
    background: var(--secondary-color);
    color: white !important;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 2, 99, 0.2);
    margin-top: 20px;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.btn-add-new-address:hover {
    transform: translateY(-2px);
    background: var(--primary-color);
    color: var(--secondary-color) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.btn-add-new-address:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 2, 99, 0.3);
}

.btn-add-new-address i {
    font-size: 1.1rem;
}

/* Guest Empty State */
.guest-empty-state {
    text-align: center;
    padding: 40px 20px;
    background: #f8f9fa;
    border-radius: 16px;
    margin-bottom: 25px;
    border: 1px dashed #ced4da;
}

.guest-empty-state h5 {
    color: var(--secondary-color);
    font-weight: 500;
    margin-bottom: 10px;
}

.guest-empty-state p {
    color: #6c757d;
    max-width: 400px;
    margin: 0 auto 25px;
}

/* =========================================
   Product List View Styles
   ========================================= */

/* List View Wrapper - Force Full Width Columns */
.shop-list-view .col-6,
.shop-list-view .col-sm-6,
.shop-list-view .col-md-4,
.shop-list-view .col-lg-4,
.shop-list-view .col-xl-3 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

/* List View Card Layout */
.shop-list-view .product-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* Align items vertically centered */
    text-align: left;
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #eee;
    background: #fff;
    border-radius: 12px;
    transition: all 0.3s ease;
    height: 180px;
    /* Decreased fixed height */
    position: relative;
    /* For absolute positioning of action group */
}

.shop-list-view .product-card:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* Image in List View */
.shop-list-view .product-card .product-image {
    width: 180px;
    /* Decreased width */
    height: 150px !important;
    /* Fixed height for container */
    flex-shrink: 0;
    margin-right: 25px;
    margin-bottom: 0;
    overflow: hidden;
    border-radius: 8px;
}

.shop-list-view .product-card .product-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.shop-list-view .product-card .product-image img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.4s ease;
}

/* Info Section - Name Top, Price Below */
.shop-list-view .product-card .product-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Start from top */
    align-items: flex-start;
    padding: 0;
    height: 100%;
    /* Fill height to allow positioning */
    position: static;
    /* Let children position relative to card if needed, but we used relative on card */
}

.shop-list-view .product-card .product-name {
    font-size: 1.4rem;
    margin-top: 10px;
    margin-bottom: 8px;
    font-weight: 600;
}

.shop-list-view .product-card .product-price-row {
    width: auto;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    /* Remove margin as buttons are moved */
}

.shop-list-view .product-card .product-price {
    margin-bottom: 0;
    display: block;
    /* Ensure price takes its own line if needed, or stays with flow */
}

.shop-list-view .product-card .product-price .new-price {
    font-size: 1.3rem;
    color: var(--text-dark);
}

/* Action Group Container (custom creation via absolute positioning for the buttons) */
/* Since html structure is fixed, we target the specific buttons */

/* Standard "Add to Cart" Button */
.shop-list-view .product-card .btn-card-add {
    position: absolute;
    bottom: 20px;
    right: 20px;
    transform: none !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 130px;
    /* Increased to accommodate ADD TO CART */
    height: 42px;
    padding: 0 30px !important;
    /* Fixed X-axis spacing as requested */
    border-radius: 50px !important;
    background: #fff !important;
    /* White background like screenshot */
    color: var(--secondary-color) !important;
    /* Navy text */
    border: 1px solid #e0e0e0 !important;
    /* Outline like screenshot */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    font-size: 13px !important;
    font-weight: 700 !important;
}

.shop-list-view .product-card .btn-card-add:hover {
    background: var(--primary-color);
    color: var(--secondary-color);
}

.shop-list-view .product-card .btn-card-add i {
    font-size: 1.1rem;
    display: none;
    /* Hide icon if text only preferred, or keep both. User said "with 'add to cart' text" */
}

/* Add text to the cart button */
.shop-list-view .product-card .btn-card-add::after {
    content: "ADD TO CART";
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

/* Wishlist Button - Before Add to Cart */
.shop-list-view .btn-card-wishlist {
    position: absolute;
    bottom: 20px !important;
    right: 170px !important;
    /* Position to the left of "Add to Cart" button (approx width 140px + gap) */
    top: auto !important;
    /* Reset top */
    opacity: 1;
    background: #fff;
    border: 1px solid #eee;
    width: 40px !important;
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    color: var(--secondary-color);
    z-index: 5;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.shop-list-view .btn-card-wishlist:hover {
    background: #f8f9fa;
    color: var(--accent-color);
}

/* Mobile Responsiveness for List View */
@media (max-width: 576px) {
    .shop-list-view .product-card {
        flex-direction: row;
        padding: 15px 10px;
        /* Increased Y padding */
        align-items: center;
        /* Center items vertically */
        height: auto;
        margin-bottom: 10px;
        /* Decreased gap between cards */
        position: relative;
    }

    .shop-list-view .product-card .product-image {
        width: 100px;
        height: 100px !important;
        margin-right: 15px;
    }

    .shop-list-view .product-card .product-info {
        padding-right: 0;
        /* Remove right padding if any */
        margin-bottom: 30px;
        /* Make space for buttons at bottom */
    }

    .shop-list-view .product-card .product-name {
        font-size: 1rem;
        margin-top: 0;
        margin-bottom: 5px;
    }

    .shop-list-view .product-card .product-price .new-price {
        font-size: 1rem;
    }

    /* On mobile, position buttons absolute bottom right */
    .shop-list-view .product-card .btn-card-add {
        position: absolute;
        bottom: 15px;
        right: 10px;
        margin-top: 0;
        padding: 5px 15px;
        font-size: 0.8rem;
        height: 32px;
        min-width: unset;
        width: auto !important;
        transform: none !important;
    }

    .shop-list-view .product-card .btn-card-add::after {
        font-size: 0.75rem;
    }

    .shop-list-view .btn-card-wishlist {
        position: absolute;
        bottom: 15px !important;
        /* Align with add to cart */
        right: 100px !important;
        /* Position to left of add to cart */
        top: auto !important;
        width: 32px !important;
        height: 32px !important;
    }
}

/* =========================================
   Custom Yellow Loader (Restored) 
   ========================================= */
.loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    border-top: 4px solid #fff;
    border-right: 4px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.loader::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border-left: 4px solid var(--primary-color);
    /* Theme Yellow */
    border-bottom: 4px solid transparent;
    animation: rotation 0.5s linear infinite reverse;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.swal2-popup.no-shadow-loader {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

.swal2-popup.no-shadow-loader .swal2-title {
    color: #fff !important;
}

.text-white {
    color: #fff !important;
}

/* =========================================
   Global Page Loader (Premium) 
   ========================================= */

.fl-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    /* Highest priority */
    background: #fff;
    /* White background for clean look */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease-in-out;
    opacity: 1;
    visibility: visible;
}

.fl-preloader-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Logo Image */
.fl-preloader-logo {
    width: 65px;
    height: auto;
    margin-bottom: 5px;
    animation: pulseLogo 2s infinite ease-in-out;
    position: relative;
    z-index: 2;
}

/* Spinner Circle around Logo */
.fl-preloader-spinner {
    width: 120px;
    height: 120px;
    border: 3px solid rgba(0, 6, 84, 0.05);
    /* Secondary light transparent */
    border-top: 3px solid var(--primary-color);
    /* Gold */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Transform-based centering - more reliable */
    z-index: 1;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes pulseLogo {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Hide State */
.fl-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Body Scroll Lock Class */
body.fl-preloader-active {
    overflow: hidden !important;
}

/* =========================================
   GLOBAL RTL INPUT FIXES
   ========================================= */

/* Force Right Alignment for Inputs in RTL */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] .form-control {
    text-align: right;
    direction: rtl;
}

/* Ensure Placeholder Text follows suit */
[dir="rtl"] input::placeholder,
[dir="rtl"] textarea::placeholder {
    text-align: right;
    direction: rtl;
}

/* Specific exclusions or reinforcements */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="search"] {
    text-align: right;
    direction: rtl;
}

/* SEARCH & INPUT GROUPS IN RTL */
/* In RTL, natural flex-direction:row goes Right -> Left.
   This places the first item (Input) on the Right, and the second item (Button) on the Left.
   This is the desired behavior (Button on Left).
   
   However, we must ensure Border Radius is correct.
   Bootstrap may try to apply Square borders to "End" (Left) and Round to "Start" (Right).
   We just need to ensure borders look seamless.
*/

[dir="rtl"] .search-input-wrapper input {
    text-align: right;
}

/* RTL Arrow Rotation */
html[dir="rtl"] .bi-arrow-right {
    transform: scaleX(-1);
    display: inline-block;
}

html[dir="rtl"] .carousel-control-next .bi-arrow-right,
html[dir="rtl"] .slick-arrow .bi-arrow-right {
    transform: none !important;
}

/* Ensure form-control-theme has rounded corners */
.form-control-theme {
    border-radius: 8px !important;
}

/* Override RTL for phone mask inputs - always LTR */
[dir="rtl"] .phone-mask,
[dir="rtl"] input.phone-mask,
html[lang="ar"] .phone-mask,
html[lang="ar"] input.phone-mask {
    text-align: left !important;
    direction: ltr !important;
    unicode-bidi: bidi-override !important;
}

/* Address modal specific inputs */
#addAddressModal .form-control,
#addAddressModal .form-control-theme {
    border-radius: 8px !important;
}

/* Order Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.status-badge i {
    font-size: 14px;
}

/* Status Specific Colors (Matching Admin Panel) */
.status-in-progress,
.status-in-process,
.status-pending {
    background-color: #00bcd4 !important;
    color: white !important;
}

.status-order-accepted,
.status-accepted,
.status-processing {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

.status-order-delivered,
.status-delivered {
    background-color: #28a745 !important;
    color: white !important;
}

.status-payment-failed,
.status-failed {
    background-color: #dc3545 !important;
    color: white !important;
}

.status-delivery-failed {
    background-color: #ff9800 !important;
    color: white !important;
}

.status-order-cancelled,
.status-cancelled {
    background-color: #6c757d !important;
    color: white !important;
}