/* ==============================
   Base Layout
============================== */
body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: #F8F8F8;
    color: #111;
    overflow-x:hidden;
}
/* === Prevent scroll when open === */
body.no-scroll {
    overflow: hidden !important;
}
.container {
    max-width: calc(100vw - 16rem);
    /*max-width: 1400px;*/
    margin: 0 auto;
    padding: 0 20px;
}
.gallery-items {
    row-gap: 2rem;
    -moz-column-gap: 2rem;
    column-gap: 2rem;
    grid-auto-rows: 1fr;
}

.grid {
    display: grid;
}
.row-contained-h3Y {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: calc(100vw - 32rem);
    width: 100%;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* stays above other elements */
    background: #fff; /* same background as the header */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}
.site-header.scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background: #fff;
}
.site-main {
    max-width: 2500px;
    margin-left: auto;
    margin-right: auto;
    padding-inline: clamp(16px, calc(3vw + 20px), 100px);
    margin-top:80px;
}
.header-inner {
    display: grid;
    grid-template-columns: 15% 70% 15%; /* left / center / right */
    align-items: center;
    justify-content: space-between;
    position: relative;
    max-width:calc(100vw - 8rem);
    margin: 0 auto;
    padding-top:20px;
    padding-bottom:10px;
    padding-left:10px;
    padding-right:10px;
    height:80px;
}

.header-left {
    display: flex;
    flex-direction: column;  /* stack vertically: search box, then hamburger */
    align-items: flex-start; /* align to left */
    gap: 8px;
}
/* Search box */
.header-search {
    display: flex;
    justify-content: flex-start; /* align to left */
    margin-bottom: 4px;
}

.search-box {
    width: 220px;
    max-width: 100%;
}

.brand {
    position: static;
    justify-self: center; /* centers logo in middle column */

    transform: none;
    display:block;
    min-height:60px;
}

.brand a {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    letter-spacing: 2px;
    text-decoration: none;
    color: #000;
}
/* Centered logo */
.brand img.logo-center {
    height: 60px;
    max-width: 200px;
    display: block;
}
.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    flex: 1;
    gap: 15px;
}
.cart-icon {
    font-size: 18px;
    color:black;
    cursor:pointer;
}
.cart-icon :hover {
    
    color:black;
    cursor:pointer;
}

.trade-link {
    font-size: 12px;
    color:black;
    cursor:pointer;
}
.trade-link:hover {
    font-size: 12px;
    color:black;
    cursor:pointer;
    text-decoration:none;
}
.user-dropdown {
    position: absolute;
    top: 40px;
    right: 0;
    background: white;
    box-shadow: 0 5px 20px rgba(0,0,0,.15);
    display: none;
    min-width: 180px;
    z-index: 2000;
}
.user-dropdown.show {
    display: block;
}

.user-dropdown a {
    display: block;
    padding: 12px;
    text-decoration: none;
    color: black;
}

.user-dropdown a:hover {
    background: #f6f6f6;
}
.btn-header {
    background: none !important;
    border: none !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    cursor: pointer;
    color: #111 !important;
    padding: 6px 10px !important;
}

.btn-header:hover {
    color: #111 !important;
    background: transparent !important;
}
/* === Hamburger Icon === */
/* Hamburger + “Menu” text */
.header-menu-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.hamburger-menu {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #000;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
}

.hamburger-menu i {
    font-size: 20px;
    margin-right: 5px;
}
@media (max-width: 1265px) {
    .header-search,
    .header-right {
        display: none;
    }
    .header-inner
    {
        grid-template-columns: 15% 70% 15%;
        padding-bottom:30px;
        
    }
    .brand img.logo-center {
        height: 50px;
    }
    .main-menu .dxm-item,
.main-menu .dxm-content,
.main-menu .dxm-separator,
.main-menu .dxm-spacing,
.main-menu .dxm-subMenuBorderCorrector
.main-menu .dxm-subMenu .dxm-item {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.8rem !important;
    color: #111 !important;
    background: none !important;
    border: none !important;
    
}
}
.menu-text {
    font-weight: 500;
}
.dx-icon {
    font-family: "dxicons";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* === Slide Menu (White Theme) === */
.slide-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transform: translateY(-100%);
    transition: transform 0.4s ease-in-out;
    z-index: 9999;
    overflow-y: auto;
}

.slide-menu.active {
    transform: translateY(0);
}

/* Close button */
.master-side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F8F8F8;
    transform: translateX(-100%); /* hidden by default */
    transition: transform 0.4s ease;
    z-index: 9999;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.master-side-menu.active {
   transform: translateX(0); /* slide in */
}
/* DevExpress side menu area */
.master-side-menu .slide-menu-content {
    padding: 20px 40px;
}

.master-side-menu .dxm-vertical {
    border: none;
    background: none;
}
/* Slide menu inner content */
.slide-menu-content {
    display: grid;
    grid-template-columns: 320px 1fr; 
    gap: 40px;
    padding: 0 40px 40px 40px;
}
/* Logo centered at top */
.slide-menu-brand {
    text-align: center;
    margin: 20px 0 40px 0;
}
.slide-menu-brand img {
    height: 60px;
    max-width: 200px;
}
.close-menu {
    font-size: 32px;
    cursor: pointer;
    color: #000;
}
.close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 32px;
    color: #000;
    cursor: pointer;
}

.close-btn:hover {
    color: #000;
}
/* === Image Grid === */
.slide-menu-images {
    display: grid !important;
    grid-template-columns: repeat(3, 3fr); /* 3 columns */
    gap: 20px;
    align-items: start;
}

.menu-image-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease;
    text-decoration: none;
}

.menu-image-item:hover {
    transform: scale(1.03);
}

.menu-image-item img {
    width: 350px;
    height: 260px;
    object-fit: cover;
    border-radius: 8px;
}

.menu-image-caption {
    position: absolute;
    bottom: 12px;
    left: 15px;
    font-size: 18px;
    color: white;
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 12px;
    border-radius: 4px;
}
.slide-menu-nav {
    width: 320px;
}
.side-devexpress-menu {
    border: none;
    background: none;
    text-align: center;
    width: 100%;
}
.side-devexpress-menu ul {
    padding: 0;
    margin: 0;
    width: 100%;
}
.side-devexpress-menu.dxm-main.dxm-vertical {
    background: none;
    border: none;
    width:100%
}
.side-devexpress-menu .dxmVerticalItem {
    font-size: 22px;
    font-weight: 500;
    padding: 12px 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

.side-devexpress-menu .dxmVerticalItem .dxmExpandSign {
    font-size: 20px;
    margin-left: 10px;
    font-weight: bold;
}

/* Submenu hidden by default */
.side-devexpress-menu .dxmVerticalItem.dxmHasItems .dxmItems {
    display: none;
}
.side-devexpress-menu .dxm-item {
    padding: 14px 0;
    font-size: 22px;
    font-weight: 500;
    cursor: pointer;
    
}
.side-devexpress-menu .dxmVerticalItem.open .dxmItems {
    display: block;
}

.side-devexpress-menu .dxmItems .dxmVerticalItem a {
    font-size: 18px;
    padding-left: 15px;
}
.side-devexpress-menu .dxm-content {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    width: auto;
    white-space: nowrap;
}

/* Menu text */
.side-devexpress-menu .dxm-contentText {
    font-family: "Playfair Display", serif;
    color: #000;
}
.side-devexpress-menu .dxnb-expand-btn {
    font-size: 18px;
}

.side-devexpress-menu .dxnb-group.dxnb-expanded .dxnb-expand-btn::after {
    content: "−";
}

.side-devexpress-menu .dxnb-group .dxnb-expand-btn::after {
    content: "+";
}
/* ===== REMOVE DEVEXPRESS ARROW ===== */
.side-devexpress-menu .dxm-popOut img {
    display: none;
}

/* ===== + / − ICON ===== */
#slideMenu .side-devexpress-menu .dxm-item.dxm-subMenu > .dxm-content::after {
    content: "+";
    font-size: 26px;
    font-weight: 300;
    margin-left: 8px;
    line-height: 1;
}

#slideMenu .side-devexpress-menu .dxm-item.dxm-subMenu.open > .dxm-content::after {
    content: "−";
}
#slideMenu .dxm-subMenu > .dxm-content,
#slideMenu .dxm-subMenu > a.dxm-content {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-right: 0 !important;
    background: none !important;
}

/* plus sign */
#slideMenu .dxm-subMenu > .dxm-content::after,
#slideMenu .dxm-subMenu > a.dxm-content::after {
    content: "+";
    font-size: 18px;
    margin-left: 4px;
}

