/* CSS Reset & Base Styles */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: 'Nunito', sans-serif;
   line-height: 1.6;
   color: #333;
   background-color: #f5f5f5;
   font-size: clamp(0.875rem, 2vw, 1rem);
}

:root {
   --main-color: #2980b9;
   --orange: #f39c12;
   --red: #1169f7;
   --black: #1169f7;
   --white: #fff;
   --light-color: #666;
   --light-bg: #eee;
   --border: .2rem solid var(--black);
   --box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);

   /* Nouvelles variables harmonisées avec shop-index.css */
   --font-size-xs: clamp(0.7rem, 2vw, 0.75rem);
   --font-size-sm: clamp(0.8rem, 2.2vw, 0.875rem);
   --font-size-base: clamp(0.9rem, 2.5vw, 1rem);
   --font-size-lg: clamp(1rem, 2.8vw, 1.125rem);
   --font-size-xl: clamp(1.1rem, 3vw, 1.25rem);
   --font-size-2xl: clamp(1.3rem, 3.5vw, 1.5rem);
   --font-size-3xl: clamp(1.6rem, 4vw, 1.875rem);
   --font-size-4xl: clamp(1.8rem, 5vw, 2.25rem);
   --font-size-5xl: clamp(2.2rem, 6vw, 3rem);
   --font-size-6xl: clamp(2.8rem, 7vw, 3.75rem);

   --padding-xs: clamp(0.2rem, 0.8vw, 0.25rem);
   --padding-sm: clamp(0.4rem, 1.2vw, 0.5rem);
   --padding-base: clamp(0.6rem, 1.5vw, 0.75rem);
   --padding-md: clamp(0.8rem, 2vw, 1rem);
   --padding-lg: clamp(1rem, 2.5vw, 1.25rem);
   --padding-xl: clamp(1.2rem, 3vw, 1.5rem);
   --padding-2xl: clamp(1.5rem, 4vw, 2rem);

   --radius-sm: clamp(0.5rem, 1.5vw, 0.8rem);
   --radius-md: clamp(0.8rem, 2vw, 1.2rem);
   --radius-lg: clamp(1rem, 3vw, 1.6rem);
   --radius-full: 9999px;

   --gap-xs: clamp(0.2rem, 0.8vw, 0.25rem);
   --gap-sm: clamp(0.4rem, 1.2vw, 0.5rem);
   --gap-base: clamp(0.6rem, 1.5vw, 0.75rem);
   --gap-md: clamp(0.8rem, 2vw, 1rem);
   --gap-lg: clamp(1rem, 2.5vw, 1.25rem);
   --gap-xl: clamp(1.2rem, 3vw, 1.5rem);
   --gap-2xl: clamp(1.5rem, 4vw, 2rem);

   --container-padding: clamp(1rem, 3vw, 2.5rem);
   --section-padding: clamp(2rem, 5vw, 5rem);
}

/* Hashtag Styling - SIP SARLU */
.hashtag {
  color: #38b2ac;
  font-weight: 600;
  text-decoration: none;
  padding: var(--padding-xs) var(--padding-sm);
  border-radius: var(--radius-sm);
  background-color: rgba(56, 178, 172, 0.1);
  transition: background 0.3s ease, color 0.3s ease;
  font-size: var(--font-size-sm);
}

.hashtag:hover {
  background-color: #38b2ac;
  color: white;
}

* {
   font-family: 'Nunito', sans-serif;
   margin: 0; padding: 0;
   box-sizing: border-box;
   outline: none; border: none;
   text-decoration: none;
}

*::selection {
   background-color: var(--main-color);
   color: var(--white);
}

::-webkit-scrollbar {
   height: .5rem;
   width: 1rem;
}

::-webkit-scrollbar-track {
   background-color: transparent;
}

::-webkit-scrollbar-thumb {
   background-color: var(--main-color);
}

html {
   font-size: 62.5%;
   overflow-x: hidden;
}

body {
   background-color: var(--light-bg);
}

section {
   padding: var(--section-padding);
   max-width: 1440px;
   margin: 0 auto;
   padding: var(--container-padding);
}

