/*
=====================================================
Project Name : Bella E-commerce
Author       : Developer Belasea (Jibon Ahmed)
Version      : 1.0
Created      : July 2026
Description  : Main stylesheet for the website.
=====================================================

Table of Contents

1. Reset
2. Variables
3. Typography
4. Utility Classes
5. Buttons
6. Header
7. Navigation
8. Hero Slider
9. About
10. Services
11. Products
12. Testimonials
13. Contact
14. Footer
15. Responsive

=========================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Playfair+Display:wght@400;500;700&display=swap');



/* =====================================
   1. CSS Variables – centralized theme 
=====================================*/
:root {
    /* Primary brand color – vibrant pink */
    --primary-h: 345; /* hue */
    --primary-s: 78%;
    --primary-l: 55%;
    --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
    --primary-light: hsl(var(--primary-h), var(--primary-s), 80%);
    --primary-dark: hsl(var(--primary-h), var(--primary-s), 35%);

    /* Neutral palette */
    --neutral-100: hsl(210, 10%, 98%);   /* off‑white */
    --neutral-200: hsl(210, 10%, 94%);
    --neutral-300: hsl(210, 8%, 85%);
    --neutral-500: hsl(210, 12%, 45%);
    --neutral-900: hsl(210, 15%, 15%);

    /* Accent, success, warning */
    --accent: #ff7e5f;
    --success: #28a745;
    --warning: #f0ad4e;
}

/* Dark‑mode overrides – respects user OS preference */
@media (prefers-color-scheme: dark) {
    :root {
        --neutral-100: hsl(210, 10%, 10%);
        --neutral-200: hsl(210, 12%, 15%);
        --neutral-300: hsl(210, 12%, 25%);
        --neutral-500: hsl(210, 15%, 70%);
        --neutral-900: hsl(210, 10%, 95%);
    }
}

/*=======================================
2 & 3 : Global resets & typography 
====================================*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--neutral-900);
    /* background-color: var(--neutral-100); */
    line-height: 1.6;
    color: #1a1a1a;
}

body {
    overflow-x: hidden;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: #000;
    line-height: 1.2;
    font-weight: 700;
}

/* Paragraph */
p {
    color: #000;
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/*===================
  4. Utility Classes 
=================================*/

.text-primary {
    color: var(--primary); }
.text-neutral-500 {
    color: var(--neutral-500);
}
.bg-primary {
    background-color: var(--primary);
}
.bg-neutral-100 {
    background-color: var(--neutral-100);
}


/* ===============================
Main Content
=============================== */
.main-content {
    /* margin-top: 100px;
    margin-left: 150px; */
    background-color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 10px 30px rgba(0,0,0,0.3);
}


/* =======================================
   Buttons & Card Components – unify look
=========================================*/
.card {
    background: #fff;
    border-radius: 12px;
    border: none;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}

/* Image hover zoom for cards */
.card img {
    transition: transform 0.4s ease;
}

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

.custom-btn{
    background-color: #EB1C68;
    border: 1px solid #EB1C68;
    color: #ffffff;
    border-radius: 6px;
    padding: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
}

.custom-btn:hover{
    background-color: #c04270;
    color: white;
    box-shadow: 0 6px 14px rgba(0, 107, 118, 0.25);
}

/* ==============================
   Form Elements – modern look
================================= */
input,
select,
textarea {
    border: 1px solid var(--neutral-300);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    background-color: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-h), 70%, 70%, 0.2);
    outline: none;
}

.btn-bella {
    background-color: #EB1E68;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.btn-bella:hover {
    background-color: #c04270;
    color: white;
    box-shadow: 0 6px 14px rgba(0, 107, 118, 0.25);
}

.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: var(--primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.12);
}

/* ===============================
   Jump to Top Button
=============================== */
.jump-to-top-btn {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 48px;
    height: 48px;
    background-color: #EB1C68;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
    pointer-events: none;
    box-shadow: 0 4px 15px rgba(0, 18, 41, 0.3);
}

.jump-to-top-btn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.jump-to-top-btn:hover {
    background-color: #EB1C68;
    box-shadow: 0 6px 20px rgba(0, 18, 41, 0.4);
}


/*====================================
6. Header Section 
====================================*/
.header-section{
    overflow: hidden;
    display: block;
}

.top-header{
    background-color: #000;
    color: #ffffff;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.country-row {
    display: inline-flex;
    align-items: center;
    background: #000;
    color: #fff;
    border: 1px solid #6c757d;
    border-radius: 50rem;
    padding: 6px 14px;
    font-size: 0.8rem;
    cursor: pointer;
    gap: 6px;
    min-height: 32px;
}

.country-row i {
    font-size: 14px;
    color: #1E88E5;
}

.country-row span {
    white-space: nowrap;
}

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

/* Bootstrap md breakpoint (≥768px) */
@media (min-width: 768px) {
    .row-flex {
        justify-content: flex-end;
    }
}


/* =============================
   Announcement Ticker Styling
=============================*/
.announcement-wrapper {
    position: relative;
    width: 100%;
    white-space: nowrap;
}

.announcement-ticker {
    display: inline-flex;
    padding-left: 100%;
    animation: smoothTicker 25s linear infinite;
}

.announcement-ticker:hover {
    animation-play-state: paused;
}

.ticker-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: #F9E2E6;
    letter-spacing: 1px;
    padding-right: 100px;
    text-transform: uppercase;
}

@keyframes smoothTicker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

/* ==========================================================================
   5. DESKTOP NAVIGATION ENGINE (THREE-COLUMN FLEX PILLARS)
========================================================================== */
.navbar-section.sticky-top {
    top: 0;
    z-index: 1020;
    background-color: #fff;
}

/* Menu Anchor Link Animations */
.navbar-nav .nav-link {
    position: relative;
    color: #333;
    padding: 0.5rem 0;
    margin: 0 1rem;
    transition: color 0.3s ease;
    font-weight: 500;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #000;
    transition: width 0.3s ease;
}

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

.navbar-nav .nav-link:hover {
    color: #000 !important;
}

/* Inactive links default look */
.mobile-nav-link {
    color: #a0aec0; /* Soft gray color for unselected tabs */
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    padding: 8px 0;
    
}

/* Active current-page link highlight styling look */
.mobile-nav-link.active {
    color: #1a202c; 
    font-weight: 600;
}

.logo-row {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #dee2e6; /* Bootstrap border color */
    padding-bottom: 0.5rem;           /* Equivalent to pb-2 */
}
.logo-row img {
    height: 40px; /* Adjust as needed */
}

@media (min-width: 992px) {
    .navbar-left-col, 
    .navbar-right-col {
        flex-basis: 0;
        flex-grow: 1;
    }
    
    .navbar-nav .nav-link {
        margin: 0 !important; 
    }
}

/*======================================== 
    Cart-badge Section Styling
======================================== */
.cart-badge {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

/* Cart icon */
.cart-badge i {
    font-size: 18px;
}

/* Badge */
.cart-count {
    position: absolute;
    top: -6px;
    right: 0px;
    background: #EB1E68;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: 0.3s ease;
}

/* Hover effect */
.cart-badge:hover .cart-count {
    transform: scale(1.1);
}

/* Optional pulse animation (premium feel) */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

.cart-count:not(:empty) {
    animation: pulse 1.5s infinite;
}

/* Hide badge if 0 */
.cart-count:empty,
.cart-count:contains("0") {
    display: none;
}

/* ==========================================================================
   6. SEARCH SYSTEM (PILL SEARCH SELECT BOX & DROPDOWN)
========================================================================== */
.pill-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #f1f2f6 !important;
    border-radius: 50px !important;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent !important;
}