/* minus when expanded */
#slideMenu .dxm-subMenu.dxm-expanded > .dxm-content::after,
#slideMenu .dxm-subMenu.dxm-expanded > a.dxm-content::after {
    content: "−";
}
/* ===== INLINE SUBMENU (ONLY slide menu) ===== */
#slideMenu .dxm-popup {
    position: static !important;
    display: none;
    box-shadow: none;
    background: none;
    margin: 0;
    padding: 0;
}

/* Show submenu when open */
#slideMenu .dxm-item.dxm-subMenu.open + .dxm-popup {
    display: block !important;
}

/* ===== SUBMENU ITEMS ===== */
#slideMenu .dxm-popup .dxm-item {
    padding: 10px 0 10px 20px;
    font-size: 18px;
    font-weight: 400;
    border-bottom: none;
}

/* Remove float clears */
#slideMenu .dx-clear {
    display: none;
}
/* Disable ALL hover / active / focus styles */
#slideMenu .side-devexpress-menu .dxm-item:hover,
#slideMenu .side-devexpress-menu .dxm-item.dxm-hovered,
#slideMenu .side-devexpress-menu .dxm-content:hover,
#slideMenu .side-devexpress-menu .dxm-content:focus,
#slideMenu .side-devexpress-menu .dxm-content:active {
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    color: inherit !important;
}

/* Prevent DevExpress hover class from styling */
#slideMenu .side-devexpress-menu .dxm-hovered {
    background: none !important;
    position: static !important;
    top: auto !important;
}

/* Prevent anchor hover color change */
#slideMenu .side-devexpress-menu a:hover {
    color: inherit !important;
    text-decoration: none;
    border-width:0px;
}
#slideMenu .side-devexpress-menu * {
    transition: none !important;
}
.side-devexpress-menu *:hover {
    background: transparent !important;
    color: inherit !important;
}
#slideMenu .dxm-popOut,
#slideMenu .dxm-pImage {
    display: none !important;
}

/* ===========================
   NAVBAR – REMOVE EVERYTHING
   =========================== */
.side-nav-clean .dxnb-ghtext {
    font-family: baskerville-display-pt, serif;
    font-size: 2rem;  /* parent font size */
    color: #0E0E0E;         /* parent text color */
    font-weight: 400;    /* optional: slightly bolder */
}

/* Children font size and color */
.side-nav-clean .dxnb-item .dxnb-link span {
    font-family: baskerville-display-pt, serif;
    font-size: 1.4rem;  /* children font size */
    color: gray;         /* children text color */
    font-weight: 300;    /* normal weight */
}

/* Optional: hover effect for children */
.side-nav-clean .dxnb-item .dxnb-link:hover span {
    color: #333; /* darker gray on hover */
}
#nbSideNav.dxnbLite {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    
}
#nbSideNav .dxnb-gr,
#nbSideNav .dxnb-header,
#nbSideNav .dxnb-headerCollapsed {
    background: transparent;
    border: none;
}

#nbSideNav .dxnb-content {
    margin-left: 20px;
    background: transparent;
    border: none;
    padding: 0;
}
#nbSideNav .dxnb-item {
    background: transparent; /* no background */
    border: none;           /* no border */
}
#nbSideNav .dxnb-gr {
    overflow: visible; /* must allow children to show */
}

#nbSideNav .dxnb-btn {
    margin-right: 5px;
    vertical-align: middle;
}

#nbSideNav .dxnb-ghtext {
    vertical-align: middle;
    display: inline-block;
    background: none;
    border: none;
    padding: 0;
}

/* === ASPxMenu (Bottom Links) === */
.side-menu {
    background: transparent !important;
    color: #000 !important;
    text-align: left;
    padding: 20px 40px;
    font-size: 17px;
    width: 100%;
}

.side-menu a {
    color: #000 !important;
    text-decoration: none !important;
    display: block;
    padding: 10px 0;
    transition: color 0.2s;
}

.side-menu a:hover {
    color: #64877f !important;
}

/* === Responsive Styles === */
@media (max-width: 993px) {
    .hamburger-menu {
        display: flex !important;
    }

    .slide-menu-images {
        grid-template-columns: 1fr 1fr;
        padding: 20px;
    }

    .menu-image-item img {
        height: 180px;
    }
}

@media (max-width: 768px) {
    .slide-menu-images {
        grid-template-columns: 1fr;
        padding: 15px;
    }

    .menu-image-item img {
        height: 160px;
    }

    .menu-image-caption {
        font-size: 16px;
    }
}

/* ==============================
   Main Menu
============================== */
.menu-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    border-top: 0px solid #f0f0f0;
}

.main-menu {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    text-align: center;
    width: 100%;
}

.main-menu .dxm-horizontal {
    display: flex !important;
    justify-content: center;
    width: 100%;
}

.main-menu .dxm-item,
.main-menu .dxm-content,
.main-menu .dxm-separator,
.main-menu .dxm-spacing,
.main-menu .dxm-subMenuBorderCorrector
.main-menu .dxm-subMenu .dxm-item {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 450 !important;
    font-size: 1rem !important;
    color: #111 !important;
    background: none !important;
    border: none !important;
    
}

/* Remove hover color and background */
.main-menu .dxm-item.dxm-hovered,
.main-menu .dxm-item.dxm-selected,
.main-menu .dxm-item.dxm-focused,
.main-menu .dxm-item.dxm-pressed,
.dxm-subMenu .dxm-item.dxm-hovered,
.dxm-subMenu .dxm-item.dxm-selected,
.dxm-subMenu .dxm-item.dxm-focused,
.dxm-subMenu .dxm-item.dxm-pressed {
    background: transparent !important;
    border: none !important;
    color: #111 !important;
    box-shadow: none !important;
}

/* Remove link hover color */
.dxm-content a,
.dxm-content a:hover,
.dxm-content a:focus,
.dxm-content a:active {
    color: inherit !important;
    border: none !important;
    text-decoration: none !important;
}

.main-menu .dxm-content {
    padding: 12px 24px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
}

/* Submenu toggle +/× */
.submenu-toggle {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    margin-left: 6px;
    color: #000;
    font-size: 18px;
    position: relative;
    top: -1px;
    transition: transform 0.2s ease, color 0.2s ease;
}
.dxm-item:hover .submenu-toggle {
    transform: scale(1.1);
    color: #666;
}
.dxmLite .dxm-popup {
    color: inherit !important;
    border: none !important;
}
.dxm-popup,
.dxm-subMenu,
.dxmLite,
.dxm-horizontal .dxm-main {
    overflow: visible !important;
}

/*---- page title -----*/
/* === BREADCRUMB TOOLBAR CONTAINER === */
.breadcrumb-toolbar-wrapper {
  width: 100%;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  background-color: #f8f8f8;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 1rem;
  min-height: 8rem;
}

/* === INNER CONTAINER === */
.breadcrumb-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 1200px;
}

/* === BREADCRUMB LINKS === */
.breadcrumb-links {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  color: #555;
}

.breadcrumb-links a {
  text-decoration: underline;
  color: #555;
  font-weight: 400;
  transition: color 0.3s ease;
}

.breadcrumb-links a:hover {
  color: #000;
}

.breadcrumb-links span {
  margin: 0 5px;
  color: #999;
}

.breadcrumb-links .current {
  color: #000;
  font-weight: 400;
  text-decoration: none;
  text-align:left;
}
.breadcrumb_container{
    align-content: center;
    justify-content:center;
    width:100%;
    margin-left:50px;
    text-align:center;
    color: #666;
    
}
.breadcrumb_collection {
   font-size: 12px;
    color: #666;
    margin-bottom: 10px;
}
.breadcrumb_collection span {
    margin: 0 4px;
}
.breadcrumb_collection a {
    color: #666;
    text-decoration: underline;
}
.breadcrumb_collection .current {
    color: #333;
    font-weight: 600;
}
.breadcrumb_general {
   font-size: 12px;
    color: #666;
    margin-bottom: 10px;
    text-align:center;
}
.breadcrumb_general span {
    margin: 0 4px;
}
.breadcrumb_general a {
    color: #666;
    text-decoration: underline;
}
.breadcrumb_general .current {
    color: #333;
    font-weight: 600;
}
/* === PAGE TITLE === */
.page-title {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 2.5rem;
  font-weight: 400;
  color: #111;
  margin-bottom: 1rem;
  letter-spacing: 0.5px;
}

/* === RESPONSIVE ADJUSTMENTS === */
@media (max-width: 768px) {
  .breadcrumb-toolbar-wrapper {
    padding: 2rem 1rem;
    min-height: 10rem;
  }

  .breadcrumb-links {
    font-size: 0.85rem;
    margin-bottom: 1rem;
  }

  .page-title {
    font-size: 1.65rem;
  }
}

