/*
 * Maison Hermen Custom Theme
 * Main color: #EBD4BA (warm beige/sand)
 * Accent: #C9A86C (golden tan)
 */

/* ==========================================================================
   1. BASE STYLES
   ========================================================================== */

body {
  background-color: #F5EDE3 !important;
  color: #3A3228 !important;
}

/* Links */
a {
  color: #C9A86C !important;
  transition: color 0.2s ease;
}

a:hover,
a:focus {
  color: #A07B4F !important;
}

/* Selection highlight */
::selection {
  background-color: #EBD4BA;
  color: #3A3228;
}

/* ==========================================================================
   2. HEADER
   ========================================================================== */

#header {
  background-color: #EBD4BA !important;
}

.header-banner {
  background-color: #EBD4BA !important;
}

.header-nav {
  background-color: #3A3228 !important;
  border-bottom: none !important;
}

.header-nav a,
.header-nav .user-info a,
#contact-link a {
  color: #F5EDE3 !important;
}

.header-nav a:hover,
.header-nav .user-info a:hover,
#contact-link a:hover {
  color: #C9A86C !important;
}

.header-nav .material-icons {
  color: #F5EDE3 !important;
}

.header-top {
  background-color: #EBD4BA !important;
  padding: 1rem 0;
}

/* Cart icon */
.blockcart {
  background-color: transparent !important;
}

.blockcart .header {
  color: #F5EDE3 !important;
}

.blockcart:hover .header {
  color: #C9A86C !important;
}

/* ==========================================================================
   3. NAVIGATION
   ========================================================================== */

.top-menu {
  margin-bottom: 0 !important;
}

.top-menu a.dropdown-item,
.top-menu .category > a {
  color: #3A3228 !important;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.top-menu a.dropdown-item:hover,
.top-menu .category > a:hover {
  color: #C9A86C !important;
  background-color: transparent !important;
}

/* Dropdown menus */
.top-menu .sub-menu {
  background-color: #fff !important;
  border: 1px solid #D4C4AA !important;
  box-shadow: 0 4px 12px rgba(58, 50, 40, 0.1) !important;
}

.top-menu .sub-menu a {
  color: #3A3228 !important;
}

.top-menu .sub-menu a:hover {
  color: #C9A86C !important;
  background-color: #F5EDE3 !important;
}

/* ==========================================================================
   4. SEARCH WIDGET
   ========================================================================== */

#search_widget {
  min-width: 200px;
}

#search_widget form input[type="text"] {
  background-color: #fff !important;
  border: 1px solid #D4C4AA !important;
  color: #3A3228 !important;
  border-radius: 20px !important;
  padding: 8px 16px !important;
}

#search_widget form input[type="text"]:focus {
  border-color: #C9A86C !important;
  box-shadow: 0 0 0 2px rgba(201, 168, 108, 0.2) !important;
  outline: none !important;
}

#search_widget form input[type="text"]::placeholder {
  color: #6B5A47 !important;
}

#search_widget .material-icons {
  color: #6B5A47 !important;
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

/* Primary buttons */
.btn-primary {
  background-color: #C9A86C !important;
  border-color: #C9A86C !important;
  color: #3A3228 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s ease !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #B8956B !important;
  border-color: #B8956B !important;
  color: #3A3228 !important;
}

.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: #A07B4F !important;
  border-color: #A07B4F !important;
  color: #fff !important;
}

/* Secondary buttons */
.btn-secondary {
  background-color: transparent !important;
  border: 2px solid #C9A86C !important;
  color: #C9A86C !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s ease !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #C9A86C !important;
  border-color: #C9A86C !important;
  color: #3A3228 !important;
}

/* Tertiary/outline buttons */
.btn-outline-primary {
  border-color: #C9A86C !important;
  color: #C9A86C !important;
}

.btn-outline-primary:hover {
  background-color: #C9A86C !important;
  color: #3A3228 !important;
}

/* ==========================================================================
   6. PRODUCT CARDS
   ========================================================================== */

.product-miniature {
  background-color: #fff !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.product-miniature:hover {
  box-shadow: 0 8px 24px rgba(58, 50, 40, 0.12) !important;
  transform: translateY(-4px) !important;
}

.thumbnail-container {
  background-color: #fff !important;
}

.product-description {
  padding: 1rem !important;
}

