:root {
    --bg-color: #c1909d;
    /* Soft light pink */
    --container-bg: #F3D0D8;
    /* Slightly darker pink */
    --border-color: #333333;
    /* Thin dark border */
    --text-color: #000000;
    --input-bg: #FFFFFF;
    --button-bg: #d34ac1;
    /* Slightly darker than container */
    --shadow-color: rgba(0, 0, 0, 0.1);
}

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

body {
    background-color: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'Roboto', sans-serif;
    /* Default font */
}

.login-container {
    background-color: var(--container-bg);
    border: 1px solid var(--border-color);
    width: 400px;
    height: 480px;
    /* Make it roughly square/rectangular as per typical login boxes */
    max-width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* Minimal shadow */
}

h1 {
    font-family: 'Playfair Display', serif;
    /* Serif-style header */
    color: var(--text-color);
    margin-bottom: 30px;
    letter-spacing: 2px;
    font-size: 2rem;
}

form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.input-field {
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 50px;
    /* Fully rounded pill shape */
    background-color: var(--input-bg);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    /* Subtle inner shadow */
    font-size: 0.9rem;
    outline: none;
    text-align: left;
    /* Horizontally centered text usually looks good in pill inputs, but reference says inputs horizontally centered, usually text is left aligned. Let's keep text default left for usability unless strictly centered text is implied. Re-reading: "Two horizontally centered rounded input fields" - fields are centered, not necessarily text. Standard is left text. */
}

.input-field::placeholder {
    color: #999;
}

.options-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: #333;
    padding: 0 5px;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.forgot-password {
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

.login-btn {
    width: 100%;
    padding: 12px;
    border: none;
    background-color: var(--button-bg);
    /* Slightly darker pink than background */
    color: var(--text-color);
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 8px;
    /* Rectangular with slight rounding */
    cursor: pointer;
    font-size: 1rem;
    margin-top: 10px;
    transition: background-color 0.2s;
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* Optional subtle border definition */
    background-color: #d63384;
    /* StepZone pink */
    color: #ffffff;
}



.login-btn:hover {
    filter: brightness(0.95);
}

.footer-text {
    margin-top: 25px;
    font-size: 0.85rem;
    color: #444;
}

.create-account {
    text-decoration: none;
    color: #444;
    font-weight: bold;
    border-bottom: 1px solid #444;
}

.google-auth {
    margin-top: 0px;
}

.google-btn {
    width: 100%;
    padding: 12px;
    border-radius: 0px;
    border: 1px solid #ddd;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.google-btn img {
    width: 18px;
    height: 18px;
}

.google-btn:hover {
    background-color: #f7f7f7;
}

.google-text {
    text-decoration: underline;
}

@media (max-width: 480px) {

    .login-container,
    .signup-container {
        width: 90%;
        height: auto;
        padding: 30px 20px;
    }
}

/* Sign Up Specific Styles */
.signup-container {
    background-color: var(--container-bg);
    border: 1px solid var(--border-color);
    width: 450px;
    /* Slightly wider if needed, or same as login */
    /* Height auto to accommodate more fields */
    height: auto;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.signup-header {
    text-align: center;
    margin-bottom: 25px;
}

.signup-header h1 {
    margin-bottom: 5px;
    /* Tighter spacing for subtext */
}

.signup-header p {
    font-size: 0.7rem;
    color: #555;
    font-weight: 300;
}

.signup-btn {
    width: 100%;
    padding: 12px;
    border: none;
    background-color: #FF69B4;
    /* Bright Pink */
    color: #FFFFFF;
    /* White Text */
    font-weight: bold;
    text-transform: uppercase;
    /* Assuming uppercase like login, though reference might vary. Prompt says "Sign Up button", implies text is Sign Up. Prompt says "Rectangular with slightly rounded corners". */
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 15px;
    /* Slight gap from inputs */
    transition: background-color 0.2s;
}

.signup-btn:hover {
    filter: brightness(0.9);
}

.login-link {
    text-decoration: none;
    color: #444;
    font-weight: bold;
    border-bottom: 1px solid #444;
}

/* OTP Specific Styles */
.otp-container {
    background-color: #FFFFFF;
    /* White Card */
    border: 1px solid var(--border-color);
    width: 400px;
    height: auto;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    border-radius: 20px;
    /* Slightly rounded */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    position: relative;
    text-align: center;
}

.otp-icon-wrapper {
    position: relative;
    height: 60px;
    /* Sufficient height for overlap */
    width: 60px;
    margin-bottom: 20px;
    display: flex;
    /* Centering container */
    justify-content: center;
    align-items: center;
}

/* Combined Icons Construction */
.icon-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    background: transparent;
}

.phone-icon {
    font-size: 2.5rem;
    color: #FFA500;
    /* Orange */
    z-index: 1;
    left: 50%;
    transform: translateX(-60%) rotate(-10deg);
    /* Shift slightly left */
}

.lock-icon {
    font-size: 1.4rem;
    color: #888;
    /* Gray */
    z-index: 2;
    background-color: #FFFFFF;
    /* White bg to mask phone line if needed */
    padding: 2px;
    border-radius: 4px;
    left: 50%;
    top: 50%;
    transform: translate(20%, 20%);
    /* Shift slightly right and down */
}


.otp-header {
    margin-bottom: 30px;
}

.otp-header h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 1.4rem;
    color: #000;
}