/* TomSelect Input Context Wrappers Reset */
.pill-search-wrapper .ts-wrapper.single {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.pill-search-wrapper .ts-wrapper.single .ts-control {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 12px 50px 12px 20px !important;
    font-size: 14px !important;
    font-family: 'Inter', sans-serif;
    color: #2d3436 !important;
    border-radius: 50px !important;
    width: 100% !important;
}

.pill-search-wrapper .ts-wrapper.single .ts-control::after {
    display: none !important; /* Hides TomSelect structural down arrow native UI */
}

.pill-search-wrapper .ts-wrapper .ts-control input::placeholder {
    color: #7f8c8d !important;
    opacity: 0.85;
}

.pill-search-icon-btn {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    color: #57606f !important;
    font-size: 16px !important;
    cursor: pointer !important;
    padding: 0 !important;
    z-index: 10 !important;
}

/* Search Dropdown Panel Element Modifiers */
.pill-search-wrapper .ts-dropdown {
    border-radius: 14px !important;
    margin-top: 8px !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.pill-search-wrapper .ts-dropdown .option {
    padding: 12px 20px !important;
    font-size: 14px !important;
    color: #2d3436 !important;
}

.pill-search-wrapper .ts-dropdown .active {
    background-color: #f1f2f6 !important;
    color: #000000 !important;
}

.pill-search-wrapper:focus-within {
    background-color: #ffffff !important;
    border-color: #000000 !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.02) !important;
}

/* ==========================================================================
   7. MOBILE DRAWER SYSTEM (OFFCANVAS)
   ========================================================================== */
#mobileSidebar {
    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.12) !important;
    border: none !important;
}

#mobileSidebar .list-group-item-action {
    transition: background-color 0.2s ease, color 0.2s ease;
    font-weight: 500;
    color: #333333;
}

#mobileSidebar .list-group-item-action:hover {
    background-color: #f8f9fa;
    color: #e21b70;
}

/* ==========================================================================
   8. SYSTEM MOBILE TABBAR FIXED CONSOLE
   ========================================================================== */
.content-wrapper-padding {
    padding-bottom: 80px;
}

@media(min-width: 992px) {
    .content-wrapper-padding {
        padding-bottom: 0px;
    }
}

.mobile-bottom-bar {
    background-color: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 -3px 16px rgba(0, 0, 0, 0.05);
    padding-top: 8px !important;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1030;
}

.mobile-nav-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6c757d;
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    background: none;
    border: none;
    padding: 2px 12px;
    transition: color 0.15s ease-in-out;
}

.mobile-nav-link i {
    font-size: 19px;
    margin-bottom: 3px;
    height: 22px;
    display: flex;
    align-items: center;
}

.mobile-nav-link.active, 
.mobile-nav-link:hover {
    color: #e21b70 !important;
}

@media (max-width: 991.98px) {
    /* Targets the inner cart sidebar container inside mobile configurations */
    .cart-sidebar-wrapper, 
    #cartSidebar {
        display: none !important;
    }
}



/*================================
    CART SIDEBAR TOGGLE BUTTON
================================*/
.cart-sidebar-toggle-wrapper {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 1030;
    pointer-events: none;
}

.cart-sidebar-btn {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    padding: 15px 5px;
    background-color: #D81B60;
    color: #ffffff;
    border: none;
    border-radius: 10px 0 0 10px;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.cart-sidebar-btn:hover {
    background-color: #cf4a7a;
    width: 55px;
    color: #ffffff;
}

.cart-sidebar-btn .cart-sidebar-text-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
}

/*================================
    OFFCANVAS CART PANEL
================================*/
.cart-sidebar-panel {
    width: 375px !important;
    border-left: none;
}

.cart-sidebar-header {
    background-color: #EB1E68;
    color: white;
    padding: 1.25rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-sidebar-footer {
    background-color: #f4f6fb;
    padding: 1.25rem 1rem;
    border-top: 1px solid #dee2e6;
}

/* Product Item Styling */
.cart-sidebar-items-list {
    overflow-y: auto;
    max-height: calc(100vh - 250px);
}

.cart-sidebar-item {
    padding: 1rem;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    gap: 12px;
}

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

.cart-sidebar-product-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.cart-sidebar-product-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 8px;
    line-height: 1.4;
    display: block;
    text-decoration: none;
}

.cart-sidebar-price-row {
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #000;
}

.cart-sidebar-qty-text {
    color: #6c757d;
    font-weight: 400;
    font-size: 0.95rem;
}

/* Quantity Controls */
.cart-sidebar-qty-box {
    display: flex;
    align-items: center;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    width: fit-content;
    margin-top: 10px;
    background: #fff;
}

.cart-sidebar-qty-btn {
    border: none;
    background: transparent;
    padding: 0 10px;
    font-size: 1.1rem;
    color: #006b76;
    transition: 0.2s;
    cursor: pointer;
}

.cart-sidebar-qty-input {
    width: 40px;
    text-align: center;
    border: none;
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    font-weight: 600;
    pointer-events: none;
}

/* Buttons & UI Components */
.cart-sidebar-btn-apply,
.cart-sidebar-btn-checkout {
    background-color: #EB1E68;
    color: white;
    border: none;
    border-radius: 8px !important;
    padding: 10px;
}

.cart-sidebar-btn-apply:hover,
.cart-sidebar-btn-checkout:hover {
    background-color: #EB1E68;
    color: white;
}

.cart-sidebar-taka-sym {
    font-weight: 700;
    color: #000;
}


/* ==========================================================================
   Sidebar Cart PREMIUM SIDEBAR QUANTITY PICKER ENGINE
========================================================================== */
.quantity-picker-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 2px;
    background-color: #f8fafc;
    width: 110px;
    height: 34px;
    box-shadow: cubic-bezier(0.16, 1, 0.3, 1) 0px 1px 2px 0px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Enhances frame wrapper borders on active user hover */
.quantity-picker-wrapper:hover {
    border-color: #94a3b8;
}

/* Focus state ring when utilizing keyboard navigation hooks */
.quantity-picker-wrapper:focus-within {
    border-color: #0f172a;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.1);
}

/* Force structural layout form containers to match exact alignment heights */
.quantity-picker-wrapper form {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
}

/* Premium Typography Adjustment for Interaction Triggers */
.btn-qty-sidebar {
    background: transparent;
    border: none;
    width: 28px;
    height: 28px;
    font-size: 0.75rem; 
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
    user-select: none;
}

.btn-qty-sidebar:hover {
    background-color: #ffffff; 
    color: #0f172a; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Active press animation downshift */
.btn-qty-sidebar:active {
    transform: scale(0.95);
}

/* Numerical Center Value Stylings */
.quantity-sidebar-input {
    width: 50px; 
    border: none;
    text-align: center;
    font-weight: 600;
    font-size: 0.88rem;
    color: #0f172a;
    outline: none;
    background: transparent;
    pointer-events: none;
}


/* ==========================================================================
   PREMIUM SIDEBAR PROMO CODE BLOCK
   ========================================================================== */
.sidebar-coupon-group {
    border: 1px solid #cbd5e1; /* Subtle, crisp border surrounding the entire component */
    background-color: #f8fafc; /* Sleek, low-contrast gray background */
    transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Elegant glowing boundary ring when the input field is active */
.sidebar-coupon-group:focus-within {
    border-color: #0f172a; /* Locks to a rich charcoal black */
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08);
}

/* The Text Input Field Wrapper overrides */
.sidebar-coupon-group .coupon-input {
    border: none !important; 
    background: transparent !important;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #0f172a;
    padding: 10px 14px; 
}

/* Elegant placeholder typography handling */
.sidebar-coupon-group .coupon-input::placeholder {
    color: #94a3b8;
    font-size: 0.75rem;
    letter-spacing: 1px;
    font-weight: 500;
}

/* The Action Call Button */
.sidebar-coupon-group .coupon-btn {
    border: none !important;
    background-color: #0f172a !important; 
    color: #ffffff !important;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 0 20px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Premium Hover State */
.sidebar-coupon-group .coupon-btn:hover {
    background-color: #334155 !important; /* Smooth shift to premium slate gray */
}

/* Active subtle click compression cue */
.sidebar-coupon-group .coupon-btn:active {
    transform: scale(0.98);
}


/* ===============================
slider Content
=============================== */
.slide-light-gray {
    background-color: #f4f4f4;
}

.slider-container {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    padding: 40px 20px;
    text-align: center;
}

.slider-image-side {
    width: 100%;
    height: 500px; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: -70px;
}

.slider-image-side img {
    max-width: 450px; 
    height: 100%;
    object-fit: contain; 
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.08)); 
    transition: transform 0.5s ease;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .slider-image-side {
        height: 300px;
        margin-bottom: 20px;
        margin-top: 0 !important;
    }
    
    .slider-image-side img {
        max-width: 280px;
        margin-top: 0 !important;
    }
}