.product-title a {
  color: #3A3228 !important;
  font-weight: 600 !important;
}

.product-title a:hover {
  color: #C9A86C !important;
}

/* Prices */
.product-price-and-shipping .price {
  color: #C9A86C !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
}

.regular-price {
  color: #6B5A47 !important;
}

/* Quick view */
.highlighted-informations {
  background-color: rgba(235, 212, 186, 0.95) !important;
}

.quick-view {
  color: #3A3228 !important;
}

.quick-view:hover {
  color: #C9A86C !important;
}

/* ==========================================================================
   7. PRODUCT FLAGS
   ========================================================================== */

.product-flag {
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-size: 0.75rem !important;
  padding: 4px 10px !important;
}

.product-flag.new {
  background-color: #E8A07A !important;
  color: #fff !important;
}

.product-flag.on-sale,
.product-flag.discount {
  background-color: #C9A86C !important;
  color: #3A3228 !important;
}

.discount-percentage,
.discount-amount {
  background-color: #E8A07A !important;
  color: #fff !important;
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */

#footer {
  background-color: #EBD4BA !important;
  color: #3A3228 !important;
  margin-top: 3rem !important;
}

.footer-container {
  background-color: #3A3228 !important;
  color: #F5EDE3 !important;
  padding: 2rem 0 !important;
}

.footer-container .h3,
.footer-container h3,
.footer-container .title {
  color: #EBD4BA !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.footer-container a {
  color: #F5EDE3 !important;
}

.footer-container a:hover {
  color: #C9A86C !important;
}

.footer-container .links ul li {
  margin-bottom: 0.5rem;
}

/* Footer bottom */
.footer-container .copyright {
  color: #D4C4AA !important;
}

/* Social links */
.block-social ul li a {
  color: #3A3228 !important;
  background-color: #fff !important;
  border-radius: 50% !important;
  padding: 8px !important;
  transition: all 0.2s ease !important;
}

.block-social ul li a:hover {
  background-color: #C9A86C !important;
  color: #fff !important;
}

/* ==========================================================================
   9. NEWSLETTER
   ========================================================================== */

.block_newsletter {
  background-color: #EBD4BA !important;
  padding: 2rem !important;
  border-radius: 8px !important;
}

.block_newsletter #block-newsletter-label {
  color: #3A3228 !important;
  font-weight: 600 !important;
}

.block_newsletter input[type="email"] {
  background-color: #fff !important;
  border: 1px solid #D4C4AA !important;
  color: #3A3228 !important;
  border-radius: 4px !important;
}

.block_newsletter input[type="email"]:focus {
  border-color: #C9A86C !important;
  box-shadow: 0 0 0 2px rgba(201, 168, 108, 0.2) !important;
}

.block_newsletter p {
  color: #6B5A47 !important;
  font-size: 0.85rem !important;
}

/* ==========================================================================
   10. BREADCRUMBS
   ========================================================================== */

.breadcrumb {
  background-color: transparent !important;
  padding: 1rem 0 !important;
}

.breadcrumb li {
  color: #6B5A47 !important;
}

.breadcrumb li a {
  color: #6B5A47 !important;
}

.breadcrumb li a:hover {
  color: #C9A86C !important;
}

.breadcrumb li::after {
  color: #D4C4AA !important;
}

/* ==========================================================================
   11. PRODUCT PAGE
   ========================================================================== */

.product-cover img {
  border-radius: 8px !important;
}

.product-thumbs li {
  border: 2px solid transparent !important;
  border-radius: 4px !important;
}

.product-thumbs li.selected,
.product-thumbs li:hover {
  border-color: #C9A86C !important;
}

.product-prices .current-price-value {
  color: #C9A86C !important;
  font-weight: 700 !important;
}

.product-add-to-cart .add-to-cart {
  background-color: #C9A86C !important;
  border-color: #C9A86C !important;
  color: #3A3228 !important;
}

.product-add-to-cart .add-to-cart:hover {
  background-color: #B8956B !important;
  border-color: #B8956B !important;
}

.product-quantity .input-group .form-control {
  border-color: #D4C4AA !important;
}

.product-quantity .input-group .btn {
  border-color: #D4C4AA !important;
  color: #3A3228 !important;
}

.product-quantity .input-group .btn:hover {
  background-color: #EBD4BA !important;
}

/* Tabs */
.product-tabs .nav-tabs {
  border-bottom-color: #D4C4AA !important;
}

