html, body {
    background-color: #fffaf5;
}
body {
    padding-top: 100px;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
}
.bg {
    position: relative;
    min-height: 60vh; /* ensure there is area to paint on */
    margin: 0;
    overflow: hidden;
    padding:3rem 0;
}

.bg::before {
    content: "";
    position: absolute;
    inset: 0;              /* shorthand for top/left/right/bottom: 0 */
    background-image: url("/static/images/bg-home1-sec1.webp");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    background-color: transparent;
    z-index: 1;
    mix-blend-mode: multiply;
}

.hero-section, .intro-section { position: relative; z-index: 2; }
strong {
    font-weight: 600 !important;
}

a, a:focus, a:hover {
    text-decoration: none;
    outline: none;
}
a:focus
.top-bar {
    height: 50px;
    /*background-color: #f4f6fb;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin-bottom: 10px;
    font-size: 14px;
}


.header {
    padding: 20px 0;
    border-bottom: 1px dotted #ffddd6;
    margin-bottom: 40px;
}

/* Custom style for the button-like first link */
.nav-item{
    margin-right: 10px;
}
/*
.nav-item a.nav-link{
    color: #2B2625;
}
.nav-item a.nav-link:hover{
    color: #e97361 !important;
}
*/
.nav-item .nav-link.btn-styled {
    display: inline-block;
    padding: 6px 30px;
    background: linear-gradient(to right, #fd808f, #e97361); /* Gradient background */
    color: #fff !important;
    text-align: center;
    border-radius: 10px; /* Rounded corners */
    font-weight: bold;
    transition: background 0.3s ease;
    text-decoration: none; /* Remove underline */

}

.nav-item .nav-link.btn-styled:hover {
    background: linear-gradient(45deg, #feb47b, #ff7e5f); /* Reverse gradient on hover */
    color: #fff !important;

}
nav  .btn.btn-styled {
padding:2px 6px !important;
}
.btn.btn-styled {
    
    background: linear-gradient(to right, #ff7c8b, #ff8b7a); /* Gradient background */
    color: #fff !important;
    text-align: center;
    border-radius: 8px; /* Rounded corners */
    font-weight: bold;
    transition: background 0.3s ease;
}
.btn.btn-styled:hover {
    background: linear-gradient(45deg, #feb47b, #ff7e5f); /* Reverse gradient on hover */
    color: #fff !important;
}

@media (max-width: 767px) {
    .nav-item .nav-link.btn-styled {
        display: inline-block;
        padding-left: 0 !important;  /* Adjust padding for mobile */
        background: none; /* Remove background */
        color: #2B2625 !important; /* Dark text */
        text-align: left; /* Left align text */
        border-radius: 0; /* Remove rounded corners */
        font-weight: normal; /* Adjust font weight */
        transition: none; /* No transition effect */
        text-decoration: none; /* Remove underline */
    }

    .nav-item .nav-link.btn-styled:hover {
        background: none; /* No background on hover */
        color: #e97361 !important; /* Keep text dark on hover */
    }

    #toastRegister{
        left:5%;
    }

    #profile-section #profileInfo .title-table {
    margin: 0;
    padding-top: 0;
    }

    #profile-section #profileInfo .flex-grow-1 {
        gap:0.5rem ;
    }

    #profile-section #profileInfo .fs-5{
        margin: 0;
    }
}


.intro-section {

    margin-bottom: 20px;
}
.intro-section h5 {
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
}
h2.intro{
    margin-bottom: 20px;
    color: #f89383;
    font-weight: 800;
}
.article-box-m {
    color: #fff;
    background: linear-gradient(45deg, #feb47b, #ff8b7a); /* Reverse gradient on hover */
    border: 1px solid #ffddd6;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    min-height: 100%;
}
.article-box-m:hover {
    background: linear-gradient(-45deg, #feb47b, #ff8b7a); /* Reverse gradient on hover */
    border: 1px solid #ffddd6;
}
.article-box {
    background-color: #fff1f1;
    border: 1px solid #ffddd6;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
}


section.featured-categories {

    margin-top: 60px;
}
.featured-categories .category-box {
    background-color: #f8f9fa;
    border-radius: 8px;
    text-align: left;
    box-shadow: 0 2px 4px rgba(20, 0, 0, 0.1);
    transition: background 0.3s ease;
    
}
/* show background image on top of the box element*/


.featured-categories .category-box h5 {
    font-size: 16px;
    font-weight: bold;
}

.featured-categories .category-box-svg i,
.featured-categories .category-box-svg .fa {
    font-size: 2.5rem; /* larger icon */
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    opacity: 0.95;
}

@media (max-width: 767px) {
    .featured-categories .category-box-svg i,
    .featured-categories .category-box-svg .fa {
        font-size: 1.6rem;
        margin-right: 8px;
    }
}

.featured-categories .category-box.category-box-1 {
    color: #fff;
    background: linear-gradient(135deg, #ffd08a 0%, #ff8a6a 50%, #ff5a5a 100%);
}


.featured-categories .category-box.category-box-2 {
    color: #fff;
    background: linear-gradient(135deg, #d5a887 0%, #c07a55 50%, #9b4b30 100%);
}


.featured-categories .category-box.category-box-3 {
    color: #fff;
    background: linear-gradient(135deg, #ff9a8b 0%, #ff6b8a 50%, #ff3b70 100%);
}
.featured-categories .category-box.category-box-4 {
    color: #fff;
    background: linear-gradient(135deg, #ff9a8b 0%, #d36581 50%, #9b568e 100%); /* experimental mauve to olive */
}
.featured-categories .category-box.category-box-5 {
    color: #fff;
    background: linear-gradient(135deg, #ffd08a 0%, #bbb94c 50%, #808000 100%); /* olive to warm beige */
}

.featured-categories .category-box:hover {
    color: #fff;
    background: linear-gradient(45deg, #feb47b, #ff7e5f); /* Reverse gradient on hover */
    cursor: pointer;
}

.category-box h5 a.link-light:link,.category-box h5 a.link-light:active,.category-box h5 a.link-light:visited{
    color: #fff !important;
}
/* Full-width background section */
.footer-background {
    background-color: #fef2e7; /* Dark background for footer */

    margin-top: 4rem; /* Space above the footer */
    padding: 40px 0; /* Padding inside the footer */
}

.footer-menu {

    font-size: 14px;
}

.footer-menu h6 {
    font-weight: bold;
}
.footer-copyright {
    height: 50px;
    background-color: #4e3834;
    color: #fff;
    font-size: 12px;
}
span.pink{
    color: #f3697a;
}

/* card overwrite */
.card.cart, .card.beige {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(20, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
    background-color: #f8f5ee;
    color: #2b2525;
}
.beige {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(20, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
    background-color: #f8f5ee;
    color: #2b2525;
}

table.cart-table > * {
    background-color: transparent !important;
}

.navbar-expand-md .navbar-nav .dropdown-menu {
    background-color: #2b2525;
}

.navbar input.text-light::placeholder {
    color:#faebd7 !important;
    opacity: 0.5; /* Ensure the color is not transparent */
}

.navbar-toggler {
    border: none; /* Removes the border */
    outline: none; /* Removes the outline */
    box-shadow: none; /* Removes any shadow around the button */
}

.navbar-toggler:focus, 
.navbar-toggler:active {
    outline: none; /* Removes the focus outline */
    box-shadow: none; /* Removes any active or focus shadow */
}



.zoom-image {
    transition: transform 0.3s ease; /* Add a smooth transition */
}

.zoom-image:hover {
    transform: scale(1.05); /* Zoom the image by 20% */
}

.badge {
    font-size:0.85em ;
    font-weight: 500;
    padding: 0.35em 0.6em;
}

#login form p{
    color:#e97361;
    font-weight: 800;
}

#login img{
    width: 55%;
}

#toastRegister{
    position: fixed;
    right: 2%;
    bottom: 2%;
    z-index: 1055;
    background: #222 !important;
    border-radius: 0.5rem;
    box-shadow: 0 2px 16px rgba(0,0,0,0.18);
    min-width: 260px;
    max-width: 350px;
}

#toastRegister .toast-body svg {
    vertical-align: middle;
    margin-bottom: 2px;
}

#profile-section{
    border-color: var(--bs-border-color-translucent);
}

#profile-section #profile-card{
 border: 1px solid #ffddd6;
 border-radius: 0.5rem;
}

#profile-section .profile-img {
  position: relative;
  width: 3.5rem;    
  height: 3.5rem;
  overflow: hidden;
}

#profile-section .profile-img {

  width: 3.5rem;    
  height: 3.5rem;   
  background-color:var(--bs-dark); 
  border-radius: 50%;         
  text-align: center; 
  line-height: 3rem; 
  font-size: 2.5rem;
  font-weight: 700;
}

#profile-section #profile-card p{
    font-size: small;
}

#profile-section .edit-btn {
  background-color: #312c2b;
  color: #fff;
}

#profileInfo{
  background: linear-gradient(90deg, rgba(255, 242, 244, 0.8), rgba(255, 249, 248, 0.6));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 221, 214, 0.4);
  box-shadow: 0 4px 6px rgba(237, 235, 235, 0.05);
}

