/***
 Theme Name: Nest
 Description: Grocery, Super Market, eCommerce HTML Template
 Version: 1.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
==============================
TABLE CONTENT
 Import Google Fonts
 Include Third Party CSS Library
 GENERAL
 HEADER
 Offcanvas Sidebar
 Search form
 Main header
 Mega menu
 Header layouts
 Page layouts
 Pagination
 Breadcrumb
 CATEGORY PAGES
 SINGLE POST
 Author box
 comment
 Post share social
 WP STYPE
 Custom amine
***/
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Quicksand:wght@400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Livvic:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,300;1,400;1,500;1,600;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/*import vendors*/
@import url(vendors/normalize.css);
@import url(vendors/bootstrap.min.css);
/*import plugins*/
@import url(plugins/magnific-popup.css);
@import url(plugins/select2.min.css);
@import url(plugins/slick.css);
@import url(plugins/perfect-scrollbar.css);

/* ============================================================
   ZD DESIGN TOKENS — variables centrales de marque
   Objectif : un seul endroit à modifier quand les nouvelles
   maquettes Figma arrivent, au lieu de rechasser les fichiers.
   ============================================================ */
.zd-icon {
    width: 1.4em;
    height: 1.4em;
    vertical-align: -0.125em;
    flex-shrink: 0;
    stroke-width: 1;
}

:root {
    --zd-color-primary: #CF4114;
    --zd-color-primary-light: #e8653e;
    --zd-color-primary-hover: #EF805C;
    --zd-color-primary-active: #A33310;
    --zd-color-border-focus: #DFDFDF;
    --zd-color-border-default: #D1D1D1;

    /* Neutral text — Figma "Colour Usage / Text / Neutral" */
    --zd-color-text-dark: #222222;
    --zd-color-heading: #222222;
    --zd-color-text-secondary: #525252;
    --zd-color-text-tertiary: #747474;
    --zd-color-text-disabled: #A0A0A0;

    /* Neutral background — Figma "Colour Usage / Background / Neutral" */
    --zd-color-bg-secondary: #F5F5F5;
    --zd-color-bg-tertiary: #F2F4F8;

    /* Brand background tints — Figma "Colour Usage / Background / Brand" */
    --zd-color-brand-bg-secondary: #FBECE8;
    --zd-color-brand-bg-tertiary: #FFF7F3;

    /* Semantic — Figma "Colour Usage / Text & Background / Semantic" */
    --zd-color-success: #2AA04D;
    --zd-color-success-bg: #EAF7EE;
    --zd-color-warning: #BB8500;
    --zd-color-warning-bg: #FFF7E0;
    --zd-color-error: #CB444A;
    --zd-color-error-bg: #FCEDEE;
    --zd-color-info: #0167CC;
    --zd-color-info-bg: #EEF6FE;

    --zd-radius-sm: 6px;
    --zd-radius-md: 8px;
    --zd-radius-lg: 12px;
    --zd-radius-xl: 16px;
    --zd-shadow-card: 0 4px 24px rgba(0, 0, 0, .06);
}

/* ============================================================
   ZD COMPONENTS — titres de section / de carte réutilisables
   ============================================================ */
.zd-section-title {
    font-weight: 800;
    font-size: 24px;
    color: var(--zd-color-heading);
}
.zd-section-title--lg { font-size: 28px; }
.zd-section-title--xl { font-size: 31px; }
.zd-section-title--on-dark { color: #fff; line-height: 1.15; }

.zd-card-title {
    font-weight: 800;
    font-size: 17px;
    color: var(--zd-color-heading);
    margin: 0;
    line-height: 1.2;
}
/* === Cards blanches génériques réutilisables === */
.card-standard {
    background: #fff;
    border-radius: var(--zd-radius-md);
}
.card-standard--shadow-sm { box-shadow: 0 2px 8px rgba(0, 0, 0, .04); }
.card-standard--shadow-md { box-shadow: 0 4px 18px rgba(0, 0, 0, .06); }
.card-standard--shadow-lg { box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }

/*RESET*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

thead {
  font-weight: 600;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  max-width: 100%;
}

*:focus:not(.zd-tab),
select:focus,
button:focus:not(.zd-tab),
textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
[type=text].form-control:focus,
[type=password].form-control:focus,
[type=email].form-control:focus,
[type=tel].form-control:focus,
[contenteditable].form-control:focus {
  outline: none !important;
  -webkit-box-shadow: none;
          box-shadow: none;
}

input:focus::-moz-placeholder {
  opacity: 0;
  -webkit-transition: .4s;
  transition: .4s;
}

a {
  color: var(--zd-color-primary);
}

a:hover {
  color: var(--zd-color-primary);
}

li.hr span {
  width: 100%;
  height: 1px;
  background-color: #e4e4e4;
  margin: 20px 0;
  display: block;
}

/*--- Common Classes---------------------*/
::-moz-selection {
  background: var(--zd-color-primary);
  /* WebKit/Blink Browsers */
  color: #fff;
}
::selection {
  background: var(--zd-color-primary);
  /* WebKit/Blink Browsers */
  color: #fff;
}

::-moz-selection {
  background: var(--zd-color-primary);
  /* Gecko Browsers */
  color: #fff;
}

::-webkit-input-placeholder {
  color: #838383;
}

:-ms-input-placeholder {
  color: #838383;
}

::-ms-input-placeholder {
  color: #838383;
}

::placeholder {
  color: #838383;
}

.hidden {
  display: none;
}

.clear {
  clear: both;
}

.section {
  float: left;
  width: 100%;
}

.capitalize {
  text-transform: capitalize;
}

.uppercase {
  text-transform: uppercase;
}




header.header-area{
  background-color:white;
}

.product-cart-wrap .product-img-action-wrap .product-action-1 {
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #BCE3C9;
    width: 60%;
}

.position-relative {
  position: relative;
}

*:focus:not(.zd-tab),
select:focus,
button:focus:not(.zd-tab),
textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
[type=text].form-control:focus,
[type=password].form-control:focus,
[type=email].form-control:focus,
[type=tel].form-control:focus,
[contenteditable].form-control:focus {
  outline: none !important;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.border-radius {
  border-radius: 8px;
}

.border-radius-10 {
  border-radius: 8px;
}

.border-radius-15 {
  border-radius: 8px;
}

.img-hover-scale img {
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
  transition: transform .5s,-webkit-transform .5s;
}

.img-hover-scale:hover img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
  transition: transform .5s,-webkit-transform .5s;
}

.hover-up {
  -webkit-transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
}

.hover-up:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  -webkit-transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
}

.text-brand {
  color: var(--zd-color-primary)  !important;
}

.text-primary {
  color: #5a97fa !important;
}

.text-warning {
  color: #ff9900 !important;
}

.text-danger {
  color: #FD6E6E !important;
}

.text-success {
  color: #81B13D !important;
}

.text-info {
  color: #2cc1d8 !important;
}

.text-muted {
  color: #B6B6B6 !important;
}

.text-white {
  color: #fff !important;
}

.text-grey-5,
.text-grey-5 a {
  color: #a2a2a2 !important;
}

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

.bg-warning {
  background-color: #ff9900 !important;
}

.bg-danger {
  background-color: #FD6E6E !important;
}

.bg-success {
  background-color: #81B13D !important;
}

.bg-info {
  background-color: #2cc1d8 !important;
}

.font-xs {
  font-size: 13px;
}

.border {
  border: 1px solid #ececec !important;
}

/*****************************
*********  BORDER  *****
******************************/

.border-3 {
  border-width: 3px !important;
}

a,
button,
img,
input,
span,
h4 {
  -webkit-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
}

@-webkit-keyframes slideleft {
  10% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
    right: 0;
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  90% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
    right: 100%;
  }
}

@keyframes slideleft {
  10% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
    right: 0;
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  90% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
    right: 100%;
  }
}

[data-loader='spinner'] {
  width: 35px;
  height: 35px;
  display: inline-block;
  -webkit-animation: spinner 1.2s infinite ease-in-out;
  animation: spinner 1.2s infinite ease-in-out;
  background: url(../imgs/favicon.svg);
  -webkit-box-shadow: 0 0 10px #fff;
          box-shadow: 0 0 10px #fff;
}

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: perspective(120px) rotateX(0) rotateY(0);
    transform: perspective(120px) rotateX(0) rotateY(0);
  }
  50% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0);
    transform: perspective(120px) rotateX(-180deg) rotateY(0);
  }
  100% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
    transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
  }
}

@keyframes spinner {
  0% {
    -webkit-transform: perspective(120px) rotateX(0) rotateY(0);
    transform: perspective(120px) rotateX(0) rotateY(0);
  }
  50% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0);
    transform: perspective(120px) rotateX(-180deg) rotateY(0);
  }
  100% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
    transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
  }
}

@-webkit-keyframes shadow-pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0px rgba(239, 63, 72, 0.8);
            box-shadow: 0 0 0 0px rgba(239, 63, 72, 0.8);
  }
  100% {
    -webkit-box-shadow: 0 0 0 5px rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 5px rgba(0, 0, 0, 0);
  }
}

@keyframes shadow-pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0px rgba(239, 63, 72, 0.8);
            box-shadow: 0 0 0 0px rgba(239, 63, 72, 0.8);
  }
  100% {
    -webkit-box-shadow: 0 0 0 5px rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 5px rgba(0, 0, 0, 0);
  }
}

@-webkit-keyframes shadow-pulse-big {
  0% {
    -webkit-box-shadow: 0 0 0 0px rgba(239, 63, 72, 0.1);
            box-shadow: 0 0 0 0px rgba(239, 63, 72, 0.1);
  }
  100% {
    -webkit-box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

@keyframes shadow-pulse-big {
  0% {
    -webkit-box-shadow: 0 0 0 0px rgba(239, 63, 72, 0.1);
            box-shadow: 0 0 0 0px rgba(239, 63, 72, 0.1);
  }
  100% {
    -webkit-box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

@-webkit-keyframes jump {
  0% {
    -webkit-transform: translate3d(0, 20%, 0);
            transform: translate3d(0, 20%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes jump {
  0% {
    -webkit-transform: translate3d(0, 20%, 0);
            transform: translate3d(0, 20%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

/*TYPOGRAPHY*/
body {
  color: #222;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 24px;
  font-style: normal;
  font-weight: 400;
  background: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-heading,
.display-1,
.display-2 {
  font-family: "Inter", sans-serif;
  color: #253D4E;
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-size: 48px;
}

h2 {
  font-size: 40px;
}

h3 {
  font-size: 32px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 16px;
}

.display-1 {
  font-size: 96px;
  line-height: 1;
}

.display-2 {
  font-size: 51px;
  line-height: 1;
}

p {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 5px;
  /* color: #7E7E7E; */
}

.text-heading {
  color: #253D4E;
}

p:last-child {
  margin-bottom: 0;
}

.font-weight-bold {
  font-weight: 700;
}

a,
button {
  text-decoration: none;
  cursor: pointer;
}

b {
  font-weight: 500;
}

strong,
.fw-600 {
  font-weight: 600;
}

.fw-900 {
  font-weight: 900;
}

.section-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: end;
  margin-bottom: 44px;
  position: relative;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.section-title .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row;
          flex-flow: row;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.section-title h3 {
  font-weight: 700;
  font-size: 32px;
  margin-right: 30px;
}

.section-title a.show-all {
  font-size: 16px;
  color: #7E7E7E;
}

.section-title a.show-all:hover {
  color: var(--zd-color-primary);
}

.section-title a.show-all i {
  font-size: 12px;
  margin-left: 5px;
}

.section-title.style-1 {
  position: relative;
  border-bottom: 1px solid #ececec;
  padding-bottom: 20px;
  font-size: 24px;
}

.section-title.style-1::after {
  content: "";
  width: 80px;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--zd-color-primary);
}

.section-title span {
  color: var(--zd-color-primary);
}

.title.style-3 {
  background-image: url(../imgs/theme/wave.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  padding-bottom: 25px;
}

.text-body {
  color: #7E7E7E !important;
}

.font-xs {
  font-size: 13px;
}

.font-sm {
  font-size: 14px;
}

.font-md {
  font-size: 16px;
}

.font-lg {
  font-size: 17px;
}

/*COMPONENTS -> BUTTONS*/
.btn-default {
  color: #fff;
  background-color: var(--zd-color-primary);
  border-radius: 8px;
  padding: 13px 28px;
  font-family: "Inter", sans-serif;
}

.btn-default i {
  font-weight: 400;
  font-size: 12px;
  margin-left: 10px;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
}

.btn-default:hover i {
  margin-left: 15px;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
}

.btn-sm {
  padding: 8px 18px !important;
  font-size: 12px;
}

.btn-check:focus + .btn, .btn:focus {
  outline: 0;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

.btn:hover {
  color: #fff;
}

button.submit, button[type='submit'] {
  font-size: 16px;
  font-weight: 500;
  /* padding: 15px 40px; */
  padding: 7px 20px 7px 20px
  /* color: #ffffff;
  border: none; */
  /* background-color: var(--zd-color-primary); */
  /* border: 1px solid #29A56C; */
  /* border-radius: 10px; */
}

/* button.submit:hover, button[type='submit']:hover {
  background-color: #29A56C !important;
} */

.btn-login .btn {
  min-width: unset;
}

.btn, .button {
  display: inline-block;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 30px;
  border-radius: 8px;
  color: #fff;
  border: 1px solid transparent;
  /* background-color: var(--zd-color-primary); */
  background-color: #cecece;
  cursor: pointer;
  -webkit-transition: all 300ms linear 0s;
  transition: all 300ms linear 0s;
  letter-spacing: 0.5px;
}

.btn:hover, .button:hover {
  background-color: #FDC040;
}

.btn.btn-sm, .button.btn-sm {
  padding: 8px 18px;
  font-size: 12px;
  text-transform: none;
  line-height: 1.8;
}

.btn.btn-xs, .button.btn-xs {
  padding: 7px 8px 7px 12px;
  font-size: 12px;
  text-transform: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  line-height: 1.3;
}

.btn.btn-xs i, .button.btn-xs i {
  font-size: 14px !important;
  line-height: 0;
}

.btn.btn-rounded, .button.btn-rounded {
  border-radius: 8px;
}

.btn.btn-secondary, .button.btn-secondary {
  background-color: #3e5379;
  border-color: #3e5379;
}

.btn.btn-facebook, .button.btn-facebook {
  background: #3b5998;
  border-color: #3b5998;
}

.btn.btn-google, .button.btn-google {
  background: #d85040;
  border-color: #d85040;
}

.btn.btn-brush, .button.btn-brush {
  background-color: transparent;
  color: var(--zd-color-primary);
  border: 0;
  padding: 14px 80px 14px 65px;
  background-repeat: no-repeat;
  font-family: "Inter", sans-serif;
}

.btn.btn-brush i, .button.btn-brush i {
  margin: 3px 0 0 5px;
}

.btn.btn-brush.btn-brush-1, .button.btn-brush.btn-brush-1 {
  background-image: url(../imgs/theme/btn-brush-bg-1.png);
}

.btn.btn-brush.btn-brush-2, .button.btn-brush.btn-brush-2 {
  background-image: url(../imgs/theme/btn-brush-bg-2.png);
}

.btn.btn-brush.btn-brush-3, .button.btn-brush.btn-brush-3 {
  background-image: url(../imgs/theme/btn-brush-bg-3.png);
}

.comments-area .btn-reply {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.comments-area .btn-reply i {
  margin-left: 5px;
  font-size: 12px;
}

.tags .btn, .tags .button {
  border-radius: 8px;
  float: left;
}

/*COMPONENTS -> FORM*/
input:-moz-placeholder,
textarea:-moz-placeholder {
  opacity: 1;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
}

input {
  border: 1px solid #ececec;
  height: 64px;
  -webkit-box-shadow: none;
          box-shadow: none;
  padding-left: 20px;
  font-size: 16px;
  width: 100%;
}

/* .zd-input exclu : ce vert herite (0-4-1) battait le focus orange du
   composant (.zd-input:focus, 0-2-0) sur tous les champs texte du front. */
input:focus:not(.zd-checkbox):not(.zd-radio):not(.zd-switch):not(.zd-input) {
  background: transparent;
  border: 1px solid #BCE3C9;
}

input.square {
  border-radius: 0;
}

input.coupon {
  height: 47px;
}

select {
  width: 100%;
  background: transparent;
  border: 0px solid #ececec;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 16px;
  color: #7E7E7E;
}

option {
  background: #fff;
  border: 0px solid #626262;
  padding-left: 10px;
  font-size: 16px;
}

textarea {
  border: 1px solid #ececec;
  height: 50px;
  -webkit-box-shadow: none;
          box-shadow: none;
  padding: 10px 10px 10px 20px;
  font-size: 16px;
  width: 100%;
  min-height: 200px;
}

textarea:focus {
  background: transparent;
  border: 1px solid #BCE3C9;
}

.select2-container--default .select2-selection--single {
  background-color: #fff;
  border-bottom: 3px solid #414648;
  border-radius: 0;
  border-right: 0;
  height: 50px;
  padding-left: 0;
  border-top: 0;
  border-left: 0;
  font-weight: bold;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 50px;
  font-size: 14px;
  padding: 0;
  font-family: "Inter", sans-serif;
  color: #253D4E;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 26px;
  position: absolute;
  top: 12px;
  right: 15px;
  width: 20px;
}

.custom_select {
  position: relative;
  width: 100%;
}

.custom_select .select2-container {
  max-width: 155px;
}

.custom_select .nice-select {
  width: 100%;
  margin-bottom: 1rem;
}

.custom_select .select2-container--default .select2-selection--single {
  border: 1px solid #ececec;
  border-radius: 8px;
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  font-size: 14px;
}

.custom_select .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 50px;
  font-size: 14px;
  padding-left: 0;
}

.custom_select .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 9px;
  right: 14px;
}

.select2-dropdown {
  border: 1px solid #ececec;
  border-radius: 0 0 8px 8px;
  padding: 15px;
  min-width: 220px;
}

.select2-dropdown .select2-search--dropdown {
  padding: 0;
}

.select2-dropdown .select2-search--dropdown .select2-search__field {
  border: 1px solid #BCE3C9;
  margin-bottom: 15px;
  border-radius: 8px;
  height: 40px;
  padding-left: 20px;
}

.select2-container--open .select2-dropdown--below {
  border-top: none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.select2-results__options::-webkit-scrollbar {
  width: 16px;
  background-clip: padding-box;
}

.select2-results__options::-webkit-scrollbar-track {
  background-color: #F4F4F4;
  height: 8px;
  background-clip: padding-box;
  border-right: 10px solid rgba(0, 0, 0, 0);
  border-top: 10px solid rgba(0, 0, 0, 0);
  border-bottom: 10px solid rgba(0, 0, 0, 0);
}

.select2-results__options::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  background-color: #d1d1d1;
  border-right: 10px solid rgba(0, 0, 0, 0);
  border-top: 10px solid rgba(0, 0, 0, 0);
  border-bottom: 10px solid rgba(0, 0, 0, 0);
}

.select2-results__options::-webkit-scrollbar-button {
  display: none;
}

.select2-container--default .select2-results > .select2-results__options {
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: #ececec;
  color: unset;
}

.select2-container {
  max-width: 135px;
}

/*contact form*/

.form-group {
  margin-bottom: 1rem;
}

/* :not(.zd-input, .zd-checkbox, .zd-radio, .zd-switch) : composant
   .zd-input global (2026-08-25) passe par ces champs (checkout, login,
   inscription...) -- sinon la specificite plus forte de .form-group
   input l'emporterait silencieusement, meme principe que la
   convergence .zd-form-row du lot 5 backoffice. Extension 2026-08-31 :
   les cases a cocher .zd-checkbox login/register/vendor_login (ex-
   .custome-checkbox) sont elles aussi des <input>, donc visees par le
   meme piege -- bug reel trouve (case 132px de large au lieu de 16px). */
.form-group input:not(.zd-input):not(.zd-checkbox):not(.zd-radio):not(.zd-switch) {
  background: #fff;
  border: 1px solid #ececec;
  /* height: 64px; */
  height: 48px;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding-left: 20px;
  font-size: 16px;
  width: 100%;
}

.form-group input:not(.zd-input):not(.zd-checkbox):not(.zd-radio):not(.zd-switch):focus {
  background: transparent;
  border-color: #BCE3C9;
}

label {
  margin-bottom: 5px;
}

.custome-radio .form-check-label,
.custome-checkbox .form-check-label {
  position: relative;
  cursor: pointer;
}

.custome-checkbox .form-check-label {
  position: relative;
  cursor: pointer;
  color: #687188;
  padding: 0;
  vertical-align: middle;
}

.custome-checkbox .form-check-label::before {
  content: "";
  border: 2px solid #ced4da;
  height: 17px;
  width: 17px;
  margin: 0px 8px 0 0;
  display: inline-block;
  vertical-align: middle;
  border-radius: 2px;
}

.custome-checkbox .form-check-label span {
  vertical-align: middle;
}

.custome-checkbox input[type="checkbox"]:checked + .form-check-label::after {
  opacity: 1;
}

.custome-checkbox input[type="checkbox"] + .form-check-label::after {
  content: "";
  width: 11px;
  position: absolute;
  top: 50%;
  left: 3px;
  opacity: 0;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: translateY(-65%) rotate(-45deg);
  transform: translateY(-65%) rotate(-45deg);
}

.custome-radio .form-check-input,
.custome-checkbox .form-check-input {
  display: none;
}

.login_footer {
  margin-bottom: 20px;
  margin-top: 5px;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -webkit-box-align: center;
          align-items: center;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
          justify-content: space-between;
  width: 100%;
}

.custome-checkbox input[type="checkbox"]:checked + .form-check-label::before {
  background-color: var(--zd-color-primary);
  border-color: var(--zd-color-primary);
}

.custome-checkbox input[type="checkbox"]:checked + .form-check-label::after {
  opacity: 1;
}

/*comment*/
/* .comments-area {
  background: transparent;
  border-top: 1px solid #ececec;
  padding: 45px 0;
  margin-top: 50px;
} */

.comments-area h5 {
  font-size: 16px;
  margin-bottom: 0px;
}

/* .comments-area .comment-list {
  padding-bottom: 48px;
} */

.comments-area .comment-list:last-child {
  padding-bottom: 0px;
}

.comments-area .comment-list.left-padding {
  padding-left: 25px;
}

.comments-area .comment-list .single-comment {
  margin: 0 0 15px 0;
  border: 1px solid #f2f2f2;
  padding: 20px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.comments-area .comment-list .single-comment:not(:last-child) {
  border-bottom: 1px solid #ececec;
}

.comments-area .comment-list .single-comment img {
  min-width: 80px;
  max-width: 80px;
}

.comments-area .comment-list .single-comment .reply {
  opacity: 0;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.comments-area .comment-list .single-comment:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.comments-area .comment-list .single-comment:hover .reply {
  opacity: 1;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.comments-area p {
  font-size: 16px !important;
}

.comments-area .thumb {
  margin-right: 20px;
}

.comments-area .thumb img {
  width: 70px;
  border-radius: 50%;
}

.comments-area .date {
  font-size: 14px;
  color: #999999;
  margin-bottom: 0;
  margin-left: 20px;
}

.comments-area .comment {
  margin-bottom: 10px;
  color: #777777;
  font-size: 15px;
}

.comments-area .btn-reply {
  background-color: transparent;
  color: #888888;
  padding: 5px 18px;
  font-size: 14px;
  display: block;
  font-weight: 400;
}

.comments-area.style-2 {
  border: 0;
  margin-top: 0;
  padding: 25px 0;
}

.comments-area h4 {
  margin-bottom: 35px;
  color: #2a2a2a;
  font-size: 18px;
}

.comment-form .email {
  padding-right: 0px;
}

.form-control {
  border: 1px solid #f0e9ff;
  height: 48px;
  padding-left: 18px;
  font-size: 16px;
  background: transparent;
}

.comment-form {
  padding-top: 45px;
  margin-bottom: 20px;
}

.comment-form .form-group {
  margin-bottom: 20px;
}

.comment-form textarea {
  min-height: 200px;
  padding-top: 15px;
}

.comment-form textarea:focus {
  background: transparent;
  outline: none !important;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: #BCE3C9;
}

.form-control:focus {
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.form-control::-webkit-input-placeholder {
  font-weight: 300;
  color: #999999;
  color: #777777;
}

.form-control:-ms-input-placeholder {
  font-weight: 300;
  color: #999999;
  color: #777777;
}

.form-control::-ms-input-placeholder {
  font-weight: 300;
  color: #999999;
  color: #777777;
}

.form-control::placeholder {
  font-weight: 300;
  color: #999999;
  color: #777777;
}

.nice-select .list {
  width: 100%;
}

.button-contactForm {
  background: var(--zd-color-primary);
  color: #fff;
  border-color: var(--zd-color-primary);
  padding: 12px 25px;
}

.search-form form {
  position: relative;
}

.search-form form input {
  -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.search-form form button {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0;
  border: none;
  font-size: 20px;
  height: 100%;
  padding: 0 24px;
  background-color: transparent;
  color: #242424;
}

.search-form form button:hover {
  color: #fff;
}

input.qty-val {
  border: 0;
  border-radius: 0;
  height: unset;
  padding: 0 !important;
}

/*COMPONENTS -> SLIDER*/
.single-animation-wrap.slick-active .slider-animated-1 h1 {
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

.single-animation-wrap.slick-active .slider-animated-1 h2 {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

.single-animation-wrap.slick-active .slider-animated-1 h3 {
  -webkit-animation-delay: 1.0s;
  animation-delay: 1.0s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

.single-animation-wrap.slick-active .slider-animated-1 h4 {
  -webkit-animation-delay: 1.0s;
  animation-delay: 1.0s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

.single-animation-wrap.slick-active .slider-animated-1 span {
  -webkit-animation-delay: .5s;
  animation-delay: .5s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

.single-animation-wrap.slick-active .slider-animated-1 p {
  -webkit-animation-delay: 1.7s;
  animation-delay: 1.7s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

.single-animation-wrap.slick-active .slider-animated-1 a.btn {
  -webkit-animation-delay: 2.0s;
  animation-delay: 2.0s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

.single-animation-wrap.slick-active .slider-animated-1.slider-product-price {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

.single-animation-wrap.slick-active .slider-animated-1 .single-slider-img img {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

.single-animation-wrap.slick-active .slider-animated-1 .slider-product-offer-wrap,
.single-animation-wrap.slick-active .slider-animated-1 .slider-product-offer-wrap-2 {
  -webkit-animation-delay: 1.0s;
  animation-delay: 1.0s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

.hero-slider-1 {
  position: relative;
}

.hero-slider-1 .single-hero-slider {
  height: 538px;
  /* border-radius: 30px; */
  background-size: cover;
  background-position: center center;
}

.hero-slider-1 .single-hero-slider.rectangle {
  border-radius: 0;
}

.hero-slider-1 .single-hero-slider.rectangle .slider-content {
    position: absolute;
    top: 37%;
    left: 25%;
    width: 100%;
    max-width: 599px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background: red;
}

.hero-slider-1 .single-hero-slider.rectangle .slider-content form {
  margin: 0 auto;
}

.hero-slider-1 img {
  max-height: 538px;
  border-radius: 30px;
}

.hero-slider-1 .slider-content {
  position: absolute;
  /* top: 50%;
  left: 29%; */
    top:49%;
    left: 15%;
    width: 100%;
    max-width:559px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 15px 30px;
    backdrop-filter: blur(10px);
    text-align:right;
    /* border-radius: 19px; */
    /* background:linear-gradient(245deg, transparent, #ffffff 100%); */
    background: #CF411494;
}

.hero-slider-1 .slider-content p {
  font-size: 23px;
}

.hero-slider-1 .slider-content form {
  background-color: #fff;
  max-width: 450px;
  border-radius: 50px;
}

.hero-slider-1 .slider-content form input {
  border: 0;
  border-radius: 50px 0 0 50px;
  padding-left: 58px;
  background: url(../imgs/theme/icons/icon-plane.png) no-repeat 25px center;
}

.hero-slider-1 .slider-content form button {
  border: 0;
  border-radius: 50px;
}

.hero-slider-1 .single-slider-img-1 {
  height: 538px;
  position: relative;
}

.hero-slider-1 .single-slider-img-1 .slider-1-1 {
  position: absolute;
  bottom: 30px;
  right: 0;
}

.hero-slider-1 .single-slider-img-1 .slider-1-2 {
  position: absolute;
  bottom: 20px;
  right: 0;
}

.hero-slider-1 .single-slider-img-1 .slider-1-3 {
  position: absolute;
  bottom: 30px;
  right: 0;
}

.hero-slider-1.style-5 .display-2 {
  font-size: 51px;
}

.hero-slider-1.style-5 .slider-content p {
  font-size: 24px;
}

.hero-slider-1.style-5 img {
  border-radius: 10px;
}

.hero-slider-1.style-5 .single-hero-slider {
  border-radius: 10px;
}

.dot-style-1 ul li.slick-active button {
  background: var(--zd-color-primary);
  border-color: var(--zd-color-primary);
}

.dot-style-1.dot-style-1-position-1 ul {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 15px;
}

.dot-style-1.dot-style-1-position-2 ul {
  position: absolute;
  left: 6%;
  bottom: 15px;
}

.dot-style-1.dot-style-1-center ul {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.dot-style-1.dot-style-1-mt1 ul {
  margin-top: 30px;
}

.slider-arrow .slider-btn {
  cursor: pointer;
  background: #F2F3F4;
  width: 45px;
  height: 45px;
  position: absolute;
  display: block;
  z-index: 100;
  /* border-radius: 50%; */
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  text-align: center;
  line-height: 45px;
  font-size: 16px;
  color: #7E7E7E;
}

.slider-arrow .slider-btn.slider-prev {
  left: 20px;
}

.slider-arrow .slider-btn.slider-prev i {
  margin-right: 2px;
}

.slider-arrow .slider-btn.slider-next {
  right: 20px;
}

.slider-arrow .slider-btn.slider-next i {
  margin-left: 2px;
}

.slider-arrow .slider-btn:hover {
  background-color: var(--zd-color-primary);
  color: #fff;
  border-color: var(--zd-color-primary);
}

.slider-arrow.slider-arrow-2 .slider-btn {
  width: 40px;
  height: 40px;
  line-height: 44px;
  font-size: 24px;
}

.slider-arrow.slider-arrow-2.flex-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  max-width: 200px;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  top: unset;
  -webkit-transform: unset;
          transform: unset;
}

.slider-arrow.slider-arrow-2.flex-right .slider-btn {
  position: relative;
  left: unset;
  right: unset;
}

.slider-arrow.slider-arrow-2.flex-right .slider-btn.slider-prev {
  margin-right: 10px;
}

.slider-arrow.slider-arrow-3 .slider-btn {
  width: 30px;
  height: 30px;
  line-height: 28px;
  font-size: 12px;
  margin-top: -15px;
}

.slider-arrow.style-3 .slider-btn {
  width: 40px;
  height: 40px;
  border: 1px solid #dcdeed;
  line-height: 40px;
  font-size: 12px;
  margin-top: -20px;
}

/*Carausel*/
.carausel-8-columns-cover .carausel-8-columns {
  overflow: hidden;
  margin: 0 -12px;
}

.carausel-8-columns-cover .carausel-8-columns .card-1 {
  margin-right: 12px;
  margin-left: 12px;
}

.carausel-8-columns-cover .product-img {
  border: 1px solid #cce7d0;
}

.carausel-8-columns-cover .slider-arrow .slider-btn.slider-next {
  right: 0;
}

.carausel-8-columns-cover .slider-arrow .slider-btn.slider-prev {
  right: 48px;
  left: unset;
}

.carausel-8-columns-cover.arrow-center .slider-arrow {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  margin-top: -50px;
}

.carausel-8-columns-cover.arrow-center .slider-arrow .slider-btn.slider-next {
  right: -30px;
}

.carausel-8-columns-cover.arrow-center .slider-arrow .slider-btn.slider-prev {
  left: -30px;
}

.carausel-8-columns-cover.arrow-center .slider-arrow.slider-arrow-3 {
  margin-top: 0;
}

.carausel-10-columns-cover .carausel-10-columns {
  overflow: hidden;
  margin: 0 -12px;
}

.carausel-10-columns-cover .carausel-10-columns .card-2 {
  margin-right: 12px;
  margin-left: 12px;
}

.carausel-4-columns-cover .carausel-4-columns {
  overflow: hidden;
  margin: 0 -12px;
}

.carausel-4-columns-cover .carausel-4-columns .product-cart-wrap {
  margin-right: 12px;
  margin-left: 12px;
}

.carausel-4-columns-cover .product-cart-wrap {
  margin-bottom: 20px;
}

.carausel-4-columns-cover .product-cart-wrap:hover {
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
}

.home-slider.style-2 {
  background: url(../imgs/banner/banner-12.png) no-repeat center bottom;
  background-size: cover;
  width: 100%;
  padding: 50px 0;
}

.carausel-3-columns-cover .carausel-3-columns {
  overflow: hidden;
  margin: 0 -12px;
}

.carausel-3-columns-cover .carausel-3-columns img {
  margin-right: 12px;
  margin-left: 12px;
}

.carausel-3-columns-cover .slider-btn {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  line-height: 44px;
  text-align: center;
  background: #F2F3F4;
  font-size: 27px;
  color: var(--zd-color-primary);
  position: absolute;
}

.carausel-3-columns-cover .slider-btn.slider-prev {
  left: -20px;
}

.carausel-3-columns-cover .slider-btn.slider-next {
  right: -20px;
}

.carausel-3-columns-cover .slider-btn:hover {
  background: var(--zd-color-primary);
  color: #fff;
}

/*COMPONENTS -> CARD*/

.hero-card .hero-card-icon.icon-left {
  width: 135px;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
}

.hero-card .hero-card-icon.icon-left-2 {
  width: 265px;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
}

.card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #ececec;
  border-radius: 8px;
}

.card .card-header {
  padding: 1rem;
  background-color: #f7f8f9;
  border-bottom: 1px solid transparent;
}

.team-card:hover .content {
  -webkit-transform: translateY(-95px);
          transform: translateY(-95px);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.team-card .content {
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  background: #fff;
  padding: 30px;
  max-width: 80%;
  position: relative;
  z-index: 2;
  -webkit-transform: translateY(-90px);
          transform: translateY(-90px);
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.team-card .content span {
  font-size: 17px;
}

.team-card .content .social-network a {
  display: inline-block;
  padding: 0 5px;
}

.team-card .content .social-network a img {
  max-width: 30px;
  min-width: 20px;
}

.account .card {
  border: 0;
}

.account .card .card-header {
  border: 0;
  background: none;
}

.account .card table td, .account .card table th {
  border: 0;
}

.account .card .table > thead {
  font-family: "Inter", sans-serif;
  font-size: 17px;
}

.card-login {
  /* padding: 50px; */
  overflow:hidden;
  border-radius: 8px;
  border: 1px solid #ececec;
  margin-left: 30px;
}

.card-login .social-login {
  font-size: 20px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  padding: 15px 25px;
  border-radius: 8px;
  margin-bottom: 20px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.card-login .social-login img {
  min-width: 28px;
  max-width: 28px;
  margin-right: 15px;
}

.card-login .social-login.facebook-login {
  background-color: #1877F2;
  color: #fff;
}

.card-login .social-login.google-login {
  background-color: #fff;
  color: #7E7E7E;
  border: 1px solid #F2F3F4;
}

.card-login .social-login.apple-login {
  background-color: #000000;
  color: #fff;
  margin-bottom: 0;
}

.card-login .social-login:hover {
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
}

/*COMPONENTS -> TABS*/
.nav-tabs {
  border: 0;
  margin-bottom: 4px;
}

.nav-tabs .nav-link {
  background-color: #F5F5F5;
  font-size: 15px;
  margin: 0 10px;
  margin-left: 10px;
  color: #444;
  border-radius: 8px;
  padding: 15px 24px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border: 0;
  border-top-color: currentcolor;
  border-right-color: currentcolor;
  border-bottom-color: currentcolor;
  border-left-color: currentcolor;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  line-height: 1;
}

.nav-tabs .nav-link.active {
  color: var(--zd-color-primary);
  background-color: #fde1bd;
}

.nav-tabs .nav-link:hover {
  color: var(--zd-color-primary);
  background-color: #fde1bd;
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.nav-tabs .nav-link:first-child {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.nav-tabs.links .nav-link {
  padding: 0 10px;
  background: none;
  font-size: 16px;
  color: #253D4E;
}

.nav-tabs.links .nav-link:hover, .nav-tabs.links .nav-link.active {
  color: var(--zd-color-primary);
}

.nav-tabs.no-border {
  border: none;
}

.nav-tabs.right .nav-item:last-child .nav-link {
  margin-right: 0;
}

.nav.right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
}

.dashboard-menu ul li a.active {
  color: #fff;
  background-color: var(--zd-color-primary);
}

.dashboard-menu ul li a.active i {
  color: #fff;
}

/* .dashboard-menu ul li:not(:last-child) {
  margin-bottom: 10px;
} */

/*COMPONENTS -> MISC*/
/*Countdown*/
.deals-countdown .countdown-section {
  position: relative;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  padding: 20px 5px 30px 5px;
  margin-left: 7px;
  margin-right: 7px;
  background-color: #fff;
  border-radius: 8px;
  border: none;
  margin-bottom: 2rem;
}

.deals-countdown .countdown-section .countdown-amount {
  display: inline-block;
  color: var(--zd-color-primary);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  margin-bottom: 15px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-family: "Inter", sans-serif;
}

.deals-countdown .countdown-section .countdown-period {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  bottom: 10px;
  display: block;
  color: #7E7E7E;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  font-size: 16px;
  text-transform: capitalize;
}

.brand-logo img {
  width: auto;
  display: inline-block;
  padding: 10px 0;
}

/*Heading tab*/

/*page loading*/
.preloader {
  background-color: #fff;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  -webkit-transition: .6s;
  transition: .6s;
  margin: 0 auto;
}

.preloader img.jump {
  max-height: 100px;
}

/*custom amine*/
.bar {
  width: 100px;
  height: 20px;
}

.bar {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.bar::before,
.bar::after {
  content: "";
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  background: var(--zd-color-primary);
  opacity: 0;
  border-radius: 10px;
  -webkit-animation: slideleft 3s ease-in-out infinite;
          animation: slideleft 3s ease-in-out infinite;
}

/*page header*/
.page-header .page-title {
  font-weight: 900;
  font-size: 4rem;
}

.page-header.breadcrumb-wrap {
  padding: 20px;
  background-color: #f5f5f5;
  font-family: "Inter", sans-serif;
}

.breadcrumb {
  display: inline-block;
  padding: 0;
  text-transform: capitalize;
  color: #7E7E7E;
  font-size: 14px;
  font-weight: 600;
  background: none;
  margin: 0;
  border-radius: 0;
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.breadcrumb .zd-icon {
  font-size: 18px;
  vertical-align: 0;
  position: relative;
  top: -2px;
}

.breadcrumb span {
  position: relative;
  text-align: center;
  padding: 0 10px;
  vertical-align: middle;
}

.breadcrumb span::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  vertical-align: middle;
}

/*****************************
*********  SOCIAL NETWORKS  **********
******************************/
.text-center.social-icons ul {
  display: inline-block;
}

.social-icons li {
  float: left;
  list-style: none;
}

.social-icons li a {
  float: left;
  font-size: 16px;
  text-align: center;
  margin: 0 4px 4px 0;
  border-radius: 8px;
  border: 0;
  background: 0 0;
  color: #333;
  overflow: hidden;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.dark .social-icons li a {
  color: #fff;
}

.social-icons.social-icons-colored a,
.social-icons.social-icons-colored-hover a:hover {
  color: #fff !important;
  border: 0;
}

.social-icons.social-icons-colored .social-rss a,
.social-icons.social-icons-colored-hover .social-rss a:hover,
.social-icons.social-icons-colored .social-snapchat a,
.social-icons.social-icons-colored-hover .social-snapchat a:hover {
  background-color: #faa33d;
}

.social-icons.social-icons-colored .social-facebook a,
.social-icons.social-icons-colored-hover .social-facebook a:hover {
  background-color: #5d82d1;
}

.social-icons.social-icons-colored .social-twitter a,
.social-icons.social-icons-colored-hover .social-twitter a:hover {
  background-color: #40bff5;
}

.social-icons.social-icons-colored .social-vimeo a,
.social-icons.social-icons-colored-hover .social-vimeo a:hover {
  background-color: #35c6ea;
}

.social-icons.social-icons-colored .social-myspace a,
.social-icons.social-icons-colored-hover .social-myspace a:hover {
  background-color: #008dde;
}

.social-icons.social-icons-colored .social-youtube a,
.social-icons.social-icons-colored-hover .social-youtube a:hover {
  background-color: #ef4e41;
}

.social-icons.social-icons-colored .social-instagram a,
.social-icons.social-icons-colored-hover .social-instagram a:hover {
  background-color: #e53d00;
}

.social-icons.social-icons-colored .social-gplus a,
.social-icons.social-icons-colored-hover .social-gplus a:hover {
  background-color: #d68400;
}

.social-icons.social-icons-colored .social-stumbleupon a,
.social-icons.social-icons-colored-hover .social-stumbleupon a:hover {
  background-color: #ff5c30;
}

.social-icons.social-icons-colored .social-lastfm a,
.social-icons.social-icons-colored-hover .social-lastfm a:hover {
  background-color: #f34320;
}

.social-icons.social-icons-colored .social-pinterest a,
.social-icons.social-icons-colored-hover .social-pinterest a:hover {
  background-color: #e13138;
}

.social-icons.social-icons-colored .social-google a,
.social-icons.social-icons-colored-hover .social-google a:hover {
  background-color: #eb5e4c;
}

.social-icons.social-icons-colored .social-evernote a,
.social-icons.social-icons-colored-hover .social-evernote a:hover {
  background-color: #9acf4f;
}

.social-icons.social-icons-colored .social-dribbble a,
.social-icons.social-icons-colored-hover .social-dribbble a:hover {
  background-color: #f7659c;
}

.social-icons.social-icons-colored .social-skype a,
.social-icons.social-icons-colored-hover .social-skype a:hover {
  background-color: #13c1f3;
}

.social-icons.social-icons-colored .social-forrst a,
.social-icons.social-icons-colored-hover .social-forrst a:hover {
  background-color: #45ad76;
}

.social-icons.social-icons-colored .social-linkedin a,
.social-icons.social-icons-colored-hover .social-linkedin a:hover {
  background-color: #238cc8;
}

.social-icons.social-icons-colored .social-wordpress a,
.social-icons.social-icons-colored-hover .social-wordpress a:hover {
  background-color: #2592c3;
}

.social-icons.social-icons-colored .social-grooveshark a,
.social-icons.social-icons-colored-hover .social-grooveshark a:hover {
  background-color: #ffb21d;
}

.social-icons.social-icons-colored .social-delicious a,
.social-icons.social-icons-colored-hover .social-delicious a:hover {
  background-color: #377bda;
}

.social-icons.social-icons-colored .social-behance a,
.social-icons.social-icons-colored-hover .social-behance a:hover {
  background-color: #1879fd;
}

.social-icons.social-icons-colored .social-dropbox a,
.social-icons.social-icons-colored-hover .social-dropbox a:hover {
  background-color: #17a3eb;
}

.social-icons.social-icons-colored .social-soundcloud a,
.social-icons.social-icons-colored-hover .social-soundcloud a:hover {
  background-color: #ff7e30;
}

.social-icons.social-icons-colored .social-deviantart a,
.social-icons.social-icons-colored-hover .social-deviantart a:hover {
  background-color: #6a8a7b;
}

.social-icons.social-icons-colored .social-yahoo a,
.social-icons.social-icons-colored-hover .social-yahoo a:hover {
  background-color: #ab47ac;
}

.social-icons.social-icons-colored .social-flickr a,
.social-icons.social-icons-colored-hover .social-flickr a:hover {
  background-color: #ff48a3;
}

.social-icons.social-icons-colored .social-digg a,
.social-icons.social-icons-colored-hover .social-digg a:hover {
  background-color: #75788d;
}

.social-icons.social-icons-colored .social-blogger a,
.social-icons.social-icons-colored-hover .social-blogger a:hover {
  background-color: #ff9233;
}

.social-icons.social-icons-colored .social-tumblr a,
.social-icons.social-icons-colored-hover .social-tumblr a:hover {
  background-color: #426d9b;
}

.social-icons.social-icons-colored .social-quora a,
.social-icons.social-icons-colored-hover .social-quora a:hover {
  background-color: #ea3d23;
}

.social-icons.social-icons-colored .social-github a,
.social-icons.social-icons-colored-hover .social-github a:hover {
  background-color: #3f91cb;
}

.social-icons.social-icons-colored .social-amazon a,
.social-icons.social-icons-colored-hover .social-amazon a:hover {
  background-color: #ff8e2e;
}

.social-icons.social-icons-colored .social-xing a,
.social-icons.social-icons-colored-hover .social-xing a:hover {
  background-color: #1a8e8c;
}

.social-icons.social-icons-colored .social-wikipedia a,
.social-icons.social-icons-colored-hover .social-wikipedia a:hover {
  background-color: #b3b5b8;
}

.social-icons.social-icons-border li a {
  border: 1px solid #d7d7d7;
  background: 0 0;
  color: #333;
}

.dark .social-icons.social-icons-border li a {
  border: 1px solid #333 !important;
}

.dark .social-icons li a .social-icons.social-icons-dark li a {
  background: #888;
  color: #fff;
}

.social-icons.social-icons-light li a {
  background: #fff;
  color: #333;
  border: 1px solid #ececec;
}

.social-icons.social-icons-rounded li a {
  border-radius: 50%;
}

.social-icons.social-icons-square li a {
  border-radius: 0;
}

.social-icons.social-icons-xs li a {
  height: 20px;
  width: 20px;
  line-height: 20px;
  font-size: 12px;
}

.social-icons.social-icons-sm li a {
  height: 30px;
  width: 30px;
  line-height: 30px;
  font-size: 13px;
}

.social-icons.social-icons-md li a {
  height: 38px;
  width: 38px;
  line-height: 38px;
  font-size: 16px;
}

.social-icons.social-icons-lg li a {
  height: 42px;
  width: 42px;
  line-height: 42px;
  font-size: 18px;
}

.social-icons.social-icons-xl li a {
  height: 48px;
  width: 48px;
  line-height: 48px;
  font-size: 18px;
}

.dark .social-icons:not(.social-icons-colored):not(.social-icons-colored-hover) li a:hover {
  background-color: #1f1f1f;
}

.social-icons li:hover i {
  -webkit-animation: toTopFromBottom .2s forwards;
  animation: toTopFromBottom .2s forwards;
}

/*Map*/

/*table*/
table {
  width: 100%;
  margin-bottom: 1.5rem;
  border-collapse: collapse;
  vertical-align: middle;
}

table td, table th {
  padding: 10px 20px;
  border: 1px solid #ececec;
  vertical-align: middle;
}

table thead > tr > th {
  vertical-align: middle;
  border-bottom: 0;
}

table p {
  margin-bottom: 0;
}

table.clean td, table.clean th {
  border: 0;
  border-top: 1px solid #ececec;
}

table .product-thumbnail img {
  max-width: 80px;
}

/*divider*/

.divider.center_icon {
  text-align: center;
  height: auto;
}

.divider-2 {
  width: 100%;
  height: 1px;
  background-color: #ececec;
}

/*modal*/
.custom-modal .modal-dialog {
  max-width: 888px !important;
  border-radius: 0px;
  overflow: hidden;
  border: 0;
  margin: auto;
  top: 50%;
  -webkit-transform: translateY(-50%) !important;
          transform: translateY(-50%) !important;
}

.custom-modal .modal-dialog .modal-content {
  padding: 40px;
  border: 1px solid #BCE3C9;
}

.custom-modal .modal-dialog .btn-close {
  position: absolute;
  right: 30px;
  top: 30px;
  z-index: 2;
}

.zoomContainer, .zoomWindow {
  z-index: 9999;
}

.single-product .zoomContainer, .single-product .zoomWindow {
  z-index: 99;
}

/*COMPONENTS -> BANNERS*/

.banner-left-icon .banner-text h3 {
  color: #242424;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}

.banner-left-icon .banner-text p {
  margin-bottom: 0;
  color: #adadad;
}

.banner-left-icon.style-2 {
  position: relative;
  border: 1px solid #ececec;
  padding: 20px;
}

.banner-img {
  position: relative;
  clear: both;
  border-radius: 10px;
  overflow: hidden;
}

.banner-img img {
  border-radius: 10px;
}

.banner-img:hover img {
  opacity: 0.9;
}

.banner-img.banner-1 .banner-text {
  top: 30%;
}

.banner-img.banner-1.home-3 {
  margin-bottom: 24px;
  border-radius: 10px;
  overflow: hidden;
  max-height: 348px;
}

.banner-img.banner-2 .banner-text {
  right: 10px;
}

.banner-img .banner-text {
  position: absolute;
  top: 50%;
  z-index: 2;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  padding: 0 50px;
}

.banner-img .banner-text span {
  color: #adadad;
}

.banner-img .banner-text h4 {
  font-weight: 700;
  margin-bottom: 15px;
  min-height: 100px;
}

.banner-img .banner-text:hover h4 {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}

.banner-img .banner-text a i {
  margin-left: 5px;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  font-size: 10px;
}

.banner-img .banner-text a:hover i {
  margin-left: 10px;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}

.banner-img.style-2 {
  border-radius: 15px;
  overflow: hidden;
  height: 520px;
  background: url(../imgs/banner/banner-4.png) no-repeat center bottom;
  background-size: cover;
  width: 100%;
}

.banner-img.style-2 .banner-text {
  top: 50px;
  -webkit-transform: none;
          transform: none;
}

.banner-img.style-3 {
  border-radius: 15px;
  overflow: hidden;
  height: 538px;
  background: url(../imgs/banner/banner-11.png) no-repeat center bottom;
  background-size: cover;
  width: 100%;
}

.banner-img.style-3 .banner-text {
  top: 50px;
  -webkit-transform: none;
          transform: none;
}

.banner-img.style-4 .banner-text h4 {
  font-size: 28px;
}

.banner-img.style-5 .banner-text {
  right: 0;
  padding: 0 30px;
}

.banner-img.style-6 .banner-text {
  right: 0;
  padding: 0 20px 0 0;
}

.banner-img.style-6 .banner-text h6 {
  font-size: 16px;
}

.banner-big .btn {
  background: var(--zd-color-primary) !important;
  color: #fff;
  border-radius: 3px;
  font-size: 13px;
  padding: 10px 22px;
  border: 0;
}

.banner-big .btn:hover {
  background: #FDC040 !important;
}

/*Deal banners*/

.deal .btn {
  background: var(--zd-color-primary);
  border: 0;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  padding: 10px 24px;
}

.deal .btn i {
  margin-left: 5px;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  font-size: 12px;
}

.deal .btn:hover i {
  margin-left: 10px;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}

.deal .deal-bottom .deals-countdown .countdown-section {
  border: 2px solid var(--zd-color-primary);
  -webkit-box-shadow: 20px 20px 54px rgba(0, 0, 0, 0.03);
          box-shadow: 20px 20px 54px rgba(0, 0, 0, 0.03);
}

/*Page > About*/

.hero-3 .nav-link {
  font-size: 14px !important;
}

.parallax-wrapper .parallax-img-area .parallax-img.img-1 {
  right: 0;
  width: 52%;
  z-index: 2;
  top: 100px;
}

.parallax-wrapper .parallax-img-area .parallax-img.img-2 {
  right: 220px;
  width: 52%;
  top: 40px;
  z-index: 3;
}

.parallax-wrapper .parallax-img-area .parallax-img.img-3 {
  opacity: 0.1 !important;
  left: -210px;
  width: 320px;
  top: 193px;
}

.parallax-wrapper .parallax-img-area .parallax-img.img-4 {
  opacity: 0.08 !important;
  width: 180px;
  left: 50%;
}

.parallax-wrapper .parallax-img-area .parallax-img.img-5 {
  right: 0;
  width: 12%;
  z-index: 2;
  opacity: 0.3;
  bottom: 20%;
}

.parallax-wrapper .parallax-img-area .parallax-img.img-6 {
  width: 25%;
  z-index: 3;
  opacity: 0.2;
  bottom: 0;
  left: -150px;
}

.parallax-wrapper .parallax-img-area .parallax-img.img-7 {
  opacity: 0.2 !important;
  width: 16%;
  top: 10%;
  left: 10%;
}

.parallax-wrapper .parallax-img-area .parallax-img.img-8 {
  opacity: 0.2 !important;
  width: 10%;
  bottom: 40%;
  left: 50%;
}

.about-count .text-center {
  z-index: 3;
  position: relative;
}

.hero-card-icon.icon-left {
  width: 165px;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
}

.single-content > ol {
  list-style-type: decimal;
  margin-bottom: 30px;
  padding-left: 1em;
}

.single-content > ol li:not(:last-child) {
  margin-bottom: 16px;
}

.single-content > ol ol {
  list-style-type: lower-alpha;
  margin: 20px 0 30px;
  padding-left: 25px;
}

.single-content > ol ol ol {
  list-style-type: lower-roman;
}

/*page 404*/
.page-404 {
  background-color: #fff;
}

.page-404 img {
  max-width: 300px;
}

.page-404 img.logo {
  max-width: 150px;
}

.page-404 .search-form {
  max-width: 400px;
  margin: 0 auto;
}


/*SHOP*/
.product-cart-wrap {
  position: relative;
  background-color: #fff;
  /* border: 1px solid #ececec; */
  /* border: 1px solid transparent; */
  /* border: 1px solid #e9e9e9; */
  border-radius: 8px;
  /* overflow: hidden; */
  transition: .2s;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
}

.product-cart-wrap:hover {
  /*-webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid #BCE3C9; */
  transition: .2s;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
}
.product-cart-wrap:hover .product-img-action-wrap{
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}
.product-cart-wrap .product-img-action-wrap {
  position: relative;
  background-color: #fff;
  overflow: hidden;
  max-height: 320px;
  border-radius:8px
}

.product-cart-wrap .product-img-action-wrap .product-action-1 {
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #BCE3C9;
}

.product-cart-wrap .product-img-action-wrap .product-img {
  position: relative;
  overflow: hidden;
  /* border-radius: 15px; */
}

.product-cart-wrap .product-img-action-wrap .product-img a {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.product-cart-wrap .product-img-action-wrap .product-img a img {
  width: 100%;
}

.product-cart-wrap .product-img-action-wrap .product-img a img.hover-img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  transition: 0.25s opacity, 0.25s visibility, transform 1.5s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 1.5s cubic-bezier(0, 0, 0.2, 1);
}

.product-cart-wrap .product-img-action-wrap .product-img-zoom a img {
  -webkit-transition: all 1.5s cubic-bezier(0, 0, 0.05, 1);
  transition: all 1.5s cubic-bezier(0, 0, 0.05, 1);
}

.product-cart-wrap .product-action-1 {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
  z-index: 9;
  -webkit-box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.07);
          box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.07);
}

.product-cart-wrap .product-action-1.show {
  visibility: visible;
  opacity: 1;
  bottom: 26px;
  left: unset;
  right: 20px;
  top: unset;
  -webkit-transform: none;
          transform: none;
}

.product-cart-wrap .product-action-1 button, .product-cart-wrap .product-action-1 a.action-btn {
  width: 40px;
  height: 36px;
  line-height: 40px;
  text-align: center;
  position: relative;
  display: inline-block;
  border-right: 1px solid #BCE3C9;
}

.product-cart-wrap .product-action-1 button:last-child, .product-cart-wrap .product-action-1 a.action-btn:last-child {
  border: none;
}

.product-cart-wrap .product-action-1 button.small, .product-cart-wrap .product-action-1 a.action-btn.small {
  width: 32px;
  height: 32px;
  line-height: 32px;
}

.product-cart-wrap .product-action-1 button.small i, .product-cart-wrap .product-action-1 a.action-btn.small i {
  font-size: 12px;
}

.product-cart-wrap .product-action-1 button:after, .product-cart-wrap .product-action-1 a.action-btn:after {
  bottom: 100%;
  left: 50%;
  position: absolute;
  white-space: nowrap;
  border-radius: 8px;
  font-size: 11px;
  padding: 7px 10px;
  color: #ffffff;
  background-color: var(--zd-color-primary);
  content: attr(aria-label);
  line-height: 1.3;
  -webkit-transition-delay: .1s;
  transition-delay: .1s;
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24), -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateX(-50%) translateY(0px);
  transform: translateX(-50%) translateY(0px);
}

.product-cart-wrap .product-action-1 button:before, .product-cart-wrap .product-action-1 a.action-btn:before {
  content: '';
  position: absolute;
  left: calc(50% - 7px);
  bottom: 100%;
  -webkit-transition-delay: .1s;
  transition-delay: .1s;
  border: 7px solid transparent;
  border-top-color: var(--zd-color-primary);
  z-index: 9;
  margin-bottom: -13px;
  transition-delay: .1s;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24), -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  opacity: 0;
  visibility: hidden;
}

.product-cart-wrap .product-action-1 button:last-child, .product-cart-wrap .product-action-1 a.action-btn:last-child {
  margin-right: 0;
}

.product-cart-wrap .product-action-1 button i, .product-cart-wrap .product-action-1 a.action-btn i {
  font-size: 15px;
  margin-left: 1px;
}

.product-cart-wrap .product-action-1 button:hover, .product-cart-wrap .product-action-1 a.action-btn:hover {
  color: #FDC040;
}

.product-cart-wrap .product-action-1 button:hover:after, .product-cart-wrap .product-action-1 a.action-btn:hover:after {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateX(-50%) translateY(-8px);
  transform: translateX(-50%) translateY(-8px);
}

.product-cart-wrap .product-action-1 button:hover:before, .product-cart-wrap .product-action-1 a.action-btn:hover:before {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}

.product-cart-wrap .product-action-1 button:hover i, .product-cart-wrap .product-action-1 a.action-btn:hover i {
  color: #FDC040;
}

.product-cart-wrap .product-badges {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.product-cart-wrap .product-badges.product-badges-mrg {
  margin: 0 0 10px;
}

.product-cart-wrap .product-badges.product-badges-position {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 9;
}

.product-cart-wrap .product-badges span {
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  /* border-radius: 15px 0 20px 0; */
  color: #fff;
  /* padding: 9px 20px 10px 20px; */
  padding: 7px;
}

.product-cart-wrap .product-badges span:last-child {
  margin-right: 0px;
}

.product-cart-wrap .product-badges span.hot {
  background-color: #CC522B;
}

.product-cart-wrap .product-badges span.new {
  background-color: var(--zd-orange-h);
}

.product-cart-wrap .product-badges span.sale {
  background-color: #67bcee;
}

.product-cart-wrap .product-badges span.best {
  background-color: #f59758;
}

.product-cart-wrap .product-content-wrap {
  padding: 8px 10px 10px 10px;
  border-radius: 8px;
}

/* Rythme d'espacement fixe (regle designer 2026-08-17) : le 8px image->contenu
   vient du padding-top ci-dessus, jamais du variant-info, pour rester identique
   que le produit ait des options ou non. */
.product-cart-wrap .product-content-wrap .variant-info {
  margin-bottom: 2px;
}

.product-cart-wrap .product-content-wrap .product-category {
  margin-bottom: 8px;
}

.product-cart-wrap .product-content-wrap .product-category a {
  color: #222;
  font-size: 14px;
}

.product-cart-wrap .product-content-wrap .product-category a:hover {
  color: var(--zd-color-primary);
}

.product-cart-wrap .product-content-wrap h2 {
  font-size: 16px;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 2px;
}

.product-cart-wrap .product-content-wrap .product-price {
  margin-bottom: 2px;
}

.product-cart-wrap .product-content-wrap .product-moq {
  margin-bottom: 8px;
}

.product-cart-wrap .product-content-wrap .product-vendor {
  margin-bottom: 8px;
}

.product-cart-wrap .product-content-wrap .product-vendor a {
  color: #4A4A4A;
}

.product-cart-wrap .product-content-wrap h2 a {
  color: #222;
}

.product-cart-wrap .product-content-wrap h2 a:hover {
  color: var(--zd-color-primary);
}

.product-cart-wrap .product-content-wrap .product-price {
  font-size: 17px;
  font-weight: bold;
}

.product-cart-wrap .product-content-wrap .product-price span.new-price {
  color: var(--zd-color-primary);
}

.product-cart-wrap .product-content-wrap .product-price span.old-price {
  font-size: 14px;
  color: #adadad;
  margin: 0 0 0 7px;
  text-decoration: line-through;
}

.product-cart-wrap .product-content-wrap .rating-result {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.product-cart-wrap .product-content-wrap .rating-result > span {
  display: block;
  overflow: hidden;
  margin-left: 5px;
}

.product-cart-wrap .product-content-wrap .rating-result::before {
  font-family: "uicons-regular-straight"  !important;
  font-size: 11px;
  letter-spacing: 2px;
  content: '\f225' '\f225' '\f225' '\f225' '\f225';
  color: #ff9900;
}

.product-cart-wrap .product-content-wrap .add-to-cart {
  width: 44px;
  height: 44px;
  line-height: 44px;
  border-radius: 8px;
  background-color: #f5f5f5;
  text-align: center;
  display: block;
  color: #253D4E;
  font-size: 16px;
  position: absolute;
  bottom: 25px;
  right: 20px;
  font-weight: 300;
}

.product-cart-wrap .product-content-wrap .add-to-cart:hover {
  background-color: var(--zd-color-primary);
  color: #fff;
}

.product-cart-wrap .product-content-wrap .add-to-cart img {
  width: 20px;
  display: inline-block;
  margin-top: 11px;
}

.product-cart-wrap .product-card-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 15px;
  position: absolute;
  bottom: 0;
  left:0;
  width:100%;
  padding: 20px;
}

.product-cart-wrap .product-card-bottom .add-cart {
  cursor: pointer;
}

.product-cart-wrap .product-card-bottom .add-cart .add {
  position: relative;
  display: inline-block;
  padding: 10px 20px 10px 20px;
  /* border-radius: 4px; */
  background-color: var(--zd-color-primary);
  font-size: 20px;
  font-weight: 700;
  color:#fff;
}

.product-cart-wrap .product-card-bottom .add-cart .add:hover {
  background-color: #DEF9EC;
  color: var(--zd-color-primary);
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
}

.product-cart-wrap .product-stock .status-bar {
  background-color: #ededed;
  margin: 0px 0 10px;
  border-radius: 5px;
}

.product-cart-wrap .product-stock .status-bar .sold-bar {
  background-image: linear-gradient(235deg, var(--zd-color-primary) 0%, #77ccfd 100%);
  border-radius: 4px;
  height: 8px;
}

.product-cart-wrap .product-stock .status-bar .sold-bar.sold-bar-width-33 {
  width: 33.333333333333%;
}

.product-cart-wrap .product-stock .status-bar .sold-bar.sold-bar-width-10 {
  width: 10%;
}

.product-cart-wrap .product-stock .status-bar .sold-bar.sold-bar-width-40 {
  width: 40%;
}

.product-cart-wrap .product-stock .status-bar .sold-bar.sold-bar-width-6 {
  width: 6.6666666666667%;
}

.product-cart-wrap .product-stock .status-bar .sold-bar.sold-bar-width-42 {
  width: 42.857142857143%;
}

.product-cart-wrap .product-stock .product-stock-status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.product-cart-wrap .product-stock .product-stock-status .sold {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  margin-right: 20px;
}

.product-cart-wrap .product-stock .product-stock-status .available {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.product-cart-wrap .product-stock .product-stock-status .stock-status-same-style span {
  font-size: 15px;
}

.product-cart-wrap .product-stock .product-stock-status .stock-status-same-style span.label {
  color: #253D4E;
}

.product-cart-wrap .product-stock .product-stock-status .stock-status-same-style span.value {
  font-weight: 700;
  color: #333;
}

.product-cart-wrap .progress {
  height: 5px;
}

.product-cart-wrap:hover .product-img-action-wrap .product-img a img.hover-img {
  opacity: 1;
  visibility: visible;
}

/* .product-cart-wrap:hover .product-img-action-wrap .product-action-1 {
  opacity: 1;
  visibility: visible;
} */

.product-cart-wrap:hover .product-img-zoom a img {
  -webkit-transform: scale3d(1.05, 1.05, 1.05) translateZ(0);
  transform: scale3d(1.05, 1.05, 1.05) translateZ(0);
}

.product-cart-wrap.small {
  border: 0;
  text-align: center;
}

.product-cart-wrap.small .rating-result {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.product-cart-wrap.small .product-content-wrap {
  padding: 5px 15px 0 15px;
}

.product-cart-wrap.small .product-price {
  padding-top: 0;
}

.product-cart-wrap.small:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.product-cart-wrap.small h2 {
  border-bottom: 0;
  padding: 0;
  margin-bottom: 0;
}

.product-cart-wrap.small .product-badges span {
  font-size: 10px;
}

.product-cart-wrap.style-2 {
  border: 0;
  padding-bottom: 25px;
}

.product-cart-wrap.style-2:hover {
  border: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.product-cart-wrap.style-2 .product-img-action-wrap {
  padding: 0;
  position: relative;
  z-index: 1;
  max-height: unset;
}

.product-cart-wrap.style-2 .product-img-action-wrap img {
  border-radius: 8px;
}

.product-cart-wrap.style-2 .product-content-wrap {
  position: relative;
  margin-top: -90px;
  z-index: 3;
  padding: 0;
  max-width: 86%;
  margin-left: auto;
  margin-right: auto;
  transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
}

.product-cart-wrap.style-2 .product-content-wrap .deals-content {
  margin: 0 auto;
  background-color: #fff;
  border-radius: 8px;
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
  padding: 25px 30px;
}

.product-cart-wrap.style-2 .product-content-wrap .deals-countdown-wrap {
  position: absolute;
  top: -80px;
  width: 100%;
  text-align: center;
}

.product-cart-wrap.style-2:hover .product-content-wrap {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
}



@media (max-width: 575px) {
    .product-cart-wrap {
        margin-bottom: 18px;
    }

    .product-cart-wrap .product-img-action-wrap {
        max-height: none;
        aspect-ratio: 1 / 1;
    }

    .product-cart-wrap .product-img-action-wrap .product-img,
    .product-cart-wrap .product-img-action-wrap .product-img a {
        height: 100%;
    }

    .product-cart-wrap .product-img-action-wrap .product-img a img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .product-cart-wrap .product-content-wrap {
        padding: 8px 4px 10px;
    }

    .product-cart-wrap .product-content-wrap h2 {
        font-size: 13px;
        line-height: 1.3;
        min-height: 34px;
    }

    .product-cart-wrap .product-content-wrap .product-category a,
    .product-cart-wrap .product-content-wrap .product-category span,
    .product-cart-wrap .product-content-wrap .font-xs {
        font-size: 11px;
        line-height: 1.3;
    }

    .product-cart-wrap .product-content-wrap .product-price {
        font-size: 14px;
        line-height: 1.3;
    }

    .product-card-cta .zd-btn {
        width: 100%;
        padding: 8px 6px;
        font-size: 12px;
        text-align: center;
        justify-content: center;
    }
}



.product-price {
  font-family: "Inter", sans-serif;
}

.product-list-small .product-price {
  color: var(--zd-color-primary);
  font-size: 18px;
  font-weight: 700;
  margin-top: 10px;
}

.product-list-small .product-price span.old-price {
  font-size: 14px;
  color: #adadad;
  margin: 0 0 0 7px;
  text-decoration: line-through;
}

.range .list-group-item {
  position: relative;
  display: block;
  padding: 0;
  background: none;
  border: 0;
}

.range .checkbox {
  font-size: 0.8em;
}

.range .price-filter {
  display: block;
  margin-top: 20px;
}

.range #slider-range {
  -webkit-box-shadow: none;
          box-shadow: none;
  border: none;
  height: 4px;
  border-radius: 0px;
  background: var(--zd-color-primary);
  color: var(--zd-color-primary);
}

.range #slider-range .ui-slider-range {
  -webkit-box-shadow: none;
          box-shadow: none;
  background: #222;
  border-radius: 0px;
  border: none;
}

.range .ui-slider-handle.ui-state-default.ui-corner-all {
  width: 14px;
  height: 14px;
  line-height: 10px;
  background: var(--zd-color-primary);
  border: none;
  border-radius: 100%;
  top: -5px;
}

.range .label-input {
  margin-top: 15px;
}

.range .label-input span {
  margin-right: 5px;
  color: #282828;
}

.range .label-input input {
  border: none;
  margin: 0;
  height: unset;
  font-weight: 600;
  font-size: 14px;
  background: transparent;
  padding-left: 0;
}

.range .check-box-list {
  margin-top: 15px;
}

.range .check-box-list li {
  margin-bottom: 5px;
}

.range .check-box-list li:last-child {
  margin: 0;
}

.range .check-box-list li label {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  cursor: pointer;
}

.range .check-box-list li label input {
  display: inline-block;
  margin-right: 6px;
  position: relative;
  top: 1px;
}

.range .check-box-list .count {
  margin-left: 5px;
  color: #666;
}

.btn.btn-small {
  line-height: 1;
  padding: 10px 15px;
  min-width: unset;
  display: table;
  border-radius: 8px;
}

.product-sidebar .single-post {
  position: relative;
}

.product-sidebar .single-post:not(:last-child) {
  margin-bottom: 10px;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.15);
  padding-bottom: 10px;
}

.product-sidebar .single-post .content {
  padding-left: 95px;
}

.product-sidebar .single-post i {
  font-size: 12px;
}

.product-sidebar .image {
  height: 80px;
  width: 80px;
  float: left;
  margin-right: 10px;
  overflow: hidden;
}

.shop-product-fillter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 0 30px;
}

.shop-product-fillter.style-2 {
  padding-bottom: 20px;
  border-bottom: 1px solid #ececec;
}

.shop-product-fillter .sort-by-product-area {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.shop-product-fillter .sort-by-product-area .sort-by-cover {
  position: relative;
}

.shop-product-fillter .sort-by-product-area .sort-by-product-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #fff;
  border: 1px solid #f7f8f9;
  color: #777;
  padding: 9px 16px;
  /* border-radius: 10px; */
  -webkit-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
  cursor: pointer;
  border: 1px solid #ececec;
}

.shop-product-fillter .sort-by-product-area .sort-by-product-wrap:hover {
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
}

.shop-product-fillter .sort-by-product-area .sort-by-product-wrap .sort-by {
  margin-right: 5px;
}

.shop-product-fillter .sort-by-product-area .sort-by-product-wrap .sort-by i {
  margin-right: 10px;
  font-size: 14px;
  color: var(--zd-color-primary);
  position: relative;
  top: 2px;
}

.shop-product-fillter .sort-by-product-area .sort-by-product-wrap .sort-by span {
  font-size: 13px;
  font-weight: 500;
}

.shop-product-fillter .sort-by-product-area .sort-by-product-wrap .sort-by-dropdown-wrap span {
  font-size: 13px;
  font-weight: 500;
  color: #7E7E7E;
}

.shop-product-fillter .sort-by-product-area .sort-by-product-wrap .sort-by-dropdown-wrap span i {
  font-size: 15px;
  color: #7E7E7E;
  margin-left: 10px;
  position: relative;
  top: 2px;
}

.sort-by-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 99;
  right: 0;
  padding: 16px 0 21px;
  background: #fff;
  border: 0;
  /* border-radius: 5px; */
  visibility: hidden;
  opacity: 0;
  min-width: 100%;
  -webkit-box-shadow: 0 -3px 23px rgba(0, 0, 0, 0.06);
  box-shadow: 0 -3px 23px rgba(0, 0, 0, 0.06);
  color: #7E7E7E;
  font-weight: 500;
}

.sort-by-dropdown.show {
  opacity: 1;
  visibility: visible;
}

.sort-by-dropdown ul li {
  display: block;
}

.sort-by-dropdown ul li a {
  font-weight: 500;
  font-size: 13px;
  padding: 5px 30px;
  display: block;
  position: relative;
  color: #7E7E7E;
}

.sort-by-dropdown ul li a.active::before {
  content: "\f143";
  position: absolute;
  top: 5px;
  left: 10px;
  font-size: 12px;
  color: var(--zd-color-primary);
  font-family: 'uicons-regular-straight'  !important;
  font-weight: 900;
}

.sort-by-dropdown ul li a.active:hover::before {
  color: #fff;
}

.sort-by-dropdown ul li a:hover {
  background-color: var(--zd-color-primary);
  color: #ffffff;
}

/*Product list*/

.product-list .product-cart-wrap {
  border: 0;
  border-radius: 0;
  overflow: unset;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.product-list .product-cart-wrap:not(:last-child) {
  margin-bottom: 30px;
}

.product-list .product-cart-wrap:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.product-list .product-cart-wrap:hover .product-img {
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}

.product-list .product-cart-wrap .product-badges.product-badges-position {
  left: 0;
  top: 0;
}

.product-list .product-cart-wrap .product-img-action-wrap {
  max-width: 28%;
  position: relative;
  padding: 0;
  max-height: unset;
}

.product-list .product-cart-wrap .product-img-action-wrap .product-img {
  border: 1px solid #ececec;
  border-radius: 8px;
}

.product-list .product-cart-wrap .product-img-action-wrap .product-img .product-img-inner {
  overflow: hidden;
  padding: 10px;
}

.product-list .product-cart-wrap .product-img-action-wrap .product-img .product-img-inner a img {
  height: auto;
}

.product-list .product-cart-wrap h2 {
  font-size: 32px;
}

.product-list .product-cart-wrap .product-content-wrap .product-category a {
  font-size: 16px;
  margin-top: 15px;
  display: block;
}

.product-list .product-cart-wrap .product-content-wrap .product-price span {
  font-size: 32px;
}

.product-list .product-cart-wrap .product-content-wrap .product-price span.old-price {
  font-size: 20px;
}

.product-list .product-cart-wrap .product-content-wrap .product-action-1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
  bottom: unset;
  padding: 0 20px;
  margin-top: 20px;
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
}

.product-list .product-cart-wrap .product-content-wrap .product-action-1 a.action-btn {
  border: none;
  width: auto;
  border-radius: 8px;
  background-color: var(--zd-color-primary);
  color: #fff;
  text-align: center;
  margin-right: 0;
  position: relative;
  display: inline-block;
  padding: 0px 23px;
  height: 44px;
  font-weight: 500;
}

.product-list .product-cart-wrap .product-content-wrap .product-action-1 a.action-btn i {
  margin-right: 8px;
  color: #fff;
}

/*PRODUCT DETAILS*/
.detail-gallery {
  position: relative;
}

.detail-gallery .zoom-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  font-size: 22px;
  opacity: 0.6;
}

.slider-nav-thumbnails .slick-list {
  margin: 0 -10px;
}

.slider-nav-thumbnails .slick-slide {
    cursor:pointer;
    position: relative;
    overflow: hidden;
}

.slider-nav-thumbnails .slick-slide.slick-current::before {
  border-bottom: 5px solid #333;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  top: -6px;
  width: 0;
}

.slider-nav-thumbnails .slick-slide.slick-current img {
  border: 2px solid var(--zd-color-primary);
}

.slider-nav-thumbnails div.slick-slide {
  margin: 0 10px;
}

.slider-nav-thumbnails button {
  opacity: 0;
}

.slider-nav-thumbnails button.slick-arrow {
  margin: 0;
  border: 0;
  background: #F5F5F5;
  border-radius: 40px;
  width: 40px;
  height: 40px;
  line-height: 44px;
  font-size: 24px;
  z-index: 9;
  color: #7E7E7E;
}

.slider-nav-thumbnails button.slick-arrow:hover {
  color: #fff;
  background-color: var(--zd-color-primary);
}

.slider-nav-thumbnails button.slick-arrow.slick-prev {
  left: -20px;
}

.slider-nav-thumbnails button.slick-arrow.slick-next {
  right: -20px;
}

.slider-nav-thumbnails:hover button {
  opacity: 1;
}

.slider-nav-thumbnails .slick-prev,
.slider-nav-thumbnails .slick-next {
  font-size: 12px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

/* .product-rate {
  background-image: url("../imgs/theme/rating-stars.png");
  background-position: 0 -12px;
  background-repeat: repeat-x;
  height: 12px;
  width: 60px;
  transition: all 0.5s ease-out 0s;
  -webkit-transition: all 0.5s ease-out 0s;
}

.product-rating {
  height: 12px;
  background-repeat: repeat-x;
  background-image: url("../imgs/theme/rating-stars.png");
  background-position: 0 0;
} */

/* Conteneur */
.product-rate {
    position: relative;
    width: 100px;
    height:19px;
    display: inline-block;

    /* 🎨 FOND : étoiles grises */
    background-color: #ccc;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="19" viewBox="0 0 90 16"><path fill="black" d="M9 0l2.77 5.34L18 6.25l-4.5 4.16L14 16l-5-2.5L4 16l1.5-5.59L1 6.25l6.23-.91L9 0zm18 0l2.77 5.34L36 6.25l-4.5 4.16L32 16l-5-2.5L22 16l1.5-5.59L19 6.25l6.23-.91L27 0zm18 0l2.77 5.34L54 6.25l-4.5 4.16L50 16l-5-2.5L40 16l1.5-5.59L37 6.25l6.23-.91L45 0zm18 0l2.77 5.34L72 6.25l-4.5 4.16L68 16l-5-2.5L58 16l1.5-5.59L55 6.25l6.23-.91L63 0zm18 0l2.77 5.34L90 6.25l-4.5 4.16L86 16l-5-2.5L76 16l1.5-5.59L73 6.25l6.23-.91L81 0z"/></svg>');
    mask-size: cover;
    mask-repeat: no-repeat;
}

/* Couche jaune dynamique */
.product-rating {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--zd-color-primary);
    mask-image: inherit;  /* même forme que le fond */
    mask-size: cover;
    mask-repeat: no-repeat;
}

.list-filter {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-filter li {
  display: inline-block;
}

.list-filter li a {
  color: #555;
  display: block;
  min-width: 30px;
  text-align: center;
  position: relative;
  transition: all 0.5s ease-out 0s;
  -webkit-transition: all 0.5s ease-out 0s;
}

.color-filter.list-filter a span {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 40px;
}

.color-filter.list-filter a span.product-color-white {
  border: 1px solid #ddd;
}

.color-filter.list-filter li.active a::before {
  content: "";
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  position: absolute;
  right: 3px;
  top: -3px;
  background: #4cd964;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #fff;
}

.size-filter.list-filter a {
  border-radius: 8px;
  padding: 0 9px;
  background: #fff;
}

.size-filter.list-filter li a {
  color: #7E7E7E;
  height: 32px;
  line-height: 32px;
  min-width: 40px;
  text-align: center;
}

.size-filter.list-filter li a:hover,
.size-filter.list-filter li.active a {
  color: #fff;
  background-color: var(--zd-color-primary);
  border-color: var(--zd-color-primary);
}

/* Container */
.detail-qty {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none !important; /* on ignore l'ancien style */
}

/* Boutons + / - */
.detail-qty a.qty-down,
.detail-qty a.qty-up {
    width: 38px;
    height: 38px;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f7f8fa;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
}

.detail-qty a.qty-down:hover,
.detail-qty a.qty-up:hover {
    background: #eaeef2;
}

/* Icônes */
.detail-qty i {
    font-size: 14px;
    line-height: 1;
}

/* Champ quantité (input) */
.detail-qty .qty-val {
    width: 80px;
    height: 38px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    outline: none;
    background: #fff;
}

/* Effet focus */
.detail-qty .qty-val:focus {
    border-color: var(--zd-color-primary);
    box-shadow: 0 0 0 2px rgba(40,153,140,0.2);
}


.attr-detail .select-box select {
  height: 40px;
  width: 100%;
}

.attr-detail.attr-brand {
  margin-top: 23px;
}

.attr-detail.attr-brand .select-box {
  display: block;
  margin-bottom: 20px;
}

.attr-detail.attr-color table {
  margin-bottom: 15px;
}

.stock-status {
  display: inline-block;
  padding: 7px;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.stock-status.in-stock {
  background: #DEF9EC;
  color: var(--zd-color-primary);
}

.stock-status.out-stock {
  color: #CC522B;
  background: #fde0e9;
}

.detail-info .product-price-cover {
  margin-right:10px;
}

.detail-info .product-price-cover .product-price {
  line-height: 1;
}

.detail-info .product-price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 15px 0 10px 0;
}

.detail-info .product-price .current-price {
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 19.2px */
    letter-spacing: 1px;
    color:#242424;
}

.detail-info .product-price .old-price {
  text-decoration: line-through;
  color: #B6B6B6;
  margin-left: 20px;
  font-size: 28px;
  font-weight: 700;
  display: block;
}

.detail-info .product-price .save-price {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
  color: #FDC040;
}

.detail-info .product-meta {
  border-top: 1px solid #ececec;
  padding-top: 15px;
}

.button.button-add-to-cart {
  padding: 8px 40px;
}

.product-extra-link2 a {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #f1f1f1;
  color: #333;
  display: inline-block;
  height: 50px;
  line-height: 55px;
  position: relative;
  text-align: center;
  vertical-align: top;
  width: 50px;
  margin: 0 5px;
  transition: all 0.5s ease-out 0s;
  -webkit-transition: all 0.5s ease-out 0s;
}

.product-extra-link2 a:hover {
  background-color: var(--zd-color-primary);
  color: #fff;
}

.product-extra-link2 a:hover i {
  opacity: 1;
}

.product-extra-link2 a i {
  font-size: 18px;
  opacity: 0.6;
}

.product-extra-link2 .button.button-add-to-cart {
  position: relative;
  padding: 0px 20px;
  border: 0;
  height: 50px;
  line-height: 50px;
  font-weight: 700;
  font-size: 16px;
  font-family: "Inter", sans-serif;
}

.product-extra-link2 .button.button-add-to-cart i {
  margin-right: 10px;
}

.tab-style3 .nav-tabs .nav-item a.active, .tab-style3 .nav-tabs .nav-item a:hover {
  color: var(--zd-color-primary);
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
}

.tab-style3 .nav-tabs li.nav-item a {
  display: block;
  padding: 13px 24px !important;
  text-align: center;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  text-transform: none;
  font-size: 17px;
  border: 1px solid #ececec;
  background: #fff;
  color: #7E7E7E;
}

.tab-content.shop_info_tab {
  margin-top: 40px;
}

.tab-pane .comments-area {
  padding-top: 0;
  border: 0;
}

/* .detail-gallery .product-image-slider {
  background-color: #fff;
  margin-bottom: 30px;
  border: 1px solid #ececec;
  overflow: hidden;
}

.detail-gallery .product-image-slider img {
  opacity: 1;
}

.detail-gallery .product-image-slider.slider-nav-thumbnails {
  background: none;
  border-radius: 0;
}

.detail-gallery .product-image-slider button.slick-arrow {
  background: none;
  border: 0;
  padding: 0;
  font-size: 14px;
}

.detail-gallery .product-image-slider button.slick-arrow i {
  color: #adadad;
} */





/* Container principal de la gallery */
.detail-gallery {
    display: flex;
    flex-direction: row;
    gap: 15px;
    position: relative;
}

/* Thumbnails container - Colonne verticale à gauche */
.slider-nav-thumbnails {
    width: 80px; /* Largeur fixe pour les thumbnails */
    flex-shrink: 0;
    order: 1; /* Mettre à gauche (puisque flex-direction est row-reverse) */
}

/* Image principale - Prend tout l'espace restant */
.product-image-slider {
    flex: 1;
    order: 2; /* Mettre à droite */
    min-width: 0; /* Important pour flex */
}

/* Style des thumbnails individuelles */
.slider-nav-thumbnails .slick-slide {
    margin-bottom: 10px;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: all 0.3s ease;
    padding: 2px;
}

.slider-nav-thumbnails .slick-slide:last-child {
    margin-bottom: 0;
}

.slider-nav-thumbnails .slick-slide img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}

/* Ajustement pour Slick slider vertical */
.slider-nav-thumbnails.slick-initialized {
    display: block;
}


/* Ajustement responsive */
@media (max-width: 768px) {
    .detail-gallery {
        flex-direction: column; /* Sur mobile, revenir à vertical */
    }
    
    .slider-nav-thumbnails {
        width: 100%;
        order: 2; /* Mettre en dessous sur mobile */
    }
    
    .product-image-slider {
        order: 1; /* Mettre au-dessus sur mobile */
    }
    
    .slider-nav-thumbnails {
        display: flex !important; /* Horizontal sur mobile */
        overflow-x: auto;
        padding: 10px 0;
    }
    
    .slider-nav-thumbnails .slick-slide {
        margin-right: 10px;
        margin-bottom: 0;
        flex: 0 0 auto;
        width: 80px;
    }
    
    .slider-nav-thumbnails .slick-slide:last-child {
        margin-right: 0;
    }
}

.attr-size {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.product-detail-rating {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 5px 0;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.product-detail .section-title.style-1 {
  font-size: 22px;
}

.progress + .progress {
  margin-top: 1rem;
}

.progress span {
  line-height: 16px;
  background: #fff;
  padding-right: 10px;
  width: 49px;
}

.progress-bar {
  background-color: var(--zd-color-primary);
}

.shop-filter-toogle {
  margin-bottom: 20px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  border-radius: 8px;
  border: 1px solid #ececec;
  font-size: 17px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
  padding: 10px 20px;
}

.shop-filter-toogle i {
  margin-left: 5px;
  color: #B6B6B6;
}

.shop-filter-toogle i.angle-down {
  opacity: 0;
  visibility: hidden;
  display: none;
}

.shop-filter-toogle .fi-rs-filter {
  font-size: 14px;
  color: #B6B6B6;
}

.shop-filter-toogle.active i.angle-down {
  opacity: 1;
  visibility: visible;
  display: inline-block;
}

.shop-filter-toogle.active i.angle-up {
  opacity: 0;
  visibility: hidden;
  display: none;
}

.shop-product-fillter-header .card {
  border: 1px solid #ececec;
  border-radius: 8px;
  margin-bottom: 50px;
  padding: 30px 40px;
  -webkit-box-shadow: 20px 20px 54px rgba(0, 0, 0, 0.03);
  box-shadow: 20px 20px 54px rgba(0, 0, 0, 0.03);
}

.shop-product-fillter-header .categor-list li {
  font-size: 12px;
}

.shop-product-fillter-header .categor-list li + li {
  border-top: 1px solid #f7f8f9;
  padding-top: 5px;
  margin-top: 5px;
}

.shop-product-fillter-header .categor-list li a {
  font-size: 14px;
  color: #7E7E7E;
  margin-right: 10px;
}

.shop-product-fillter-header .categor-list li a:hover {
  color: var(--zd-color-primary);
}

.shop-product-fillter-header .color-filter {
  border-bottom: 1px solid #ececec;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.shop-product-fillter-header .product-rate-cover + .product-rate-cover {
  margin-top: 15px;
}

/* .shopping-summery table > :not(caption) > * > * {
  padding: 15px 0;
} */

.shopping-summery table td, .shopping-summery table th, .shopping-summery table thead {
  border: 0;
}

.shopping-summery table thead th {
  /* background-color: var(--zd-color-primary); */
  background-color:var(--zd-orange-h);
  padding: 18px 15px;
  font-family: "Inter", sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
}


.shopping-summery table tbody tr img {
  max-width: 70px;
}

table.no-border td, table.no-border th, table.no-border thead {
  border: 0;
}

.shipping_calculator .custom_select .select2-container {
  max-width: unset;
}

.shipping_calculator .custom_select .select2-container--default .select2-selection--single {
  border-radius: 8px;
  height: 64px;
  line-height: 64px;
}

.shipping_calculator .custom_select .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 64px;
}

.shipping_calculator .custom_select .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50%;
  right: 14px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.shipping_calculator .w-100 .select2-container {
  max-width: unset;
  min-width: 445.5px;
}

.cart-totals {
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
  padding: 30px 40px;
}

.order_review {
  border: 1px solid #ececec;
  padding: 30px;
  border-radius: 8px;
}

.payment_option .custome-radio {
  margin-bottom: 10px;
}

.payment_option .custome-radio .form-check-label {
  color: #292b2c;
  font-weight: 600;
}

.custome-radio .form-check-label::before {
  content: "";
  border: 1px solid #908f8f;
  height: 16px;
  width: 16px;
  display: inline-block;
  border-radius: 100%;
  vertical-align: middle;
  margin-right: 8px;
}

.custome-radio input[type="radio"] + .form-check-label::after {
  content: "";
  height: 10px;
  width: 10px;
  border-radius: 100%;
  position: absolute;
  top: 9px;
  left: 3px;
  opacity: 0;
}

.custome-radio input[type="radio"]:checked + .form-check-label::after {
  opacity: 1;
  background-color: var(--zd-color-primary);
}

.related-products .product-img-action-wrap {
  padding: 0;
  margin-bottom: 15px;
}

.col-lg-4-5 .product-cart-wrap .product-action-1 a.action-btn {
  width: 35px;
}

.col-lg-4-5 .countdown-section .countdown-amount {
  width: 38px;
}

.zoomWindow {
  border-radius: 8px;
  overflow: hidden;
}

.table-wishlist {
  border: 0;
}

.order_table table .product-thumbnail img {
  max-width: 120px;
  border-radius: 8px;
  border: 1px solid #ececec;
  padding: 5px;
}

.order_table table .w-160 {
  max-width: 160px;
}

.table.table-compare {
  border-radius: 8px;
}

.table.table-compare > :not(caption) > * > * {
  padding: 30px 0;
}

.mw-200 {
  min-width: 200px;
}

/*BLOG*/
.archive-header {
  /* background: url(../imgs/blog/header-bg.png) no-repeat center center; */
  background-color:var(--zd-color-primary);
  padding: 19px;
}
.archive-header .breadcrumb span::before,
.archive-header a{
  color:#fff;
}

.tags-list li.active a {
  color: #253D4E;
}

.post-list .post-thumb {
  max-width: 221px;
  overflow: hidden;
}

.post-list .post-thumb a {
  margin-bottom: 0;
}

.post-list .post-title {
  font-weight: 500;
}

.post-list .post-title a {
  color: #253D4E;
}

.single-content {
  text-rendering: optimizeLegibility;
  color: #253D4E;
  font-size: 17px;
}

.single-content h1 {
  font-size: 56px;
  line-height: 72px;
  margin-bottom: 32px;
}

.single-content h2 {
  font-size: 48px;
  line-height: 64px;
  margin-bottom: 30px;
}

.single-content h3 {
  font-size: 36px;
  line-height: 48px;
  margin-bottom: 28px;
}

.single-content h4 {
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 26px;
}

.single-content h5 {
  font-size: 20px;
  line-height: 24px;
  margin-bottom: 24px;
}

.single-content h6 {
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.single-content p {
  margin-bottom: 1.2em;
  font-weight: 400;
}

.single-content ul {
  list-style: circle;
  padding-left: 1rem;
  font-size: 15px;
}

.single-content ul li {
  position: relative;
  margin-bottom: 7px;
}

.single-content ol li {
  font-size: 15px;
}

.single-content .single-excerpt {
  font-size: 24px;
  line-height: 32px;
}

.single-content p {
  color: #253D4E;
  font-size: 17px;
}

.single-content blockquote {
  background-color: #F5F5F5;
  padding: 40px 60px;
  border-radius: 8px;
  margin: 30px auto;
  font-size: 24px;
  max-width: 80%;
}

.single-content blockquote p {
  font-size: 24px;
  line-height: 32px;
  color: #7E7E7E;
  margin-bottom: 0;
}

.single-header {
  margin-bottom: 30px;
}

.single-header .entry-meta.meta-1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-item-align: center;
      align-self: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.single-header .single-header-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.single-header .single-header-meta .social-icons ul {
  margin-top: 15px;
}

.single-thumbnail {
  margin-bottom: 30px;
}

.single-thumbnail img {
  border-radius: 8px;
  overflow: hidden;
}

.entry-bottom {
  border-top: 1px solid #ececec;
  padding-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.entry-bottom .social-icons ul {
  margin-top: 15px;
}

.entry-bottom .social-icons ul img {
  width: 20px;
  opacity: .6;
}

.author-bio {
  border-radius: 8px;
  border: 1px solid #ececec;
}

.author-bio .author-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.author-bio .author-image img {
  margin-right: 10px;
}

.author-bio .author-image p {
  font-size: 14px;
}

/*Entry meta*/
.entry-meta {
  line-height: 1;
}

.entry-meta.meta-2 .author-img img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.entry-meta.meta-2 .author-name {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 14px;
  display: inline-block;
  margin-top: 5px;
}

.entry-meta.meta-2 a.btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-item-align: center;
      align-self: center;
}

.entry-meta .author-add {
  font-size: 12px;
}

.entry-meta.meta-1 span {
  margin-right: 10px;
}

.entry-meta.meta-1 a.text-brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.entry-meta.meta-1 a.text-brand i {
  margin-left: 5px;
}

.entry-meta.meta-0 span {
  padding: 4px 10px 4px 19px;
  font-size: 11px;
  letter-spacing: 0.8px;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 8px;
  position: relative;
  margin-left: -5px;
}

.entry-meta.meta-0 span::before {
  content: "";
  width: 6px;
  height: 6px;
  background: none;
  margin-right: 3px;
  border-radius: 8px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 8px;
  margin-top: -3px;
  border: 1px solid var(--zd-color-primary);
}

.entry-meta .author-avatar img {
  max-width: 30px;
  margin-right: 5px;
}

span.has-dot {
  position: relative;
  padding-left: 10px;
}

span.has-dot::before {
  content: "";
  width: 4px;
  height: 4px;
  background: #d2d2d2;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  margin-top: -2px;
  display: block;
  left: -2px;
}

h6.post-title {
  font-size: 14px;
}

.post-title a {
  color: #253D4E;
}

.post-title a:hover {
  color: var(--zd-color-primary);
}

.post-thumb {
  overflow: hidden;
  position: relative;
}

.post-thumb.border-radius-5 img {
  border-radius: 8px;
}

.post-thumb a {
  line-height: 1;
}

.post-thumb .entry-meta {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

.post-thumb .entry-meta a {
  display: inline-block;
  color: #fff !important;
  background-color: #FDC040;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 35px;
}

/*Loop Grid*/
.loop-grid {
  position: relative;
}

.loop-grid article {
  position: relative;
  background: #fff;
  overflow: hidden;
}

.loop-grid .entry-content {
  padding: 30px;
}

.loop-grid .entry-content-2 {
  padding: 20px 30px;
}

.loop-grid.loop-list {
  position: relative;
}

.loop-grid.loop-list article {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid #ececec;
  border-radius: 8px;
}

.loop-grid.loop-list article:not(:last-child) {
  margin-bottom: 30px;
}

.loop-grid.loop-list article .post-thumb {
  min-height: 366px;
  min-width: 438px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
}

.entry-meta.meta-1, .entry-meta.meta-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.entry-meta.meta-1.meta-3, .entry-meta.meta-2.meta-3 {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
}

.entry-meta a.read-more {
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid #abd7ab;
  padding: 10px 15px;
  color: #98ca98;
  font-weight: 600;
  display: inline-block;
}

/** Print **/
@media print {
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .text-end {
    text-align: right !important;
  }
  .invoice-1 .container {
    padding: 0px;
  }
}

.invoice-content .btn-check:focus + .btn,
.invoice-content .btn:focus {
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.invoice-content .mobile-social-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-item-align: center;
      align-self: center;
}

.invoice-content .mobile-social-icon h6 {
  display: inline-block;
  margin-right: 15px;
  margin-bottom: 0;
}

.invoice-content .mobile-social-icon a {
  text-align: center;
  font-size: 14px;
  margin-right: 5px;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  height: 30px;
  width: 30px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  background: var(--zd-color-primary);
  border-radius: 30px;
  line-height: 1;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.invoice-content .mobile-social-icon a img {
  max-width: 16px;
}

.invoice-content .mobile-social-icon a img:hover {
  opacity: 0.8;
}

.invoice-content .mobile-social-icon a:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  margin-top: -2px;
}

.invoice-content .mobile-social-icon a:last-child {
  margin-right: 0;
}

/** Invoice 1 **/
.invoice {
  padding: 50px 0;
  background: #F2F3F4;
}

.invoice .invoice-info {
  background: #fff;
  margin-bottom: 30px;
  border-radius: 8px;
  -webkit-box-shadow: 20px 20px 54px rgba(0, 0, 0, 0.03);
          box-shadow: 20px 20px 54px rgba(0, 0, 0, 0.03);
}

.invoice .invoice-inner {
  max-width: 1296px;
  margin: 0 auto;
}

.invoice .item-desc-1 small {
  font-size: 14px;
}

.invoice .item-desc-1 span {
  font-size: 14px;
  font-weight: 600;
}

.invoice .invoice-header {
  padding: 80px 150px;
  border-radius: 8px 8px 0 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}

.invoice .table-striped > tbody > tr:nth-of-type(odd) {
  --bs-table-accent-bg: rgb(255 255 255 / 5%);
  color: var(--bs-table-striped-color);
}

.invoice .invoice-top {
  padding: 40px 150px 25px 150px;
  font-size: 15px;
  border-bottom: 1px solid #ececec;
  margin-bottom: 50px;
}

.invoice .invoice-center {
  padding: 0 150px 40px;
}

.invoice .invoice-center .table {
  margin-bottom: 0;
}

.invoice .table-section {
  text-align: center;
}

.invoice .table > :not(caption) > * > * {
  padding: 15px 20px;
}

.invoice .table td {
  font-size: 15px;
  font-weight: 400;
}

.invoice table th {
  font-size: 15px;
}

.invoice .caption-top {
  caption-side: top;
  text-align: right;
  margin-bottom: 0;
}

.invoice .invoice-bottom {
  padding: 0 150px 25px;
}

.invoice .invoice-bottom .amount {
  text-align: right;
}

.invoice .invoice-bottom h3 {
  margin-bottom: 15px;
}

.invoice .bg-active {
  background: #f3f3f3;
  color: #535353 !important;
}

.invoice .invoice-contact {
  padding: 70px 150px 40px;
}

.invoice .social-list {
  float: left;
}

.invoice .social-list span {
  margin-right: 5px;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
}

.invoice .social-list a {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  display: inline-block;
  font-size: 17px;
  background: #fff;
  margin: 0 2px 2px 0;
  color: #25cc7e;
  border-radius: 50%;
}

.invoice .social-list a:hover {
  background: #fff6f6;
}

.invoice-1 .invoice-info-buttom .table .invoice-1 .invoice-info-buttom .table tr,
.table tr {
  border: 1px solid #e9ecef;
}

.table > :not(caption) > * > * {
  background-color: var(--bs-table-bg);
  border-bottom-width: 0;
}

.invoice-1 .table td,
.invoice-1 .table th {
  vertical-align: middle;
  border: none !important;
}

.invoice-4 .invoice-bottom .hr {
  width: 100%;
  height: 1px;
  background-color: #ececec;
}

.invoice-5 .invoice-bottom .hr {
  width: 100%;
  height: 1px;
  background-color: #ececec;
}

.invoice-6.invoice {
  background-color: #fff;
}

.invoice-6 .hr {
  width: 100%;
  height: 1px;
  background-color: var(--zd-color-primary);
}

/*Responsive*/
@media only screen and (max-width: 992px) {
  .invoice .invoice-header {
    padding: 80px 50px;
  }
  .invoice .invoice-top {
    padding: 40px 50px 25px 50px;
  }
  .invoice .invoice-center {
    padding: 0 50px 40px;
  }
  .invoice .invoice-bottom {
    padding: 0 50px 25px;
  }
  .invoice .back-top-home {
    margin-bottom: 30px;
    text-align: center;
  }
}

.vendor-wrap {
  position: relative;
  background-color: #fff;
  overflow: hidden;
  transition: .2s;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  min-height: 400px;
}

.vendor-wrap:hover {
  /* -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05); */
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
  /* border: 1px solid #BCE3C9; */
  transition: .2s;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
}

.vendor-wrap .vendor-img-action-wrap {
  /* padding: 25px 25px 0 25px; */
  padding: 0;
}

/* .vendor-wrap .vendor-img-action-wrap img {
  max-width: 144px;
} */

.vendor-wrap .vendor-content-wrap {
  padding: 10px;
}

.vendor-wrap .vendor-content-wrap h4 a {
  color: #253D4E;
}

.vendor-wrap .vendor-content-wrap h4 a:hover {
  color: var(--zd-color-primary);
}

.vendor-wrap .vendor-content-wrap .total-product {
  position: relative;
  display: inline-block;
  padding: 6px 20px 6px 20px;
  border-radius: 8px;
  background-color: #DEF9EC;
  font-size: 14px;
  font-weight: 700;
  color: var(--zd-color-primary);
  min-width: 123px;
}

.vendor-wrap .product-badges.product-badges-position {
  position: absolute;
  right: 0;
  top: 0px;
  z-index: 9;
}

.vendor-wrap .product-badges.product-badges-position span {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  padding: 7px;
  background-color: var(--zd-color-primary);
}

.vendor-wrap .product-badges.product-badges-position span.hot {
  background-color: #CC522B;
}

.vendor-wrap .product-badges.product-badges-position span.new {
  background-color: var(--zd-color-primary);
}

.vendor-wrap .product-badges.product-badges-position span.sale {
  background-color: #67bcee;
}

.vendor-wrap .product-badges.product-badges-position span.best {
  background-color: #f59758;
}

.vendor-wrap.style-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.vendor-wrap.style-2 .vendor-img-action-wrap {
  position: relative;
  padding: 20px;
}

.vendor-wrap.style-2 .vendor-img-action-wrap .total-product {
  position: relative;
  display: inline-block;
  padding: 6px 20px 6px 20px;
  border-radius: 8px;
  background-color: #DEF9EC;
  font-size: 14px;
  font-weight: 700;
  color: var(--zd-color-primary);
  min-width: 123px;
}

.vendor-wrap.style-2 .vendor-info .btn {
  min-width: 105px;
  padding: 8px 10px 8px 13px;
}

.archive-header-2 .search-form input {
  border-radius: 8px;
  padding-left: 30px;
  -webkit-box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.07);
          box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.07);
}

/*LAYOUT -> HEADER STYLE*/
/*Header default*/

.header-info > ul > li a.language-dropdown-active i.fa-chevron-down {
  font-size: 8px;
  margin-left: 5px;
}

.header-wrap.header-space-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.logo a {
  display: block;
}

.logo.logo-width-1 {
  margin-right: 70px;
}

.logo.logo-width-1 a img {
  width: 240px;
  min-width: 240px;
}

.header-action .header-action-icon.header-action-mrg-none2 {
  margin-right: 0px;
}

.header-action .header-action-icon > a span.pro-count {
  position: absolute;
  right: -5px;
  bottom: -4px;
  color: #ffffff;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}

.header-action-2 .header-action-icon-2 span.lable {
  font-size: 16px;
  margin: 5px 0 0 10px;
}

.header-action-2 .header-action-icon-2:last-child {
  padding: 0 0px 0 8px;
}

.header-action-2 .header-action-icon-2 > a {
  font-size: 30px;
  color: #333;
  line-height: 1;
  display: inline-block;
  position: relative;
}

.header-action-2 .header-action-icon-2 > a img {
  width: 100%;
  max-width: 25px;
}

.header-action-2 .header-action-icon-2 > a span {
  font-size: 14px;
  color: #7E7E7E;
}

.header-action-2 .header-action-icon-2 > a span.pro-count {
  position: absolute;
  right: -11px;
  top: -5px;
  color: #ffffff;
  height: 17px;
  width: 17px;
  font-weight: 500;
  font-size: 12px;
  text-align: center;
  line-height: 17px;
}

.cart-dropdown-wrap ul li .shopping-cart-img a {
  display: block;
}

.search-popup-wrap.search-visible {
  visibility: visible;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.mobile-header-wrapper-style.sidebar-visible {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-top .mobile-header-logo a {
  display: block;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav {
  height: 100%;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .main-categori-wrap a i {
  margin-right: 15px;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .main-categori-wrap .categori-dropdown-active-small {
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  padding: 0;
}

.header-action .header-action-icon.header-action-mrg-none {
  margin-right: 13px;
}

.header-action .header-action-icon > a span.pro-count.blue {
  background-color: var(--zd-color-primary);
}

.header-action.header-action-hm3 .header-action-icon.header-action-mrg-none2 {
  margin-right: 0px;
}

.header-action.header-action-hm3 .header-action-icon:last-child {
  margin-right: 0;
}

.header-action-2 .header-action-icon-2 {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0 10px;
}

.header-action-2 .header-action-icon-2 > a svg {
  width: 1em;
  height: 1em;
}

.header-action-2 .header-action-icon-2 > a span.pro-count.blue {
  background-color: #CC522B;
}

.header-action-2 .header-action-icon-2:hover > a {
  color: var(--zd-color-primary);
  fill: var(--zd-color-primary);
}

.header-action-2 .header-action-icon-2:hover .cart-dropdown-wrap {
  opacity: 1;
  visibility: visible;
  top: calc(100% + 10px);
}

.cart-dropdown-wrap.cart-dropdown-hm2 {
  right: 0;
}

.cart-dropdown-wrap.account-dropdown {
  width: 200px;
}

.cart-dropdown-wrap.account-dropdown a {
  color: #253D4E;
}

.cart-dropdown-wrap.account-dropdown a:hover {
  color: var(--zd-color-primary);
}

.cart-dropdown-wrap ul li .shopping-cart-img {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 54px;
  flex: 0 0 54px;
}

.cart-dropdown-wrap ul li .shopping-cart-img a img {
  max-width: 100%;
}


.cart-dropdown-wrap ul li .shopping-cart-title h4 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  margin-top:5px;
}

.cart-dropdown-wrap ul li .shopping-cart-title h4 a {
  color: var(--zd-color-primary);
  font-size: 14px;
}

.cart-dropdown-wrap ul li .shopping-cart-title h4 a:hover {
  color: #253D4E;
}

.cart-dropdown-wrap ul li .shopping-cart-title h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 0px;
  color: var(--zd-color-primary);
}

.cart-dropdown-wrap ul li .shopping-cart-title h3 span {
  color: #696969;
  font-weight: 400;
  font-size: 16px;
}

.cart-dropdown-wrap ul li .shopping-cart-delete {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 100;
  -ms-flex-positive: 100;
  flex-grow: 100;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin: 6px 0 0;
}

.cart-dropdown-wrap ul li .shopping-cart-delete a {
  font-size: 18px;
  color: #696969;
}

.cart-dropdown-wrap ul li .shopping-cart-delete a:hover {
  color: #333;
}


.sticky-bar.stick.sticky-white-bg {
  background-color: #fff;
}

.sticky-bar.stick.sticky-blue-bg {
  background-color: #3286e0;
}

.header-bottom .header-action-right a span.pro-count {
  background-color: #CC522B;
  color: #fff;
}

.search-style-3 {
  margin-bottom: 10px;
}

.search-style-3 form {
  position: relative;
}

.search-style-3 form input {
  font-size: 14px;
  height: 45px;
  color: #253D4E;
  background-color: #F5F5F5;
  border-radius: 5px;
  padding: 3px 50px 3px 20px;
  -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  border: 0;
}

.search-style-3 form input::-moz-input-placeholder {
  color: #253D4E;
  opacity: 1;
}

.search-style-3 form input::-webkit-input-placeholder {
  color: #253D4E;
  opacity: 1;
}

.search-style-3 form input:focus {
  border: 1px solid #BCE3C9;
}

.search-style-3 form button {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0;
  border: none;
  font-size: 16px;
  height: 100%;
  padding: 0 14px;
  background-color: transparent;
  color: #333;
}

.search-style-3 form button:hover {
  color: var(--zd-color-primary);
}

.search-popup-wrap.search-visible .search-popup-content form input {
  -webkit-transform: none;
  transform: none;
  opacity: 1;
  -webkit-transition-delay: .6s;
  transition-delay: .6s;
}

.close-style-wrap {
  position: absolute;
  right: 55px;
  top: 40px;
}

.close-style-wrap.close-style-position-inherit {
  position: inherit;
}

.close-style-wrap .close-style {
  position: relative;
  background-color: transparent;
  padding: 0;
  border: none;
  width: 27px;
  height: 27px;
  background-color: #F2F3F4;
  border-radius: 30px;
}

.close-style-wrap .close-style > i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1px;
  margin: 0 !important;
  -webkit-transform-origin: center;
  transform-origin: center;
  display: block;
  overflow: hidden;
}

.close-style-wrap .close-style > i.icon-top {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-style-wrap .close-style > i.icon-top::before {
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s, -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transform: scaleX(1) translateZ(0);
  transform: scaleX(1) translateZ(0);
  -webkit-transform-origin: right;
  transform-origin: right;
}

.close-style-wrap .close-style > i.icon-top::after {
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform: scaleX(0) translateZ(0);
  transform: scaleX(0) translateZ(0);
  -webkit-transform-origin: left;
  transform-origin: left;
}

.close-style-wrap .close-style > i.icon-bottom {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
}

.close-style-wrap .close-style > i.icon-bottom::before {
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s, -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transform: scaleX(1) translateZ(0);
  transform: scaleX(1) translateZ(0);
  -webkit-transform-origin: right;
  transform-origin: right;
}

.close-style-wrap .close-style > i.icon-bottom::after {
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform: scaleX(0) translateZ(0);
  transform: scaleX(0) translateZ(0);
  -webkit-transform-origin: left;
  transform-origin: left;
}

.close-style-wrap .close-style:hover {
  -webkit-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

.close-style-wrap .close-style > i::before,
.close-style-wrap .close-style > i::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: #111;
}

.burger-icon {
  position: relative;
  width: 24px;
  height: 20px;
  cursor: pointer;
  -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.burger-icon > span {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
}

.burger-icon > span.burger-icon-top {
  top: 2px;
}

.burger-icon > span.burger-icon-bottom {
  bottom: 2px;
}

.burger-icon > span.burger-icon-mid {
  top: 9px;
}

.burger-icon > span::before,
.burger-icon > span::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: #333;
}

.burger-icon.burger-icon-white > span::before,
.burger-icon.burger-icon-white > span::after {
  background-color: #253D4E;
}

.body-overlay-1 {
  background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  visibility: hidden;
  width: 100%;
  cursor: crosshair;
  z-index: 9999;
}

.mobile-menu-active .body-overlay-1 {
  opacity: 1;
  visibility: visible;
}

.mobile-header-wrapper-style {
  position: fixed;
  top: 0;
  width: 360px;
  min-height: 100vh;
  bottom: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-transform: translate(-200px, 0);
  transform: translate(-200px, 0);
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.09);
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.09);
  z-index: 99999;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner {
  padding: 0px 0px 30px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 20px 30px;
  background-color: #ffffff;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-top .mobile-header-logo a img {
  width: 100px;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area {
  padding: 30px 30px 30px;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li {
  display: block;
  position: relative;
  padding: 13px 0;
  border-bottom: 1px solid #ececec;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li:last-child {
  border-bottom: none;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li.menu-item-has-children .menu-expand {
  right: 0;
  position: absolute;
  cursor: pointer;
  z-index: 9;
  text-align: center;
  font-size: 12px;
  display: block;
  width: 30px;
  height: 30px;
  line-height: 38px;
  top: 5px;
  color: #253D4E;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li.menu-item-has-children .menu-expand i {
  font-size: 14px;
  font-weight: 300;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li.menu-item-has-children.active > .menu-expand {
  background: rgba(255, 255, 255, 0.2);
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li.menu-item-has-children.active > .menu-expand i::before {
  content: "\f112";
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li a {
  font-size: 14px;
  line-height: 1;
  text-transform: capitalize;
  font-weight: 700;
  position: relative;
  display: inline-block;
  color: #253D4E;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li a i {
  margin-right: 5px;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li ul {
  padding: 10px 0 0 10px;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li ul li {
  padding: 10px 0;
  border-bottom: none;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li ul li.menu-item-has-children .menu-expand {
  top: 0px;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li ul li a {
  font-size: 14px;
  display: block;
  font-weight: 500;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li ul li ul {
  margin-top: 0;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li ul li.menu-item-has-children.active {
  padding-bottom: 0;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li:hover > a {
  color: var(--zd-color-primary);
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .categories-dropdown-wrap ul li a {
  padding: 5px 15px;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-header-info-wrap {
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ececec;
  margin: 17px 0 30px 0;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-header-info-wrap .single-mobile-header-info {
  position: relative;
  margin-bottom: 13px;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-header-info-wrap .single-mobile-header-info:last-child {
  margin-bottom: 0;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-header-info-wrap .single-mobile-header-info a {
  font-size: 14px;
  display: block;
  font-weight: 500;
  color: #253D4E;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-header-info-wrap .single-mobile-header-info a:hover {
  color: var(--zd-color-primary);
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-header-info-wrap .single-mobile-header-info a i {
  font-size: 14px;
  color: var(--zd-color-primary);
  margin-right: 8px;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-header-info-wrap .single-mobile-header-info .lang-curr-dropdown {
  margin-top: 5px;
  display: none;
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding: 10px 0 0 0;
  width: 100%;
  z-index: 11;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-header-info-wrap .single-mobile-header-info .lang-curr-dropdown ul li {
  padding-bottom: 10px;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-header-info-wrap .single-mobile-header-info .lang-curr-dropdown ul li:last-child {
  padding-bottom: 0px;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-header-info-wrap .single-mobile-header-info .lang-curr-dropdown ul li a {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-header-info-wrap .single-mobile-header-info .lang-curr-dropdown ul li a:hover {
  color: var(--zd-color-primary);
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-header-info-wrap .single-mobile-header-info:hover > a {
  color: #253D4E;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-header-border {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .site-copyright {
  font-size: 13px;
  color: #B6B6B6;
}

.mobile-social-icon a {
  text-align: center;
  font-size: 14px;
  margin-right: 5px;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  height: 30px;
  width: 30px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  background: var(--zd-color-primary);
  border-radius: 30px;
  line-height: 1;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.mobile-social-icon a img {
  max-width: 16px;
}

.mobile-social-icon a img:hover {
  opacity: 0.8;
}

.mobile-social-icon a:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  margin-top: -2px;
}

.mobile-social-icon a:last-child {
  margin-right: 0;
}

.mobile-search {
  padding: 0 0 10px 0;
}

/* Header style 1 */

.header-style-1 .select2-container {
  max-width: unset;
  min-width: 150px;
}

.header-style-1 .select2-container--default .select2-selection--single {
  border: 0;
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  width: 155px;
  max-width: unset;
  border-radius: 5px 0 0 5px;
}

.header-style-1 .select2-container--default .select2-selection--single .select2-selection__arrow {
  right: 10px;
}

.header-style-1 .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border: 0;
}

.header-style-1 .select2-container--default .select2-selection--single .select2-selection__arrow b::after {
  font-family: uicons-regular-straight !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1 !important;
  content: "\f10f";
  position: absolute;
  top: -4px;
}

.header-style-1 .select2-container--default .select2-selection--single .select2-selection__rendered {
  height: 50px;
  line-height: 50px;
  position: relative;
}

.header-style-1 .select2-container--default .select2-selection--single .select2-selection__rendered:after {
  content: '';
  height: 20px;
  width: 1px;
  background-color: #CACACA;
  position: absolute;
  right: 0;
  top: 15px;
}

.header-style-1 .search-location .select2-container--default .select2-selection--single {
  border: 0;
  height: 40px;
  line-height: 40px;
  padding-left: 13px;
  width: 164px;
  max-width: unset;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid #ececec;
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
}

.header-style-1 .search-location .select2-container--default .select2-selection--single:hover {
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.header-style-1 .search-location .select2-container--default .select2-selection--single .select2-selection__arrow {
  right: 10px;
  top: 7px;
}

.header-style-1 .search-location .select2-container--default .select2-selection--single .select2-selection__rendered {
  height: 40px;
  line-height: 35px;
  position: relative;
  color: var(--zd-color-primary);
  font-weight: 500;
}

.header-style-1 .search-location .select2-container--default .select2-selection--single .select2-selection__rendered:after {
  content: none;
}

.header-style-1 .search-location .select2-container--default .select2-selection--single .select2-selection__rendered:before {
  font-family: uicons-regular-straight !important;
  content: "\f1c6";
  color: #B6B6B6;
  margin-right: 7px;
  display: inline-block;
}

.header-style-1 .search-location .select2-container {
  max-width: unset;
  min-width: 158px;
  max-width: 158px;
  margin-right: 30px;
}

.header-style-1 .main-categori-wrap > a i.up {
  right: 30px;
}

.header-style-1 .main-categori-wrap > a.categories-button-active {
  line-height: 44px;
  border-radius: 5px;
  padding: 0 20px;
  font-family: "Inter", sans-serif;
  font-size: 16px;
}

.header-style-1 .main-categori-wrap > a.categories-button-active i {
  color: #fff;
  margin-left: 12px;
  font-size: 10px;
  margin-bottom: 5px;
}

.header-style-1 .main-menu.main-menu-light-white > nav > ul > li > a {
  color: #494949;
}

.header-style-1 .stick .main-menu.main-menu-light-white > nav > ul > li > a {
  color: #ffffff !important;
}

.header-style-1 .categories-dropdown-active-large {
  top: 100%;
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
}

span.fi-rs-apps {
  font-size: 16px;
}

/*LAYOUT -> NAVIGATION STYLE*/
.main-menu.main-menu-mrg-1 {
  margin: 0 0 0 27px;
}

.main-menu > nav > ul > li.hot-deals {
  padding-right: 30px !important;
}

.main-menu > nav > ul > li.hot-deals img {
  position: relative;
  margin-bottom: -4px;
  margin-right: 8px;
}

.main-menu > nav > ul > li.position-static {
  position: static;
}

.main-menu > nav > ul > li > a.active {
  color: var(--zd-color-primary);
}

.main-menu > nav > ul > li ul.sub-menu {
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #ffffff;
  min-width: 250px;
  padding: 25px 15px;
  -webkit-transition: all .25s ease 0s;
  transition: all .25s ease 0s;
  opacity: 0;
  visibility: hidden;
  margin-top: 20px;
  border-radius: 10px;
  z-index: 999;
  border: 1px solid #ececec;
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
}

.main-menu > nav > ul > li ul.sub-menu li {
  line-height: 1;
  display: block;
  margin-bottom: 21px;
  position: relative;
}

.main-menu > nav > ul > li ul.sub-menu li:last-child {
  margin-bottom: 0;
}

.main-menu > nav > ul > li ul.sub-menu li ul.level-menu {
  position: absolute;
  left: 100%;
  top: -110px;
  background-color: #ffffff;
  width: 240px;
  padding: 33px 0 35px;
  -webkit-transition: all .25s ease 0s;
  transition: all .25s ease 0s;
  opacity: 0;
  visibility: hidden;
  border-radius: 10px;
  margin-top: 20px;
  border: 1px solid #ececec;
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
}

.main-menu > nav > ul > li ul.sub-menu li ul.level-menu.level-menu-modify {
  top: -25px;
}

.main-menu > nav > ul > li ul.sub-menu li a i {
  font-size: 9px;
  float: right;
  position: relative;
  top: 4px;
}

.main-menu > nav > ul > li ul.sub-menu li:hover > a {
  color: #000;
}

.main-menu > nav > ul > li ul.sub-menu li:hover ul.level-menu {
  opacity: 1;
  visibility: visible;
  margin-top: 0px;
}

.main-menu > nav > ul > li ul.mega-menu {
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #ffffff;
  width: 100%;
  padding: 35px 25px 35px 35px;
  -webkit-transition: all .25s ease 0s;
  transition: all .25s ease 0s;
  opacity: 0;
  visibility: hidden;
  margin-top: 20px;
  border-radius: 0 0 10px 10px;
  z-index: 999;
  border: 1px solid #ececec;
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
}

.main-menu > nav > ul > li ul.mega-menu li {
  line-height: 1;
  display: block;
  position: relative;
  float: left;
  padding-right: 10px;
}

.main-menu > nav > ul > li ul.mega-menu li:last-child {
  margin-bottom: 0;
}

.main-menu > nav > ul > li ul.mega-menu li.sub-mega-menu-width-22 {
  width: 22%;
}

.main-menu > nav > ul > li ul.mega-menu li.sub-mega-menu-width-34 {
  width: 34%;
}

.main-menu > nav > ul > li ul.mega-menu li a.menu-title {
  font-size: 19px;
  font-weight: 700;
  display: block;
}

.main-menu > nav > ul > li ul.mega-menu li ul {
  margin-top: 28px;
}

.main-menu > nav > ul > li ul.mega-menu li ul li {
  line-height: 1;
  display: block;
  margin-bottom: 14px;
  float: none;
}

.main-menu > nav > ul > li ul.mega-menu li ul li:last-child {
  margin-bottom: 0;
}

.main-menu > nav > ul > li ul.mega-menu li ul li a {
  font-size: 15px;
  color: #7E7E7E;
  display: block;
  line-height: 1.4;
}

.main-menu > nav > ul > li ul.mega-menu li ul li a:hover {
  color: var(--zd-color-primary);
}

.main-menu > nav > ul > li ul.mega-menu li .menu-banner-wrap {
  overflow: hidden;
  position: relative;
}

.main-menu > nav > ul > li ul.mega-menu li .menu-banner-wrap a {
  display: block;
}

.main-menu > nav > ul > li ul.mega-menu li .menu-banner-wrap a img {
  width: 100%;
}

.main-menu > nav > ul > li ul.mega-menu li .menu-banner-wrap .menu-banner-content {
  position: absolute;
  top: 32px;
  left: 30px;
}

.main-menu > nav > ul > li ul.mega-menu li .menu-banner-wrap .menu-banner-content h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  margin: 5px 0 11px;
}

.main-menu > nav > ul > li ul.mega-menu li .menu-banner-wrap .menu-banner-content .menu-banner-price span.old-price {
  font-size: 19px;
  font-weight: 400;
  color: #696969;
  text-decoration: line-through;
  margin-left: 5px;
}

.main-menu > nav > ul > li ul.mega-menu li .menu-banner-wrap .menu-banner-content .menu-banner-btn a {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  border-radius: 26px;
  padding: 12px 22px 14px;
  background-color: var(--zd-color-primary);
}

.main-menu > nav > ul > li ul.mega-menu li .menu-banner-wrap .menu-banner-discount h3 span {
  display: block;
  line-height: 1;
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 3px;
}

.main-menu > nav > ul > li ul.mega-menu li .menu-banner-wrap:hover .menu-banner-btn a {
  background-color: #FD6E6E;
}

.main-menu > nav > ul > li:hover ul.sub-menu {
  opacity: 1;
  visibility: visible;
  margin-top: 12px;
}

.main-menu > nav > ul > li:hover ul.mega-menu {
  opacity: 1;
  visibility: visible;
  margin-top: 0;
}

.main-menu.hover-boder > nav > ul > li > a {
  position: relative;
}

.main-menu.hover-boder > nav > ul > li > a::after {
  content: none;
  position: absolute;
  left: auto;
  right: 0;
  bottom: 34px;
  height: 1px;
  width: 0;
  -webkit-transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
  transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
  background: var(--zd-color-primary);
}

.main-menu.hover-boder > nav > ul > li:hover > a::after {
  width: 100%;
  left: 0;
  right: auto;
}

.main-menu.hover-boder.hover-boder-white > nav > ul > li > a::after {
  bottom: 18px;
  background: #ffffff;
}

.main-menu.hover-boder.hover-boder-modify > nav > ul > li > a::after {
  bottom: 28px;
}

.main-menu.main-menu-light-white > nav > ul > li > a {
  color: white;
}

.main-menu.main-menu-padding-1 > nav > ul > li {
  padding: 0 15px;
}

.main-menu.main-menu-padding-1 > nav > ul > li:first-child {
  padding-left: 0 !important;
}

.main-menu.main-menu-lh-2 > nav > ul > li {
  line-height: 70px;
}

.main-menu.main-menu-lh-3 > nav > ul > li {
  line-height: 80px;
}

.main-menu.main-menu-grow {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.main-menu > nav > ul > li ul.sub-menu li a {
  font-size: 14px;
  color: #7E7E7E;
  display: block;
  padding: 0 15px;
}

.main-menu > nav > ul > li ul.sub-menu li a:hover {
  color: var(--zd-color-primary);
}

.main-menu > nav > ul > li ul.mega-menu li .menu-banner-wrap .menu-banner-content h4 {
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0;
}

.main-menu > nav > ul > li ul.mega-menu li .menu-banner-wrap .menu-banner-content .menu-banner-price {
  margin: 0 0 28px;
}

.main-menu > nav > ul > li ul.mega-menu li .menu-banner-wrap .menu-banner-content .menu-banner-price span.new-price {
  font-size: 24px;
  font-weight: 700;
  color: #FD6E6E;
}

.main-menu > nav > ul > li ul.mega-menu li .menu-banner-wrap .menu-banner-discount {
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #ffd55a;
  position: absolute;
  top: 13%;
  right: 7%;
}

.main-menu > nav > ul > li ul.mega-menu li .menu-banner-wrap .menu-banner-discount h3 {
  color: #333;
  margin: 0;
  text-align: center;
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
}

.main-menu.main-menu-lh-1 > nav > ul > li {
  line-height: 70px;
}

.main-categori-wrap > a > i.up {
  position: absolute;
  top: 40%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0;
  opacity: 0;
  visibility: hidden;
}

.main-categori-wrap > a.open > i {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.categories-dropdown-active-large {
  list-style-type: none;
  position: absolute;
  top: 177%;
  left: 0;
  z-index: 99;
  margin: 0;
  padding: 30px;
  background: #fff;
  border: 1px solid #BCE3C9;
  border-radius: 10px;
  font-size: 16px;
  min-width: 270px;
  -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
  visibility: hidden;
  margin-top: 26px;
}

.categories-dropdown-active-large.open {
  opacity: 1;
  visibility: visible;
}

.categori-dropdown-active-small {
  z-index: 9;
  margin: 0;
  padding: 14px 0 23px;
  background: #fff;
  border-radius: 5px;
  -webkit-box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.07);
  box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.07);
  font-size: 16px;
  font-weight: 400;
  display: none;
  width: 100%;
}

.categories-dropdown-wrap ul li:hover .dropdown-menu {
  display: block;
  opacity: 1;
  visibility: visible;
  margin-top: 0px;
  pointer-events: auto;
}

.categories-dropdown-wrap ul li.has-children {
  position: relative;
}

.categories-dropdown-wrap ul li.has-children > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  position: absolute;
  right: 30px;
  top: 50%;
  margin-top: -5px;
}

.categories-dropdown-wrap ul li.has-children .dropdown-menu {
  left: 100%;
  top: 0;
  margin: 0;
  margin-top: 0px;
  border: 1px solid #ececec;
  min-width: 800px;
  width: 100%;
  right: 0;
  border-radius: 0;
  padding: 20px;
}

.categories-dropdown-wrap ul li.has-children .dropdown-menu .submenu-title {
  font-size: 19px;
  font-weight: 700;
  display: block;
  color: var(--zd-color-primary);
  padding: 5px 34px;
}

.categories-dropdown-wrap ul li.has-children .dropdown-menu .header-banner2 {
  display: block;
  position: relative;
  margin-bottom: 15px;
}

.categories-dropdown-wrap ul li.has-children .dropdown-menu .header-banner2 .banne_info {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  padding: 15px;
}

.categories-dropdown-wrap ul li.has-children .dropdown-menu .header-banner2 .banne_info a {
  text-transform: capitalize;
  position: relative;
  padding: 0;
  color: #272a2c !important;
}

.categories-dropdown-wrap ul li.has-children .dropdown-menu .header-banner2 .banne_info a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  width: 50%;
  background-color: #272a2c;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.categories-dropdown-wrap ul.end li {
  margin-right: 0;
}

.categories-dropdown-wrap .more_categories {
  margin-top: 15px;
  color: var(--zd-color-primary);
  position: relative;
  font-size: 13px;
  font-family: "Inter", sans-serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.categories-dropdown-wrap .more_categories span.icon {
  display: inline-block;
  position: relative;
  width: 24px;
  height: 24px;
  border: 2px solid;
  border-radius: 30px;
  margin-right: 5px;
}

.categories-dropdown-wrap .more_categories span.icon::before {
  content: "";
  width: 12px;
  height: 2px;
  background-color: var(--zd-color-primary);
  position: absolute;
  right: 4px;
  top: 9px;
}

.categories-dropdown-wrap .more_categories span.icon::after {
  content: "";
  width: 2px;
  height: 12px;
  background-color: var(--zd-color-primary);
  position: absolute;
  right: 9px;
  top: 4px;
}

.categories-dropdown-wrap .more_categories.show span.icon::after {
  display: none;
  content: none;
}

.categories-dropdown-wrap.style-2 {
  border: 1px solid #BCE3C9;
  border-radius: 8px;
  padding: 30px;
}

.categories-dropdown-wrap.style-2 ul li {
  border-radius: 0;
  border: 0;
  height: 24px;
  padding: 0;
  line-height: 24px;
  margin-bottom: 16px;
}

.categories-dropdown-wrap.style-2 ul li:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.categories-dropdown-wrap.style-2 ul li a {
  font-weight: 500;
}

.categories-dropdown-wrap.style-2 ul li img {
  max-height: 20px;
}

.categories-dropdown-wrap.style-2 .more_categories {
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
}

.categories-dropdown-wrap.style-2 .more_categories .icon {
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}

/*Pagination*/
.pagination-area .page-item {
  margin: 0 5px;
}

.pagination-area .page-item:first-child {
  margin-left: 0;
}

.pagination-area .page-item:first-child .page-link {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.pagination-area .page-item:last-child .page-link {
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

.pagination-area .page-item.active .page-link, .pagination-area .page-item:hover .page-link {
  color: #fff;
  background: var(--zd-color-primary);
}

.pagination-area .page-item:last-child .page-link {
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  line-height: 43px;
}

.pagination-area .page-item:first-child .page-link {
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
  line-height: 43px;
}

.pagination-area .page-link {
  border: 0;
  padding: 0 10px;
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: 0;
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 40px;
  color: #7E7E7E;
  line-height: 40px;
  text-align: center;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  background-color: #F2F3F4;
}

.pagination-area .page-link.dot {
  background-color: transparent;
  color: #7E7E7E;
  letter-spacing: 2px;
}

/*LAYOUT -> SIDEBAR*/

.price_range {
  background: url(../imgs/banner/fillter-widget-bg.png) no-repeat right bottom;
  background-size: 150px;
}

.primary-sidebar .sidebar-widget {
  position: relative;
  padding: 30px;
  border: 1px solid #ececec;
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
}

.widget-category-2 ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 48px;
  border-radius: 8px;
  border: 1px solid #F2F3F4;
  padding: 9px 18px;
  margin: 0 0 15px 0;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
}

.widget-category-2 ul li:last-child {
  margin-bottom: 0 !important;
}

.widget-category-2 ul li:hover {
  border: 1px solid #BCE3C9;
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
  transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
}

.widget-category-2 ul li:hover a {
  color: var(--zd-color-primary);
}

.widget-category-2 ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0;
  line-height: 1.5;
  color: #253D4E;
  font-size: 14px;
}

.widget-category-2 ul li a:hover {
  color: var(--zd-color-primary);
  background-color: transparent;
}

.widget-category-2 ul li a img {
  max-width: 30px;
  margin-right: 15px;
}

.widget-category-2 ul li:hover .dropdown-menu {
  display: block;
  opacity: 1;
  visibility: visible;
  margin-top: 0px;
  pointer-events: auto;
}

.widget-category-2 ul li.has-children {
  position: relative;
}

.widget-category-2 ul li.has-children > a::after {
  content: "\f111";
  font-family: 'uicons-regular-straight' !important;
  position: absolute;
  right: 30px;
  top: 50%;
  margin-top: -10px;
}

.widget-category-2 ul li.has-children .dropdown-menu {
  left: 100%;
  top: 0;
  margin: 0;
  margin-top: 0px;
  border: 1px solid #ececec;
  min-width: 800px;
  width: 100%;
  right: 0;
  border-radius: 0;
  padding: 20px;
}

.widget-category-2 ul li.has-children .dropdown-menu .submenu-title {
  font-size: 19px;
  font-weight: 700;
  display: block;
  color: var(--zd-color-primary);
  padding: 5px 34px;
}

.widget-category-2 ul li.has-children .dropdown-menu .header-banner2 {
  display: block;
  position: relative;
  margin-bottom: 15px;
}

.widget-category-2 ul li.has-children .dropdown-menu .header-banner2 .banne_info {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  padding: 15px;
}

.widget-category-2 ul li.has-children .dropdown-menu .header-banner2 .banne_info a {
  text-transform: capitalize;
  position: relative;
  padding: 0;
  color: #272a2c !important;
}

.widget-category-2 ul li.has-children .dropdown-menu .header-banner2 .banne_info a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  width: 50%;
  background-color: #272a2c;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.widget-category-2 ul.end li {
  margin-right: 0;
}

.widget-category-2 .count {
  display: inline-block;
  background-color: #BCE3C9;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 20px;
  margin-left: 5px;
  font-size: 12px;
  color: #253D4E;
}

/*Social network widget*/

.follow-us a i.nth-2 {
  position: absolute;
  top: 38px;
  left: 0;
}

.follow-us i.v-align-space {
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  padding-right: 4px;
  line-height: 1;
}

.follow-us .social-icon {
  display: inline-block;
  position: relative;
  transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
}

.follow-us a.follow-us-facebook,
.single-social-share a.facebook-icon {
  background: #305c99;
}

.follow-us a.follow-us-twitter,
.single-social-share a.twitter-icon {
  background: #00cdff;
}

.follow-us a.follow-us-instagram,
.single-social-share a.instagram-icon {
  background: #3f729b;
}

.follow-us a.follow-us-youtube,
.single-social-share a.pinterest-icon {
  background: #e22b26;
}

.sidebar-widget .widget-header {
  border-bottom: 1px solid #ececec;
}

.sidebar-widget .widget-header h5 {
  margin-bottom: 0;
  text-transform: uppercase;
  font-size: 14px;
}

.sidebar-widget .banner-img {
  float: none;
}

.widget_categories li.cat-item {
  text-align: right;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.15);
  display: table;
  width: 100%;
  font-size: 14px;
  padding: 7px 0;
}

.widget_categories li.cat-item:last-child {
  border: none;
}

.widget_categories li.cat-item a {
  text-align: left;
  float: left;
  padding: 0;
}

.contact-infor {
  font-size: 15px;
  color: #253D4E;
}

.contact-infor li:not(:last-child) {
  margin-bottom: 10px;
}

.contact-infor li img {
  margin-right: 8px;
  max-width: 16px;
}


#scrollUp {
  width: 32px;
  height: 32px;
  color: #222;
  right: 30px;
  bottom: 30px;
  border-radius: 30px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 999 !important;
  border: 1px solid #222;
}

#scrollUp .zd-icon {
  font-size: 18px;
}

#scrollUp:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}

/*LAYOUT -> SPACING**/

.p-20 {
  padding: 20px !important;
}

.p-30 {
  padding: 30px !important;
}

.p-40 {
  padding: 40px !important;
}

.pt-5 {
  padding-top: 5px !important;
}

.pt-10 {
  padding-top: 10px !important;
}

.pt-30 {
  padding-top: 30px !important;
}

.pt-40 {
  padding-top: 40px !important;
}

.pt-50 {
  padding-top: 50px !important;
}

.pt-150 {
  padding-top: 150px !important;
}

.pb-10 {
  padding-bottom: 10px !important;
}

.pb-50 {
  padding-bottom: 50px !important;
}

.pb-150 {
  padding-bottom: 150px !important;
}

.pl-20 {
  padding-left: 20px !important;
}

.pl-30 {
  padding-left: 30px !important;
}

.pl-50 {
  padding-left: 50px !important;
}

.pr-20 {
  padding-right: 20px !important;
}

.pr-30 {
  padding-right: 30px !important;
}

/***************************
    Page section margin
****************************/

.mt-5 {
  margin-top: 5px !important;
}

.mt-10 {
  margin-top: 10px !important;
}

.mt-15 {
  margin-top: 15px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mt-30 {
  margin-top: 30px !important;
}

.mt-40 {
  margin-top: 40px !important;
}

.mt-50 {
  margin-top: 50px !important;
}

.mt-115 {
  margin-top: 115px !important;
}

.mb-5 {
  margin-bottom: 5px !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mb-15 {
  margin-bottom: 15px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.mb-30 {
  margin-bottom: 30px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.mb-50 {
  margin-bottom: 50px !important;
}

.mb-75 {
  margin-bottom: 75px !important;
}

.mb-80 {
  margin-bottom: 80px !important;
}

.ml-0 {
  margin-left: 0px !important;
}

.ml-5 {
  margin-left: 5px !important;
}

.ml-10 {
  margin-left: 10px !important;
}

.ml-15 {
  margin-left: 15px !important;
}

.ml-30 {
  margin-left: 30px !important;
}

.mr-5 {
  margin-right: 5px !important;
}

.mr-10 {
  margin-right: 10px !important;
}

.mr-15 {
  margin-right: 15px !important;
}

@media only screen and (max-width: 768px) {
  .totall-product h2 {
    font-size: 28px;
  }
  .loop-grid.loop-list article .post-thumb {
    min-height: 220px;
    min-width: 300px;
  }
  .loop-grid.loop-list article h3.post-title {
    font-size: 22px;
    margin-bottom: 30px !important;
  }
  .loop-grid.loop-list article .post-exerpt {
    display: none;
  }
  .loop-grid.loop-list article .entry-content-2.pl-50 {
    padding-left: 30px !important;
  }
  .loop-big h2.post-title {
    font-size: 32px;
  }
  .header-action-2 .header-action-icon-2:last-child {
    padding: 0;
  }
  .logo.logo-width-1 {
    margin-right: 0;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .logo.logo-width-1 a img {
    width: 150px;
    min-width: 150px;
  }
  .header-action .header-action-icon.header-action-mrg-none {
    margin-right: 15px;
  }
  .header-action .header-action-icon.header-action-mrg-none2 {
    margin-right: 15px;
  }
  .header-action-2 .header-action-icon-2 {
    padding: 0 6px;
  }
  .header-action-2 .header-action-icon-2:last-child {
    padding: 0 0 0 6px;
  }
  .header-action-2 .header-action-icon-2 > a {
    color: #fff;
    fill: #fff;
    font-size: 22px;
    margin-right: 10px;
  }
  .cart-dropdown-wrap ul li .shopping-cart-img {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 60px;
    flex: 0 0 60px;
    margin-right: 10px;
  }
  .mobile-header-wrapper-style {
    width: 380px;
  }
  .mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-top {
    padding: 15px 30px 13px 30px;
    border-bottom: 1px solid #ececec;
  }
  .mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-top .mobile-header-logo a img {
    width: 140px;
  }
  .mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area {
    padding: 30px;
  }
  .home-slider.pt-50 {
    padding-top: 0 !important;
  }
  .hero-slider-content-2 .btn-default {
    color: #fff;
    background-color: var(--zd-color-primary);
    border-radius: 50px;
    padding: 10px 22px;
    font-size: 14px;
  }
  .banner-big .btn {
    background-color: var(--zd-color-primary);
    color: #fff;
    border-radius: 3px;
    font-size: 13px;
    padding: 10px 22px;
    border: 0;
  }
  .home-slider .hero-slider-1 {
    height: 350px;
  }
  .home-slider .hero-slider-1.style-2 {
    height: 400px;
  }
  .home-slider .hero-slider-1.style-2 .hero-slider-content-2 {
    padding-left: 0;
    padding-top: 100px;
  }
  .home-slider .hero-slider-1.style-2 .single-slider-img img {
    max-width: 400px;
  }
  .home-slider .hero-slider-1.style-2 .slider-1-height-2 {
    height: 400px;
    position: relative;
  }
  .banner-img {
    float: left;
  }
  .banner-img.f-none {
    float: none;
  }
  .hero-slider-1.style-3 .slider-1-height-3 {
    height: 390px;
  }
  .hero-slider-1.style-3 .hero-slider-content-2 {
    padding-left: 20px;
  }
  .home-slide-cover .hero-slider-1.style-4 .hero-slider-content-2 {
    padding-left: 0;
  }
  .home-slide-cover .hero-slider-1.style-4 .hero-slider-content-2 h1 {
    font-size: 30px;
  }
  .home-slide-cover .hero-slider-1.style-4 .hero-slider-content-2 h2 {
    font-size: 14px;
  }
  .home-slide-cover .hero-slider-1.style-4 .hero-slider-content-2 h4 {
    font-size: 12px;
  }
  .header-style-3 .sticky-bar.stick.sticky-blue-bg {
    background-color: var(--zd-color-primary);
  }
  .header-style-4 .sticky-bar.stick.sticky-blue-bg {
    background-color: var(--zd-color-primary);
  }
  .single-page.pl-30, .single-page.pr-30 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .product-list .product-cart-wrap {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
  .product-list .product-cart-wrap .product-img-action-wrap {
    max-width: 45%;
  }
  .product-list .product-cart-wrap h2 {
    font-size: 24px;
  }
  .product-list .product-cart-wrap p.mt-15 {
    display: none;
  }
  .product-list .product-cart-wrap .product-rate-cover {
    margin-bottom: 20px;
  }
  .detail-info {
    padding: 0 !important;
  }
  .detail-info h2 {
    font-size: 30px;
  }
.detail-qty {
    padding: 11px 20px 11px 10px;
    max-width: 60px;
  }
  .detail-info .product-extra-link2 .button.button-add-to-cart {
    padding: 0px 15px;
  }
  .detail-info .product-extra-link2 .button.button-add-to-cart i {
    display: none;
  }
  .shopping-summery table tbody tr img {
    max-width: 80px;
    margin-right: 15px;
  }
  .shopping-summery .form-check-label {
    display: none;
  }
  .shopping-summery h6 {
    font-size: 14px;
  }
  .shopping-summery td.pl-30 {
    padding-left: 0 !important;
  }
  .shopping-summery button.btn {
    width: 120px;
    margin-left: 15px;
  }
  .product-cart-wrap .product-img-action-wrap .product-action-1 {
    min-width: 111px;
  }
  .custom-modal .modal-dialog {
    max-width: 720px !important;
  }
}

/*Mobile landscape*/
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header-action .header-action-icon.header-action-mrg-none {
    margin-right: 20px;
  }
  .header-action .header-action-icon.header-action-mrg-none2 {
    margin-right: 20px;
  }
  .header-action-2 .header-action-icon-2 {
    padding: 0 10px;
  }
  .header-action-2 .header-action-icon-2:last-child {
    padding: 0 0 0 10px;
  }
  .header-action-2 .header-action-icon-2 > a {
    font-size: 22px;
  }
  .comment-form .name {
    padding-right: 0px;
    margin-bottom: 1rem;
  }
}

/*Tablet*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-action .header-action-icon.header-action-mrg-none {
    margin-right: 33px;
  }
  .header-action .header-action-icon.header-action-mrg-none2 {
    margin-right: 33px;
  }
  .header-action-2 .header-action-icon-2 > a {
    color: #fff;
    fill: #fff;
  }
  .comment-form .email {
    padding-left: 0px;
  }
  .loop-grid.pr-30 {
    padding-right: 0 !important;
  }
}

/*Desktop*/
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .totall-product h2 {
    font-size: 28px;
  }
  .loop-grid.loop-list article .post-thumb {
    min-height: 220px;
    min-width: 300px;
  }
  .loop-grid.loop-list article h3.post-title {
    font-size: 22px;
    margin-bottom: 30px !important;
  }
  .loop-grid.loop-list article .post-exerpt {
    display: none;
  }
  .loop-grid.loop-list article .entry-content-2.pl-50 {
    padding-left: 30px !important;
  }
  .logo.logo-hm3 a img {
    width: 120px;
  }
  .main-menu.main-menu-mrg-1 {
    margin: 0 0 0 15px;
  }
  .main-menu > nav > ul > li ul.sub-menu li ul.level-menu.level-menu-modify {
    width: 165px;
  }
  .main-menu > nav > ul > li ul.mega-menu li .menu-banner-wrap .menu-banner-content {
    left: 20px;
    top: 22px;
  }
  .main-menu > nav > ul > li ul.mega-menu li .menu-banner-wrap .menu-banner-content h3 {
    font-size: 20px;
    line-height: 1.3;
    margin: 5px 0 7px;
  }
  .main-menu > nav > ul > li ul.mega-menu li .menu-banner-wrap .menu-banner-content .menu-banner-price {
    margin: 0 0 10px;
  }
  .main-menu > nav > ul > li ul.mega-menu li .menu-banner-wrap .menu-banner-content .menu-banner-btn a {
    padding: 10px 16px 13px;
  }
  .main-menu > nav > ul > li ul.mega-menu li .menu-banner-wrap .menu-banner-discount {
    width: 70px;
    height: 70px;
    line-height: 70px;
  }
  .main-menu.main-menu-padding-1 > nav > ul > li {
    padding: 0 8px;
  }
  .main-menu.main-menu-padding-1.hm3-menu-padding > nav > ul > li {
    padding: 0 6px;
  }
  .header-action.header-action-hm3 .header-action-icon {
    margin-right: 15px;
  }
  .header-action.header-action-hm3 .header-action-icon.header-action-mrg-none2 {
    margin-right: 0;
  }
  .header-action.header-action-hm3 .header-action-icon:last-child {
    margin-right: 0;
  }
  .hero-slider-1 {
    height: 350px;
  }
  .hero-slider-1 .single-slider-img-1 {
    height: 350px;
  }
}

/*Wide screen*/

@media only screen and (min-width: 1200px) {
  .container {
    /* max-width: 1610px; */
    /* max-width: 1499px; */
    max-width: 1200px;
  }
  .col-lg-1-5 {
    width: 20%;
  }
  .col-lg-4-5 {
    width: 80%;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
  .main-menu.main-menu-padding-1 > nav > ul > li {
    padding: 0 14px;
  }
}

@media only screen and (max-width: 1400px) {
  .product-cart-wrap.style-2 .product-content-wrap {
    max-width: 94%;
  }
  .hero-slider-1 .single-hero-slider {
    height: 467px;
  }
  .display-2 {
    font-size: 51px;
  }
  .banner-img.style-2 {
    height: 483px;
  }
  .slider-nav-thumbnails button.slick-arrow.slick-prev {
    left: 10px;
  }
  .slider-nav-thumbnails button.slick-arrow.slick-next {
    right: 10px;
  }
  .zoomContainer {
    display: none;
  }
  .detail-info h2 {
    font-size: 30px;
  }
  .tab-style3 .nav-item {
    margin-bottom: 15px;
  }
}

@media only screen and (max-width: 1024px) {
  .product-cart-wrap .product-action-1 a.action-btn {
    width: 34px;
    height: 34px;
    line-height: 40px;
    font-size: 13px;
  }
  .banner-big .btn {
    border-radius: 3px;
    font-size: 12px;
    padding: 6px 12px;
    border: 0;
  }
  .banner-img .banner-text h4 {
    margin-top: 0px !important;
  }
  .et,
li.hot-deals,
.header-action-2 .header-action-icon-2 span.lable {
    display: none !important;
  }
  .main-menu.main-menu-padding-1 > nav > ul > li {
    padding: 0 10px;
  }
  .hero-slider-1 .single-hero-slider {
    height: 350px;
  }
  .hero-slider-1 .single-hero-slider .display-2 {
    font-size: 44px;
    margin-bottom: 25px !important;
  }
  .hero-slider-1 .single-hero-slider .slider-content p {
    font-size: 22px;
  }
  .banner-img .banner-text h4 {
    min-height: 50px;
    font-size: 18px;
  }
  .header-action-2 .header-action-icon-2:last-child {
    padding: 0 0 0 8px;
  }
  .nav-tabs.links .nav-link {
    padding: 0 7px;
    font-size: 14px;
  }
  .deals-countdown .countdown-section {
    padding: 20px 2px 30px 2px;
    margin-left: 2px;
    margin-right: 2px;
  }
  .section-title.style-1 {
    padding-bottom: 15px;
    font-size: 20px;
  }
  .product-list-small .product-rate-cover {
    display: none;
  }
  .section-title.style-2 {
    display: block;
  }
  .section-title.style-2 h3 {
    margin-bottom: 25px;
    font-size: 28px;
  }
  .modal-open .modal {
    padding-right: 0 !important;
  }
  .vendor-wrap.style-2 {
    display: block;
  }
  .banner-img.style-4 .banner-text h4 {
    font-size: 20px;
  }
}

/*small phone*/
@media only screen and (max-width: 480px) {
  .archive-header {
    padding: 30px;
  }
  .loop-big h2.post-title {
    font-size: 22px;
  }
  .entry-meta.meta-1 {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
  }
  .single-header-meta .single-share {
    display: none;
  }
  .single-content blockquote {
    padding: 20px 30px;
    border-radius: 8px;
    margin: 20px auto;
    font-size: 16px;
    max-width: 100%;
  }
  .single-content blockquote p {
    font-size: 16px;
    line-height: 22px;
  }
  .hero-slider-1 .single-hero-slider .display-2 {
    font-size: 32px;
  }
  .hero-slider-1 .single-hero-slider .slider-content p {
    font-size: 16px;
  }
  .hero-slider-1 .single-hero-slider .slider-content form {
    max-width: 310px;
  }
  .hero-slider-1 .single-hero-slider .slider-content form button.submit, .hero-slider-1 .single-hero-slider .slider-content form button[type="submit"] {
    padding: 12px 20px;
  }
  .post-list .post-thumb {
    max-width: unset;
    margin-right: 0 !important;
  }
  .entry-meta.meta-2 a.btn {
    display: inline-block;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
  }
  .entry-meta.meta-2 .font-xs {
    max-width: 150px;
    line-height: 1.3;
  }
  .single-header .single-header-meta, .entry-bottom {
    display: block;
  }
  .carausel-4-columns {
    max-width: 375px;
    overflow: hidden;
  }
  .hero-slider-1 {
    height: unset;
  }
  .banner-img {
    margin-bottom: 15px;
  }
  .header-action-2 .header-action-icon-2:last-child {
    padding: 0;
  }
  .popular-categories .slider-btn.slider-prev {
    right: 50px !important;
    left: unset !important;
  }
  .mb-sm-5 {
    margin-bottom: 2rem;
  }
  .heading-tab h3.section-title {
    margin-bottom: 15px !important;
  }
  .nav.right {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
  }
  .hero-slider-1.style-2 .single-slider-img {
    display: none;
  }
  .pt-40 {
    padding-top: 30px !important;
  }
  .hero-slider-1.style-3 .slider-1-height-3 {
    height: 220px;
  }
  .hero-slider-1.style-3 .hero-slider-content-2 {
    position: relative;
    text-align: left;
    padding-left: 15px;
    padding-top: 0;
  }
  .hero-slider-1.style-3 .hero-slider-content-2 h1 {
    font-size: 18px;
  }
  .hero-slider-1.style-3 .hero-slider-content-2 h2 {
    font-size: 16px;
  }
  .hero-slider-1.style-3 .hero-slider-content-2 h4 {
    font-size: 14px;
  }
  .hero-slider-1.style-3 .hero-slider-content-2 p {
    font-size: 11px;
  }
  .hero-slider-1.style-3 .hero-slider-content-2 a.btn {
    display: none;
  }
  .header-style-5 .header-action-2 .header-action-icon-2 > a {
    font-size: 18px;
  }
  .header-style-5 .sticky-bar.stick.sticky-white-bg {
    background-color: #fff;
    padding: 15px 0;
  }
  .w-50 {
    width: 100% !important;
  }
  .product-list .product-cart-wrap {
    display: block;
  }
  .product-list .product-cart-wrap .product-img-action-wrap {
    max-width: 100%;
  }
  .shop-product-fillter {
    display: block;
  }
  .shop-product-fillter .totall-product {
    margin-bottom: 15px;
  }
  .table td {
    display: block;
    width: 100%;
    text-align: center;
  }
  .table td::before {
    content: attr(data-title) " ";
    float: left;
    text-transform: capitalize;
    margin-right: 15px;
    font-weight: bold;
  }
  .table thead {
    display: none;
  }
  .loop-grid.pr-30 {
    padding-right: 0 !important;
  }
  .loop-grid.loop-list article {
    display: block;
  }
  .d-sm-none {
    display: none;
  }
  .product-cart-wrap:not(:last-child) {
    margin-bottom: 30px !important;
  }
  .slick-track .product-cart-wrap {
    margin-bottom: 0 !important;
  }
  .first-post .meta-1 .font-sm {
    display: none;
  }
  .first-post .btn.btn-sm {
    display: none;
  }
  .loop-grid .entry-content {
    padding: 20px 20px 0 20px;
  }
  .comments-area .thumb {
    min-width: 100px;
  }
  .hero-slider-1 .single-slider-img-1 {
    height: 300px;
  }
  .featured .col-lg-2 {
    width: 50%;
  }
  .nav-tabs .nav-link {
    font-size: 13px;
    padding: 10px 12px;
  }
  .deals-countdown .countdown-section {
    padding: 20px 2px 30px 2px;
    margin-left: 2px;
    margin-right: 2px;
  }
  .home-slider .hero-slider-1.style-2 .hero-slider-content-2 {
    padding-left: 0;
    padding-top: 50px;
  }
  .home-slider .hero-slider-1.style-2 .hero-slider-content-2 h3 {
    line-height: 1.4;
  }
  .hero-slider-1.style-3.dot-style-1.dot-style-1-position-1 ul {
    bottom: 0;
  }
  .single-content .banner-text, .banner-img.banner-big .banner-text {
    display: none;
  }
  .comments-area {
    padding: 25px 0;
    margin-top: 0;
  }
  .entry-bottom {
    margin-bottom: 0 !important;
  }
  section.pt-150.pb-150 {
    padding: 50px 0 !important;
  }
  .product-detail .single-share {
    margin-bottom: 20px;
  }
  .product-detail .tab-style3 .nav-tabs li.nav-item a {
    padding: 0.5rem;
    text-transform: none;
  }
  .related-products .product-cart-wrap {
    margin-bottom: 30px;
  }
  .section-title {
    display: block;
    margin-bottom: 15px;
  }
  .section-title .title {
    display: block;
  }
  .section-title h3 {
    margin-bottom: 20px;
    font-size: 28px;
  }
  .section-title .show-all {
    display: none;
  }
  .nav-tabs.links .nav-link {
    margin-bottom: 10px;
  }
  .slider-arrow.slider-arrow-2.flex-right {
    display: none;
  }
  .product-grid-4 .product-cart-wrap {
    margin-bottom: 30px;
  }
  .product-list-small figure.col-md-4 {
    max-width: 30%;
    float: left;
    margin: 0 !important;
  }
  .product-list-small .col-md-8 {
    float: left;
    max-width: 70%;
  }
  .hero-slider-1 .single-hero-slider.rectangle .slider-content {
    width: 100%;
  }
  .product-info {
    border: 0;
    padding: 0;
  }
  .product-info .tab-style3 .nav-tabs li.nav-item a {
    padding: 11px 12px !important;
    font-size: 13px;
  }
  .shopping-summery table tbody tr img {
    max-width: 180px;
    margin-right: 0;
  }
  .toggle_info .font-lg,
.apply-coupon .font-lg {
    font-size: 14px !important;
  }
  .cart-totals.ml-30 {
    margin-left: 0 !important;
    text-align: center;
  }
  .order_table table .w-160 {
    margin: 0 auto;
  }
  .modal-open .modal {
    padding-right: 0 !important;
  }
}

/*phone landscape*/
@media only screen and (min-width: 480px) and (max-width: 667px) {
  .col-lg-4 .banner-img {
    margin-bottom: 30px;
  }
  .modal-open .modal {
    padding-right: 0 !important;
  }
}

/*small phone*/
@media only screen and (max-width: 375px) {
  .entry-meta .hit-count, .entry-meta.meta-2 .font-xs {
    display: none;
  }
  .custom-modal .modal-dialog .modal-content {
    padding: 0;
  }
  .modal-open .modal {
    padding-right: 0 !important;
  }
}
/*# sourceMappingURL=main.css.map */



/* OVERIDING */

.header-info.header-info-right .text-brand {
    line-height: 19px;
}
.header-info.header-info-right .text-brand i{
    top: 2px;
    position: relative;
    font-size:15px;
}

/* Menu déroulant se trouvant sur la home à côté du slider */

.menu-slider-row nav .category-menu-title{
    padding: 15px 17px 5px 17px;
    font-weight: bold;
    font-size: 17px;
    color:black;
    height:44px;
}
.menu-slider-row nav .category-menu-title .fi-rs-list{
    margin-right:7px;
    position: relative;
    top: 2px;
}
.menu-slider-row > .slider-container .hero-slider-1{
    height: initial;
}
.menu-slider-row > .slider-container .hero-slider-1,
.menu-slider-row > .slider-container .hero-slider-1 .slick-list,
.menu-slider-row > .slider-container .hero-slider-1 .slick-list .slick-track,
.menu-slider-row > .slider-container .hero-slider-1 .slick-list .slick-track .single-hero-slider{
    height:100%;
}
.menu {
    min-width: 100%;
    /* min-width: 200px; */
    font-family: Verdana, Geneva, sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    position: relative;
    padding: 0 0 0 10px;
    margin: 0;
    height: 100%;
}
.menu a, .menu a:link, .menu a:visited, .menu a:focus {
    /* color: #fff; */
    color: black;
    text-decoration: none;
}

.menu > li:hover a{
    color:white;
    transition:initial;
}
.menu > li {
    display: block;
    text-align: center;
    margin-left: -4px;
}
.menu > li > a {
    padding:15px 17px;
    display: block;
}
/* Megadrop width dropdown */
 .menu > li > .megadrop {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    list-style: none;
    top: -45px;
    bottom: 43px;
    left: 100%;
    width: 800px;
    min-height: 100%;
    text-align: left;
    margin-top:30px;
    padding: 0;
    z-index: 99;
    border-left:1px solid var(--zd-color-primary);
    background-color:#fff;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding-bottom: 20px;
    /* border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    overflow: hidden;
    border-top: 2px solid var(--zd-color-primary);
    border-right: 2px solid var(--zd-color-primary);
    border-bottom: 2px solid var(--zd-color-primary); */
}
.menu > li:hover .megadrop {
    opacity: 1;
    visibility: visible;
    margin-top: 0px;
    background: rgba(255,255,255,0.9);
}
.menu ul li:hover:after {
    color: var(--zd-color-primary);
}
.menu .submenu-col {
    color:white;
    margin: 0 0 0 2.2%;
}
.menu .submenu-col ul {
    padding: 0;
    margin: 0;
}
.menu .submenu-col ul li {
    padding: 0;
    list-style: none;
    font-size: 11px;
}
.menu .submenu-col h3 {
    font-size: 16px;
    padding: 23px 0 7px 0;
    font-weight: bold;
    color: var(--zd-color-primary);
    /* background: #eee; */
}
.menu .submenu-col ul li a {
    display: block;
    padding: 0 0 15px 0;
    color: var(--zd-color-primary);
}
.menu .submenu-col ul li a:hover {
    color: #111;
    text-decoration: underline;
}
.menu > li > ul li ul, .menu li >ul li, .menu > li > .megadrop, .menu > li > ul, .menu > li {
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-outs;
}


ul.menu.lvl-1 a{
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}
ul.menu.lvl-1 a span{
    text-align:left;
}

.menu .megadrop h3 > a {
    color: black;
    /* padding: 1px 7px; */
    text-decoration: none;
    border-radius: 8px;
    display:block;
}
.menu .megadrop h3 > a:hover {
    color:var(--zd-color-primary);
}

.menu .megadrop .sub-menu li a{
    color: #494949;
    padding: 1px 5px;
    border-radius: 8px;
    display:block;
}
.menu .megadrop .sub-menu li a:hover {
    color:var(--zd-color-primary);
    text-decoration: none;
}











/* Menu déroulant se trouvant à gauche de la barre de recherche */
.menu-row{
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
}
.menu-row nav .category-menu-title i{
    font-size:18px;
    margin-left: 5px;
}
.menu-row nav .category-menu-title{
    padding: 5px 15px;
    font-size: 19px;
    color:#212121;
    font-weight:bold;
    display: inline-block;
    cursor:pointer;
    /* width:200px; */
}
.menu-row .menu.is-open{
    display:block;
}
.menu-row nav .category-menu-title .fi-rs-list{
    margin-right:7px;
    vertical-align:middle;
}
/* .menu-row nav{
    width:15%;
} */
.menu-row .menu {
    display: none;
    position:absolute;
    z-index: 99;
    background: #fff;
    height: 449px;
    width:199px;
    min-width:initial;
}
.menu-row .menu > li {
    width:199px;
    background:#fff;
}

.menu-row .menu > li > .megadrop {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    list-style: none;
    top: 0;
    left: 199px;
    width: 800px;
    min-height: 100%;
    text-align: left;
    padding: 0;
    z-index: 9999;
    border-left: 1px solid var(--zd-color-primary);
    background-color: #fff;
    height: 449px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding-bottom: 20px;
}
.menu-row .menu > li:hover .megadrop {
    opacity: 1;
    visibility: visible;
    margin-top: 0px;
}

.menu > li:hover{
    color: #fff;
    text-decoration: none;
    background-color: var(--zd-color-primary);
}
.product-combination-group .btn-check:checked+.btn-success {
    background-color: var(--zd-color-primary) !important;
    border: 1px solid var(--zd-color-primary);
    color:#fff;
}


/* Featured categories en home */
.card-zd figure.img-hover-scale{
    border:1px solid #e9e9e9;
    /* border:1px solid #cecece; */
    /* border-radius: 10px; */
}
.card-zd figure img {
    width: 100%;
}
.card-zd {
    position: relative;
    text-align: center;
    padding: 0;
    margin-bottom: 20px;
    min-height: 180px;
    overflow: hidden;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    margin-right: 12px;
    margin-left: 12px;
}
.card-zd h6 {
    margin-top:10px;
    text-align: left;
    font-size: 14px;
}
.card-zd h6 > a{
    color:var(--zd-color-primary);
}
.card-zd:hover h6 > a{
    color:#253D4E;
}

/* Featured vendors en home */
.vendor-img a,
.vendor-img a img {
    width:100%;
    display:block;
}
.vendor-img a{
    height:259px;
    overflow:hidden;
    position:relative;
}
.vendor-img a img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}


/* Signin step form */
.card-login img{
  vertical-align: middle;
}

/*form styles*/
#msform {
    text-align: center;
    position: relative;
}

#msform .card {
  text-align: left;
}

#msform form {
    /*stacking fieldsets above each other*/
    position: relative;
}

/*Hide all except first fieldset*/
#msform form:not(:first-of-type) {
    display: none;
}

/*inputs*/
#msform input:not([type='checkbox']):not([type='radio']), #msform textarea, #msform select {
    padding: 15px;
    border: 1px solid #ccc;
    margin-top: 12px;
    box-sizing: border-box;
    color: #2C3E50;
    font-size: 13px;
}

#msform input:focus, #msform textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid var(--zd-color-primary);
    outline-width: 0;
    transition: All 0.5s ease-in;
    -webkit-transition: All 0.5s ease-in;
    -moz-transition: All 0.5s ease-in;
    -o-transition: All 0.5s ease-in;
}

/*buttons*/

#msform .action-button.submit {
    width: 140px;
}

/*headings*/
.fs-title {
    font-size: 18px;
    text-transform: uppercase;
    color: #2C3E50;
    margin-bottom: 10px;
    letter-spacing: 2px;
    font-weight: bold;
}

.fs-subtitle {
    font-weight: normal;
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
}

/*progressbar*/
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    /*CSS counters to number the steps*/
    counter-reset: step;
}

#progressbar li {
    list-style-type: none;
    color: #253D4E;
    text-transform: uppercase;
    font-size: 9px;
    width: 33.33%;
    float: left;
    position: relative;
    letter-spacing: 1px;
}

#progressbar li:before {
    width: 55px;
    height: 55px;
    line-height: 55px;
    text-align:center;
    display: block;
    font-size: 21px;
    color: white;
    background: #ebebeb;
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
    z-index: 2;

    font-family: uicons-regular-straight !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}
#progressbar li:first-child:before {
    content: "\f257";
}
#progressbar li:nth-child(2):before {
    content: "\f135";
}
#progressbar li:last-child:before {
    content: "\f144";
}
/* #progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: block;
    font-size: 21px;
    color: white;
    background: #ebebeb;
    border-radius: 25px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
} */

/*progressbar connectors*/
#progressbar li:after {
    content: '';
    width: 100%;
    height: 5px;
    background: #ebebeb;
    position: absolute;
    left: -50%;
    top: 17px;
    z-index: 1; /*put it behind the numbers*/
}

#progressbar li:first-child:after {
    /*connector not needed before the first step*/
    content: none;
}

/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after {
    background: var(--zd-color-primary);
    color: white;
}





#msform input[type=button],
#msform input[type=submit]{
    padding: 10px;
    height: initial;
    color: white;
}
.company-section-group{
    background-color:#fbffd7;
    padding: 7px;
}
.operation-section-group{
    background-color:#cdf9ff;
    padding: 7px;
}


.btn.btn-success, .button.btn-success{
    background-color:var(--zd-color-primary);
}
.validation-text{
  border: 1px dashed #cecece;
  margin: 10px auto 19px auto;
  font-size: 12px;
  border-radius: 8px;
  padding: 10px;
}
.validation-text p{
  font-size: 12px;
  text-align:left;
  position:relative;
}
.validation-text ul{
  text-align:left;
  list-style: disc;
  margin-left: 29px;
}
.validation-text i.fi-rs-info{
  font-size: 24px;
  color: var(--zd-color-primary);
  vertical-align: middle;
  margin-right: 5px;
  position:absolute;
  right: -25px;
  top: -18px;
  background: #fff;
}

.validation-text i.fi-rs-eye{
  vertical-align:middle;
}
.dz-message .fi-rs-upload{
  font-size: 24px;
  color: var(--zd-color-primary);
}
.dz-message span{display:block;}
.dz-message .upload-txt1{
  font-size: 17px;
  font-weight:bold;
}
.dz-message .upload-txt2{
  font-size: 12px;
  color: #cecece;
}


#msform .dropzone{
  width:230px;
}
#msform .dropzone .dz-message{
  margin: 2px 0;
}


.lang-switcher-group .lang-switcher{
    height: 29px;
    line-height: 29px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
}
.lang-switcher-group img{
    vertical-align: middle;
    width: 29px;
    height: 29px;
}
.lang-switcher-group .dropdown-item{
    color:#7E7E7E;
    font-size: 14px;
}

/* Above : Default style from template */

/****************************
**** MGX OVERRIDING PART ****
****************************/

/* Home */
section.call-to-action .container{
  background-color:#f2f2f2;
  margin-top:49px;
  margin-bottom:150px;
}
section.call-to-action .call-to-action-green-section{
  background: var(--zd-color-primary);
  color: #fff;
  position:relative;
  max-width:69%;
  display: flex;
    flex-wrap: nowrap;
    align-items: center;
    flex-direction: row;
}
section.call-to-action h3,
section.call-to-action p{
  color:white;
  margin-bottom:29px;
}
section.call-to-action .text-col{
  padding:30px 30px 40px 30px;
  max-width:499px;
}
section.call-to-action img{
  max-width: 700px;
  position: absolute;
  right: -370px;
  top: 50px;
}

hr { margin:12px 0;}


@media only screen and (max-width: 1199px) {
  section.call-to-action .call-to-action-green-section{
    display:block;
    max-width:100%;
  }
  section.call-to-action .text-col{
    max-width: 100%;
  }
  section.call-to-action img{
    position:relative;
    top:initial;
    right:initial;
    width: 100%;
  }
}

/* Cart Page */
table #couponCalField tr{
    border:0;
}
table #couponCalField tr.total-row{
    border-top: 1px solid #e9ecef;
}
table #couponCalField td.cart-product-informations{
    line-height: 17px;
}
table #cartPage .product-customization{
    font-size: 12px;
    color: #7E7E7E;
}
table #cartPage .price{
    font-size: 17px;
}

.cart-totals table tr{
    border:0;
}


.product-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--zd-orange-h);
    color: white;
    padding: 3px 10px 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.btn-group {
    align-items: center;
}
.zd-white-text{
  color:#fff;
}

/* MGX others components styles */
.zd-title{
  color:#253D4E;
  margin-bottom:9px;
}


.zd-label{
  font-weight: bold;
  font-size: 15px;
}
.zd-bg-primary {
    background-color: var(--zd-color-primary) !important;
    color:#fff;
}
.zd-bg-salmon {
    background-color: #FBECE8 !important;
    color:#222;
}
.zd-bg-primary p{
    color:#fff;
}
p{
    margin-bottom:12px;
}

.zd-tag.active{
    background: #FBECE8;
    color: var(--zd-color-primary);
}

.zd-color-primary {
  color: var(--zd-color-primary) !important;
}

.zd-bold{
  font-weight:700;
}
.zd-cta{
    display: flex;
    justify-content: space-between;
}

.zd-cta i{
    vertical-align: middle;
}



/* On masque le header mobile au delà de 992px */


/* Product Page */
.product-brand{
    font-size: 14px;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
}
.product-name{
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 19.2px */
    color:#253D4E;
}

/* Category Page */
.section-subcategories .card-zd img{
  vertical-align: middle;
}
.shop-product-fillter{
  background-color: var(--zd-color-primary);
  padding: 7px 19px;

}
.shop-product-fillter p,
.shop-product-fillter .text-brand{
    color:#fff;
}

.js-attribute-options .missing-msg{
  display:none;
}
.js-attribute-options.highlightmissing .attributegroup-label{
  color: crimson;
  background: #ffdcdc;
  padding: 5px 10px;
}
.js-attribute-options.highlightmissing .missing-msg{
    display:inline-block;
    font-weight:initial;
    padding-left: 10px;
    vertical-align: middle;
}
.js-attribute-options.highlightmissing .missing-msg i{
    margin-right:5px;
    position: relative;
    top: 1px;
}

/* Vendor page */
.sidebar-widget.widget-store-info{
    text-align:center;
}
.sidebar-widget.widget-store-info .sidebar-vendor-description{
    color:#d9d9d9;
    font-style:italic;
}
.sidebar-widget.widget-store-info .text-heading{
    color:#fff;
    text-transform:uppercase
}
.sidebar-widget.widget-store-info .vendor-logo {
    border-radius: 100%;
    overflow: hidden;
    width: 100%;
    width: 159px;
    height: 159px;
    margin: auto;
    position: relative;
}
.sidebar-widget.widget-store-info .vendor-logo img {
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}



/* Contact page */
.contact-information p.subtitle{
    color:#fff;
    margin:10px 0;
    font-size:21px;
}
/* Customer account - Dashboard */
.dashboard-content .card-header h3{
    font-size:17px;
}
.customer-stat-cards.h-100 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Customer account - Order history */
.order-table .rounded-pill{
  border-radius: initial !important;
}

.confirmation-text i.fi-rs-file-check{
    font-size:101px;
    color: var(--zd-color-primary);
}
.clearfix{clear:both;}

/* Bootstrap override */
.bg-success {
    background-color: var(--zd-color-primary) !important;
}
.btn:hover, .button:hover {
    border-color: #cecece;
}


.verified-store-label{
  color: var(--zd-color-primary);
  font-weight:bold;
  vertical-align:middle;
} 















/* ==========================================================================
   RESPONSIVE PRODUCT PAGE - LIGHT VERSION
   ========================================================================== */

/* Tablet (≤ 992px) */
@media (max-width: 992px) {
    /* Layout */
    .product-detail .row {
        display: block;
    }
    
    /* .col-md-8,
    .col-md-4 {
        width: 100% !important;
        max-width: 100% !important;
    } */
    
    /* Sticky panel becomes static */
    .detail-info {
        position: static;
        max-height: none;
        margin-top: 30px;
    }
    
    /* Gallery layout */
    .detail-gallery {
        flex-direction: column;
    }
    
    .slider-nav-thumbnails {
        width: 100%;
        order: 2;
        margin-top: 15px;
    }
    
    .product-image-slider {
        order: 1;
    }
    
    /* Navigation anchors */
    .nav-anchor-list {
        gap: 15px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    
    .nav-anchor-link {
        font-size: 14px;
        padding: 5px 0;
    }
  
    .product-section {
        scroll-margin-top: 80px;
    }
    
    /* Text sizes */
    .product-name {
        font-size: 1.4rem;
    }
    
    .product-price-box .current-price {
        font-size: 1.6rem;
    }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
    /* General spacing */
    .product-group-card {
        padding: 20px !important;
        --zd-card-pad: 20px;
    }

    /* Gallery on mobile */
    .slider-nav-thumbnails {
        display: flex;
        overflow-x: auto;
        padding: 10px 0;
    }
    
    .slider-nav-thumbnails .slick-slide {
        margin-right: 10px;
        margin-bottom: 0;
        width: 70px;
    }
    
    /* Attribute options */
    .attribute-options {
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .zd-label-tag.attribute-option-label {
        font-size: 0.85rem;
        padding: 4px 8px;
        margin-bottom: 4px;
    }
    
    /* Rating display */
    .average-rating-display {
        flex-direction: column;
        align-items: flex-start !important;
    }
    
    .average-rating-display > div {
        width: 100% !important;
        margin-bottom: 20px;
    }
    
    /* Vendor info */
    #section-vendor .vendor-logo {
        flex-direction: column;
        text-align: center;
    }
    
    #section-vendor .vendor-logo img {
        margin: 0 auto 15px;
    }
    
    .vendor-link.ml-15 {
        margin-left: 0 !important;
        text-align: center;
    }
    
    /* Product actions */
    .product-extra-link2 {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    #addToCartBtn {
        width: 100%;
        margin-bottom: 10px;
    }
    
    /* Breadcrumb */
    .breadcrumb {
        font-size: 14px;
        flex-wrap: wrap;
    }
    
    /* Section titles */
    .section-title {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }

    .verified-store-label.ms-auto{
        margin-left:initial !important;
        margin-top:15px;
    }
}

/* Small Mobile (≤ 576px) */
@media (max-width: 576px) {

    .product-section {
        scroll-margin-top: 200px !important;
        padding: 30px 0;
    }

    /* Typography */
    .product-name {
        font-size: 1.3rem;
        line-height: 1.2;
    }
    
    .product-price-box .current-price {
        font-size: 1.4rem;
    }
    
    /* Navigation anchors become vertical */
    .nav-anchor-list {
        flex-direction: column;
        gap: 5px;
    }
    
    .nav-anchor-link {
        display: block;
        padding: 8px 15px;
        border-bottom: none;
    }
    
    .nav-anchor-link.active {
        background-color: #FBECE8;
    }
    
    /* Review items */
    .review-item .card-body {
        padding: 15px;
    }
    
    .reviewer-info {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 10px;
    }
    
    .reviewer-info img {
        margin-bottom: 10px;
    }
    
    /* Quantity selector */
    .detail-qty {
        max-width: 210px;
        margin: 10px 0;
    }
    
    /* Customization field */
    .customization-field textarea {
        height: 80px;
    }
}

/* Very Small Mobile (≤ 375px) */
@media (max-width: 375px) {
    /* Compact everything */
    .product-group-card {
        padding: 15px !important;
        --zd-card-pad: 15px;
    }

    .product-name {
        font-size: 1.2rem;
    }
    
    .zd-btn {
        padding: 8px 15px;
        font-size: 15px;
    }
    
    /* Attribute labels */
    .zd-label-tag.attribute-option-label {
        font-size: 0.8rem;
        padding: 3px 6px;
    }
    
    /* Rating value */
    .average-rating-display .rating-value {
        font-size: 2.2rem;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .zd-btn,
    .zd-label-tag.attribute-option-label,
    .nav-anchor-link {
        min-height: 44px;
    }
    
    .qty-up,
    .qty-down {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Fix horizontal overflow */
html {
    overflow-x: hidden;
}
body {
    overflow-x: hidden;
    width: 100%;
}

/* Ensure images are responsive */
.detail-gallery img,
.spec-images img {
    max-width: 100%;
    height: auto;
}

/* .zd-card,
.login_wrap{
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
} */

.zd-card,
.login_wrap {    
    background: #fff;
    border-radius: 8px;
    padding: 20px 30px;
    margin: 0 auto;
}



.product-content-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Tronquer le titre */
h2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4em;
    max-height: 2.8em; /* 2 lignes × 1.4em */
    margin-bottom: 8px;
}

/* Limiter la description/catégorie */
.product-category {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}












/* .zd-supplier-card formalise en composant design system, voir
   section ZD SUPPLIER CARD plus bas (--md/--lg). */


#searchProducts,
#mobileSearchProducts,
#zdHeroSearchProducts {
    max-height: 550px;
    overflow-y: auto;
    box-shadow: 0 5px 15px rgba(0,0,0,.1);
}

.autocomplete-section {
    border-bottom: 1px solid #eee;
}

.autocomplete-section-title {
    padding: 8px 12px;
    font-weight: 700;
    color: #333;
    background: #F5F5F5;
    font-size: 13px;
    text-transform: uppercase;
}








/* ============================================================
   ZD FOOTER — design system "Footer" (maquette Figma
   __maquettes/DesignSystem/Footer/Footer.svg, 2026-09-02). Anciennement
   .zh-footer, renomme en .zd-footer pour la coherence avec le reste
   du design system (composant unique, deja live sur tout le site via
   body/footer.blade.php -- pas de page demo separee, le footer live
   en tient lieu).
   ATTENTION : le calque de tokens de ce fichier Figma est intitule
   "Topbar Tokens" (pas "Footer Tokens") -- probablement un reliquat
   copie-colle sans rapport avec ce composant. Les valeurs 120/48/24
   n'ont donc pas ete prises pour argent comptant : mesure directe des
   coordonnees du SVG vectoriel (Footer.svg, chemins + ligne de
   separation) pour caler l'espacement reel :
   - V-padding haut/bas du bloc : ~64-68px mesures -> 64px retenu.
   - Bas du bloc colonnes -> ligne de separation : ~48-50px mesures
     (coincide avec le "48" de la carte, malgre le mislabel).
   - Rythme vertical titre -> 1er lien ET lien -> lien suivant :
     rigoureusement identique dans les 2 cas (~32px de haut de ligne a
     haut de ligne mesures a chaque fois) -> PAS de 48/24 distincts,
     un seul et meme margin-bottom (12px, coherent avec line-height
     14/140% ~19.6px + marge).
   - Icones sociales : ~16-17px mesures (pas 20px).
   - H-padding 120 confirme (largeur exacte de la ligne de separation
     = 1440 - 2x120) mais non applique tel quel : le site garde
     .container comme partout ailleurs plutot qu'un padding fixe en
     px, pour rester coherent avec le reste des sections -- l'inset
     reel sera donc plus etroit que 120px sur les tres grands ecrans.
   ============================================================ */
.zd-footer {
    background: #fff;
    border-top: 1px solid #d9d9d9;
    padding: 64px 0;
    color: #242424;
}

/* 5 pistes egales de 240px (maquette Footer.svg : titres de colonne a
   x=120/360/600/840, soit un pas fixe de 240px, et .container fait
   justement max-width:1200px = la largeur de contenu de la maquette
   (canevas 1440 - 2x120 de marge). Pas de gap : l'espace visuel entre
   colonnes est juste le blanc apres le texte le plus long de chacune. */
.zd-footer__top {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 0;
    row-gap: 32px;
    padding-bottom: 48px;
}
.zd-footer__socials {
    justify-self: end;
}

.zd-footer__col-title {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: #242424;
    margin-bottom: 12px;
}

.zd-footer__col-list,
.zd-footer__legal-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.zd-footer__col-list li {
    margin-bottom: 12px;
}

.zd-footer__col-list li:last-child {
    margin-bottom: 0;
}

.zd-footer__link,
.zd-footer__copyright {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #4b4b4b;
    text-decoration: none;
}

.zd-footer__link:hover,
.zd-footer__social:hover {
    color: #222;
}

.zd-footer__socials {
    display: flex;
    gap: 26px;
    align-items: flex-start;
    padding-top: 2px;
}

.zd-footer__social {
    display: flex;
    align-items: center;
    justify-content: center;
}

.zd-footer__social img {
    width: 16px;
    height: 16px;
    display: block;
    transition: opacity .2s ease;
}

.zd-footer__social:hover img {
    opacity: .7;
}

.zd-footer__bottom {
    border-top: 1px solid #d3d3d3;
    padding-top: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.zd-footer__legal-list {
    display: flex;
    gap: 28px;
}

@media (max-width: 991px) {
    .zd-footer__top {
        grid-template-columns: repeat(2, max-content);
        gap: 32px;
    }

    .zd-footer__socials {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 575px) {
    .zd-footer {
        padding: 36px 0 28px;
    }

    .zd-footer__top {
        grid-template-columns: 1fr;
    }

    .zd-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ============================================================
   Equal-height product cards — CTA aligned to bottom
   ============================================================ */
.row > [class*="col-"]:has(.product-cart-wrap) {
    display: flex;
    flex-direction: column;
}

.product-cart-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-cart-wrap .product-content-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   Migration <style> locaux -> main.css (centralisation etape 3)
   ============================================================ */

/* ---- Pages legales : legal-notice, marketplace-rules, privacy, sellerpolicy, terms ---- */
.legal-page {
    background: #fff;
    color: #222;
    padding: 60px 0 90px;
}
.legal-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px;
}
.legal-page h1 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    color: #222;
}
.legal-updated {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 40px;
}
.legal-page h2 {
    font-size: 20px;
    font-weight: 800;
    margin: 36px 0 12px;
    color: #222;
}
.legal-page p,
.legal-page li {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
}
.legal-page ul {
    padding-left: 20px;
    margin-bottom: 16px;
}
.legal-page a {
    color: var(--zd-color-primary);
    text-decoration: underline;
}
.legal-highlight {
    background: #fdecea;
    border-left: 3px solid var(--zd-color-primary);
    border-radius: 8px;
    padding: 14px 18px;
    margin: 24px 0;
    font-size: 14px;
    color: #444;
}

/* ---- page/coming-soon.blade.php ---- */
.cs-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
}
.cs-card {
    max-width: 700px;
    text-align: center;
    padding: 60px;
}
.cs-icon {
    width: 120px;
    margin-bottom: 30px;
}
.cs-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #222;
}
.cs-text {
    font-size: 18px;
    line-height: 1.7;
    color: #666;
    margin-bottom: 35px;
}

/* ---- product/partials/product-grid.blade.php + product/shop_list_page.blade.php ---- */
.product-img-zoom a {
    display: block;
    aspect-ratio: 1/1;
    overflow: hidden;
}
.product-img-zoom a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ---- product/partials/review-form.blade.php ---- */
.stars-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 5px;
}
.stars-input input {
    display: none;
}
.stars-input label {
    font-size: 2rem;
    color: #dee2e6;
    cursor: pointer;
    transition: all 0.2s;
}
.stars-input label:hover,
.stars-input label:hover ~ label {
    color: var(--zd-color-primary) !important;
    transform: scale(1.1);
}
.stars-input input:checked ~ label {
    color: var(--zd-color-primary);
}
.stars-input input:checked + label ~ label {
    color: var(--zd-color-primary);
}
.fi-rs-star:before {
    content: "\2605";
    font-family: initial;
}
/* Scope a #section-reviews (product_details.blade.php) : .comment-form est aussi utilise par blog_details.blade.php avec un style different */
#section-reviews .comment-form {
    background: #fff;
    padding: 25px;
}
@media (max-width: 768px) {
    .stars-input {
        gap: 3px;
    }
    .stars-input label {
        font-size: 1.8rem;
    }
}

/* ---- product/search.blade.php ---- */
.search-header {
    background: #fff;
    margin-bottom: 40px;
}
.search-form-wrapper {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}
.results-count {
    color: #222;
    font-size: 1rem;
}

/* ---- payment/stripe.blade.php ---- */
.StripeElement {
    box-sizing: border-box;
    height: 40px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
}
.StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
    border-color: #fa755a;
}
.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}

/* ---- home/home_new_products.blade.php ---- */
.zd-newp {
    padding: 18px 0 26px;
}
.zd-newp-title {
    margin: 0 0 12px;
}
.zd-newp-actions {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

/* ---- vendor/vendor_details.blade.php ---- */
/* .main est le wrapper <main> global (layouts/master.blade.php) : scope via :has() au marqueur unique de cette page pour ne pas changer le fond des autres pages front */
body:has(.zd-vendor-hero) .main {
    background: #F5F5F5;
}
.zd-vendor-hero {
    background: #eaf4ff;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 20px 0;
}
.zd-vendor-hero-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.zd-vendor-avatar {
    width: 84px;
    height: 84px;
    border-radius: 8px;
    background: #dbeafe;
    overflow: hidden;
    flex: 0 0 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,.08);
}
.zd-vendor-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.zd-vendor-name {
    font-weight: 800;
    font-size: 18px;
    color: #111;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.zd-vendor-sub {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}
.zd-vendor-description {
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
}
.zd-vendor-sidebar-card {
    border: 1px solid rgba(0,0,0,.08);
    padding: 14px;
}
.zd-vendor-sidebar-card h6 {
    font-size: 13px;
    font-weight: 800;
    margin: 0 0 10px;
    color: #111;
}
.zd-vendor-cat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #111;
    margin: 8px 0;
    cursor: pointer;
}
.zd-vendor-cat input[type="checkbox"]:not(.zd-checkbox) {
    flex: 0 0 14px;
}
.zd-vendor-products-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.zd-vendor-products-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.zd-vendor-search {
    position: relative;
    width: 260px;
}
.zd-vendor-search input {
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.16);
    padding: 6px 34px 6px 12px;
    font-size: 13px;
    box-shadow: none;
}
.zd-vendor-search .zd-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .5;
}
.zd-vendor-products-actions .form-select {
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.16);
    font-size: 13px;
    box-shadow: none;
}
@media (max-width: 991px) {
    .zd-vendor-products-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .zd-vendor-search {
        width: 100%;
    }
    .zd-vendor-products-actions {
        width: 100%;
        justify-content: space-between;
    }
}
.vendor-badge {
    font-size: 20px;
    color: #00A05F;
}

/* ---- home/home_verified_suppliers.blade.php ---- */
.zd-vendors {
    padding: 18px 0 26px;
    background: #fff;
}
.zd-vendors-title {
    margin: 0 0 12px;
}
.zd-vendors-carousel {
    position: relative;
}
.zd-vendors-track {
    display: flex;
    gap: 18px;
    overflow: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
}
.zd-vendors-track::-webkit-scrollbar {
    height: 8px;
}
.zd-vendors-track::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.15);
    border-radius: 8px;
}
/* Positionnement carrousel de la carte (voir composant ZD SUPPLIER
   CARD plus bas pour le style de la carte elle-meme, .zd-supplier-card
   --md) -- flex-basis/scroll-snap propres a ce carrousel, pas au
   composant generique. */
.zd-vendors-track .zd-supplier-card--md {
    flex: 0 0 33%;
    scroll-snap-align: start;
}
.zd-vendor-nav {
    position: absolute;
    top: 37%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 14px rgba(0,0,0,.12);
    cursor: pointer;
    z-index: 2;
    transition: opacity .2s;
}
.zd-vendor-nav.is-disabled {
    opacity: 0;
    pointer-events: none;
}
.zd-vendor-prev {
    left: 4px;
}
.zd-vendor-next {
    right: 4px;
}
.zd-vendor-nav i {
    font-size: 16px;
    color: #111;
    line-height: 1;
}
.zd-vendor-nav-icon-prev {
    transform: rotate(180deg);
}
@media (max-width: 991px) {
    .zd-vendors-track .zd-supplier-card--md {
        flex-basis: 300px;
    }
}

/* ---- home/home_usps.blade.php ---- */
body {
    background-color: #fff;
}
.zd-usps-section {
    padding-top: 25px;
    padding-bottom: 25px;
}
/* Layout 3 colonnes : converge vers .zd-feature-card, garde son propre
   grid (voir .about-cards pour le meme principe -- selecteur combine
   pour l'emporter sur .zd-feature-cards par specificite). Section
   actuellement commentee dans index.blade.php (pas affichee en prod),
   convertie quand meme pour etre prete si reactivee. */
.zd-feature-cards.zd-usps-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 991px) {
    .zd-feature-cards.zd-usps-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ---- home/home_explore_categories.blade.php ---- */
.zd-explore {
    padding-top: 70px;
    padding-bottom: 70px;
    background: #fff;
    text-align: center;
}
.zd-explore-title {
    margin: 0 0 24px;
}
.zd-explore-row {
    display: flex;
    justify-content: center;
    gap: 26px;
    flex-wrap: wrap;
    margin: 0 auto;
}
.zd-explore-item {
    width: 120px;
    text-decoration: none;
    color: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.zd-explore-circle {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    border: 2px solid #E6E6E6;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}
.zd-explore-circle img {
    width: 44px;
    height: 44px;
    display: block;
    object-fit: contain;
    filter: grayscale(100%);
}
.zd-explore-label {
    font-size: 14px;
    line-height: 1.15;
    color: #111;
    max-width: 120px;
    text-align: center;
    word-break: break-word;
}
.zd-explore-cta {
    display: flex;
    justify-content: center;
    margin: 22px 0 36px;
}
@media (max-width: 991px) {
    .zd-explore-title {
        font-size: 22px;
    }
    .zd-explore-row {
        gap: 16px;
    }
    .zd-explore-item {
        width: 110px;
    }
    .zd-explore-circle {
        width: 90px;
        height: 90px;
    }
    .zd-explore-circle img {
        width: 40px;
        height: 40px;
    }
}

/* ---- home/home_end_to_end.blade.php ---- */
.zd-e2e {
    padding-top: 70px;
    padding-bottom: 70px;
    background-color: #f5f5f5;
}
.zd-e2e-title {
    margin: 0 0 24px;
}
/* Converge vers .zd-feature-card (taille --sm + --highlighted) --
   le conteneur reste un flex row propre a cette section (flechettes
   .zd-e2e-sep intercalees entre les cartes, pas un grid de cartes
   pur), donc .zd-e2e-grid n'utilise pas .zd-feature-cards. */
.zd-e2e-grid {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.zd-e2e-grid .zd-feature-card {
    flex: 1;
    min-width: 0;
}
.zd-e2e-sep {
    display: flex;
    align-items: center;
    padding: 0 6px;
    color: var(--zd-color-primary);
    flex-shrink: 0;
    font-size: 16px;
    opacity: .65;
}
@media (max-width: 1199px) {
    .zd-e2e-grid {
        flex-wrap: wrap;
        gap: 14px;
    }
    .zd-e2e-grid .zd-feature-card {
        flex: 0 0 calc(50% - 7px);
    }
    .zd-e2e-sep {
        display: none;
    }
}
@media (max-width: 575px) {
    .zd-e2e-grid .zd-feature-card {
        flex: 0 0 100%;
    }
}

/* ---- home/home_about.blade.php ---- */
.zd-about {
    padding-top: 70px;
    padding-bottom: 70px;
}
.zd-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    align-items: start;
}
.zd-about-title {
    margin: 0 0 18px;
}
.zd-about-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
    max-width: 560px;
}
.zd-about-ic {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin-top: 2px;
}
.zd-about-ic img {
    width: 100%;
    height: 100%;
    display: block;
}
.zd-about-item-text {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.55;
    color: #6b7280;
}
.zd-about-media {
    border-radius: 8px;
    overflow: hidden;
    background: #f3f4f6;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zd-about-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.zd-about-media-placeholder {
    font-size: 12px;
    color: #6b7280;
    padding: 12px;
    text-align: center;
}
@media (max-width: 991px) {
    .zd-about-grid {
        grid-template-columns: 1fr;
    }
    .zd-about-media {
        min-height: 220px;
    }
}

/* ---- home/home_hero_search.blade.php ---- */
.zd-hero {
    background: #f7b5ad;
    border-radius: 14px;
    padding: 28px 18px;
    margin: 18px 0;
    position: relative;
}
.zd-hero::before {
    content: "";
    position: absolute;
    right: -60px;
    top: -40px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
}
.zd-hero::after {
    content: "";
    position: absolute;
    right: -160px;
    top: -180px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
}
.zd-hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}
.zd-hero-title {
    margin: 0;
}
.zd-hero-sub {
    font-size: 14px;
    color: rgba(17,17,17,.75);
    margin-top: 4px;
}
.zd-search-wrap {
    margin: 16px auto 0;
    max-width: 640px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 8px;
    padding: 10px;
    position: relative;
}
.zd-search-input {
    width: 100%;
    height: 40px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.12);
    padding: 8px 12px;
    font-size: 14px;
    background: #fff;
    box-shadow: none;
}
.zd-freq {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: rgba(17,17,17,.75);
    align-items: center;
}
.zd-chip {
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,.60);
    border: 1px solid rgba(0,0,0,.08);
    color: #111;
    cursor: pointer;
    user-select: none;
}
.zd-chip:hover {
    background: rgba(255,255,255,.85);
}
.zd-btn i {
    line-height: 1;
}
#zdHeroSearchProducts {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    display: none;
    margin-top: 5px;
}
#zdHeroSearchProducts .autocomplete-section {
    border-bottom: 1px solid #eee;
}
#zdHeroSearchProducts .autocomplete-section:last-child {
    border-bottom: none;
}
#zdHeroSearchProducts .autocomplete-section-title {
    padding: 8px 12px;
    font-weight: 700;
    color: #333;
    background: #f8f8f8;
    font-size: 13px;
    text-transform: uppercase;
}
#zdHeroSearchProducts .autocomplete-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
#zdHeroSearchProducts .autocomplete-item {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s;
}
#zdHeroSearchProducts .autocomplete-item:hover {
    background-color: #f9f9f9;
}
#zdHeroSearchProducts .autocomplete-item:last-child {
    border-bottom: none;
}
#zdHeroSearchProducts .autocomplete-link {
    text-decoration: none;
    color: #111;
    display: block;
}
#zdHeroSearchProducts .autocomplete-title {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
}
#zdHeroSearchProducts .autocomplete-subtitle {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 4px;
    color: #5d5d5d;
}
#zdHeroSearchProducts .autocomplete-no-results {
    padding: 20px;
    text-align: center;
    color: #5d5d5d;
}

/* ---- home/home_buyer_assistance.blade.php ---- */
.zd-ba {
    padding-top: 100px;
    padding-bottom: 100px;
    background: #fff;
    background-size: cover;
    background-position-y: -100px;
    position: relative;
}
.zd-ba-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.62);
    height: 100%;
    width: 100%;
}
.zd-ba-content {
    position: relative;
    z-index: 2;
    padding: 26px 26px 22px;
    color: #fff;
}
.zd-ba-title {
    margin: 0 0 32px;
}
.zd-ba-sub {
    margin-top: 8px;
    font-size: 16px;
    color: rgba(255,255,255,.82);
    line-height: 1.5;
    max-width: 640px;
}
/* Layout 4 colonnes : converge vers .zd-feature-card (voir
   .zd-feature-card--on-dark plus bas pour l'habillage "verre depoli"),
   garde son propre grid 4 colonnes -- selecteur combine pour l'emporter
   sur .zd-feature-cards par specificite. */
.zd-feature-cards.zd-ba-cards {
    margin-top: 18px;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    align-items: stretch;
}
.zd-ba-cta {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}
@media (max-width: 991px) {
    .zd-ba-title {
        font-size: 22px;
    }
    .zd-feature-cards.zd-ba-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .zd-ba-content {
        padding: 20px;
    }
}

/* ---- shop/shop_index.blade.php ---- */
/* .main est le wrapper <main> global : scope via :has() au marqueur unique de cette page */
body:has(.shop-hero) .main {
    background: #F5F5F5;
}
.shop-hero {
    width: 100%;
    min-height: 250px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.shop-hero__overlay {
    width: 100%;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.35);
}
.shop-hero h1 {
    color: #fff;
}
.shop-hero__content {
    max-width: 820px;
    padding: 0 20px;
    color: #fff;
}
.shop-hero__content p {
    opacity: .95;
}
section.section-card {
    padding: 20px 30px;
    margin: 0 auto;
}
.category-source-wrapper {
    position: relative;
    margin-top: -90px;
    z-index: 2;
}
.category-source-card {
    padding: 20px 30px;
    max-width: 1200px;
    margin: 0 auto;
}
.category-source-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 26px 18px;
    align-items: start;
}
.category-source-item {
    text-align: center;
    text-decoration: none;
    color: #1a1a1a;
    min-width: 0;
    transition: transform .2s ease;
}
.category-source-item:hover {
    transform: translateY(-3px);
}
.category-source-item img {
    width: 55px;
    height: 55px;
    margin-bottom: 12px;
    display: inline-block;
    object-fit: contain;
}
.category-source-item span {
    display: block;
    font-size: 14px;
    line-height: 1.3;
}
.category-svg-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: inline-block;
}
@media (max-width: 768px) {
    .category-source-wrapper {
        margin-top: -55px;
    }
    .category-source-card {
        padding: 18px 14px;
        border-radius: 8px;
    }
    .category-source-card h4 {
        margin-bottom: 20px !important;
        font-size: 18px;
    }
    .category-source-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px 10px;
    }
    .category-source-item img {
        width: 46px;
        height: 46px;
        margin-bottom: 8px;
    }
    .category-source-item span {
        font-size: 12px;
    }
}
@media (max-width: 420px) {
    .category-source-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- shop/shop_category.blade.php ---- */
/* Scope global via :has(#shopFiltersAside) : #shopFiltersAside/#suppliersFiltersAside sont uniques a cette page,
   mais .container.mt-30.mb-50 et le raffinement mobile de .product-cart-wrap (avec !important) seraient dangereux
   si laisses globaux (impacteraient toutes les pages produits) */
body:has(#shopFiltersAside) .main {
    background: #F5F5F5;
}
body:has(#shopFiltersAside) .shop-filters .zd-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 8px;
    padding: 20px;
    box-shadow: none;
}
body:has(#shopFiltersAside) .shop-filters .zd-card > h5 {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    margin: 0 0 10px 0;
}
body:has(#shopFiltersAside) .shop-filters .widget {
    padding: 12px 0;
    border-top: 1px solid rgba(0,0,0,.08);
}
body:has(#shopFiltersAside) .shop-filters .widget:first-of-type {
    border-top: 0;
    padding-top: 6px;
}
body:has(#shopFiltersAside) .shop-filters .widget-title {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    margin: 0 0 10px 0;
}
body:has(#shopFiltersAside) .shop-filters .list-filter {
    list-style: none;
    padding: 0;
    margin: 0;
}
body:has(#shopFiltersAside) .shop-filters .list-filter li {
    margin: 8px 0;
}
body:has(#shopFiltersAside) .shop-filters .list-filter a {
    color: #111;
    font-size: 13px;
    text-decoration: none;
}
body:has(#shopFiltersAside) .shop-filters .list-filter a:hover {
    text-decoration: underline;
}
body:has(#shopFiltersAside) .shop-filters label.d-block {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    font-size: 13px;
    color: #222;
    cursor: pointer;
}
/* :not(.zd-checkbox) : meme principe que :not(.zd-input) juste en dessous --
   ces filtres shop utilisent desormais .zd-checkbox/.zd-radio globaux
   (2026-08-31), la specificite tres forte de body:has()... l'emporterait
   sinon silencieusement sur la classe seule. */
body:has(#shopFiltersAside) .shop-filters input[type="checkbox"]:not(.zd-checkbox) {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    border: 1.5px solid var(--zd-color-primary);
    background: #fff;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
}
body:has(#shopFiltersAside) .shop-filters input[type="checkbox"]:not(.zd-checkbox):checked {
    background: var(--zd-color-primary);
}
body:has(#shopFiltersAside) .shop-filters input[type="checkbox"]:not(.zd-checkbox):checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: 2px solid #fff;
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg);
}
body:has(#shopFiltersAside) .shop-filters input[type="radio"]:not(.zd-radio) {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--zd-color-primary);
    background: #fff;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
}
body:has(#shopFiltersAside) .shop-filters input[type="radio"]:not(.zd-radio):checked::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--zd-color-primary);
}
/* :not(.zd-input) : price_min/price_max/moq_min sont passes au composant
   .zd-input global (2026-08-25) -- ce reglage compact ne doit plus les
   viser, sinon sa specificite plus forte l'emporterait sur .zd-input. */
body:has(#shopFiltersAside) .shop-filters .form-control:not(.zd-input) {
    height: 30px;
    padding: 6px 8px;
    font-size: 12px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.18);
    box-shadow: none;
}
body:has(#shopFiltersAside) .shop-filters .form-control:not(.zd-input):focus {
    border-color: rgba(0,0,0,.28);
    box-shadow: none;
}
body:has(#shopFiltersAside) .shop-filters .filter-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
body:has(#shopFiltersAside) .shop-filters .filter-row .form-control {
    flex: 1;
    min-width: 0;
}
/* .btn-filter-ok utilise desormais .zd-button--secondary .zd-button--sm
   (2026-08-25) -- ne garder que ce qui n'est pas deja fourni par le
   composant bouton global. */
body:has(#shopFiltersAside) .shop-filters .btn-filter-ok {
    white-space: nowrap;
}
body:has(#shopFiltersAside) .shop-filters .view-all {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #111;
    text-decoration: none;
}
body:has(#shopFiltersAside) .shop-filters .view-all:hover {
    text-decoration: underline;
}
body:has(#shopFiltersAside) .filters-toggle-btn {
    display: none;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #111;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: background .15s;
}
body:has(#shopFiltersAside) .filters-toggle-btn:hover {
    background: #f7f7f7;
}
body:has(#shopFiltersAside) .filters-toggle-btn .toggle-icon {
    transition: transform .25s ease;
    display: inline-block;
}
body:has(#shopFiltersAside) .filters-toggle-btn.is-open .toggle-icon {
    transform: rotate(180deg);
}
@media (max-width: 991px) {
    body:has(#shopFiltersAside) .filters-toggle-btn {
        display: flex;
    }
    body:has(#shopFiltersAside) #shopFiltersAside .zd-card,
    body:has(#shopFiltersAside) #suppliersFiltersAside .zd-card {
        display: none;
    }
    body:has(#shopFiltersAside) #shopFiltersAside.is-open .zd-card,
    body:has(#shopFiltersAside) #suppliersFiltersAside.is-open .zd-card {
        display: block;
    }
    body:has(#shopFiltersAside) .shop-filters form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    body:has(#shopFiltersAside) .shop-filters .widget {
        padding: 12px;
        border: 1px solid rgba(0,0,0,.08) !important;
        border-radius: 8px;
        margin-bottom: 0 !important;
    }
    body:has(#shopFiltersAside) .shop-filters .widget:first-of-type {
        border-top: 1px solid rgba(0,0,0,.08) !important;
        padding-top: 12px;
    }
}
@media (max-width: 575px) {
    body:has(#shopFiltersAside) .page-header.breadcrumb-wrap {
        margin-top: 76px;
    }
    body:has(#shopFiltersAside) .container.mt-30.mb-50 {
        padding-left: 10px;
        padding-right: 10px;
    }
    body:has(#shopFiltersAside) .shop-filters form {
        grid-template-columns: 1fr;
    }
    body:has(#shopFiltersAside) .zd-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    body:has(#shopFiltersAside) .zd-tabs::-webkit-scrollbar {
        display: none;
    }
    body:has(#shopFiltersAside) .zd-tabs .zd-tab {
        flex: 0 0 auto;
    }
    body:has(#shopFiltersAside) .zd-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    body:has(#shopFiltersAside) #productsContainer .row > [class*="col-"],
    body:has(#shopFiltersAside) #suppliersContainer .row > [class*="col-"] {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    body:has(#shopFiltersAside) .product-cart-wrap {
        margin-bottom: 12px !important;
    }
    body:has(#shopFiltersAside) .product-cart-wrap .product-img-action-wrap {
        max-height: none;
        aspect-ratio: 1 / 1;
    }
    body:has(#shopFiltersAside) .product-cart-wrap .product-img-action-wrap .product-img,
    body:has(#shopFiltersAside) .product-cart-wrap .product-img-action-wrap .product-img a {
        height: 100%;
    }
    body:has(#shopFiltersAside) .product-cart-wrap .product-img-action-wrap .product-img a img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    body:has(#shopFiltersAside) .product-cart-wrap .product-content-wrap {
        padding: 8px 6px 10px;
    }
    body:has(#shopFiltersAside) .product-cart-wrap .product-content-wrap h2 {
        font-size: 13px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    body:has(#shopFiltersAside) .product-cart-wrap .product-content-wrap .product-category a,
    body:has(#shopFiltersAside) .product-cart-wrap .font-xs,
    body:has(#shopFiltersAside) .product-cart-wrap .font-sm {
        font-size: 11px;
        line-height: 1.3;
    }
    body:has(#shopFiltersAside) .product-cart-wrap .product-content-wrap .product-price {
        font-size: 14px;
    }
    body:has(#shopFiltersAside) .product-card-cta .zd-btn {
        width: 100%;
        padding: 7px 4px;
        font-size: 11px;
        display: flex;
        justify-content: center;
        text-align: center;
    }
}

/* ---- product/product_details.blade.php ---- */
.slider-nav-thumbnails .slick-slide.slick-current img,
.slider-nav-thumbnails .slick-slide img:hover {
    border: 2px solid var(--zd-color-primary) !important;
}
.slider-nav-thumbnails button.slick-arrow:hover {
    background-color: var(--zd-color-primary) !important;
}
.slider-nav-thumbnails button.slick-arrow.slick-prev {
    top: -22px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
}
.slider-nav-thumbnails button.slick-arrow.slick-next {
    bottom: -22px !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
}
.slider-nav-thumbnails .slick-prev,
.slider-nav-thumbnails .slick-next {
    top: auto !important;
    transform: none !important;
}
.zoomContainer {
    z-index: 100 !important;
}
/* .product-name/.product-brand/.stock-status/.detail-info (base) sont aussi utilises par body/quickview.blade.php
   avec des valeurs globales differentes -> scope a product_details via :has(#section-reviews) */
body:has(#section-reviews) .main {
    background: #f5f5f5;
    padding-bottom: 60px;
}
body:has(#section-reviews) .no-reviews-text {
    color: #222222;
}
.zd-label-tag.attribute-option-label {
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 5px 10px;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    cursor: pointer;
    font-weight: 400;
    background: #F2F4F8;
    color: #222;
}
.zd-label-tag.attribute-option-label:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-color: var(--zd-color-primary);
    background-color: #FBECE8;
}
.zd-btn-tag.btn-check:checked + .zd-label-tag.attribute-option-label {
    border-color: var(--zd-color-primary);
    background-color: #FBECE8;
    color: #222;
}
.attribute-options {
    gap: 8px;
}
.attribute-group-title {
    font-size: 17px;
    font-weight: bold;
}
.variant-message {
    transition: all 0.3s ease;
}
.product-variants-group {
    position: relative;
    overflow: hidden;
}
body:has(#section-reviews) .stock-status.in-stock {
    color: #10544C;
    background: #B4F6DB;
    padding: 2px 8px;
    border-radius: 8px;
}
body:has(#section-reviews) .stock-status.out-stock {
    color: #dc3545;
    font-weight: bold;
}
.customization-field textarea {
    height: 100px;
}
.customdesign-spec-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #F8F9FA;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}
.customdesign-spec-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #fff;
    border-radius: 8px;
    color: var(--zd-color-primary);
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.customdesign-spec-label {
    color: #6c757d;
}
.customdesign-spec-value {
    font-weight: 600;
    color: #222;
    margin-left: auto;
}
.customdesign-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #444;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 6px 14px;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s;
    background: none;
    cursor: pointer;
}
.customdesign-toggle:hover,
.customdesign-toggle[aria-expanded="true"] {
    color: var(--zd-color-primary);
    border-color: var(--zd-color-primary);
}
.customdesign-chevron {
    transition: transform 0.25s ease;
    font-size: 0.75rem;
}
.customdesign-toggle[aria-expanded="true"] .customdesign-chevron {
    transform: rotate(180deg);
}
.customdesign-info-card {
    border: 1px solid #e9ecef;
    padding: 20px 22px;
}
.customdesign-info-card h6 {
    font-size: 1rem;
    color: #222;
}
.customdesign-contact-link {
    color: #444;
    font-size: 0.88rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.customdesign-contact-link:hover {
    color: var(--zd-color-primary);
}
body:has(#section-reviews) .detail-info {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}
body:has(#section-reviews) .product-name {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.4rem;
    color: #222;
}
.product-moq {
    font-size: 15px;
}
.product-moq #productMoq {
    padding-left: 5px;
}
body:has(#section-reviews) .product-brand {
    font-size: 0.85rem;
    opacity: 0.7;
}
#resetVariantBtn {
    color: #222;
    margin-left: 5px;
    vertical-align: middle;
}
#addToCartBtn:disabled, #mobileAddToCartBtn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.product-group-card {
    padding: 24px;
    --zd-card-pad: 24px;
}
.vendor-link.product-group-card {
    padding: 8px 12px;
}
.vendor-link a:not(.zd-btn):not(.zd-button) {
    font-size: 17px;
    color: #222;
    text-decoration: underline;
}
.vendor-link-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.section-nav {
    position: sticky;
    top: var(--zd-topbar-height, 0px);
    background: #fff;
    z-index: 100;
    margin: 0 calc(-1 * var(--zd-card-pad, 24px)) 30px calc(-1 * var(--zd-card-pad, 24px));
    padding: 15px var(--zd-card-pad, 24px) 0 var(--zd-card-pad, 24px);
    box-shadow: 0 6px 6px -6px rgba(0, 0, 0, .15);
}
.nav-anchor-list {
    display: flex;
    justify-content: flex-start;
    gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-anchor-item {
    margin: 0;
}
.nav-anchor-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    color: #444;
    font-weight: 600;
    padding: 8px 0 15px 0;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    text-transform: uppercase;
}
.nav-anchor-link:hover,
.nav-anchor-link.active {
    color: #222;
    border-bottom-color: var(--zd-color-primary);
}
.product-section {
    scroll-margin-top: 70px;
    padding: 30px 0;
}
.customdesign-section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #222;
    padding-bottom: 15px;
    margin-bottom: 25px;
}
.average-rating-display {
    align-items: center;
}
.average-rating-display .rating-value {
    font-size: 3.2rem;
}
.average-rating-display .verified-purchase {
    color: var(--zd-color-primary);
    text-decoration: underline;
}
.rating-bars {
    background: #F2F2F7;
    padding: 12px;
    border-radius: 8px;
}
.progress {
    display: flex;
    height: 2px;
    overflow: hidden;
    font-size: .75rem;
    background-color: #e9ecef;
    border-radius: .25rem;
}
#section-vendor .vendor-logo {
    line-height: 30px;
}
#section-vendor .vendor-logo img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
}
#section-vendor .section-vendor-wrapper {
    background: #e7f1ff;
    border-radius: 8px;
    padding: 16px;
}
.mobile-cta-bar {
    display: none;
}
@media (max-width: 767px) {
    .product-detail {
        padding-bottom: 80px;
    }
    .mobile-cta-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: #fff;
        border-top: 1px solid rgba(0,0,0,.1);
        padding: 10px 16px;
        gap: 10px;
        align-items: center;
        box-shadow: 0 -2px 12px rgba(0,0,0,.1);
    }
    .mobile-cta-bar .mobile-cta-price {
        flex: 1;
        font-size: 1.1rem;
        font-weight: 700;
        color: #111;
        line-height: 1.2;
    }
    .mobile-cta-bar .mobile-cta-price small {
        display: block;
        font-size: 11px;
        font-weight: 400;
        color: #888;
    }
    .mobile-cta-bar .zd-btn {
        flex: 2;
        text-align: center;
        justify-content: center;
        padding: 12px 16px;
        font-size: 15px;
        font-weight: 600;
    }
    .detail-info .product-extra-link2 {
        display: none;
    }
    body:has(#section-reviews) .detail-info {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
    .product-detail > .row {
        display: flex;
        flex-direction: column;
    }
    .col-md-4 {
        order: 1;
    }
    .col-md-8 {
        order: 2;
    }
    .nav-anchor-list {
        gap: 14px;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .nav-anchor-list::-webkit-scrollbar {
        display: none;
    }
    .nav-anchor-link {
        font-size: 0.8rem;
        white-space: nowrap;
    }
    .product-group-card {
        padding: 14px;
    }
    #section-vendor .vendor-logo {
        flex-direction: column;
    }
    #section-vendor .vendor-logo img {
        margin-bottom: 12px;
        width: 80px;
        height: 80px;
    }
    .verified-store-label {
        display: none;
    }
}
@media (max-width: 575px) {
    .product-price-cover,
    .product-stock {
        display: block;
    }
    .average-rating-display {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }
    .average-rating-display .rating-value {
        font-size: 2.4rem;
    }
}

/* ---- mycart/view_mycart.blade.php ---- */
/* .product-name/.product-moq/.variant-info/.main sont deja definis (autrement) par d'autres pages -> scope complet via :has(.quote-page) */
body:has(.quote-page) .main {
    background: #F5F5F5;
}
body:has(.quote-page) .quote-page {
    background: #fafafa;
    padding: 29px !important;
    --muted: rgba(0,0,0,.55);
    --line: rgba(0,0,0,.08);
    --primary: var(--zd-color-primary);
}
body:has(.quote-page) .quote-page label {
    margin: initial;
}
body:has(.quote-page) .quotation-left-title {
    font-weight: 700;
    font-size: 26px;
    margin-bottom: 22px;
}
body:has(.quote-page) #quotationSummary {
    margin-top: 44px;
}
body:has(.quote-page) .vendor-section {
    padding-bottom: 26px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--line);
}
body:has(.quote-page) .vendor-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
body:has(.quote-page) .vendor-title a {
    font-weight: 700;
    color: #111;
    text-decoration: none;
    font-size: 21px;
}
body:has(.quote-page) .vendor-count {
    margin-left: auto;
    color: var(--muted);
    font-size: 13px;
}
body:has(.quote-page) .product-block {
    margin-left: 26px;
    margin-bottom: 18px;
}
body:has(.quote-page) .product-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
body:has(.quote-page) .product-head-text {
    flex: 1;
}
body:has(.quote-page) .product-name {
    font-size: 13px;
    font-weight: 600;
    color: #111;
    line-height: 1.3;
    margin-top: 1px;
}
body:has(.quote-page) .product-name a {
    color: #111;
}
body:has(.quote-page) .product-moq {
    color: var(--muted);
    font-size: 12px;
    margin-top: 4px;
}
body:has(.quote-page) .variant-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    min-height: 98px;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
body:has(.quote-page) .product-block .variant-row + .variant-row {
    margin-top: 10px;
}
.zd-radio-card {
    cursor: pointer;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 16px;
    transition: border-color .15s, background-color .15s;
    user-select: none;
}
.zd-radio-card:has(input:checked) {
    border-color: var(--zd-color-primary);
    background-color: #fdf4f1;
}
.zd-radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.zd-radio-mark {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s, background-color .15s;
    margin-top: 2px;
}
.zd-radio-card:has(input:checked) .zd-radio-mark {
    border-color: var(--zd-color-primary);
    background-color: var(--zd-color-primary);
}
.zd-radio-card:has(input:checked) .zd-radio-mark::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
}
body:has(.quote-page) .variant-img {
    width: 92px;
    height: 92px;
    flex: 0 0 92px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.06);
}
body:has(.quote-page) .variant-info {
    flex: 1;
    min-width: 0;
    padding-right: 10px;
}
body:has(.quote-page) .variant-attrs {
    font-size: 13px;
    color: rgba(0,0,0,.75);
    margin-bottom: 6px;
}
body:has(.quote-page) .variant-customization {
    margin-top: 4px;
    font-size: 12px;
    color: #555;
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body:has(.quote-page) .variant-price {
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 4px;
}
body:has(.quote-page) .variant-price span {
    font-weight: 600;
    color: var(--muted);
    font-size: 12px;
}
body:has(.quote-page) .variant-sku {
    color: var(--muted);
    font-size: 12px;
}
body:has(.quote-page) .variant-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}
body:has(.quote-page) .variant-actions .detail-qty {
    margin-right: 6px;
}
body:has(.quote-page) .variant-total {
    width: 96px;
    text-align: right;
    font-weight: 700;
}
body:has(.quote-page) .icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
body:has(.quote-page) .icon-btn:hover {
    background: #f6f6f6;
}
body:has(.quote-page) .summary-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,.06);
    padding: 16px;
}
body:has(.quote-page) .summary-title {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 12px;
}
body:has(.quote-page) .summary-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 14px;
}
body:has(.quote-page) .summary-row .label {
    color: var(--muted);
}
body:has(.quote-page) .summary-row .value {
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}
body:has(.quote-page) .zd-info-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #0167CC;
    cursor: help;
}
body:has(.quote-page) .zd-info-tip i {
    font-size: 15px;
    line-height: 1;
}
body:has(.quote-page) .zd-info-tip__box {
    display: none;
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    width: 240px;
    background: #1a1a1a;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    padding: 10px 12px;
    border-radius: 8px;
    text-align: left;
    z-index: 20;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
body:has(.quote-page) .zd-info-tip:hover .zd-info-tip__box,
body:has(.quote-page) .zd-info-tip:focus .zd-info-tip__box {
    display: block;
}
@media (max-width: 767px) {
    body:has(.quote-page) .zd-info-tip__box {
        left: auto;
        right: 0;
        top: calc(100% + 8px);
        transform: none;
    }
}
body:has(.quote-page) .summary-divider {
    border-top: 1px solid var(--line);
    margin: 8px 0;
}
body:has(.quote-page) .summary-total .label {
    color: #111;
    font-weight: 700;
}
body:has(.quote-page) .summary-total .value {
    font-weight: 700;
}
body:has(.quote-page) .summary-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fdebe6;
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--primary);
    font-weight: 800;
    margin: 8px 0 10px 0;
    font-size: 13px;
}
body:has(.quote-page) .summary-info i,
body:has(.quote-page) .summary-opt i {
    font-size: 24px;
}
body:has(.quote-page) .summary-primary {
    width: 100%;
    margin-top: 10px;
}
body:has(.quote-page) .summary-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
body:has(.quote-page) .summary-secondary {
    width: 100%;
    border-radius: 8px;
    padding: 12px 14px;
    font-weight: 700;
    border: 1px solid rgba(0,0,0,.25);
    background: #fff;
    color: #111;
    margin-top: 12px;
}
body:has(.quote-page) .summary-info {
    margin-top: 12px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
    display: flex;
    gap: 10px;
    color: #111;
}
body:has(.quote-page) .summary-info .t {
    font-weight: 700;
}
body:has(.quote-page) .summary-info .d {
    color: var(--muted);
    font-size: 13px;
}
@media (max-width: 991px) {
    body:has(.quote-page) #quotationSummary {
        margin-top: 20px;
    }
    body:has(.quote-page) .product-block {
        margin-left: 0;
    }
    body:has(.quote-page) .variant-row {
        flex-wrap: wrap;
    }
    body:has(.quote-page) .variant-actions {
        width: 100%;
        justify-content: flex-end;
    }
    body:has(.quote-page) .variant-total {
        width: auto;
    }
}
body:has(.quote-page) #quoteRequestModal .modal-content,
body:has(.quote-page) #quoteRequestSuccessModal .modal-content {
    border: none;
    box-shadow: 0 20px 35px -8px rgba(0, 0, 0, 0.2);
}
body:has(.quote-page) #quoteRequestModal .btn-close {
    opacity: 0.5;
    transition: opacity 0.2s;
}
body:has(.quote-page) #quoteRequestModal .btn-close:hover {
    opacity: 1;
}
body:has(.quote-page) #quoteRequestModal a:hover {
    text-decoration: underline !important;
}
body:has(.quote-page) #quoteRequestModal .modal-header {
    justify-content: center;
}
body:has(.quote-page) .summary-note-box {
    margin-bottom: 14px;
}
body:has(.quote-page) .summary-note-toggle {
    gap: 0;
}
body:has(.quote-page) #buyerNote {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 14px;
    resize: vertical;
    min-height: 110px;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body:has(.quote-page) #buyerNote:focus {
    border-color: #9ca3af;
    box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.18);
}

/* ---- body/header.blade.php (present sur toutes les pages -> global, sans scope) ---- */
/* Tokens verifies sur __maquettes/DesignSystem/TopBar/Topbar.svg
   (mesure directe des coordonnees vectorielles, 2026-09-02) : V-padding
   16 (confirme par la hauteur totale de ligne mesuree, 76px = 44px de
   contenu + 2x16), Icon Size 20, Spacing 16 (gap entre les icones de
   droite), police 14/140 (SemiBold pour "All categories", Regular
   pour EN/Sign In). Dropshadow "S" au scroll non recale sur un token
   precis (aucune valeur "S" distincte de --zd-shadow-card trouvee
   dans le design system) -- valeur existante conservee. */
.zd-topbar {
    background: #fff;
    padding: 16px 0;
    border-bottom: 1px solid #DFDFDF;
    position: relative;
    z-index: 50;
}
.zd-topbar.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    box-shadow: 0 10px 22px rgba(0,0,0,.06);
}
.zd-topbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.zd-topbar,
.zd-topbar .container,
.zd-topbar-row,
.zd-left {
    overflow: visible !important;
}
.zd-left {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
    flex: 1 1 auto;
}
.zd-logo img {
    width: 200px;
    height: auto;
    display: block;
    flex-shrink: 0;
}
.zd-logo {
    flex-shrink: 0;
}
.zd-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
}
.zd-cats-btn {
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.menu-row nav .category-menu-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    color: #222222;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 8px;
    white-space: nowrap;
}
.menu-row nav .category-menu-title .zd-icon {
    font-size: 16px;
}
.menu-row nav .category-menu-title:hover {
    background: #f5f5f5;
}
.menu-row nav {
    position: relative;
}
.menu-row .menu.is-open {
    display: block;
}
.zd-search {
    flex: 0 1 560px;
    max-width: 560px;
    margin: 0 auto;
    display: none;
}
.zd-search form {
    position: relative;
}
.zd-search-shell {
    position: relative;
    overflow: visible;
}
.zd-search-inner {
    display: flex;
    align-items: center;
    border: 1px solid var(--zd-color-primary);
    border-radius: 12px;
    overflow: visible;
    background: #fff;
    height: 44px;
}
.zd-search-cats {
    display: none;
    align-items: center;
    height: 100%;
    white-space: nowrap;
}
#zdCatsInside .menu-row nav {
    position: static;
}
#zdCatsInside .menu {
    position: absolute;
    left: 0;
    z-index: 9999;
}
.menu-row .menu > li {
    width: auto !important;
}
.menu-row nav > .menu {
    border-radius: 8px 0 0 8px !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    border-right: none !important;
    box-shadow: none !important;
}
.menu-row .menu > li:hover .megadrop {
    border-radius: 0 8px 8px 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    left: 198px !important;
}
.zd-search-inner input {
    border: 0;
    outline: 0;
    height: 100%;
    padding: 0 14px;
    flex: 1 1 auto;
    font-size: 14px;
}
.zd-search-btn {
    border: 0;
    width: 36px;
    height: 36px;
    margin: 0 4px;
    border-radius: 8px;
    background: var(--zd-color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#searchProducts {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 8px;
    z-index: 9999;
}
.zd-lang-btn {
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #111;
}
.zd-cart img {
    width: 22px;
    height: 22px;
    display: block;
}
.zd-cart-badge {
    position: absolute;
    top: 2px;
    right: 0;
    transform: translate(40%, -25%);
    background: var(--zd-color-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    display: none;
    text-align: center;
    padding: 0 4px;
    pointer-events: none;
}
.zd-minicart-dd {
    width: 340px;
    border-radius: 8px;
    padding: 0;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 20px 40px rgba(0,0,0,.13);
    overflow: hidden;
}
.zd-minicart-body {
    max-height: 300px;
    overflow-y: auto;
}
.zd-minicart-body ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.zd-minicart-body ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,.05);
    transition: background .15s;
}
.zd-minicart-body ul li:hover {
    background: #fafafa;
}
.zd-minicart-body ul li:last-child {
    border-bottom: none;
}
.shopping-cart-img {
    flex-shrink: 0;
}
.shopping-cart-img img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(0,0,0,.06);
}
.shopping-cart-title small {
    font-size: 11px !important;
    color: #aaa !important;
    line-height: 1.6;
}
.shopping-cart-title {
    flex: 1;
    min-width: 0;
}
.shopping-cart-title h4 {
    font-size: 13px;
    margin: 0 0 4px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shopping-cart-title h4 a {
    color: #111;
    text-decoration: none;
}
.shopping-cart-title h4 a:hover {
    color: var(--zd-color-primary);
}
.shopping-cart-title h4 span {
    color: #888;
    font-weight: 400;
}
.shopping-cart-title h4 strong {
    color: var(--zd-color-primary);
}
.shopping-cart-delete {
    flex-shrink: 0;
}
.shopping-cart-delete a {
    color: #ccc;
    font-size: 17px;
    cursor: pointer;
    line-height: 1;
}
.shopping-cart-delete a:hover {
    color: var(--zd-color-primary);
}
.zd-minicart-footer {
    padding: 12px 16px 14px;
    border-top: 1px solid rgba(0,0,0,.07);
    background: #F5F5F5;
}
.zd-minicart-footer > div {
    font-size: 14px;
    margin-bottom: 10px;
}
.zd-minicart-footer .js-cartSubTotal {
    color: var(--zd-color-primary);
}
.zd-minicart-footer .zd-btn {
    display: block;
    text-align: center;
    width: 100%;
}
@media (min-width: 992px) {
    .zd-mini-cart-wrap:hover > .zd-minicart-dd {
        display: block !important;
    }
}
.zd-link {
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #111;
}
.zd-auth-dd {
    width: 280px;
    border-radius: 8px;
    padding: 10px;
    border: 1px solid rgba(0,0,0,.10);
    box-shadow: 0 16px 30px rgba(0,0,0,.10);
}
.zd-auth-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 9px;
}
.zd-ico {
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    color: #111;
    font-size: 20px;
    text-decoration: none;
}
/* .zd-icon a un width/height:1.4em global (voir plus haut dans ce
   fichier) : un simple font-size:20px sur .zd-ico rend donc l'icone a
   28px (20*1.4), pas 20px. Convention deja utilisee ailleurs dans le
   design system (ex. .zd-button .zd-icon) : surcharger la taille en
   dur via un selecteur compose plutot que compter sur l'heritage
   font-size/em. */
.zd-ico .zd-icon {
    width: 20px;
    height: 20px;
}
.zd-ico:hover {
    background: #f5f5f5;
}
.zd-profile-dd {
    width: 240px;
    border-radius: 8px;
    padding: 10px 0;
    border: 1px solid rgba(0,0,0,.10);
    box-shadow: 0 16px 30px rgba(0,0,0,.10);
}
.zd-profile-head {
    padding: 10px 14px;
    font-size: 13px;
    color: #111;
}
.zd-profile-item {
    padding: 9px 14px;
    font-size: 13px;
}
@media (max-width: 991px) {
    .zd-search,
    .zd-cats-btn,
    .dropdown.zd-lang,
    .zd-link span {
        display: none !important;
    }
    .zd-topbar-row {
        flex-direction: column;
    }
}

/* ---- page/aboutus.blade.php ---- */
.about-page {
    background: #fff;
    color: #222;
}
.about-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.about-hero {
    position: relative;
    min-height: 450px;
    background-image: url(../imgs/page/about-hero.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    color: #fff;
}
.about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #22161380;
    z-index: 1;
}
.about-hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
    padding: 0 24px;
}
.about-hero h1 {
    font-size: 37px;
    line-height: 1.15;
    margin-bottom: 22px;
    color: #fff;
}
.about-intro {
    background: #fdecea;
    padding: 42px 0;
    text-align: center;
}
.about-intro p {
    max-width: 920px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.55;
    font-weight: 700;
}
.about-section {
    padding: 80px 0;
}
.about-two-cols {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 80px;
    align-items: center;
}
.about-two-cols.reverse {
    grid-template-columns: .95fr 1.05fr;
}
.about-content h2 {
    font-size: 36px;
    line-height: 1.15;
    font-weight: 800;
    margin-bottom: 18px;
    color: #222;
}
.about-content p {
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 28px;
    color: #222;
}
.about-image img {
    width: 100%;
    display: block;
    border-radius: 8px;
}
.about-benefits {
    display: grid;
    gap: 28px;
    margin-top: 34px;
}
.about-benefit {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 18px;
    align-items: flex-start;
}
.about-benefit-icon {
    width: 36px;
    height: 36px;
}
.about-benefit h3 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 4px;
}
.about-benefit p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}
.about-steps {
    margin-top: 36px;
}
.about-step {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 18px;
    position: relative;
    padding-bottom: 34px;
}
.about-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 21px;
    top: 44px;
    bottom: -4px;
    width: 1px;
    background: var(--zd-color-primary);
    opacity: .35;
}
.about-step-number {
    width: 42px;
    height: 42px;
    border: 1px solid var(--zd-color-primary);
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #222;
    position: relative;
    z-index: 2;
}
.about-step h3 {
    font-size: 18px;
    font-weight: 800;
    margin: 7px 0 0;
}
.about-complex {
    background: #F5F5F5;
    padding: 80px 0;
}
.about-complex-head {
    max-width: 980px;
    margin-bottom: 44px;
}
.about-complex-head h2 {
    font-size: 36px;
    line-height: 1.15;
    font-weight: 800;
    margin-bottom: 14px;
    color: #222;
}
.about-complex-head p {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 18px;
}
/* Layout 2 colonnes : converge vers le composant .zd-feature-card
   global (icone/titre/texte), mais garde son propre grid 2 colonnes
   (le composant seul rend en auto-fit) -- selecteur combine pour
   l'emporter sur .zd-feature-cards par specificite, sans dependre de
   l'ordre des regles dans le fichier. */
.zd-feature-cards.about-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}
.about-card h3 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 16px;
}
.about-card p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
.about-actions {
    text-align: center;
    margin-top: 42px;
}
.about-actions .zd-btn {
    margin-bottom: 18px;
}
.about-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #222;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
@media (max-width: 768px) {
    .about-hero h1 {
        font-size: 32px;
    }
    .about-two-cols,
    .about-two-cols.reverse,
    .zd-feature-cards.about-cards {
        grid-template-columns: 1fr;
    }
    .about-section,
    .about-complex {
        padding: 56px 0;
    }
}

/* ---- page/buyerassistance.blade.php ---- */
.ba-page {
    background: #fff;
    color: #222;
}
.ba-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.ba-hero {
    position: relative;
    overflow: hidden;
    min-height: 450px;
    background-image: url(../imgs/page/buyer-assistance-hero.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    color: #fff;
}
.ba-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #22161380;
    z-index: 1;
}
.ba-hero .ba-container {
    position: relative;
    z-index: 2;
    margin: 0;
}
.ba-hero-content {
    max-width: 560px;
}
.ba-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 14px;
}
.ba-hero h1 {
    font-size: 37px;
    line-height: 1.15;
    margin-bottom: 22px;
    color: #fff;
}
.ba-benefits {
    background: #fdecea;
    padding: 42px 0;
}
.ba-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 70px;
    text-align: center;
}
.ba-benefit-icon {
    width: 34px;
    height: 34px;
    margin: 0 auto 14px;
}
.ba-benefit h3 {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 12px;
}
.ba-benefit p {
    font-size: 13px;
    line-height: 1.45;
    color: #333;
}
.ba-section {
    padding: 70px 0;
}
.ba-section h2 {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 800;
    margin-bottom: 12px;
    color: #222;
}
.ba-section-intro {
    max-width: 900px;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 36px;
}
.ba-table-wrap {
    overflow-x: auto;
}
.ba-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ba-table th {
    background: #F5F5F5;
    font-weight: 700;
    padding: 12px 16px;
}
.ba-th-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ba-th-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.ba-table td {
    border-bottom: 1px solid #ddd;
    padding: 14px 16px;
    vertical-align: top;
}
.ba-table td:first-child {
    font-weight: 700;
    width: 26%;
}
.ba-center {
    text-align: center;
    margin-top: 34px;
}
.ba-grey {
    background: #F5F5F5;
}
.ba-title-center {
    text-align: center;
    margin-bottom: 42px;
}
/* Layout 2 colonnes : converge vers le composant .zd-feature-card
   global, garde son propre grid 2 colonnes (voir .about-cards pour le
   meme principe). */
.zd-feature-cards.ba-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}
.ba-card h3 {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 14px;
}
.ba-card p {
    font-size: 13px;
    line-height: 1.6;
    color: #333;
}
.ba-steps {
    max-width: 900px;
}
.ba-step {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 22px;
    position: relative;
    padding-bottom: 26px;
}
.ba-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 23px;
    top: 44px;
    bottom: -4px;
    width: 1px;
    background: var(--zd-color-primary);
    opacity: .35;
}
.ba-step-number {
    width: 42px;
    height: 42px;
    border: 1px solid var(--zd-color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    background: #fff;
    color: #222;
    z-index: 1;
}
.ba-step h3 {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 6px;
}
.ba-step p {
    font-size: 13px;
    line-height: 1.5;
}
.ba-impact {
    background: #fdecea;
    padding: 70px 0;
}
.ba-impact-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 36px;
}
.ba-impact-head h2 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 10px;
}
.ba-impact-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}
.ba-impact-large,
.ba-impact-small {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    color: #fff;
    background: #222;
}
.ba-impact-large {
    height: 520px;
}
.ba-impact-stack {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 24px;
}
.ba-impact-small {
    height: 248px;
}
.ba-impact-large img,
.ba-impact-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    opacity: .72;
}
.ba-impact-text {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 30px;
}
.ba-impact-text h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 6px;
}
.ba-impact-text p {
    font-size: 13px;
    line-height: 1.45;
}
@media (max-width: 768px) {
    .ba-hero h1 {
        font-size: 30px;
    }
    .ba-benefits-grid,
    .zd-feature-cards.ba-cards,
    .ba-impact-grid {
        grid-template-columns: 1fr;
    }
    .ba-section {
        padding: 52px 0;
    }
}

/* ---- page/contact.blade.php ---- */
/* .zd-fc-, .zd-info-, .zd-form-card sont repris avec des valeurs differentes par buyerassistance_start.blade.php -> scope complet */
body:has(.zd-contact-hero) .zd-contact-hero {
    background: linear-gradient(135deg, var(--zd-color-primary) 0%, var(--zd-color-primary-light) 100%);
    padding: 52px 0 48px;
    text-align: center;
    color: #fff;
}
body:has(.zd-contact-hero) .zd-contact-hero h1 {
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 10px;
    color: #fff;
}
body:has(.zd-contact-hero) .zd-contact-hero p {
    font-size: 15px;
    opacity: .88;
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.55;
}
body:has(.zd-contact-hero) .zd-contact-wrap {
    background: #f4f6f9;
    padding: 60px 0 80px;
}
body:has(.zd-contact-hero) .zd-info-card {
    background: #1a1a2e;
    border-radius: 8px;
    padding: 32px 28px;
    color: #fff;
    height: 100%;
}
body:has(.zd-contact-hero) .zd-info-card h2 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 28px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
body:has(.zd-contact-hero) .zd-info-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}
body:has(.zd-contact-hero) .zd-info-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(207,65,20,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body:has(.zd-contact-hero) .zd-info-icon i {
    font-size: 16px;
    color: var(--zd-color-primary-light);
}
body:has(.zd-contact-hero) .zd-info-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 3px;
}
body:has(.zd-contact-hero) .zd-info-value {
    font-size: 14px;
    color: #fff;
    line-height: 1.4;
}
body:has(.zd-contact-hero) .zd-info-value a {
    color: var(--zd-color-primary-light);
    text-decoration: none;
}
body:has(.zd-contact-hero) .zd-info-value a:hover {
    color: #fff;
}
body:has(.zd-contact-hero) .zd-info-note {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: 13px;
    color: rgba(255,255,255,.65);
    line-height: 1.6;
}
body:has(.zd-contact-hero) .zd-form-card {
    background: #fff;
    border-radius: 8px;
    padding: 36px 32px;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
body:has(.zd-contact-hero) .zd-form-card h2 {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 6px;
}
body:has(.zd-contact-hero) .zd-form-card .zd-fc-sub {
    font-size: 13px;
    color: #6c757d;
    margin-bottom: 26px;
}
body:has(.zd-contact-hero) .zd-fc-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
body:has(.zd-contact-hero) .zd-fc-label .req {
    color: var(--zd-color-primary);
}
/* Style de base des champs (bordure/radius/police/etats) : composant
   .zd-input global (voir section ZD INPUT FIELDS plus bas) --
   convergence actee le 2026-08-25, ne pas reintroduire d'override
   local ici. .zd-fc-input/select/textarea ne portent plus que le
   markup historique (inerte), .zd-fc-group/.zd-fc-label restent pour
   la mise en page. */
body:has(.zd-contact-hero) .zd-fc-group {
    margin-bottom: 18px;
}
body:has(.zd-contact-hero) .zd-fc-btn {
    display: block;
    width: 100%;
    height: 48px;
    background: var(--zd-color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
    margin-top: 8px;
}
body:has(.zd-contact-hero) .zd-fc-btn:hover {
    background: #b33610;
}
@media (max-width: 767px) {
    body:has(.zd-contact-hero) .zd-contact-hero {
        padding: 36px 0 32px;
    }
    body:has(.zd-contact-hero) .zd-contact-hero h1 {
        font-size: 26px;
    }
    body:has(.zd-contact-hero) .zd-form-card {
        padding: 24px 18px;
    }
    body:has(.zd-contact-hero) .zd-info-card {
        margin-bottom: 24px;
    }
}

/* ---- page/buyerassistance_start.blade.php ---- */
/* .zd-fc-, .zd-info-, .zd-form-card, .main partages avec contact.blade.php (valeurs differentes) -> scope complet */
body:has(.zd-ba-start-hero) .main {
    background: #F5F5F5;
}
body:has(.zd-ba-start-hero) .zd-ba-start-hero {
    background: linear-gradient(135deg, var(--zd-color-primary) 0%, var(--zd-color-primary-light) 100%);
    padding: 52px 0 48px;
    text-align: center;
    color: #fff;
}
body:has(.zd-ba-start-hero) .zd-ba-start-hero h1 {
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 10px;
    color: #fff;
}
body:has(.zd-ba-start-hero) .zd-ba-start-hero p {
    font-size: 15px;
    opacity: .88;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.55;
}
body:has(.zd-ba-start-hero) .zd-ba-start-wrap {
    padding: 60px 0 80px;
}
body:has(.zd-ba-start-hero) .zd-info-card {
    background: #1a1a2e;
    border-radius: 8px;
    padding: 32px 28px;
    color: #fff;
    height: 100%;
}
body:has(.zd-ba-start-hero) .zd-info-card h2 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
body:has(.zd-ba-start-hero) .zd-info-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}
body:has(.zd-ba-start-hero) .zd-info-step-num {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(207,65,20,.25);
    color: var(--zd-color-primary-light);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body:has(.zd-ba-start-hero) .zd-info-step-text {
    font-size: 14px;
    color: rgba(255,255,255,.85);
    line-height: 1.5;
    padding-top: 3px;
}
body:has(.zd-ba-start-hero) .zd-info-note {
    margin-top: 12px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: 13px;
    color: rgba(255,255,255,.65);
    line-height: 1.6;
}
body:has(.zd-ba-start-hero) .zd-form-card {
    background: #fff;
    border-radius: 8px;
    padding: 36px 32px;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
body:has(.zd-ba-start-hero) .zd-form-card h2 {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 6px;
}
body:has(.zd-ba-start-hero) .zd-form-card .zd-fc-sub {
    font-size: 13px;
    color: #6c757d;
    margin-bottom: 26px;
}
body:has(.zd-ba-start-hero) .zd-fc-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
body:has(.zd-ba-start-hero) .zd-fc-label .req {
    color: var(--zd-color-primary);
}
/* Style de base des champs : composant .zd-input global (convergence
   2026-08-25, cf memes commentaires plus haut sur .zd-contact-hero). */
body:has(.zd-ba-start-hero) .zd-fc-group {
    margin-bottom: 18px;
}
body:has(.zd-ba-start-hero) .zd-fc-btn {
    display: block;
    width: 100%;
    height: 48px;
    background: var(--zd-color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
    margin-top: 8px;
}
body:has(.zd-ba-start-hero) .zd-fc-btn:hover {
    background: #b33610;
}
@media (max-width: 767px) {
    body:has(.zd-ba-start-hero) .zd-ba-start-hero {
        padding: 36px 0 32px;
    }
    body:has(.zd-ba-start-hero) .zd-ba-start-hero h1 {
        font-size: 26px;
    }
    body:has(.zd-ba-start-hero) .zd-form-card {
        padding: 24px 18px;
    }
    body:has(.zd-ba-start-hero) .zd-info-card {
        margin-bottom: 24px;
    }
}

/* ---- page/vendor-showroom.blade.php (prefixe .vs- unique, global) ---- */
:root {
    --zd-orange: var(--zd-color-primary);
    --zd-orange-h: #b33610;
    --zd-bg: #f4f6f9;
    --zd-card: #ffffff;
    --zd-border: #e2e8f0;
    --zd-text: #1a1a2e;
    --zd-muted: #64748b;
    --zd-green: #16a34a;
}
.vs-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #2d2b55 60%, var(--zd-color-primary) 100%);
    color: #fff;
    padding: 72px 0 80px;
    text-align: center;
}
.vs-hero h1 {
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 800;
    margin-bottom: 16px;
}
.vs-hero p {
    font-size: 17px;
    opacity: .85;
    max-width: 600px;
    margin: 0 auto 32px;
    line-height: 1.7;
}
.vs-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 8px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 24px;
}
.vs-badge span {
    color: #ffb347;
}
.vs-section {
    padding: 64px 0;
}
.vs-section:nth-child(even) {
    background: var(--zd-bg);
}
.vs-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff3ee;
    color: var(--zd-orange);
    border: 1px solid #fcd5c8;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 14px;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 12px;
}
.vs-section h2 {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    color: var(--zd-text);
    margin-bottom: 10px;
}
.vs-section .vs-sub {
    font-size: 15px;
    color: var(--zd-muted);
    margin-bottom: 40px;
    max-width: 560px;
}
.vs-frame {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
    overflow: hidden;
    border: 1px solid var(--zd-border);
    transition: transform .25s ease, box-shadow .25s ease;
}
.vs-frame:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.08);
}
.vs-chrome {
    background: #f1f3f5;
    border-bottom: 1px solid var(--zd-border);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.vs-chrome-dots {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}
.vs-chrome-dots span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}
.vs-chrome-dots span:nth-child(1) {
    background: #ff5f57;
}
.vs-chrome-dots span:nth-child(2) {
    background: #ffbd2e;
}
.vs-chrome-dots span:nth-child(3) {
    background: #28ca41;
}
.vs-chrome-url {
    flex: 1;
    background: #fff;
    border: 1px solid var(--zd-border);
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 11px;
    color: var(--zd-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vs-screen {
    aspect-ratio: 16/9;
    background: var(--zd-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    position: relative;
}
.vs-screen-icon {
    width: 56px;
    height: 56px;
    background: #e8edf5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--zd-muted);
}
.vs-screen-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--zd-text);
    text-align: center;
}
.vs-screen-desc {
    font-size: 12px;
    color: var(--zd-muted);
    text-align: center;
    line-height: 1.5;
    max-width: 260px;
}
.vs-screen-num {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--zd-orange);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 8px;
    padding: 2px 10px;
}
.vs-caption {
    margin-top: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.vs-caption-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff3ee;
    color: var(--zd-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}
.vs-caption h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--zd-text);
    margin-bottom: 2px;
}
.vs-caption p {
    font-size: 12.5px;
    color: var(--zd-muted);
    margin: 0;
    line-height: 1.5;
}
.vs-screen.vs-tall {
    aspect-ratio: 3/4;
}
.vs-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.vs-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.vs-grid-1-2 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
}
.vs-grid-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}
@media (max-width: 900px) {
    .vs-grid-2, .vs-grid-3, .vs-grid-1-2, .vs-grid-2-1 {
        grid-template-columns: 1fr;
    }
}
.vs-option-strip {
    background: #fffbf0;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
    font-size: 13px;
    color: #78550a;
}
.vs-option-strip strong {
    color: #92400e;
}
.vs-steps {
    display: flex;
    gap: 0;
    margin-bottom: 48px;
}
.vs-step-item {
    flex: 1;
    text-align: center;
    position: relative;
    padding: 0 16px;
}
.vs-step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 22px;
    right: -1px;
    width: 2px;
    height: 44px;
    background: var(--zd-border);
}
.vs-step-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--zd-orange);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}
.vs-step-item h5 {
    font-size: 13px;
    font-weight: 700;
    color: var(--zd-text);
    margin-bottom: 4px;
}
.vs-step-item p {
    font-size: 11.5px;
    color: var(--zd-muted);
    margin: 0;
}
.vs-cta {
    background: linear-gradient(135deg, var(--zd-color-primary), var(--zd-color-primary-light));
    color: #fff;
    text-align: center;
    padding: 72px 24px;
}
.vs-cta h2 {
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 800;
    margin-bottom: 12px;
}
.vs-cta p {
    font-size: 16px;
    opacity: .9;
    margin-bottom: 32px;
}
.vs-stats {
    display: flex;
    gap: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    border: 1px solid var(--zd-border);
    margin-bottom: 56px;
    overflow: hidden;
}
.vs-stat {
    flex: 1;
    padding: 24px 20px;
    text-align: center;
    border-right: 1px solid var(--zd-border);
}
.vs-stat:last-child {
    border-right: none;
}
.vs-stat-val {
    font-size: 28px;
    font-weight: 800;
    color: var(--zd-orange);
    line-height: 1;
    margin-bottom: 6px;
}
.vs-stat-lbl {
    font-size: 12px;
    color: var(--zd-muted);
}
@media (max-width: 640px) {
    .vs-stats {
        flex-direction: column;
    }
    .vs-stat {
        border-right: none;
        border-bottom: 1px solid var(--zd-border);
    }
    .vs-stat:last-child {
        border-bottom: none;
    }
    .vs-steps {
        flex-direction: column;
        gap: 24px;
    }
    .vs-step-item::after {
        display: none;
    }
}

/* ---- vendor/supplier_landing.blade.php (prefixe .sp- unique) ---- */
/* Mesures : maquette Figma __maquettes/Onboarding (desktop 1440, contenu
   1200px ; mobile 393, gouttiere 16px). Sections : 120px de padding
   vertical en desktop, 48px en mobile. */
/* body, body* {font-family...!important} casserait les icon-fonts (fi-rs-*) partout si laisse global -> scope a .sp-hero */
body:has(.sp-hero),
body:has(.sp-hero) * {
    font-family: 'Inter', sans-serif !important;
}
.sp-page {
    --sp-navy: #1C1C32;
    --sp-text: var(--zd-color-heading);
    --sp-muted: var(--zd-color-text-secondary);
}
.sp-page .container {
    max-width: 1232px;
    padding-left: 16px;
    padding-right: 16px;
}
.sp-page p {
    margin: 0;
}
.sp-section {
    padding: 120px 0;
    background: #fff;
}
.sp-title {
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--sp-text) !important;
    margin: 0 0 48px !important;
}
.sp-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.sp-tag {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.36px;
    text-transform: uppercase;
    color: var(--zd-color-primary) !important;
    background: var(--zd-color-brand-bg-tertiary);
    border: 1px solid var(--zd-color-brand-bg-secondary);
    border-radius: 999px;
    margin-bottom: 12px;
}
.sp-grid {
    display: grid;
    gap: 24px;
}
.sp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-col h3 {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--sp-text) !important;
    margin: 0 0 24px !important;
}
.sp-col p {
    font-size: 16px !important;
    line-height: 26px !important;
    color: var(--sp-muted) !important;
}
.sp-actions {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

/* 1. Hero : degrade repris des coordonnees du linearGradient Figma
   (0% / 60% / 100% exactement de coin a coin a 118deg en desktop). */
.sp-hero {
    display: flex;
    align-items: center;
    min-height: 710px; /* retour designer : -10px */
    padding: 80px 0;
    background: linear-gradient(118deg, #1A1A2E 0%, #2D2B55 60%, var(--zd-color-primary) 100%);
    text-align: center;
}
.sp-hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sp-hero h1 {
    font-size: 64px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #fff !important;
    margin: 0 0 24px !important;
}
.sp-hero p {
    max-width: 530px;
    font-size: 18px !important;
    line-height: 1.4 !important;
    color: #fff !important;
    margin-bottom: 24px;
}

/* 2. Value : icones Phosphor (regular) en 48px comme la maquette, sans
   fond visible (la pastille DS a la meme teinte que la carte). */
.sp-value .zd-feature-card__icon .zd-icon {
    width: 48px;
    height: 48px;
}

/* Retours a la ligne des titres calques sur la maquette (largeurs EN
   mesurees : ex. "Everything buyers need to" = 515px, "...to trust" = 617px). */
.sp-value .sp-title { max-width: 520px; }
.sp-trust .sp-title { max-width: 490px; }
.sp-tools .sp-title { max-width: 430px; }

/* 3. How it works */
.sp-how-grid {
    display: grid;
    grid-template-columns: 461px minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}
.sp-how-img {
    width: 100%;
    height: 528px;
    object-fit: cover;
    border-radius: 8px;
}
.sp-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sp-step {
    display: flex;
    gap: 24px;
    position: relative;
    padding-bottom: 48px;
}
.sp-step:last-child {
    padding-bottom: 0;
}
.sp-step-num {
    width: 47px;
    height: 47px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--zd-color-primary);
    background: #fff;
    color: var(--sp-text) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.sp-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 23px;
    top: 47px;
    bottom: 0;
    width: 1px;
    background: var(--zd-color-primary);
}
.sp-step-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: var(--sp-text) !important;
    margin-bottom: 8px !important;
}
.sp-step-desc {
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: var(--sp-muted) !important;
}

/* 4-5. Trust / Tools : vitrines a onglets (partial _supplier-showcase),
   maquette Onboarding du 08/10 17h45 : titre aligne a gauche, colonne de
   360px (onglets verticaux + bouton), capture a droite (816px a 1440)
   dont la hauteur suit la colonne. Onglet actif : fond #FFF7F3 + filet
   orange 4px a gauche (deborde de 4px a gauche de la colonne, comme sur
   la maquette). Cadre : rayon 8, filet #DFDFDF, ombre 0 14 30 -4. */
.sp-head--start {
    align-items: flex-start;
    text-align: left;
}
.sp-showcase {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}
.sp-showcase__side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.sp-shot-tabs {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: calc(100% + 4px);
    margin-left: -4px;
}
.sp-shot-tab {
    padding: 12px 16px;
    border-left: 4px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .2s, border-color .2s;
}
.sp-shot-tab:not(.is-active):hover { background: var(--zd-color-bg-secondary); }
.sp-shot-tab.is-active {
    background: var(--zd-color-brand-bg-tertiary);
    border-left-color: var(--zd-color-primary);
}
.sp-shot-tab:focus { outline: none; }
.sp-shot-tab:focus-visible {
    outline: 2px solid var(--zd-color-border-focus, var(--zd-color-primary));
    outline-offset: 2px;
}
.sp-shot-tab h3 {
    margin: 0 0 8px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--sp-text) !important;
}
.sp-shot-tab p {
    font-size: 16px !important;
    line-height: 26px !important;
    color: var(--sp-muted) !important;
}
.sp-showcase__cta { margin-top: 48px; } /* retour designer 08/10 : 16 -> 48 */

/* Visuels detoures du designer (12/10) : PNG/WebP transparents qui portent
   leurs propres ombres, ajustes et centres (object-fit: contain) dans un
   panneau gris #F5F5F5 de 816x490 (rayon 16, marge interieure 32) : variante
   "B fond gris" validee le 12/10 -- ancre le visuel et evite qu'il saute
   d'un onglet a l'autre (proportions differentes selon les captures). */
.sp-shot-frame {
    position: relative;
    align-self: start;
    background: var(--zd-color-bg-secondary);
    border-radius: 16px;
}
.sp-shot-frame--trust,
.sp-shot-frame--tools { aspect-ratio: 816 / 490; }
.sp-shot-panel {
    position: absolute;
    inset: 32px;
    animation: spShotIn .3s ease;
}
.sp-shot-panel[hidden] { display: none; }
.sp-shot-panel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
@keyframes spShotIn { from { opacity: 0; } to { opacity: 1; } }
.sp-shot-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100%;
    padding: 24px;
    text-align: center;
}
.sp-shot-placeholder__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: var(--zd-color-brand-bg-secondary);
    color: var(--zd-color-primary);
}
.sp-shot-placeholder__icon .zd-icon { width: 36px; height: 36px; }
.sp-shot-placeholder__label {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--sp-text) !important;
}

/* Tablette et mobile (pas de maquette dediee) : capture au-dessus, puis la
   liste d'onglets et le bouton */
@media (max-width: 991.98px) {
    .sp-showcase { grid-template-columns: minmax(0, 1fr); }
    .sp-shot-frame { order: -1; }
    .sp-shot-panel { inset: 16px; }
}

/* 6. Support : bloc teinte pleine largeur, coins hauts arrondis */
.sp-support {
    background: var(--zd-color-brand-bg-tertiary);
    border-radius: 50px 50px 0 0;
}
.sp-support .sp-title {
    margin-bottom: 12px !important;
}
.sp-support-intro {
    max-width: 560px;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--sp-text) !important;
    margin-bottom: 48px !important;
}
.sp-support-photo {
    display: block;
    width: 100%;
    height: 224px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 24px;
}

/* 7. CTA final */
.sp-footer-cta {
    background: var(--sp-navy);
    text-align: center;
}
.sp-footer-cta .sp-title {
    font-size: 48px !important;
    color: #fff !important;
}
.sp-cta-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    padding: 0;
    margin: 0 0 48px;
}
/* Trait blanc 4px de centre a centre, masque par les pastilles */
.sp-cta-steps::before {
    content: '';
    position: absolute;
    top: 22px;
    left: calc(100% / 6);
    right: calc(100% / 6);
    height: 4px;
    background: #fff;
}
.sp-cta-step {
    position: relative;
    z-index: 1;
}
.sp-cta-num {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: var(--sp-text) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}
.sp-cta-step p {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: var(--zd-color-brand-bg-secondary) !important;
}
.sp-cta-step:first-child p {
    color: #fff !important;
}
@media (min-width: 1280px) {
    /* Maquette : colonnes de 416px (centres a 184/600/1016 sur 1200) */
    .sp-cta-steps {
        grid-template-columns: repeat(3, 416px);
        justify-content: center;
    }
}

/* 8. FAQ */
.sp-faq .zd-accordion-header {
    font-size: 18px;
    line-height: 1.4;
}
.sp-faq .zd-accordion-icon {
    width: 20px;
    height: 20px;
}
.sp-faq .accordion-body {
    font-size: 16px;
    line-height: 22px;
    color: var(--sp-text);
}
.sp-faq-banner {
    background: #EEF6FE;
    border-radius: 8px;
    padding: 48px 24px;
    text-align: center;
    margin-top: 48px;
}
.sp-faq-banner h3 {
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--sp-text) !important;
    margin: 0 0 24px !important;
}

/* Tablette : colonnes repliees avant le mobile */
@media (max-width: 991.98px) {
    .sp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-how-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Mobile (maquette 393px) */
@media (max-width: 767.98px) {
    .sp-section { padding: 48px 0; }
    .sp-title {
        font-size: 24px !important;
        margin-bottom: 24px !important;
    }
    .sp-grid,
    .sp-grid--3,
    .sp-grid--4 { grid-template-columns: minmax(0, 1fr); }
    .sp-value .sp-title { max-width: 320px; }
    .sp-trust .sp-title { max-width: 295px; }
    .sp-tools .sp-title { max-width: 260px; }
    .sp-col h3 {
        font-size: 20px !important;
        margin-bottom: 12px !important;
    }
    .sp-actions { margin-top: 24px; }

    .sp-hero {
        min-height: 518px;
        padding: 48px 0;
        background: linear-gradient(101deg, #1A1A2E 0%, #2D2B55 60%, var(--zd-color-primary) 100%);
    }
    .sp-hero h1 {
        font-size: 32px !important;
        margin-bottom: 16px !important;
    }
    .sp-hero p {
        font-size: 16px !important;
        margin-bottom: 16px;
    }
    /* Bouton hero : gabarit md en mobile (213x46 sur la maquette) */
    .sp-hero .zd-button,
    .sp-footer-cta .zd-button {
        --zd-button-px: 20px;
        --zd-button-py: 12px;
        --zd-button-gap: 8px;
        --zd-button-fs: 16px;
        --zd-button-lh: 1.4;
        --zd-button-icon-size: 20px;
    }

    .sp-value-cards { gap: 16px; }
    .sp-value .zd-feature-card {
        padding: 16px;
        gap: 16px;
    }
    .sp-value .zd-feature-card--md .zd-feature-card__title { font-size: 20px; }

    .sp-how-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }
    .sp-how-img { height: 396px; }
    .sp-step { padding-bottom: 24px; }
    .sp-step-title {
        font-size: 18px !important;
        font-weight: 700 !important;
    }

    .sp-shot-placeholder { gap: 8px; }
    .sp-shot-placeholder__icon { width: 48px; height: 48px; border-radius: 12px; }
    .sp-shot-placeholder__icon .zd-icon { width: 24px; height: 24px; }
    .sp-shot-placeholder__label { font-size: 14px !important; }

    .sp-support { border-radius: 25px 25px 0 0; }
    .sp-support-intro { margin-bottom: 24px !important; }
    .sp-support-photo { margin-bottom: 16px; }
    .sp-support-card h3 { margin-bottom: 20px !important; }

    .sp-footer-cta .sp-title { font-size: 24px !important; margin-bottom: 48px !important; }
    .sp-cta-steps { margin: 0 -16px 48px; }
    .sp-cta-step p {
        max-width: 90px;
        margin: 0 auto;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
    }

    .sp-faq .sp-title { margin-bottom: 32px !important; }
    .sp-faq-banner { margin-top: 32px; }
    .sp-faq-banner h3 { font-size: 24px !important; }
}

/* ---- product/search_product.blade.php (fragment AJAX autocomplete) ---- */
/* .form-control/.input-box etaient morts dans ce fragment (aucun element ne les utilise ici) : non repris, cf memoire */
.search-results-card {
    background-color: #fff;
    padding: 15px;
    border: none;
}
.search-results-card .list {
    padding-top: 20px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
}
.search-results-card .border-bottom {
    border-bottom: 2px solid #eee;
}
.search-results-card .list i {
    font-size: 19px;
    color: red;
}
.search-results-card .list small {
    color: #dedddd;
}

/* ============================================================
   ZD FIGMA BUTTON SYSTEM — composant boutons (Figma "Button Tokens")
   Étend .btn Bootstrap plutôt que de le remplacer : garder
   class="btn zd-button zd-button--primary zd-button--sm" sur le markup.
   Nommé "zd-button" (pas "zd-btn") : la classe "zd-btn" existe déjà
   (style "MGX button" hérité, ligne ~9057, utilisé sur product-card-cta,
   mobile-cta-bar, about-actions, minicart-footer, shop-filters...) —
   collision découverte le 2026-08-20 après un premier essai avec le nom
   "zd-btn" qui avait cassé tous ces boutons existants (padding/gap/etc.
   dépendaient de variables --zd-btn-* jamais définies pour eux, donc
   réduites à 0) et causé le "saut" au hover (transform du vieux
   .zd-btn:hover hérité malgré nous).
   États : hover/focus-visible/disabled natifs ; "selected" via
   .active ou [aria-pressed="true"] (mécanisme Bootstrap existant).
   Placé en toute fin de fichier (pas avec les autres tokens/
   composants ZD en tête de fichier) : le thème "Nest" d'origine
   a plusieurs règles génériques `.btn`/`.btn:hover` non scopées
   plus loin dans le fichier (ex. `.btn:hover{background:#FDC040}`
   ligne ~1027) qui gagnaient sinon à spécificité égale par ordre
   de cascade.
   ============================================================ */
.zd-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--zd-button-gap);
    padding: var(--zd-button-py) var(--zd-button-px);
    border-radius: var(--zd-button-radius);
    border-width: 1px;
    border-style: solid;
    font-family: "Inter", sans-serif;
    font-size: var(--zd-button-fs);
    line-height: var(--zd-button-lh);
    font-weight: var(--zd-button-fw);
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* `button[type='submit']` (~ligne 863) a une spécificité element+attribut
   supérieure à la simple classe .zd-button ci-dessus et lui vole
   font-size/font-weight/padding sur tout <button type="submit">. On
   neutralise avec un sélecteur element+classe de spécificité égale,
   qui gagne ici grâce à sa position en fin de fichier. */
button.zd-button {
    font-size: var(--zd-button-fs);
    font-weight: var(--zd-button-fw);
    padding: var(--zd-button-py) var(--zd-button-px);
}
.zd-button .zd-icon {
    width: var(--zd-button-icon-size);
    height: var(--zd-button-icon-size);
}
.zd-button--icon-only {
    padding: var(--zd-button-full-pad);
    gap: 0;
}
.zd-button--pill { border-radius: 999px; }

/* Tailles — valeurs "Button Tokens" (Small/Medium/Large) */
.zd-button--sm {
    --zd-button-radius: var(--zd-radius-md);
    --zd-button-px: 16px;
    --zd-button-py: 8px;
    --zd-button-full-pad: 8px;
    --zd-button-gap: 4px;
    --zd-button-fs: 14px;
    --zd-button-lh: 1.4;
    --zd-button-fw: 600;
    --zd-button-icon-size: 20px;
}
.zd-button--md {
    --zd-button-radius: var(--zd-radius-md);
    --zd-button-px: 20px;
    --zd-button-py: 12px;
    --zd-button-full-pad: 12px;
    --zd-button-gap: 8px;
    --zd-button-fs: 16px;
    --zd-button-lh: 1.4;
    --zd-button-fw: 600;
    --zd-button-icon-size: 22px;
}
.zd-button--lg {
    --zd-button-radius: var(--zd-radius-lg);
    --zd-button-px: 24px;
    --zd-button-py: 16px;
    --zd-button-full-pad: 16px;
    --zd-button-gap: 12px;
    --zd-button-fs: 20px;
    --zd-button-lh: 1.2;
    --zd-button-fw: 600;
    --zd-button-icon-size: 24px;
}

/* Variante primary */
.zd-button--primary {
    background: var(--zd-color-primary);
    border-color: var(--zd-color-primary);
    color: #fff;
}
.zd-button--primary:hover {
    background: var(--zd-color-primary-hover);
    border-color: var(--zd-color-primary-hover);
    color: #fff;
}
.zd-button--primary:focus,
.zd-button--primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--zd-color-border-focus) !important;
}
.zd-button--primary.active,
.zd-button--primary[aria-pressed="true"] {
    background: var(--zd-color-primary-active);
    border-color: var(--zd-color-primary-active);
    color: #fff;
}
/* Etat disabled unifie pour les 3 variantes (primary/secondary/danger) :
   une seule regle partagee plutot que des copies, pour qu'il soit
   impossible qu'elles divergent -- meme correctif que le backoffice
   (public/backoffice/assets/css/main.css), fond #E8E8EE mesure sur le
   rect vectoriel de la maquette Figma ProductEditCreation/4-Drawer
   batch edit (2-steps).svg (aucun token existant ne correspond),
   texte sur --zd-color-text-disabled (pas --zd-color-text-tertiary,
   utilise par erreur avant). */
.zd-button--primary:disabled,
.zd-button--primary.disabled,
.zd-button--secondary:disabled,
.zd-button--secondary.disabled,
.zd-button--danger:disabled,
.zd-button--danger.disabled {
    background: #E8E8EE;
    border-color: #E8E8EE;
    color: var(--zd-color-text-disabled);
    opacity: 1;
    cursor: not-allowed;
}

/* Variante secondary (outline) */
.zd-button--secondary {
    background: #fff;
    border-color: var(--zd-color-text-dark);
    color: var(--zd-color-text-dark);
}
.zd-button--secondary:hover {
    background: var(--zd-color-bg-secondary);
    border-color: var(--zd-color-text-dark);
    color: var(--zd-color-text-dark);
}
/* Focus : 2e pixel de bordure dessine a l'INTERIEUR (box-shadow inset) au lieu
   de passer border-width a 2px, qui agrandissait le bouton et decalait l'UI
   (retour designer 2026-10-05). */
.zd-button--secondary:focus,
.zd-button--secondary:focus-visible {
    outline: none;
    border-color: var(--zd-color-text-dark);
    box-shadow: inset 0 0 0 1px var(--zd-color-text-dark) !important;
}
.zd-button--secondary.active,
.zd-button--secondary[aria-pressed="true"] {
    background: var(--zd-color-brand-bg-tertiary);
}

/* Variante danger (actions destructrices : rejeter/annuler/supprimer) */
.zd-button--danger {
    background: #fff;
    border-color: var(--zd-color-error);
    color: var(--zd-color-error);
}
.zd-button--danger:hover {
    background: var(--zd-color-error-bg);
    border-color: var(--zd-color-error);
    color: var(--zd-color-error);
}
.zd-button--danger:focus,
.zd-button--danger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--zd-color-border-focus) !important;
}
.zd-button--danger.active,
.zd-button--danger[aria-pressed="true"] {
    background: var(--zd-color-error-bg);
    border-color: var(--zd-color-error);
    color: var(--zd-color-error);
}
/* ============================================================
   ZD TEXT BUTTON — composant bouton texte (Figma "Text Button Tokens",
   2026-08-31). Meme logique que .zd-button juste au-dessus (etend .btn
   Bootstrap, classes zd-text-button zd-text-button--{primary|secondary}
   zd-text-button--{sm|md|lg}) mais sans cadre ni fond au repos : pour
   les actions secondaires/tertiaires (lien d'action, "voir plus",
   annuler dans un contexte deja encadre...). Pas de variante danger ni
   pill/icon-only : la maquette Figma ne definit que Type/Size/Icon
   (none|left|right). Le fond au survol/selection (tokens brand-bg-secondary,
   brand-bg-tertiary, bg-secondary, bg-tertiary, memes valeurs que .zd-button--secondary)
   n'est pas dans la maquette (qui ne montre que l'etat par defaut) --
   ajoute par coherence avec l'affordance deja utilisee sur .zd-ico.
   ============================================================ */
.zd-text-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--zd-tb-gap);
    padding: var(--zd-tb-py) var(--zd-tb-px);
    border-radius: var(--zd-tb-radius);
    border: none;
    background: transparent;
    font-family: "Inter", sans-serif;
    font-size: var(--zd-tb-fs);
    line-height: var(--zd-tb-lh);
    font-weight: var(--zd-tb-fw);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
button.zd-text-button {
    font-size: var(--zd-tb-fs);
    font-weight: var(--zd-tb-fw);
    padding: var(--zd-tb-py) var(--zd-tb-px);
}
.zd-text-button .zd-icon {
    width: var(--zd-tb-icon-size);
    height: var(--zd-tb-icon-size);
}

/* Tailles — "Text Button Tokens" (Small/Medium/Large) */
.zd-text-button--sm {
    --zd-tb-radius: var(--zd-radius-md);
    --zd-tb-px: 8px;
    --zd-tb-py: 6px;
    --zd-tb-gap: 4px;
    --zd-tb-fs: 14px;
    --zd-tb-lh: 1.4;
    --zd-tb-fw: 600;
    --zd-tb-icon-size: 20px;
}
.zd-text-button--md {
    --zd-tb-radius: var(--zd-radius-md);
    --zd-tb-px: 12px;
    --zd-tb-py: 8px;
    --zd-tb-gap: 8px;
    --zd-tb-fs: 16px;
    --zd-tb-lh: 1.4;
    --zd-tb-fw: 600;
    --zd-tb-icon-size: 22px;
}
.zd-text-button--lg {
    --zd-tb-radius: var(--zd-radius-lg);
    --zd-tb-px: 16px;
    --zd-tb-py: 10px;
    --zd-tb-gap: 12px;
    --zd-tb-fs: 20px;
    --zd-tb-lh: 1.2;
    --zd-tb-fw: 600;
    --zd-tb-icon-size: 24px;
}

/* Variante primary */
.zd-text-button--primary {
    color: var(--zd-color-primary);
}
.zd-text-button--primary:hover {
    background: var(--zd-color-brand-bg-tertiary);
    color: var(--zd-color-primary-hover);
}
.zd-text-button--primary:focus,
.zd-text-button--primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--zd-color-border-focus) !important;
}
.zd-text-button--primary.active,
.zd-text-button--primary[aria-pressed="true"] {
    background: var(--zd-color-brand-bg-secondary);
    color: var(--zd-color-primary-active);
}
.zd-text-button--primary:disabled,
.zd-text-button--primary.disabled {
    color: var(--zd-color-text-disabled);
    background: transparent;
    cursor: not-allowed;
}

/* Variante secondary */
.zd-text-button--secondary {
    color: var(--zd-color-text-dark);
}
.zd-text-button--secondary:hover {
    background: var(--zd-color-bg-secondary);
    color: var(--zd-color-text-dark);
}
.zd-text-button--secondary:focus,
.zd-text-button--secondary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--zd-color-border-focus) !important;
}
.zd-text-button--secondary.active,
.zd-text-button--secondary[aria-pressed="true"] {
    background: var(--zd-color-bg-tertiary);
}
.zd-text-button--secondary:disabled,
.zd-text-button--secondary.disabled {
    color: var(--zd-color-text-disabled);
    background: transparent;
    cursor: not-allowed;
}

/* ============================================================
   ZD CONTROL — checkbox/radio/switch (Figma "Control", 2026-08-31).
   Pas de table de tokens Small/Medium/Large sur cette maquette (une
   seule taille de chaque). Entierement autonome (appearance:none +
   dessin par CSS pur, pas de background-image Bootstrap) car le
   frontend ne charge pas Bootstrap CSS (contrairement au backoffice,
   cf. equivalent backoffice) -- meme rendu garanti dans les deux
   contextes. A poser directement sur l'<input>, pas de wrapper requis
   (le gap avec le <label> est a la charge de la page, cf. demo).
   Coins carres (radius 0) sur la case a cocher : verifie dans le SVG
   source (trace en lignes droites, aucune courbe aux angles) --
   choix deliberement carre du designer, pas un oubli.
   ============================================================ */
.zd-checkbox,
.zd-radio {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1px solid var(--zd-color-primary);
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
/* [type=...] partout ci-dessous : Bootstrap est charge sur le front via
   @import (main.css -> vendors/bootstrap.min.css, decouvert le
   2026-08-31 -- un bug reel de coins arrondis avait ete signale, la
   fausse hypothese initiale etait "pas de Bootstrap cote front").
   Bootstrap qualifie plusieurs de ses regles .form-check-input avec
   [type=checkbox]/[type=radio], ce qui leur donne une specificite
   superieure a nos classes seules (ex: .form-check-input[type=checkbox]
   { border-radius:.25em } bat .zd-checkbox { border-radius:0 }). On
   egalise la specificite en ajoutant le meme attribut partout -- a
   specificite egale notre regle gagne car chargee apres Bootstrap. */
/* float:none/vertical-align ici (pas dans la regle de base au-dessus) :
   Bootstrap a une regle SEPAREE ".form-check .form-check-input" (2
   classes, specificite 0-2-0) qui pose float:left -- plus specifique
   que ".zd-checkbox" seul (0-1-0). Le qualificatif [type=...] ci-dessous
   egalise a 0-2-0, notre regle chargee apres Bootstrap gagne la
   cascade (bug reel : checkbox et label desalignes verticalement dans
   un contexte .form-check, trouve le 2026-08-31). */
.zd-checkbox[type="checkbox"] { border-radius: 0; float: none; vertical-align: middle; margin: 0; }
.zd-radio[type="radio"] { border-radius: 50%; float: none; vertical-align: middle; margin: 0; }
/* Bootstrap .form-check reserve un padding-left (1.5em) pour laisser
   la place au float retire ci-dessus -- devenu un decalage visuel
   inutile une fois le float neutralise (trouve le 2026-08-31 sur
   product_details.blade.php, juste apres le fix float/margin). */
.form-check:has(> .zd-checkbox),
.form-check:has(> .zd-radio) {
    padding-left: 0;
}

.zd-checkbox[type="checkbox"]:checked,
.zd-checkbox[type="checkbox"]:indeterminate {
    background-color: var(--zd-color-primary);
    border-color: var(--zd-color-primary);
}
.zd-checkbox[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6.585 9.061L4.464 6.939L3.05 8.353L6.585 11.889L12.949 5.525L11.535 4.111Z'/%3E%3C/svg%3E");
}
.zd-checkbox[type="checkbox"]:indeterminate {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='4' y='7' width='8' height='2' fill='white'/%3E%3C/svg%3E");
}
.zd-radio[type="radio"]:checked {
    border-color: var(--zd-color-primary);
    background-color: #fff;
    background-image: radial-gradient(circle, var(--zd-color-primary) 4px, transparent 4px);
}

/* Pas d'anneau gris au clic (retour designer 2026-10-05) ; conserve a la
   navigation clavier (:focus-visible), seul indicateur de focus puisque la
   bordure est deja orange au repos. */
.zd-checkbox[type="checkbox"]:focus,
.zd-radio[type="radio"]:focus {
    outline: none;
    border-color: var(--zd-color-primary);
    box-shadow: none;
}
.zd-checkbox[type="checkbox"]:focus-visible,
.zd-radio[type="radio"]:focus-visible {
    box-shadow: 0 0 0 2px var(--zd-color-border-focus);
}
.zd-checkbox[type="checkbox"]:active,
.zd-radio[type="radio"]:active {
    filter: none;
}

.zd-checkbox[type="checkbox"]:disabled,
.zd-radio[type="radio"]:disabled {
    border-color: var(--zd-color-text-disabled);
    cursor: not-allowed;
    opacity: 1;
    filter: none;
}
.zd-checkbox[type="checkbox"]:disabled:checked,
.zd-checkbox[type="checkbox"]:disabled:indeterminate {
    background-color: var(--zd-color-text-disabled);
    border-color: var(--zd-color-text-disabled);
}
.zd-radio[type="radio"]:disabled:checked {
    border-color: var(--zd-color-text-disabled);
    background-color: #fff;
    background-image: radial-gradient(circle, var(--zd-color-text-disabled) 4px, transparent 4px);
}

.zd-switch {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    flex-shrink: 0;
    width: 32px;
    height: 16px;
    border: none;
    border-radius: 8px;
    background-color: var(--zd-color-text-disabled);
    background-image: radial-gradient(circle, #fff 6px, transparent 6px);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: left center;
    cursor: pointer;
    transition: background-color .15s ease, background-position .15s ease;
}
.zd-switch:checked {
    background-color: var(--zd-color-primary);
    background-position: right center;
}
.zd-switch:disabled {
    cursor: not-allowed;
    background-color: var(--zd-color-text-disabled);
    background-image: radial-gradient(circle, var(--zd-color-text-tertiary) 6px, transparent 6px);
}

/* Contextes carte : le CTA doit occuper toute la largeur disponible
   (remplace les anciens réglages ponctuels par breakpoint sur .zd-btn,
   ~lignes 3609 et 11395, désormais orphelins pour ce bouton précis) */
.product-card-cta .zd-button {
    width: 100%;
}

/* ============================================================
   ZD ONBOARDING (become/vendorv2) — maquette Figma
   __maquettes/SupplierAccountCreation (desktop 1440 : colonne 588px ;
   mobile 393 : gouttiere 16px), refonte 2026-10-05. Scope .zd-ob-wrap.
   Champs = composant global .zd-input (md en desktop, gabarit sm en
   mobile), boutons = .zd-button, cases = .zd-checkbox.
   ============================================================ */
.zd-ob-wrap {
    padding: 54px 0 48px;
}
body:has(.zd-ob-wrap) { background: var(--zd-color-bg-secondary, #F5F5F5) !important; }

.zd-ob-container { max-width: 620px; margin: 0 auto; padding: 0 16px; }

.zd-ob-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--zd-color-heading) !important;
    text-align: center;
    margin: 0 0 24px !important;
}

/* Stepper : carte blanche a 3 onglets (icone + libelle), souligne orange
   sous l'etape active, chevrons entre les onglets */
.zd-ob-steps {
    display: flex;
    align-items: stretch;
    height: 66px;
    margin: 0 0 12px;
    padding: 0 12px;
    list-style: none;
    background: #fff;
    border-radius: 8px;
}
.zd-ob-steps__tab {
    position: relative;
    flex: 0 0 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--zd-color-text-secondary);
}
.zd-ob-steps__tab .zd-icon {
    width: 20px;
    height: 20px;
    color: var(--zd-color-heading);
}
.zd-ob-steps__tab.is-active { color: var(--zd-color-heading); }
.zd-ob-steps__tab.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--zd-color-primary);
}
.zd-ob-steps__sep {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zd-ob-steps__sep .zd-icon {
    width: 24px;
    height: 24px;
    color: var(--zd-color-heading);
}

/* Bandeau d'information (bleu) */
.zd-ob-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 24px;
    padding: 15px;
    background: #EEF6FE;
    border: 1px solid #0167CC;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    color: var(--zd-color-text-secondary);
}
.zd-ob-info > .zd-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #0167CC;
}
.zd-ob-info__text { margin: 0; }
.zd-ob-info__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.zd-ob-info__list li { font-weight: 600; }
.zd-ob-info__list li::before { content: "\2022\a0"; }

/* Cartes et champs */
.zd-ob-card {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}
.zd-ob-card__title {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--zd-color-heading) !important;
    margin: 0 !important;
}
.zd-ob-field { margin-top: 16px; }
.zd-ob-field > * + * { margin-top: 8px; }
.zd-ob-label {
    display: block;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--zd-color-heading);
}
.zd-ob-wrap .req { color: #CB444A; }
.zd-ob-hint {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--zd-color-text-secondary);
}
.zd-ob-docs-intro { margin-top: 8px; }

/* Selects : chevron du composant (pas la fleche Bootstrap), placeholder
   grise tant que rien n'est choisi, ville/district desactives restent
   blancs comme sur la maquette */
.zd-ob-wrap select.zd-input {
    background-image: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.zd-ob-wrap select.zd-input.is-empty { color: var(--zd-color-text-disabled); }
.zd-ob-wrap select.zd-input option { color: var(--zd-color-text-dark); }
.zd-ob-wrap select.zd-input:disabled {
    background: #fff;
    color: var(--zd-color-text-disabled);
}
.zd-ob-wrap .zd-input-wrap .zd-input-icon--end { color: var(--zd-color-heading); }
.zd-ob-address {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* Telephone : chevron (indicatif) + "+86" fixes devant la saisie */
.zd-ob-phone .zd-input { padding-left: 81px; }
.zd-ob-phone .zd-input-icon--start {
    left: 16px;
    width: 16px;
    height: 16px;
    color: var(--zd-color-heading);
}
.zd-ob-phone__prefix {
    position: absolute;
    left: 46px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    line-height: 1.4;
    color: var(--zd-color-text-dark);
    pointer-events: none;
}
.zd-ob-phone .zd-input:placeholder-shown + .zd-ob-phone__prefix { color: var(--zd-color-text-disabled); }

/* Mot de passe : oeil dans le champ */
.zd-ob-pw-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    color: var(--zd-color-text-secondary);
    cursor: pointer;
}
.zd-ob-pw-toggle:hover { color: var(--zd-color-heading); }
.zd-ob-pw-toggle .zd-icon { width: 20px; height: 20px; }

/* Cases a cocher (adresse identique, consentement) */
.zd-ob-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 0;
    margin: 16px 0 0;
    padding-left: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--zd-color-text-dark);
}
.zd-ob-check .form-check-input {
    float: none;
    flex-shrink: 0;
    margin: 2px 0 0;
}
.zd-ob-check .form-check-label { cursor: pointer; }
.zd-ob-check label.error { flex-basis: 100%; }
/* Mention d'acceptation (texte simple, maquette) puis case CGU */
.zd-ob-consent-note {
    max-width: 540px;
    margin: 24px auto 0;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    color: var(--zd-color-text-dark);
}
.zd-ob-consent {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 540px;
    margin: 16px auto 0;
}
.zd-ob-consent .form-check-label { flex: 1 1 0; }

/* Uploads : tuiles 64px (Dropzone, envoi groupe a la soumission) */
.zd-ob-uploads {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.zd-ob-upload {
    position: relative;
    width: 64px;
    height: 64px;
}
.zd-ob-upload .dz-message { margin: 0; height: 100%; }
.zd-ob-upload .dz-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 1px solid var(--zd-color-border-default);
    border-radius: 8px;
    background: #F2F4F8;
    font-size: 12px;
    line-height: 1.2;
    color: var(--zd-color-text-secondary);
    cursor: pointer;
}
.zd-ob-upload .dz-button:hover { border-color: var(--zd-color-text-secondary); }
.zd-ob-upload .dz-button .zd-icon { width: 20px; height: 20px; }
.zd-ob-upload.dz-started .dz-message { display: none; }
.zd-ob-upload__thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background: #F5F5F5;
}
.zd-ob-upload__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.zd-ob-upload__remove {
    position: absolute;
    top: -7px;
    right: -7px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--zd-color-heading);
    color: #fff;
    cursor: pointer;
}
.zd-ob-upload__remove .zd-icon { width: 10px; height: 10px; }

/* Boutons de navigation, alignes a droite */
.zd-ob-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 24px;
}

/* Etapes : une seule visible, sauf Review (3) qui reaffiche les cartes
   des etapes 1 et 2 (modifiables, sans aides ni boutons propres) */
#zd-ob-forms .js-ob-step { display: none; }
#zd-ob-forms.is-step-1 .js-ob-step[data-step="1"],
#zd-ob-forms.is-step-2 .js-ob-step[data-step="2"],
#zd-ob-forms.is-step-3 .js-ob-step { display: block; }
#zd-ob-forms.is-step-3 .js-ob-step:not([data-step="3"]) .zd-ob-actions,
#zd-ob-forms.is-step-3 .zd-ob-hint:not(.zd-ob-hint--keep),
#zd-ob-forms.is-step-3 .zd-ob-upload.dz-started .dz-message { display: none; }

/* Erreurs de validation */
.zd-ob-wrap label.error {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--zd-color-error);
}
.zd-ob-wrap .zd-input.error { border-color: var(--zd-color-error); }
.zd-ob-wrap .zd-terms-link { color: var(--zd-color-primary); text-decoration: underline; }
.zd-ob-wrap .zd-terms-link:hover { color: var(--zd-color-primary-hover); }

/* Succes : carte dans la page (remplace le parcours) */
.zd-ob-success {
    padding: 48px;
    background: #fff;
    border: 1px solid #DFDFDF;
    border-radius: 8px;
    text-align: center;
}
.zd-ob-success__icon {
    width: 48px;
    height: 48px;
    color: #0D812F;
}
.zd-ob-success__title {
    margin: 12px 0 0 !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: var(--zd-color-heading) !important;
}
.zd-ob-success__body {
    margin: 32px 0;
    text-align: left;
    font-size: 16px;
    line-height: 22px;
    color: var(--zd-color-text-dark);
}
.zd-ob-success__body p { margin: 0; }
.zd-ob-success__body p + p { margin-top: 22px; }

/* Mobile (maquette 393px) */
@media (max-width: 767.98px) {
    .zd-ob-wrap { padding-top: 24px; }
    .zd-ob-title { font-size: 20px !important; }
    .zd-ob-steps { height: 64px; }
    .zd-ob-steps__tab { flex-basis: 74px; font-size: 14px; }
    .zd-ob-wrap .zd-input--md {
        --zd-input-py: 8px;
        --zd-input-fs: 14px;
        --zd-input-icon-size: 20px;
    }
    .zd-ob-address { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .zd-ob-phone .zd-input { padding-left: 74px; }
    .zd-ob-phone__prefix { left: 44px; font-size: 14px; }
    .zd-ob-success { padding: 48px 16px; }
}

/* ===== LOADING OVERLAY ===== */
#zd-loading {
    position: fixed; inset: 0; background: rgba(245,245,245,.92);
    z-index: 9999; display: none; flex-direction: column;
    align-items: center; justify-content: center; gap: 16px;
}
#zd-loading.show { display: flex; }
.zd-spinner { width: 48px; height: 48px; border: 4px solid #dde3ea; border-top-color: var(--zd-color-primary); border-radius: 50%; animation: zd-spin .8s linear infinite; }
@keyframes zd-spin { to { transform: rotate(360deg); } }
.zd-loading-msg { font-size: 15px; color: var(--zd-color-heading); font-weight: 500; }

/* Toast */
#zd-toast-wrap { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 99999; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.zd-toast { display: flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 8px; font-size: 13.5px; font-weight: 500; min-width: 280px; max-width: 480px; box-shadow: 0 4px 20px rgba(0,0,0,.13); pointer-events: auto; animation: zdToastIn .25s ease; }
.zd-toast.warning { background: #fff3cd; border: 1px solid #ffe58f; color: #7d5a00; }
.zd-toast.error   { background: #fff0f0; border: 1px solid #ffb3b3; color: #b00020; }
.zd-toast i { font-size: 18px; flex-shrink: 0; }
.zd-toast-close { margin-left: auto; background: none; border: none; font-size: 18px; line-height: 1; cursor: pointer; opacity: .5; padding: 0 0 0 8px; color: inherit; }
.zd-toast-close:hover { opacity: 1; }
@keyframes zdToastIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* ============================================================
   ZD INPUT FIELDS — design system "Input Field" (maquette Figma
   __maquettes/DesignSystem/InputField.svg, 2026-08-25).
   Etend .form-control / textarea existants, ne les remplace pas :
   class="form-control zd-input" sur le markup. Etats via pseudo-
   classes natives (:focus/:disabled) + convention Bootstrap deja
   en place dans le projet (.is-invalid pour l'erreur).
   Tokens maquette "Input Field Tokens" (mise a jour 2026-08-25, S+M
   officiels) : radius 8 (S/M), h-padding 16 (S/M), v-padding 8/12,
   icon 20/22, stroke-width 1, font 14/16 -- 140% -- Regular(400).
   .zd-input seul (sans modificateur) = spec Medium (defaut le plus
   courant). Large : pas encore fourni par le designer, valeurs
   provisoires ci-dessous a remplacer des reception du vrai spec.
   ============================================================ */
.zd-input {
    display: block;
    width: 100%;
    height: auto; /* neutralise .form-control { height: 48px } (~ligne 1416) */
    padding: var(--zd-input-py, 12px) var(--zd-input-px, 16px);
    border: 1px solid var(--zd-color-border-default);
    border-radius: var(--zd-radius-md);
    background: #fff;
    font-size: var(--zd-input-fs, 16px);
    line-height: var(--zd-input-lh, 1.4);
    font-weight: var(--zd-input-fw, 400);
    color: var(--zd-color-text-dark);
    transition: border-color .15s, box-shadow .15s;
}
textarea.zd-input {
    min-height: 120px;
    resize: vertical;
}
/* Tailles : S/M = tokens officiels de la maquette (2026-08-25), calages
   sur .zd-button--sm/md confirmes par le designer (memes hauteurs :
   37.6px / 48.4px). L = PROVISOIRE (pas encore fourni, calage
   arithmetique sur .zd-button--lg en attendant). */
.zd-input--sm { --zd-input-py: 8px;  --zd-input-px: 16px; --zd-input-fs: 14px; --zd-input-lh: 1.4; --zd-input-fw: 400; --zd-input-icon-size: 20px; }
.zd-input--md { --zd-input-py: 12px; --zd-input-px: 16px; --zd-input-fs: 16px; --zd-input-lh: 1.4; --zd-input-fw: 400; --zd-input-icon-size: 22px; }
.zd-input--lg { --zd-input-py: 16px; --zd-input-px: 24px; --zd-input-fs: 20px; --zd-input-lh: 1.2; --zd-input-fw: 400; --zd-input-icon-size: 24px; } /* provisoire */
/* La fleche native du navigateur n'est retiree QUE si un icone custom la
   remplace (variante .zd-input-wrap--icon-end) -- sinon un select.zd-input
   isole (classe seule, sans wrapper) se retrouverait sans aucune indication
   visuelle de dropdown. */
.zd-input-wrap--icon-end select.zd-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.zd-input::placeholder {
    color: var(--zd-color-text-disabled);
    font-weight: inherit;
    opacity: 1;
}
/* Focus = bordure orange seule (retour designer 2026-10-05 : l'anneau gris
   #DFDFDF en plus n'etait pas voulu). */
.zd-input:focus {
    outline: none;
    border-color: var(--zd-color-primary-hover);
    box-shadow: none;
}
.zd-input.is-invalid,
.zd-input.is-invalid:focus {
    border-color: var(--zd-color-error);
    box-shadow: none;
}
.zd-input:disabled,
.zd-input[readonly] {
    background: var(--zd-color-bg-secondary);
    border-color: var(--zd-color-border-default);
    color: var(--zd-color-text-disabled);
    cursor: not-allowed;
    opacity: 1;
}

/* Icone affixee (recherche a gauche, chevron/select a droite, etc.) */
.zd-input-wrap {
    position: relative;
}
.zd-input-wrap--icon-start .zd-input { padding-left: 44px; }
.zd-input-wrap--icon-end .zd-input { padding-right: 44px; }
.zd-input-wrap .zd-input-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--zd-input-icon-size, 22px);
    height: var(--zd-input-icon-size, 22px);
    color: var(--zd-color-text-disabled);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zd-input-wrap .zd-input-icon--start { left: 12px; }
.zd-input-wrap .zd-input-icon--end { right: 12px; }

/* ============================================================
   ZD TABS — design system "Tabs" (maquette Figma
   __maquettes/DesignSystem/Tabs/Tabs.svg, 2026-08-31).
   Tokens releves sur le SVG source (mesure directe des rectangles
   de soulignement, masques par colonne Medium/Large) : H-padding 2,
   V-padding 8/12, Stroke Width (soulignement selectionne) 2/3,
   Gap entre tabs 24 (identique M/L), Font 16/20 -- 140%,
   SemiBold(600) en Medium / Regular(400) en Large (tel quel sur la
   maquette, verifie par la table "Tabs Tokens" -- pas une erreur
   de lecture malgre la ressemblance visuelle des deux tailles).
   Couleurs : defaut = --zd-color-text-secondary, selectionne =
   --zd-color-heading + soulignement --zd-color-primary, desactive
   = --zd-color-text-disabled (memes tokens que Button/Input/Control).
   Markup : <div class="zd-tabs zd-tabs--md" role="tablist"><button
   class="zd-tab" role="tab" aria-selected="true|false" type="button">
   Label</button>...</div>. Etat "disabled" via l'attribut natif
   disabled sur le <button>.
   ============================================================ */
.zd-tabs {
    display: flex;
    align-items: flex-end;
    gap: var(--zd-tabs-gap, 24px);
}
.zd-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-bottom: var(--zd-tab-stroke, 2px) solid transparent;
    padding: var(--zd-tab-py, 8px) var(--zd-tab-px, 2px);
    font-family: "Inter", sans-serif;
    font-size: var(--zd-tab-fs, 16px);
    line-height: var(--zd-tab-lh, 1.4);
    font-weight: var(--zd-tab-fw, 600);
    color: var(--zd-color-text-secondary);
    background-color: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease;
}
/* .active plutot que [aria-selected="true"] : le Tab.js de Bootstrap
   5.0.0-beta2 embarque sur ce projet (vendor_details.blade.php) gere
   correctement .active (mutuellement exclusif) mais ne remet JAMAIS
   aria-selected a "false" sur l'onglet desactive lors d'un switch (bug
   de cette version beta, corrige plus tard chez Bootstrap) -- se fier a
   aria-selected aurait fait apparaitre deux onglets "selectionnes" en
   meme temps des le premier clic. Markup consommateur : poser class="zd-tab
   active" sur l'onglet actif (Bootstrap gere la bascule automatiquement
   au clic), aria-selected reste pose pour l'accessibilite mais n'est pas
   la source de verite visuelle. */
.zd-tab.active {
    color: var(--zd-color-heading);
    border-bottom-color: var(--zd-color-primary);
}
/* outline decale plutot que box-shadow colle au texte : le H-padding tres
   serre (2px, token maquette) rendait l'anneau plein cadre inesthetique,
   surtout combine au soulignement du dessous. */
.zd-tab:focus,
.zd-tab:focus-visible {
    outline: 2px solid var(--zd-color-border-focus);
    outline-offset: 2px;
}
.zd-tab:disabled {
    color: var(--zd-color-text-disabled);
    cursor: not-allowed;
}
/* Variant hors maquette Figma (qui ne definit que le variant "Label") :
   necessaire pour les onglets drapeaux de langue (lang-tab-btn.blade.php,
   backoffice, icone seule, pas de texte) -- H-padding aligne sur le
   V-padding du token de taille plutot que le 2px tres serre prevu pour
   du texte. Miroir cote front pour coherence, meme si pas encore
   consomme ici. */
.zd-tab--icon-only {
    padding: var(--zd-tab-py, 8px);
}

/* Tailles — "Tabs Tokens" (Medium/Large) : a poser sur le conteneur
   .zd-tabs, les variables sont heritees par les .zd-tab enfants. */
.zd-tabs--md {
    --zd-tabs-gap: 24px;
    --zd-tab-py: 8px;
    --zd-tab-px: 2px;
    --zd-tab-stroke: 2px;
    --zd-tab-fs: 16px;
    --zd-tab-lh: 1.4;
    --zd-tab-fw: 600;
}
.zd-tabs--lg {
    --zd-tabs-gap: 24px;
    --zd-tab-py: 12px;
    --zd-tab-px: 2px;
    --zd-tab-stroke: 3px;
    --zd-tab-fs: 20px;
    --zd-tab-lh: 1.4;
    --zd-tab-fw: 400;
}

/* ============================================================
   ZD FILTER CHIP — design system "Filter chip" (maquette Figma
   __maquettes/DesignSystem/FilterChip/Filter chip.svg, 2026-08-31).
   Nommage .zd-filter-chip(s) et non .zd-chip : une classe .zd-chip
   preexistait deja (main.css ~ligne 10665, pastilles "recherches
   frequentes" de home_hero_search.blade.php) avec un tout autre style
   (fond blanc translucide sur hero) -- reutiliser .zd-chip aurait
   silencieusement ecrase ce widget existant (verifie par audit CSSOM,
   collision detectee avant publication).
   Tokens : radius 8 (= --zd-radius-md), spacing (gap entre chips)
   4/8 (S/M), H-padding 12, V-padding 8, dot 12, stroke 1 -- identiques
   entre S et M sauf gap et font-size (14/16, 140%). Poids : Regular
   (400) par defaut/desactive, SemiBold (600) quand selectionne (les
   deux poids figurent dans la table de tokens sans etre lies a la
   taille, deduits des 3 etats demontres).
   Couleurs (tous tokens existants, aucune nouvelle couleur globale) :
   defaut = fond blanc, bordure --zd-color-border-default, texte
   --zd-color-heading ; selectionne = fond --zd-color-brand-bg-secondary,
   bordure --zd-color-primary ; desactive = fond ET bordure
   --zd-color-border-default (fusionnees), texte --zd-color-text-disabled.
   Le point ("Dot", icone du variant Icon=left/right) reste ambre
   (--zd-filter-chip-dot-color, seule couleur non presente dans la
   palette existante) dans TOUS les etats y compris desactive -- verifie
   sur le SVG source (meme valeur hex #F59E0B repetee sur les 3 etats),
   pas une couleur "d'etat" mais un indicateur de contenu (ex: pastille
   de couleur pour un filtre "Couleur"), a surcharger via style inline
   si besoin (ex: style="--zd-filter-chip-dot-color: #2E7D32").
   Markup : <div class="zd-filter-chips zd-filter-chips--md"><button
   class="zd-filter-chip" type="button"><span class="zd-filter-chip__dot">
   </span>Label</button>...</div>. Selectionne via .active (meme
   convention que .zd-button), desactive via l'attribut natif disabled.
   ============================================================ */
.zd-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zd-filter-chip-gap, 8px);
}
.zd-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--zd-radius-md);
    border: var(--zd-filter-chip-stroke, 1px) solid var(--zd-color-border-default);
    background: #fff;
    padding: var(--zd-filter-chip-py, 8px) var(--zd-filter-chip-px, 12px);
    font-family: "Inter", sans-serif;
    font-size: var(--zd-filter-chip-fs, 14px);
    line-height: var(--zd-filter-chip-lh, 1.4);
    font-weight: 400;
    color: var(--zd-color-heading);
    background-color: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.zd-filter-chip__dot {
    display: inline-block;
    width: var(--zd-filter-chip-dot-size, 12px);
    height: var(--zd-filter-chip-dot-size, 12px);
    border-radius: 50%;
    background: var(--zd-filter-chip-dot-color, #F59E0B);
    flex-shrink: 0;
}
.zd-filter-chip:hover:not(:disabled):not(.active) {
    border-color: var(--zd-color-text-dark);
}
.zd-filter-chip.active,
.zd-filter-chip[aria-pressed="true"] {
    background: var(--zd-color-brand-bg-secondary);
    border-color: var(--zd-color-primary);
    font-weight: 600;
}
.zd-filter-chip:focus,
.zd-filter-chip:focus-visible {
    outline: 2px solid var(--zd-color-border-focus);
    outline-offset: 2px;
}
.zd-filter-chip:disabled,
.zd-filter-chip.disabled {
    background: var(--zd-color-border-default);
    border-color: var(--zd-color-border-default);
    color: var(--zd-color-text-disabled);
    cursor: not-allowed;
}

/* Tailles — "Filter Chip Tokens" (Small/Medium) : a poser sur le
   conteneur .zd-filter-chips, heritees par les .zd-filter-chip enfants. */
.zd-filter-chips--sm {
    --zd-filter-chip-gap: 4px;
    --zd-filter-chip-py: 8px;
    --zd-filter-chip-px: 12px;
    --zd-filter-chip-stroke: 1px;
    --zd-filter-chip-fs: 14px;
    --zd-filter-chip-lh: 1.4;
    --zd-filter-chip-dot-size: 12px;
}
.zd-filter-chips--md {
    --zd-filter-chip-gap: 8px;
    --zd-filter-chip-py: 8px;
    --zd-filter-chip-px: 12px;
    --zd-filter-chip-stroke: 1px;
    --zd-filter-chip-fs: 16px;
    --zd-filter-chip-lh: 1.4;
    --zd-filter-chip-dot-size: 12px;
}

/* ============================================================
   ZD SELECTION CHIP — design system "Selection chip" (maquette Figma
   __maquettes/DesignSystem/SelectionChip/Selection Chip.svg,
   2026-09-01). Contrairement a [[Filter Chip]] : une seule taille
   (pas de variante S/M dans la maquette), radius 999 (pill complet),
   police 14px/140% Regular(400) dans TOUS les etats (pas de SemiBold
   au select), et icone = vraie icone SVG (+ / x, via <x-icon>) et non
   un point de couleur -- semantique "action" (ajouter/retirer), pas
   "contenu". `resources/icons/phosphor/x.svg` cree pour ce chantier
   (n'existait pas : seul x-circle.svg existant, croix EXTRAITE de son
   path SVG pour obtenir la croix seule, meme style "thin").
   Tokens : radius 999, spacing (gap) 4, H-padding 12, V-padding 6,
   icon size 16, stroke width 1 (uniquement visible en selectionne).
   Couleurs (tokens existants) : defaut = fond --zd-color-bg-tertiary,
   texte --zd-color-heading, PAS de bordure visible (bordure
   transparente pour reserver l'espace) ; selectionne = fond
   --zd-color-brand-bg-secondary + bordure --zd-color-primary ;
   desactive = fond --zd-color-border-default, texte
   --zd-color-text-disabled.
   Markup : <div class="zd-selection-chips"><button class="zd-selection-chip"
   type="button"><x-icon name="plus"/>Label</button>...</div>. Pas de
   modificateur de taille (une seule taille dans la maquette).
   ============================================================ */
.zd-selection-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.zd-selection-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--zd-color-bg-tertiary);
    padding: 6px 12px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--zd-color-heading);
    background-color: var(--zd-color-bg-tertiary);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.zd-selection-chip .zd-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.zd-selection-chip:hover:not(:disabled):not(.active) {
    border-color: var(--zd-color-border-default);
}
.zd-selection-chip.active,
.zd-selection-chip[aria-pressed="true"] {
    background: var(--zd-color-brand-bg-secondary);
    border-color: var(--zd-color-primary);
}
.zd-selection-chip:focus,
.zd-selection-chip:focus-visible {
    outline: 2px solid var(--zd-color-border-focus);
    outline-offset: 2px;
}
.zd-selection-chip:disabled,
.zd-selection-chip.disabled {
    background: var(--zd-color-border-default);
    border-color: var(--zd-color-border-default);
    color: var(--zd-color-text-disabled);
    cursor: not-allowed;
}

/* ============================================================
   ZD FEATURE CARD — design system "Feature Card" (maquette Figma
   __maquettes/DesignSystem/FeatureCard/Feature Card.svg, 2026-09-01).
   Variantes tokenisees : Size (sm/md/lg), Alignment (left/center),
   Image (icone vs vraie image). Tokens IDENTIQUES sur les 3 tailles
   (radius 8, spacing/H-padding/V-padding 24, icon+bg 48, stroke 1) --
   verifie sur la table de tokens, ce n'est pas un oubli de lecture :
   seule la taille du titre change reellement selon Size (20px Small,
   24px Medium ET Large -- Medium/Large partagent la meme valeur).
   Description toujours 16px/140% Regular, quelle que soit la taille.
   Couleurs (tokens existants) : boite icone = fond
   --zd-color-brand-bg-secondary, icone = --zd-color-primary ; titre =
   --zd-color-heading (bold) ; description = --zd-color-text-secondary
   (regular).
   Pas de variante "State" formelle dans la table de tokens, mais la
   grille d'exemples montre plusieurs traitements de conteneur
   (bordure neutre, bordure orange, fond teinte, aucun conteneur) --
   ajoutes comme modificateurs optionnels (--outlined/--highlighted/
   --tinted), la carte de base restant sans bordure/fond par defaut.
   Markup : <div class="zd-feature-cards"><div class="zd-feature-card
   zd-feature-card--md"><span class="zd-feature-card__icon"><x-icon
   name="star"/></span><h3 class="zd-feature-card__title">Titre</h3>
   <p class="zd-feature-card__description">Texte</p></div>...</div>.
   Variante image : <img class="zd-feature-card__image" ...> a la
   place du <span class="zd-feature-card__icon">.
   ============================================================ */
.zd-feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}
.zd-feature-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 24px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
}
.zd-feature-card--center {
    align-items: center;
    text-align: center;
}
.zd-feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--zd-color-brand-bg-secondary);
    color: var(--zd-color-primary);
}
.zd-feature-card__icon .zd-icon {
    width: 24px;
    height: 24px;
}
.zd-feature-card__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}
.zd-feature-card__title {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    line-height: 1.2;
    color: var(--zd-color-heading);
    margin: 0;
}
.zd-feature-card__description {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--zd-color-text-secondary);
    margin: 0;
}

/* Tailles — "Feature Card Token" (Small/Medium/Large) : seul le titre
   change reellement de taille (20 / 24 / 24). */
.zd-feature-card--sm .zd-feature-card__title { font-size: 20px; }
.zd-feature-card--md .zd-feature-card__title,
.zd-feature-card--lg .zd-feature-card__title { font-size: 24px; }

/* Traitements de conteneur optionnels (illustres dans la maquette,
   pas une variante formelle de la table de tokens). */
.zd-feature-card--outlined { border-color: var(--zd-color-border-default); background: #fff; }
.zd-feature-card--highlighted { border-color: var(--zd-color-primary); background: #fff; }
.zd-feature-card--tinted { background: var(--zd-color-brand-bg-secondary); }

/* Traitement additionnel, hors maquette Figma : carte sur fond sombre
   (ex. section Buyer Assistance de l'accueil, image + overlay noir).
   Reprend le "verre depoli" deja utilise a cet endroit (.zd-ba-card
   d'origine) plutot que d'inventer une nouvelle esthetique. */
.zd-feature-card--on-dark {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.18);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.zd-feature-card--on-dark .zd-feature-card__icon { background: rgba(255,255,255,.18); color: #fff; }
.zd-feature-card--on-dark .zd-feature-card__title { color: #fff; }
.zd-feature-card--on-dark .zd-feature-card__description { color: rgba(255,255,255,.82); }

/* ============================================================
   ZD PRODUCT CARD — design system "Product Card" (maquette Figma
   __maquettes/DesignSystem/ProductCard/Product Card.svg, 2026-09-02).
   Variante tokenisee : CTA (bouton "Add to quote" affiche ou non).
   Tokens table : radius image 8, spacing 2/8/12 (non etiquetes par
   gap precis dans la table -- interpretes ci-dessous a partir de la
   grille d'exemples : 12 = separation image/texte, 8 = entre "blocs"
   (categorie->prix, fournisseur->CTA), 2 = entre lignes d'un meme
   bloc). Prix 16/140 SemiBold, nom produit 14/140 SemiBold, le reste
   (options, categorie, MOQ, fournisseur) 12/140 Regular.
   Markup : <div class="zd-product-cards"><div class="zd-product-card">
   <div class="zd-product-card__image"><img ...></div>
   <div class="zd-product-card__options">4 options</div>
   <h3 class="zd-product-card__name">Titre</h3>
   <div class="zd-product-card__category">In Category</div>
   <div class="zd-product-card__price">$0.09 - $0.12</div>
   <div class="zd-product-card__moq">MOQ: 1000 pieces</div>
   <div class="zd-product-card__supplier">Nom fournisseur</div>
   <button class="btn zd-button zd-button--secondary zd-button--sm
   zd-product-card__cta">Add to quote</button></div>...</div>
   (omettre le bouton si CTA=false).
   ============================================================ */
.zd-product-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
}
.zd-product-card {
    display: flex;
    flex-direction: column;
    /* pas de height:100% necessaire : item direct de .zd-product-cards
       (CSS grid), etire nativement sur la hauteur de la ligne via
       align-items:stretch (comportement par defaut du grid). */
}
.zd-product-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--zd-color-bg-secondary);
    margin-bottom: 12px;
}
.zd-product-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.zd-product-card__options {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--zd-color-text-tertiary);
    margin: 0 0 2px;
}
.zd-product-card__name {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--zd-color-heading);
    margin: 0 0 2px;
    min-height: 2.8em; /* reserve la hauteur de 2 lignes -- un titre court ne raccourcit pas la carte */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.zd-product-card__category {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--zd-color-text-tertiary);
    margin: 0 0 8px;
}
.zd-product-card__price {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--zd-color-heading);
    margin: 0 0 2px;
}
.zd-product-card__moq {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--zd-color-text-tertiary);
    margin: 0 0 2px;
}
.zd-product-card__supplier {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--zd-color-text-tertiary);
    margin: 0 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zd-product-card__cta { width: 100%; margin-top: auto; /* pousse le bouton en bas de carte, aligne entre cartes de hauteurs de contenu differentes */ }

/* Les blocs nom/categorie/fournisseur peuvent contenir un <a> (lien
   vers le produit, la categorie, le vendeur) -- neutralise le style
   de lien natif du navigateur pour qu'il herite de la couleur/police
   du bloc plutot que le bleu souligne par defaut. */
.zd-product-card__name a,
.zd-product-card__category a,
.zd-product-card__supplier a {
    color: inherit;
    text-decoration: none;
}
.zd-product-card__name a:hover,
.zd-product-card__category a:hover,
.zd-product-card__supplier a:hover {
    color: var(--zd-color-primary);
}

/* ============================================================
   ZD SUPPLIER CARD — design system "Supplier Card" (maquette Figma
   __maquettes/DesignSystem/SupplierCard/Supplier Card.svg,
   2026-09-02). Variantes : Size (medium/large), CTA (bouton "Contact
   supplier" affiche ou non).
   Contrairement a Feature/Product Card, Medium et Large ne sont pas
   la meme mise en page a l'echelle -- ce sont deux structures reelles
   deja en prod, formalisees ici : Medium = carte verticale simple
   (carrousel "Verified Suppliers" de l'accueil), Large = carte a 2
   zones avec KPIs + produits phares (onglet "Suppliers" de la page
   categorie boutique).
   Note sur la table de tokens : intitulee par erreur "Product Card
   Token" dans la maquette (copie-collee), et les tailles de police
   annoncees (ex. "16/12/14" pour Large) sont ambigues/peu
   exploitables telles quelles. Valeurs ci-dessous reprises des deux
   implementations existantes (deja en prod, deja ajustees a l'usage)
   plutot que forcees sur la table -- seul le radius Large a ete
   aligne sur la maquette (8 -> 12).
   ============================================================ */

/* ---- Medium (sans CTA) ---- */
.zd-supplier-card--md {
    display: block;
    text-decoration: none;
    color: inherit;
}
.zd-supplier-card--md .zd-supplier-card__cover {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--zd-color-bg-secondary);
    border: 1px solid rgba(0,0,0,.08);
    aspect-ratio: 16 / 9;
}
.zd-supplier-card--md .zd-supplier-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    display: block;
}
.zd-supplier-card--md .zd-supplier-card__name {
    margin: 10px 0 4px;
    font-weight: 800;
    font-size: 17px;
    color: var(--zd-color-heading);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 24px;
}
.zd-supplier-card--md .zd-supplier-card__meta {
    font-size: 14px;
    color: var(--zd-color-text-tertiary);
    line-height: 1.2;
    margin: 0;
}

/* ---- Large (KPIs + produits phares) ---- */
.zd-supplier-card--lg {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    overflow: hidden;
}
.zd-supplier-card--lg .zd-supplier-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
}
.zd-supplier-card--lg .zd-supplier-card__id {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.zd-supplier-card--lg .zd-supplier-card__logo {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--zd-color-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
}
.zd-supplier-card--lg .zd-supplier-card__logo img,
.zd-supplier-card--lg .zd-supplier-card__logo .zd-icon {
    width: 18px;
    height: 18px;
    opacity: .7;
}
.zd-supplier-card--lg .zd-supplier-card__title {
    min-width: 0;
}
.zd-supplier-card--lg .zd-supplier-card__name {
    font-weight: 700;
    font-size: 14px;
    color: var(--zd-color-heading);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.zd-supplier-card--lg .zd-supplier-card__name a {
    color: inherit;
    text-decoration: none;
}
.zd-supplier-card--lg .zd-supplier-card__rating {
    font-weight: 600;
    font-size: 12px;
    color: var(--zd-color-heading);
}
.zd-supplier-card--lg .zd-supplier-card__reviews {
    font-weight: 500;
    color: var(--zd-color-text-tertiary);
    font-size: 12px;
}
.zd-supplier-card--lg .zd-supplier-card__meta {
    font-size: 12px;
    color: var(--zd-color-text-tertiary);
    margin-top: 2px;
}
.zd-supplier-card--lg .zd-supplier-card__body {
    display: flex;
    gap: 18px;
    padding: 14px 16px 16px;
    border-top: 1px solid rgba(0,0,0,.06);
}
.zd-supplier-card--lg .zd-supplier-card__left {
    flex: 1 1 auto;
    min-width: 0;
}
.zd-supplier-card--lg .zd-supplier-card__kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.zd-supplier-card--lg .zd-supplier-card__kpi-label {
    font-size: 12px;
    color: var(--zd-color-text-tertiary);
}
.zd-supplier-card--lg .zd-supplier-card__kpi-value {
    margin-top: 6px;
    font-weight: 700;
    color: var(--zd-color-heading);
    font-size: 14px;
}
.zd-supplier-card--lg .zd-supplier-card__mainproducts {
    margin-top: 14px;
}
.zd-supplier-card--lg .zd-supplier-card__mainproducts-title {
    font-size: 12px;
    color: var(--zd-color-text-tertiary);
    margin-bottom: 8px;
}
.zd-supplier-card--lg .zd-supplier-card__mainproducts-list {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    color: var(--zd-color-heading);
}
.zd-supplier-card--lg .zd-supplier-card__mainproducts-list li {
    margin: 4px 0;
}
.zd-supplier-card--lg .zd-supplier-card__right {
    flex: 0 0 220px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.zd-supplier-card--lg .zd-supplier-card__right-cover {
    width: 220px;
    height: 170px;
    object-fit: contain;
    padding: 12px;
    background: var(--zd-color-bg-secondary);
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.08);
}
@media (max-width: 991px) {
    .zd-supplier-card--lg .zd-supplier-card__kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .zd-supplier-card--lg .zd-supplier-card__body {
        flex-direction: column;
    }
    .zd-supplier-card--lg .zd-supplier-card__right {
        flex: 0 0 auto;
        justify-content: flex-start;
    }
    .zd-supplier-card--lg .zd-supplier-card__right-cover {
        width: 100%;
        height: 160px;
    }
}

/* ============================================================
   ZD ACCORDION — design system "Accordion Item" (maquette Figma
   __maquettes/DesignSystem/Accordion/Accordion Item.svg, 2026-09-02).
   Variantes : State (default/active), Checkbox (contenu = lignes a
   cocher ou non), Indicator (badge "N selected" a cote du titre),
   Size (sm/md).
   Etend le composant accordion Bootstrap existant (data-bs-toggle=
   "collapse", classes .accordion-item/.accordion-button/.accordion-
   collapse deja fonctionnelles) plutot que de reimplanter le
   comportement d'ouverture/fermeture -- meme principe que .zd-input
   qui etend .form-control. Etat expanded detecte via :not(.collapsed),
   deja gere par le JS natif Bootstrap.
   Markup : <div class="accordion-item zd-accordion-item">
   <h2 class="accordion-header"><button class="accordion-button
   zd-accordion-header" data-bs-toggle="collapse" data-bs-target="#x">
   <span class="zd-accordion-title">Accordion item</span>
   <span class="zd-accordion-indicator">1 selected</span>
   <x-icon name="caret-down" class="zd-accordion-icon" /></button></h2>
   <div id="x" class="accordion-collapse collapse zd-accordion-body">
   <div class="zd-accordion-row"><input type="checkbox" class=
   "zd-checkbox">...</div></div></div>
   ============================================================ */
.zd-accordion-item {
    border: 1px solid var(--zd-color-border-default);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
}
.zd-accordion-item:last-child { margin-bottom: 0; }
/* Bootstrap ne remet a zero que margin-bottom sur .accordion-header
   (le <h2> natif) -- le margin-top par defaut du navigateur (~0.83em)
   reste et cree un espace visible en haut de la carte. */
.zd-accordion-item > .accordion-header { margin: 0; }

.zd-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    color: var(--zd-color-heading);
}
/* Survol d'un en-tete ferme : filet #D1D1D1 dessine a l'interieur au lieu
   d'un fond #F5F5F5 confondu avec le fond de page (retour designer
   2026-10-05). Ouvert : fond inchange (regles ci-dessous). */
.zd-accordion-header.collapsed:hover {
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--zd-color-border-default);
}
/* Anneau de focus bleu Bootstrap (.accordion-button:focus) neutralise au clic,
   anneau discret conserve a la navigation clavier. */
.zd-accordion-header:focus {
    box-shadow: none;
}
.zd-accordion-header:focus-visible {
    outline: 2px solid var(--zd-color-border-focus);
    outline-offset: 2px;
}
.zd-accordion-header:not(.collapsed) {
    background: var(--zd-color-bg-secondary);
    color: var(--zd-color-heading);
    box-shadow: none;
}
/* Variante fond teinte (hors maquette Figma, meme principe que
   .zd-feature-card--tinted) : orange plutot que gris neutre, pour les
   contextes ou l'etat "ouvert" doit rester coherent avec un fond deja
   orange existant (ex. #ffe9e0 sur l'accordeon d'attributs des
   formulaires produit). Reutilisable ailleurs si besoin. */
.zd-accordion--tinted .zd-accordion-header:not(.collapsed) {
    background: var(--zd-color-brand-bg-secondary);
}
/* Bootstrap ajoute sa propre icone chevron native (::after) en plus
   de celle qu'on fournit en markup (x-icon + .zd-accordion-icon) --
   on la masque pour ne garder que la notre. */
.zd-accordion-header::after {
    display: none;
}

/* Le titre ne grandit pas (flex 0 1 auto) : l'indicateur "N selected"
   doit rester colle juste apres lui (maquette), pas plaque a droite
   contre le chevron. C'est l'icone qui est poussee a droite via
   margin-left:auto. */
.zd-accordion-title { flex: 0 1 auto; min-width: 0; }

.zd-accordion-indicator {
    flex-shrink: 0;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--zd-color-text-tertiary);
}

.zd-accordion-icon {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--zd-color-text-tertiary);
    transition: transform .2s;
}
.zd-accordion-header:not(.collapsed) .zd-accordion-icon { transform: rotate(180deg); }

.zd-accordion-body {
    border-top: 1px solid var(--zd-color-border-default);
    background: #fff;
}

.zd-accordion-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    color: var(--zd-color-text-dark);
}
.zd-accordion-row + .zd-accordion-row { margin-top: 8px; }

/* Tailles */
.zd-accordion--sm .zd-accordion-header { padding: 8px 16px; font-size: 14px; line-height: 1.4; }
.zd-accordion--sm .zd-accordion-icon { width: 20px; height: 20px; }
.zd-accordion--sm .zd-accordion-body { padding: 8px 16px; }
.zd-accordion--sm .zd-accordion-row { font-size: 14px; }

.zd-accordion--md .zd-accordion-header { padding: 12px 16px; font-size: 16px; line-height: 1.4; }
.zd-accordion--md .zd-accordion-icon { width: 22px; height: 22px; }
.zd-accordion--md .zd-accordion-body { padding: 12px 16px; }
.zd-accordion--md .zd-accordion-row { font-size: 16px; }

/* Variante "flush" (maquette Onboarding /become/supplier, FAQ) : liste a
   separateurs sans carte -- ni bordure laterale, ni fond, ni padding
   horizontal ; filet #D1D1D1 sous chaque item (y compris le dernier).
   Ouvert : la question et la reponse sont separees de 8px. Les tailles
   de police restent a la charge de la page ou d'une taille --sm/--md. */
.zd-accordion--flush .zd-accordion-item {
    border: 0;
    border-bottom: 1px solid var(--zd-color-border-default);
    border-radius: 0;
    margin-bottom: 0;
    overflow: visible;
}
.zd-accordion--flush .zd-accordion-header,
.zd-accordion--flush .zd-accordion-header:not(.collapsed),
.zd-accordion--flush .zd-accordion-header.collapsed:hover {
    padding: 16px 0;
    background: transparent;
    box-shadow: none;
}
.zd-accordion--flush .zd-accordion-header:not(.collapsed) {
    padding-bottom: 8px;
}
.zd-accordion--flush .zd-accordion-title { flex: 1 1 auto; }
.zd-accordion--flush .zd-accordion-icon { color: var(--zd-color-heading); }
.zd-accordion--flush .zd-accordion-body {
    /* BS 5.0 : .accordion-collapse porte aussi des bordures laterales */
    border: 0;
    background: transparent;
}
.zd-accordion--flush .zd-accordion-body > .accordion-body {
    padding: 0 0 16px;
}