.product-tabs .nav-tabs .nav-link {
  color: #6B5A47 !important;
}

.product-tabs .nav-tabs .nav-link.active {
  color: #3A3228 !important;
  border-color: #D4C4AA #D4C4AA #fff !important;
}

.product-tabs .nav-tabs .nav-link:hover {
  color: #C9A86C !important;
}

/* ==========================================================================
   12. FORMS
   ========================================================================== */

.form-control {
  border-color: #D4C4AA !important;
  color: #3A3228 !important;
}

.form-control:focus {
  border-color: #C9A86C !important;
  box-shadow: 0 0 0 2px rgba(201, 168, 108, 0.2) !important;
}

label {
  color: #3A3228 !important;
}

/* Checkboxes and radios */
.custom-checkbox input[type="checkbox"]:checked + span {
  background-color: #C9A86C !important;
  border-color: #C9A86C !important;
}

.custom-radio input[type="radio"]:checked + span {
  border-color: #C9A86C !important;
}

.custom-radio input[type="radio"]:checked + span::after {
  background-color: #C9A86C !important;
}

/* ==========================================================================
   13. ALERTS & NOTIFICATIONS
   ========================================================================== */

.alert-info {
  background-color: #EBD4BA !important;
  border-color: #D4C4AA !important;
  color: #3A3228 !important;
}

.alert-success {
  background-color: #d4edda !important;
  border-color: #c3e6cb !important;
  color: #155724 !important;
}

.alert-warning {
  background-color: #fff3cd !important;
  border-color: #ffeeba !important;
  color: #856404 !important;
}

.alert-danger {
  background-color: #f8d7da !important;
  border-color: #f5c6cb !important;
  color: #721c24 !important;
}

/* ==========================================================================
   14. MODALS
   ========================================================================== */

.modal-header {
  background-color: #EBD4BA !important;
  border-bottom-color: #D4C4AA !important;
}

.modal-header .modal-title {
  color: #3A3228 !important;
}

.modal-header .close {
  color: #3A3228 !important;
}

.modal-footer {
  border-top-color: #D4C4AA !important;
}

/* ==========================================================================
   15. PAGINATION
   ========================================================================== */

.pagination .page-link {
  color: #3A3228 !important;
  border-color: #D4C4AA !important;
}

.pagination .page-link:hover {
  background-color: #EBD4BA !important;
  color: #3A3228 !important;
}

.pagination .page-item.active .page-link {
  background-color: #C9A86C !important;
  border-color: #C9A86C !important;
  color: #3A3228 !important;
}

/* ==========================================================================
   16. CART
   ========================================================================== */

.cart-grid-body {
  background-color: #fff !important;
}

.cart-summary {
  background-color: #EBD4BA !important;
}

.cart-summary-line .value {
  color: #3A3228 !important;
}

.cart-total .value {
  color: #C9A86C !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   17. REASSURANCE BLOCK
   ========================================================================== */

.blockreassurance {
  background-color: #fff !important;
  padding: 2rem 0 !important;
}

.blockreassurance .block-icon svg,
.blockreassurance .block-icon img {
  fill: #C9A86C !important;
  color: #C9A86C !important;
}

.blockreassurance .block-title {
  color: #3A3228 !important;
}

/* ==========================================================================
   18. MOBILE MENU
   ========================================================================== */

#mobile_top_menu_wrapper {
  background-color: #EBD4BA !important;
}

.mobile .top-menu a {
  color: #3A3228 !important;
}

.mobile .top-menu a:hover {
  color: #C9A86C !important;
}

/* Mobile menu icon */
#menu-icon i {
  color: #F5EDE3 !important;
}

/* ==========================================================================
   19. IMAGE SLIDER / CAROUSEL
   ========================================================================== */

.carousel-control {
  background-color: rgba(201, 168, 108, 0.8) !important;
}

.carousel-control:hover {
  background-color: rgba(201, 168, 108, 1) !important;
}

.carousel-control .icon-prev,
.carousel-control .icon-next {
  color: #3A3228 !important;
}

/* ==========================================================================
   20. WISHLIST
   ========================================================================== */

.wishlist-button-add i,
.wishlist-button-add .material-icons {
  color: #C9A86C !important;
}

.wishlist-button-add:hover i,
.wishlist-button-add:hover .material-icons {
  color: #E8A07A !important;
}

