/* =========================================================
   XpertShop Product Listing Theme (Frappe/ERPNext Webshop)
   Palette + style matched to provided design screenshot
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root{

  /* ***** Color Palette ***** */
  /* primary colors */
  --xp-primary-1: #2664AE;  
  --xp-primary-2: #1b4e7a;    
  /* secondary colors */
  --xp-secondary-1: #b12a6b;    
  --xp-secondary-2: #9d235f;  
  /* ternory color */
  --xp-accent: #ff9200; 
  /* background colors */
  --xp-secondary-bg: #AB728F; 
  --xp-primary-bg: #A3C2E9;  
  --xp-accent-bg: #ff92001c; 
  --xp-secondary-input-bg: #F3E8ED; 
  --xp-primary-input-bg: #E1ECF8;
  /* text colors */
  --xp-black-text: #000;   
  --xp-white: #ffffff; 
  --xp-bg: #f7f1f3;       
  --xp-white-2: #fbf7f8;   
  --xp-text: #111827;       
  --xp-muted: #6b7280;         
  --xp-border: #F4E9EE;
  /* shadows */
  --xp-shadow: 0 14px 45px rgba(17,24,39,.08);
  --xp-shadow-sm: 0 10px 26px rgba(17,24,39,.08);
  /* focus colors */
  --xp-secondary-focus: 0 0 0 2px rgb(177 42 107 / 55%);
  --xp-primary-focus: 0 0 0 2px rgb(38 100 174 / 55%);
  /* font-family */
  --xp-font: Roboto, sans-serif;
  /* border-radius */
  --xp-radius: 16px;
  --xp-radius-lg: 18px;
  /* padding overridding*/
  --padding-sm: 0px !important;
}

/* ***** Styling for web ***** */
#product-listing #products-grid-area .item-card {
  padding: 0rem 1.5rem !important;
}
/* ***** bread crums ***** */
.page-breadcrumbs .breadcrumb .breadcrumb-item span,
.page-breadcrumbs .breadcrumb .breadcrumb-item:before,
.page-breadcrumbs .breadcrumb .breadcrumb-item.active:before {
  color: var(--xp-primary-bg); 
  font-size: 16px;
}
.page-breadcrumbs .breadcrumb .breadcrumb-item.active span {
  color: var(--xp-text) !important;  
  font-weight: 600;
}
/* ***** bread crums ***** */
/* ***** page title ***** */
[data-doctype="Item Group"] .page-header, #page-index .page-header {
  font-size: 40px;
  line-height: 44px;
  font-weight: 700;
  color: var(--xp-black-text);
  letter-spacing: 0px;
}
/* ***** page title ***** */
/* ***** filter ***** */
.collapse.filters-section .filter-block,
.collapse.filters-section,
.filter-options {
  display: flex !important;
  flex-direction: column;
}
.collapse.filters-section {
  gap: 20px;
}
.collapse.filters-section div,
.collapse.filters-section a {
  margin: 0 !important;
}
.collapse.filters-section .filter-block {
  gap: 12px;
}
.filter-options {
  gap: 6px;
}
.filter-lookup-wrapper.checkbox {
  display: flex;
}
#page-index .filters-section .filter-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--xp-black-text);
  text-transform: uppercase;
}
#page-index .filters-section .checkbox .label-area {
  font-size: 12px;
  color: var(--xp-black-text);
  font-weight: 400;
}
#page-index .filters-section .filter-block:last-child {
  border-bottom: none;
  padding-bottom: 0 !important;
}
/* ***** filter ***** */
/* ***** toolbar ***** */
#product-listing .input-group #dropdownMenuSearch .search-icon {
  color: var(--xp-primary-2);
}
#search-box {
  background-color: var(--xp-primary-input-bg);
  height: 48px;
  padding-left: 2.5rem;
  border: none;
  display: flex;
  align-items: center;
  border-radius: 8px;
  color: var(--xp-black-text);
}
#product-listing .toggle-container #toggle-view button {
  background-color: var(--xp-primary-input-bg);
  border: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
#toggle-view .btn-primary,
#toggle-view .btn-primary:focus {
  box-shadow: var(--xp-primary-focus);
}
.btn:active,
.btn.btn-primary:active {
  background-color: var(--xp-primary-input-bg) !important;
  box-shadow: var(--xp-primary-focus) !important;
}
/* ***** toolbar ***** */
/* ***** product listing ***** */
.product-page #product-listing{
  /*padding-left: var(--padding-sm);*/
}
.product-page #products-list-area, .product-page  #products-grid-area {
  /* padding: 0 5px 0 0 ; */
}