.otp-header p {
    font-size: 0.85rem;
    color: #777;
    font-weight: 400;
}

.otp-input-wrapper {
    width: 100%;
    background-color: #f0f2f5;
    /* Light gray */
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 25px;
}

.country-code {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 12px;
    border-right: 1px solid #ccc;
    margin-right: 12px;
    font-weight: 500;
    font-size: 0.95rem;
    color: #333;
}

.flag-icon {
    width: 22px;
    height: auto;
    border-radius: 2px;
}

.otp-input-field {
    border: none;
    background: transparent;
    flex-grow: 1;
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
    outline: none;
    letter-spacing: 1px;
}

.check-icon {
    color: #28a745;
    /* Green */
    font-size: 1.2rem;
}

.otp-btn {
    width: 100%;
    padding: 14px;
    border: none;
    background-color: #cd2782;
    /* Light Pink */
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1rem;
    border-radius: 50px;
    /* Pill shape */
    cursor: pointer;
    margin-bottom: 20px;
    transition: background-color 0.3s;
}

.otp-btn:hover {
    background-color: #FFB6C1;
    /* Slightly darker pink on hover */
}

.change-number {
    text-decoration: none;
    color: #666;
    font-size: 0.85rem;
    border-bottom: 1px dotted #999;
}

/* Verify Code Specific Styles */
.verify-icon-wrapper {
    position: relative;
    height: 80px;
    width: 80px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.verify-btn {
    background-color: #d81b60;
    /* StepZone primary pink */
    color: #ffffff;
    border: none;
    border-radius: 30px;
    padding: 14px 0;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    cursor: pointer;
}


.phone-display-icon {
    font-size: 3.5rem;
    color: #333;
    /* Dark Phone */
    z-index: 1;
}

.msg-bubble-icon {
    position: absolute;
    font-size: 2rem;
    color: #4a90e2;
    /* Blue */
    right: -10px;
    top: 10px;
    z-index: 2;
    background: white;
    /* Border effect */
    border-radius: 50%;
    padding: 0;
    line-height: 1;
}

.otp-digit-group {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 30px;
    border-radius: 5px;
    border-color: #000;
}

.otp-digit-box {
    width: 45px;
    height: 45px;
    border: none;
    background-color: #f0f2f5;
    border-radius: 8px;
    border-color: #000;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    outline: none;
    transition: box-shadow 0.2s;
}

.otp-digit-box:focus {
    box-shadow: 0 0 0 2px #c45c6d;
    background-color: #fff;
}


/* Forgot Password Specific Styles */
.forgot-icon-wrapper {
    position: relative;
    height: 70px;
    width: 70px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;
    /* Very light gray circle background option, or just transparent */
    border-radius: 50%;
    /* If we want a circle background */
    /* Let's keep it minimal as requested "Minimal flat icon style" - maybe just the icon */
    background: transparent;
}

.lock-display-icon {
    font-size: 3rem;
    color: #333;
}

.back-to-login {
    text-decoration: none;
    color: #666;
    font-size: 0.85rem;
    border-bottom: 1px dotted #999;
}

/* Reset Password Specific Styles */
.password-input-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 15px;
    /* Spacing between confirmed passwords */
    display: flex;
    align-items: center;
}

