/**
 * Custom Styles - Border Radius & Modern UI
 * Styles globaux pour un design moderne et cohérent
 */

/* ==========================================================================
   Variables CSS
   ========================================================================== */
:root {
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-full: 50px;
  --primary-color: #cc9966;
  --primary-hover: #b38855;
}

/* ==========================================================================
   Cards & Panels
   ========================================================================== */
.product,
.product-default,
.product-7,
.product-sm {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}

.product-media,
.product figure {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  overflow: hidden;
}

.product-image {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.card,
.card-dashboard {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}

.banner {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  border-radius: var(--radius-sm) !important;
}

.btn-rounded {
  border-radius: var(--radius-full) !important;
}

.btn-primary,
.btn-outline-primary,
.btn-outline-primary-2 {
  border-radius: var(--radius-sm) !important;
}

.btn-product,
.btn-cart,
.btn-wishlist {
  border-radius: var(--radius-sm) !important;
}

.btn-product span {
  border-radius: var(--radius-sm) !important;
}

.btn-load-more {
  border-radius: var(--radius-sm) !important;
}

/* ==========================================================================
   Form Inputs
   ========================================================================== */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
  border-radius: var(--radius-sm) !important;
}

.form-control:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15) !important;
}

.input-group {
  border-radius: var(--radius-sm) !important;
  overflow: hidden;
}

.input-group .form-control {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}

