/* =============================================
   SMARTRTECH - Back Market Inspired Design
   ============================================= */

@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600;700;800&display=swap");

:root {
  /* Back Market Color Palette */
  --sr-primary: #2F3137;
  --sr-primary-dark: #1a1d22;
  --sr-primary-light: #4B4F58;
  --sr-primary-bg: #F8F9FC;
  --sr-accent: #245BDE;
  --sr-accent-light: #D3BCFB;
  --sr-green: #0CCE6B;
  --sr-text: #2F3137;
  --sr-text-secondary: #6B7280;
  --sr-border: #E5E7EB;
  --sr-white: #FFFFFF;
  --sr-off-white: #F8F9FC;
  --sr-light-gray: #F0F0F0;
  --sr-price: #2F3137;
  --sr-old-price: #9CA3AF;
  --sr-badge-green: #0CCE6B;
  --sr-badge-blue: #245BDE;
  --border-radius: 12px;

  /* Typography */
  --font-display: "DM Serif Display", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ===================== GLOBAL ===================== */
body {
  font-family: var(--font-body) !important;
  color: var(--sr-text) !important;
  background-color: var(--sr-white) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .section-title, .block-title,
.featured-products .products-section-title,
.cp-section-title, .cp_title {
  font-family: var(--font-display) !important;
  color: var(--sr-text) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
}

h1 { font-size: 2.2rem !important; }
h2, .section-title, .block-title { font-size: 1.8rem !important; }

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

/* ===================== HEADER ===================== */
.header-top,
#header .header-nav {
  background-color: var(--sr-primary) !important;
  color: white !important;
}

#header {
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  background: var(--sr-white) !important;
}

.header-top-main,
#header .header-top {
  background: var(--sr-primary) !important;
}

/* Top bar */
.top-bar, .headerTop, .header-banner,
#header .header-nav {
  background-color: var(--sr-primary) !important;
}

/* Logo area / middle header */
.header-middle, .headerMiddle,
#header .header-top-main {
  background: var(--sr-white) !important;
}

/* Search bar */
.search-form input[type="text"],
#search_widget input,
.cp-searchbar input {
  border: 2px solid var(--sr-border) !important;
  border-radius: 8px !important;
  background: var(--sr-off-white) !important;
  padding: 10px 16px !important;
  font-family: var(--font-body) !important;
  transition: border-color 0.2s ease !important;
}

.search-form input:focus,
#search_widget input:focus,
.cp-searchbar input:focus {
  border-color: var(--sr-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(36, 91, 222, 0.1) !important;
}

.search-form button,
#search_widget button,
.cp-searchbar button {
  background: var(--sr-primary) !important;
  border-radius: 0 8px 8px 0 !important;
  border: none !important;
  color: white !important;
  padding: 10px 20px !important;
}

/* Navigation menu */
#_desktop_top_menu .top-menu > li > a,
.cp-nav-menu a,
.main-menu a,
#top-menu > li > a {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--sr-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 12px 16px !important;
  transition: color 0.2s ease !important;
}

#_desktop_top_menu .top-menu > li > a:hover,
.main-menu a:hover,
#top-menu > li > a:hover {
  color: var(--sr-accent) !important;
}

.menu-top, .cp-nav-bar, .nav-bar,
.navbar-nav-main, .cp-menu-bar {
  background: var(--sr-white) !important;
  border-bottom: 1px solid var(--sr-border) !important;
}

/* ===================== BUTTONS ===================== */
.btn-primary, .btn, 
button.btn-primary,
.add-to-cart,
a.btn-primary {
  background-color: var(--sr-primary) !important;
  color: var(--sr-white) !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px 24px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

.btn-primary:hover, .btn:hover,
button.btn-primary:hover,
.add-to-cart:hover {
  background-color: var(--sr-primary-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(47, 49, 55, 0.2) !important;
}

.btn-secondary, .btn-outline-primary {
  background: transparent !important;
  color: var(--sr-primary) !important;
  border: 2px solid var(--sr-primary) !important;
  border-radius: 8px !important;
}

/* ===================== PRODUCT CARDS ===================== */
.product-miniature,
.js-product-miniature,
.item-product {
  background: var(--sr-white) !important;
  border: 1px solid var(--sr-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
  box-shadow: none !important;
}

.product-miniature:hover,
.js-product-miniature:hover,
.item-product:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-4px) !important;
  border-color: transparent !important;
}

.product-miniature .thumbnail-container,
.product-miniature .product-image {
  background: var(--sr-off-white) !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 16px !important;
}

.product-miniature .product-title,
.product-miniature .product-title a {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--sr-text) !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
}