.password-input-wrapper .input-field {
    padding-right: 40px;
    /* Make room for the eye icon so text doesn't overlap */
    padding-left: 40px;
    /* Balance centering */
}

.toggle-password {
    position: absolute;
    right: 15px;
    color: #777;
    cursor: pointer;
    font-size: 0.9rem;
}

/* Home/Header Specific Styles */
.home-body {
    display: block;
    /* Override flex centered layout of auth pages */
    background-color: #d1cdd1;
    /* Neutral background for content */
    height: auto;
}

/* Announcement Bar */
.announcement-bar {
    background-color: #fce4ec;
    /* Very light pink/neutral */
    color: #333;
    padding: 8px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.announcement-text {
    text-align: center;
}

.invite-link {
    color: #d81b60;
    font-weight: bold;
    text-decoration: none;
    margin-left: 5px;
}

.close-announcement {
    position: absolute;
    right: 20px;
    cursor: pointer;
    color: #777;
}

/* Main Header */
.main-header {
    background-color: #ffffff;
    padding: 15px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #000;
    letter-spacing: 0.5px;
}

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

.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.nav-links li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 1rem;
    position: relative;
    transition: color 0.3s;
}

.nav-links li a:hover {
    color: #d81b60;
    /* Brand accent color */
}

/* Search Bar */
.header-right {
    display: flex;
    align-items: center;
    gap: 25px;
}

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

.search-input {
    padding: 8px 15px 8px 35px;
    border-radius: 20px;
    border: 1px solid #ddd;
    background-color: #f5f5f5;
    font-size: 0.9rem;
    width: 200px;
    outline: none;
    transition: all 0.3s;
}

.search-input:focus {
    background-color: #fff;
    border-color: #ccc;
}

.search-icon {
    position: absolute;
    left: 12px;
    color: #888;
    font-size: 0.9rem;
}

/* Utility Icons */
.header-icons {
    display: flex;
    align-items: center;
    gap: 20px;
}

.icon-link {
    color: #333;
    font-size: 1.2rem;
    text-decoration: none;
    transition: color 0.3s;
}

.icon-link:hover {
    color: #d81b60;
}

.profile-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #333;
}

.avatar-circle {
    width: 32px;
    height: 32px;
    background-color: #eee;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #555;
    font-size: 0.9rem;
}

.username {
    font-weight: 500;
    font-size: 0.95rem;
}

.mobile-menu-trigger {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #333;
}