.product-card .product-image{position:relative}
.product-card .image-nav-controls{position:absolute;top:50%;left:0;right:0;display:flex;justify-content:space-between;transform:translateY(-50%);padding:0 .6rem;z-index:5;opacity:0;visibility:hidden;transition:opacity .2s ease, visibility .2s ease}
.product-card .product-image:hover .image-nav-controls{opacity:1;visibility:visible}
.product-card .image-nav{background:rgba(17,24,39,.55);color:#fff;border:none;width:34px;height:34px;border-radius:9999px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.product-card .image-nav i{font-size:14px}
.product-card .image-nav:hover{background:rgba(17,24,39,.75)}
.product-card .photo-count-badge{z-index:6}
.product-card .image-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:6px;z-index:6}
.product-card .image-dot{width:6px;height:6px;border-radius:9999px;background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.2)}
.product-card .image-dot.active{background:#fff;border-color:#111827;transform:scale(1.25)}
/* Harmonisation des couleurs des pastilles avec le bouton ajouter (page shop) */
.product-card.shop-theme .image-dot{background:rgba(255,255,255,.7);border-color:rgba(0,0,0,.2);transition:transform .2s ease, background-color .2s ease, border-color .2s ease}
.product-card.shop-theme .image-dot.active{background:var(--primary-dark);border-color:var(--primary-dark);transform:scale(1.25)}
/* Compatibilité avec la variante de classes 'gallery-dots' / 'dot' */
.product-card.shop-theme .gallery-dots .dot{width:6px;height:6px;border-radius:9999px;background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.2);transition:transform .2s ease, background-color .2s ease, border-color .2s ease}
.product-card.shop-theme .gallery-dots .dot.active{background:var(--primary-dark);border-color:var(--primary-dark);transform:scale(1.25)}

.heading {
   font-size: var(--font-size-4xl);
   color: var(--black);
   margin-bottom: var(--gap-2xl);
   text-align: center;
   text-transform: uppercase;
   font-weight: 700;
}

.btn,
.delete-btn,
.option-btn {
   display: block;
   width: 100%;
   margin-top: var(--gap-md);
   border-radius: var(--radius-full);
   padding: var(--padding-md) var(--padding-xl);
   font-size: var(--font-size-base);
   text-transform: capitalize;
   color: var(--white);
   cursor: pointer;
   text-align: center;
   font-weight: 600;
   transition: all 0.3s ease;
}

.btn:hover,
.delete-btn:hover,
.option-btn:hover {
   background-color: var(--black);
}

.btn {
   background-color: var(--main-color);
}

.option-btn {
   background-color: var(--orange);
}

.delete-btn {
   background-color: var(--red);
}

.flex-btn {
   display: flex;
   gap: var(--gap-md);
   flex-wrap: wrap;
}

.message {
   position: sticky;
   top: 0;
   max-width: 1600px;
   margin: 0 auto;
   background-color: var(--light-bg);
   padding: var(--padding-xl);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--gap-lg);
   z-index: 1100;
   padding: var(--container-padding);
}

.message span {
   font-size: var(--font-size-lg);
   color: var(--black);
}

.message i {
   cursor: pointer;
   color: var(--red);
   font-size: var(--font-size-xl);
}

.message i:hover {
   color: var(--black);
}

.empty {
   padding: var(--padding-lg);
   background-color: var(--white);
   border: var(--border);
   box-shadow: var(--box-shadow);
   text-align: center;
   color: var(--red);
   border-radius: var(--radius-md);
   font-size: var(--font-size-lg);
   text-transform: capitalize;
}