.product-miniature .product-price-and-shipping .price,
.product-miniature .price {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  color: var(--sr-price) !important;
}

.product-miniature .regular-price,
.product-miniature .product-price-and-shipping .regular-price {
  color: var(--sr-old-price) !important;
  text-decoration: line-through !important;
  font-size: 0.9rem !important;
}

.product-miniature .discount-percentage,
.product-miniature .discount-amount,
.product-flag {
  background: var(--sr-badge-green) !important;
  color: white !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 8px !important;
}

.product-miniature .product-flags .new {
  background: var(--sr-badge-blue) !important;
}

/* Product card hover icons */
.product-miniature .quick-view,
.product-miniature .wishlist-button-add,
.product-miniature .compare-btn {
  background: var(--sr-white) !important;
  border: 1px solid var(--sr-border) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  transition: all 0.2s ease !important;
}

.product-miniature .quick-view:hover,
.product-miniature .wishlist-button-add:hover {
  background: var(--sr-primary) !important;
  color: white !important;
  border-color: var(--sr-primary) !important;
}

/* ===================== SECTIONS ===================== */
.cp-section, .products-section,
#content, .page-content {
  padding: 48px 0 !important;
}

.section-title, .block-title,
.cp-section-title {
  margin-bottom: 32px !important;
  position: relative;
}

/* Remove ugly underlines/decorators from section titles */
.section-title::after,
.block-title::after,
.cp-section-title::after,
.cp_title::after {
  display: none !important;
}

/* ===================== HOMEPAGE ===================== */
/* Service blocks (livraison, garantie, etc) */
.cp-service-block, .service-block,
.reassurance-block {
  background: var(--sr-off-white) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  border: 1px solid var(--sr-border) !important;
  text-align: center;
}

/* Banner areas */
.cp-cms-banner, .cms-banner {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Category cards */
.cp-category-item, .category-item {
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
}

.cp-category-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}

/* Slider */
.cp-image-slider, .image-slider {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* ===================== SIDEBAR ===================== */
.left-column, #left-column {
  padding-right: 24px !important;
}

.block-categories, .faceted-search,
#left-column .block {
  background: var(--sr-white) !important;
  border: 1px solid var(--sr-border) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}

/* ===================== FOOTER ===================== */
.footer-container, #footer {
  background: var(--sr-primary) !important;
  color: rgba(255,255,255,0.8) !important;
}

#footer h4, #footer .h4,
.footer-container h4 {
  font-family: var(--font-display) !important;
  color: var(--sr-white) !important;
  font-size: 1.2rem !important;
}

#footer a, .footer-container a {
  color: rgba(255,255,255,0.7) !important;
  transition: color 0.2s ease !important;
}

#footer a:hover, .footer-container a:hover {
  color: var(--sr-white) !important;
}

.footer-before, #footer .footer-before,
.block-newsletter {
  background: var(--sr-off-white) !important;
  border-radius: 16px !important;
  padding: 40px !important;
  margin-bottom: 40px !important;
}

.block-newsletter input[type="email"] {
  border-radius: 8px 0 0 8px !important;
  border: 2px solid var(--sr-border) !important;
  padding: 12px 16px !important;
}

.block-newsletter button {
  border-radius: 0 8px 8px 0 !important;
  background: var(--sr-accent) !important;
  border: none !important;
}

/* Footer bottom */
.footer-bottom, .footer-copyright {
  background: var(--sr-primary-dark) !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
}