@media (max-width: 480px) {
  .breadcrumb-links span {
    display: none; /* Hide the pipes on very small screens for simplicity */
  }

  .breadcrumb-links a,
  .breadcrumb-links .current {
    margin-right: 0.5rem;
  }
}
/* Banner Image */
.collection-header {
    width: 100vw;               /* full viewport width */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    background: #000;           /* optional fallback background */
}

.collection-banner-wrapper {
    position: relative;
    
}
/* ------------------------------------------
   RIGHT SIDE: CENTERED SQUARE BANNER IMAGE
------------------------------------------- */
.collection-banner-test {
    width: 600px;      /* adjust to fit your design */
    height: 480px;     /* square like Feizy */
    z-index: 2;
    
    display: block;
}
.collection-banner-img {
    width: 100%;
    max-height: 500px;
    object-fit: cover; /* Feizy look */
    display: block;
}
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45); /* Feizy darkness */
    z-index: 1;
}
/* Text Overlay Container */
.banner-content {
    position: absolute;
   
    left: 60px;
    bottom:40px;               /* adjust if needed */
    z-index: 999;
    width: 580px;
    background-color:ghostwhite;
    opacity:0.8;
    padding: 30px 28px;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}
/* Collection Title + Description */
.collection-details {
    max-width: 900px;
    margin: 0 auto 30px auto;
    text-align: center;
}

.collection-title {
    font-family: azo-sans-web, sans-serif;
    font-size: 1rem;
   
    color: #0E0E0E;
    text-transform: capitalize;
    line-height:2rem;
    text-align:center;
    letter-spacing: 1.12px;
}

.collection-description {
    max-width: 750px;
    font-size: 13px;
    color: #0E0E0E;
    line-height: 1.6;
    margin-top: 10px;
    font-family: azo-sans-web, sans-serif;
}
/* Footer */
.site-footer {
  background: #111;
  color: #eee;
  padding: 60px 20px 30px;
  font-family: Arial, sans-serif;
}

.site-footer a {
  color: #eee;
  text-decoration: none;
}
.site-footer a:hover {
  color: #fff;
}

.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.footer-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-section {
  flex: 1 1 200px;
}

.footer-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  text-transform: uppercase;
  color: #fff;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li {
  margin-bottom: 8px;
}
.footer-links li a {
  font-size: 14px;
  color: #ccc;
}

.footer-newsletter p {
  font-size: 14px;
  color: #ccc;
  margin-bottom: 12px;
}
.newsletter-form {
  display: flex;
  gap: 8px;
}
.newsletter-form input[type="email"] {
  flex: 1;
  padding: 10px;
  font-size: 14px;
  border: none;
  border-radius: 4px;
}
.newsletter-form button {
  padding: 10px 16px;
  background: #444;
  color: #eee;
  font-size: 14px;
  border: none;
  cursor: pointer;
}
.newsletter-form button:hover {
  background: #555;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #333;
  padding-top: 20px;
  font-size: 14px;
  color: #777;
}

.social-links a {
  margin-right: 16px;
  font-size: 14px;
  color: #eee;
}
.social-links a:hover {
  color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-sections {
    flex-direction: column;
  }
  .footer-bottom {
    text-align: center;
  }
  .social-links {
    margin-bottom: 12px;
  }
}

/* Menu */
#ASPxMenu1 {
    width: 100vw;
}
.custom-submenu {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100vw; /* full page width */
    background: #f4f4f4;
    border-top: 1px solid #d3d3d3;
    
    box-sizing: border-box;   /* Include padding in width */
    z-index: 1000;
    gap: 25px;
    min-height: 80px;
    top: 100%;           /* below top menu */
    left: 0;
}


.horizontal-submenu-wrapper {
    position: absolute;
    top: 100%;           /* below top menu */
    left: 0;
    width: 100vw;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 20px;
    background: #f4f4f4;
    border-top: 1px solid #d3d3d3;
    padding: 15px 20px;
    z-index: 1000;
}


.custom-submenu a {
    margin: 0 20px;
    text-decoration: none;
    color: #111;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
}

.custom-submenu a:hover {
    color: #111;
}
.submenu-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.submenu-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.submenu-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
}

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

.submenu-text:hover {
    color: #0078d7;
}
.submenu-link {
    font-weight: 600;
    color: #333;
    text-decoration: none;
    padding: 5px 10px;
}

.submenu-item-new {
    position: relative; /* important for absolute positioning of level 3 */
}
/* icon template layout */
.iconlist-submenu {
    width: 100%;
    background: black;
}
.iconlist-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    height: 70px;
    gap: 40px;
}
.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
}
.icon-image {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 4px;
}
.icon-title {
    font-size: 13px;
    color: white;
    text-align: center;
    font-weight: 400;
}
.icon-item:hover .icon-title {
    text-decoration: underline;
}
.level3-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vw;
    display: none;     !important;   /* hidden by default */
    background: black;
    color: white;
    border-top: 1px solid #d3d3d3;
    z-index: 9999;
    padding: 10px 20px;
    min-height:80px;
    align-items: center;
    justify-content: center;
}

/* show level 3 only when parent submenu-item is hovered */
.submenu-item-new:hover > .level3-wrapper {
    display: flex;
   
    gap: 20px;
}
.submenu-item:hover > .level3-wrapper,
.level3-wrapper:hover .collections-level3-wrapper .collections-level3-wrapper:hover{
    display: block !important;
}
.level3-wrapper.show {
    display: block !important;
}

/* === Collections Submenu Layout === */
.collections-submenu {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: white;
    width: 100vw;
    color: #fff;
    padding: 20px 20px;
    box-sizing: border-box;
    gap: 20px;

    height: 250px;
}
.collections-level3-wrapper {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100vw;
    z-index: 1000;
    color: white;
    display: none;  !important;   /* hidden by default */
    background: #000;
    height: 80px;
    
    
}

.submenu-item:hover .collections-level3-wrapper {
    display: block;
    visibility: visible;
    opacity: 1;
}
.collections-level3-wrapper.show {
    display: block !important;
}
.collections-level3-wrapper.active , .collections-level3-wrapper:hover{
    display: block !important;
}
/* ====== Collections Level 3 ====== */
.collections-level3-wrapper .collections-submenu {
    background: #000;
    padding: 20px 20px;
}
/* === SECTION CAPTIONS === */
.collections-left-wrapper,
.collections-right-wrapper {
    display: flex;
    flex-direction: column;
}

.collections-caption {
     font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    text-transform: none;
    margin-bottom: 20px; /* space between caption and grid */
}
/* LEFT SIDE — Featured Collections */
.collections-left {
    flex: 2;
}
.featured-grid {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}
.featured-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.feature-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%; /* 3 columns in total */
    background-color:#F8F8F8;
    border-radius: 1rem;
    min-height: 130px;
}
.feature-column-title {
    font-size: 16px;
    font-weight: 400;
    color: #111;
    margin-bottom: 15px;
    text-align: center;
     text-decoration: none;
     text-transform:none;
}
.feature-images {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.feature-img {
    width: 70px;
    height: 87px;
    object-fit: cover;
    
    border: 0px solid #444;
}

.featured-title {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
}

.featured-title:hover {
    text-decoration: underline;
}

/* RIGHT SIDE — Alphabet Buttons */
.collections-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: flex-end;
}

.alphabet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 30px;
    gap: 5px 5px;
    justify-items: center;
    align-items: center;
}

.alphabet-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f4f4;
    border: 0px solid #d3d3d3;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 14px;
    border-radius: 2rem;
    transition: background 0.2s ease;
    min-height: 28px;
    min-width: 80px;
    cursor: pointer;
}

.alphabet-button:hover {
    background: #64877f;
}
.collections-submenu,
.collections-left,
.collections-right {
    min-height: 100px;
    overflow: visible;
}

/* -----Color ----*/
.dx-color-swiper-wrapper {
    display: none; 
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    background-color: #000;
    padding: 40px 0;
    z-index: 1000;
    overflow: hidden;
    min-height:80px;
}

.submenu-item:hover .dx-color-swiper-wrapper {
    display: block;
}

.dx-color-swiper {
    display: flex;
    align-items: center;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.dx-color-swiper::-webkit-scrollbar {
    display: none;
}

.icon-color-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #fff;
    margin: 0 12px;
    cursor: pointer;
    transition: transform 0.3s;
}

.icon-item:hover .dx-color-circle {
    transform: scale(1.2);
}

.dx-color-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 0px;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.icon-color-title {
    margin-top: 8px;
    font-size: 13px;
    color: #fff;
    text-align: center;
}

.dx-color-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 12px;
    border-radius: 50%;
}

.dx-color-left { left: 10px; }
.dx-color-right { right: 10px; }