#profile-section .w-33 {
  width: 33%;
}

#forgotPasswordCard {
  background-color: #fffdfd00;
}

#forgotPasswordCard .form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.btn-primary {
    color: #fff;
}
.btn-outline-secondary {
    --bs-btn-color: #ff8a78;
    --bs-btn-border-color: #fe9281;
    --bs-btn-hover-color: #1f1b1a;
    --bs-btn-hover-bg: #fe9281;
}

.btn-default{
    background-color: #f5efe7;
    color: #312c2b;
}
.btn-default:hover{
    background: linear-gradient(45deg, #feb47b, #ff7e5f); /* Reverse gradient on hover */
    color: #fff !important;
}

.bg-info {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
}

/* Hero animations */
.hero-section .hero-content .animate-fade-up {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeUp 700ms ease forwards;
}
.hero-section .hero-content .delay-1 { animation-delay: 120ms; }
.hero-section .hero-content .delay-2 { animation-delay: 240ms; }
.hero-section .hero-content .delay-3 { animation-delay: 360ms; }



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

/* Respect user preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-section .hero-content .animate-fade-up,
    .hero-section .article-box-m,
    .hero-section .article-box img,
    .hero-section .zoom-image {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Cart Styles */
.cart-img {
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.cart-table td {
    vertical-align: middle;
}

.delete-cart-item {
    cursor: pointer;
    transition: color 0.2s;
}

.delete-cart-item:hover {
    color: #dc3545 !important;
}

.cart-table .item-quantity,
.cart-table .item-price,
.cart-table .item-subtotal {
    font-weight: 500;
}

input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #fff9f9 inset !important;
    box-shadow: 0 0 0 1000px #fff9f9 inset !important;
    background-color: #fff9f9 !important;
    /*color: #2B2625 !important;*/
    transition: background-color 5000s ease-in-out 0s;
}
:root {
  --bs-badge-font-size: 0.55em;
  --bs-badge-font-weight: 500;
}

/* Branding color swatches for tables */
.color-swatch {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid #dee2e6;
}
.no-transparent {
  opacity: 1 !important;
}
small, .small {
    font-size: 0.75em;
}

.alert-info {
    --bs-alert-color: var(--bs-text-dark);
    --bs-alert-bg: #f8f5ee;
    --bs-alert-border-color: var(--bs-dark-bg-subtle);
    --bs-alert-link-color: var(--bs-primary-text-emphasis);
}

/* Fixed height + width for ALL product card images */
.card-img-top,
.product-card img {
  width: 100% !important;
  height: 300px !important; /* Fixed height - adjust as needed */
  object-fit: cover !important; /* Crops to fill, maintains aspect ratio */
  object-position: center !important; /* Centers the crop */
}

/* Ensure card image containers don't interfere */
.card-img-top {
  border-radius: 0.375rem 0.375rem 0 0  !important; /* Top corners only */
}