/* ===================== BREADCRUMB ===================== */
.breadcrumb {
  background: transparent !important;
  padding: 16px 0 !important;
  font-size: 13px !important;
}

.breadcrumb a { color: var(--sr-text-secondary) !important; }
.breadcrumb .active { color: var(--sr-text) !important; }

/* ===================== PRODUCT PAGE ===================== */
.product-prices .current-price .price {
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  font-size: 2rem !important;
  color: var(--sr-text) !important;
}

.product-add-to-cart .add-to-cart {
  background: var(--sr-primary) !important;
  border-radius: 8px !important;
  padding: 14px 32px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.product-add-to-cart .add-to-cart:hover {
  background: var(--sr-primary-dark) !important;
}

/* Tabs on product page */
.nav-tabs .nav-link {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  color: var(--sr-text-secondary) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 12px 20px !important;
}

.nav-tabs .nav-link.active {
  color: var(--sr-text) !important;
  border-bottom-color: var(--sr-primary) !important;
  background: transparent !important;
}

/* ===================== CART / CHECKOUT ===================== */
.cart-grid .cart-items .cart-item {
  border-radius: 12px !important;
  border: 1px solid var(--sr-border) !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}

/* ===================== ANIMATIONS ===================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.product-miniature {
  animation: fadeInUp 0.4s ease forwards;
}

/* ===================== MOBILE RESPONSIVE ===================== */
@media (max-width: 768px) {
  h1 { font-size: 1.6rem !important; }
  h2, .section-title { font-size: 1.4rem !important; }
  
  .product-miniature {
    border-radius: 8px !important;
  }
}

/* ===================== SCROLLBAR ===================== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--sr-off-white); }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #999; }

/* Hide disabled banner modules */
#cpcmsbanner1_block1,
.cp_cmsbanner1,
.cp_cmsbanner2,
.cp_cmsbanner3,
.cp_cmsbanner4,
#cpcmsbanner2_block1,
#cpcmsbanner3_block1,
#cpcmsbanner4_block1 {
    display: none !important;
}





/* ========== HEADER: WHITE BACKGROUND ========== */
.header-top,
#header .header-top {
    background: #ffffff !important;
    border-bottom: 1px solid #e8e8e8 !important;
}

/* ========== HIDE TOP NAV BAR (Nos Magasins, Suivre Ma Commande, Mon Compte) ========== */
.header-nav,
#header .header-nav,
nav.header-nav {
    display: none !important;
}

/* ========== HEADER TEXT: BLACK ========== */
.header-top a,
.header-top .menu a,
.header-top .top-menu > li > a,
#_desktop_top_menu a,
.cbp-hrmenu .cbp-hrsub-inner a,
.menu .top-menu a,
.top-menu > li > a,
.header-top .material-icons,
#search_widget .material-icons,
.blockcart .header a,
.user-info a,
#_desktop_cart a,
.wishlist-link,
.compare-link,
.header-top i {
    color: #222222 !important;
}

/* Menu bar background white */
.cbp-hrmenu,
.menu,
.top-menu-wrapper,
#cbp-hrmenu {
    background: #ffffff !important;
}

/* Category bar / main menu */
.menu-container,
.header-top .menu,
#_desktop_top_menu {
    background: #ffffff !important;
}

/* Parcourir les catégories button */
.category-menu-btn,
.all-categories,
.menu .category-top-menu {
    color: #222 !important;
}

/* Search button GREEN */
.search-widget form button[type="submit"],
#search_widget button {
    background-color: #009650 !important;
    border-color: #009650 !important;
    color: #fff !important;
}

/* Cart badge green */
.blockcart .cart-products-count,
.header .cart-products-count {
    background-color: #009650 !important;
}

/* ========== HIDE BRAND LOGOS CAROUSEL ========== */
.cp_brandlogo,
#cp_brandlogo,
.brand-slider,
.cp_brandslider,
.manufacturer_slider,
.brand_slider,
[id*="brandlogo"],
[class*="brandlogo"],
[class*="brand-slider"],
[class*="manufacturer_slider"] {
    display: none !important;
}