.product-page  .row#products-grid-area {
  /* margin-right: unset;
  margin-left: unset;
  gap: 24px; */
  padding: 0px;
}
/* ***** image card ***** */
.product-page .web-item .web-item-img,
.product-page .item-card .item-image,
.product-page .product-card .product-image,
.product-page .web-item-image{
  background: #f2eef0;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.product-page .web-item img,
.product-page .item-card img,
.product-page .product-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}
.card-img, .card-img-bottom {
  border-bottom-right-radius: unset;
  border-bottom-left-radius: unset;
}
/* ***** image card content ***** */
.item-card-group-section .card-body-flex {
  gap: 12px;
}
.item-card-group-section .card-body-flex div {
  margin: 0 !important;
}
.item-card-group-section .product-category {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--xp-muted);
}
.product-page .product-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--xp-black-text);
  font-family: var(--xp-font);
}
.item-card-group-section .product-price {
  font-size: 20px;
  font-weight: 800;
  color: var(--xp-primary-1);
}
.out-of-stock {
  font-size: 12px;
  color: var(--xp-accent);
  padding: 4px 8px;
  background: var(--xp-accent-bg);
  width: fit-content;
  border-radius: 8px;
}
/* ***** Buttons ***** */
.btn-add-to-cart-list {
  visibility: visible;
  box-shadow: none;
  height: 48px;
  flex: none;
  font-size: 13px;
  background: var(--xp-primary-1);
  color: var(--xp-white);
}
.product-page .btn {
  border-radius: 14px;
  font-weight: 800;
  padding: 10px 14px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.product-page .card .btn .icon {
  stroke: var(--xp-white);
}
.product-page .btn:focus,
.product-page .btn:focus-visible {
  outline: none;
  box-shadow: var(--xp-primary-focus);
}
.product-page .btn-primary {
  background: var(--xp-primary-1);
  border-color: var(--xp-primary-1);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--xp-white);
}
.product-page .btn-primary:hover{
  background: var(--xp-primary-2);
  border-color: var(--xp-primary-2);
  /* transform: translateY(-1px); */
  box-shadow: var(--xp-primary-focus);
}
.product-page .btn-default{
  background: rgba(255,255,255,.75);
  border: 1px solid var(--xp-border);
  color: var(--xp-text);
}
.product-page .btn-default:hover{
  background: #fff;
  transform: translateY(-1px);
}
/* add-to-cart icon button (bottom-right) */
.xp-cart-btn,
.product-page .add-to-cart,
.product-page .btn-add-to-cart{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--xp-primary);
  color: #fff;
  border: 0;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 22px rgba(177,42,107,.22);
  transition: transform .12s ease, background .12s ease;
}
.xp-cart-btn:hover,
.product-page .add-to-cart:hover,
.product-page .btn-add-to-cart:hover{
  background: var(--xp-primary-2);
  transform: translateY(-1px);
}

/* ***** product listing ***** */

/* ***** Styling for web ***** */

/* Navbar container */
.product-page .navbar,
.navbar.navbar-expand-lg{
  /* background: var(--xp-white) !important;
  border-bottom: 1px solid var(--xp-border) !important;
  box-shadow: 0 8px 24px rgba(17,24,39,.05) !important;
  padding: 10px 0 !important; */
}









/* Align items nicely */
.product-page .navbar .container,
.navbar.navbar-expand-lg .container{
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Brand */
.product-page .navbar .navbar-brand,
.navbar.navbar-expand-lg .navbar-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--xp-text) !important;
  padding: 0px;
  border-radius: 12px;
}

.product-page .navbar .navbar-brand img,
.navbar.navbar-expand-lg .navbar-brand img{
  height: 42px;
  width: auto;
  display: block;
  max-height: none;
  max-width: none;
}

/* Brand text (fallback span) */
.product-page .navbar .navbar-brand span,
.navbar.navbar-expand-lg .navbar-brand span{
  font-size: 16px;
}

/* Nav links area */
.product-page .navbar .navbar-collapse,
.navbar.navbar-expand-lg .navbar-collapse{
  flex: 1;
}

/* Typical bootstrap nav links */
.product-page .navbar .nav-link,
.navbar.navbar-expand-lg .nav-link{
  font-weight: 500;
  color: var(--xp-text) !important;
  padding: 10px 12px !important;
  border-radius: 12px;
}