/* --- Button list --- */
.dx-buttonlist-wrapper {
    display: flex;
    
    column-gap:0;
    justify-content: center;
    background-color: #000; /* black background */
    padding-top:20px;
    align-content:center;
    text-align:center;
    width: auto;
    
    margin: 0 auto; /* center horizontally inside parent */
}

/* Each button */
.dx-buttonlist-btn {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 25px;
    text-decoration: none;
    text-transform: none; /* keep text as-is */
    color: #000; /* white text */
    font-size: 13px;
    font-weight: 300;
    background-color: white;
    transition: all 0.25s ease;
    white-space: nowrap;
    cursor: pointer;
    min-width:60px;
    text-align:center;
}

/* Hover */
.dx-buttonlist-btn:hover {
    border-color: #64877f;
    background-color: #64877f; /* your requested color */
    color: #fff;
}

/* Optional active/selected state */
.dx-buttonlist-btn.active {
    border-color: #64877f;
    background-color: #64877f;
    color: #fff;
}
.level3-wrapper > * {
    margin: 0 auto; /* ensures all children are centered horizontally */
}

/* === Level 3: Link Grid List (Style submenu) === */
.linkgridlist-level3-wrapper {
   position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #000; /* black background */
    display: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s;
    padding: 20px 40px; /* adjust horizontal padding */
    z-index: 1000;
}

.submenu-item:hover .linkgridlist-level3-wrapper {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* 6-column grid layout */
.dx-linkgridlist-wrapper {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 columns */
    gap: 5px;
    justify-items: start; /* center horizontally */
}

/* Link items */
.dx-linkgridlist-wrapper .dx-linkgridlist-item  {
    display: block;
    text-align: left;
    text-transform: none; /* keep text as-is */
    padding: 8px 5px;
    color: #fff !important; /* force white text */
    text-decoration: none;
    background-color: transparent;
    transition: background-color 0.2s;
    font-size: 13px;
}

.dx-linkgridlist-wrapper .dx-linkgridlist-item:hover{
    color: #64877f;
    border-radius: 4px;
    color: #fff !important; /* keep text white */
}
/* ------Inspiration -----*/
.submenu-level2-img-item {
    position: relative;
    width: 22%;
    overflow: hidden;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.submenu-level2-img-link {
    display: block;
    position: relative;
    text-decoration: none;
    color: #fff;
}

.submenu-level2-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
    border-radius: 10px;
}

.submenu-level2-img-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 12px;
    
    font-weight: 600;
    text-transform: none;
    color: #fff;
    font-size: 1.1rem;
    transition: background 0.3s ease;
}

.submenu-level2-img-link:hover .submenu-level2-img {
    transform: scale(1.05);
    border-radius: 10px;
}

.submenu-level2-img-link:hover .submenu-level2-img-caption {
    
}

/* Keep consistent with your other submenus */
.submenu-level2-item {
    margin: 0 10px;
}
/*--------Fine & Lifestyle menu*/
.categorytype-columns {
    display: grid;
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    gap: 40px;
}

/* Each column */
.categorytype-col-menu h3 {
    font-size: 14px;
    font-weight: 500;
   
    color: #000;
    text-transform: none;
    margin: 0 20px 6px;
    text-decoration: none;
    color: #111;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    
}
.categorytype-col-menu .submenu-link {
    display: block;          /* one link per row */
    line-height: 1.3;        /* tighten line spacing */

    padding: 0;              /* remove extra spacing */
}
.categorytype-col-menu a {
    display: block;
    color: #333;
    font-size: 13px;
    text-decoration: none;
    text-transform: none;
    
}

.categorytype-col-menu a:hover {
    color: #000;
}

/* MOBILE */
@media (max-width: 900px) {
    .fine-level3 {
        position: relative;
        box-shadow: none;
    }

    .categorytype-columns {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .categorytype-col-menu h3 {
        font-size: 16px;
    }
}
/*-----Filter -------*/
/* ===== FILTER BUTTON ===== */
.filter-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #2d2d2d;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.filter-button:hover {
  background-color: #444;
}

/* Optional icon style (Feizy style mimic) */
.dx-icon {
  display: inline-block;
  font-style: normal;
  width: 1em;
  height: 1em;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 24 24"><path d="M3 5h18v2H3zm4 6h10v2H7zm2 6h6v2H9z"/></svg>') no-repeat center;
  background-size: contain;
}

/* ===== OVERLAY ===== */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 900;
    transition: opacity 0.3s ease;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ===== FILTER PANEL ===== */
/* Hidden filter panel */
.filter-panel {
    position: fixed;
    top: 0;
    right: -400px; /* off-screen */
    width: 400px;
    height: 100%;
    background: #fff;
    box-shadow: -5px 0 10px rgba(0, 0, 0, 0.3);
    transition: right 0.4s ease;
    z-index: 1000;
    overflow-y: auto;
    padding: 20px;
}
.filter-panel.active {
  right: 0;
}

/* Header */
.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.filter-header h2 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  text-transform:capitalize;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
}

/* Content */
.filter-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.filter-group {
  margin-bottom: 25px;
}

.filter-group h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #222;
}

.filter-group label {
  display: block;
  margin-bottom: 6px;
  color: #555;
}

.filter-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

/* Apply Button */
.apply-filter-btn {
    background: #c08081;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
}
.apply-filter-btn:hover {
    background: #a86869;
}
.filter-icon {
    position: fixed;
    top: 120px;
    right: 20px;
    z-index: 1001;
    background: #2b2b2b;
    color: white;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.filter-icon:hover {
    background: #555;
}


/* ======== Responsive Adjustments ======== */
@media (max-width: 992px) {
    .dx-buttonlist-wrapper {
        justify-content: center;
        gap: 2px;
        padding: 12px;
    }
    .dx-buttonlist-btn {
        font-size: 13px;
        padding: 7px 12px;
    }
    .header-search
    {
        max-width:200px;
    }
}

@media (max-width: 768px) {
    .dx-buttonlist-wrapper {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding: 10px;
        gap: 4px;
        scroll-behavior: smooth;
    }

    .dx-buttonlist-btn {
        flex-shrink: 0;
        border-radius: 18px;
        padding: 9px 14px;
    }
}

@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Responsive */
/* === RESPONSIVE FIX === */
@media (max-width: 992px) {
    .header-inner {
        flex-direction: row;
        align-items: flex-start;
    }

    .header-left {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-right {
        position: absolute;
        top: 10px;
        right: 20px;
    }

    .menu-wrapper {
        display: none; /* hide full menu on mobile */
    }
}

/* --- COLLECTION CARD --- */
/* --- GRID CONTAINER --- */

.collectionsContainer {

    display: grid;
    grid-template-columns: repeat(3, 3fr);
    justify-items: center;
    align-items: start;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
    gap: clamp(6px, 0vw, 30px);
    row-gap: 24px;

}


/* Some DevExpress versions add wrapper DIVs, this ensures they don't break grid */
.collectionsContainer > div {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}
.collectionsContainer > div,
.collectionsContainer .groupPlaceHolder1,
.collectionsContainer .itemPlaceHolder1 {
    padding: 0 !important;
    margin: 0 !important;
    display: contents;
}
/* --- COLLECTION CARD --- */
/* --- COLLECTION CARD FIXED HEIGHT + STACKED CONTENT --- */
.collection-card {

    position: relative;
    width: 100%;
    max-width: clamp(360px, calc(50px + 25vw), 560px);
    margin-inline: auto; /* centers card inside column */
    height: auto;
    overflow: hidden;
    /*
        
        align-items: center;
        vertical-align:top;
    */
    background: #fff;
    border: 0;
    padding: 0;
    display: grid;
    gap:12px;
    flex-direction: column;
    padding-bottom:20px;
    
    grid-template-rows:auto auto auto auto;
    border-radius: clamp(8px, 1vw, 16px);
   
}
.collection-box
{
    border: 1px solid #ccc;
    border-radius:6px;
    padding:2rem;
    text-align:center;
    display:grid;
    grid-template-rows:subgrid;
}
/*/
.collectionsContainer .collection-card {
    display: grid !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background-color: #fff;
}
    */
.collectionsliderImage {
    width: min(100%, clamp(360px, 28vw, 520px));
    aspect-ratio: 1 / 1;
    height: auto !important;
}
.collectionsliderImage,
.collectionsliderImage .dxis-passePartout,
.collectionsliderImage .dxis-imageArea,
.collectionsliderImage .dxis-slidePanel,
.collectionsliderImage .dxis-item {
    width: 100% !important;
    height: 100% !important;
}
collection-card .dxImageSlider,
.collection-card .collectionsliderImage {
    position: relative;
    background-color: #fff;
    width: 100% ;
    height:560px;
    display: block;
    margin: 0 ;
}

collectionsliderImage .dxis-nbItemsArea {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.collectionsliderImage .dxis-nbBottom {
    display: flex !important;
    justify-content: center !important; /* centers the thumbnails */
    gap: 6px; /* optional spacing between thumbnails */
    padding: 0 !important; /* remove default padding */
    margin: 0 auto; /* ensure container is centered */
}
/* The item wrapper */
.collectionsliderImage .dxis-nbItem,
.collectionsliderImage .dxis-nbItemContent,
.collectionsliderImage .dxis-nbThumb,
.thumb-wrapper {
    width: 80px !important;
    height: 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* The actual thumbnail image */
.collectionsliderImage .dxis-nbItem img,
.collectionsliderImage .dxis-nbThumb img,
.thumb-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* <— SHOW WHOLE IMAGE */
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit:cover;
}
/* === IMAGE INSIDE SLIDER === */
.collection-card img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    background-color:white;
}


/* --- SLIDER IMAGE --- */
/* Ensure slider images don’t collapse */
.collectionsliderImage img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    
}
/* Remove white top padding in DevExpress wrapper */
.dxis-passePartout,
.dxis-imageArea,
.dxis-slidePanel,
.dxis-item {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Ensure the content inside starts at 0px */
.dxis-imageArea
{
    background-color:white;
     top: 0 !important;
}
.collection-main-image-box {
    width: clamp(360px, calc(50px + 25vw), 560px);        /* your fixed width */
    aspect-ratio: 1 / 1;     /* forces square */
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
    margin-top:-40px;
}
.collection-main-image {
    width: 100% !important;
    height:100% !important;
    display: block;
    border-radius: 6px;
    vertical-align:top;
    object-fit:  cover !important;   /* <— this forces full stretch */
    object-position: center;
}
.oak-main-image {
    width: 100% !important;
    height:100% !important;
    display: block;
    border-radius: 6px;
    vertical-align:top;
    object-fit:  contain !important;   /* <— this forces full stretch */
    object-position: center;
}

.dxisControl .dxis-nbSelectedItem {
    z-index: 1;
    cursor: default;
    position: absolute;
    border: 0px;
    background-color: transparent;
    width:80px;
    height:auto;
}

.dxisControl .dxis-nbSelectedItem  img{
    width:80px;
    height:auto;
    border: 0px;
}

.collection-slider-image-wrapper {
    position: relative;
    
    aspect-ratio: 1 / 1;
    background: white;
    overflow: hidden;
    vertical-align:top;
}
.collection-slider-image-wrapper,
.collection-slider-image-wrapper img {
    width: 100%;
    height:100%;
    object-fit: cover;
    display: block;
    vertical-align:top;
}
.collectionsliderImage img,
.collection-slider-image-wrapper img {
    width: 100% !important;
    height: 100% !important; /* force same height */
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}
.collectionsliderImage .dxis-passePartout,
.collectionsliderImage .dxis-imageArea,
.collectionsliderImage .dxis-slidePanel,
.collectionsliderImage .dxis-item {
    height: clamp(360px, calc(50px + 30vw), 700px) !important;
}
.collection-color-circle-container {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    gap: 6px;
    z-index: 20;
    pointer-events: none;
}
.collection-color-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #666;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    object-fit: cover;
}
.collection-color-circle-container img.collection-color-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #ccc;
    object-fit: cover;
}
/* --- INFO --- */
/* Info section stays at bottom */
.collection-info {
    text-align: center;
    padding: 8px 0 5px;
   
    width: 100%;
    background-color:transparent;
    height: 60px;
}