/* ==========================================================================
   21. FIXES - CAROUSEL CONTROLS
   ========================================================================== */

/* Carousel controls with gradient effect */
.carousel-control {
  background: transparent !important;
  width: 15% !important;
  opacity: 1 !important;
}

.carousel-control.left {
  background: linear-gradient(to right, rgba(201, 168, 108, 0.6) 0%, transparent 100%) !important;
}

.carousel-control.right {
  background: linear-gradient(to left, rgba(201, 168, 108, 0.6) 0%, transparent 100%) !important;
}

/* No change on hover */
.carousel-control:hover,
.carousel-control:focus {
  opacity: 1 !important;
}

.carousel-control.left:hover,
.carousel-control.left:focus {
  background: linear-gradient(to right, rgba(201, 168, 108, 0.6) 0%, transparent 100%) !important;
}

.carousel-control.right:hover,
.carousel-control.right:focus {
  background: linear-gradient(to left, rgba(201, 168, 108, 0.6) 0%, transparent 100%) !important;
}

/* Arrow icon colors - fix blue on hover */
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .icon-prev::before,
.carousel-control .icon-next::before {
  color: #3A3228 !important;
}

.carousel-control .icon-prev i,
.carousel-control .icon-next i,
.carousel-control .icon-prev .material-icons,
.carousel-control .icon-next .material-icons {
  color: #3A3228 !important;
}

.carousel-control:hover .icon-prev,
.carousel-control:hover .icon-next,
.carousel-control:focus .icon-prev,
.carousel-control:focus .icon-next {
  color: #3A3228 !important;
}

.carousel-control:hover .icon-prev i,
.carousel-control:hover .icon-next i,
.carousel-control:focus .icon-prev i,
.carousel-control:focus .icon-next i {
  color: #3A3228 !important;
}

/* Arrow click/active effect - fix blue color on click */
.carousel-control:active,
.carousel-control:active:focus,
.carousel-control:active:hover {
  color: #3A3228 !important;
}

.carousel-control:active .icon-prev,
.carousel-control:active .icon-next,
.carousel-control:active .icon-prev i,
.carousel-control:active .icon-next i,
.carousel-control:active .icon-prev .material-icons,
.carousel-control:active .icon-next .material-icons,
.carousel-control:active .material-icons {
  color: #3A3228 !important;
  transform: scale(0.9) !important;
  transition: transform 0.1s ease !important;
}

/* ==========================================================================
   22. FIXES - FOOTER COLORS
   ========================================================================== */

/* Footer "Informations" title - should be white/light */
.footer-container .block-contact .h3,
.footer-container .block-contact .title span.h3,
.footer-container .block-contact-title,
.footer-container .block-contact .h4,
.footer-container .block-contact p.h4 {
  color: #EBD4BA !important;
}

/* Footer contact info text - should be white/light */
.footer-container .block-contact,
.footer-container .block-contact #contact-infos,
.footer-container #contact-infos {
  color: #F5EDE3 !important;
}

/* ==========================================================================
   23. FIXES - PRODUCT IMAGE SELECTED BORDER
   ========================================================================== */

.product-images > li.thumb-container .thumb.selected,
.product-images > li.thumb-container .thumb:hover,
.thumb.selected,
.thumb.js-thumb-selected,
.js-thumb.selected {
  border: 3px solid #C9A86C !important;
}

/* ==========================================================================
   24. FIXES - FORM FOCUS STATES (remove blue outline)
   ========================================================================== */

/* Generic focus outline removal and replacement */
*:focus {
  outline-color: #C9A86C !important;
}

/* Form controls focus */
.form-control:focus,
input:focus,
textarea:focus,
select:focus,
.form-control-select:focus {
  border-color: #C9A86C !important;
  box-shadow: 0 0 0 0.2rem rgba(201, 168, 108, 0.25) !important;
  outline: none !important;
}

/* Select dropdowns */
select.form-control:focus,
.form-control-select:focus {
  border-color: #C9A86C !important;
  box-shadow: 0 0 0 0.2rem rgba(201, 168, 108, 0.25) !important;
  outline: none !important;
}

/* Bootstrap-style focus ring override */
.form-control:focus,
.btn:focus,
.btn.focus {
  box-shadow: 0 0 0 0.2rem rgba(201, 168, 108, 0.25) !important;
}