.product-page .navbar .nav-link:hover,
.navbar.navbar-expand-lg .nav-link:hover,
.product-page .navbar .nav-link.sale-link,
.navbar.navbar-expand-lg .nav-link.sale-link{
  color: var(--xp-primary-1) !important;
}
.navbar .navbar-nav .nav-item.active .nav-link,
.product-page .navbar .nav-item.active .nav-link {
  font-weight: 700;
  color: var(--xp-primary-1) !important;
}
.navbar .navbar-nav .nav-item.active,
.product-page .navbar .nav-item.active {
  border-bottom: none;
  font-weight: 700;
  color: var(--xp-primary-1) !important;
}
/* Toggler button */
.product-page .navbar .navbar-toggler,
.navbar.navbar-expand-lg .navbar-toggler{
  border: 1px solid var(--xp-border) !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
  outline: none !important;
  box-shadow: none !important;
}

.product-page .navbar .navbar-toggler:focus,
.navbar.navbar-expand-lg .navbar-toggler:focus{
  box-shadow: var(--xp-primary-focus) !important;
}

.product-page .navbar .navbar-toggler svg,
.navbar.navbar-expand-lg .navbar-toggler svg{
  width: 22px;
  height: 22px;
}

/* Language switcher (hidden by default in your HTML) */
#language-switcher select.form-control{
  border-radius: 12px !important;
  border: 1px solid var(--xp-border) !important;
  height: 38px;
}

#language-switcher select.form-control:focus{
  box-shadow: var(--xp-primary-focus) !important;
  border-color: rgba(177,42,107,.35) !important;
}

/* Make navbar items wrap nicely on smaller screens */
@media (max-width: 991.98px){
  .navbar.navbar-expand-lg .navbar-collapse{
    margin-top: 10px;
  }
  .navbar.navbar-expand-lg .nav-link{
    padding: 10px 10px !important;
  }
}

/* ---------- Page Base ---------- */
.container{

}
.breadcrumb-container{
  margin: 0px auto;
  padding-top: 0px;
}
.product-page{
  font-family: var(--xp-font);
  background: var(--xp-bg);
  color: var(--xp-text);
}

.product-page .page_content{
  /* padding: 22px 0 30px; */
}

.product-page a{
  color: inherit;
  text-decoration: none;
}
.product-page a:hover{
  color: var(--xp-primary);
}

/* ---------- Header / Navbar polish ---------- */
.product-page .navbar{
  /* background: var(--xp-white);
  border-bottom: 1px solid var(--xp-border); */
}

.product-page .navbar .form-control,
.product-page .navbar input[type="search"]{
  background: #f3e9ec;
  border: 1px solid rgba(177,42,107,.15);
  border-radius: 12px;
  height: 38px;
}

/* ---------- Title + subtitle (category header) ---------- */
.product-page h1, .product-page .page-title, .product-page .hero-title{
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}
.product-page .hero-subtitle, .product-page .page-description{
  color: #8b4968;
  max-width: 560px;
}

/* ---------- Layout: Listing + Sidebar Filters ---------- */
.product-page .page_content > .row{
  /* gap: 22px;
  margin-left: 0;
  margin-right: 0; */
}



/* sidebar = your filters column (col-md-3) */
.product-page .page_content > .row > .col-12.col-md-3{
  /* background: transparent;
  padding: var(--padding-sm); */
}

/* inner sidebar panel (if you have a wrapper, apply this class in your template)
   otherwise we style common filter containers below */
.product-page .filters-panel,
.product-page .product-filters,
.product-page .filter-section,
.product-page .page_content > .row > .col-12.col-md-3{
  /* border-radius: var(--xp-radius-lg); */
}

/* optional: add a panel look if your filters are plain */
.product-page .page_content > .row > .col-12.col-md-3{
  /* background: rgba(255,255,255,.55);
  border: 1px solid var(--xp-border);
  box-shadow: var(--xp-shadow-sm);
  padding: 18px;
  height: fit-content;
  position: sticky;
  top: 14px; */
}

/* mobile: sticky off */
@media (max-width: 767.98px){
  .product-page .page_content > .row{ gap: 14px; }
  .product-page .page_content > .row > .col-12.col-md-3{
    /* position: static; */
  }
}

/* ---------- Filter headings ---------- */
.product-page .page_content > .row > .col-12.col-md-3 h4,
.product-page .page_content > .row > .col-12.col-md-3 .h4{
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 10px;
}