.slider-text-side {
    width: 100%;
}

.slider-label {

    font-size: 2rem;
    color: #001229;
    margin-bottom: 0;
}

.slider-title {
    font-size: 1.8rem;
    font-weight: 500;
    color: #001229;
    line-height: 1.2;
    margin-bottom: 15px;
}

.slider-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: #444;
    margin-bottom: 25px;
}

.btn-learn-more {
    background-color: #001229;
    color: #fff !important;
    padding: 14px 40px;
    font-size: 0.75rem;
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 0;
    display: inline-block;
    border: none;
}

.btn-learn-more:hover {
    background-color: #FFF;
    color: #001229 !important;
    padding: 14px 40px;
    font-size: 0.75rem;
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 0;
    display: inline-block;
    border: none;
}

.carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #001229;
}

.carousel-control-prev, .carousel-control-next {
    width: 5%;
}


/*================================
Footer Section 
================================*/

.main-footer {
    background-color: #f8f9fa;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #111111;
}

/* Headers */
.main-footer .footer-title {
    font-size: 0.95rem;
    letter-spacing: 0.8px;
    color: #111111;
}

/* Base text properties */
.main-footer .footer-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #4a4a4a !important;
}

/* Text Links Layout Handling */
.footer-links a {
    font-size: 0.95rem;
    color: #222222;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #e56b9c; 
}

/* Input Form Structuring */
.newsletter-form .form-control {
    background-color: #ffffff;
    font-size: 0.95rem;
    color: #111111;
    border: 1px solid #ced4da;
    max-width: 320px;
}

.newsletter-form .form-control::placeholder {
    color: #999999;
}

/* Dark Static Action Button */
.newsletter-form .newsletter-btn {
    background-color: #000000;
    border: none;
    font-size: 0.85rem;
    letter-spacing: 1px;
    padding: 10px 28px;
    transition: background-color 0.2s ease;
}

.newsletter-form .newsletter-btn:hover {
    background-color: #222222;
}

/* Top Right Hero Image Block */
.footer-hero-img-wrapper {
    width: 140px;
    height: 140px;
    display: inline-block;
    overflow: hidden;
}

.footer-hero-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Icon Elements Styling */
.footer-social-icons a {
    color: #111111;
    font-size: 1.15rem;
    transition: transform 0.2s ease, color 0.2s ease;
    display: inline-block;
}

.footer-social-icons a:hover {
    color: #e56b9c;
    transform: translateY(-2px);
}

/* Socket Copyright Properties */
.main-footer .copyright-text {
    font-size: 0.85rem;
    color: #666666 !important;
}


/* ================================================
index.html > Skincare Horizontal Scroll Component
================================================== */

.skincare-scroll-section {
    padding-top: 70px;
    padding-bottom: 70px;
}

.skincare-scroll-viewport {
    flex-grow: 1;
    overflow-x: auto;
    scrollbar-width: none; 
    cursor: grab;
    user-select: none;
    padding: 40px 0;
}

.skincare-scroll-viewport::-webkit-scrollbar {
    display: none; 
}

.skincare-track {
    display: flex;
    flex-wrap: nowrap;
}

.skincare-collection {
    display: flex;
    align-items: stretch;
    gap: 3px; 
    padding-right: 5px;
}

.skincare-item-slot {
    flex: 0 0 340px; 
}