/* Prix carte produit — harmonisation avec shop.php */
.product-card .card-footer{margin-top:auto;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:nowrap}
.footer-actions{display:flex;align-items:center;margin-left:auto;flex:0 0 auto}
.price-rating{display:flex;align-items:center;gap:.85rem;flex:1;min-width:0}
.price-wrap{display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.current-price,.original-price{line-height:1;display:inline-flex;align-items:center}
.product-card .rating-row{display:flex;align-items:center;gap:.4rem;margin:.2rem 0 .4rem}
.product-card .rating-stars{display:inline-flex;gap:1px;color:var(--orange);white-space:nowrap;align-items:center}
.product-card .rating-stars i{font-size:12px;width:13px;height:13px;line-height:13px;flex:0 0 13px;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;background:transparent!important;box-shadow:none!important;border:none!important;border-radius:0!important;outline:none}
.product-card .rating-stars .empty{color:var(--orange);opacity:1}
.product-card .rating-count{color:#6b7280;font-size:.78rem;font-weight:700}
.current-price{font-size:clamp(1.2rem,3vw,1.4rem);font-weight:800;color:var(--primary-color)}
/* Assure la même couleur que le bouton panier en thème boutique */
.product-card.shop-theme .current-price{color:var(--primary-color)}
.original-price{font-size:1.05rem;color:#6b7280;text-decoration:line-through}
/* Harmonisation bouton sur les cartes shop */
.product-card.shop-theme .add-to-cart-btn{background:var(--primary-color);border:1px solid var(--primary-dark);}
.product-card.shop-theme .add-to-cart-btn:hover{background:var(--primary-dark);}
.product-card .add-to-cart-btn.icon-only{width:clamp(2.2rem,5vw,2.6rem);height:clamp(2.2rem,5vw,2.6rem);border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;padding:0;min-width:auto}
.product-card .add-to-cart-btn.icon-only{box-shadow:0 2px 8px rgba(0,0,0,.12);transition:box-shadow .2s ease, transform .15s ease}
.product-card .add-to-cart-btn.icon-only:hover{box-shadow:0 4px 14px rgba(0,0,0,.18);transform:translateY(-1px)}
.product-card .add-to-cart-btn.icon-only i{font-size:clamp(1rem,3vw,1.2rem);color:#fff}
.product-card .add-to-cart-btn:disabled{opacity:1;background:#f1f5f9;color:#64748b;border:1px solid #cbd5e1;box-shadow:0 2px 8px rgba(0,0,0,.12);cursor:not-allowed}
.product-card .add-to-cart-btn:disabled:hover{background:#f1f5f9;box-shadow:0 2px 8px rgba(0,0,0,.12);transform:none}
.product-card.shop-theme .add-to-cart-btn.icon-only:disabled{background:#f1f5f9;border-color:#64748b}
.product-card.shop-theme .add-to-cart-btn.icon-only:disabled i{color:#64748b}
.product-card.shop-theme .variant-options-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .75rem;border-radius:12px;background:var(--primary-color);color:#fff;text-decoration:none;border:1px solid var(--primary-dark)}
.product-card.shop-theme .variant-options-btn:hover{background:var(--primary-dark)}
/* Harmonisation: flèches de défilement (galerie) au hover = couleur du panier */
.product-card.shop-theme .nav-arrow:hover{background:var(--primary-dark) !important;color:#fff !important}
@media (min-width: 769px){
  .product-card .add-to-cart-btn.icon-only{width:clamp(2.6rem,4vw,3rem);height:clamp(2.6rem,4vw,3rem)}
  .product-card .add-to-cart-btn.icon-only i{font-size:clamp(1.1rem,2.2vw,1.4rem)}
}
.product-card .add-to-cart-btn.icon-only{position:relative}
.product-card .add-to-cart-btn.icon-only[data-tooltip]::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);right:0;background:var(--primary-dark);color:#fff;padding:.35rem .6rem;border-radius:.6rem;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.15);opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .15s ease, transform .15s ease;z-index:10;font-size:.78rem;font-weight:700}
.product-card .add-to-cart-btn.icon-only:hover::after{opacity:1;transform:translateY(0)}

.disabled {
   pointer-events: none;
   user-select: none;
   opacity: .5;
}

@keyframes fadeIn {
   0% {
      transform: translateY(1rem);
   }
}

.header {
   position: sticky;
   top: 0; left: 0; right: 0;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   z-index: 1000;
   padding: var(--container-padding);
}

.header .flex {
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: relative;
   max-width: 1600px;
   margin: 0 auto;
   height: clamp(6rem, 15vw, 8rem);
}

.header .flex .logo {
   font-size: var(--font-size-3xl);
   color: var(--black);
}

.header .flex .logo span {
   color: var(--main-color);
}

.header .flex .navbar a {
   margin: 0 var(--gap-sm);
   font-size: var(--font-size-lg);
   color: var(--black);
}

.header .flex .navbar a:hover {
   color: var(--main-color);
   text-decoration: underline;
}

.header .flex .icons > * {
   margin-left: var(--gap-md);
   font-size: var(--font-size-xl);
   cursor: pointer;
   color: var(--black);
}

.header .flex .icons > *:hover {
   color: var(--main-color);
}

.header .flex .icons a span {
   font-size: var(--font-size-base);
}

.header .flex .profile {
   position: absolute;
   top: 120%; right: 2rem;
   background-color: var(--white);
   border-radius: var(--radius-md);
   box-shadow: var(--box-shadow);
   border: var(--border);
   padding: var(--padding-xl);
   width: min(30rem, 90vw);
   padding-top: var(--padding-lg);
   display: none;
   animation: fadeIn .2s linear;
}

.header .flex .profile.active {
   display: inline-block;
}

.header .flex .profile p {
   text-align: center;
   color: var(--black);
   font-size: var(--font-size-lg);
   margin-bottom: var(--gap-md);
}

#menu-btn {
   display: none;
   font-size: var(--font-size-xl);
}

.home-bg {
   background: url(../images/home-bg.png) no-repeat;
   background-size: cover;
   background-position: center;
}

.home-bg .home .slide {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: var(--gap-xl);
   padding-bottom: 6rem;
   padding-top: 2rem;
   user-select: none;
   padding: var(--container-padding);
   max-width: 1600px;
   margin: 0 auto;
}

.home-bg .home .slide .image {
   flex: 1 1 min(40rem, 100%);
}

.home-bg .home .slide .image img {
   height: clamp(20rem, 40vh, 40rem);
   width: 100%;
   object-fit: contain;
}

.home-bg .home .slide .content {
   flex: 1 1 min(40rem, 100%);
}

.home-bg .home .slide .content span {
   font-size: var(--font-size-lg);
   color: var(--white);
}

.home-bg .home .slide .content h3 {
   margin-top: var(--gap-md);
   font-size: var(--font-size-4xl);
   color: var(--white);
   text-transform: uppercase;
}

.home-bg .home .slide .content .btn {
   display: inline-block;
   width: auto;
}

.swiper-pagination-bullet-active {
   background-color: var(--main-color);
}

.category .slide {
   margin-bottom: 5rem;
   box-shadow: var(--box-shadow);
   border: var(--border);
   text-align: center;
   padding: var(--padding-xl);
   background: var(--white);
   border-radius: var(--radius-md);
   max-width: 1600px;
   margin: 0 auto 5rem auto;
   padding: var(--container-padding);
}

.category .slide:hover {
   background-color: var(--black);
}

.category .slide:hover img {
   filter: invert();
}

.category .slide:hover h3 {
   color: var(--white);
}

.category .slide img {
   height: clamp(5rem, 15vw, 7rem);
   width: 100%;
   object-fit: contain;
   margin-bottom: var(--gap-md);
   user-select: none;
}

.category .slide h3 {
   font-size: var(--font-size-xl);
   color: var(--black);
   user-select: none;
}

.home-products .slide {
   position: relative;
   padding: var(--padding-xl);
   border-radius: var(--radius-md);
   border: var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   margin-bottom: 5rem;
   overflow: hidden;
   user-select: none;
   max-width: 1600px;
   margin: 0 auto 5rem auto;
   padding: var(--container-padding);
}

.home-products .slide img {
   width: 100%;
   height: clamp(15rem, 30vh, 20rem);
   object-fit: contain;
   margin-bottom: var(--gap-lg);
}

.home-products .slide .name {
   font-size: var(--font-size-xl);
   color: var(--black);
}

.home-products .slide .flex {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--gap-md);
}

.home-products .slide .flex .qty {
   width: clamp(5rem, 15vw, 7rem);
   padding: var(--padding-md);
   border: var(--border);
   font-size: var(--font-size-base);
   color: var(--black);
   border-radius: var(--radius-md);
}

.home-products .slide .flex .price {
   margin: var(--gap-md) 0;
   font-size: var(--font-size-xl);
   color: var(--red);
}

.home-products .slide .fa-heart,
.home-products .slide .fa-eye {
   position: absolute;
   top: 1rem;
   height: clamp(3.5rem, 10vw, 4.5rem);
   width: clamp(3.5rem, 10vw, 4.5rem);
   line-height: clamp(3.2rem, 9vw, 4.2rem);
   font-size: var(--font-size-base);
   background-color: var(--white);
   border: var(--border);
   border-radius: var(--radius-md);
   text-align: center;
   color: var(--black);
   cursor: pointer;
   transition: .2s linear;
}

.home-products .slide .fa-heart {
   right: -6rem;
}

.home-products .slide .fa-eye {
   left: -6rem;
}

.home-products .slide .fa-heart:hover,
.home-products .slide .fa-eye:hover {
   background-color: var(--black);
   color: var(--white);
}

.home-products .slide:hover .fa-heart {
   right: 1rem;
}

.home-products .slide:hover .fa-eye {
   left: 1rem;
}

.quick-view form {
   padding: var(--padding-xl);
   border-radius: var(--radius-md);
   border: var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   margin-top: 1rem;
   max-width: 1600px;
   margin: 2rem auto;
   padding: var(--container-padding);
}

.quick-view form .row {
   display: flex;
   align-items: center;
   gap: var(--gap-xl);
   flex-wrap: wrap;
   max-width: 1600px;
   margin: 0 auto;
   padding: var(--container-padding);
}

.quick-view form .row .image-container {
   margin-bottom: 2rem;
   flex: 1 1 min(40rem, 100%);
}

.quick-view form .row .image-container .main-image img {
   height: clamp(20rem, 35vh, 30rem);
   width: 100%;
   object-fit: contain;
}

.quick-view form .row .image-container .sub-image {
   display: flex;
   gap: var(--gap-lg);
   justify-content: center;
   margin-top: 2rem;
}

.quick-view form .row .image-container .sub-image img {
   height: clamp(5rem, 12vw, 7rem);
   width: clamp(8rem, 18vw, 10rem);
   object-fit: contain;
   padding: var(--padding-sm);
   border: var(--border);
   cursor: pointer;
   transition: .2s linear;
}

.quick-view form .flex .image-container .sub-image img:hover {
   transform: scale(1.1);
}

.quick-view form img {
   width: 100%;
   height: clamp(15rem, 30vh, 20rem);
   object-fit: contain;
   margin-bottom: 2rem;
}

.quick-view form .row .content {
   flex: 1 1 min(40rem, 100%);
}

.quick-view form .row .content .name {
   font-size: var(--font-size-xl);
   color: var(--black);
}

.quick-view form .row .flex {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--gap-md);
   margin: var(--gap-md) 0;
}

.quick-view form .row .flex .qty {
   width: clamp(5rem, 15vw, 7rem);
   padding: var(--padding-md);
   border: var(--border);
   font-size: var(--font-size-base);
   color: var(--black);
   border-radius: var(--radius-md);
}

.quick-view form .row .flex .price {
   font-size: var(--font-size-xl);
   color: var(--red);
}

.quick-view form .row .content .details {
   font-size: var(--font-size-base);
   color: var(--light-color);
   line-height: 1.6;
}

.products .box-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
   gap: var(--gap-xl);
   justify-content: center;
   align-items: flex-start;
   max-width: 1600px;
   margin: 0 auto;
   padding: var(--container-padding);
}

.products .box-container .box {
   position: relative;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: var(--radius-md);
   border: var(--border);
   padding: var(--padding-xl);
   overflow: hidden;
}

.products .box-container .box img {
   height: clamp(15rem, 30vh, 20rem);
   width: 100%;
   object-fit: contain;
   margin-bottom: var(--gap-md);
}

.products .box-container .box .fa-heart,
.products .box-container .box .fa-eye {
   position: absolute;
   top: 1rem;
   height: clamp(3.5rem, 10vw, 4.5rem);
   width: clamp(3.5rem, 10vw, 4.5rem);
   line-height: clamp(3.2rem, 9vw, 4.2rem);
   font-size: var(--font-size-base);
   background-color: var(--white);
   border: var(--border);
   border-radius: var(--radius-md);
   text-align: center;
   color: var(--black);
   cursor: pointer;
   transition: .2s linear;
}

.products .box-container .box .fa-heart {
   right: -6rem;
}

.products .box-container .box .fa-eye {
   left: -6rem;
}

.products .box-container .box .fa-heart:hover,
.products .box-container .box .fa-eye:hover {
   background-color: var(--black);
   color: var(--white);
}

.products .box-container .box:hover .fa-heart {
   right: 1rem;
}

.products .box-container .box:hover .fa-eye {
   left: 1rem;
}

.products .box-container .box .name {
   font-size: var(--font-size-xl);
   color: var(--black);
}

.products .box-container .box .flex {
   display: flex;
   align-items: center;
   gap: var(--gap-md);
}

.products .box-container .box .flex .qty {
   width: clamp(5rem, 15vw, 7rem);
   padding: var(--padding-md);
   border: var(--border);
   font-size: var(--font-size-base);
   color: var(--black);
   border-radius: var(--radius-md);
}

.products .box-container .box .flex .price {
   font-size: var(--font-size-xl);
   color: var(--red);
   margin-right: auto;
}

.form-container form {
   background-color: var(--white);
   padding: var(--padding-xl);
   border-radius: var(--radius-md);
   border: var(--border);
   box-shadow: var(--box-shadow);
   text-align: center;
   margin: 0 auto;
   max-width: min(50rem, 90vw);
}

.form-container form h3 {
   font-size: var(--font-size-3xl);
   text-transform: uppercase;
   color: var(--black);
}

.form-container form p {
   font-size: var(--font-size-lg);
   color: var(--light-color);
   margin: var(--gap-lg) 0;
}

.form-container form .box {
   margin: var(--gap-md) 0;
   background-color: var(--light-bg);
   padding: var(--padding-lg);
   font-size: var(--font-size-base);
   color: var(--black);
   width: 100%;
   border-radius: var(--radius-md);
}

.about .row {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: var(--gap-xl);
   max-width: 1600px;
   margin: 0 auto;
   padding: var(--container-padding);
}

.about .row .image {
   flex: 1 1 min(40rem, 100%);
}

.about .row .image img {
   width: 100%;
}

.about .row .content {
   flex: 1 1 min(40rem, 100%);
}

.about .row .content h3 {
   font-size: var(--font-size-3xl);
   color: var(--black);
}

.about .row .content p {
   line-height: 1.6;
   font-size: var(--font-size-base);
   color: var(--light-color);
   padding: var(--gap-md) 0;
}

.about .row .content .btn {
   display: inline-block;
   width: auto;
}

.reviews .slide {
   padding: var(--padding-xl);
   text-align: center;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: var(--radius-md);
   border: var(--border);
   margin-bottom: 5rem;
   user-select: none;
   max-width: 1600px;
   margin: 0 auto 5rem auto;
   padding: var(--container-padding);
}

.reviews .slide img {
   height: clamp(8rem, 20vw, 10rem);
   width: clamp(8rem, 20vw, 10rem);
   border-radius: 50%;
   margin-bottom: var(--gap-sm);
}

.reviews .slide p {
   padding: var(--gap-md) 0;
   line-height: 1.6;
   font-size: var(--font-size-base);
   color: var(--light-color);
}

.reviews .slide .stars {
   display: inline-block;
   margin-bottom: var(--gap-md);
   background-color: var(--light-bg);
   padding: var(--padding-md) var(--padding-lg);
   border-radius: var(--radius-md);
}

.reviews .slide .stars i {
   margin: 0 var(--gap-xs);
   font-size: var(--font-size-base);
   color: var(--orange);
}

.reviews .slide h3 {
   font-size: var(--font-size-xl);
   color: var(--black);
}

.contact form {
   padding: var(--padding-xl);
   text-align: center;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: var(--radius-md);
   border: var(--border);
   max-width: min(50rem, 90vw);
   margin: 0 auto;
}

.contact form h3 {
   margin-bottom: var(--gap-md);
   text-transform: capitalize;
   font-size: var(--font-size-3xl);
   color: var(--black);
}

.contact form .box {
   margin: var(--gap-md) 0;
   width: 100%;
   background-color: var(--light-bg);
   padding: var(--padding-lg);
   font-size: var(--font-size-base);
   color: var(--black);
   border-radius: var(--radius-md);
}

.contact form textarea {
   height: clamp(12rem, 30vh, 15rem);
   resize: none;
}

.search-form form {
   display: flex;
   gap: var(--gap-md);
   max-width: 1600px;
   margin: 0 auto;
   padding: var(--container-padding);
}

.search-form form input {
   width: 100%;
   border: var(--border);
   border-radius: var(--radius-md);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   padding: var(--padding-lg);
   font-size: var(--font-size-base);
   color: var(--black);
}

.search-form form button {
   font-size: var(--font-size-xl);
   height: clamp(4.5rem, 12vw, 5.5rem);
   line-height: clamp(4.5rem, 12vw, 5.5rem);
   background-color: var(--main-color);
   cursor: pointer;
   color: var(--white);
   border-radius: var(--radius-md);
   width: clamp(5rem, 12vw, 6rem);
   text-align: center;
}

.search-form form button:hover {
   background-color: var(--black);
}

.wishlist-total {
   max-width: min(50rem, 90vw);
   margin: 3rem auto;
   background-color: var(--white);
   border: var(--border);
   border-radius: var(--radius-md);
   padding: var(--padding-xl);
   text-align: center;
}

.wishlist-total p {
   font-size: var(--font-size-3xl);
   color: var(--black);
   margin-bottom: var(--gap-lg);
}

.wishlist-total p span {
   color: var(--red);
}

.shopping-cart .fa-edit {
   height: clamp(3.5rem, 10vw, 4.5rem);
   border-radius: var(--radius-md);
   background-color: var(--orange);
   width: clamp(4rem, 11vw, 5rem);
   font-size: var(--font-size-base);
   color: var(--white);
   cursor: pointer;
}

.shopping-cart .fa-edit:hover {
   background-color: var(--black);
}

.shopping-cart .sub-total {
   margin: var(--gap-lg) 0;
   font-size: var(--font-size-lg);
   color: var(--light-color);
}

.shopping-cart .sub-total span {
   color: var(--red);
}

.cart-total {
   max-width: min(50rem, 90vw);
   margin: 3rem auto;
   background-color: var(--white);
   border: var(--border);
   border-radius: var(--radius-md);
   padding: var(--padding-xl);
   text-align: center;
}

.cart-total p {
   font-size: var(--font-size-3xl);
   color: var(--black);
   margin-bottom: var(--gap-lg);
}

.cart-total p span {
   color: var(--red);
}

.display-orders {
   text-align: center;
   padding-bottom: 0;
   max-width: 1600px;
   margin: 0 auto;
   padding: var(--container-padding);
}

.display-orders p {
   display: inline-block;
   padding: var(--padding-md) var(--padding-lg);
   margin: var(--gap-md) var(--gap-sm);
   font-size: var(--font-size-lg);
   text-align: center;
   border: var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: var(--radius-md);
}

.display-orders p span {
   color: var(--red);
}

.display-orders .grand-total {
   margin-top: var(--gap-lg);
   margin-bottom: var(--gap-xl);
   font-size: var(--font-size-xl);
   color: var(--light-color);
}

.display-orders .grand-total span {
   color: var(--red);
}

.checkout-orders form {
   padding: var(--padding-xl);
   border: var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: var(--radius-md);
   max-width: 1600px;
   margin: 0 auto;
   padding: var(--container-padding);
}

.checkout-orders form h3 {
   border-radius: var(--radius-md);
   background-color: var(--black);
   color: var(--white);
   padding: var(--padding-lg) var(--padding-md);
   text-align: center;
   text-transform: uppercase;
   margin-bottom: var(--gap-lg);
   font-size: var(--font-size-3xl);
}

.checkout-orders form .flex {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap-xl);
   justify-content: space-between;
}

.checkout-orders form .flex .inputBox {
   width: min(49%, 100%);
}

.checkout-orders form .flex .inputBox .box {
   width: 100%;
   border: var(--border);
   border-radius: var(--radius-md);
   font-size: var(--font-size-base);
   color: var(--black);
   padding: var(--padding-md) var(--padding-lg);
   margin: var(--gap-md) 0;
   background-color: var(--light-bg);
}

.checkout-orders form .flex .inputBox span {
   font-size: var(--font-size-base);
   color: var(--light-color);
}

.orders .box-container {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap-xl);
   align-items: flex-start;
   max-width: 1600px;
   margin: 0 auto;
   padding: var(--container-padding);
}

.orders .box-container .box {
   padding: var(--padding-md) var(--padding-lg);
   flex: 1 1 min(40rem, 100%);
   border: var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: var(--radius-md);
}

.orders .box-container .box p {
   margin: var(--gap-sm) 0;
   line-height: 1.6;
   font-size: var(--font-size-lg);
   color: var(--light-color);
}

.orders .box-container .box p span {
   color: var(--main-color);
}

.footer {
   background-color: var(--white);
}

.footer .grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(27rem, 100%), 1fr));
   gap: var(--gap-xl);
   align-items: flex-start;
   max-width: 1600px;
   margin: 0 auto;
   padding: var(--container-padding);
}