/* Responsive */
@media (max-width: 992px) {
    .search-input {
        width: 150px;
    }

    .nav-links {
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .header-center {
        display: none;
        /* Hide nav links on mobile */
    }

    .search-wrapper {
        display: none;
        /* Hide search or move to icon on mobile if tight, prompt says "Search and icons remain accessible" - ideally show search icon only */
    }

    .username {
        display: none;
    }

    .mobile-menu-trigger {
        display: block;
        margin-left: 15px;
    }

    .main-header {
        padding: 15px 20px;
    }
}

/* Hero Section */
.hero-section {
    width: 100%;
    height: 650px;
    background-image: url('images/hero_premium.png');
    background-size: cover;
    background-position: center right;
    /* Focus on the model/shoes on the right */
    display: flex;
    align-items: center;
    padding-left: 8%;
    /* Percentage based for better responsiveness */
}

.hero-content {
    max-width: 600px;
}

.hero-tagline {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 5px;
}

.hero-script {
    display: block;
    font-family: 'Great Vibes', cursive;
    font-size: 3.5rem;
    color: #d81b60;
    /* Brand pink or similar accent */
    line-height: 0.6;
    margin-left: 20px;
    margin-bottom: 15px;
    /* Adjust purely visual spacing */
}

.hero-brand {
    font-family: 'Playfair Display', serif;
    font-size: 4.5rem;
    font-weight: 700;
    color: #000;
    line-height: 1;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.hero-sub {
    font-size: 1.3rem;
    color: #666;
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 40px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
}

.btn-primary {
    display: inline-block;
    padding: 15px 40px;
    background-color: #d81b60;
    color: white;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 30px;
    /* Fully rounded/pill */
    transition: all 0.3s;
    border: 2px solid #d81b60;
    letter-spacing: 1px;
    width: auto;
}

.btn-primary:hover {
    background-color: #ad1457;
    border-color: #ad1457;
}

.btn-secondary {
    display: inline-block;
    padding: 15px 40px;
    background-color: transparent;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 30px;
    transition: all 0.3s;
    border: 2px solid #333;
    letter-spacing: 1px;
}

.btn-secondary:hover {
    background-color: #333;
    color: white;
}

.add-cart-btn {
    width: 100%;
    background-color: #d81b60;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: auto;
}


@media (max-width: 992px) {
    .hero-section {
        background-position: center;
        /* Shift slightly if needed */
        padding-left: 5%;
    }

    .hero-brand {
        font-size: 3.5rem;
    }
}

.thumbnail {
    width: 70px;
    height: 70px;
    cursor: pointer;
    margin-bottom: 10px;
    border: 2px solid transparent;
}

.thumbnail:hover {
    border: 2px solid #333;
}

.active-thumb {
    border: 2px solid #000;
}

/* PRODUCT GRID */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* exactly 4 cards */
  gap: 20px;
  margin-top: 30px;
}

/* PRODUCT CARD */
.product-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
}



.product-card:hover {
    transform: translateY(-4px);
}


@media (max-width: 1024px) {
  .related-products {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .related-products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .related-products {
    grid-template-columns: 1fr;
  }
}

/* IMAGE SECTION */
.card-image {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

/* WISHLIST ICON */
.card-wishlist {
    position: absolute;
    top: 10px;
    right: 10px;
    background: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* BODY */
.card-body {
    padding: 15px;
    text-align: center;
}

.card-title {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 8px;
    height: 40px;
    overflow: hidden;
}

.card-price {
    font-size: 16px;
    font-weight: 600;
    color: black;
    margin-bottom: 12px;
}

/* ADD TO CART BUTTON */
.card-cart-btn {
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 6px;
    background-color: #d81b60;
    color: white;
    cursor: pointer;
    transition: 0.3s;
}

.card-cart-btn:hover {
    background-color: #a04868;
}

@media (max-width: 768px) {
    .hero-section {
        height: 500px;
        padding: 20px;
        justify-content: center;
        background-position: 70% center;
        /* Keep image evident */
        text-align: center;
    }

    .hero-content {
        background-color: rgba(255, 255, 255, 0.85);
        padding: 30px;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    }

    .hero-script {
        margin-left: 0;
        /* Center align fix */
    }

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

    .hero-buttons {
        justify-content: center;
        flex-direction: column;
        gap: 15px;
    }
}

/* Product Grid */
/* .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
} */


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

.product-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    position: relative;
}

.product-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
}


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

.product-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.product-info {
    padding: 20px;
    text-align: center;
}

.product-info h3 {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 8px;
    color: #333;
}

.product-info p {
    color: #d81b60;
    font-weight: 700;
    font-size: 1rem;
}

.original-price {
    text-decoration: line-through;
    color: #999;
    font-weight: 400;
    margin-right: 8px;
}
.discount-tag {
  color: red;
  font-weight: bold;
}

.badge {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 5px 12px;
    border-radius: 20px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

.sale-badge {
    background-color: #d81b60;
}

.hot-badge {
    background-color: #ff5722;
}

.best-badge {
    background-color: #ffca28;
    color: #333;
}

/* Offers Section */
.offers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.offer-card {
    padding: 40px;
    border-radius: 15px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    min-height: 200px;
}

/* Gradients for offer cards */
.offer-1 {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    color: #333;
}

.offer-2 {
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
    color: #333;
}

.offer-3 {
    background: linear-gradient(135deg, #fad0c4 0%, #ffd1ff 100%);
    color: #333;
}

.offer-card h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    opacity: 0.8;
}

.offer-card h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    font-weight: 800;
}

.offer-btn {
    text-decoration: none;
    color: #333;
    background: #fff;
    padding: 10px 25px;
    border-radius: 25px;
    font-weight: 600;
    transition: transform 0.3s;
}

.offer-btn:hover {
    transform: scale(1.05);
}

/* Promo Banner */
.promo-banner-section {
    width: 100%;
    height: 400px;
    background-image: url('images/hero_bg.png');
    /* Reusing existing valid image */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 40px 0;
}

.promo-banner-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    /* Dark overlay for text contrast */
}