.collection-name {
    font-size: 14px;
    font-weight: 500;
    color: #0E0E0E;
    text-decoration: none;
    letter-spacing: 1.12px;
}

.collection-name:hover {
    color: #9a7b50;
}

.collection-count {
    font-size: 0.9rem;
    color: #777;
    text-decoration: none;
    margin-top: 4px;
}

@media (max-width: 992px) {
    .collectionsContainer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px; /* optional */
    }
     .collection-card {
        max-width: none;
        width: 100%;
        height: auto;
    }
    
}

@media (max-width: 475px) {
    .collectionsContainer {
        grid-template-columns: 1fr;
    }
    .collection-card {
        height: auto;
    }
}
/* --- STATUS LABELS --- */
.product-new-top,
.product-clearance-top,
.product-bestseller-top {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #333;
    color: #fff;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}
.product-new-top { background-color: #007bff; }
.product-clearance-top { background-color: #c82333; }
.product-bestseller-top { background-color: #28a745; }

.collection-pager {
    margin: 40px auto;
    text-align: center;
}

.pager-info {
    font-size: 1rem;
    color: #333;
    display: block;
    margin-bottom: 10px;
}

.load-more-btn {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 10px 30px;
    border-radius: 25px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.load-more-btn:hover {
    background-color: #64877f;
}

.button-root, .contact-us-btn button {
    border-radius: 25px;
    max-width: 100%;
    min-width: 10em;
    width: 100%;
    min-height: 2.5em;
    border: 0;
    outline: 0;
    font-size: 1.6rem;
    line-height: 2rem;
    padding: 10px 24px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    overflow: hidden;
}


@media (max-width: 700px) {
  .collection-card {
    width: 90%;
  }
  .collection-card .collectionsliderImage {
    width: 100% !important;
    height: auto !important;
  }
}
/*------- Toolbar filter on collection page*/
/* === FULL-WIDTH WRAPPER === */
.collection-alphabet-toolbar {
    width: 100%;
    border-top: 0px;
    border-bottom: 1px solid #e5e5e5;
    background-color: transparent;
    display: flex;
    justify-content: center;
    padding: 1rem 0;
    box-sizing: border-box;

}

/* === BUTTON CONTAINER === */
.collection-alphabet-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    
}

/* === DEVEXPRESS BUTTON OVERRIDE === */
.collection-alphabet-buttons .collection-alphabet-btn {
    background-color: white !important;
    border-radius: 2rem !important; /* pill shape */
    
    font-size: 0.80rem;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    color: #333 !important;
    cursor: pointer;
    min-width: 60px;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === HOVER STATE === */
.collection-alphabet-buttons .collection-alphabet-btn:hover {
    background-color: #64877f !important;
    color: #fff !important;
}

/* === ACTIVE STATE === */
.collection-alphabet-buttons .collection-alphabet-btn.active {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
    font-weight: 300;
}


/* === RESPONSIVE STYLING === */

@media (max-width: 1024px) {
    .collection-alphabet-buttons .collection-alphabet-btn {
        min-width: 50px;
        font-size: 0.75rem;
    }
    
    .designinfo-container {
        flex-wrap: wrap;
    }
    .designinfo-left {
        flex: 0 0 100%;
    }

    .designinfo-middle,
    .designinfo-right {
        flex: 0 0 calc(50% - 15px);
    }
    
}

@media (max-width: 768px) {
    .collection-alphabet-toolbar {
        padding: 0.7rem 0;
    }

    .collection-alphabet-buttons .collection-alphabet-btn {
      
        font-size: 0.7rem;
        min-width: 45px;
    }

     .designinfo-left,
    .designinfo-middle,
    .designinfo-right {
        flex: 0 0 100%;
    }
}

@media (max-width: 480px) {
    .collection-alphabet-buttons {
        gap: 0.3rem;
    }

    .collection-alphabet-buttons .collection-alphabet-btn {
        
        font-size: 0.75rem;
        min-width: 40px;
    }
}


/* DevExpress buttons inside */
.collection-alphabet-toolbar .collection-alphabet-btn,
.collection-alphabet-toolbar .collection-alphabet-btn .dxb,
.collection-alphabet-toolbar .collection-alphabet-btn .dxb-hbc,
.collection-alphabet-toolbar .collection-alphabet-btn .dxb-hb,
.collection-alphabet-toolbar .dxbButton,
.collection-alphabet-toolbar .dxbButton .dxb,
.collection-alphabet-toolbar .dxbButton .dxb-hbc,
.collection-alphabet-toolbar .dxbButton .dxb-hb {
    background-color: white !important;
    border-radius: 2rem !important; /* pill shape */
    border: 0px;
    font-size: 0.80rem;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    color: #333 !important;
    cursor: pointer;
    min-width: 60px;
    transition: all 0.25s ease;

    align-items: center;
    justify-content: center;
}
.collection-alphabet-btn .dxbButton
{
    background-color: white !important;
}
/* Active button */
.collection-alphabet-toolbar .collection-alphabet-btn.active,
.collection-alphabet-toolbar .collection-alphabet-btn.active .dxb,
.collection-alphabet-toolbar .collection-alphabet-btn.active .dxb-hbc,
.collection-alphabet-toolbar .collection-alphabet-btn.active .dxb-hb,
.collection-alphabet-toolbar .dxbButton.active,
.collection-alphabet-toolbar .dxbButton.active .dxb,
.collection-alphabet-toolbar .dxbButton.active .dxb-hbc,
.collection-alphabet-toolbar .dxbButton.active .dxb-hb
 {
     background-color: #000 !important;
    color: #fff !important;
    border: 0px !important;
    font-weight: 300;
}

/* Hover */
.collection-alphabet-toolbar .collection-alphabet-btn:hover,
.collection-alphabet-toolbar .collection-alphabet-btn:hover .dxb,
.collection-alphabet-toolbar .collection-alphabet-btn:hover .dxb-hbc,
.collection-alphabet-toolbar .collection-alphabet-btn:hover .dxb-hb, 
.collection-alphabet-toolbar .dxbButton:hover,
.collection-alphabet-toolbar .dxbButton:hover .dxb,
.collection-alphabet-toolbar .dxbButton:hover .dxb-hbc,
.collection-alphabet-toolbar .dxbButton:hover .dxb-hb
{

     background-color: #64877f !important;
    color: #fff !important;
}

/*-----Collection listview thumbnail---------*/
.thumb-wrapper {
    text-align: center;
    width: 80px;
    padding-top: 4px;
    align-content:center;
}
.thumb-wrapper img{
    width: 80px;
    height:100px;
    align-content:center;
}

.thumb-image {
    width: 50px;
    height: 40px;
    object-fit:fill;
}

.thumb-colors {
    margin-top: 3px;
}

.color-dot {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 50%;
    border: 1px solid #666;
    margin: 1px;
}

.thumb-skus {
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.1;
    color: #333;
}


.color-item {
    padding: 2px 4px;
    border-radius: 3px;
    background: #f0f0f0;
    margin-bottom: 2px;
}
.color-square {
    width: 26px;
    height: 26px;
   margin-right: 4px;
    border: 1px solid #ccc;
    box-shadow: 0 0 3px rgba(0,0,0,0.25);
    object-fit: cover;
    display: inline-block;
}
.sku-item { font-size: 11px; color: #333; margin-top: 2px; }
/* Wrapper row */

.collection-item {
    
    justify-content: center;
    display: inline-block;
    vertical-align: top;
   
   width:100%;
}
.collection-wrapper {
    display: grid;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding:10px;
    vertical-align:top;
    height:100%;
}
.image-section {
    width: 100% ;
    position: relative;
    /*
        display:flex;
    height:570px;
         
    */
    
    min-height: 300px;
    overflow: hidden;
   
    justify-content: center;
    aspect-ratio: 1 / 1;

}
.collection-swiper,
.collection-swiper .swiper-wrapper,
.collection-swiper .swiper-slide {
    width: 100%;
    height: 100%;
}


.collection-swiper {
    width: min(100%, clamp(360px, 28vw, 520px));
    aspect-ratio: 1 / 1;
}

.collection-swiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* ===== MAIN IMAGE ARROWS ===== */
.collection-swiper .swiper-button-prev,
.collection-swiper .swiper-button-next {
    color: #fff;
    background: rgba(0,0,0,0.4);
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.collection-swiper .swiper-button-prev::after,
.collection-swiper .swiper-button-next::after {
    font-size: 14px;
}
@media (max-width: 1024px) {
    
     .collection-swiper {
        width: 100%;
        max-width: none;
        aspect-ratio: 1 / 1;
    }
}
.thumb-section {
    width: 100%;
    padding: 6px 0;
    overflow: hidden;

}

.collection-thumbs {
    position: relative;
    width: 100%;
    padding: 0 30px; /* space for arrows */
}
.collection-thumbs .swiper-wrapper {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: center;
    padding-bottom: 8px; /* same as info-box */
}
.collection-thumbs .swiper-button-prev,
.collection-thumbs .swiper-button-next {
    color: #000;
    width: 24px;
    height: 24px;
    top: 50%;
    transform: translateY(-50%);
}

.collection-thumbs .swiper-button-prev {
    left: 0;
}

.collection-thumbs .swiper-button-next {
    right: 0;
}

.collection-thumbs .swiper-button-prev::after,
.collection-thumbs .swiper-button-next::after {
    font-size: 12px;
}
/*
.collection-thumbs .swiper-slide {
    width: 70px !important;
    height: 90px;
    flex-shrink: 0;
    
.collection-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}
    */
.collection-info-box {
    width: 100%;
    height: 50px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0px;

    padding: 6px 6px;
     background: rgba(255,255,255,0.95);
    border-top: 1px solid #ddd;
    overflow: hidden;   
    z-index: 10;
    pointer-events: none; /* avoids hover cocollection-thumbs .swiper-slidenflicts */
    box-sizing: border-box;
    transition: opacity .2s ease-in-out;
    opacity: 0;         /* Hidden until hover */

    
}
.collection-card:hover .collection-info-box {
    opacity: 1;
    pointer-events: auto;
    display: block;
}
.collection-info-box .color-list .color-square,
.collection-info-box .sku-group .sku-item {
    display: inline-block;
    margin-right: 4px;
}
.collection-info-box .info-wrapper {
    height: 100%;       /* <<< Forces internal stable height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
}
.collection-thumbs .swiper-slide {
    width: 70px !important;
    height: 90px;
    flex-shrink: 0;
}

.collection-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}
/* Color row */
.color-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}
.color-list.show { display: flex; }

/* SKU row */
.sku-group {

    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #222;
    min-height: 18px; /* Prevent layout jump */
}
.sku-group.show { display: block; }

/* Color circles = Feizy style */
.color-square-wrapper {
    width: 26px;
    height: 26px;
    
    overflow: hidden;
    border: 1px solid #fff;
    box-shadow: 0 0 3px rgba(0,0,0,0.4);
}
.color-square-wrapper img.color-square {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.color-circle {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dxis-nbSelectedItem {
    pointer-events: none !important;
}
/* meta area under the slider (above collection name) */
.collection-meta {
    padding: 6px 8px;
    min-height: 22px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-size: 13px;
}

/* color circle thumbnails (use images for accurate look) */

/* keep per-thumb small containers hidden (we continue to populate them too) */
.thumb-colors, .thumb-skus {
    display: none;
}

/* optional highlight for active meta */
.collection-card .collection-meta.active {
    background: rgba(0,0,0,0.02);
    border-radius: 4px;
}
/*
    ---------------Design card -----------------
*/

.designContainer {
    display: grid;
    margin: 0px !important;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    
    justify-items: center;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}



.design-card {
    width: 400px;
    min-height: 480px;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 12px;
    margin: 12px;
    display: grid;
    vertical-align: top;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    grid-template-rows: subgrid;
    grid-row: span 4;
}

/* IMAGE */
.design-card-image-wrapper {
    width: 330px;
    height:470px;
    overflow: hidden;
    margin-bottom: 12px;
    text-align:center;
    justify-content:center;
    align-items: center;
    display:flex;
    margin: 12px;   /* center the wrapper itself */
}

.design-card-image {
    width: 100%;
    height: 100%;
    object-fit: fill !important;
    justify-content:center;
    align-items: center;
    display:block;
    
}
.design-card-image-wrapper a {
    display: block;
    width: 100%;
    height: 100%;
}
.design-card-image img{
    width: 330px;
    height:470px;
    object-fit: fill !important;
}
/* FLEX ROWS */
.design-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

/* TEXT */
.design-title {
    font-size: 11px;
    color: rgb(89 89 89 / var(--tw-text-opacity));
}
.design-title a{
    text-decoration-line: underline;
    text-transform: uppercase;
    color: rgb(89 89 89 / var(--tw-text-opacity));
}
.displayname {
    font-family: baskerville-display-pt, serif;
    font-size: 3.6rem;
    font-style: normal;
    line-height: 4rem;
    color: #0E0E0E;
}
.design-name {
    font-family: azo-sans-web, sans-serif;
    font-size: 13px;
    font-weight:bold;
}
.design-construction {
    font-size: 12px;
    color: #777;
}
.bg-black {
background-color: black;
color:white;
text-transform: uppercase;
padding: 6px;
border-radius: 0.4rem;
align-items: center;
max-width:150px;
display: flex;
align-items:center;
text-align:center;
}
.span_underline{
    text-decoration-line: underline;
        text-transform: uppercase;
        font-weight: 400;
        align-items: flex-start;
        font-family: azo-sans-web, sans-serif;
        color: #0E0E0E;
        line-height:20px;
}
.richcontent
{
    width:100%;
    margin-top:5px;
}
.richcontent p, li,ul{
    font-family: azo-sans-web, sans-serif;
    font-size: 11px;
    font-style: normal;
    line-height: 18px;
    color: #595959;
    text-align:justify;
    
}
.richcontent a
{
   text-decoration:underline;
}
/* SIZES */
.design-sizes {
    font-size: 10px;
    padding: 4px 6px;
    background-color:black;
    color:white;

}

/* COLORS */
.design-colors {
    display: flex;
    gap: 5px;
}

.design-color-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.design-color-circle.more {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #eee !important;
    font-size: 12px;
    font-weight: bold;
    color: #444;
}
.design-color-circle-large {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.design-color-circle-large.more {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #eee !important;
    font-size: 16px;
    font-weight: bold;
    color: #444;
}



/* Circle style */
/* horizontal layout for DevExpress ListBox, wrap naturally */
.swatch-list .dxlbd {
    width: 100% !important;
    height: auto !important;       /* let it expand */
    overflow: visible !important;  /* no scroll */
}
.swatch-list .dxeListBoxItem {
    display: inline-block !important;
    vertical-align: middle;
    padding: 4px;
}
/* turn DevExpress listbox layout horizontal */
/* horizontal layout for DevExpress ListBox */
.swatch-list .dxeListBoxItemRow {
    display: inline-block !important;
    width: auto !important;
    margin-right:-5px;
    padding: 0;
    vertical-align: middle;
    cursor: pointer;  /* pointer on hover */
}

/* remove any DevExpress hover highlight */
.swatch-list .dxeListBoxItemHover,
.swatch-list .dxeListBoxItemHover td {
    background: transparent !important;
    box-shadow: none !important;
}

/* remove DevExpress default selection background */
.swatch-list .dxeListBoxItemSelected,
.swatch-list .dxeListBoxItemSelected td {
    background: transparent !important;
}

/* the outer container to create spacing like Feizy */
.color-swatch-wrapper {
    display: inline-flex;
    padding: 4px;                /* gap around the swatch — Feizy style */
    border: 1px solid transparent; 
    border-radius: 50%;          
}

/* selected state – clean black border around wrapper */
.swatch-list .dxeListBoxItemSelected .color-swatch-wrapper {
    border-color: black !important;
}

/* your circle image */
.color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}

/*
    ------Design Info-------
*/

.designinfo-container {
    display: flex;   
    gap: 30px;
    margin: 10px;
    box-sizing: border-box;

}
.designinfo-container > div {
    min-width: 0;
    box-sizing: border-box;
}
.designinfo-container img,
.designinfo-container table {
    max-width: 100%;
}
.designinfo-left, .designinfo-middle, .designinfo-right {
    background: transparent;
    min-width: 0;
    box-sizing: border-box;
}
.designinfo-left{
    flex: 0 0 30%; 
}
.designinfo-right{
   flex: 0 0 35%;
}
.designinfo-middle{
   flex: 0 0 35%;
    min-width: 0;
}

.designinfo-left,
.designinfo-right {
    padding: 0;
}

/* DevExpress ImageSlider – force responsive */
.designinfo-middle .dxisControl,
.designinfo-middle .dxis-passePartout,
.designinfo-middle .dxis-imageArea,
.designinfo-middle .dxis-slidePanel {
    width: 100% !important;
    max-width: 100% !important;
}

.designinfo-middle img,
.designinfo-middle canvas {
    max-width: 100%;
    height: auto;
}
.info-row span {
   
    display: inline-block;
    min-width: 120px;
    color: #0E0E0E;
}
p, .info-row {
    font-family: azo-sans-web, sans-serif;
    font-size: 14px;
    font-style: normal;
    line-height: 16px;
    color: #0E0E0E;

}
.design-property-info{
    font-family: azo-sans-web, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight:normal;
    line-height: 26px;
    color: #0E0E0E;
    padding-left:5px;
   min-width:120px;
}
.box {
    background-color: white;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 20px;
}
.color-option
{
    text-transform: uppercase;
    letter-spacing: 1.12px;
    font-weight: 600;
    font-family: azo-sans-web, sans-serif;
    font-size: 16px;
    font-style: normal;
    line-height: 20px;
    color: #0E0E0E;
}
.size-item {
    padding: 5px 0;
    border-bottom: 1px solid #ddd;
}
.designInfo-color-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #777;
    margin-right: 6px;
    background-size: cover;
    display: inline-block;
}
.more-colors {
    margin-left: 6px;
    font-size: 14px;
    color: #444;
}

.price-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}

.designinfo-row {
    margin: 40px 20px;
}

.extra-img {
    width: 160px;
    height: auto;
    margin-right: 15px;
}

/*------Design Slider Image*/

/* MAIN IMAGE AREA SCROLLING (like Feizy) */
.design-sliderImage .dxis-ia {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 600px !important;  /* match your slider Height */
}

/* CENTER each main image */
.design-sliderImage .dxis-item img {
    margin: 0 auto;
    display: block;
}

/* THUMBNAIL PANEL */
.design-sliderImage .dxis-thumbnails {
    width: 65px !important;  /* adjust to your design */
    padding-right: 10px;
}

.design-sliderImage .dxis-thumb {
    width: 65px !important;
   
    padding: 2px !important;
}
/* Thumbnail images */
.design-sliderImage .dxis-thumb img {
    width: 100% !important;
    
   
    display:block;
}
/* Thumbnail containers */
.design-sliderImage .dxis-nbItem,
.design-sliderImage .dxis-nbHoverItem,
.design-sliderImage .dxis-nbSelectedItem {
    width: 50px !important;
    overflow: hidden !important; 
    height: 65px !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
.design-sliderImage .dxis-nbItem {
    background-color: white;
    padding-bottom: 6px;
    box-sizing: border-box;
    
}

.design-sliderImage .dxis-nbItem.dxis-selected::after {
    
    content: "";
    position: absolute;
    left: 0px;
    bottom: 1px;
    width: 100%;
    height: 2px;              /* line thickness */
    background-color: #000;
}
.design-sliderImage .dxisControl .dxis-nbItem .dxis-nbHoverItem {

    border: 0px;
    border-bottom: 1px solid #333;
}

/* Thumbnail canvas */
.design-sliderImage .dxis-nbItem canvas {
    width: 50px !important;
    
    max-height:none !important;
}
.design-sliderImage .dxis-nbItem img {
    margin: 0 !important;
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain; 
}
.design-sliderImage .dxis-nbSlidePanel {
    background-color: transparent !important;
}
/* Left thumbnail navigation column */
.design-sliderImage .dxis-nbLeft {
    width: 65px !important;
    padding-top: 0 !important;
    vertical-align: top !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}
/* Thumbnail wrapper */
.design-sliderImage .dxis-nbLeft .dxis-nbLite {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* Slide panel container */
.design-sliderImage .dxis-nbLeft .dxis-nbSlidePanel {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}
/* Force vertical thumbnail list to stick to top */
.design-sliderImage .dxis-nbLite.dxis-nbVertical {
    align-items: flex-start !important;
    justify-content: flex-start !important;
}
.design-sliderImage .dxis-nbSlidePanel {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    transform: none !important; /* remove vertical centering */
}
/* 2. Slide panel wrapper */
.design-sliderImage .dxis-nbSlidePanelWrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    top: 0 !important;
}

.design-sliderImage .dxis-nbLeft {
    float: left !important;
    display: block !important;
    width: 65px !important;
}

.design-sliderImage .dxis-passePartout {
    float: left !important;
    width: calc(100% - 65px) !important;
}
.required-field{
    color:darkred;
}
/*------ Select Design Size */
/* Remove borders and scroll */
.size-list, 
.size-list .dxlbd,
.size-list .dxlbd > div {
    border: none !important;
    overflow: visible !important;
    height: auto !important;
    width:100%;
    
}

/* Turn ONLY the items table into flex container */
#MainContent_cpDesign_lbSizes_LBT {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px;
}

/* Remove DevExpress TR rows entirely */
#MainContent_cpDesign_lbSizes_LBT .dxeListBoxItemRow {
    display: contents !important;
}

/* Make listbox TD act like inline-flex containers */
#MainContent_cpDesign_lbSizes_LBT .dxeListBoxItem {
    display: inline-flex !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* your size button style */
.size-button {
    min-width: 80px;
    padding: 7px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 10px;
    background: white;
    cursor: pointer;
    text-align:center;
}

.size-button:hover {
    border-color: #888;
}

.size-selected {
    border: 2px solid black !important;
}
.feizy-login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    color: #fff;
    padding: 10px 28px;
    border-radius: 999px; /* PERFECT PILL SHAPE */
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    border: 1px solid #000;
    cursor: pointer;
    transition: background-color 0.25s ease;
    text-decoration: none;
    user-select: none;
    width:100%;
}

.feizy-login-button:hover {
    background-color:cadetblue;
    border-color: cadetblue;
    color: #fff;
}

.design-inventory{
    justify-content:flex-end;
    flex-grow:1;
    display:flex;
}

/*
    ---------------Product card -----------------
*/
.productContainer {
    display: grid;
    margin: 0px !important;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    
    justify-items: center;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

.product-card {
    width: 350px;
    min-height: 350px;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 12px;
    margin: 10px;
    display: grid;
    vertical-align: top;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    grid-template-rows: subgrid;
    grid-row: span 4;
}

/* IMAGE */
.product-card-image-wrapper {
    width: 270px;
    height:320px;
    overflow: hidden;
    margin-bottom: 12px;
    text-align:center;
    justify-content:center;
    align-items: center;
    display:flex;
    margin: 12px;   /* center the wrapper itself */
}
.product-card-image-wrapper a {
    display: block;
    width: 100%;
    height: 100%;
}
.product-card-image {
    width: 100%;
    height: 100%;
    object-fit: fill !important;
    justify-content:center;
    align-items: center;
    display:block;
    
}

.product-card-image img{
    width: 330px;
    height:470px;
    object-fit: fill !important;
}
/* FLEX ROWS */
.product-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.product-image-section {
    width: 100%;
    height:370px;
    margin-bottom:15px;
}

/* -------User Icon------- */
.user-icon-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

/* Overlay */
.loginoverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 999;
}

/* Login Panel */
.login-panel {
    position: fixed;
    top: 0;
    right: -380px;
    width: 400px;
    height: 100%;
    background: #fff;
    box-shadow: -4px 0 15px rgba(0,0,0,.15);
    transition: right .35s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

/* Active */
.login-panel.active {
    right: 0;
}

.loginoverlay.active {
    opacity: 1;
    visibility: visible;
}

/* Header */
.login-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    font-family: azo-sans-web, sans-serif;
    font-size: 1.6rem;
    line-height: 1rem;
    text-align:center;
}
.divLogin{
    justify-content:center;
    width:100%;
}
.divLogin span{
    text-align:center;
    
}
/* Body */
.login-body {
    padding: 20px;
}

.login-input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
}

.login-btn {
    width: 14rem;
    padding: 5px 30px;
    background: black;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    transition: background-color 0.3s;
}

.login-btn:hover {
    background-color: #64877f;
}

.loginbody-center{
    justify-content:center;
    text-align:center; 
    width:100%;
    line-height:1.4rem;
}
.loginbody-center a{
    text-decoration:underline;
    font-size: small;
    font-family: azo-sans-web, sans-serif;
    line-height: 2rem;
    color: #0E0E0E;
}
.login-body-section{
border-top: 1px solid #f0f0f0;
 margin-top: 3rem;
 justify-content:center;
 text-align:center;
 width:100%;
}
.login-body-section h5 {
        padding-top: 20px;
        padding-bottom: 10px;
        text-align: center;
    }
.login-body-section p{
    justify-content:center;
    text-align:center;
    color:gray;
    font-family: azo-sans-web, sans-serif;
    font-size: .8rem;
    font-style: normal;
}
.white-btn{
    
    padding: 5px 30px;
    background-color:white;
    color: black;
    border: 1px solid #000000;
    cursor: pointer;
    border-radius: 25px;
    transition: background-color 0.3s;
}
.white-btn:hover {
    background-color: #64877f;
    border: 0px;
    color:white;
}
.register-link {
    display: block;
    margin-top: 15px;
    text-align: center;
}

.OtherClass{
    color:orange;
    font-weight:bold;
    font-size:22px;
}
.SoldClass{
    color:red;
    font-weight:bold;
    font-size:22px;
}
.AvailableClass {
    color:green;
    font-weight:bold;
    font-size:22px;
}
/*------ Swiper Slider for OakInfo----------*/
.designinfo-middle-slider {
    display: flex;
    height: 500px; /* fixed height for main slider */
    min-height: 500px;
    overflow: hidden; 
}

.thumb-slider {
    width: 70px; /* thumbnail column width */
   height: 500px;
    margin-right: 15px;
    overflow: hidden;
    padding-bottom: 8px;
}

.thumb-slider .swiper-slide {
    position: relative;
    margin-bottom: 8px;
    cursor: pointer;
    height: auto !important;   /* ignore any Swiper inline height */
    overflow: visible !important;
}

.thumb-slider img {
    width: 100%;
    height: auto;        /* keep natural aspect ratio */
    padding-bottom: 5px;
    display: block;
    object-fit: contain;

}
/* line under selected thumbnail */
.thumb-selected-line {
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0%;
    height: 2px;
    background: transparent;
    margin-top: 6px;
}
/* selected thumbnail */
.thumb-slider .swiper-slide-thumb-active .thumb-selected-line {
    width: 100%;
    background: #000; /* match Feizy */
}
.main-slider {
    position: relative;
    flex: 1;
    height: 500px;
    overflow: hidden;   /* ⬅️ THIS STOPS STACKING */
   padding-right: 12px; /* reserve space for scrollbar */
    box-sizing: border-box;
}


.main-slider .swiper-wrapper {
    height: 100%;
    align-items: flex-start !important;  /* ⬅️ critical */
}

.main-slider .swiper-slide {
    
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto !important;     /* let image define height */
    margin-bottom: 12px;         /* small gap like thumbnails */
}
.main-slider .swiper-scrollbar {
    position: absolute;
    right: 8px;
    top: 10px;
    bottom: 10px;
    width: 6px;
    z-index: 10;
}
.main-slider .swiper-scrollbar-drag {
    background: rgba(0,0,0,.4);
    border-radius: 3px;
}
/* prevent horizontal scrolling */
.main-slider {
    touch-action: pan-y;
}
.main-slider,
.main-slider .swiper-wrapper,
.main-slider .swiper-slide {
    height: 100%;
    max-height: 100%;
}
.main-slider .swiper-slide:last-child {
    margin-bottom: 10px;
}

.main-slider picture,
.main-slider img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    display: block;
    padding-right:2px;
}

/* ===== FIX ARROW POSITION ===== */

.main-prev,
.main-next {
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    width: 40px;
    height: 40px;
    color: #000;
}


.main-prev {
    top: 10px;
}

.main-next {
    bottom: 10px;
}

/* ===== FORCE VERTICAL ARROWS ===== */


.main-slider .swiper-button-prev,
.main-slider .swiper-button-next {
    left: 50% !important;
    right: auto !important;
    /*
    top: auto !important;
    bottom: auto !important;
        */
    width: 40px;
    height: 40px;
    transform: translateX(-50%) !important;
    margin: 0 !important;
}

/* TOP arrow */
.main-slider .swiper-button-prev {
    top: 10px !important;
}

/* BOTTOM arrow */
.main-slider .swiper-button-next {
    bottom: 10px !important;
}
/* Remove default horizontal arrows */
.main-slider .swiper-button-prev::after,
.main-slider .swiper-button-next::after {
    transform: rotate(90deg);
}
/* -------Product toolbar --------*/
.product-toolbar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    gap: 10px;
    margin-bottom: 15px;
}
.product-toolbar-left {
    display: flex !important;
    align-items: center !important;   /* vertical center */
    justify-content: flex-start !important; /* left-align inside toolbar */
    gap: 10px;
    background: transparent !important;  /* remove background */
    border: none !important;            /* remove any border */
    box-shadow: none !important;        /* remove any shadow if inherited */
    min-width: max-content;             /* prevent shrinking */
}
product-toolbar-left button
{
    border: none !important;            /* remove any border */
}
/* Left & Right stay on same row */
.toolbar-right {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 15px;
    border: none !important;
}


/* Prevent wrapping */
.product-toolbar * {
    box-sizing: border-box;
}
filter-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important; 
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    white-space: nowrap !important; 
}

.filter-btn:focus {
    outline: none;
    box-shadow: none;
}
.toolbar-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* Mobile fallback */
@media (max-width: 768px) {
    .product-toolbar {
        flex-wrap: nowrap;
    }
}



.toolbar-right select {
    margin-left: 5px;
    padding: 4px 6px;
    border-radius: 4px;
}
 /* Black circular filter icon */
.filter-btn-circle {
    width: 40px;
    height: 40px;
    border: none !important;
    background-color:transparent;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    flex-shrink: 0; /* CRITICAL */
}

/* Font Awesome icon */
.filter-btn-circle i {
    color: #fff;
    font-size: 16px;
}
.filter-icon-img {
    width: 36px;
    height: 36px;
    display: block;
}

/* Hover effect */
.filter-btn:hover .filter-btn-circle {
    background-color:aquamarine;
}
/* Text next to icon */
.filter-text {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: inline-block !important;
    white-space: nowrap !important;
    text-align: center;
}