.footer .grid .box h3 {
   font-size: var(--font-size-xl);
   color: var(--black);
   margin-bottom: var(--gap-lg);
   text-transform: capitalize;
}

.footer .grid .box a {
   display: block;
   margin: var(--gap-lg) 0;
   font-size: var(--font-size-base);
   color: var(--light-color);
}

.footer .grid .box a i {
   padding-right: var(--gap-sm);
   color: var(--main-color);
   transition: .2s linear;
}

.footer .grid .box a:hover {
   color: var(--main-color);
}

.footer .grid .box a:hover i {
   padding-right: var(--gap-md);
}

.footer .credit {
   text-align: center;
   padding: var(--padding-xl) var(--padding-lg);
   border-top: var(--border);
   font-size: var(--font-size-lg);
   color: var(--black);
}

.footer .credit span {
   color: var(--main-color);
}

/* ========== RESPONSIVE DESIGN ========== */
@media (max-width: 991px) {
   html {
      font-size: 55%;
   }
   
   :root {
      --container-padding: 1.5rem;
      --section-padding: 3rem;
   }
}

@media (max-width: 768px) {
   html {
      font-size: 50%;
   }
   
   #menu-btn {
      display: inline-block;
   }
   
   .header .flex .navbar {
      position: absolute;
      top: 99%; left: 0; right: 0;
      border-top: var(--border);
      border-bottom: var(--border);
      background-color: var(--white);
      transition: .2s linear;
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
   }
   
   .header .flex .navbar.active {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
   }
   
   .header .flex .navbar a {
      display: block;
      margin: 2rem;
   }
   
   .home-bg .home .slide .content {
      text-align: center;
   }
   
   .home-bg .home .slide .content h3 {
      font-size: var(--font-size-3xl);
   }
   
   :root {
      --container-padding: 1rem;
      --section-padding: 2rem;
   }
}