.promo-content {
    position: relative;
    text-align: center;
    color: #fff;
    z-index: 1;
}

.promo-content h3 {
    font-size: 1.5rem;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.promo-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    margin-bottom: 15px;
}

.promo-content p {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffeb3b;
    margin-bottom: 30px;
}

.promo-content .btn-primary {
    border: none;
    background: #fff;
    color: #d81b60;
}

.promo-content .btn-primary:hover {
    background: #f0f0f0;
}

/* Categories */
.categories-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
}

.category-card {
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s;
}

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

.category-card img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.category-card p {
    font-weight: 600;
    color: #333;
    font-size: 1.1rem;
}

/* Testimonials */
.testimonials-section {
    background-color: #fff9fa;
    /* Very light pink */
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.testimonial-card {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 15px;
}

.review-text {
    font-style: italic;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.6;
}

.testimonial-card h4 {
    font-weight: 700;
    color: #333;
}

/* Blogs */
.blogs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.blog-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.blog-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog-content {
    padding: 20px;
}

.blog-content h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #333;
}

.blog-content p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.5;
}

.blog-content a {
    text-decoration: none;
    color: #d81b60;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Footer position adjustment if needed */
.main-footer {
    margin-top: 0;
}

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

/* Footer Styles */
.main-footer {
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    /* Deep Navy/Blue Gradient */
    color: #ffffff;
    padding: 60px 40px 20px;
    font-family: 'Roboto', sans-serif;
    margin-top: 50px;
}

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

.footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 50px;
}

.footer-brand-section {
    flex: 0 0 100%;
    margin-bottom: 20px;
}

@media(min-width: 1024px) {
    .footer-brand-section {
        flex: 0 0 15%;
    }
}

.footer-logo {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: #fff;
    margin-bottom: 10px;
}

.footer-links-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    flex: 1;
}