.input-group .btn,
.input-group-append .btn {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

/* Custom checkbox & radio */
.custom-control-label::before,
.custom-control-label::after {
  border-radius: 4px !important;
}

.custom-radio .custom-control-label::before,
.custom-radio .custom-control-label::after {
  border-radius: 50% !important;
}

/* ==========================================================================
   Modals
   ========================================================================== */
.modal-content {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}

.modal-header {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.modal-footer {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}

.form-box {
  border-radius: var(--radius-lg) !important;
}

/* ==========================================================================
   Alerts & Notifications
   ========================================================================== */
.alert {
  border-radius: var(--radius-md) !important;
}

.toast {
  border-radius: var(--radius-md) !important;
}

/* ==========================================================================
   Badges & Labels
   ========================================================================== */
.badge,
.product-label {
  border-radius: 4px !important;
}

.badge-pill {
  border-radius: var(--radius-full) !important;
}

/* ==========================================================================
   Images & Thumbnails
   ========================================================================== */
.product-gallery-item img,
.product-main-image img {
  border-radius: var(--radius-md) !important;
}

.owl-carousel .owl-item img {
  border-radius: var(--radius-md) !important;
}

.intro-slide img,
.banner-slide img {
  border-radius: var(--radius-lg) !important;
}

/* ==========================================================================
   Navigation & Tabs
   ========================================================================== */
.nav-tabs .nav-link {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
}

.nav-pills .nav-link {
  border-radius: var(--radius-sm) !important;
}

.dropdown-menu {
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}

.dropdown-item:first-child {
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}

.dropdown-item:last-child {
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}

/* ==========================================================================
   Cart & Checkout
   ========================================================================== */
.cart-product-img,
.cart-product-img img {
  border-radius: var(--radius-sm) !important;
}

.summary,
.summary-shipping {
  border-radius: var(--radius-lg) !important;
}

.address-card,
.pickup-card {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}

/* ==========================================================================
   Sidebar & Filters
   ========================================================================== */
.sidebar-shop,
.sidebar-filter {
  border-radius: var(--radius-lg) !important;
}

.widget {
  border-radius: var(--radius-md) !important;
}

/* ==========================================================================
   Search Box
   ========================================================================== */
.search-wrapper,
.header-search {
  border-radius: var(--radius-full) !important;
  overflow: hidden;
}

.header-search .form-control {
  border-radius: var(--radius-full) !important;
}

.header-search .btn {
  border-radius: 0 var(--radius-full) var(--radius-full) 0 !important;
}

/* ==========================================================================
   Product Action Buttons
   ========================================================================== */
.product-action-vertical {
  border-radius: var(--radius-sm) !important;
}

/* .product-action est collée en bas de .product-media (bottom:0), dont les
   coins bas sont carrés (seul le haut est arrondi). Un radius sur les 4
   coins de la barre grignotait son propre coin bas — l'image du produit
   apparaissait dans ce petit triangle non couvert. On n'arrondit donc que
   le haut, et on force un fond blanc opaque (le thème utilise
   rgba(255,255,255,0.95), qui laissait aussi transparaître l'image). */
.product-action {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  background-color: #fff !important;
}

.product-action a,
.product-action-vertical a {
  border-radius: var(--radius-sm) !important;
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.page-link {
  border-radius: var(--radius-sm) !important;
}

.page-item:first-child .page-link {
  border-radius: var(--radius-sm) !important;
}

.page-item:last-child .page-link {
  border-radius: var(--radius-sm) !important;
}

/* ==========================================================================
   Countdown Timer
   ========================================================================== */
.product-countdown {
  border-radius: var(--radius-sm) !important;
}

.countdown-section {
  border-radius: var(--radius-sm) !important;
}

/* ==========================================================================
   Ratings
   ========================================================================== */
.ratings-container {
  border-radius: var(--radius-sm) !important;
}

/* ==========================================================================
   Wishlist & Compare
   ========================================================================== */
.wishlist-table img,
.compare-table img {
  border-radius: var(--radius-sm) !important;
}

/* ==========================================================================
   User Account
   ========================================================================== */
.dashboard-content {
  border-radius: var(--radius-lg) !important;
}

.order-summary {
  border-radius: var(--radius-lg) !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer-newsletter .form-control {
  border-radius: var(--radius-full) 0 0 var(--radius-full) !important;
}

.footer-newsletter .btn {
  border-radius: 0 var(--radius-full) var(--radius-full) 0 !important;
}

.footer a:hover,
.footer a:focus {
  color: var(--primary-color) !important;
}

/* ==========================================================================
   Page header title span
   ========================================================================== */
.page-header h1 span {
  color: var(--primary-color) !important;
}

/* ==========================================================================
   Titre produit hover
   ========================================================================== */
.product-title a:hover,
.product-title a:focus {
  color: var(--primary-color) !important;
}

/* ==========================================================================
   btn-outline-darker (bouton "Plus d'articles")
   ========================================================================== */
.btn-outline-darker:hover,
.btn-outline-darker:focus,
.btn-outline-darker:not(:disabled):not(.disabled):active,
.btn-outline-darker:not(:disabled):not(.disabled).active {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

/* ==========================================================================
   Product Action Button Hover
   ========================================================================== */
.btn-product {
  color: var(--primary-color) !important;
}

.btn-product span {
  color: var(--primary-color) !important;
}

/* Boutons ronds des cartes (favoris…) : le thème code #cc9966 en dur pour le fond au
   survol et pour le libellé qui se déplie ; on suit la couleur de la boutique. */
.btn-product-icon:hover,
.btn-product-icon:focus {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}

/* sélecteur renforcé : useBranding.js colore `.btn-wishlist:hover::before` avec la couleur
   de la boutique, ce qui rendrait le cœur invisible sur le fond de la même couleur */
.btn-product-icon:hover::before,
.btn-product-icon:focus::before,
.btn-product-icon.btn-wishlist:hover::before,
.btn-product-icon.btn-wishlist:focus::before {
  color: #fff !important;
}

.btn-expandable span {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}

.product.product-4 .btn-product:hover span,
.product.product-4 .btn-product:focus span,
.product.product-5 .btn-product:hover span,
.product.product-5 .btn-product:focus span,
.product.product-7 .btn-product:hover span,
.product.product-7 .btn-product:focus span,
.product.product-8 .btn-product:hover span,
.product.product-8 .btn-product:focus span,
.product.product-10 .btn-product:hover span,
.product.product-10 .btn-product:focus span,
.product.product-11 .btn-product:hover span,
.product.product-11 .btn-product:focus span,
.product.product-list .btn-product:hover span,
.product.product-list .btn-product:focus span {
  color: #fff !important;
  box-shadow: none !important;
}

/* ==========================================================================
   Hover Effects Enhancement
   ========================================================================== */
.product:hover {
  /*box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);*/
}

.product .product-body {
  margin-left: 1px;
}

.card:hover,
.card-dashboard:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Scrollbar Styling
   ========================================================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

/* ==========================================================================
   Tooltip
   ========================================================================== */
.tooltip-inner {
  border-radius: var(--radius-sm) !important;
}

/* ==========================================================================
   Popover
   ========================================================================== */
.popover {
  border-radius: var(--radius-md) !important;
}

.popover-header {
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}

/* ==========================================================================
   Product card actions on touch devices
   Sans souris, il n'y a pas de :hover fiable pour révéler "Ajouter au
   panier" — on force les actions du produit à rester visibles sur les
   appareils tactiles, sans toucher au comportement desktop (hover).
   ========================================================================== */
@media (hover: none) {
  .product-action,
  .product-action-vertical {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }
}

/* ==========================================================================
   Panier mobile — disposition des cartes produit
   Le thème empile chaque cellule (image+nom, prix, quantité, total) sur sa
   propre ligne centrée, avec 4.2rem/4rem de padding haut/bas par ligne rien
   que pour caser la croix "supprimer" en absolu — des cartes démesurées pour
   4 infos courtes. On repasse prix/quantité/total sur une seule ligne sous
   l'image+nom, via une grille, et on resserre les espacements.
   ========================================================================== */
@media screen and (max-width: 991px) {
  .table-mobile tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "product product product"
      "price   quantity total";
    align-items: center;
    row-gap: 0.5rem;
    padding-top: 1.8rem !important;
    padding-bottom: 1.4rem !important;
  }

  .table-mobile tr td {
    width: auto !important;
    padding: 0.2rem 0.5rem !important;
  }

  .table-mobile .product-col {
    grid-area: product;
    text-align: left !important;
    padding-bottom: 0.3rem !important;
  }

  .table-mobile .product-col .product {
    justify-content: flex-start !important;
  }

  .table-mobile .price-col {
    grid-area: price;
  }

  .table-mobile .quantity-col {
    grid-area: quantity;
  }

  .table-mobile .total-col {
    grid-area: total;
    font-weight: 600;
  }

  .table-mobile .cart-product-quantity {
    width: 100%;
    max-width: 110px;
    margin: 0 auto !important;
  }
}

/* Prix des produits en gras (cartes, listes, fiche produit) ; l'ancien prix barré reste en maigre */
.product-price {
    font-weight: 600;
}
.product-price .old-price {
    font-weight: 400;
}