@media (max-width: 450px) {
   html {
      font-size: 45%;
   }
   
   .heading {
      font-size: var(--font-size-3xl);
   }
   
   .flex-btn {
      flex-flow: column;
      gap: 0;
   }
   
   .quick-view form .row .image-container .sub-image img {
      width: clamp(6rem, 15vw, 8rem);
   }
   
   .checkout-orders form .flex .inputBox {
      width: 100%;
   }
   
   :root {
      --container-padding: 0.8rem;
   }
}

.share-buttons {
   position: absolute;
   top: clamp(4rem, 10vw, 6rem);
   right: clamp(0.5rem, 2vw, 1rem);
   display: flex;
   flex-direction: column;
}

.share-buttons a {
   margin-bottom: clamp(0.3rem, 1vw, 0.5rem);
   color: #fff;
   background-color: #007bff;
   padding: clamp(0.8rem, 2vw, 1rem);
   border-radius: 50%;
   text-align: center;
   width: clamp(3rem, 8vw, 4rem);
   height: clamp(3rem, 8vw, 4rem);
   display: flex;
   align-items: center;
   justify-content: center;
}

.share-buttons a:hover {
   background-color: #0056b3;
}

/* Styles pour les très petits écrans */
@media (max-width: 360px) {
   :root {
      --container-padding: 0.5rem;
      --section-padding: 1.5rem;
   }
   
   .products .box-container {
      grid-template-columns: 1fr;
   }
   
   .home-bg .home .slide {
      flex-direction: column;
      text-align: center;
   }
}