/* ==========================================================================
   25. FIXES - BLOCKCART MODAL
   ========================================================================== */

#blockcart-modal .product-name,
#blockcart-modal .product-name a {
  color: #3A3228 !important;
}

#blockcart-modal .product-name:hover,
#blockcart-modal .product-name a:hover {
  color: #C9A86C !important;
}

#blockcart-modal .modal-header {
  background-color: #EBD4BA !important;
}

#blockcart-modal .cart-content .cart-content-btn .btn-primary {
  background-color: #C9A86C !important;
  border-color: #C9A86C !important;
  color: #3A3228 !important;
}

/* ==========================================================================
   26. FIXES - TABS NAV BORDER
   ========================================================================== */

/* Tab items active state - remove blue bottom border */
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:focus,
.nav-tabs .nav-item.show .nav-link {
  color: #3A3228 !important;
  border-color: #D4C4AA #D4C4AA transparent !important;
  border-bottom-color: transparent !important;
  background-color: #fff !important;
}

/* Active tab with accent underline instead */
.tabs .nav-tabs .nav-link.active,
.product-tabs .nav-tabs .nav-link.active {
  border-bottom: 3px solid #C9A86C !important;
  border-color: transparent transparent #C9A86C transparent !important;
  margin-bottom: -1px !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border-color: transparent !important;
  color: #C9A86C !important;
}

/* ==========================================================================
   27. FIXES - FILE INPUT BUTTON
   ========================================================================== */

/* Bootstrap filestyle button */
.bootstrap-filestyle .btn-default,
.btn-default,
.filestyle + .bootstrap-filestyle-wrapper .btn,
input[type="file"] + .btn,
.group-span-filestyle .btn {
  background-color: #EBD4BA !important;
  border-color: #D4C4AA !important;
  color: #3A3228 !important;
}

.bootstrap-filestyle .btn-default:hover,
.btn-default:hover,
.group-span-filestyle .btn:hover {
  background-color: #D4C4AA !important;
  border-color: #C9A86C !important;
  color: #3A3228 !important;
}

/* ==========================================================================
   28. FIXES - RADIO BUTTON DOT (Titre M./Mme)
   ========================================================================== */

/* Radio button outer ring when checked */
.custom-radio input[type="radio"]:checked + span,
.custom-radio input[type="radio"]:checked + span.radio-on {
  border-color: #C9A86C !important;
}

/* Radio button inner dot - the span itself gets the background color */
.custom-radio input[type="radio"]:checked + span {
  background-color: #C9A86C !important;
}

/* Radio button inner dot when checked (::after fallback) */
.custom-radio input[type="radio"]:checked + span::after,
.custom-radio input[type="radio"]:checked + span .radio-on::after {
  background-color: #C9A86C !important;
}

/* Radio focus state */
.custom-radio input[type="radio"]:focus + span {
  border-color: #C9A86C !important;
  box-shadow: 0 0 0 0.2rem rgba(201, 168, 108, 0.25) !important;
}

/* ==========================================================================
   28b. FIXES - INPUT GROUP FOCUS (Password fields)
   ========================================================================== */

/* Input group focus state - JS adds .focus class */
.input-group.focus {
  outline: 0.1875rem solid #C9A86C !important;
}

.input-group.js-parent-focus.focus {
  outline: 0.1875rem solid #C9A86C !important;
}

/* Password visibility toggle button */
.input-group .input-group-btn > .btn[data-action="show-password"] {
  background-color: #6B5A47 !important;
  border-color: #6B5A47 !important;
  color: #fff !important;
}

.input-group .input-group-btn > .btn[data-action="show-password"]:hover {
  background-color: #C9A86C !important;
  border-color: #C9A86C !important;
}

/* ==========================================================================
   29. FIXES - ADDITIONAL BLUE COLOR OVERRIDES
   ========================================================================== */

/* Any remaining blue links */
a.text-primary,
.text-primary {
  color: #C9A86C !important;
}

a.text-primary:hover,
.text-primary:hover {
  color: #A07B4F !important;
}

/* Contact page info block */
.contact-rich h4 {
  color: #3A3228 !important;
}

/* Bootstrap default colors override */
.text-info {
  color: #C9A86C !important;
}

.bg-primary {
  background-color: #C9A86C !important;
}

.border-primary {
  border-color: #C9A86C !important;
}