.footer-column h3 {
    font-size: 1rem;
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: 1px;
    color: #e0e0e0;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a {
    text-decoration: none;
    color: #b0bec5;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.footer-column ul li a:hover {
    color: #fff;
    padding-left: 5px;
    /* Subtle movement */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.footer-newsletter {
    flex: 0 0 250px;
}

.footer-newsletter h3 {
    font-size: 1.1rem;
    margin-bottom: 15px;
    color: #fff;
}

.footer-newsletter p {
    font-size: 0.85rem;
    color: #b0bec5;
    margin-bottom: 20px;
    line-height: 1.5;
}

.newsletter-form {
    display: flex;
    position: relative;
    border-bottom: 1px solid #b0bec5;
}

.newsletter-form input {
    width: 100%;
    background: transparent;
    border: none;
    padding: 10px 0;
    color: #fff;
    outline: none;
}

.newsletter-form input::placeholder {
    color: #78909c;
}

.newsletter-form button {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    transition: color 0.3s;
}

.newsletter-form button:hover {
    color: #d81b60;
    /* Brand pink accent */
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-legal a {
    text-decoration: none;
    color: #b0bec5;
    font-size: 0.85rem;
    transition: color 0.3s;
}

.footer-legal a:hover {
    color: #fff;
}

.footer-legal span {
    margin: 0 10px;
    color: #546e7a;
}

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

.footer-social a {
    color: #fff;
    font-size: 1.1rem;
    transition: all 0.3s;
    opacity: 0.8;
}

.footer-social a:hover {
    opacity: 1;
    color: #d81b60;
    transform: translateY(-2px);
}

/* Footer Responsive */
@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
        gap: 30px;
    }

    .footer-links-container {
        flex-direction: column;
        /* Or grid 2x2 if preferred, but column stack is safe for full lists */
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .footer-newsletter {
        width: 100%;
    }

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

@media (max-width: 480px) {
    .footer-links-container {
        grid-template-columns: 1fr;
        /* Single column on very small screens */
    }
}

/* Product Listing Page Styles */
.listing-actions-row {
    background: #fff;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.actions-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.action-btn {
    background: #fff;
    border: 1px solid #ddd;
    padding: 8px 20px;
    border-radius: 25px;
    color: #333;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.action-btn:hover {
    background: #F3D0D8;
    /* Soft pink background on hover */
    border-color: #d81b60;
    color: #d81b60;
}

/* Listing Grid Override */
.listing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

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

@media (max-width: 576px) {
    .listing-grid {
        grid-template-columns: 1fr;
    }
}

.listing-card {
    background: #fff9fa;
    /* Soft pastel background */
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

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

.listing-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

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

.wishlist-heart {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.wishlist-heart:hover {
    background: #d81b60;
    color: #fff;
}

.listing-info {
    padding: 20px;
    text-align: center;
}

.listing-info h3 {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 10px;
    color: #333;
}

.listing-info .price {
    font-size: 1.2rem;
    font-weight: 700;
    color: #d81b60;
}

/* --- Product Details Page Styles --- */
.product-details-page {
    background-color: #fff;
    padding-bottom: 60px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.product-grid-3col {
    display: grid;
    grid-template-columns: 100px 1fr 1fr;
    gap: 40px;
    padding: 60px 0;
}

/* Left Side - Thumbnails */
.product-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.thumb {
    width: 80px;
    height: 80px;
    border: 1px solid #eee;
    padding: 5px;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: #f9f9f9;
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.thumb.active,
.thumb:hover {
    border-color: #d81b60;
    box-shadow: 0 4px 10px rgba(216, 27, 96, 0.1);
}

/* Center - Main Image */
.product-main-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-platform {
    width: 100%;
    max-width: 500px;
    padding: 40px;
    background: #fdfdfd;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.image-platform::after {
    content: '';
    position: absolute;
    bottom: 20px;
    width: 70%;
    height: 20px;
    background: rgba(0, 0, 0, 0.05);
    filter: blur(10px);
    border-radius: 50%;
    z-index: 1;
}

#main-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 2;
    transition: opacity 0.3s ease;
}

/* Right Side - Product Info */
.product-info-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.product-title {
    font-size: 2.2rem;
    font-family: 'Playfair Display', serif;
    color: #333;
    line-height: 1.2;
}

.product-subtitle {
    font-size: 1rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.price-section {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 10px 0;
}

.discounted-price {
    font-size: 2rem;
    font-weight: 700;
    color: #d81b60;
}

.original-price {
    font-size: 1.2rem;
    text-decoration: line-through;
    color: #aaa;
}

.discount-badge {
    background-color: #e8f5e9;
    color: #2e7d32;
    padding: 4px 10px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 20px;
}

.selector-container {
    margin-bottom: 5px;
}

.selector-container label {
    display: block;
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: #444;
}

.size-selector {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.size-btn {
    width: 45px;
    height: 45px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.size-btn:hover {
    border-color: #333;
}

.size-btn.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

.color-selector {
    display: flex;
    gap: 15px;
}

.color-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.color-swatch.active {
    border-color: #d81b60;
    transform: scale(1.1);
}

.product-highlights {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0;
    padding: 0;
}

.product-highlights li {
    font-size: 0.95rem;
    color: #555;
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-highlights i {
    color: #2e7d32;
    font-size: 1.1rem;
}

.action-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

.add-to-cart-btn {
    flex-grow: 1;
    font-size: 1.1rem;
}

/* Wishlist Button */
.action-buttons {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.add-to-cart-btn {
  flex: 1;
}

.wishlist-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  transition: 0.3s;
}

.wishlist-btn:hover {
  background: #f3f4f6;
}

.wishlist-btn.active i {
  color: red;
}

.wishlist-icon {
  font-size: 22px;
  cursor: pointer;
  color: #999;
  transition: 0.3s;
}

.wishlist-icon.active {
  color: red;
}

.related-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin-top: 20px;
}

.related-products .product-card {
  background: white;
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: 0.3s ease;
}

.related-products .product-card:hover {
  transform: translateY(-5px);
}


/* Tabbed Content Styles */
.product-tabs-section {
    padding: 60px 0;
    border-top: 1px solid #f0f0f0;
}

.tabs-header {
    display: flex;
    gap: 40px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 30px;
}

.tab-link {
    background: none;
    border: none;
    padding: 15px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    position: relative;
    transition: color 0.3s;
}

.tab-link:hover {
    color: #d81b60;
}

.tab-link.active {
    color: #d81b60;
}

.tab-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #d81b60;
    border-radius: 3px 3px 0 0;
}

.tab-content {
    display: none;
    line-height: 1.8;
    color: #555;
    animation: fadeIn 0.4s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.spec-list {
    list-style: none;
    padding: 0;
    max-width: 600px;
}

.spec-list li {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f9f9f9;
}

.spec-list li span:first-child {
    font-weight: 600;
    color: #333;
}

.rating-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.rating-summary h3 {
    font-size: 3rem;
    margin: 0;
    color: #333;
}

.rating-summary h3 small {
    font-size: 1rem;
    color: #888;
    font-weight: 400;
}

.rating-summary .stars {
    color: #ffb400;
    font-size: 1.2rem;
}

.review-item {
    background: #fcfcfc;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 15px;
    border-left: 4px solid #fce4ec;
}
.save-price{
color:#2e7d32;
font-size:0.85rem;
font-weight:600;
margin-top:3px;
}

.success-note{
color:#777;
font-size:0.95rem;
margin-bottom:30px;
}

.success-icon{
animation: pop 0.6s ease;
}

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



/* Responsive Product Details */
@media (max-width: 992px) {
    .product-grid-3col {
        grid-template-columns: 80px 1fr;
    }

    .product-info-panel {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .product-grid-3col {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 30px 0;
    }

    .product-thumbnails {
        flex-direction: row;
        order: 2;
        overflow-x: auto;
        padding-bottom: 10px;
    }

    .product-main-image {
        order: 1;
    }

    .product-info-panel {
        order: 3;
        grid-column: span 1;
    }

    .product-title {
        font-size: 1.8rem;
    }

    .tabs-header {
        gap: 20px;
        overflow-x: auto;
    }

    .tab-link {
        font-size: 0.95rem;
        white-space: nowrap;
    }
}