.product-page .filter-title,
.product-page .section-title{
  font-size: 13px;
  font-weight: 750;
  margin: 16px 0 8px;
  color: var(--xp-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Inputs ---------- */
.product-page .form-control,
.product-page input[type="text"],
.product-page input[type="search"],
.product-page select{
  border-radius: 12px;
  border: 1px solid var(--xp-border);
  box-shadow: none;
  background: var(--xp-white);
}

.product-page .form-control:focus,
.product-page input:focus,
.product-page select:focus{
  outline: none;
  border-color: rgba(177,42,107,.35);
  box-shadow: var(--xp-primary-focus);
}

/* checkboxes look */
.product-page input[type="checkbox"]{
  accent-color: var(--xp-primary);
}

/* ---------- Price range slider (if any) ---------- */
.product-page input[type="range"]{
  width: 100%;
  accent-color: var(--xp-primary);
}

/* ---------- Color dots (simple utility you can use) ---------- */
.xp-color-dots{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.xp-dot{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(17,24,39,.18);
  cursor: pointer;
}
.xp-dot.active{
  box-shadow: 0 0 0 2px rgba(177,42,107,.35);
}

/* ---------- Product Grid ---------- */
/* If you can, wrap product items container with .item-card-group-section */
.product-page #product-listing .item-card-group-section{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1199.98px){
  .product-page #product-listing .item-card-group-section{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px){
  .product-page #product-listing .item-card-group-section{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px){
  .product-page #product-listing .item-card-group-section{
    grid-template-columns: 1fr;
  }
}

/* ---------- Product Card (common selectors) ---------- */
/* .product-page .web-item,
.product-page .item-card,
.product-page .product-card{
  background: var(--xp-white);
  border: 1px solid var(--xp-border);
  border-radius: var(--xp-radius-lg);
  box-shadow: var(--xp-shadow-sm);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
} */
.product-page .item-card{
    margin-bottom: 48px;
}
.product-page .item-card .card{
  background: var(--xp-white);
  border: 1px solid var(--xp-border);
  border-radius: var(--xp-radius-lg);
  box-shadow: var(--xp-shadow-sm);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.product-page .item-card .card:hover{
    transform: translateY(-2px);
    box-shadow: var(--xp-shadow);
    border-color: rgba(177,42,107,.14);
}

/* .product-page .web-item:hover,
.product-page .item-card:hover,
.product-page .product-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--xp-shadow);
  border-color: rgba(177,42,107,.14);
} */

/* wishlist heart (add class on your icon button) */
.xp-wishlist{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,24,39,.10);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 20px rgba(17,24,39,.12);
}
.xp-wishlist:hover{
  border-color: rgba(177,42,107,.25);
}

/* sale/new badge */
.xp-badge,
.product-page .badge,
.product-page .indicator-pill{
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 999px;
  padding: 5px 10px;
  font-weight: 800;
  font-size: 11px;
  background: var(--xp-primary);
  color: #fff;
  border: 0;
}

/* card body spacing */
.product-page .web-item .web-item-body,
.product-page .item-card .item-body,
.product-page .product-card .product-body{
  padding: 14px 14px 12px;
}

/* category label (small caps) */
.xp-cat,
.product-page .item-category,
.product-page .category-label{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(17,24,39,.45);
  font-weight: 800;
}

/* rating row */
.xp-rating{
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f59e0b;
  font-size: 12px;
}
.xp-rating .count{
  color: rgba(17,24,39,.45);
  font-weight: 700;
}

/* price */
.product-page .item-price,
.product-page .price,
.product-page .web-item-price{
  margin-top: 10px;
  font-weight: 900;
  color: var(--xp-primary);
  font-size: 18px;
}
.product-page .old-price,
.product-page .mrp,
.product-page .strike{
  color: rgba(17,24,39,.35);
  text-decoration: line-through;
  font-weight: 800;
  margin-left: 8px;
  font-size: 12px;
}


/* ---------- Sort dropdown (top-right) ---------- */
.xp-sort,
.product-page .sort-selector,
.product-page .sort-by{
  background: rgba(255,255,255,.75);
  border: 1px solid var(--xp-border);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--xp-shadow-sm);
}

/* Clear filters button */
.xp-clear-btn{
  width: 100%;
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(177,42,107,.20);
  color: var(--xp-text);
  padding: 12px 14px;
  font-weight: 850;
}
.xp-clear-btn:hover{
  border-color: rgba(177,42,107,.35);
}

/* ---------- Pagination (pill style) ---------- */
.product-page .pagination,
.product-page .page-numbers,
.product-page .product-paging-area{
  margin-top: 18px !important;
}

.product-page .pagination .page-link,
.product-page .page-numbers a{
  border-radius: 12px;
  border: 1px solid var(--xp-border);
  color: var(--xp-text);
  font-weight: 850;
  padding: 8px 12px;
  background: rgba(255,255,255,.75);
}

.product-page .pagination .page-item.active .page-link,
.product-page .page-numbers .current{
  background: var(--xp-primary);
  border-color: var(--xp-primary);
  color: #fff;
  box-shadow: 0 12px 22px rgba(177,42,107,.20);
}