/* --- Card Structure Base --- */
.skincare-card {
    height: 100%; /* Allows flex allocation from parent track container */
    width: 320px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden; 
    position: relative;
    box-sizing: border-box;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.skincare-card:hover {
    transform: translateY(-10px);
}

/* --- Image Frame Layout --- */
.skincare-image-wrapper {
    width: 100%;          
    height: 320px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.skincare-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;        
    pointer-events: none;
}

.skincare-image-wrapper.standard-product img {
    width: auto;
    height: 85%;              
    object-fit: contain;
    padding-top: 25px;
}

/* --- Context Themes --- */
.bg-pink {
    border: 1px solid rgb(239, 237, 237) !important;
    border-radius: 10px;
}
.bg-pink:hover {
    background-color: #FCE6EC; 
    transform: translateY(-5px);
}

/* --- Text Alignment Content Block --- */
.skincare-meta {
    text-align: center;
    width: 100%;
    padding: 20px 20px 0px 10px; 
    box-sizing: border-box;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.skincare-meta a {
    text-decoration: none;
    display: block;
    height: 100%;
}

.skincare-title {
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* --- Fixed Description Element --- */
.skincare-desc {
    font-size: 0.9rem;
    font-weight: 400;
    color: #001229;
    line-height: 1.45;
    margin: 0;
}

.text-danger {
    color: #D81B60 !important;
}

/* --- Progress Line UX Elements --- */
.skincare-progress-container {
    margin-top: 0px;
    padding-left: 0 !important;
}

.skincare-nav-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.skincare-nav-arrows {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.skincare-arrow-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #d0ccd1;
    background: #fff;
    color: #001229;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    line-height: 1;
}

.skincare-arrow-btn:hover {
    background: #D81B60;
    border-color: #D81B60;
    color: #fff;
}

.skincare-progress-track {
    width: 100%;
    height: 1px;
    background-color: #e0e6ed;
}

.skincare-progress-bar {
    height: 2px;
    background-color: #001229;
    transition: width 0.2s ease-out;
}

.skincare-progress-label {
    font-size: 0.75rem;
    letter-spacing: 4px;
    color: #9ea8b4;
    margin-top: 15px;
    font-weight: 600;
    text-transform: uppercase;
}



/*=================================
contact-section
================================*/

.contact-section {
    background-color: #fcfcfc;
    padding-top: 50px;
    padding-bottom: 100px;
}

.contact-divider {
    height: 3px; 
    width: 50px;
    text-align: center;
    background-color: #000;
    color: #fff;
    margin: 0 auto 20px auto;
}

.get-in-touch{
    font-size: calc(1.375rem + 1.5vw);
    font-weight: bold;
    line-height: 1.2;
    color: #000;
}


/* Card Styling */
.contact-section .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-section .shadow-sm {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

/* Form Inputs */
.contact-section .form-label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
    margin-bottom: 8px;
}

.contact-section .form-control {
    border: 1.5px solid #eee;
    background-color: #f9f9f9;
    padding: 12px 15px;
    font-size: 15px;
    transition: all 0.3s ease;
}

.contact-section .form-control:focus {
    background-color: #fff;
    border-color: #006b76;
    box-shadow: 0 0 0 4px rgba(0, 107, 118, 0.1);
}

/* Button Styling */
.btn-pay-now-black {
    background-color: #000;
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 8px;
    border: 2px solid #000;
    transition: all 0.3s ease;
}

.btn-pay-now-black:hover {
    background-color: transparent;
    color: #000;
}

/* Dark Info Card */
.contact-info-card {
    background: linear-gradient(145deg, #222, #000);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.contact-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
}

.contact-item strong {
    display: block;
    font-size: 0.9rem;
    color: #006b76;
    margin-bottom: 2px;
}

.contact-icon i {
    font-size: 1rem;
    color: #fff;
}

/* Optional: Subtle animation on hover */
.contact-item:hover .contact-icon {
    background: #006b76;
    transition: 0.3s ease;
}

/*=========================
    About App Styles
==========================*/
.faq-section,
.privacy-policy-section,
.return-refound-section,
.terms-services-section,
.shop-country-section {
    padding: 50px 0;
    /* background-color: #fcfcfc; */
}



/* =========================
   Product List Section
========================= */
.product-list-section {
    padding: 20px 0;
    background: #fff;
}

/* Breadcrumb */
.product-breadcrumb .breadcrumb {
    margin-bottom: 0;
    background: transparent;
}

.product-breadcrumb .breadcrumb-item {
    font-size: 15px;
    font-weight: 500;
}

.product-breadcrumb .breadcrumb-item a {
    color: #777;
    text-decoration: none;
    transition: 0.3s ease;
}

.product-breadcrumb .breadcrumb-item a:hover,
.product-breadcrumb .breadcrumb-item.active {
    color: #EB1C68;
}

.product-breadcrumb .breadcrumb-item.active {
    font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: #bbb;
    padding: 0 8px;
}

/* Sorting */
.shorting {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.shorting label {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    margin-right: 10px;
}

.shorting .custom-select {
    min-width: 190px;
    height: 45px;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    padding: 0 15px;
    font-size: 14px;
    font-weight: 500;
    color: #444;
    background: #fff;
    transition: 0.3s ease;
    box-shadow: none;
}

.shorting .custom-select:focus,
.shorting .custom-select:hover {
    border-color: #EB1C68;
    box-shadow: 0 0 10px rgba(235, 28, 104, 0.12);
    outline: none;
}

/* Sidebar Filter */
.filtering {
    background: #fff;
    border-radius: 18px;
    padding: 25px 20px;
    border: 1px solid #f3f3f3;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 20px;
}

.filter-group-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 17px;
    font-weight: 700;
    color: #222;
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 1px solid #f1f1f1;
}

.filter-group-label i {
    font-size: 13px;
    color: #999;
    transition: 0.3s ease;
}

.filter-group-label:hover i {
    color: #EB1C68;
}

/* Filter List */
.filter-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 500;
    color: #555;
    border-bottom: 1px dashed #f2f2f2;
    transition: 0.3s ease;
    cursor: pointer;
}

.filter-item:last-child {
    border-bottom: none;
}

.filter-item:hover {
    color: #EB1C68;
    padding-left: 5px;
}

/* Checkbox  */
.filter-checkbox {
    width: 16px;
    height: 16px;
    accent-color: #EB1C68;
    cursor: pointer;
}

/* Inputs */
.form-control-sm {
    height: 40px;
    border: 1px solid #e4e4e4;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 14px;
    transition: 0.3s ease;
    box-shadow: none;
}

.form-control-sm:focus {
    border-color: #EB1C68;
    box-shadow: 0 0 12px rgba(235, 28, 104, 0.12);
}

/* Button  */
.btn-dark {
    height: 40px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #EB1C68, #ff4f8b);
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s ease;
}

.btn-dark:hover {
    background: linear-gradient(135deg, #d9155d, #ff3f7c);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(235, 28, 104, 0.25);
}

.product-filter-bar {
    border-bottom: 1px solid #eaeaea; 
    padding-bottom: 1rem;
   
}

/* Breadcrumbs Link Interactivity */
.product-breadcrumb .breadcrumb-item a {
    font-size: 0.95rem;
    color: #111111;
    transition: color 0.2s ease;
}

.product-breadcrumb .breadcrumb-item a:hover {
    color: #e56b9c; 
}

.product-breadcrumb .breadcrumb-item.active a {
    color: #777777;
    pointer-events: none; 
}

/* Form Select Styling adjustments */
.shorting .form-select {
    font-size: 0.9rem;
    color: #222222;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0.45rem 2rem 0.45rem 0.9rem;
    min-width: 200px;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.shorting .form-select:focus {
    border-color: #f7a1c4; 
}

/* Mobile responsive full width adjustments */
@media (max-width: 767.98px) {
    .w-100-mobile {
        width: 100%;
    }
    .shorting .form-select {
        width: 100%; 
    }
}


/*=======================================
Product list page > Filter Layout Line 
=======================================*/

@media (max-width: 767px) {

    .product-list {
        padding: 15px 0;
    }

    .shorting {
        justify-content: flex-start;
        margin-top: 15px;
    }

    .shorting .custom-select {
        width: 100%;
    }

    .filtering {
        margin-bottom: 20px;
        padding: 20px 15px;
    }

    .filter-group-label {
        font-size: 15px;
    }

    .filter-item,
    .product-breadcrumb .breadcrumb-item {
        font-size: 13px;
    }
}

.bella-product-card {
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #f2f2f2;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.bella-product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}


.bella-product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #ffffff; 
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f0f0f0;
}

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

.bella-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    padding: 8px; 
    display: block;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.bella-product-card:hover .bella-product-image img {
    transform: scale(1.03);
}

/* --- Discount Tag Label --- */
.bella-discount-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #EB1C68;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 30px;
    z-index: 2;
    letter-spacing: 0.5px;
}

/* --- Text & Details Layout Section --- */
.bella-product-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
    justify-content: space-between; 
}

.bella-product-info-wrap {
    text-align: center;
    width: 100%;
    margin-bottom: 12px;
}

.bella-product-category {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #EB1C68;
    background: rgba(235, 28, 104, 0.06);
    border-radius: 30px;
    padding: 4px 12px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.bella-product-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3;
    margin: 0 0 8px 0 !important;
}

.bella-product-title a {
    color: #111111;
    text-decoration: none;
    transition: color 0.2s ease;
}

.bella-product-title a:hover {
    color: #EB1C68;
}

/* ==========================================================================
   Responsive Pricing System
========================================================================== */
.bella-product-price {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.bella-new-price {
    font-size: 18px;          /* Desktop size */
    font-weight: 800;
    color: #EB1C68;
}

.bella-old-price {
    font-size: 16px;          /* Desktop size */
    color: #999999;
    text-decoration: line-through;
}

/* --- Media Query for Small Devices (Mobile Phones) --- */
@media (max-width: 575px) {
    .bella-product-price {
        gap: 4px; 
    }

    .bella-new-price {
        font-size: 14px;
    }
    .bella-old-price {
        font-size: 12px; 
    }
    .bella-new-price.mx-2 {
        margin-left: 2px !important;
        margin-right: 2px !important;
    }
}

/* --- Media Query for Extra Small Devices (Under 380px wide) --- */
@media (max-width: 380px) {
    .bella-new-price {
        font-size: 13px; 
    }
    
    .bella-old-price {
        font-size: 11px; 
    }
}


/* ==========================================================================
   Full Width Mobile Adjustments with Scrollable Breadcrumbs
========================================================================== */

@media (max-width: 767px) {
    /* --- Fix: Prevent breadcrumbs from hiding or dropping to multiple lines --- */
    .product-breadcrumb .dynamic-mobile-breadcrumb {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important; 
        white-space: nowrap !important;
        padding-bottom: 4px !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    /* Hides default native scrollbars on Chrome, Safari, and newer Opera builds */
    .product-breadcrumb .dynamic-mobile-breadcrumb::-webkit-scrollbar {
        display: none;
    }

    /* Maintains flex structure for individual link items */
    .product-breadcrumb .dynamic-mobile-breadcrumb .breadcrumb-item {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;                     /* Prevents links from squishing into unreadable widths */
    }

    /* --- Full Width Sorting Inputs --- */
    .shorting .mobile-full-width {
        width: 100% !important;
        display: block;
    }

    .shorting .filter-sort-dropdown {
        width: 100% !important;
        height: 44px;
        font-size: 14px;
        border-radius: 12px;
        background-color: #ffffff;
        border: 1px solid #e5e5e5;
    }
}

.out-of-stock{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: #000000;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.out-of-stock:hover{
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}


/* Base Styles for all screens */
.product-actions-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.product-actions-group form {
    display: flex;
    align-items: center;
    margin: 0;
    width: auto;
}

/* Base styles for both Add to Cart and Out of Stock buttons */
.product-actions-group .action-btn {
    white-space: nowrap;      /* Prevents text breaking into 2 lines */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Mobile Responsiveness (Screens under 576px) --- */
@media (max-width: 576px) {
    .product-actions-group {
        gap: 6px; /* Slightly tighter gap to save horizontal space */
    }

    /* Shrink the text size and reduce padding inside the main buttons */
    .product-actions-group .action-btn {
        font-size: 12px !important; 
        padding: 6px 12px !important;
        height: 38px; 
    }

    /* Keep the wishlist button perfectly proportioned to match */
    .product-actions-group .bella-wishlist-btn {
        height: 38px;
        width: 38px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Form Container Controls */
.bella-cart-form-wrapper {
    flex-grow: 1; 
    min-width: 0; 
}

.bella-wishlist-form-wrapper {
    flex-shrink: 0; 
}

/* Cart Button Base */
.bella-cart-btn {
    width: 100%;
    height: 40px;
    background: transparent;
    border: 1px solid #111111; 
    color: #111111;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 8px;
    box-sizing: border-box;
    white-space: nowrap;              /* Keeps "Add To Cart" single line */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bella-cart-btn i {
    font-size: 14px;
}

.bella-cart-btn:hover {
    background: linear-gradient(135deg, #EB1C68, #ff4f8b);
    border-color: transparent;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(235, 28, 104, 0.25);
}

/* Wishlist Button Base */
.bella-wishlist-btn {
    width: 50px; 
    height: 40px;
    border: none;
    border-radius: 14px;
    background: #f5f5f5;
    color: #EB1C68;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.bella-wishlist-btn:hover {
    background: #EB1C68;
    color: #ffffff;
    transform: translateY(-2px);
}

.heart-size{
    font-size: 25px;
}

/* --- High Density Micro Breakpoint Layout Optimization --- */
@media (max-width: 380px) {
    .bella-product-content {
        padding: 12px; 
    }
    .bella-cart-btn span {
        font-size: 11px;
    }
    .bella-cart-btn i {
        font-size: 12px;
    }
    .bella-new-price { font-size: 15px; }
    .bella-old-price { font-size: 13px; }
}


.bella-btn {
    width: 100%;
    height: 40px;
    background: transparent;
    border: 1px solid #111111; 
    color: #111111;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bella-btn i {
    margin-right: 8px;
    font-size: 1.1rem;
    color: inherit; 
}

.bella-btn:hover {
    background: linear-gradient(135deg, #EB1C68, #ff4f8b);
    border-color: transparent;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(235, 28, 104, 0.3);
}

.bella-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(235, 28, 104, 0.2);
}

/* =========================
   Responsive
========================= */
@media (max-width: 767px) {

    .bella-product-image {
        height: 250px;
    }

    .bella-product-title {
        font-size: 16px;
    }

    .bella-new-price {
        font-size: 20px;
    }
}

.empty-product-state {
    max-width: 500px;
    margin: 60px auto;
    padding: 40px 25px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid #f1f1f1;
}

/* Icon */
.empty-icon {
    font-size: 60px;
    color: #999;
    margin-bottom: 15px;
}

/* Title */
.empty-product-state .title {
    font-weight: 700;
    color: #222;
    margin-bottom: 8px;
}

/* Subtitle */
.empty-product-state .subtitle {
    font-size: 15px;
    color: #777;
    margin-bottom: 20px;
}

/* Divider */
.divider {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, #ddd, transparent);
    margin: 20px 0;
}

/* Button */
.empty-product-state .btn {
    padding: 10px 22px;
    border-radius: 30px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.empty-product-state .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}



/* ==========================================================================
   Product Detail View Architecture 
========================================================================== */
.product-detail-section {
    background-color: #ffffff;
    color: #111111;
    padding: 50px 0;

}

.bella-details-square-viewport {
    position: relative;
    /* Lock the parent container strictly to 560px x 560px */
    width: 560px !important;
    height: 560px !important;
    margin: 0 auto; 
    border-radius: 20px;
    border: 1px solid rgb(241, 238, 238);
    overflow: hidden;
    
    /* Completely removed background colors and borders */
    background: transparent !important; 
    /* border: none !important; */
    box-shadow: none !important;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Image Core Layer Rendering Configs */
.bella-details-square-img {
    /* Scale flawlessly to 100% of its locked 560px parent container */
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: cover; /* Fills out the entire 560px box seamlessly */
    transition: transform 0.4s ease-in-out;
    border-radius: 20px;
}

/* Gentle zoom interaction on hover */
.bella-details-square-viewport:hover .bella-details-square-img {
    transform: scale(1.03);
}

/* Premium Pink Floating Discount Badge */
.bella-details-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #EB1C68;
    color: #ffffff;
    border-radius: 30px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(235, 28, 104, 0.25);
}

/* Responsive Overrides: Prevent the 560px box from breaking mobile screens */
@media (max-width: 767.98px) {
    .bella-details-square-viewport {
        /* On mobile, downscale dynamically so it never overflows screen width */
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }
}

@media (max-width: 575.98px) {
    .bella-details-square-viewport {
        border-radius: 12px;
    }
    .bella-details-badge {
        top: 15px;
        left: 15px;
        padding: 5px 12px;
        font-size: 10px;
    }
}

.hashtag-text{
    font-size: 1.7rem;
    font-weight: 700;
    color: #222;
    line-height: 1.4;
    margin-bottom: 15px;
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

.text-decoration-line-through{
    text-decoration: line-through;
}

.product-description {
    font-size: 0.95rem;
    color: #555555;
    line-height: 1.6;
}

.size-text {
    font-size: 0.95rem;
    color: #222222;
}

.price-text {
    font-size: 1.75rem;
    font-weight: 600;
    color: #111111;
}

/* Quantity Field Mechanics */
.quantity-label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    color: #333333;
}

.quantity-picker {
    display: flex;
    align-items: center;
    border: 1px solid #cccccc;
    width: max-content;
    border-radius: 6px;
    background-color: #ffffff;
    overflow: hidden;
}

.quantity-picker .btn-qty {
    background: none;
    border: none;
    padding: 8px 18px;
    font-size: 0.9rem;
    color: #111111;
    cursor: pointer;
    transition: background-color 0.2s;
}

.quantity-picker .btn-qty:hover {
    background-color: #f5f5f5;
}

.quantity-picker input {
    width: 45px;
    text-align: center;
    border: none;
    outline: none;
    font-size: 0.95rem;
    font-weight: 600;
    color: #111111;
}


.buy-now-btn{
    background-color: #111111;
    color: #ffffff;
    border: 1px solid #111111;
    border-radius: 6px;
    padding: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
}

.buy-now-btn:hover {
    background-color: #EB1C68;
    border-color: #EB1C68;
    color: #ffffff;
}

/* Secondary "Buy It Now" Variation Style */
.btn-custom-dark.buy-now-btn {
    background-color: transparent;
    color: #111111;
    border-color: #111111;
}

.btn-custom-dark.buy-now-btn:hover {
    background-color: #111111;
    color: #ffffff;
}

/* Shipping Information Banner Block */
.rewards-banner {
    background-color: #fff8e5; /* Softer, premium warm cream gold tone */
    border-radius: 6px;
    padding: 14px;
    font-size: 0.85rem;
    color: #5c4300;
    border: 1px solid rgba(92, 67, 0, 0.05);
}


.product-share-container {
    padding-top: 15px;
    border-top: 1px solid #eeeeee; /* Subtle separator line */
}

.share-label {
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

/* Base Pro Share Button Style */
.share-btn {
    color: #555555;
    background: transparent;
    border: none;
    font-size: 1.1rem;
    padding: 5px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: color 0.2s ease, transform 0.2s ease;
}

.share-btn:hover {
    color: #111111; /* Sleek monochrome hover effect */
    transform: translateY(-2px);
}

/* Specific Tooltip for the Copy Button */
.copy-link-btn .tooltip-text {
    visibility: hidden;
    width: 80px;
    background-color: #111111;
    color: #ffffff;
    text-align: center;
    border-radius: 6px;
    padding: 4px 0;
    font-size: 0.75rem;
    
    /* Position the tooltip above the button */
    position: absolute;
    z-index: 10;
    bottom: 125%;
    left: 50%;
    margin-left: -40px;
    opacity: 0;
    transition: opacity 0.3s;
}

.copy-link-btn:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}


/* Accordion Component Intersections */
.accordion-custom .accordion-item {
    border: none;
    border-bottom: 1px solid #eeeeee;
}

.accordion-custom .accordion-button {
    padding: 16px 0;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.8px;
    color: #111111;
    box-shadow: none !important;
    background: transparent !important;
}

.accordion-custom .accordion-body {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #666666 !important;
    padding-left: 0;
    padding-right: 0;
}

.recommended-product{
    background-color: #F5F5F5;
    padding-top: 50px;
    padding-bottom: 50px;
}


/* Keeps message banners clean and scaled */
.max-width-review {
    max-width: 650px;
}

/* Custom extra micro badges */
.extra-small-badge {
    font-size: 0.65rem !important;
    padding: 3px 6px !important;
    letter-spacing: 0.3px;
    vertical-align: middle;
}

.extra-small-date {
    font-size: 0.75rem;
}

/* Micro interaction sizing for custom quick response buttons */
.btn-xs {
    font-size: 0.8rem;
    border-radius: 4px;
}

/* Mirror layout icons cleanly */
.transform-mirror {
    display: inline-block;
    transform: scaleX(-1);
}

/* Smooth modal field enhancements */
.modal-content .form-control {
    border: 1px solid #e2e8f0;
    font-size: 0.95rem;
}

.modal-content .form-control:focus {
    border-color: #111111;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.05);
}


/* ==========================================================================
   Product Shelf & Showcase Module Layout
========================================================================== */

.product-shelf-section {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: #F5F5F5; /* Your section background */
    padding: 80px 0;
}

/* Primary Shelf Title Typography */
.product-shelf-section .shelf-main-heading {
    font-size: 1.85rem;
    color: #111111;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
}

/* ==========================================================================
   Shelf Product Grid Component Rules
   ========================================================================== */

/* Card Base Structure */
.shelf-product-card {
    border: none;
    background: #ffffff; 
    border-radius: 16px; 
    padding: 0px; /* Dropped padding entirely to let full-bleed images reach outer frame boundaries */
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden; /* Ensures inner image zoom states conform nicely to the card corners */
}

/* Card Lift Interactivity Animation */
.shelf-product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Borderless Image Wrap Box Frame 
   Enforces uniform square canvas proportions without background filler boxes
*/
.shelf-image-wrap {
    width: 100%;
    aspect-ratio: 1 / 1 !important; /* Perfect square rendering on all devices */
    background: transparent !important; /* Completely deletes the old gray fill backdrop color */
    position: relative;
    display: block;
    padding: 0px !important; /* Completely clears top, bottom, and side empty spacing */
    overflow: hidden;
}

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

/* Image Dimension Transformation Engine */
.shelf-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Fills out entire visual matrix area instantly */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
}

/* Luxury card hover zoom tracking */
.shelf-product-card:hover .shelf-image-wrap img {
    transform: scale(1.04);
}

/* Corner Overlay Badge */
.shelf-image-wrap .shelf-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 5px 12px;
    border-radius: 20px;
    text-transform: uppercase;
}

.shelf-image-wrap .badge-new-in {
    background-color: #111111;
    color: #ffffff;
}

/* Card Body Content Framing (Padded to separate details from full-width edges) */
.shelf-card-body {
    padding: 15px 16px 16px 16px !important; 
}

.shelf-card-body .shelf-product-title {
    font-size: 0.9rem;
    font-weight: 600 !important;
    line-height: 1.4;
    color: #111111;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.8em; 
}

.shelf-card-body .shelf-product-title a {
    color: #111111;
    text-decoration: none;
}

/* Title colors to signature hot brand pink when card is targeted */
.shelf-product-card:hover .shelf-product-title a {
    color: #EB1C68;
}

/* Pricing Presentation Settings */
.new-price {
    font-size: 18px;
    font-weight: 700;
    color: #EB1C68;
}

.old-price {
    font-size: 16px;
    font-weight: 400;
    color: #94a3b8;
    text-decoration: line-through; 
    margin-left: 10px;
}

/* Action Button Outlines */
.shelf-product-card .shelf-add-btn {
    border: 1px solid #111111;
    color: #111111;
    background-color: #ffffff;
    font-size: 0.8rem;
    letter-spacing: 1px;
    padding: 12px 12px;
    border-radius: 6px;
    transition: all 0.25s ease;
}

.shelf-product-card .shelf-add-btn:hover {
    background-color: #EB1C68 !important;
    border-color: #EB1C68 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   E-Commerce Customer Reviews Layout Module Styling
========================================================================== */

.reviews-section {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #111111;
}

.reviews-main-heading {
    font-size: 1.5rem;
    letter-spacing: 0.5px;
}

/* 1. Dashboard Header Area */
.review-dashboard {
    padding: 10px 0;
}

.rating-stars {
    color: #111111; /* Clean high-contrast block solid stars */
    font-size: 0.95rem;
}

.rating-stars .bi-star-fill {
    margin-right: 1px;
}

/* Progress bar background modifications matching image schema */
.review-dashboard .progress {
    background-color: #eaeaea;
}

.review-dashboard .progress-bar {
    background-color: #1a1a1a !important; /* Matte dark block matching screen snapshot */
}

/* Rounded Pill "Write Review" Activation Switch */
.btn-write-review {
    background-color: #1a1a1a;
    border-radius: 30px; /* Pillow oval border framework */
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    padding: 11px 32px !important;
    border: none;
    transition: background-color 0.2s ease;
}

.btn-write-review:hover {
    background-color: #333333;
}

/* 2. Filter Matrix Dropdowns Section */
.filter-controls-row .filter-select {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    color: #4a4a4a;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 8px 34px 8px 16px;
    border-radius: 30px; /* Oval pill filtering bubbles architecture */
    width: auto;
    min-width: 115px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-controls-row .filter-select:focus {
    border-color: #111111;
}

/* Search input container box overrides */
.filter-search-box .filter-select {
    padding-right: 40px;
    min-width: 170px;
}

/* 3. User Review Narrative Blocks */
.user-review-card .user-name-title {
    font-size: 0.95rem;
}

.user-review-card .demographics-grid {
    font-size: 0.825rem;
    line-height: 1.6;
}

.user-review-card .review-header-title {
    font-size: 1.05rem;
}

.user-review-card .review-narrative-text {
    font-size: 0.925rem;
    line-height: 1.6;
    color: #222222;
}

/* Helpful feedback button metrics overrides */
.btn-feedback {
    border: none;
    background: transparent;
    transition: color 0.2s ease;
}

.btn-feedback:hover {
    color: #111111 !important;
}

/* Responsive threshold alignment helper utilities */
@media (min-width: 768px) {
    .border-end-md {
        border-right: 1px solid #e5e5e5 !important;
    }
}

@media (max-width: 767.98px) {
    .text-center-md {
        text-align: center !important;
    }
    .filter-controls-row .filter-select {
        width: 100%; /* Spans across entire row on tight portrait display structures */
    }
    .filter-search-box {
        width: 100%;
    }
}


/* ---===============================
    Cart Layout 
==================================--- */

.cart-items-wrapper {
    padding: 60px 0;
}

.cart-title {
    color: #002d4b;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: center;
    letter-spacing: -1.5px; 
    font-size: 2.5rem;
}

.cart-item:hover {
    background: #f9fafb;
}

/* Image */
.img-wrap{
    text-align: center;
}
.img-wrap img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 10px;
    background: #f1f1f1;
    padding: 8px;
}

/* Summary Card */
.cart-summary-card {
    background-color: #f8fbff;
    padding: 35px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #e1e8ed
}

.cart-summary-card h4 {
    color: #002d4b;
    margin-bottom: 25px;
    font-weight: 600;
}

.cart-product-title {
    overflow-wrap: break-word; 
    word-break: normal; 
    min-width: 180px; 
    max-width: 350px; 
    white-space: normal;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    color: #556b78;
}

.total {
    color: #002d4b;
    font-weight: 700;
    font-size: 1.3rem;
    margin-top: 15px;
}

.free-text {
    color: #006b76;
    font-weight: 600;
}

.btn-checkout {
    margin-top: 10px;
    background-color: #EB1E68;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.btn-checkout:hover {
    background-color: #c04270;
    color: white;
    box-shadow: 0 6px 14px rgba(0, 107, 118, 0.25);
}

.continue-shopping {
    color: #8fa5ac;
    text-decoration: none;
    font-size: 0.95rem;
}

.continue-shopping-btn{
    background-color: #EB1E68;
    color: #FFF;
    border: 1px solid #EB1E68;
    padding: 12px;
    border-radius: 10px;
}

.continue-shopping-btn:hover{
    background-color: #c04270;
    color: white;
    box-shadow: 0 6px 14px rgba(0, 107, 118, 0.25);
}

.payment-badges i {
    font-size: 2rem;
    margin: 0 10px;
    color: #ebf1f5;
}

/* Professional Coupon Styling */
.coupon-container {
    max-width: 350px;
}

.promo-input-group {
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    background-color: #fff;
}

/* Highlight the whole group when the user clicks the input */
.promo-input-group:focus-within {
    border-color: #000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.promo-input-group .form-control {
    border: none !important; /* Hide default input border */
    box-shadow: none !important;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase; /* Looks more like a 'code' */
}

.promo-input-group .form-control::placeholder {
    text-transform: none;
    letter-spacing: normal;
    color: #a0a0a0;
}
.empty-hopping{
    padding: 20px 0;
}


/* ---===============================
    Checkout Layout 
==================================--- */
.checkout-section {
    background-color: #f8fbff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 50px 0;
}

.checkout-title {
    color: #002d4b;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: -1.5px; 
    font-size: 2.5rem;
}

.ssl_bit{
    border-radius: 8px !important; 
}

hr {
    border-top: 1px solid #e1e8ed;
    opacity: 1;
    margin-bottom: 40px;
}


/* --- Form Headers --- */
.section-label {
    color: #002d4b;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 18px;
}

.checkout-subtitle {
    font-size: 1.25rem;
    font-weight: 700;
    color: #002d4b;
    margin-top: 10px;
}

/* --- Inputs & Fields --- */
.custom-input {
    border: 1px solid #dbe9f0;
    padding: 12px 16px;
    font-size: 0.95rem;
    border-radius: 6px; /* Soft rounded corners */
    transition: all 0.2s ease;
    background-color: #fff;
}

.custom-input:focus {
    border-color: #002d4b;
    box-shadow: 0 0 0 3px rgba(0, 45, 75, 0.05);
    outline: none;
}

.form-select.custom-input {
    cursor: pointer;
    background-position: right 1rem center;
}

/* --- Payment Container (Shopify Style) --- */
.payment-container {
    border: 1px solid #dbe9f0 !important;
    border-radius: 8px !important;
    overflow: hidden;
}

.payment-option {
    transition: background-color 0.3s ease;
}

.bg-light {
    background-color: #f9fbff !important;
}

.form-check-input:checked {
    background-color: #002d4b;
    border-color: #002d4b;
}

/* Icons within inputs */
.position-relative i {
    color: #a0aec0;
    font-size: 0.9rem;
}

.order-summary-box {
    background: #ffffff;
    padding: 32px;
    border-radius: 12px;
    border: 1px solid #eef2f6;
    position: sticky;
    top: 20px;
}

.summary-totals span {
    color: #4a5568;
}

.summary-totals .fw-bold {
    color: #002d4b;
}

.final-price {
    font-size: 1.5rem;
    color: #002d4b;
}

.security-note {
    background: #f1f5f9;
    padding: 10px;
    border-radius: 6px;
    display: block;
}


/* Container Box */
.pro-card {
    border-radius: 12px !important;
    border-color: #f1f1f1 !important;
}

/* Section Labels */
.pro-section-label {
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase;
    color: #333;
}

/* Professional Inputs */
.pro-input {
    border-radius: 8px !important;
    padding: 0.8rem 1rem !important;
    font-size: 0.9rem !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #fff !important;
    transition: all 0.2s ease !important;
}

.pro-input:focus {
    border-color: #000 !important;
    box-shadow: 0 0 0 4px rgba(0,0,0,0.05) !important;
    outline: none !important;
}

/* Button & Utility */
.ls-1 { letter-spacing: 1px; }

.bg-success-subtle {
    background-color: #f0fff4 !important;
}

/* Sticky behavior for the Summary Sidebar */
@media (min-width: 992px) {
    .sticky-top {
        position: sticky;
        top: 20px;
        z-index: 1000;
    }
}


/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .checkout-section {
        padding: 40px 15px;
    }
    
    .order-summary-box {
        margin-top: 30px;
        position: static;
    }
}


/*=====================================
 order-complete
======================================*/
.order-complete-section{
    padding: 70px 0;
}

/* Typography & Spacing */
.fw-black { font-weight: 900; }
.ls-1 { letter-spacing: 1px; }
.extra-small { font-size: 0.65rem; letter-spacing: 1px; }

/* The Success Check mark Animation Effect */
.success-icon-wrapper {
    display: flex;
    justify-content: center;
}

.success-circle {
    width: 100px;
    height: 100px;
    background-color: #28a745; /* Success Green */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 50px;
    box-shadow: 0 10px 20px rgba(40, 167, 69, 0.2);
    animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

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


.order-card {
    border: 1px solid #eee !important;
}

.order-meta-box {
    border: 1px solid #f1f1f1;
}

/* Print Styling */
@media print {
    .btn, .order-complete-section {
        background-color: white !important;
    }
    .btn, nav, footer, .review-stars {
        display: none !important;
    }
    .order-card {
        box-shadow: none !important;
        border: none !important;
    }
}

/* ---=========================
Success Page Styling 
=========================--- */
.success-section {
    background-color: #f8fbff;
    min-height: 90vh;
    display: flex;
    align-items: center;
}

/* Success Icon Animation */
.success-icon-wrapper {
    display: flex;
    justify-content: center;
}

.success-icon {
    width: 80px;
    height: 80px;
    background-color: #006b76;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    box-shadow: 0 10px 20px rgba(0, 107, 118, 0.2);
    animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

/* Order Card */
.order-summary-card {
    background: #ffffff;
    padding: 35px;
    border-radius: 12px;
    border: 1px solid #eef2f6;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}


/* Mobile Tweak */
@media (max-width: 576px) {
    .order-summary-card {
        padding: 20px;
    }
}

/* Logo filtering for cleaner look */
.payment-logos img {
    filter: brightness(0) opacity(0.6);
    transition: 0.3s;
}

.payment-logos img:hover {
    filter: none;
    opacity: 1;
}



/* ======================== 
Blog Section 
===========================*/
.blog-section {
    overflow: hidden;
}

.section-header h2 {
    font-weight: 700;
    font-size: 32px;
}

.section-header p {
    color: #777;
}

.blog-card {
    background: #ffffff;
    border-radius: 16px; /* Modern structural curve */
    overflow: hidden;
    border: 1px solid #f1f5f9; /* Super clean, faint edge bounding line */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

/* Luxury card container uplift hover effect */
.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.07);
    border-color: rgba(235, 28, 104, 0.1);
}

   Matches the exact aspect ratio strategy used on your product shelf frames
*/
.blog-img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1 !important; 
    overflow: hidden;
    background-color: transparent;
}

.blog-img-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* High Fidelity Banner Render Mechanics */
.blog-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
}

/* Smooth zoom animation tracking */
.blog-card:hover .blog-img img {
    transform: scale(1.04);
}

/* Brand Category Tag Badge Overlay Configuration */
.blog-category {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #EB1C68;
    color: #ffffff;
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 30px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 3;
    box-shadow: 0 4px 10px rgba(235, 28, 104, 0.2);
    transition: background-color 0.25s ease;
}

.blog-category-badge-anchor:hover .blog-category {
    background-color: #111111;
}

/* Content Details Typography Framing Block */
.blog-content {
    padding: 20px 18px 18px 18px;
}

/* Article Heading Structure Elements */
.blog-title {
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.blog-title a {
    color: #1e293b;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.25s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card contextual focus highlights parent text links immediately */
.blog-card:hover .blog-title a {
    color: #EB1C68;
}

/* Summary Paragraph Core Style Blocks */
.blog-desc {
    font-size: 13.5px;
    color: #64748b; 
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Read More Navigation Action Footers */
.read-more {
    display: inline-block;
    color: #EB1C68;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
}

.read-more:hover {
    color: #111111;
    transform: translateX(3px);
    text-decoration: none !important;
}

/* Responsive Micro Adjustments for Tablet and Mobile Screens */
@media (max-width: 575.98px) {
    .blog-card {
        border-radius: 12px;
    }
    .blog-content {
        padding: 16px;
    }
    .blog-title a {
        font-size: 15px;
    }
}

/* ================================== 
 Blog Details 
===================================== */
.blog-details {
    background: #f8f9fc; 
    color: #000;
}

/* Card */
.blog-details-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
}

/* Image */
.blog-details-img img {
    width: 100%;
    border-bottom: 1px solid #eee;
}

/* Content */
.blog-details-content {
    padding: 25px;
}

/* Meta */
.blog-meta {
    font-size: 14px;
    color: #888;
    margin-bottom: 10px;
}

.blog-meta span {
    margin-right: 8px;
}


/* Paragraph */
.blog-details-content p {
    color: #555;
    line-height: 1.7;
}

/* Blockquote */
blockquote {
    background: #f1f3f6;
    padding: 15px 20px;
    border-left: 4px solid #ff7e5f;
    margin: 20px 0;
    font-style: italic;
}

/* Tags */
.blog-tags {
    margin-top: 20px;
}

.blog-tags a {
    display: inline-block;
    background: #eee;
    padding: 5px 10px;
    margin: 5px;
    border-radius: 20px;
    font-size: 13px;
    text-decoration: none;
}

.blog-tags a:hover {
    background: #ff7e5f;
    color: #fff;
}

/* Sidebar */
.sidebar-box {
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
}

.sidebar-box h5 {
    margin-bottom: 15px;
}

/* Category */
.sidebar-box ul {
    list-style: none;
    padding: 0;
}

.sidebar-box ul li {
    margin-bottom: 10px;
}

.sidebar-box ul li a {
    text-decoration: none;
    color: #333;
}

.sidebar-box ul li a:hover {
    color: #ff7e5f;
}

/* Recent Posts */
.recent-posts li {
    margin-bottom: 12px;
}

.recent-posts span {
    display: block;
    font-size: 12px;
    color: #999;
}


.comments-area{
    background: #fff;
    padding: 25px;
    border-radius: 12px;
}

/* Comments */
.comments-section {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
}

.related-blog-section{
    background-color: #F5F5F5;
    padding-bottom: 100px;
}

/* Responsive */
@media (max-width: 768px) {
    .blog-title {
        font-size: 22px;
    }
}

.featured-post-card .post-title {
    font-size: 1.65rem;
    max-width: 280px;
}

.secondary-post-card .post-title {
    font-size: 1.35rem;
}

.blog-section .post-excerpt {
    color: #767676 !important;
    line-height: 1.5;
    max-width: 320px;
}

/* Image Wrappers and Sizing Frameworks */
.featured-post-img-wrapper {
    width: 100%;
    max-width: 330px;
    height: 330px;
}

.secondary-post-img-wrapper {
    width: 90px;
    height: 90px;
}

.featured-post-img-wrapper img,
.secondary-post-img-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 4px; 
}

/* Layout Divider Lines across screen thresholds */
@media (min-width: 768px) {
    .border-right-desktop {
        border-right: 1px solid #dee2e6;
        padding-right: 3rem !important;
    }
}

@media (max-width: 575.98px) {
    .featured-post-img-wrapper {
        max-width: 100%;
        height: 240px;
    }
    .featured-post-card .post-title {
        max-width: 100%;
    }
}


/* ==========================================================================
   Image Wrappers, Sizing Frameworks & Zoom Animations
========================================================================== */

.featured-post-img-wrapper {
    width: 100%;
    max-width: 330px;
    height: 330px;
    overflow: hidden; 
    border-radius: 4px;
}

.secondary-post-img-wrapper {
    width: 90px;
    height: 90px;
    overflow: hidden;
    border-radius: 4px;
}

/* Base image state with smooth transition curves */
.featured-post-img-wrapper img,
.secondary-post-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* Premium, fluid easing curve */
}

/* --- Trigger Zoom when the entire post card wrapper is hovered --- */
.featured-post-card:hover .featured-post-img-wrapper img,
.secondary-post-card:hover .secondary-post-img-wrapper img {
    transform: scale(1.08); 
}


/*=======================================================================
search.html - Mobile Autocomplete Search Component CSS
=======================================================================*/

/* Outer container layout wrapper constraints */
.mobile-search-form-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background-color: transparent; 
}

/* Base style for your native search input element */
.mobile-search-input {
    width: 100%;
    height: 52px;
    padding: 12px 55px 12px 24px;
    font-size: 13px !important;
    font-weight: 400;
    letter-spacing: 0.2px;
    color: #2d3748;
    background-color: #f0f2f5 !important;
    border: none !important;
    border-radius: 50px !important; 
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Transmutes background panel to crisp white with premium drop shadow on active typing focus */
.mobile-search-input:focus,
.ts-wrapper.single.focus .ts-control {
    background-color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    outline: none !important;
}

/* Muted placeholder text typography styling layout rules */
.mobile-search-input::placeholder {
    font-size: 13px !important;
    letter-spacing: 0.2px;
    color: #718096;
    opacity: 1;
}

/* Floating magnifying glass icon button position mappings */
.mobile-search-icon-btn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Graphical icon scaling matching your reference mockup design */
.mobile-search-icon-btn i {
    font-size: 16px; 
    color: #718096; 
    transition: color 0.2s ease, transform 0.2s ease;
}

/* Subtle graphic pop transformation trigger when clicking inside the search box wrapper */
.mobile-search-form-container:focus-within .mobile-search-icon-btn i {
    color: #1a202c;
    transform: scale(1.05);
}


/* ----------------------------------------------------------------------
   TOM SELECT LAYOUT STABILITY ENGINE OVERRIDES
   ---------------------------------------------------------------------- */

/* Main outer container generated by Tom Select layout system */
.ts-wrapper.single .ts-control {
    background-color: #f0f2f5 !important;
    border: none !important;
    border-radius: 50px !important;
    height: 52px !important;
    padding: 0 55px 0 24px !important; 
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Forces dynamic typing text field to match your 13px baseline metrics exactly */
.ts-wrapper.single .ts-control input {
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.2px !important;
    color: #2d3748 !important;
    height: auto !important;
    line-height: normal !important;
    opacity: 1 !important;
    position: relative !important;
    left: 0 !important;
}

/* Explicitly target all browser placeholder engines for Tom Select components */
.ts-wrapper.single .ts-control input::-webkit-input-placeholder { font-size: 13px !important; color: #718096 !important; }
.ts-wrapper.single .ts-control input::-moz-placeholder { font-size: 13px !important; color: #718096 !important; }
.ts-wrapper.single .ts-control input:-ms-input-placeholder { font-size: 13px !important; color: #718096 !important; }
.ts-wrapper.single .ts-control input::placeholder { font-size: 13px !important; color: #718096 !important; }

/* FIX: Neutralizes selected items from generating layout-breaking boxes inside input */
.ts-wrapper.single .ts-control .item {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    color: #2d3748 !important;
    font-size: 13px !important;
}

/* Clean Custom UI Lookup Dropdown Menu Suggestions Board Container Panel */
.ts-wrapper.single .ts-dropdown {
    border: none !important;
    border-radius: 16px !important; 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    margin-top: 8px !important;
    background: #ffffff !important;
    padding: 6px 0 !important;
    overflow: hidden;
}

/* Suggestion dropdown option list tracking layout typography configuration */
.ts-wrapper.single .ts-dropdown .option {
    padding: 12px 20px !important;
    font-size: 13px !important;
    color: #4a5568 !important;
    letter-spacing: 0.1px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover / Keyboard active focus item matching navigation target rows */
.ts-wrapper.single .ts-dropdown .option.active {
    background-color: #f7fafc !important; 
    color: #1a202c !important;
    font-weight: 500;
}

/* ==========================================
   Pro Product Details Image Gallery Styles
========================================== */
.key-ingredients{
    padding: 60px 0;
    background-color: #fafafa;
}

.science-behind{
    padding: 60px 0;
}

/* Replaced .ingredients-title */
.hero-heading {
    color: #111111;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

/* Replaced .custom-flex-row */
.v-align-row {
    display: flex;
    align-items: center;
}

/* Replaced .custom-center */
.content-box-center {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}