/* Prev/Next buttons from your DOM screenshot */
.product-page .product-paging-area .btn-prev,
.product-page .product-paging-area .btn-next{
  border-radius: 12px;
  border: 1px solid var(--xp-border);
  background: rgba(255,255,255,.75);
  font-weight: 850;
}
.product-page .product-paging-area .btn-next{
  background: var(--xp-primary);
  color: #fff;
  border-color: var(--xp-primary);
}
.product-page .product-paging-area .btn-next:hover{
  background: var(--xp-primary-2);
  border-color: var(--xp-primary-2);
}

/* ---------- Footer polish ---------- */
.product-page .web-footer{
  margin-top: 40px;
  background: #fff;
  border-top: 1px solid var(--xp-border);
  padding-top: 26px;
}

/* ---------- Small helpers ---------- */
.xp-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--xp-border);
  background: rgba(255,255,255,.75);
  font-weight: 800;
  color: var(--xp-text);
}


.footer{
  margin-top: 40px;
  background: #fff;
  border-top: 1px solid var(--xp-border);
  padding-top: 26px;
}

/* Sticky Glass Navbar */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1030;

  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  padding: 12px 0px;
}

#site-footer .brand-icon{
    width: 24px;
    height: 24px;
    border-radius: .25rem;
    background: var(--primary);
  }

  #site-footer .footer-link{
    color: #6c757d; /* Bootstrap text-muted-ish */
    text-decoration: none;
    transition: color .15s ease;
  }
  #site-footer .footer-link:hover{ color: var(--primary); }

  /* Newsletter input: remove heavy border similar to Tailwind */
  #site-footer .footer-newsletter .form-control{
    border: 0;
    background: #fff;
    border-radius: .5rem;
    height: calc(1.5em + .5rem + 2px);
    box-shadow: 0 0 0 1px rgba(0,0,0,.06);
  }

  #site-footer .footer-newsletter .btn{
    border-radius: .5rem;
    padding: .375rem .6rem;
  }

  /* Dark theme (optional) */
  .theme-dark #site-footer{
    background: #111827; /* near tailwind gray-900 */
    border-top-color: rgba(255,255,255,.08) !important;
  }
  .theme-dark #site-footer .text-muted,
  .theme-dark #site-footer .small{ color: rgba(255,255,255,.65) !important; }
  .theme-dark #site-footer .footer-link{ color: rgba(255,255,255,.65); }
  .theme-dark #site-footer .footer-link:hover{ color: #fff; }
  .theme-dark #site-footer hr{ border-top-color: rgba(255,255,255,.08); }
  .theme-dark #site-footer .footer-newsletter .form-control{
    background: #1f2937; /* gray-800 */
    color: rgba(255,255,255,.9);
    box-shadow: 0 0 0 1px rgba(255,255,255,.08);
  }
  .theme-dark #site-footer .footer-newsletter .form-control::placeholder{
    color: rgba(255,255,255,.55);
  }

  /* Hero Section */
        .hero-section {
            background: linear-gradient(135deg, #F8F6F3 0%, #FFFFFF 100%);
            padding: 100px 0 80px;
            position: relative;
            overflow: hidden;
        }
        
        .hero-section::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -10%;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(217, 27, 117, 0.08) 0%, transparent 70%);
            border-radius: 50%;
            animation: float 20s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-30px); }
        }
        
        .hero-content {
            position: relative;
            z-index: 2;
        }
        
        .hero-title {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            line-height: 1.2;
            animation: fadeInUp 0.8s ease;
        }
        
        .hero-subtitle {
            font-size: 1.25rem;
            color: #666666;
            margin-bottom: 2rem;
            max-width: 600px;
            animation: fadeInUp 0.8s ease 0.2s backwards;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .hero-stats {
            display: flex;
            gap: 3rem;
            margin-top: 3rem;
            animation: fadeInUp 0.8s ease 0.4s backwards;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: #D91B75;
            display: block;
            margin-bottom: 0.5rem;
        }
        
        .stat-label {
            font-size: 0.95rem;
            color: #666666;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        /* Story Section */
        .story-section {
            padding: 100px 0;
        }
        
        .section-subtitle {
            color: #D91B75;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 2px;
            font-size: 0.875rem;
            margin-bottom: 1rem;
        }
        
        .section-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: #1A1A1A;
            margin-bottom: 2rem;
            line-height: 1.3;
        }
        
        .story-text {
            font-size: 1.125rem;
            line-height: 1.8;
            color: #666666;
            margin-bottom: 1.5rem;
        }
        
        .story-image {
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
            position: relative;
            height: 500px;
            background: linear-gradient(135deg, #F8F6F3 0%, #E8E6E3 100%);
        }
        
        .story-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
        
        .story-image:hover img {
            transform: scale(1.05);
        }
        
        /* Values Section */
        .values-section {
            background: #F8F6F3;
            padding: 100px 0;
        }
        
        .value-card {
            background: white;
            border-radius: 16px;
            padding: 2.5rem;
            height: 100%;
            transition: all 0.4s ease;
            border: 2px solid transparent;
        }
        
        .value-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            border-color: #D91B75;
        }
        
        .value-icon {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
            margin-bottom: 1.5rem;
            transition: all 0.4s ease;
        }
        
        .value-card:hover .value-icon {
            transform: rotate(5deg) scale(1.1);
        }
        
        .icon-sustainability {
            background: linear-gradient(135deg, #10B981, #059669);
        }
        
        .icon-quality {
            background: linear-gradient(135deg, #D91B75, #E94A8F);
        }
        
        .icon-innovation {
            background: linear-gradient(135deg, #1E40AF, #1E3A8A);
        }
        
        .icon-community {
            background: linear-gradient(135deg, #F59E0B, #D97706);
        }
        
        .value-title {
            
            font-size: 1.5rem;
            font-weight: 700;
            color: #1A1A1A;
            margin-bottom: 1rem;
        }
        
        .value-description {
            color: #666666;
            line-height: 1.7;
        }
        
        /* Team Section */
        .team-section {
            padding: 100px 0;
        }
        
        .team-member {
            text-align: center;
            margin-bottom: 2rem;
        }
        
        .member-photo {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            margin: 0 auto 1.5rem;
            overflow: hidden;
            border: 4px solid #F8F6F3;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.4s ease;
            background: linear-gradient(135deg, #F8F6F3 0%, #E8E6E3 100%);
        }
        
        .member-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
        
        .team-member:hover .member-photo {
            border-color: #D91B75;
            transform: translateY(-5px);
        }
        
        .team-member:hover .member-photo img {
            transform: scale(1.1);
        }
        
        .member-name {
            
            font-size: 1.5rem;
            font-weight: 700;
            color: #1A1A1A;
            margin-bottom: 0.5rem;
        }
        
        .member-role {
            color: #D91B75;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        
        .member-bio {
            color: #666666;
            line-height: 1.6;
            max-width: 300px;
            margin: 0 auto;
        }
        
        /* CTA Section */
        .cta-section {
            background: linear-gradient(135deg, #D91B75, #E94A8F);
            padding: 80px 0;
            position: relative;
            overflow: hidden;
        }
        
        .cta-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -10%;
            width: 400px;
            height: 400px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            animation: float 15s ease-in-out infinite;
        }
        
        .cta-content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: white;
        }
        
        .cta-title {
            
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
        }
        
        .cta-description {
            font-size: 1.25rem;
            margin-bottom: 2rem;
            opacity: 0.95;
        }
        
        .btn-cta {
            background: white;
            color: #D91B75;
            padding: 1rem 3rem;
            border-radius: 50px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            border: none;
            transition: all 0.3s ease;
            display: inline-block;
            text-decoration: none;
        }
        
        .btn-cta:hover {
            background: #1A1A1A;
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        /* Section Header */
        .section-header {
            margin-bottom: 3rem;
        }
        
        .section-title {
            font-family: 'Playfair Display', serif;
            font-size: 2.5rem;
            font-weight: 700;
            color: #1A1A1A;
            margin-bottom: 0;
        }
        
        /* Product Card */
        .product-card {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            height: 100%;
            display: flex;
            flex-direction: column;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            position: relative;
        }
        
        .product-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
        }
        
        /* Product Image Container */
        .product-image-container {
            position: relative;
            width: 100%;
            padding-top: 100%; /* 1:1 Aspect Ratio */
            overflow: hidden;
            background: #F8F8F8;
        }
        
        .product-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .product-card:hover .product-image {
            transform: scale(1.08);
        }
        
        /* Top Rated Badge */
        .badge-top-rated {
            position: absolute;
            top: 16px;
            left: 16px;
            background: #D91B75;
            color: white;
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            z-index: 10;
            animation: slideInLeft 0.5s ease;
        }
        
        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        /* Product Info */
        .product-info {
            padding: 1.5rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .product-title {
            font-size: 1.125rem;
            font-weight: 700;
            color: #1A1A1A;
            margin-bottom: 0.5rem;
            line-height: 1.4;
        }
        
        .product-category {
            font-size: 0.875rem;
            color: #666666;
            margin-bottom: 1rem;
        }
        
        /* Price Section */
        .product-price-section {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-top: auto;
        }
        
        .product-price {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1A1A1A;
        }
        
        .product-price.sale {
            color: #D91B75;
        }
        
        .product-price-old {
            font-size: 1rem;
            color: #666666;
            text-decoration: line-through;
        }
        
        /* Rating */
        .product-rating {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }
        
        .stars {
            display: flex;
            gap: 2px;
        }
        
        .star {
            color: #FFA500;
            font-size: 0.875rem;
        }
        
        .rating-text {
            font-size: 0.875rem;
            color: #666666;
        }
        
        /* Quick View Button */
        .quick-view-btn {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            background: white;
            color: #1A1A1A;
            border: none;
            padding: 12px 28px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.875rem;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            cursor: pointer;
            z-index: 10;
        }
        
        .product-card:hover .quick-view-btn {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }
        
        .quick-view-btn:hover {
            background: #D91B75;
            color: white;
        }
        
        /* Image Overlay on Hover */
        .product-image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.1);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .product-card:hover .product-image-overlay {
            opacity: 1;
        }
        
        /* Responsive Grid */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
        }
        
        @media (max-width: 1200px) {
            .product-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .product-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .product-info {
                padding: 1.25rem;
            }
        }
        
        @media (max-width: 576px) {
            .product-grid {
                grid-template-columns: 1fr;
            }
            
            .product-price {
                font-size: 1.25rem;
            }
        }
        
        /* Animation Delays */
        .product-card:nth-child(1) {
            animation: fadeInUp 0.6s ease 0.1s backwards;
        }
        
        .product-card:nth-child(2) {
            animation: fadeInUp 0.6s ease 0.2s backwards;
        }
        
        .product-card:nth-child(3) {
            animation: fadeInUp 0.6s ease 0.3s backwards;
        }
        
        .product-card:nth-child(4) {
            animation: fadeInUp 0.6s ease 0.4s backwards;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Section Header */
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2.5rem;
        }
        
        .section-title {
            font-family: 'Playfair Display', serif;
            font-size: 2.5rem;
            font-weight: 700;
            color: #1A1A1A;
            margin-bottom: 0;
        }
        
        .browse-all-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: #4A90E2;
            font-weight: 600;
            font-size: 1.125rem;
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .browse-all-link::after {
            content: '→';
            font-size: 1.25rem;
            transition: transform 0.3s ease;
        }
        
        .browse-all-link:hover {
            color: #3A7BC8;
            text-decoration: none;
        }
        
        .browse-all-link:hover::after {
            transform: translateX(5px);
        }
        
        /* Categories Grid */
        .categories-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
        }
        
        /* Category Card */
        .category-card {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            height: 360px;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        
        .category-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }
        
        /* Category Image */
        .category-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .category-card:hover .category-image {
            transform: scale(1.1);
        }
        
        /* Category Overlay */
        .category-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100%);
            transition: background 0.4s ease;
        }
        
        .category-card:hover .category-overlay {
            background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
        }
        
        /* Category Content */
        .category-content {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 2rem;
            z-index: 10;
        }
        
        .category-title {
            font-family: 'Playfair Display', serif;
            font-size: 2rem;
            font-weight: 700;
            color: white;
            margin: 0;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease;
        }
        
        .category-card:hover .category-title {
            transform: translateY(-5px);
        }
        
        /* Category Description (appears on hover) */
        .category-description {
            color: white;
            font-size: 0.95rem;
            line-height: 1.5;
            margin-top: 0.75rem;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.4s ease;
        }
        
        .category-card:hover .category-description {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Shop Now Link */
        .shop-now {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: white;
            font-weight: 600;
            font-size: 0.9rem;
            text-decoration: none;
            margin-top: 1rem;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.4s ease 0.1s;
        }
        
        .category-card:hover .shop-now {
            opacity: 1;
            transform: translateY(0);
        }
        
        .shop-now::after {
            content: '→';
            transition: transform 0.3s ease;
        }
        
        .shop-now:hover {
            color: white;
            text-decoration: none;
        }
        
        .shop-now:hover::after {
            transform: translateX(4px);
        }
        
        /* Responsive Design */
        @media (max-width: 1200px) {
            .categories-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        @media (max-width: 992px) {
            .categories-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .category-card {
                height: 320px;
            }
        }
        
        @media (max-width: 768px) {
            .section-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .categories-grid {
                gap: 1rem;
            }
            
            .category-card {
                height: 280px;
            }
            
            .category-title {
                font-size: 1.75rem;
            }
        }
        
        @media (max-width: 576px) {
            .categories-grid {
                grid-template-columns: 1fr;
            }
            
            .category-card {
                height: 300px;
            }
        }
        
        /* Animation on Load */
        .category-card {
            animation: fadeInUp 0.6s ease backwards;
        }
        
        .category-card:nth-child(1) {
            animation-delay: 0.1s;
        }
        
        .category-card:nth-child(2) {
            animation-delay: 0.2s;
        }
        
        .category-card:nth-child(3) {
            animation-delay: 0.3s;
        }
        
        .category-card:nth-child(4) {
            animation-delay: 0.4s;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Promo Banner Container */
        .promo-banner {
            background: linear-gradient(135deg, #4A72B8 0%, #5B82C8 100%);
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(74, 114, 184, 0.25);
            position: relative;
            min-height: 500px;
        }
        
        /* Background Pattern */
        .promo-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
            pointer-events: none;
        }
        
        /* Content Container */
        .promo-content {
            position: relative;
            z-index: 2;
            padding: 80px 60px;
        }
        
        /* Badge */
        .promo-badge {
            display: inline-block;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 0.875rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 2rem;
            animation: fadeInDown 0.8s ease;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        /* Main Heading */
        .promo-title {
            font-family: 'Playfair Display', serif;
            font-size: 3.5rem;
            font-weight: 800;
            color: white;
            line-height: 1.2;
            margin-bottom: 1.5rem;
            animation: fadeInUp 0.8s ease 0.2s backwards;
        }
        
        /* Description */
        .promo-description {
            font-size: 1.25rem;
            color: rgba(255, 255, 255, 0.95);
            line-height: 1.7;
            margin-bottom: 2.5rem;
            max-width: 600px;
            animation: fadeInUp 0.8s ease 0.4s backwards;
        }
        
        .promo-description strong {
            font-weight: 700;
        }
        
        /* CTA Button */
        .promo-btn {
            display: inline-block;
            background: white;
            color:#4A72B8;
            padding: 18px 40px;
            border-radius: 12px;
            font-size: 1.125rem;
            font-weight: 700;
            text-decoration: none;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
            animation: fadeInUp 0.8s ease 0.6s backwards;
            border: 2px solid transparent;
        }
        
        .promo-btn:hover {
            background: rgba(255, 255, 255, 0.95);
            transform: translateY(-4px);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
            color: #3A5A95;
            text-decoration: none;
        }
        
        .promo-btn:active {
            transform: translateY(-2px);
        }
        
        /* Image Container */
        .promo-image-container {
            position: relative;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
        }
        
        .promo-image-wrapper {
            position: relative;
            width: 100%;
            max-width: 600px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            animation: fadeInRight 1s ease 0.4s backwards;
        }
        
        .promo-image-wrapper::before {
            content: '';
            display: block;
            padding-top: 75%; /* 4:3 aspect ratio */
        }
        
        .promo-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
        
        .promo-image-wrapper:hover .promo-image {
            transform: scale(1.05);
        }
        
        /* Decorative Elements */
        .promo-decoration {
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
            pointer-events: none;
            animation: float 8s ease-in-out infinite;
        }
        
        .decoration-1 {
            top: -100px;
            left: -100px;
        }
        
        .decoration-2 {
            bottom: -150px;
            right: -150px;
            animation-delay: -4s;
        }
        
        /* Animations */
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-20px);
            }
        }
        
        /* Responsive Design */
        @media (max-width: 992px) {
            .promo-content {
                padding: 60px 40px;
            }
            
            .promo-title {
                font-size: 2.75rem;
            }
            
            .promo-description {
                font-size: 1.125rem;
            }
            
            .promo-image-container {
                padding: 40px 20px;
                margin-top: 40px;
            }
        }
        
        @media (max-width: 768px) {
            .promo-banner {
                border-radius: 16px;
                min-height: auto;
            }
            
            .promo-content {
                padding: 40px 30px;
            }
            
            .promo-title {
                font-size: 2.25rem;
            }
            
            .promo-description {
                font-size: 1rem;
                margin-bottom: 2rem;
            }
            
            .promo-btn {
                padding: 16px 32px;
                font-size: 1rem;
                width: 100%;
                text-align: center;
            }
            
            .promo-image-container {
                padding: 30px 20px;
                margin-top: 20px;
            }
        }
        
        @media (max-width: 576px) {
            .promo-content {
                padding: 30px 24px;
            }
            
            .promo-badge {
                font-size: 0.75rem;
                padding: 10px 20px;
                margin-bottom: 1.5rem;
            }
            
            .promo-title {
                font-size: 1.875rem;
            }
            
            .promo-description {
                font-size: 0.95rem;
            }
        }
        
        /* Full-width container adjustment */
        .container-fluid.promo-container {
            padding: 0 20px;
        }
        
        @media (min-width: 1400px) {
            .container-fluid.promo-container {
                padding: 0 60px;
            }
        }