/* ==========================================================
   ETHNIC.CH — MODERN UI V1
   PrestaShop Classic + Creative Elements
   ========================================================== */

:root {
  /* Brand */
  --ethnic-green: #90c322;
  --ethnic-green-dark: #789f19;
  --ethnic-green-soft: #dbe8a0;

  /* Base shell */
  --ethnic-dark: #202427;
  --ethnic-text: #1b241e;
  --ethnic-text-muted: #5d675f;
  --ethnic-muted: #73797e;

  --ethnic-bg: #f6f7f4;
  --ethnic-surface: #ffffff;
  --ethnic-white: #ffffff;
  --ethnic-border: #d4ddd1;

  --ethnic-radius: 12px;
  --ethnic-radius-sm: 7px;
  --ethnic-radius-lg: 18px;
  --ethnic-radius-md: 12px;

  --ethnic-shadow-sm:
    0 4px 16px rgba(24, 32, 20, 0.06);

  --ethnic-shadow:
    0 12px 28px rgba(29, 38, 31, 0.07);

  --ethnic-shadow-hover:
    0 18px 36px rgba(29, 38, 31, 0.11);

  --ethnic-content-width: 1280px;

  /* Legacy V3 UI tokens retained unchanged */
  --ethnic-ui-green: #95ca13;
  --ethnic-ui-green-dark: #6e9d00;
  --ethnic-ui-ink: #151918;
  --ethnic-ui-muted: #69706d;
  --ethnic-ui-border: rgba(21, 25, 24, 0.09);
  --ethnic-ui-surface: #ffffff;
  --ethnic-ui-soft: #f6f7f5;
  --ethnic-ui-radius: 16px;
  --ethnic-ui-radius-sm: 11px;

  --ethnic-ui-shadow:
    0 8px 28px rgba(20, 28, 21, 0.07);

  --ethnic-ui-shadow-hover:
    0 14px 38px rgba(20, 28, 21, 0.12);

  /* Canonical storefront surfaces */
  --ethnic-page: #e9eee7;
  --ethnic-section: #dfe6dc;
  --ethnic-section-border: #cfd8cc;

  --ethnic-olive: #435258;
  --ethnic-olive-soft: #5b6a6f;

  --ethnic-panel-1: #526168;
  --ethnic-panel-2: #3b494f;
  --ethnic-panel-3: #2e3a3f;
  --ethnic-panel-deep: #222d31;

  --ethnic-cream: #f5f0e7;
  --ethnic-cream-muted: #d9d2c5;
}


/* ==========================================================
   GLOBAL
   ========================================================== */

html {
  scroll-behavior: smooth;
}

html,
body {
  overflow-x: hidden;
}

body {
  background: var(--ethnic-bg);
  color: var(--ethnic-text);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

#wrapper {
  padding-top: 0;
  background: var(--ethnic-bg);
}

.container {
  max-width: var(--ethnic-content-width);
}

a {
  color: var(--ethnic-dark);
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

a:hover,
a:focus {
  color: var(--ethnic-green-dark);
  text-decoration: none;
}


/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: var(--ethnic-dark);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

h1,
.h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
}

h2,
.h2 {
  font-size: clamp(1.65rem, 3vw, 2.2rem);
}

h3,
.h3 {
  font-size: clamp(1.3rem, 2vw, 1.65rem);
}


/* ==========================================================
   HEADER
   ========================================================== */


#header .header-nav {
  min-height: 40px;
  background: var(--ethnic-dark);
  border: 0;
  color: #fff;
}




#header .header-top a[data-depth="0"] {
  color: var(--ethnic-dark);
  font-weight: 650;
}

#header .header-top a[data-depth="0"]:hover {
  color: var(--ethnic-green-dark);
}


/* ==========================================================
   MAIN MENU
   ========================================================== */

#header #_desktop_top_menu .top-menu {
  margin-bottom: 0;
}

#header #_desktop_top_menu .top-menu a {
  color: var(--ethnic-dark);
}

#header #_desktop_top_menu .top-menu a[data-depth="0"] {
  position: relative;
}

#header #_desktop_top_menu .top-menu a[data-depth="0"]::after {
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  margin: auto;
  background: var(--ethnic-green);
  content: "";
  transition: width 0.2s ease;
}

#header #_desktop_top_menu .top-menu a[data-depth="0"]:hover::after {
  width: 100%;
}


/* ==========================================================
   SEARCH
   ========================================================== */

.search-widget form input[type="text"] {
  min-height: 46px;
  padding-right: 48px;
  background: #fff;
  border: 1px solid var(--ethnic-border);
  border-radius: var(--ethnic-radius-sm);
  color: var(--ethnic-text);
}

.search-widget form input[type="text"]:focus {
  border-color: var(--ethnic-green);
  outline: none;
  box-shadow: 0 0 0 3px rgba(144, 195, 34, 0.14);
}

.search-widget form button[type="submit"] {
  color: var(--ethnic-dark);
}

.search-widget form button[type="submit"]:hover {
  color: var(--ethnic-green-dark);
}


/* ==========================================================
   CART
   ========================================================== */

#header .blockcart {
  border-radius: var(--ethnic-radius-sm);
  transition:
    background-color 0.18s ease,
    transform 0.18s ease;
}

#header .blockcart:hover {
  transform: translateY(-1px);
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.btn {
  min-height: 44px;
  border-radius: var(--ethnic-radius-sm);
  font-weight: 650;
  letter-spacing: 0.01em;
  box-shadow: none;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.btn-primary {
  background: var(--ethnic-green);
  border-color: var(--ethnic-green);
  color: #182000;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--ethnic-green-dark);
  border-color: var(--ethnic-green-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--ethnic-shadow-sm);
}


/* ==========================================================
   FORM FIELDS
   ========================================================== */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
select,
textarea {
  min-height: 46px;
  background: #fff;
  border: 1px solid var(--ethnic-border);
  border-radius: var(--ethnic-radius-sm);
  color: var(--ethnic-text);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--ethnic-green);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(144, 195, 34, 0.14);
}


/* ==========================================================
   CONTENT / CARDS
   ========================================================== */

.card,
.block,
.page-content {
  border-color: var(--ethnic-border);
  border-radius: var(--ethnic-radius);
}

.page-customer-account #content,
.page-authentication #content {
  border-radius: var(--ethnic-radius);
  box-shadow: var(--ethnic-shadow-sm);
}


/* ==========================================================
   PRODUCT CARDS
   ========================================================== */




/*
 * Les fonds verts de nombreuses images produits sont
 * directement intégrés aux JPG historiques.
 * On ne modifie donc PAS leur arrière-plan.
 */


.product-miniature:hover .product-thumbnail img {
  transform: scale(1.025);
}

.product-miniature .product-description {
  background: #fff;
  padding-right: 16px;
  padding-left: 16px;
}

.product-miniature .product-title {
  margin-top: 10px;
}





/* ==========================================================
   PRODUCT FLAGS
   ========================================================== */

.product-flags li.product-flag {
  padding: 6px 9px;
  background: var(--ethnic-green);
  border-radius: 5px;
  color: #172000;
  font-size: 0.75rem;
  font-weight: 750;
  box-shadow: none;
}


/* ==========================================================
   BREADCRUMB
   ========================================================== */

#wrapper .breadcrumb {
  padding-top: 18px;
  padding-bottom: 18px;
  color: var(--ethnic-muted);
  font-size: 0.875rem;
}

#wrapper .breadcrumb a {
  color: var(--ethnic-muted);
}

#wrapper .breadcrumb a:hover {
  color: var(--ethnic-green-dark);
}


/* ==========================================================
   FOOTER
   ========================================================== */

#footer {
  margin-top: 48px;
  background: var(--ethnic-dark);
  color: rgba(255, 255, 255, 0.72);
}

#footer .footer-container {
  background: transparent;
  box-shadow: none;
}

#footer h3,
#footer h4,
#footer .h3,
#footer .h4 {
  color: #fff;
}

#footer a {
  color: rgba(255, 255, 255, 0.75);
}

#footer a:hover {
  color: var(--ethnic-green);
}


/* ==========================================================
   SMALL DETAILS
   ========================================================== */

::selection {
  background: var(--ethnic-green);
  color: #172000;
}

hr {
  border-color: var(--ethnic-border);
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 991px) {
  #header .header-top {
    background: #fff;
  }
}

@media (max-width: 767px) {


  #footer {
    margin-top: 32px;
  }
}


/* ==========================================================
   ETHNIC.CH — MODERN UI V2 POLISH
   Safe polish before Creative Elements replaces the shell
   ========================================================== */


/* ----------------------------------------------------------
   HOMEPAGE BREATHING ROOM
   ---------------------------------------------------------- */



/* ----------------------------------------------------------
   CURRENT LOGO / SEARCH
   Temporary Classic-shell improvements
   ---------------------------------------------------------- */




/* ----------------------------------------------------------
   HOMEPAGE SLIDER
   ---------------------------------------------------------- */





/* Softer slider arrows */

body#index #carousel .direction {
  opacity: 0.9;
}


/* ----------------------------------------------------------
   HOMEPAGE BANNER
   ---------------------------------------------------------- */

body#index .banner {
  display: block;
  overflow: hidden;
  margin-bottom: 34px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--ethnic-shadow-sm);
}




/* ----------------------------------------------------------
   HOMEPAGE MODULE SPACING
   ---------------------------------------------------------- */

body#index .featured-products,
body#index .product-accessories,
body#index .products-section-title {
  margin-top: 24px;
}


/* ----------------------------------------------------------
   FOOTER NEWSLETTER
   ---------------------------------------------------------- */

#footer .block_newsletter {
  margin-bottom: 0;
  padding-top: 30px;
  padding-bottom: 30px;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.80);
}

#footer .block_newsletter p,
#footer .block_newsletter .h3,
#footer .block_newsletter .h4 {
  color: #fff;
}

#footer .block_newsletter form input[type="email"],
#footer .block_newsletter form input[type="text"] {
  min-height: 48px;
  background: #fff;
  border: 0;
  border-radius: var(--ethnic-radius-sm);
}

#footer .block_newsletter form button,
#footer .block_newsletter form .btn {
  min-height: 48px;
  background: var(--ethnic-green);
  border-color: var(--ethnic-green);
  color: #182000;
}

#footer .block_newsletter form button:hover,
#footer .block_newsletter form .btn:hover {
  background: var(--ethnic-green-dark);
  border-color: var(--ethnic-green-dark);
  color: #fff;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 991px) {


  body#index #carousel,
  body#index .banner {
    border-radius: 10px;
  }
}


/* ==========================================================
   ETHNIC.CH — MODERN UI V3
   Header / Navigation / Search / Product cards / Homepage
   2026-09
   ========================================================== */


/* ----------------------------------------------------------
   GLOBAL RHYTHM
   ---------------------------------------------------------- */


body {
  color: var(--ethnic-ui-ink);
  background: #fff;
}

#wrapper {
  background: #f8f9f7;
}

.container {
  width: 100%;
}


/* ----------------------------------------------------------
   HEADER NAV BAR
   ---------------------------------------------------------- */

#header {
  background: #fff;
  color: var(--ethnic-ui-ink);
  box-shadow: 0 1px 0 rgba(20, 25, 22, 0.07);
}

#header .header-nav {
  min-height: 42px;
  margin-bottom: 0;
  background: #1d2221;
  border-bottom: 0;
  color: #fff;
}


#header .header-nav a {
  color: rgba(255, 255, 255, 0.92);
}

#header .header-nav a:hover {
  color: var(--ethnic-ui-green);
}

#header .header-nav .user-info,
#header .header-nav .blockcart {
  margin-top: 0;
}


/* ----------------------------------------------------------
   MAIN HEADER
   ---------------------------------------------------------- */

#header .header-top {
  padding-top: 18px;
  padding-bottom: 18px;
  background: #fff;
}

#header .header-top > .container > .row {
  display: flex;
  align-items: center;
}

#header .logo {
  max-width: 220px;
  width: 100%;
  height: auto;
}


/* ----------------------------------------------------------
   DESKTOP MAIN MENU
   ---------------------------------------------------------- */

#header .header-top .menu {
  margin-bottom: 0;
}

#header #_desktop_top_menu .top-menu[data-depth="0"] {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

#header #_desktop_top_menu .top-menu[data-depth="0"] > li {
  margin: 0;
}

#header #_desktop_top_menu .top-menu[data-depth="0"] > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 11px;
  color: var(--ethnic-ui-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1.15;
  text-decoration: none;
  transition:
    color 0.18s ease,
    background-color 0.18s ease;
}

#header #_desktop_top_menu .top-menu[data-depth="0"] > li > a::after {
  content: "";
  position: absolute;
  right: 11px;
  bottom: 3px;
  left: 11px;
  height: 2px;
  border-radius: 999px;
  background: var(--ethnic-ui-green);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.18s ease;
}

#header #_desktop_top_menu .top-menu[data-depth="0"] > li:hover > a,
#header #_desktop_top_menu .top-menu[data-depth="0"] > li > a:hover {
  color: var(--ethnic-ui-green-dark);
}

#header #_desktop_top_menu .top-menu[data-depth="0"] > li:hover > a::after,
#header #_desktop_top_menu .top-menu[data-depth="0"] > li > a:hover::after {
  transform: scaleX(1);
}


/* Dropdown */

#header #_desktop_top_menu .top-menu .sub-menu {
  overflow: hidden;
  margin-top: 8px;
  padding: 18px;
  border: 1px solid var(--ethnic-ui-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--ethnic-ui-shadow);
}

#header #_desktop_top_menu .top-menu .sub-menu a {
  color: var(--ethnic-ui-ink);
}

#header #_desktop_top_menu .top-menu .sub-menu a:hover {
  color: var(--ethnic-ui-green-dark);
}


/* ----------------------------------------------------------
   SEARCH
   ---------------------------------------------------------- */

#header .search-widget {
  width: 100%;
  max-width: 340px;
  margin-left: auto;
}

#header .search-widget form {
  position: relative;
}

#header .search-widget form input[type="text"] {
  width: 100%;
  height: 46px;
  padding: 0 48px 0 17px;
  background: var(--ethnic-ui-soft);
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ethnic-ui-ink);
  box-shadow: none;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

#header .search-widget form input[type="text"]:hover {
  background: #f1f3ef;
}

#header .search-widget form input[type="text"]:focus {
  background: #fff;
  border-color: rgba(149, 202, 19, 0.55);
  box-shadow: 0 0 0 4px rgba(149, 202, 19, 0.10);
  outline: 0;
}

#header .search-widget form button[type="submit"] {
  right: 8px;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  color: var(--ethnic-ui-ink);
  border-radius: 9px;
}

#header .search-widget form button[type="submit"]:hover {
  background: rgba(149, 202, 19, 0.12);
  color: var(--ethnic-ui-green-dark);
}


/* ----------------------------------------------------------
   USER / CART
   ---------------------------------------------------------- */

#header .user-info a,
#header .blockcart a {
  transition: color 0.18s ease;
}

#header .user-info a:hover,
#header .blockcart a:hover {
  color: var(--ethnic-ui-green);
}

#header .blockcart {
  border-radius: 10px;
}

#header .blockcart.active {
  background: var(--ethnic-ui-green);
}


/* ----------------------------------------------------------
   HOMEPAGE WRAPPER
   ---------------------------------------------------------- */

body#index #wrapper {
  padding-top: 20px;
}

body#index #content-wrapper {
  width: 100%;
}

body#index #main {
  max-width: none;
}


/* ----------------------------------------------------------
   HOMEPAGE SLIDER - temporary until Creative Elements hero
   ---------------------------------------------------------- */

body#index #carousel {
  overflow: hidden;
  position: relative;
  margin-bottom: 44px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--ethnic-ui-shadow);
}

body#index #carousel .carousel-inner,
body#index #carousel .carousel-item {
  border-radius: inherit;
}

body#index #carousel img {
  width: 100%;
  height: auto;
  display: block;
}

body#index #carousel .carousel-caption {
  max-width: 470px;
  padding: 22px 26px;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ethnic-ui-ink);
  text-shadow: none;
}

body#index #carousel .carousel-caption h2,
body#index #carousel .carousel-caption .h2 {
  margin: 0 0 8px;
  color: var(--ethnic-ui-ink);
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 800;
  line-height: 1.02;
  text-shadow: none;
}

body#index #carousel .carousel-caption p {
  margin-bottom: 0;
  color: var(--ethnic-ui-muted);
  font-size: 16px;
  text-shadow: none;
}

body#index #carousel .carousel-control-prev,
body#index #carousel .carousel-control-next,
body#index #carousel .direction .carousel-control {
  opacity: 1;
}

body#index #carousel .carousel-control-prev-icon,
body#index #carousel .carousel-control-next-icon {
  filter: none;
}


/* ----------------------------------------------------------
   HOMEPAGE SECTION TITLES
   ---------------------------------------------------------- */

body#index .products-section-title,
body#index .featured-products .products-section-title,
body#index .product-accessories .products-section-title {
  position: relative;
  margin: 0 0 28px;
  padding-bottom: 13px;
  color: var(--ethnic-ui-ink);
  font-size: clamp(27px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-align: center;
}

body#index .products-section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 46px;
  height: 4px;
  border-radius: 999px;
  background: var(--ethnic-ui-green);
  transform: translateX(-50%);
}


/* ----------------------------------------------------------
   PRODUCT GRID
   ---------------------------------------------------------- */

body#index .products {
  row-gap: 26px;
}

.product-miniature {
  margin-bottom: 0;
}

.product-miniature .thumbnail-container {
  overflow: hidden;
  height: 100%;
  margin-bottom: 0;
  background: #fff;
  border: 1px solid var(--ethnic-ui-border);
  border-radius: var(--ethnic-ui-radius);
  box-shadow: 0 3px 14px rgba(20, 28, 21, 0.045);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.product-miniature .thumbnail-container:hover {
  transform: translateY(-4px);
  border-color: rgba(149, 202, 19, 0.30);
  box-shadow: var(--ethnic-ui-shadow-hover);
}

.product-miniature .product-thumbnail {
  overflow: hidden;
  display: block;
  margin: 0;
  background: #f4f6f1;
}

.product-miniature .product-thumbnail img {
  width: 100%;
  height: auto;
  transition: transform 0.28s ease;
}

.product-miniature .thumbnail-container:hover .product-thumbnail img {
  transform: scale(1.025);
}


/* Remove old green card background if inherited elsewhere */

.product-miniature .product-description {
  position: relative;
  width: 100%;
  min-height: 130px;
  padding: 17px 16px 16px;
  background: #fff;
}

.product-miniature .product-title {
  min-height: 42px;
  margin: 0 0 8px;
  line-height: 1.3;
}

.product-miniature .product-title a {
  color: var(--ethnic-ui-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.product-miniature .product-title a:hover {
  color: var(--ethnic-ui-green-dark);
}

.product-miniature .product-price-and-shipping {
  color: var(--ethnic-ui-ink);
  font-size: 16px;
  font-weight: 800;
}

.product-miniature .regular-price {
  color: #999;
  font-weight: 500;
}


/* ----------------------------------------------------------
   PRODUCT LABELS
   ---------------------------------------------------------- */

.product-miniature .product-flags {
  top: 12px;
  left: 12px;
}

.product-miniature .product-flags li.product-flag {
  margin-bottom: 5px;
  padding: 6px 9px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  color: var(--ethnic-ui-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(20, 28, 21, 0.08);
}

.product-miniature .product-flags li.product-flag.discount,
.product-miniature .product-flags li.product-flag.on-sale {
  background: var(--ethnic-ui-green);
  color: #172000;
}


/* ----------------------------------------------------------
   QUICK VIEW / HOVER INFO
   ---------------------------------------------------------- */

.product-miniature .highlighted-informations {
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--ethnic-ui-border);
}

.product-miniature .highlighted-informations a {
  color: var(--ethnic-ui-ink);
}

.product-miniature .highlighted-informations a:hover {
  color: var(--ethnic-ui-green-dark);
}


/* ----------------------------------------------------------
   HOMEPAGE MODULE SPACING
   ---------------------------------------------------------- */

body#index .featured-products,
body#index .product-accessories,
body#index .products-section,
body#index .block-products {
  margin-bottom: 54px;
}

body#index .featured-products + .featured-products,
body#index .featured-products + section,
body#index section + .featured-products {
  margin-top: 48px;
}


/* ----------------------------------------------------------
   BANNER
   ---------------------------------------------------------- */

body#index .banner {
  overflow: hidden;
  margin-top: 20px;
  margin-bottom: 50px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--ethnic-ui-shadow);
}

body#index .banner img {
  width: 100%;
  display: block;
  transition: transform 0.35s ease;
}

body#index .banner:hover img {
  transform: scale(1.012);
}


/* ----------------------------------------------------------
   GENERIC BUTTONS
   ---------------------------------------------------------- */

.btn-primary,
.btn-primary.focus,
.btn-primary:focus {
  background: var(--ethnic-ui-green);
  border-color: var(--ethnic-ui-green);
  border-radius: 10px;
  color: #172000;
  font-weight: 700;
  box-shadow: none;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active {
  background: var(--ethnic-ui-green-dark);
  border-color: var(--ethnic-ui-green-dark);
  color: #fff;
}


/* ----------------------------------------------------------
   LINKS
   ---------------------------------------------------------- */

a {
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease;
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 1199px) {
  #header #_desktop_top_menu .top-menu[data-depth="0"] > li > a {
    padding-right: 8px;
    padding-left: 8px;
    font-size: 13px;
  }

  #header .search-widget {
    max-width: 290px;
  }
}

@media (max-width: 991px) {
  body#index #wrapper {
    padding-top: 14px;
  }

  #header .header-top {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  #header .logo {
    max-width: 185px;
  }

  body#index #carousel {
    margin-bottom: 30px;
    border-radius: 12px;
  }

  body#index .products-section-title {
    margin-bottom: 22px;
  }

  .product-miniature .thumbnail-container:hover {
    transform: none;
  }
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 767px) {
  #header .header-nav {
    min-height: auto;
  }

  #header .header-top {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #header .logo {
    max-width: 165px;
  }

  body#index #wrapper {
    padding-top: 10px;
  }

  body#index #carousel {
    margin-bottom: 25px;
    border-radius: 10px;
  }

  body#index #carousel .carousel-caption {
    display: none;
  }

  body#index .products-section-title {
    font-size: 25px;
  }

  body#index .featured-products,
  body#index .product-accessories,
  body#index .products-section,
  body#index .block-products {
    margin-bottom: 38px;
  }

  .product-miniature .thumbnail-container {
    border-radius: 12px;
  }

  .product-miniature .product-description {
    min-height: 115px;
    padding: 14px 12px;
  }

  .product-miniature .product-title a {
    font-size: 14px;
  }
}



/* ==========================================================
   ETHNIC.CH — MODERN UI V3.1
   Targeted header + legacy slider corrections
   ========================================================== */


/* ----------------------------------------------------------
   TOP BLACK BAR
   Restore a real left/right layout and vertical alignment
   ---------------------------------------------------------- */

#header .header-nav {
  min-height: 46px;
  padding: 0;
}

#header .header-nav .container {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 46px;
}

/*
 * Classic mobile header requires the normal Bootstrap
 * container > row > col-xs-12 layout.
 * Do not let the desktop flex container shrink the mobile row.
 */
@media (max-width: 767px) {
  #header .header-nav .container {
    display: block !important;
  }
}

#header .header-nav .left-nav,
#header .header-nav .right-nav {
  float: none !important;
  width: auto !important;
  min-height: 46px;
  margin: 0;
  padding: 0;
}

#header .header-nav .left-nav {
  display: flex;
  align-items: center;
}

#header .header-nav .right-nav {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  margin-left: auto;
}


/* Make every top-bar component vertically centered */

#header .header-nav .left-nav > *,
#header .header-nav .right-nav > *,
#header .header-nav .user-info,
#header .header-nav .blockcart,
#header .header-nav .language-selector-wrapper,
#header .header-nav .currency-selector {
  display: flex;
  align-items: center;
  min-height: 46px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* Contact / account / selectors */

#header .header-nav a,
#header .header-nav .user-info a,
#header .header-nav .language-selector-wrapper button,
#header .header-nav .currency-selector button {
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: 14px;
  line-height: 1.2;
}

#header .header-nav a:hover,
#header .header-nav .user-info a:hover,
#header .header-nav .language-selector-wrapper button:hover,
#header .header-nav .currency-selector button:hover {
  color: var(--ethnic-ui-green) !important;
}


/* Give individual controls proper horizontal breathing room */

#header .header-nav .user-info,
#header .header-nav .language-selector-wrapper,
#header .header-nav .currency-selector {
  padding-right: 12px;
  padding-left: 12px;
}


/* Material icons: remove Classic's awkward baseline behaviour */

#header .header-nav .material-icons,
#header .header-nav i.material-icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 6px 0 0 !important;
  padding: 0;
  font-size: 20px;
  line-height: 1 !important;
  vertical-align: middle;
}


/* Cart becomes the green action area rather than white-on-white */

#header .header-nav .blockcart {
  min-width: 104px;
  padding: 0 15px !important;
  background: var(--ethnic-ui-green) !important;
  border-radius: 0;
  color: #172000 !important;
}

#header .header-nav .blockcart,
#header .header-nav .blockcart a,
#header .header-nav .blockcart span,
#header .header-nav .blockcart .cart-products-count,
#header .header-nav .blockcart .material-icons {
  color: #172000 !important;
}

#header .header-nav .blockcart:hover {
  background: #a4d82a !important;
}

#header .header-nav .blockcart a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  width: 100%;
  text-decoration: none;
}


/* ----------------------------------------------------------
   MAIN HEADER SEARCH
   Keep it vertically aligned with logo/menu
   ---------------------------------------------------------- */

#header .header-top .search-widget {
  align-self: center;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  top: auto !important;
}


/* ----------------------------------------------------------
   LEGACY PS_IMAGE-SLIDER
   Images are 1110 × 340. Preserve their complete ratio.
   ---------------------------------------------------------- */

body#index #carousel {
  position: relative;
  width: 100%;
  height: auto !important;
  padding: 0 !important;
}


/*
 * Force the viewport to the exact source-image ratio.
 * This prevents a 1110×340 image enlarged to desktop width
 * from being clipped by the legacy 340px carousel height.
 */

body#index #carousel .carousel-inner {
  position: relative;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1110 / 340;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: inherit;
}


body#index #carousel .carousel-item {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}






/*
 * The advertising artwork already contains its own typography.
 * The legacy module caption duplicates that text on top.
 */

body#index #carousel .caption,
body#index #carousel figcaption,
body#index #carousel .carousel-caption {
  display: none !important;
}


/* ----------------------------------------------------------
   SLIDER ARROWS
   Overlay them on the image rather than reserving space
   ---------------------------------------------------------- */

body#index #carousel .direction {
  position: absolute !important;
  z-index: 5;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
}


body#index #carousel .direction .carousel-control {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 58px !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  opacity: 1 !important;
  pointer-events: auto;
}


body#index #carousel .direction .carousel-control.left {
  right: auto !important;
  left: 0 !important;
}


body#index #carousel .direction .carousel-control.right {
  right: 0 !important;
  left: auto !important;
}


/* Arrow button */

body#index #carousel .direction .icon-prev,
body#index #carousel .direction .icon-next {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0 !important;
  padding: 0;
  transform: none !important;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.90);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
  color: #171b19;
}


body#index #carousel .direction .icon-prev .material-icons,
body#index #carousel .direction .icon-next .material-icons {
  margin: 0 !important;
  font-size: 28px;
  line-height: 1;
  color: #171b19;
}


body#index #carousel .direction .carousel-control:hover .icon-prev,
body#index #carousel .direction .carousel-control:hover .icon-next {
  background: var(--ethnic-ui-green);
}


/* ----------------------------------------------------------
   SLIDER INDICATORS
   Keep them over the image too
   ---------------------------------------------------------- */

body#index #carousel .carousel-indicators {
  z-index: 6;
  bottom: 10px;
  margin-bottom: 0;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  #header .header-nav .container {
    min-height: 42px;
  }

  #header .header-nav .left-nav,
  #header .header-nav .right-nav,
  #header .header-nav .left-nav > *,
  #header .header-nav .right-nav > *,
  #header .header-nav .user-info,
  #header .header-nav .blockcart {
    min-height: 42px;
  }

  #header .header-nav .blockcart {
    min-width: auto;
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  body#index #carousel .direction .carousel-control {
    width: 46px !important;
  }

  body#index #carousel .direction .icon-prev,
  body#index #carousel .direction .icon-next {
    width: 32px;
    height: 32px;
  }

  body#index #carousel .direction .icon-prev .material-icons,
  body#index #carousel .direction .icon-next .material-icons {
    font-size: 24px;
  }
}



/* ==========================================================
   ETHNIC.CH — MODERN UI V3.2
   Slider natural image ratio: full width, zero crop
   ========================================================== */

body#index #carousel {
  width: 100% !important;
  height: auto !important;
  overflow: hidden !important;
}

/*
 * Classic forces .carousel to viewport width below 992px with:
 *   left: 50%;
 *   width: 100vw;
 *   margin-left: -50vw;
 *
 * Ethnic uses the slider at 100% of its normal content column,
 * so neutralize the remaining viewport breakout coordinates.
 */
@media (max-width: 991px) {
  body#index #carousel {
    left: auto !important;
    right: auto !important;

    width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }
}

body#index #carousel .carousel-inner {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
}

body#index #carousel .carousel-item {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

body#index #carousel .carousel-item > a,
body#index #carousel .carousel-item figure {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body#index #carousel .carousel-item img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;

  /* Important: no cover, therefore no cropping */
  object-fit: initial !important;
  object-position: initial !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* Direction layer follows the real image height */

body#index #carousel .direction {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}


/* Ensure Bootstrap controls never consume layout width */

body#index #carousel .left.carousel-control,
body#index #carousel .right.carousel-control {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 58px !important;
  height: 100% !important;
  margin: 0 !important;
}

body#index #carousel .left.carousel-control {
  left: 0 !important;
  right: auto !important;
}

body#index #carousel .right.carousel-control {
  right: 0 !important;
  left: auto !important;
}



/* ==========================================================
   ETHNIC.CH — MODERN UI V3.3
   Language selector dropdown visibility fix
   ========================================================== */


/* Keep current selected language readable in the black topbar */

#header .header-nav .language-selector-wrapper .language-selector > button,
#header .header-nav .language-selector-wrapper .language-selector > button span,
#header .header-nav .language-selector-wrapper .language-selector > button i {
  color: rgba(255, 255, 255, 0.94) !important;
}


/* Dropdown itself */

#header .header-nav .language-selector .dropdown-menu {
  min-width: 160px;
  margin-top: 0;
  padding: 6px;
  border: 1px solid #e3e7e5;
  border-radius: 0 0 10px 10px;
  background: #ffffff !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  z-index: 1000;
}


/* Override the global white topbar link color */

#header .header-nav .language-selector .dropdown-menu li,
#header .header-nav .language-selector .dropdown-menu li a,
#header .header-nav .language-selector .dropdown-menu a,
#header .header-nav .language-selector .dropdown-menu .dropdown-item {
  color: #1b211f !important;
  background: transparent !important;
}


/* Individual language rows */

#header .header-nav .language-selector .dropdown-menu li a,
#header .header-nav .language-selector .dropdown-menu .dropdown-item {
  display: block !important;
  width: 100%;
  padding: 10px 12px !important;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none !important;
  white-space: nowrap;
}


/* Hover */

#header .header-nav .language-selector .dropdown-menu li a:hover,
#header .header-nav .language-selector .dropdown-menu li a:focus,
#header .header-nav .language-selector .dropdown-menu .dropdown-item:hover,
#header .header-nav .language-selector .dropdown-menu .dropdown-item:focus {
  color: #172000 !important;
  background: rgba(149, 202, 19, 0.16) !important;
}


/* Current language inside dropdown */

#header .header-nav .language-selector .dropdown-menu li.current a,
#header .header-nav .language-selector .dropdown-menu .current .dropdown-item {
  color: #6e9d00 !important;
  background: rgba(149, 202, 19, 0.10) !important;
  font-weight: 700;
}


/* Prevent generic topbar hover rule from turning dropdown text green
   without a readable background */

#header .header-nav .language-selector .dropdown-menu a:hover {
  color: #172000 !important;
}


/* Mobile / tablet dropdown */

@media (max-width: 767px) {
  #header .header-nav .language-selector .dropdown-menu {
    min-width: 145px;
  }

  #header .header-nav .language-selector .dropdown-menu li a,
  #header .header-nav .language-selector .dropdown-menu .dropdown-item {
    padding: 9px 10px !important;
  }
}



/* ==========================================================
   ETHNIC.CH - TOPBAR RESPONSIVE V3.4-V3.5 CONSOLIDATED
   Original rules, declarations and media contexts preserved
   ========================================================== */
#header .header-nav .language-selector-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#header .header-nav .language-selector-wrapper .language-selector {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
#header .header-nav .language-selector-wrapper .language-selector > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 14px;
  line-height: 1 !important;
  vertical-align: middle !important;
}
#header .header-nav .language-selector-wrapper .language-selector > button span {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
#header .header-nav .language-selector-wrapper .language-selector > button i,
#header .header-nav .language-selector-wrapper .language-selector > button .material-icons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 17px !important;
  line-height: 1 !important;
}
#header .header-nav .left-nav > *,
#header .header-nav .right-nav > *,
#header .header-nav .user-info,
#header .header-nav .blockcart {
  min-height: 46px !important;
  height: 46px !important;
  align-items: center !important;
}
@media (max-width: 767px) {
  #header .header-nav .language-selector-wrapper,
  #header .header-nav .language-selector-wrapper .language-selector > button,
  #header .header-nav .left-nav > *,
  #header .header-nav .right-nav > *,
  #header .header-nav .user-info,
  #header .header-nav .blockcart {
    min-height: 42px !important;
    height: 42px !important;
  }
}
@media (min-width: 768px) {
  #header .header-nav .container {
    width: 100%;
  }
  #header .header-nav .container > .row {
    width: 100%;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  #header .header-nav .container > .row > .hidden-sm-down {
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #header .header-nav .container > .row > .hidden-sm-down > .col-md-5 {
    float: none !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #header .header-nav .container > .row > .hidden-sm-down > .right-nav {
    float: none !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 46px !important;
    margin: 0 0 0 auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #header .header-nav .container > .row > .hidden-sm-down > .col-md-5 > *,
  #header .header-nav .container > .row > .hidden-sm-down > .right-nav > * {
    display: flex !important;
    align-items: center !important;
    min-height: 46px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  #header .header-nav .language-selector-wrapper {
    display: flex !important;
    align-items: stretch !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
  }
  #header .header-nav .language-selector-wrapper .language-selector {
    display: flex !important;
    align-items: stretch !important;
    height: 46px !important;
    margin: 0 !important;
  }
  #header .header-nav .language-selector-wrapper .language-selector > button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
  }
  #header .header-nav .user-info {
    display: flex !important;
    align-items: center !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
  }
  #header .header-nav .user-info a {
    display: inline-flex !important;
    align-items: center !important;
    height: 46px !important;
    line-height: 1 !important;
  }
  #header .header-nav .blockcart {
    display: flex !important;
    align-items: stretch !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
  }
  #header .header-nav .blockcart a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 46px !important;
    min-height: 46px !important;
    line-height: 1 !important;
  }
}
/* ==========================================================
   ETHNIC.CH - DESKTOP HEADER V3.6-V3.8 CONSOLIDATED
   Original rules, declarations and media contexts preserved
   ========================================================== */
@media (min-width: 992px) {
  #header .header-nav > .container,
  #header .header-top > .container {
    width: calc(100% - 48px) !important;
    max-width: 1280px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  #header .header-nav {
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 !important;
  }
  #header .header-nav > .container {
    min-height: 46px !important;
    height: 46px !important;
  }
  #header .header-nav > .container > .row {
    display: block !important;
    width: 100% !important;
    height: 46px !important;
    margin: 0 !important;
  }
  #header .header-nav > .container > .row > .hidden-sm-down {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #header .header-nav > .container > .row > .hidden-sm-down > .col-md-5 {
    float: none !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #header .header-nav > .container > .row > .hidden-sm-down > .right-nav {
    float: none !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #header .header-nav > .container > .row > .hidden-sm-down > .col-md-5 > *,
  #header .header-nav > .container > .row > .hidden-sm-down > .right-nav > * {
    display: flex !important;
    align-items: center !important;
    height: 46px !important;
    min-height: 46px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  #header .header-nav > .container > .row > .hidden-sm-down > .col-md-5 > * {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }
  #header .header-nav > .container > .row > .hidden-sm-down > .col-md-5 > *:first-child {
    padding-left: 0 !important;
  }
  #header .header-nav > .container > .row > .hidden-sm-down > .right-nav > * {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }
  #header .header-nav .user-info {
    display: flex !important;
    align-items: center !important;
    height: 46px !important;
    min-height: 46px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #header .header-nav .user-info a {
    display: inline-flex !important;
    align-items: center !important;
    height: 46px !important;
    margin: 0 !important;
    line-height: 1 !important;
  }
  #header .header-nav .language-selector-wrapper {
    display: flex !important;
    align-items: stretch !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #header .header-nav .language-selector-wrapper .language-selector {
    display: flex !important;
    align-items: stretch !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #header .header-nav .language-selector-wrapper .language-selector > button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
  #header .header-nav .blockcart a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
  #header .header-top {
    padding: 14px 0 !important;
  }
  #header .header-top > .container > .row {
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
  }
  #header .header-top #_desktop_logo {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 24px 0 0 !important;
  }
  #header .header-top #_desktop_logo a {
    display: flex !important;
    align-items: center !important;
  }
  #header .header-top #_desktop_logo .logo {
    display: block !important;
    width: auto !important;
    max-width: 190px !important;
    height: auto !important;
    margin: 0 !important;
  }
  #header .header-top .header-top-right {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #header .header-top #_desktop_top_menu {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #header .header-top #_desktop_top_menu .top-menu[data-depth="0"] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #header .header-top #_desktop_top_menu .top-menu[data-depth="0"] > li {
    float: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #header .header-top #_desktop_top_menu .top-menu[data-depth="0"] > li > a {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
  #header .header-top #_desktop_top_menu .top-menu[data-depth="0"] > li:first-child > a {
    padding-left: 0 !important;
  }
  #header .header-top .search-widget {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    float: none !important;
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    margin: 0 0 0 18px !important;
    padding: 0 !important;
    align-self: center !important;
  }
  #header .header-top .search-widget form {
    width: 100% !important;
    margin: 0 !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  #header .header-nav > .container,
  #header .header-top > .container {
    width: calc(100% - 32px) !important;
  }
  #header .header-top > .container > .row {
    grid-template-columns: 185px minmax(0, 1fr) !important;
  }
  #header .header-top #_desktop_logo {
    padding-right: 16px !important;
  }
  #header .header-top #_desktop_logo .logo {
    max-width: 165px !important;
  }
  #header .header-top #_desktop_top_menu .top-menu[data-depth="0"] > li > a {
    padding-right: 7px !important;
    padding-left: 7px !important;
    font-size: 12px !important;
  }
  #header .header-top .search-widget {
    flex-basis: 250px !important;
    width: 250px !important;
    max-width: 250px !important;
    margin-left: 10px !important;
  }
}
@media (min-width: 992px) {
  #header .header-nav .right-nav {
    gap: 0 !important;
  }
  #header .header-nav .language-selector-wrapper {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }
  #header .header-nav .user-info {
    gap: 8px !important;
    padding-right: 18px !important;
    padding-left: 18px !important;
  }
  #header .header-nav .user-info > a + a,
  #header .header-nav .user-info .logout + a,
  #header .header-nav .user-info a + span,
  #header .header-nav .user-info span + a {
    margin-left: 8px !important;
  }
  #header .header-nav .user-info .material-icons {
    margin-right: 7px !important;
  }
  #header .header-top .search-widget {
    position: relative !important;
  }
  #header .header-top .search-widget .ui-autocomplete,
  #header .header-top .search-widget .autocomplete-suggestions,
  #header .header-top .search-widget .search-results,
  #header .header-top .search-widget ul.ui-autocomplete {
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 4px 0 0 !important;
    border: 1px solid #e3e7e5 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14) !important;
    overflow: hidden !important;
    z-index: 1000 !important;
  }
  #header .header-top .search-widget .ui-autocomplete li,
  #header .header-top .search-widget .autocomplete-suggestions > *,
  #header .header-top .search-widget .search-results > * {
    width: 100% !important;
    margin: 0 !important;
  }
  #header .header-top .search-widget .ui-autocomplete li a,
  #header .header-top .search-widget .autocomplete-suggestions a,
  #header .header-top .search-widget .search-results a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 9px 10px !important;
    color: #1b211f !important;
    background: #fff !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
  }
  #header .header-top .search-widget .ui-autocomplete li a:hover,
  #header .header-top .search-widget .autocomplete-suggestions a:hover,
  #header .header-top .search-widget .search-results a:hover {
    background: #f5f7f4 !important;
  }
}
#header .search-widget .ui-autocomplete img,
#header .search-widget .autocomplete-suggestions img,
#header .search-widget .search-results img {
  flex: 0 0 auto !important;
  width: 42px !important;
  height: 42px !important;
  margin-right: 10px !important;
  object-fit: contain !important;
  border-radius: 5px !important;
}
@media (min-width: 992px) {
  #header .header-nav #contact-link {
    display: flex !important;
    align-items: center !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
  }
  #header .header-nav #contact-link > a {
    display: flex !important;
    align-items: center !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 14px !important;
  }
}
/* ==========================================================
   ETHNIC.CH - FINAL DESKTOP CART
   Consolidated V3.9 + CART PILL POLISH
   No intended visual change
   ========================================================== */

@media (min-width: 992px) {

  /* Outer 46px grid cell */
  #header .header-nav .blockcart {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 132px !important;
    height: 46px !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 0 4px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    color: #172000 !important;

    transition:
      background-color 160ms ease,
      box-shadow 160ms ease !important;
  }

  /* Empty cart pill */
  #header .header-nav .blockcart .header {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    width: auto !important;
    min-width: 124px !important;
    height: 38px !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 17px !important;

    border: 1px solid rgba(23, 32, 0, 0.12) !important;
    border-radius: 999px !important;

    background:
      linear-gradient(
        180deg,
        #a8dc1d 0%,
        var(--ethnic-ui-green) 100%
      ) !important;

    box-shadow:
      0 3px 8px rgba(0, 0, 0, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;

    color: #172000 !important;
    line-height: 1 !important;
    white-space: nowrap !important;

    transition:
      transform 150ms ease,
      box-shadow 150ms ease,
      filter 150ms ease !important;
  }

  /* Preserve Classic normalization for any nested cart link. */
  #header .header-nav .blockcart a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #172000 !important;
    text-decoration: none !important;
  }

  /* Filled cart direct-link pill */
  #header .header-nav .blockcart > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    width: auto !important;
    min-width: 124px !important;
    height: 38px !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 17px !important;

    border: 1px solid rgba(23, 32, 0, 0.12) !important;
    border-radius: 999px !important;

    background:
      linear-gradient(
        180deg,
        #a8dc1d 0%,
        var(--ethnic-ui-green) 100%
      ) !important;

    box-shadow:
      0 3px 8px rgba(0, 0, 0, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;

    color: #172000 !important;
    text-decoration: none !important;

    transition:
      transform 150ms ease,
      box-shadow 150ms ease,
      filter 150ms ease !important;
  }

  /* Cart icon */
  #header .header-nav .blockcart .shopping-cart,
  #header .header-nav .blockcart i.material-icons {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    width: 20px !important;
    height: 20px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #172000 !important;

    font-size: 20px !important;
    line-height: 20px !important;
  }

  /* "Panier" */
  #header .header-nav .blockcart .hidden-sm-down {
    display: inline-flex !important;
    align-items: center !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #172000 !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  /* Product count */
  #header .header-nav .blockcart .cart-products-count {
    display: inline-flex !important;
    align-items: center !important;

    margin: 0 0 0 -3px !important;
    padding: 0 !important;

    color: rgba(23, 32, 0, 0.66) !important;

    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }

  #header .header-nav .blockcart:hover {
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Preserve the higher-specificity active-cart behavior from V3.9. */
  #header .header-nav .blockcart.active:hover {
    background: #a7d928 !important;
    box-shadow:
      inset 0 -3px 0 rgba(23, 32, 0, 0.14) !important;
  }

  #header .header-nav .blockcart:hover .header,
  #header .header-nav .blockcart:hover a,
  #header .header-nav .blockcart:hover span,
  #header .header-nav .blockcart:hover i {
    color: #172000 !important;
  }

  #header .header-nav .blockcart:hover .header,
  #header .header-nav .blockcart:hover > a {
    transform: translateY(-1px) !important;
    filter: brightness(1.035) !important;

    box-shadow:
      0 5px 12px rgba(0, 0, 0, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
  }

  #header .header-nav .blockcart:active .header,
  #header .header-nav .blockcart:active > a {
    transform: translateY(0) scale(0.98) !important;

    box-shadow:
      0 2px 5px rgba(0, 0, 0, 0.16),
      inset 0 1px 2px rgba(23, 32, 0, 0.08) !important;
  }

}

/* =========================================================
   ETHNIC_CANONICAL_UI_V1_START

   Canonical Ethnic.ch storefront UI.

   Direction:
   - mandatory Ethnic green preserved
   - tobacco / growshop / workshop palette
   - matte surfaces, no luxury-metal effect
   - globally normalized product cards
   - neutral full-width product information
   - unified controls and buttons

   This block supersedes the discarded experimental V1-V8
   UI passes. Those blocks are intentionally absent.
   ========================================================= */



/* =========================================================
   1. PAGE SURFACES
   ========================================================= */

#wrapper {
  background: var(--ethnic-page);
  color: var(--ethnic-text);
}

#wrapper > .container,
#content-wrapper,
#main {
  background: transparent;
}

#main h1,
#main h2,
#main h3,
#main h4,
#main h5,
#main h6 {
  color: var(--ethnic-text);
}

#main p,
#main .text-muted {
  color: var(--ethnic-text-muted);
}


/* =========================================================
   2. PRODUCT PAGE MAIN PANEL
   ========================================================= */

body#product #main .product-container {
  background: var(--ethnic-white);
  border: 1px solid var(--ethnic-border);
  border-radius: var(--ethnic-radius-lg);
  box-shadow: var(--ethnic-shadow);

  padding: 28px;
  margin-bottom: 30px;

  align-items: flex-start;
}

body#product .product-information {
  padding: 6px 4px 18px 22px;
}

body#product .current-price,
body#product .product-price {
  color: var(--ethnic-text);
  font-weight: 800;
}

body#product .tax-shipping-delivery-label {
  color: #79827b;
}


/* =========================================================
   3. VARIANTS
   ========================================================= */

body#product .product-variants {
  margin-top: 22px;
}

body#product .product-variants .product-variants-item {
  margin-bottom: 19px;
}

body#product .product-variants .control-label,
body#product .product-variants .product-variants-item > span {
  display: block;
  margin-bottom: 8px;

  color: #29342c;
  font-weight: 700;
}

body#product .product-variants select,
body#product .product-variants .form-control {
  min-height: 46px;

  background: #fafbf9;
  border: 1px solid var(--ethnic-border);
  border-radius: 11px;

  color: var(--ethnic-text);

  box-shadow: none;
}

body#product .product-variants select:focus,
body#product .product-variants .form-control:focus {
  border-color: var(--ethnic-green);

  box-shadow:
    0 0 0 3px rgba(153, 202, 27, 0.14);
}


/* =========================================================
   4. QUANTITY + ADD TO CART
   ========================================================= */

body#product .product-add-to-cart {
  margin-top: 24px;
  padding-top: 20px;

  border-top: 1px solid #e4e9e2;
}

body#product .product-add-to-cart .product-quantity {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;

  gap: 12px;
}

body#product .bootstrap-touchspin {
  overflow: hidden;

  background: var(--ethnic-white);

  border: 1px solid var(--ethnic-border);
  border-radius: var(--ethnic-radius-md);

  box-shadow:
    0 3px 10px rgba(24, 33, 26, 0.04);
}

body#product #quantity_wanted,
body#product .bootstrap-touchspin input {
  width: 66px;
  min-height: 50px;
  height: 50px;

  background: var(--ethnic-white);

  border: 0 !important;

  color: var(--ethnic-text);

  font-weight: 700;
  text-align: center;

  box-shadow: none !important;
}

body#product .bootstrap-touchspin .input-group-btn-vertical {
  display: flex;
  flex-direction: column;
}

body#product .bootstrap-touchspin .btn-touchspin {
  width: 38px;
  min-width: 38px;
  height: 25px;
  min-height: 25px;

  padding: 0;

  background: #f1f4ef !important;

  border: 0 !important;
  border-left: 1px solid #dce3da !important;
  border-radius: 0 !important;

  color: #28332a !important;

  box-shadow: none !important;
}

body#product .bootstrap-touchspin .btn-touchspin:first-child {
  border-bottom: 1px solid #dce3da !important;
}


/* =========================================================
   5. BUTTON SYSTEM
   ========================================================= */

#main .btn,
#main button.btn,
#main input.btn {
  min-height: 46px;

  border-radius: var(--ethnic-radius-md);

  font-weight: 750;
  letter-spacing: 0.01em;

  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

#main .btn-primary,
body#product .add-to-cart {
  background:
    linear-gradient(
      180deg,
      #a9d13c 0%,
      var(--ethnic-green) 100%
    ) !important;

  border-color: #8fb923 !important;

  color: #222d1b !important;

  box-shadow:
    0 5px 14px rgba(125, 157, 36, 0.16);
}

#main .btn-primary:hover,
body#product .add-to-cart:hover {
  background:
    linear-gradient(
      180deg,
      #9fc735 0%,
      #8eb721 100%
    ) !important;

  color: #182015 !important;

  transform: translateY(-1px);

  box-shadow:
    0 8px 18px rgba(120, 151, 34, 0.22);
}

body#product .product-add-to-cart .add-to-cart {
  min-width: 218px;
  min-height: 50px;

  padding: 0 25px;
}


/* =========================================================
   6. PRODUCT SECTIONS
   ========================================================= */

.featured-products,
.product-accessories,
.products-section {
  background:
    linear-gradient(
      180deg,
      #e6ebe3 0%,
      var(--ethnic-section) 100%
    );

  border: 1px solid var(--ethnic-section-border);
  border-radius: 20px;

  padding: 28px 24px 32px;

  margin-top: 28px;
  margin-bottom: 32px;
}

.featured-products .products-section-title,
.product-accessories .products-section-title,
.featured-products > h2,
.product-accessories > h2 {
  color: var(--ethnic-text);

  font-weight: 800;
}


/* =========================================================
   7. GLOBAL PRODUCT CARD GEOMETRY
   ========================================================= */

.products .product-miniature,
.featured-products .product-miniature,
.product-accessories .product-miniature {
  margin-bottom: 28px !important;
}

.products .product-miniature .thumbnail-container,
.featured-products .product-miniature .thumbnail-container,
.product-accessories .product-miniature .thumbnail-container {
  display: flex;
  flex-direction: column;

  height: 100%;

  overflow: hidden;

  background: var(--ethnic-panel-3);

  border: 1px solid rgba(59, 47, 38, 0.18);
  border-radius: var(--ethnic-radius-lg);

  box-shadow: var(--ethnic-shadow);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.products .product-miniature .thumbnail-container:hover,
.featured-products .product-miniature .thumbnail-container:hover,
.product-accessories .product-miniature .thumbnail-container:hover {
  transform: translateY(-3px);

  box-shadow: var(--ethnic-shadow-hover);
}


/* =========================================================
   8. NORMALIZED PRODUCT IMAGE AREA
   ========================================================= */

.products .product-miniature .thumbnail-top,
.featured-products .product-miniature .thumbnail-top,
.product-accessories .product-miniature .thumbnail-top {
  position: relative;

  width: 100%;
  height: auto;
  min-height: 0;

  aspect-ratio: 1 / 1;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: var(--ethnic-green);

  border-radius:
    var(--ethnic-radius-lg)
    var(--ethnic-radius-lg)
    0
    0;
}

.products .product-miniature .product-thumbnail,
.featured-products .product-miniature .product-thumbnail,
.product-accessories .product-miniature .product-thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  background: var(--ethnic-green);
}

.products .product-miniature .product-thumbnail img,
.featured-products .product-miniature .product-thumbnail img,
.product-accessories .product-miniature .product-thumbnail img {
  display: block;

  width: 100%;
  height: 100%;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
}


/* =========================================================
   9. PRODUCT CARD CONTENT
   Tobacco / workshop, matte rather than glossy.
   ========================================================= */

.products .product-miniature .product-description,
.featured-products .product-miniature .product-description,
.product-accessories .product-miniature .product-description {
  position: relative !important;

  flex: 1 0 124px;

  min-height: 124px;

  display: flex;
  flex-direction: column;

  padding: 14px 16px 15px;

  background:
    linear-gradient(
      160deg,
      var(--ethnic-panel-1) 0%,
      var(--ethnic-panel-2) 42%,
      var(--ethnic-panel-3) 72%,
      var(--ethnic-panel-deep) 100%
    ) !important;

  border-top:
    3px solid rgba(153, 202, 27, 0.72);

  border-radius:
    0
    0
    var(--ethnic-radius-lg)
    var(--ethnic-radius-lg) !important;

  overflow: hidden;

  color: var(--ethnic-cream);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045);
}

.products .product-miniature .product-description::before,
.featured-products .product-miniature .product-description::before,
.product-accessories .product-miniature .product-description::before {
  content: none !important;
  display: none !important;
}


/* =========================================================
   9B. PRODUCT CARD META
   Manufacturer when useful, empty alignment slot otherwise.
   ========================================================= */

.products .product-miniature .product-card-meta,
.featured-products .product-miniature .product-card-meta,
.product-accessories .product-miniature .product-card-meta {
  margin: 0 0 4px;

  overflow: hidden;

  color: rgba(245, 240, 231, 0.68);

  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.15;

  letter-spacing: 0.065em;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}




/* =========================================================
   10. PRODUCT TITLE
   ========================================================= */

.products .product-miniature .product-title,
.featured-products .product-miniature .product-title,
.product-accessories .product-miniature .product-title {
  min-height: 41px;
  max-height: 41px;

  display: -webkit-box;

  margin: 0 0 6px;

  overflow: hidden;

  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;

  line-height: 1.4;
  text-align: center;
}

.products .product-miniature .product-title a,
.featured-products .product-miniature .product-title a,
.product-accessories .product-miniature .product-title a {
  color: var(--ethnic-cream) !important;

  font-weight: 700;
}

.products .product-miniature .product-title a:hover,
.featured-products .product-miniature .product-title a:hover,
.product-accessories .product-miniature .product-title a:hover {
  color: var(--ethnic-green-soft) !important;
}


/* =========================================================
   11. PRICE
   ========================================================= */

.products .product-miniature .product-price-and-shipping,
.featured-products .product-miniature .product-price-and-shipping,
.product-accessories .product-miniature .product-price-and-shipping {
  align-self: stretch;

  margin-top: auto;
  padding: 4px 0 0;

  background: transparent;

  border: 0;
  border-radius: 0;

  color: var(--ethnic-cream) !important;

  font-weight: 800;
  text-align: center;

  box-shadow: none;
}

.products .product-miniature .price,
.featured-products .product-miniature .price,
.product-accessories .product-miniature .price {
  color: var(--ethnic-cream) !important;

  font-size: 1.02rem;
  font-weight: 850;

  letter-spacing: 0.01em;
}

.products .product-miniature .regular-price,
.featured-products .product-miniature .regular-price,
.product-accessories .product-miniature .regular-price {
  color: var(--ethnic-cream-muted) !important;
}


/* =========================================================
   12. QUICK VIEW
   ========================================================= */

.products .highlighted-informations,
.featured-products .highlighted-informations,
.product-accessories .highlighted-informations {
  background:
    linear-gradient(
      90deg,
      #303832 0%,
      #4c574d 50%,
      #303832 100%
    ) !important;

  border-top:
    1px solid rgba(245, 240, 231, 0.08);
}

.products .quick-view,
.featured-products .quick-view,
.product-accessories .quick-view {
  color: var(--ethnic-cream) !important;
}

.products .quick-view:hover,
.featured-products .quick-view:hover,
.product-accessories .quick-view:hover {
  color: var(--ethnic-green-soft) !important;
}


/* =========================================================
   13. PRODUCT FLAGS + WISHLIST
   ========================================================= */

.products .product-flags .product-flag,
.featured-products .product-flags .product-flag,
.product-accessories .product-flags .product-flag {
  background: rgba(250, 252, 249, 0.96) !important;

  color: #202921 !important;

  border:
    1px solid rgba(28, 38, 30, 0.08);

  border-radius: 999px;

  padding: 7px 11px;

  font-size: 0.72rem;
  font-weight: 800;

  box-shadow:
    0 4px 12px rgba(20, 30, 22, 0.07);
}


/* Out-of-stock is informational, not an action.
   ETHNIC_STOCK_BADGE_COLOR_V5
 */

.products .product-flags .product-flag.out_of_stock,
.featured-products .product-flags .product-flag.out_of_stock,
.product-accessories .product-flags .product-flag.out_of_stock {
  display: flex;
  align-items: center;

  width: max-content;

  gap: 6px;

  background:
    linear-gradient(
      145deg,
      #c98a83 0%,
      #b86d68 52%,
      #9f5555 100%
    ) !important;

  color: #fffaf8 !important;

  border:
    1px solid rgba(112, 55, 56, 0.42);

  text-transform: none !important;
  letter-spacing: 0.01em;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -1px 0 rgba(91,42,43,0.14),
    0 4px 12px rgba(76,43,42,0.14);
}

.products .product-flags .product-flag.out_of_stock::before,
.featured-products .product-flags .product-flag.out_of_stock::before,
.product-accessories .product-flags .product-flag.out_of_stock::before {
  content: "";

  flex: 0 0 6px;

  width: 6px;
  height: 6px;

  background: #f5d9d5;

  border-radius: 50%;

  box-shadow:
    0 0 0 3px rgba(245, 217, 213, 0.18);
}

/* ETHNIC_PRODUCT_PAGE_STOCK_DEPTH_V1
   Main product-page badge only.
   Product-card and review-modal flags are intentionally excluded.

   ETHNIC_STOCK_BADGE_COLOR_V5
   Geometry preserved exactly.
 */

body#product #main section#content.page-content
  > .product-flags
  > .product-flag.out_of_stock {
  position: relative;

  z-index: 3;

  background:
    linear-gradient(
      145deg,
      #c98a83 0%,
      #b86d68 52%,
      #9f5555 100%
    ) !important;

  border:
    1px solid rgba(112, 55, 56, 0.42) !important;

  color: #fffaf8 !important;

  text-shadow:
    0 1px 1px rgba(75, 30, 31, 0.24);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(91,42,43,0.16),
    0 3px 4px rgba(67,35,35,0.16),
    0 10px 16px rgba(67,35,35,0.15),
    0 22px 32px rgba(67,35,35,0.10) !important;

  /*
   * APPROVED POSITION.
   * DO NOT ALTER.
   */
  transform: translate(-24px, -2px);
}
.products .wishlist-button-add,
.featured-products .wishlist-button-add,
.product-accessories .wishlist-button-add,
.product-miniature .wishlist-button-add {
  background: rgba(255,255,255,0.96) !important;

  border:
    1px solid #d7dfd5 !important;

  border-radius: 50% !important;

  box-shadow:
    0 5px 13px rgba(24,34,27,0.08);
}


/* =========================================================
   14. FULL WIDTH PRODUCT TABS
   ========================================================= */

body#product .ethnic-product-tabs-wide {
  display: block;

  width: 100%;
  clear: both;

  margin: 30px 0 34px;
}

body#product .ethnic-product-tabs-wide .tabs {
  width: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  background: var(--ethnic-white);

  border: 1px solid var(--ethnic-border);
  border-radius: var(--ethnic-radius-lg);

  box-shadow: var(--ethnic-shadow);
}

body#product .ethnic-product-tabs-wide .nav-tabs {
  margin: 0;
  padding: 0 28px;

  background:
    linear-gradient(
      180deg,
      #f3f6f1 0%,
      #e7ece4 100%
    );

  border-bottom: 1px solid var(--ethnic-border);
}

body#product .ethnic-product-tabs-wide .nav-tabs .nav-item {
  margin: 0 24px 0 0;
}

body#product .ethnic-product-tabs-wide .nav-tabs .nav-link {
  position: relative;

  padding: 18px 2px 15px;

  background: transparent;
  border: 0;

  color: #657067;

  font-weight: 700;
}

body#product .ethnic-product-tabs-wide .nav-tabs .nav-link.active {
  color: var(--ethnic-text);
}

body#product .ethnic-product-tabs-wide .nav-tabs .nav-link.active::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: -1px;

  height: 3px;

  background: var(--ethnic-green);

  border-radius: 3px 3px 0 0;
}

body#product .ethnic-product-tabs-wide .tab-content {
  padding: 28px 30px 32px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8faf7 100%
    ) !important;

  color: #4f5a52;

  line-height: 1.72;
}

body#product .ethnic-product-tabs-wide .product-description {
  display: block !important;

  min-height: 0 !important;
  max-height: none !important;

  padding: 0 !important;

  background: transparent !important;

  color: #4f5a52 !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  overflow: visible !important;
}


/* =========================================================
   15. BREADCRUMB
   ========================================================= */

#wrapper .breadcrumb {
  margin-bottom: 20px;

  background: transparent;
}

#wrapper .breadcrumb,
#wrapper .breadcrumb a {
  color: #667168;
}


/* =========================================================
   16. RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {

  body#product #main .product-container {
    padding: 20px;
  }

  body#product .product-information {
    padding-left: 0;
    padding-top: 22px;
  }

  .featured-products,
  .product-accessories,
  .products-section {
    padding: 22px 16px 26px;

    border-radius: 16px;
  }

}


@media (max-width: 767px) {

  #wrapper {
    background: #edf1eb;
  }

  body#product #main .product-container {
    padding: 16px;

    border-radius: 15px;
  }

  body#product .product-add-to-cart .add-to-cart {
    width: 100%;
    min-width: 180px;
  }

  .featured-products,
  .product-accessories,
  .products-section {
    padding: 18px 12px 22px;
  }

  .products .product-miniature,
  .featured-products .product-miniature,
  .product-accessories .product-miniature {
    margin-bottom: 20px !important;
  }

  body#product .ethnic-product-tabs-wide {
    margin-top: 22px;
    margin-bottom: 26px;
  }

  body#product .ethnic-product-tabs-wide .nav-tabs {
    padding: 0 16px;

    overflow-x: auto;

    flex-wrap: nowrap;
  }

  body#product .ethnic-product-tabs-wide .nav-tabs .nav-item {
    flex: 0 0 auto;

    margin-right: 18px;
  }

  body#product .ethnic-product-tabs-wide .tab-content {
    padding: 21px 18px 24px;
  }

}



/* =========================================================
   17. QUICKVIEW CANONICAL UI
   Same interaction language as the full product page.
   ========================================================= */

.quickview .modal-dialog {
  width: calc(100% - 40px);
  max-width: 1120px;

  margin-left: auto;
  margin-right: auto;
}

.quickview .modal-content {
  overflow: hidden;

  background: var(--ethnic-white);

  border: 1px solid var(--ethnic-border);
  border-radius: var(--ethnic-radius-lg);

  box-shadow:
    0 24px 60px rgba(23, 31, 34, 0.22);
}


/* Header / close */

.quickview .modal-header {
  position: relative;

  min-height: 48px;

  padding: 0;

  background:
    linear-gradient(
      180deg,
      #f4f6f3 0%,
      #e9eeeb 100%
    );

  border: 0;
  border-bottom: 1px solid var(--ethnic-border);
}

.quickview .modal-header .close {
  position: absolute;

  top: 8px;
  right: 12px;

  z-index: 5;

  width: 36px;
  height: 36px;

  margin: 0;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.88);

  border: 1px solid #d9e0dd;
  border-radius: 50%;

  color: #596267;

  font-size: 27px;
  font-weight: 400;
  line-height: 1;

  opacity: 1;

  box-shadow:
    0 4px 12px rgba(27, 35, 38, 0.08);
}

.quickview .modal-header .close:hover {
  background: #ffffff;

  color: var(--ethnic-panel-deep);
}


/* Main two-column body */

.quickview .modal-body {
  padding: 0;

  background: var(--ethnic-white);
}

.quickview .modal-body > .row {
  margin: 0;
}

.quickview .modal-body > .row > .col-md-6:first-child {
  padding: 28px;

  background:
    linear-gradient(
      145deg,
      #edf1ec 0%,
      #e1e7e3 100%
    );

  border-right: 1px solid var(--ethnic-border);
}

.quickview .modal-body > .row > .col-md-6:last-child {
  padding: 30px 34px 32px;

  background: #ffffff;
}

.quickview .modal-body > .row {
  align-items: stretch;
}


/* Product image */

.quickview .product-cover {
  overflow: hidden;

  background: var(--ethnic-green);

  border: 1px solid rgba(48, 61, 66, 0.12);
  border-radius: 14px;
}

.quickview .product-cover img {
  display: block;

  width: 100%;
  height: auto;

  background: var(--ethnic-green);
}

.quickview .product-images {
  /*margin-top: 12px;*/
}

.quickview .product-images .thumb-container {
  margin-right: 8px;
}

.quickview .product-images img,
.quickview .product-images .thumb {
  border-radius: 8px;
}

.quickview .product-images .thumb.selected,
.quickview .product-images .thumb:hover {
  border-color: var(--ethnic-green);
}


/* Product title / price */

.quickview h1.h1 {
  margin: 4px 0 16px;

  color: var(--ethnic-text);

  font-size: clamp(1.8rem, 3vw, 2.45rem);
  font-weight: 800;
  line-height: 1.12;
}

.quickview .current-price,
.quickview .product-price {
  color: var(--ethnic-text);

  font-size: 1.22rem;
  font-weight: 800;
}

.quickview .tax-shipping-delivery-label {
  color: #7a8380;

  font-size: 0.88rem;
}

.quickview #product-description-short {
  margin: 18px 0 20px;

  color: var(--ethnic-text-muted);

  line-height: 1.6;
}


/* Variants */

.quickview .product-variants {
  margin-top: 18px;
}

.quickview .product-variants .product-variants-item {
  margin-bottom: 18px;
}

.quickview .product-variants .control-label,
.quickview .product-variants .product-variants-item > span {
  display: block;

  margin-bottom: 8px;

  color: #29342f;

  font-weight: 700;
}

.quickview .product-variants select,
.quickview .product-variants .form-control {
  min-height: 46px;

  background: #fafbf9;

  border: 1px solid var(--ethnic-border);
  border-radius: 11px;

  color: var(--ethnic-text);

  box-shadow: none;
}

.quickview .product-variants select:focus,
.quickview .product-variants .form-control:focus {
  border-color: var(--ethnic-green);

  box-shadow:
    0 0 0 3px rgba(153, 202, 27, 0.14);
}


/* Quantity / cart */

.quickview .product-add-to-cart {
  margin-top: 22px;
  padding-top: 20px;

  border-top: 1px solid #e2e8e4;
}

.quickview .product-add-to-cart .product-quantity {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;

  gap: 12px;
}

.quickview .bootstrap-touchspin {
  overflow: hidden;

  background: var(--ethnic-white);

  border: 1px solid var(--ethnic-border);
  border-radius: var(--ethnic-radius-md);

  box-shadow:
    0 3px 10px rgba(24, 33, 26, 0.04);
}

.quickview #quantity_wanted,
.quickview .bootstrap-touchspin input {
  width: 66px;
  min-height: 50px;
  height: 50px;

  background: var(--ethnic-white);

  border: 0 !important;

  color: var(--ethnic-text);

  font-weight: 700;
  text-align: center;

  box-shadow: none !important;
}

.quickview .bootstrap-touchspin .input-group-btn-vertical {
  display: flex;
  flex-direction: column;
}

.quickview .bootstrap-touchspin .btn-touchspin {
  width: 38px;
  min-width: 38px;
  height: 25px;
  min-height: 25px;

  padding: 0;

  background: #f1f4f2 !important;

  border: 0 !important;
  border-left: 1px solid #dce3e0 !important;
  border-radius: 0 !important;

  color: var(--ethnic-panel-deep) !important;

  box-shadow: none !important;
}

.quickview .bootstrap-touchspin .btn-touchspin:first-child {
  border-bottom:
    1px solid #dce3e0 !important;
}

.quickview .add-to-cart {
  min-width: 220px;
  min-height: 50px;

  padding: 0 25px;

  background:
    linear-gradient(
      180deg,
      #a9d13c 0%,
      var(--ethnic-green) 100%
    ) !important;

  border: 1px solid #8fb923 !important;
  border-radius: var(--ethnic-radius-md) !important;

  color: #222d1b !important;

  font-weight: 750;

  box-shadow:
    0 5px 14px rgba(125, 157, 36, 0.16);
}

.quickview .add-to-cart:hover {
  background:
    linear-gradient(
      180deg,
      #9fc735 0%,
      #8eb721 100%
    ) !important;

  transform: translateY(-1px);

  box-shadow:
    0 8px 18px rgba(120, 151, 34, 0.22);
}


/* Availability */

.quickview #product-availability,
.quickview .product-availability {
  margin-top: 14px;

  color: #303936 !important;

  font-weight: 700;
}


/* Wishlist */

.quickview .wishlist-button-add,
.quickview .js-wishlist-button-add {
  background: rgba(255,255,255,0.97) !important;

  border: 1px solid #d6deda !important;
  border-radius: 50% !important;

  box-shadow:
    0 5px 13px rgba(24,34,27,0.08);
}


/* Additional-info / notification area */

.quickview .modal-footer {
  padding: 16px 28px 18px;

  background:
    linear-gradient(
      180deg,
      #f3f5f3 0%,
      #e9edeb 100%
    );

  border-top: 1px solid var(--ethnic-border);

  text-align: left;
}

.quickview .product-additional-info {
  width: 100%;
}

.quickview .modal-footer .btn,
.quickview .modal-footer button {
  min-height: 46px;

  border-radius: var(--ethnic-radius-md);

  font-weight: 750;
}


/* Quickview responsive */

@media (max-width: 767px) {

  .quickview .modal-dialog {
    width: calc(100% - 18px);

    margin: 9px auto;
  }

  .quickview .modal-body {
    padding: 20px 18px 22px;
  }

  .quickview .modal-body > .row > .col-md-6:last-child {
    padding-left: 15px;
    padding-right: 15px;
  }

  .quickview h1.h1 {
    font-size: 1.75rem;
  }

  .quickview .add-to-cart {
    width: 100%;
    min-width: 0;
  }

  .quickview .modal-footer {
    padding: 18px;
  }

}

/* ETHNIC_CARD_LINKS_V4_START */
.product-card-meta .product-card-meta-link,
.product-card-meta .product-card-meta-link:visited {
  color: #a6b0b2;
  text-decoration: none;
  transition: color 0.16s ease;
}

.product-card-meta .product-card-meta-link:hover,
.product-card-meta .product-card-meta-link:focus-visible {
  color: var(--ethnic-green);
  text-decoration: none;
}

.product-price-and-shipping .product-card-price-link,
.product-price-and-shipping .product-card-price-link:visited {
  position: relative;
  z-index: 0;
  display: inline-block;
  color: inherit;
  text-decoration: none;
  transition:
    color 0.18s ease,
    transform 0.18s ease;
}

.product-price-and-shipping .product-card-price-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.24rem -0.62rem;
  border: 1px solid var(--ethnic-green);
  border-radius: 999px;
  background: var(--ethnic-green);
  box-shadow: 0 5px 14px rgba(144, 195, 34, 0);
  opacity: 0;
  transform: scale(0.78);
  transition:
    opacity 0.18s ease,
    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.2s ease;
}

.product-price-and-shipping .product-card-price-link:hover,
.product-price-and-shipping .product-card-price-link:focus-visible {
  color: var(--ethnic-panel-deep);
  text-decoration: none;
  transform: translateY(-1px);
}

.product-price-and-shipping .product-card-price-link:hover::before,
.product-price-and-shipping .product-card-price-link:focus-visible::before {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 5px 14px rgba(144, 195, 34, 0.24);
}

.product-card-meta .product-card-meta-link:focus-visible,
.product-price-and-shipping .product-card-price-link:focus-visible {
  outline: 2px solid var(--ethnic-green);
  outline-offset: 2px;
  border-radius: 2px;
}
/* ETHNIC_CARD_LINKS_V4_END */


  /* ==========================================================
     ETHNIC_MOBILE_HEADER_TEMPLATE_V1_START

     Dedicated mobile header structure.
     The template provides:
       menu | centred logo | account + cart

     Side regions are symmetrical at 102px so the logo remains
     centred relative to the viewport.
     ========================================================== */

  @media (max-width: 767px) {

    /* --------------------------------------------------------
       HEADER ROW
       -------------------------------------------------------- */

    #header .header-nav .ethnic-mobile-header {
      position: relative !important;

      display: grid !important;

      grid-template-columns:
        102px
        minmax(0, 1fr)
        102px !important;

      align-items: stretch !important;

      float: none !important;
      clear: both !important;

      width: 100% !important;
      min-width: 100% !important;
      max-width: 100% !important;

      height: 52px !important;
      min-height: 52px !important;

      margin: 0 !important;
      padding: 0 !important;

      background: #171d1b !important;

      box-sizing: border-box !important;

      text-align: initial !important;
    }


    /* --------------------------------------------------------
       LEFT REGION - MENU
       -------------------------------------------------------- */

    #header .ethnic-mobile-header .ethnic-mobile-menu {
      position: relative !important;

      display: flex !important;
      align-items: center !important;
      justify-content: center !important;

      justify-self: start !important;

      float: none !important;

      width: 48px !important;
      height: 52px !important;

      margin: 0 !important;
      padding: 0 !important;

      color: #fff !important;

      background: transparent !important;

      cursor: pointer;
    }

    #header .ethnic-mobile-header .ethnic-mobile-menu i.material-icons {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;

      width: 24px !important;
      height: 24px !important;

      margin: 0 !important;
      padding: 0 !important;

      color: #fff !important;

      font-size: 24px !important;
      line-height: 24px !important;
    }


    /* --------------------------------------------------------
       CENTRE REGION - LOGO
       -------------------------------------------------------- */

    #header .ethnic-mobile-header .ethnic-mobile-logo {
      position: relative !important;

      display: flex !important;
      align-items: center !important;
      justify-content: center !important;

      float: none !important;

      min-width: 0 !important;

      width: 100% !important;
      height: 52px !important;

      margin: 0 !important;
      padding: 0 6px !important;

      overflow: hidden !important;

      background: transparent !important;

      box-sizing: border-box !important;
    }

    #header .ethnic-mobile-header .ethnic-mobile-logo > h1 {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;

      width: 100% !important;
      height: 52px !important;

      margin: 0 !important;
      padding: 0 !important;

      font-size: 0 !important;
      line-height: 0 !important;
    }

    #header .ethnic-mobile-header .ethnic-mobile-logo > h1 > a,
    #header .ethnic-mobile-header .ethnic-mobile-logo > a {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;

      width: 100% !important;
      height: 52px !important;

      margin: 0 !important;
      padding: 0 !important;
    }

    #header .ethnic-mobile-header .ethnic-mobile-logo img {
      display: block !important;

      width: auto !important;
      max-width: 118px !important;

      height: auto !important;
      max-height: 38px !important;

      margin: 0 auto !important;
      padding: 0 !important;

      object-fit: contain !important;
    }


    /* --------------------------------------------------------
       RIGHT REGION
       -------------------------------------------------------- */

    #header .ethnic-mobile-header .ethnic-mobile-actions {
      display: grid !important;

      grid-template-columns:
        48px
        54px !important;

      align-items: stretch !important;

      justify-self: end !important;

      width: 102px !important;
      height: 52px !important;

      margin: 0 !important;
      padding: 0 !important;

      background: transparent !important;
    }


    /* --------------------------------------------------------
       ACCOUNT
       -------------------------------------------------------- */

    #header .ethnic-mobile-header #_mobile_user_info {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;

      float: none !important;

      width: 48px !important;
      height: 52px !important;

      margin: 0 !important;
      padding: 0 !important;

      border-left:
        1px solid rgba(255, 255, 255, 0.055);

      background: transparent !important;
    }

    #header .ethnic-mobile-header #_mobile_user_info .user-info {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;

      width: 48px !important;
      height: 52px !important;

      margin: 0 !important;
      padding: 0 !important;
    }

    /*
     * Desktop-only content must stay hidden.
     */

    #header .ethnic-mobile-header #_mobile_user_info a.logout,
    #header .ethnic-mobile-header #_mobile_user_info a.logout.hidden-sm-down,
    #header .ethnic-mobile-header #_mobile_user_info a.account span.hidden-sm-down {
      display: none !important;
    }

    #header .ethnic-mobile-header #_mobile_user_info a.account {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;

      width: 48px !important;
      height: 52px !important;

      margin: 0 !important;
      padding: 0 !important;

      color: #fff !important;

      background: transparent !important;

      text-decoration: none !important;
    }

    #header .ethnic-mobile-header #_mobile_user_info a.account i.material-icons {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;

      width: 22px !important;
      height: 22px !important;

      margin: 0 !important;
      padding: 0 !important;

      color: #fff !important;

      font-size: 21px !important;
      line-height: 22px !important;
    }


    /* --------------------------------------------------------
       CART
       -------------------------------------------------------- */

    #header .ethnic-mobile-header #_mobile_cart {
      position: relative !important;

      display: flex !important;
      align-items: center !important;
      justify-content: center !important;

      float: none !important;

      width: 54px !important;
      height: 52px !important;

      margin: 0 !important;
      padding: 0 !important;

      border-left:
        1px solid rgba(255, 255, 255, 0.055);

      background: transparent !important;
    }

    #header .ethnic-mobile-header #_mobile_cart .blockcart,
    #header .ethnic-mobile-header #_mobile_cart .blockcart.active,
    #header .ethnic-mobile-header #_mobile_cart .blockcart.inactive {
      position: relative !important;

      display: flex !important;
      align-items: center !important;
      justify-content: center !important;

      width: 54px !important;
      min-width: 54px !important;
      max-width: 54px !important;

      height: 52px !important;
      min-height: 52px !important;

      margin: 0 !important;
      padding: 0 !important;

      border: 0 !important;
      border-radius: 0 !important;

      background: transparent !important;
      box-shadow: none !important;

      color: #fff !important;
    }

    #header .ethnic-mobile-header #_mobile_cart .header {
      position: relative !important;

      display: flex !important;
      align-items: center !important;
      justify-content: center !important;

      width: 54px !important;
      height: 52px !important;

      margin: 0 !important;
      padding: 0 !important;

      border: 0 !important;
      border-radius: 0 !important;

      background: transparent !important;
      box-shadow: none !important;
    }

    #header .ethnic-mobile-header #_mobile_cart .header > a {
      position: relative !important;

      display: flex !important;
      align-items: center !important;
      justify-content: center !important;

      width: 54px !important;
      height: 52px !important;

      margin: 0 !important;
      padding: 0 !important;

      color: #fff !important;

      text-decoration: none !important;
    }

    #header .ethnic-mobile-header #_mobile_cart .hidden-sm-down {
      display: none !important;
    }

    #header .ethnic-mobile-header #_mobile_cart .shopping-cart,
    #header .ethnic-mobile-header #_mobile_cart i.material-icons {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;

      width: 24px !important;
      height: 24px !important;

      margin: 0 !important;
      padding: 0 !important;

      color: #fff !important;

      font-size: 23px !important;
      line-height: 24px !important;
    }


    /* --------------------------------------------------------
       CART BADGE
       Keep current template unchanged: it still contains "(0)".
       For this template version we do not redesign the count yet.
       -------------------------------------------------------- */
  }

  /* ETHNIC_MOBILE_HEADER_TEMPLATE_V1_END */



/* ETHNIC_CANONICAL_UI_V1_END */

/* ETHNIC_SLIDER_ARROWS_V2_START */
body#index #carousel .carousel-control,
body#index #carousel .carousel-control.left,
body#index #carousel .carousel-control.right {
  position: absolute;
  top: 50%;
  bottom: auto;
  width: 46px;
  height: 46px;
  margin: 0;
  opacity: 1;
  background: none !important;
  background-image: none !important;
  filter: none !important;
  text-shadow: none;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

body#index #carousel .carousel-control.left {
  left: 10px;
}

body#index #carousel .carousel-control.right {
  right: 10px;
}

body#index #carousel .carousel-control::before,
body#index #carousel .carousel-control::after {
  display: none !important;
  content: none !important;
}

body#index #carousel .carousel-control .icon-prev,
body#index #carousel .carousel-control .icon-next {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 999px;
  background: rgba(144, 195, 34, 0.96);
  border: 1px solid rgba(144, 195, 34, 0.96);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  overflow: hidden;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease;
}

body#index #carousel .carousel-control .icon-prev::before,
body#index #carousel .carousel-control .icon-next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
}

body#index #carousel .carousel-control .icon-prev::before {
  transform: rotate(-135deg);
  margin-left: -3px;
}

body#index #carousel .carousel-control .icon-next::before {
  transform: rotate(45deg);
  margin-left: -7px;
}

body#index #carousel .carousel-control:hover .icon-prev,
body#index #carousel .carousel-control:hover .icon-next,
body#index #carousel .carousel-control:focus .icon-prev,
body#index #carousel .carousel-control:focus .icon-next {
  background: var(--ethnic-green);
  border-color: var(--ethnic-green);
  box-shadow: 0 10px 24px rgba(144, 195, 34, 0.28);
  transform: scale(1.06);
}

body#index #carousel .carousel-indicators {
  bottom: 8px;
}

body#index #carousel .carousel-indicators li {
  width: 8px;
  height: 8px;
  margin: 0 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(16, 22, 22, 0.24);
  transition:
    width 0.16s ease,
    background 0.16s ease,
    opacity 0.16s ease;
}

body#index #carousel .carousel-indicators li.active {
  width: 22px;
  background: var(--ethnic-green);
  opacity: 1;
}

@media (max-width: 767px) {
  body#index #carousel .carousel-control,
  body#index #carousel .carousel-control.left,
  body#index #carousel .carousel-control.right {
    width: 44px;
    height: 44px;
  }

  body#index #carousel .carousel-control.left {
    left: 8px;
  }

  body#index #carousel .carousel-control.right {
    right: 8px;
  }

  body#index #carousel .carousel-control .icon-prev,
  body#index #carousel .carousel-control .icon-next {
    width: 38px;
    height: 38px;
  }
}
/* ETHNIC_SLIDER_ARROWS_V2_END */


/* =========================================================
   ETHNIC - Header menu/search + carousel arrows V2
   DOM audited 2026-09-21
   ========================================================= */

/*
 * DESKTOP HEADER
 *
 * Actual DOM:
 *
 * .header-top-right.col-md-10.position-static
 *   #_desktop_top_menu
 *   #search_widget.search-widgets
 *
 * Give both siblings their own real grid column.
 */
@media (min-width: 992px) {

  #header .header-top .header-top-right.col-md-10.position-static {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 220px !important;
    column-gap: 18px !important;
    align-items: center !important;
  }

  #header .header-top .header-top-right.col-md-10.position-static > #_desktop_top_menu {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #header .header-top .header-top-right.col-md-10.position-static > #search_widget.search-widgets {
    position: relative !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    justify-self: end !important;
    z-index: 5;
  }

  #header .header-top .header-top-right.col-md-10.position-static > #search_widget.search-widgets form,
  #header .header-top .header-top-right.col-md-10.position-static > #search_widget.search-widgets input {
    width: 100% !important;
    max-width: 100% !important;
  }

  /*
   * Nine known legacy top-level entries.
   * Let CSS distribute the available menu column between them.
   */
  #header #_desktop_top_menu .top-menu[data-depth="0"] {
    display: grid !important;
    grid-template-columns: repeat(9, max-content) !important;
    justify-content: space-between !important;
    align-items: center !important;
    column-gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  #header #_desktop_top_menu .top-menu[data-depth="0"] > li {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #header #_desktop_top_menu .top-menu[data-depth="0"] > li > a {
    display: block !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-size: 14px !important;
  }

  #header #_desktop_top_menu .popover.sub-menu,
  #header #_desktop_top_menu .js-sub-menu {
    z-index: 30 !important;
  }
}

/* Tighter desktop range */
@media (min-width: 992px) and (max-width: 1199.98px) {

  #header .header-top .header-top-right.col-md-10.position-static {
    grid-template-columns: minmax(0, 1fr) 175px !important;
    column-gap: 12px !important;
  }

  #header .header-top .header-top-right.col-md-10.position-static > #search_widget.search-widgets {
    width: 175px !important;
    min-width: 175px !important;
    max-width: 175px !important;
  }

  #header #_desktop_top_menu .top-menu[data-depth="0"] > li > a {
    font-size: 12px !important;
  }
}

/* Intermediate desktop range */
@media (min-width: 1200px) and (max-width: 1399.98px) {

  #header .header-top .header-top-right.col-md-10.position-static {
    grid-template-columns: minmax(0, 1fr) 195px !important;
    column-gap: 14px !important;
  }

  #header .header-top .header-top-right.col-md-10.position-static > #search_widget.search-widgets {
    width: 195px !important;
    min-width: 195px !important;
    max-width: 195px !important;
  }

  #header #_desktop_top_menu .top-menu[data-depth="0"] > li > a {
    font-size: 13px !important;
  }
}


/* =========================================================
   HOMEPAGE CAROUSEL ARROWS
   Actual DOM:
 *
 * #carousel.carousel.slide
 *   .direction
 *     a.left.carousel-control
 *     a.right.carousel-control
 *
 * .direction must NOT be the positioned containing block.
 * Controls then center against #carousel itself.
   ========================================================= */

body#index #carousel.carousel {
  position: relative !important;
}

body#index #carousel.carousel > .direction {
  position: static !important;
  width: 0 !important;
  height: 0 !important;
}

body#index #carousel.carousel > .direction > .carousel-control,
body#index #carousel.carousel > .direction > .left.carousel-control,
body#index #carousel.carousel > .direction > .right.carousel-control {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  margin-top: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 20 !important;
}

body#index #carousel.carousel > .direction > .left.carousel-control {
  left: 12px !important;
  right: auto !important;
}

body#index #carousel.carousel > .direction > .right.carousel-control {
  left: auto !important;
  right: 12px !important;
}

/* Center the arrow glyph inside the existing circular control */
body#index #carousel.carousel > .direction > .carousel-control .icon-prev,
body#index #carousel.carousel > .direction > .carousel-control .icon-next {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}


/* =========================================================
   ETHNIC - Desktop top-menu underline normalization V3
   Fixes conflicting legacy width + inset underline rules
   Date: 2026-09-21
   ========================================================= */

@media (min-width: 992px) {

  #header #_desktop_top_menu
  .top-menu[data-depth="0"] > li > a::after {
    content: "" !important;
    position: absolute !important;

    left: 0 !important;
    right: auto !important;

    width: 100% !important;
    height: 2px !important;

    bottom: 3px !important;

    margin: 0 !important;

    border-radius: 999px !important;
    background: var(--ethnic-ui-green) !important;

    transform: scaleX(0) !important;
    transform-origin: center !important;

    transition: transform 0.18s ease !important;
  }

  #header #_desktop_top_menu
  .top-menu[data-depth="0"] > li:hover > a::after,

  #header #_desktop_top_menu
  .top-menu[data-depth="0"] > li > a:hover::after {
    width: 100% !important;
    transform: scaleX(1) !important;
  }
}


/* =========================================================
   ETHNIC - Mobile expanded menu layout V4
   Fixes Bootstrap .row horizontal layout in mobile menu
   Date: 2026-09-21
   ========================================================= */

@media (max-width: 991.98px) {

  /*
   * Actual DOM:
   *
   * #mobile_top_menu_wrapper.row
   *   #_mobile_top_menu.js-top-menu.mobile
   *   .js-top-menu-bottom
   *
   * Classic's .row is flex, therefore explicitly stack both
   * children vertically.
   */
  #mobile_top_menu_wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

    width: 100%;
    max-width: 100%;

    margin-right: 0;
    margin-left: 0;

    box-sizing: border-box;
  }

  #mobile_top_menu_wrapper > #_mobile_top_menu,
  #mobile_top_menu_wrapper > .js-top-menu-bottom {
    display: block;

    flex: 0 0 100%;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 0;
    padding-right: 0;
    padding-left: 0;

    float: none;
    box-sizing: border-box;
  }

  /*
   * Main navigation must itself occupy the complete line.
   */
  #mobile_top_menu_wrapper
  #_mobile_top_menu
  .top-menu[data-depth="0"] {
    display: block;

    width: 100%;
    max-width: 100%;

    margin-right: 0;
    margin-left: 0;
    padding: 0;
  }

  #mobile_top_menu_wrapper
  #_mobile_top_menu
  .top-menu[data-depth="0"] > li {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    float: none !important;
    clear: both;
  }

  /*
   * Explicitly keep the first legacy entry (Accueil/Home).
   */
  #mobile_top_menu_wrapper
  #_mobile_top_menu
  .top-menu[data-depth="0"] > li:first-child,
  #mobile_top_menu_wrapper
  #_mobile_top_menu
  .ethnic-top-1 {
    display: block !important;
  }

  #mobile_top_menu_wrapper
  #_mobile_top_menu
  .top-menu[data-depth="0"] > li > a {
    display: block;

    width: 100%;
    max-width: 100%;

    box-sizing: border-box;
  }

  /*
   * Secondary mobile navigation belongs below the complete menu,
   * never beside it.
   */
  #mobile_top_menu_wrapper .js-top-menu-bottom {
    clear: both;
    padding-top: 0.5rem;
    border-top: 1px solid #f6f6f6;
  }

  #mobile_top_menu_wrapper
  .js-top-menu-bottom
  > div {
    display: block;

    width: 100%;
    max-width: 100%;

    margin: 0;

    float: none;
    clear: both;

    box-sizing: border-box;
  }

  #mobile_top_menu_wrapper
  .js-top-menu-bottom
  .language-selector-wrapper,
  #mobile_top_menu_wrapper
  .js-top-menu-bottom
  .currency-selector,
  #mobile_top_menu_wrapper
  .js-top-menu-bottom
  #contact-link {
    display: block;

    width: 100%;
    max-width: 100%;

    box-sizing: border-box;
  }
}


/* =========================================================
   ETHNIC - Mobile bottom links styling V5
   Align language/contact styling with top-level mobile menu
   Date: 2026-09-21
   ========================================================= */

@media (max-width: 991.98px) {

  #mobile_top_menu_wrapper .js-top-menu-bottom {
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  #mobile_top_menu_wrapper
  .js-top-menu-bottom
  .language-selector-wrapper,

  #mobile_top_menu_wrapper
  .js-top-menu-bottom
  #contact-link {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 0.625rem !important;

    color: #232323 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;

    border-bottom: 1px solid #f6f6f6 !important;

    box-sizing: border-box !important;
  }

  /*
   * Language selector:
   * keep "Langue : Français" on one line and inherit menu styling.
   */
  #mobile_top_menu_wrapper
  .js-top-menu-bottom
  .language-selector-wrapper {
    justify-content: flex-start !important;
  }

  #mobile_top_menu_wrapper
  .js-top-menu-bottom
  .language-selector-wrapper
  #language-selector-label,

  #mobile_top_menu_wrapper
  .js-top-menu-bottom
  .language-selector-wrapper
  .language-selector,

  #mobile_top_menu_wrapper
  .js-top-menu-bottom
  .language-selector-wrapper
  .expand-more {
    color: #232323 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  #mobile_top_menu_wrapper
  .js-top-menu-bottom
  .language-selector-wrapper
  .language-selector {
    margin-left: 0.3rem !important;
  }

  /*
   * Contact link: same visual treatment as the menu entries.
   */
  #mobile_top_menu_wrapper
  .js-top-menu-bottom
  #contact-link a {
    display: block !important;

    width: 100% !important;

    padding: 0 !important;
    margin: 0 !important;

    color: #232323 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;

    text-decoration: none !important;
  }

  #mobile_top_menu_wrapper
  .js-top-menu-bottom
  #contact-link a:hover,

  #mobile_top_menu_wrapper
  .js-top-menu-bottom
  .language-selector-wrapper:hover,
  #mobile_top_menu_wrapper
  .js-top-menu-bottom
  .language-selector-wrapper:hover
  .expand-more {
    color: var(--ethnic-ui-green-dark) !important;
  }
}


/* =========================================================
   ETHNIC - Mobile language selector + footer V6
   Date: 2026-09-21
   ========================================================= */

@media (max-width: 767.98px) {

  /* =======================================================
     MOBILE LANGUAGE SELECTOR
     Use the same dropdown component as desktop.
     Hide Classic's native mobile <select>.
     ======================================================= */

  #mobile_top_menu_wrapper
  .language-selector-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;

    min-height: 46px !important;
    width: 100% !important;

    padding: 0.625rem !important;

    border-bottom: 1px solid #f0f1ef !important;

    box-sizing: border-box !important;
  }

  #mobile_top_menu_wrapper
  .language-selector-wrapper
  #language-selector-label {
    display: inline-flex !important;
    align-items: center !important;

    margin: 0 6px 0 0 !important;

    color: #232323 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  #mobile_top_menu_wrapper
  .language-selector-wrapper
  .language-selector {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /*
   * Native Classic mobile selector:
   * remove it so Chrome/Android does not render its own UI.
   */
  #mobile_top_menu_wrapper
  .language-selector-wrapper
  .language-selector
  > select.link {
    display: none !important;
  }

  /*
   * Re-enable the desktop dropdown button on mobile.
   */
  #mobile_top_menu_wrapper
  .language-selector-wrapper
  .language-selector
  > button.hidden-sm-down {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 4px !important;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    color: #232323 !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    cursor: pointer !important;
  }

  #mobile_top_menu_wrapper
  .language-selector-wrapper
  .language-selector
  > button
  .expand-more {
    color: #232323 !important;
  }

  #mobile_top_menu_wrapper
  .language-selector-wrapper
  .language-selector
  > button
  .material-icons {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  /*
   * Mobile dropdown panel.
   */
  #mobile_top_menu_wrapper
  .language-selector-wrapper
  .language-selector
  > .dropdown-menu.hidden-sm-down {
    position: absolute !important;

    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;

    display: none !important;

    min-width: 155px !important;

    margin: 0 !important;
    padding: 6px !important;

    border: 1px solid #e3e7e5 !important;
    border-radius: 8px !important;

    background: #fff !important;

    box-shadow:
      0 10px 28px
      rgba(0, 0, 0, 0.14) !important;

    z-index: 1005 !important;
  }

  /*
   * Support Bootstrap/Classic variants:
   * parent .open, parent .show, menu .show,
   * or aria-expanded=true on the button.
   */
  #mobile_top_menu_wrapper
  .language-selector.open
  > .dropdown-menu.hidden-sm-down,

  #mobile_top_menu_wrapper
  .language-selector.show
  > .dropdown-menu.hidden-sm-down,

  #mobile_top_menu_wrapper
  .language-selector
  > .dropdown-menu.show,

  #mobile_top_menu_wrapper
  .language-selector
  > button[aria-expanded="true"]
  + .dropdown-menu {
    display: block !important;
  }

  #mobile_top_menu_wrapper
  .language-selector
  .dropdown-menu
  li {
    margin: 0 !important;
  }

  #mobile_top_menu_wrapper
  .language-selector
  .dropdown-menu
  .dropdown-item {
    display: block !important;

    width: 100% !important;

    padding: 9px 10px !important;

    border-radius: 6px !important;

    background: transparent !important;
    color: #1b211f !important;

    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;

    text-decoration: none !important;
    white-space: nowrap !important;
  }

  #mobile_top_menu_wrapper
  .language-selector
  .dropdown-menu
  li.current
  .dropdown-item {
    color: #6e9d00 !important;
    background: rgba(149, 202, 19, 0.10) !important;
    font-weight: 700 !important;
  }

  #mobile_top_menu_wrapper
  .language-selector
  .dropdown-menu
  .dropdown-item:hover,

  #mobile_top_menu_wrapper
  .language-selector
  .dropdown-menu
  .dropdown-item:focus {
    color: #172000 !important;
    background: rgba(149, 202, 19, 0.16) !important;
  }


  /* =======================================================
     MOBILE FOOTER ACCORDIONS
     Dark headers + readable light content.
     ======================================================= */

  #footer .footer-container {
    padding-top: 18px !important;
    padding-bottom: 24px !important;
  }

  #footer .footer-container .container {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  #footer .footer-container .links {
    margin-bottom: 10px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;

    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 9px !important;

    background: #fff !important;

    overflow: hidden !important;
  }

  /*
   * Accordion title.
   */
  #footer .footer-container .links .title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    min-height: 48px !important;

    margin: 0 !important;
    padding: 13px 15px !important;

    border: 0 !important;

    background: #1b211f !important;

    cursor: pointer !important;
  }

  #footer .footer-container .links .title .h3,
  #footer .footer-container .links .title .h4,
  #footer .footer-container .links .title span.h3,
  #footer .footer-container .links .title span.h4 {
    margin: 0 !important;

    color: #fff !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-transform: uppercase !important;
  }

  #footer .footer-container
  .links
  .title
  .navbar-toggler,

  #footer .footer-container
  .links
  .title
  .material-icons {
    color: rgba(255,255,255,0.75) !important;
  }

  /*
   * Expanded accordion area.
   */
  #footer .footer-container .links .collapse {
    margin: 0 !important;
    padding: 0 !important;

    background: #fff !important;
    color: #232323 !important;
  }

  #footer .footer-container .links ul {
    margin: 0 !important;
    padding: 0 !important;

    background: #fff !important;
  }

  #footer .footer-container .links ul > li {
    margin: 0 !important;
    padding: 0 !important;

    border-bottom:
      1px solid #edf0ed !important;

    background: #fff !important;
  }

  #footer .footer-container
  .links
  ul > li:last-child {
    border-bottom: 0 !important;
  }

  /*
   * Important specificity fix:
   * beats the global #footer a { color:white-ish } rule.
   */
  #footer .footer-container
  .links
  ul > li > a,

  #footer .footer-container
  .links
  .collapse a {
    display: block !important;

    width: 100% !important;

    padding: 12px 15px !important;

    background: #fff !important;

    color: #232323 !important;

    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;

    text-decoration: none !important;

    box-sizing: border-box !important;
  }

  #footer .footer-container
  .links
  ul > li > a:hover,

  #footer .footer-container
  .links
  .collapse a:hover {
    color: #527900 !important;
    background: rgba(149,202,19,0.10) !important;
  }

  /*
   * Contact / Informations accordion can contain text
   * directly rather than only <li><a>.
   */
  #footer .footer-container
  .block-contact
  #contact-infos,

  #footer .footer-container
  .links
  #contact-infos {
    margin: 0 !important;
    padding: 12px 15px !important;

    background: #fff !important;
    color: #232323 !important;

    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  #footer .footer-container
  .block-contact
  #contact-infos a,

  #footer .footer-container
  .links
  #contact-infos a {
    color: #232323 !important;
  }

  #footer .footer-container
  .block-contact
  #contact-infos a:hover,

  #footer .footer-container
  .links
  #contact-infos a:hover {
    color: #527900 !important;
  }
}


/* ETHNIC_UI_CART_CHECKOUT_V3_START */


/* ============================================================
   HEADER CART

   IMPORTANT:
   .blockcart is the outer 46px cell.
   The rounded clickable child is the visual button.

   The outer cell must NEVER become green.
   ============================================================ */


/*
 * Outer cart slot.
 *
 * High specificity is deliberate here because older Ethnic
 * passes contain:
 *
 * #header .header-nav .blockcart.active:hover
 *
 * which otherwise paints the complete grid cell green.
 */

#header
.header-nav
#_desktop_cart
.blockcart,
#header
.header-nav
#_desktop_cart
.blockcart.active,
#header
.header-nav
#_desktop_cart
.blockcart.inactive,
#header
.header-nav
#_desktop_cart
.blockcart:hover,
#header
.header-nav
#_desktop_cart
.blockcart.active:hover,
#header
.header-nav
#_desktop_cart
.blockcart.inactive:hover,
#header
.header-nav
#_desktop_cart
.blockcart:focus,
#header
.header-nav
#_desktop_cart
.blockcart:focus-within {
    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    filter:
        none !important;

    transform:
        none !important;
}


/*
 * Mobile outer slot too.
 */

#header
#_mobile_cart
.blockcart,
#header
#_mobile_cart
.blockcart.active,
#header
#_mobile_cart
.blockcart.inactive,
#header
#_mobile_cart
.blockcart:hover,
#header
#_mobile_cart
.blockcart.active:hover {
    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    filter:
        none !important;

    transform:
        none !important;
}


/*
 * Actual cart pill.
 *
 * Morphism is created only with:
 * - soft neutral drop shadows
 * - internal highlight
 * - internal lower shade
 *
 * No coloured halo outside.
 */

#header
.header-nav
#_desktop_cart
.blockcart
> a,

#header
.header-nav
#_desktop_cart
.blockcart
.header,

#header
#_mobile_cart
.blockcart
> a,

#header
#_mobile_cart
.blockcart
.header {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        8px !important;

    width:
        auto !important;

    min-width:
        124px !important;

    height:
        38px !important;

    min-height:
        38px !important;

    margin:
        0 !important;

    padding:
        0 16px !important;

    border:
        1px solid
        rgba(
            72,
            94,
            12,
            0.34
        ) !important;

    border-radius:
        999px !important;

    background:
        linear-gradient(
            145deg,
            #afe21b 0%,
            #9ed20f 52%,
            #91c409 100%
        ) !important;

    color:
        #172000 !important;

    line-height:
        1 !important;

    text-decoration:
        none !important;

    /*
     * Soft raised surface.
     */

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.52
        ),

        inset 0 -2px 3px
        rgba(
            55,
            73,
            5,
            0.16
        ),

        0 1px 2px
        rgba(
            0,
            0,
            0,
            0.22
        ),

        0 5px 9px
        rgba(
            0,
            0,
            0,
            0.17
        ) !important;

    transition:
        transform 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease !important;
}


/*
 * Hover affects only the pill.
 */

#header
.header-nav
#_desktop_cart
.blockcart:hover
> a,

#header
.header-nav
#_desktop_cart
.blockcart:hover
.header,

#header
#_mobile_cart
.blockcart:hover
> a,

#header
#_mobile_cart
.blockcart:hover
.header {
    background:
        linear-gradient(
            145deg,
            #b5e825 0%,
            #a5d918 52%,
            #97ca0d 100%
        ) !important;

    transform:
        translateY(-1px) !important;

    filter:
        none !important;

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.60
        ),

        inset 0 -2px 3px
        rgba(
            55,
            73,
            5,
            0.15
        ),

        0 2px 3px
        rgba(
            0,
            0,
            0,
            0.22
        ),

        0 7px 13px
        rgba(
            0,
            0,
            0,
            0.19
        ) !important;
}


/*
 * Pressed state.
 */

#header
.header-nav
#_desktop_cart
.blockcart:active
> a,

#header
.header-nav
#_desktop_cart
.blockcart:active
.header,

#header
#_mobile_cart
.blockcart:active
> a,

#header
#_mobile_cart
.blockcart:active
.header {
    transform:
        translateY(1px) !important;

    box-shadow:
        inset 0 2px 4px
        rgba(
            56,
            74,
            6,
            0.18
        ),

        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.28
        ),

        0 1px 3px
        rgba(
            0,
            0,
            0,
            0.18
        ) !important;
}


/*
 * Cart icon.
 */

#header
.header-nav
#_desktop_cart
.blockcart
.shopping-cart,

#header
#_mobile_cart
.blockcart
.shopping-cart {
    margin:
        0 !important;

    color:
        #172000 !important;

    font-size:
        19px !important;

    line-height:
        1 !important;
}


/*
 * Cart label.
 */

#header
.header-nav
#_desktop_cart
.blockcart
.hidden-sm-down {
    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #172000 !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;
}


/*
 * Product quantity.
 *
 * No background, no border, no shadow.
 * Just readable text with comfortable spacing.
 */

#header
.header-nav
#_desktop_cart
.blockcart
.cart-products-count,

#header
#_mobile_cart
.blockcart
.cart-products-count {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-width:
        0 !important;

    width:
        auto !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 0 0 5px !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    color:
        rgba(
            23,
            32,
            0,
            0.65
        ) !important;

    font-size:
        12px !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;
}


/* ============================================================
   CART PAGE QUANTITY SELECTOR

   V2 visual result was validated.
   Preserve it unchanged.
   ============================================================ */

body#cart .bootstrap-touchspin {
    display:
        inline-flex !important;

    align-items:
        stretch !important;

    width:
        112px !important;

    min-width:
        112px !important;

    height:
        46px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        1px solid #d9e1d3 !important;

    border-radius:
        11px !important;

    background:
        #ffffff !important;

    box-shadow:
        0 3px 10px
        rgba(
            0,
            0,
            0,
            0.075
        ) !important;

    overflow:
        hidden !important;
}


body#cart .bootstrap-touchspin input,
body#cart .bootstrap-touchspin .form-control,
body#cart input.js-cart-line-product-quantity {
    position:
        static !important;

    display:
        block !important;

    flex:
        0 0 69px !important;

    width:
        69px !important;

    min-width:
        69px !important;

    max-width:
        69px !important;

    height:
        44px !important;

    margin:
        0 !important;

    padding:
        0 8px !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        #ffffff !important;

    color:
        #1d2325 !important;

    font-size:
        16px !important;

    font-weight:
        700 !important;

    line-height:
        44px !important;

    text-align:
        center !important;

    box-shadow:
        none !important;

    outline:
        none !important;
}


body#cart
.bootstrap-touchspin
.input-group-btn-vertical {
    position:
        static !important;

    display:
        flex !important;

    flex:
        0 0 42px !important;

    flex-direction:
        column !important;

    width:
        42px !important;

    min-width:
        42px !important;

    height:
        44px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border-left:
        1px solid #d9e1d3 !important;

    background:
        #f4f7f1 !important;
}


body#cart
.bootstrap-touchspin
.input-group-btn-vertical
> .btn {
    position:
        static !important;

    display:
        flex !important;

    flex:
        1 1 50% !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        42px !important;

    min-width:
        42px !important;

    height:
        22px !important;

    min-height:
        22px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        #f4f7f1 !important;

    color:
        #202628 !important;

    box-shadow:
        none !important;
}


body#cart
.bootstrap-touchspin
.input-group-btn-vertical
> .btn:first-child {
    border-bottom:
        1px solid #d9e1d3 !important;
}


body#cart
.bootstrap-touchspin
.input-group-btn-vertical
> .btn:hover {
    background:
        #a4d511 !important;

    color:
        #101609 !important;
}


body#cart
.bootstrap-touchspin
.input-group-btn-vertical
> .btn
i {
    position:
        static !important;

    top:
        auto !important;

    left:
        auto !important;

    margin:
        0 !important;

    font-size:
        15px !important;
}


/* ============================================================
   CHECKOUT HEADER

   Restore Classic's restricted checkout header structure.
   Styling only makes it belong to the same Ethnic visual system.
   ============================================================ */

body#checkout #header {
    position:
        relative !important;

    z-index:
        20 !important;

    background:
        #ffffff !important;

    border-top:
        5px solid #202427 !important;

    border-bottom:
        1px solid #e2e7df !important;

    box-shadow:
        0 4px 16px
        rgba(
            24,
            32,
            20,
            0.07
        ) !important;
}


body#checkout
#header
.header-nav {
    min-height:
        92px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    background:
        #ffffff !important;

    color:
        #202427 !important;

    box-shadow:
        none !important;
}


body#checkout
#header
.header-nav
.container {
    max-width:
        1280px !important;

    min-height:
        92px !important;

    padding-left:
        20px !important;

    padding-right:
        20px !important;
}


body#checkout
#header
.header-nav
.row {
    display:
        flex !important;

    align-items:
        center !important;

    min-height:
        92px !important;
}


body#checkout
#header
#_desktop_logo {
    display:
        flex !important;

    align-items:
        center !important;

    min-height:
        92px !important;
}


body#checkout
#header
#_desktop_logo
.logo {
    width:
        auto !important;

    height:
        auto !important;

    max-width:
        190px !important;

    max-height:
        70px !important;

    margin:
        0 !important;
}


body#checkout
#header
.right-nav {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-end !important;

    min-height:
        92px !important;
}


body#checkout
#header
.header-nav
a {
    color:
        #202427 !important;
}


/*
 * No catalogue desktop menu in checkout.
 * This is intentional.
 */

body#checkout
#header
#_desktop_top_menu,

body#checkout
#header
.search-widget {
    display:
        none !important;
}


/* ============================================================
   CHECKOUT CONTENT
   ============================================================ */

body#checkout #wrapper {
    background:
        #edf3ea !important;
}


body#checkout #content {
    padding-top:
        24px !important;

    padding-bottom:
        34px !important;
}


body#checkout
section.checkout-step {
    margin-bottom:
        16px !important;

    border:
        1px solid #e0e7dc !important;

    border-radius:
        14px !important;

    background:
        #ffffff !important;

    box-shadow:
        0 5px 18px
        rgba(
            0,
            0,
            0,
            0.045
        ) !important;

    overflow:
        hidden !important;
}


body#checkout
.cart-summary {
    border:
        1px solid #e0e7dc !important;

    border-radius:
        14px !important;

    background:
        #ffffff !important;

    box-shadow:
        0 5px 18px
        rgba(
            0,
            0,
            0,
            0.045
        ) !important;
}


/* ============================================================
   CHECKOUT FOOTER

   Restricted footer retained.
   Visual identity aligned with the normal Ethnic footer.
   ============================================================ */

body#checkout
#footer {
    margin-top:
        0 !important;

    padding:
        0 !important;

    border-top:
        3px solid #90c322 !important;

    background:
        #202427 !important;

    color:
        rgba(
            255,
            255,
            255,
            0.74
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.035
        ) !important;
}


body#checkout
#footer
.footer-container,

body#checkout
.footer-container {
    margin:
        0 !important;

    padding:
        26px 0 !important;

    background:
        #202427 !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    color:
        rgba(
            255,
            255,
            255,
            0.74
        ) !important;
}


body#checkout
#footer
.footer-container
.row {
    justify-content:
        center !important;
}


body#checkout
#footer
.footer-container
[class*="col-"] {
    text-align:
        center !important;
}


body#checkout
#footer
p,

body#checkout
#footer
span {
    color:
        rgba(
            255,
            255,
            255,
            0.72
        ) !important;
}


body#checkout
#footer
a {
    color:
        rgba(
            255,
            255,
            255,
            0.82
        ) !important;
}


body#checkout
#footer
a:hover {
    color:
        #a7d928 !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 767.98px) {

    body#checkout #header {
        border-top-width:
            4px !important;
    }


    body#checkout
    #header
    .header-nav {
        min-height:
            68px !important;
    }


    body#checkout
    #header
    .header-nav
    .container,

    body#checkout
    #header
    .header-nav
    .row {
        min-height:
            68px !important;
    }


    body#checkout
    #header
    .logo {
        max-width:
            155px !important;

        max-height:
            54px !important;
    }


    #header
    #_mobile_cart
    .blockcart
    > a,

    #header
    #_mobile_cart
    .blockcart
    .header {
        min-width:
            auto !important;

        height:
            36px !important;

        min-height:
            36px !important;

        padding:
            0 12px !important;
    }


    body#cart
    .bootstrap-touchspin {
        width:
            105px !important;

        min-width:
            105px !important;
    }
}

/* ETHNIC_UI_CART_CHECKOUT_V3_END */


/* ETHNIC_CART_SOFTUI_V5B_START */


/* ============================================================
   CART SLOT
   ============================================================ */

#header
.header-nav
#_desktop_cart,

#header
.header-nav
#_mobile_cart {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    height:
        46px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        transparent !important;
}


/*
 * The .blockcart itself becomes a shallow recessed dock made
 * from the SAME visual family as the dark header.
 */

#header
.header-nav
#_desktop_cart
.blockcart,

#header
.header-nav
#_desktop_cart
.blockcart.active,

#header
.header-nav
#_desktop_cart
.blockcart.inactive,

#header
.header-nav
#_desktop_cart
.blockcart:hover,

#header
.header-nav
#_desktop_cart
.blockcart.active:hover,

#header
.header-nav
#_desktop_cart
.blockcart.inactive:hover,

#header
#_mobile_cart
.blockcart,

#header
#_mobile_cart
.blockcart.active,

#header
#_mobile_cart
.blockcart:hover,

#header
#_mobile_cart
.blockcart.active:hover {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        auto !important;

    min-width:
        132px !important;

    height:
        44px !important;

    min-height:
        44px !important;

    margin:
        0 !important;

    padding:
        3px 4px 5px !important;

    border:
        0 !important;

    border-radius:
        999px !important;

    /*
     * Header-integrated dark cavity.
     */

    background:
        linear-gradient(
            180deg,
            rgba(
                255,
                255,
                255,
                0.025
            ) 0%,
            rgba(
                0,
                0,
                0,
                0.09
            ) 100%
        ) !important;

    box-shadow:
        inset 0 2px 3px
        rgba(
            0,
            0,
            0,
            0.29
        ),

        inset 0 -1px 1px
        rgba(
            255,
            255,
            255,
            0.045
        ),

        0 1px 0
        rgba(
            255,
            255,
            255,
            0.025
        ) !important;

    filter:
        none !important;

    transform:
        none !important;
}


/* ============================================================
   ACTUAL GREEN CONTROL
   ============================================================ */

#header
.header-nav
#_desktop_cart
.blockcart
> a,

#header
.header-nav
#_desktop_cart
.blockcart
.header,

#header
#_mobile_cart
.blockcart
> a,

#header
#_mobile_cart
.blockcart
.header {
    position:
        relative !important;

    overflow:
        hidden !important;

    isolation:
        isolate;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        8px !important;

    width:
        auto !important;

    min-width:
        124px !important;

    height:
        36px !important;

    min-height:
        36px !important;

    margin:
        0 !important;

    padding:
        0 15px !important;

    border:
        1px solid
        rgba(
            54,
            72,
            4,
            0.48
        ) !important;

    border-radius:
        999px !important;

    /*
     * Soft plastic / tactile green.
     */

    background:
        linear-gradient(
            180deg,
            #bce92d 0%,
            #addf1d 16%,
            #9fd20f 54%,
            #90bf08 100%
        ) !important;

    color:
        #172000 !important;

    text-decoration:
        none !important;

    /*
     * Most depth is internal now.
     * External shadow remains short so it feels attached.
     */

    box-shadow:
        inset 0 2px 1px
        rgba(
            255,
            255,
            255,
            0.68
        ),

        inset 0 -3px 4px
        rgba(
            48,
            65,
            3,
            0.25
        ),

        inset 1px 0 1px
        rgba(
            255,
            255,
            255,
            0.12
        ),

        inset -1px 0 1px
        rgba(
            45,
            58,
            4,
            0.10
        ),

        0 1px 0
        rgba(
            37,
            46,
            20,
            0.52
        ),

        0 3px 4px
        rgba(
            0,
            0,
            0,
            0.19
        ) !important;

    transform:
        translateY(0) !important;

    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        background 140ms ease !important;
}


/*
 * Curved highlight following the button surface.
 */

#header
.header-nav
#_desktop_cart
.blockcart
> a::before,

#header
.header-nav
#_desktop_cart
.blockcart
.header::before,

#header
#_mobile_cart
.blockcart
> a::before,

#header
#_mobile_cart
.blockcart
.header::before {
    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    top:
        2px;

    left:
        12px;

    right:
        12px;

    height:
        43%;

    border-radius:
        999px;

    background:
        linear-gradient(
            180deg,
            rgba(
                255,
                255,
                255,
                0.31
            ) 0%,
            rgba(
                255,
                255,
                255,
                0.025
            ) 100%
        );

    pointer-events:
        none;
}


/* ============================================================
   HOVER
   ============================================================ */

#header
.header-nav
#_desktop_cart
.blockcart:hover
> a,

#header
.header-nav
#_desktop_cart
.blockcart:hover
.header,

#header
#_mobile_cart
.blockcart:hover
> a,

#header
#_mobile_cart
.blockcart:hover
.header {
    background:
        linear-gradient(
            180deg,
            #c4ef38 0%,
            #b5e627 16%,
            #a6d816 54%,
            #96c70b 100%
        ) !important;

    /*
     * Just enough movement to feel released from the socket.
     */

    transform:
        translateY(-1px) !important;

    filter:
        none !important;

    box-shadow:
        inset 0 2px 1px
        rgba(
            255,
            255,
            255,
            0.74
        ),

        inset 0 -3px 4px
        rgba(
            48,
            65,
            3,
            0.23
        ),

        inset 1px 0 1px
        rgba(
            255,
            255,
            255,
            0.14
        ),

        inset -1px 0 1px
        rgba(
            45,
            58,
            4,
            0.10
        ),

        0 2px 0
        rgba(
            37,
            46,
            20,
            0.46
        ),

        0 4px 6px
        rgba(
            0,
            0,
            0,
            0.20
        ) !important;
}


/* ============================================================
   ACTIVE / PRESSED
   ============================================================ */

#header
.header-nav
#_desktop_cart
.blockcart:active
> a,

#header
.header-nav
#_desktop_cart
.blockcart:active
.header,

#header
#_mobile_cart
.blockcart:active
> a,

#header
#_mobile_cart
.blockcart:active
.header {
    background:
        linear-gradient(
            180deg,
            #9ecc10 0%,
            #91bf08 100%
        ) !important;

    transform:
        translateY(1px) !important;

    box-shadow:
        inset 0 3px 5px
        rgba(
            44,
            59,
            3,
            0.28
        ),

        inset 0 -1px 0
        rgba(
            255,
            255,
            255,
            0.17
        ),

        0 1px 1px
        rgba(
            0,
            0,
            0,
            0.14
        ) !important;
}


/* ============================================================
   CONTENT
   ============================================================ */

#header
.header-nav
#_desktop_cart
.blockcart
.shopping-cart,

#header
#_mobile_cart
.blockcart
.shopping-cart {
    margin:
        0 !important;

    color:
        #172000 !important;

    font-size:
        18px !important;

    line-height:
        1 !important;
}


#header
.header-nav
#_desktop_cart
.blockcart
.hidden-sm-down {
    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #172000 !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;
}


/*
 * Count is deliberately plain.
 */

#header
.header-nav
#_desktop_cart
.blockcart
.cart-products-count,

#header
#_mobile_cart
.blockcart
.cart-products-count {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        auto !important;

    min-width:
        0 !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 0 0 5px !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    text-shadow:
        none !important;

    color:
        rgba(
            23,
            32,
            0,
            0.68
        ) !important;

    font-size:
        12px !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;
}


/* ============================================================
   SYNTHWEB SIGNATURE
   Preserve V4 footer presentation.
   ============================================================ */

.ethnic-synthweb-signature {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        4px;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size:
        13px;

    line-height:
        1.4;
}


.ethnic-synthweb-signature a {
    color:
        rgba(
            255,
            255,
            255,
            0.92
        ) !important;

    font-weight:
        650;

    text-decoration:
        none;

    border-bottom:
        1px solid
        rgba(
            167,
            217,
            40,
            0.40
        );

    transition:
        color 150ms ease,
        border-color 150ms ease;
}


.ethnic-synthweb-signature a:hover {
    color:
        #a7d928 !important;

    border-bottom-color:
        #a7d928;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    #header
    #_mobile_cart
    .blockcart {
        min-width:
            0 !important;

        height:
            42px !important;

        min-height:
            42px !important;
    }


    #header
    #_mobile_cart
    .blockcart
    > a,

    #header
    #_mobile_cart
    .blockcart
    .header {
        min-width:
            0 !important;

        height:
            34px !important;

        min-height:
            34px !important;

        padding:
            0 11px !important;
    }
}

/* ETHNIC_CART_SOFTUI_V5B_END */

/* ETHNIC_CART_SOFTUI_V5C_START */

/*
 * Make the cart socket readable against the dark header.
 * The light comes mainly from the upper-left edge,
 * while the lower-right remains darker.
 */

#header
.header-nav
#_desktop_cart
.blockcart,

#header
.header-nav
#_desktop_cart
.blockcart.active,

#header
.header-nav
#_desktop_cart
.blockcart.inactive,

#header
.header-nav
#_desktop_cart
.blockcart:hover,

#header
.header-nav
#_desktop_cart
.blockcart.active:hover,

#header
#_mobile_cart
.blockcart,

#header
#_mobile_cart
.blockcart.active,

#header
#_mobile_cart
.blockcart:hover,

#header
#_mobile_cart
.blockcart.active:hover {
    box-shadow:
        inset 0 2px 3px rgba(0, 0, 0, 0.28),
        inset 0 -1px 1px rgba(255, 255, 255, 0.06),

        -2px -2px 5px rgba(255, 255, 255, 0.14),

        3px 4px 7px rgba(0, 0, 0, 0.34)
        !important;
}


/*
 * Give the green control a very small bright rim,
 * without turning it back into a floating card.
 */

#header
.header-nav
#_desktop_cart
.blockcart
> a,

#header
.header-nav
#_desktop_cart
.blockcart
.header,

#header
#_mobile_cart
.blockcart
> a,

#header
#_mobile_cart
.blockcart
.header {
    box-shadow:
        inset 0 2px 1px rgba(255, 255, 255, 0.72),
        inset 0 -3px 4px rgba(48, 65, 3, 0.25),
        inset 1px 0 1px rgba(255, 255, 255, 0.15),
        inset -1px 0 1px rgba(45, 58, 4, 0.10),

        0 0 0 1px rgba(255, 255, 255, 0.09),

        -1px -1px 3px rgba(255, 255, 255, 0.13),

        0 2px 3px rgba(0, 0, 0, 0.20)
        !important;
}


/*
 * Hover: slightly more visible upper light,
 * still restrained so the button stays visually anchored.
 */

#header
.header-nav
#_desktop_cart
.blockcart:hover
> a,

#header
.header-nav
#_desktop_cart
.blockcart:hover
.header,

#header
#_mobile_cart
.blockcart:hover
> a,

#header
#_mobile_cart
.blockcart:hover
.header {
    box-shadow:
        inset 0 2px 1px rgba(255, 255, 255, 0.78),
        inset 0 -3px 4px rgba(48, 65, 3, 0.23),
        inset 1px 0 1px rgba(255, 255, 255, 0.17),
        inset -1px 0 1px rgba(45, 58, 4, 0.10),

        0 0 0 1px rgba(255, 255, 255, 0.12),

        -2px -2px 4px rgba(255, 255, 255, 0.17),

        0 3px 5px rgba(0, 0, 0, 0.22)
        !important;
}

/* ETHNIC_CART_SOFTUI_V5C_END */

/* ETHNIC_SLIDER_SOFTUI_GREEN_V4_START */


/* ============================================================
   ETHNIC.CH SLIDER ARROWS V4
   Fixed geometry in every interaction state.
   ============================================================ */


/*
 * The outer controls remain fixed vertical strips.
 * No hover/focus state may alter their geometry.
 */

body#index #carousel .direction .carousel-control,
body#index #carousel .direction .carousel-control:hover,
body#index #carousel .direction .carousel-control:focus,
body#index #carousel .direction .carousel-control:active {
    position: absolute !important;

    top: 0 !important;
    bottom: 0 !important;

    width: 58px !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-image: none !important;

    opacity: 1 !important;

    transform: none !important;
}


body#index #carousel .direction .carousel-control.left,
body#index #carousel .direction .carousel-control.left:hover,
body#index #carousel .direction .carousel-control.left:focus,
body#index #carousel .direction .carousel-control.left:active {
    left: 0 !important;
    right: auto !important;
}


body#index #carousel .direction .carousel-control.right,
body#index #carousel .direction .carousel-control.right:hover,
body#index #carousel .direction .carousel-control.right:focus,
body#index #carousel .direction .carousel-control.right:active {
    right: 0 !important;
    left: auto !important;
}


/*
 * CRITICAL POSITIONING FIX
 *
 * Do not let Bootstrap / legacy carousel rules decide where
 * .icon-prev and .icon-next sit.
 *
 * Both buttons are absolutely pinned to the exact centre
 * of their 58px control strip.
 */

body#index #carousel .direction .carousel-control .icon-prev,
body#index #carousel .direction .carousel-control .icon-next,

body#index #carousel .direction .carousel-control:hover .icon-prev,
body#index #carousel .direction .carousel-control:hover .icon-next,

body#index #carousel .direction .carousel-control:focus .icon-prev,
body#index #carousel .direction .carousel-control:focus .icon-next,

body#index #carousel .direction .carousel-control:active .icon-prev,
body#index #carousel .direction .carousel-control:active .icon-next {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    width: 40px !important;
    height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    /*
     * This transform is positional, not animated.
     * It is IDENTICAL in every state.
     */
    transform:
        translate(-50%, -50%) !important;

    transform-origin:
        50% 50% !important;

    border:
        1px solid
        rgba(58, 78, 3, 0.55) !important;

    border-radius:
        50% !important;

    background:
        linear-gradient(
            145deg,
            #b6e72b 0%,
            #a8d91c 48%,
            #94c40b 100%
        ) !important;

    color:
        #172000 !important;

    box-shadow:
        inset 1px 1px 1px
        rgba(255, 255, 255, 0.56),

        inset -2px -2px 3px
        rgba(53, 70, 3, 0.26),

        -2px -2px 5px
        rgba(255, 255, 255, 0.18),

        3px 4px 7px
        rgba(0, 0, 0, 0.30)

        !important;

    overflow:
        visible !important;

    text-indent:
        0 !important;

    font-size:
        0 !important;

    line-height:
        0 !important;

    /*
     * Deliberately NO transform transition.
     */
    transition:
        background 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease
        !important;
}


/* ============================================================
   CHEVRONS
   ============================================================ */

body#index #carousel .direction .icon-prev::before,
body#index #carousel .direction .icon-next::before {
    content:
        "" !important;

    position:
        absolute !important;

    top:
        50% !important;

    left:
        50% !important;

    right:
        auto !important;

    bottom:
        auto !important;

    width:
        11px !important;

    height:
        11px !important;

    margin-top:
        -6px !important;

    border-top:
        3px solid #172000 !important;

    border-right:
        3px solid #172000 !important;

    background:
        transparent !important;

    opacity:
        1 !important;

    box-shadow:
        none !important;

    pointer-events:
        none !important;
}


body#index #carousel .direction .icon-prev::before {
    margin-left:
        -4px !important;

    transform:
        rotate(-135deg) !important;
}


body#index #carousel .direction .icon-next::before {
    margin-left:
        -8px !important;

    transform:
        rotate(45deg) !important;
}


/* ============================================================
   HOVER / FOCUS
   Visual change only. Geometry is untouched.
   ============================================================ */

body#index #carousel .direction .carousel-control:hover .icon-prev,
body#index #carousel .direction .carousel-control:hover .icon-next,
body#index #carousel .direction .carousel-control:focus .icon-prev,
body#index #carousel .direction .carousel-control:focus .icon-next {
    top:
        50% !important;

    left:
        50% !important;

    right:
        auto !important;

    bottom:
        auto !important;

    margin:
        0 !important;

    transform:
        translate(-50%, -50%) !important;

    border-color:
        rgba(65, 88, 2, 0.66) !important;

    background:
        linear-gradient(
            145deg,
            #c1ed3d 0%,
            #b2df25 48%,
            #9dcc0f 100%
        ) !important;

    box-shadow:
        inset 1px 1px 1px
        rgba(255, 255, 255, 0.66),

        inset -2px -2px 3px
        rgba(53, 70, 3, 0.24),

        -2px -2px 6px
        rgba(255, 255, 255, 0.22),

        3px 4px 8px
        rgba(0, 0, 0, 0.34)

        !important;
}


/* ============================================================
   ACTIVE
   Same exact coordinates. Only the relief changes.
   ============================================================ */

body#index #carousel .direction .carousel-control:active .icon-prev,
body#index #carousel .direction .carousel-control:active .icon-next {
    top:
        50% !important;

    left:
        50% !important;

    right:
        auto !important;

    bottom:
        auto !important;

    margin:
        0 !important;

    transform:
        translate(-50%, -50%) !important;

    background:
        linear-gradient(
            145deg,
            #96c50d 0%,
            #a8d91c 100%
        ) !important;

    box-shadow:
        inset 3px 3px 5px
        rgba(47, 63, 2, 0.28),

        inset -1px -1px 1px
        rgba(255, 255, 255, 0.28),

        -1px -1px 3px
        rgba(255, 255, 255, 0.13),

        1px 2px 3px
        rgba(0, 0, 0, 0.22)

        !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

    body#index #carousel .direction .carousel-control {
        width:
            46px !important;
    }


    body#index #carousel .direction .carousel-control .icon-prev,
    body#index #carousel .direction .carousel-control .icon-next,

    body#index #carousel .direction .carousel-control:hover .icon-prev,
    body#index #carousel .direction .carousel-control:hover .icon-next,

    body#index #carousel .direction .carousel-control:focus .icon-prev,
    body#index #carousel .direction .carousel-control:focus .icon-next,

    body#index #carousel .direction .carousel-control:active .icon-prev,
    body#index #carousel .direction .carousel-control:active .icon-next {
        top:
            50% !important;

        left:
            50% !important;

        right:
            auto !important;

        width:
            34px !important;

        height:
            34px !important;

        margin:
            0 !important;

        transform:
            translate(-50%, -50%) !important;
    }


    body#index #carousel .direction .icon-prev::before,
    body#index #carousel .direction .icon-next::before {
        width:
            9px !important;

        height:
            9px !important;

        margin-top:
            -5px !important;

        border-top-width:
            2px !important;

        border-right-width:
            2px !important;
    }


    body#index #carousel .direction .icon-prev::before {
        margin-left:
            -3px !important;
    }


    body#index #carousel .direction .icon-next::before {
        margin-left:
            -7px !important;
    }
}


/* ETHNIC_SLIDER_SOFTUI_GREEN_V4_END */

/* ETHNIC_SLIDER_INTERACTION_V6_START */


/* ============================================================
   OUTER CONTROLS
   Freeze the historical normal position in every state.
   ============================================================ */

body#index #carousel .direction a.carousel-control.left,
body#index #carousel .direction a.carousel-control.left:hover,
body#index #carousel .direction a.carousel-control.left:focus,
body#index #carousel .direction a.carousel-control.left:active {
    left: 10px !important;
    right: auto !important;

    top: 0 !important;
    bottom: 0 !important;

    margin: 0 !important;

    transform: none !important;
}


body#index #carousel .direction a.carousel-control.right,
body#index #carousel .direction a.carousel-control.right:hover,
body#index #carousel .direction a.carousel-control.right:focus,
body#index #carousel .direction a.carousel-control.right:active {
    right: 10px !important;
    left: auto !important;

    top: 0 !important;
    bottom: 0 !important;

    margin: 0 !important;

    transform: none !important;
}


/* ============================================================
   BUTTON BASE POSITION
   ============================================================ */

body#index #carousel .direction a.carousel-control.left > .icon-prev,
body#index #carousel .direction a.carousel-control.right > .icon-next {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    margin: 0 !important;

    transform:
        translate(-50%, -50%)
        !important;

    transform-origin:
        50% 50% !important;

    /*
     * Keep the pleasant small return animation.
     */
    transition:
        transform 120ms cubic-bezier(.20, .80, .20, 1),
        background 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease
        !important;
}


/* ============================================================
   FOCUS
   Focus alone must never alter position.
   ============================================================ */

body#index #carousel .direction a.carousel-control.left:focus > .icon-prev,
body#index #carousel .direction a.carousel-control.right:focus > .icon-next {
    transform:
        translate(-50%, -50%)
        !important;
}


/* ============================================================
   DESKTOP MOUSE
   Only 2px outward.
   ============================================================ */

@media (hover: hover) and (pointer: fine) {

    body#index #carousel .direction a.carousel-control.left:hover > .icon-prev {
        transform:
            translate(-50%, -50%)
            translateX(-2px)
            !important;
    }


    body#index #carousel .direction a.carousel-control.right:hover > .icon-next {
        transform:
            translate(-50%, -50%)
            translateX(2px)
            !important;
    }


    body#index #carousel .direction a.carousel-control.left:active > .icon-prev {
        transform:
            translate(-50%, -50%)
            translateX(-2px)
            !important;
    }


    body#index #carousel .direction a.carousel-control.right:active > .icon-next {
        transform:
            translate(-50%, -50%)
            translateX(2px)
            !important;
    }
}


/* ============================================================
   TOUCH
   1. rest = neutral
   2. finger down = 2px outward
   3. release = animated return to neutral

   Sticky :hover and :focus on mobile are neutralised.
   ============================================================ */

@media (hover: none) and (pointer: coarse) {

    /*
     * Preserve historical mobile parent position.
     */

    body#index #carousel .direction a.carousel-control.left,
    body#index #carousel .direction a.carousel-control.left:hover,
    body#index #carousel .direction a.carousel-control.left:focus,
    body#index #carousel .direction a.carousel-control.left:active {
        left: 8px !important;
        right: auto !important;

        transform: none !important;
    }


    body#index #carousel .direction a.carousel-control.right,
    body#index #carousel .direction a.carousel-control.right:hover,
    body#index #carousel .direction a.carousel-control.right:focus,
    body#index #carousel .direction a.carousel-control.right:active {
        right: 8px !important;
        left: auto !important;

        transform: none !important;
    }


    /*
     * Rest / sticky hover / sticky focus:
     * exact same physical position.
     */

    body#index #carousel .direction a.carousel-control.left > .icon-prev,
    body#index #carousel .direction a.carousel-control.left:hover > .icon-prev,
    body#index #carousel .direction a.carousel-control.left:focus > .icon-prev {
        transform:
            translate(-50%, -50%)
            !important;
    }


    body#index #carousel .direction a.carousel-control.right > .icon-next,
    body#index #carousel .direction a.carousel-control.right:hover > .icon-next,
    body#index #carousel .direction a.carousel-control.right:focus > .icon-next {
        transform:
            translate(-50%, -50%)
            !important;
    }


    /*
     * Finger DOWN only.
     */

    body#index #carousel .direction a.carousel-control.left:active > .icon-prev {
        transform:
            translate(-50%, -50%)
            translateX(-2px)
            !important;
    }


    body#index #carousel .direction a.carousel-control.right:active > .icon-next {
        transform:
            translate(-50%, -50%)
            translateX(2px)
            !important;
    }
}


/* ============================================================
   MOBILE SIZE
   ============================================================ */

@media (max-width: 767px) {

    body#index #carousel .direction a.carousel-control.left > .icon-prev,
    body#index #carousel .direction a.carousel-control.right > .icon-next {
        width: 34px !important;
        height: 34px !important;
    }
}


/* ETHNIC_SLIDER_INTERACTION_V6_END */

/* ETHNIC_SLIDER_HOVER_STABILITY_V7_START */

/*
 * IMPORTANT:
 *
 * The visual button moves very slightly on hover / touch.
 * It must therefore never be the element deciding whether
 * the pointer is still hovering the control.
 *
 * Mouse/touch hit-testing belongs exclusively to the fixed
 * carousel-control anchor surrounding it.
 *
 * This prevents the hover -> move -> unhover -> return loop
 * that could make the arrow jitter at very specific cursor
 * positions.
 */

body#index
#carousel
.direction
a.carousel-control
> .icon-prev,

body#index
#carousel
.direction
a.carousel-control
> .icon-next,

body#index
#carousel
.direction
a.carousel-control
> .icon-prev::before,

body#index
#carousel
.direction
a.carousel-control
> .icon-next::before {
    pointer-events:
        none !important;
}


/*
 * The anchor itself remains the sole stable interactive area.
 */

body#index
#carousel
.direction
a.carousel-control {
    cursor:
        pointer !important;
}


/*
 * Small rendering hint for the 2px animation.
 * No geometry or timing is changed.
 */

body#index
#carousel
.direction
a.carousel-control
> .icon-prev,

body#index
#carousel
.direction
a.carousel-control
> .icon-next {
    will-change:
        transform;
}

/* ETHNIC_SLIDER_HOVER_STABILITY_V7_END */

/* ETHNIC_SLIDER_HOVER_STABLE_V8_START */


/* ============================================================
   DESKTOP POINTER STABILITY

   Hover must NEVER change the physical position of the button.
   This removes the possibility of a hover hit-testing loop.

   The existing V4 visual hover styling remains intact:
   gradient, border and shadows still react normally.
   ============================================================ */

@media (hover: hover) and (pointer: fine) {

    /*
     * REST
     */

    body#index
    #carousel
    .direction
    a.carousel-control.left
    > .icon-prev,

    body#index
    #carousel
    .direction
    a.carousel-control.right
    > .icon-next {
        transform:
            translate(-50%, -50%)
            !important;
    }


    /*
     * HOVER
     *
     * EXACTLY the same coordinates as rest.
     * Only visual properties from the previous styling change.
     */

    body#index
    #carousel
    .direction
    a.carousel-control.left:hover
    > .icon-prev,

    body#index
    #carousel
    .direction
    a.carousel-control.right:hover
    > .icon-next {
        transform:
            translate(-50%, -50%)
            !important;
    }


    /*
     * KEYBOARD / FOCUS
     * Also geometrically neutral.
     */

    body#index
    #carousel
    .direction
    a.carousel-control.left:focus
    > .icon-prev,

    body#index
    #carousel
    .direction
    a.carousel-control.right:focus
    > .icon-next {
        transform:
            translate(-50%, -50%)
            !important;
    }


    /*
     * MOUSE BUTTON DOWN
     *
     * A tiny physical movement is safe here because :active
     * ends deterministically when the mouse button is released.
     */

    body#index
    #carousel
    .direction
    a.carousel-control.left:active
    > .icon-prev {
        transform:
            translate(-50%, -50%)
            translateX(-2px)
            !important;
    }


    body#index
    #carousel
    .direction
    a.carousel-control.right:active
    > .icon-next {
        transform:
            translate(-50%, -50%)
            translateX(2px)
            !important;
    }
}


/*
 * Keep the visual button completely outside pointer hit-testing.
 * The fixed carousel-control anchor remains the only hit area.
 */

body#index
#carousel
.direction
a.carousel-control
> .icon-prev,

body#index
#carousel
.direction
a.carousel-control
> .icon-next,

body#index
#carousel
.direction
a.carousel-control
> .icon-prev::before,

body#index
#carousel
.direction
a.carousel-control
> .icon-next::before {
    pointer-events:
        none !important;
}


/* ETHNIC_SLIDER_HOVER_STABLE_V8_END */

/* ETHNIC_SLIDER_PARENT_LOCK_V9_START */


/* ============================================================
   DESKTOP CAROUSEL CONTROL HITBOX LOCK

   Probe-confirmed issue:

   rest:
     left control = 12px

   hover:
     left control = 10px

   That 2px movement changes the hitbox itself and can create:
     hover -> move -> unhover -> return -> hover ...

   The parent control must therefore NEVER move.

   The visual green button remains free to react on :active.
   Mobile/touch behaviour is intentionally left untouched.
   ============================================================ */

@media (hover: hover) and (pointer: fine) {

    /*
     * LEFT CONTROL
     *
     * Extra #content specificity deliberately overrides all
     * historical carousel rules.
     */

    body#index
    #content
    #carousel
    .direction
    > a.carousel-control.left,

    body#index
    #content
    #carousel
    .direction
    > a.carousel-control.left:hover,

    body#index
    #content
    #carousel
    .direction
    > a.carousel-control.left:focus,

    body#index
    #content
    #carousel
    .direction
    > a.carousel-control.left:active {
        position:
            absolute !important;

        top:
            0 !important;

        bottom:
            0 !important;

        left:
            12px !important;

        right:
            auto !important;

        width:
            58px !important;

        height:
            100% !important;

        margin:
            0 !important;

        padding:
            0 !important;

        transform:
            none !important;

        /*
         * The invisible hitbox itself must never animate.
         */
        transition:
            none !important;
    }


    /*
     * RIGHT CONTROL
     */

    body#index
    #content
    #carousel
    .direction
    > a.carousel-control.right,

    body#index
    #content
    #carousel
    .direction
    > a.carousel-control.right:hover,

    body#index
    #content
    #carousel
    .direction
    > a.carousel-control.right:focus,

    body#index
    #content
    #carousel
    .direction
    > a.carousel-control.right:active {
        position:
            absolute !important;

        top:
            0 !important;

        bottom:
            0 !important;

        right:
            12px !important;

        left:
            auto !important;

        width:
            58px !important;

        height:
            100% !important;

        margin:
            0 !important;

        padding:
            0 !important;

        transform:
            none !important;

        transition:
            none !important;
    }
}


/* ETHNIC_SLIDER_PARENT_LOCK_V9_END */


/* ETHNIC_PROMO_UI_V1_START */


/* ============================================================
   ETHNIC.CH PROMOTION SYSTEM V1

   on_sale only:
     polished PROMO badge, no fake reduction.

   real specific_price reduction:
     regular price + highlighted current price + discount badge.

   Display only.
   No pricing logic is modified here.
   ============================================================ */


/* ============================================================
   1. PRODUCT FLAG CONTAINER
   ============================================================ */

.product-miniature .product-flags {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    width: auto !important;

    top: 13px !important;
    left: 13px !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 6px;

    pointer-events: none;

    z-index: 6;
}


/* ============================================================
   2. GENERIC PRODUCT FLAGS
   ============================================================ */

.product-miniature
.product-flags
li.product-flag {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;

    margin: 0 !important;
    padding: 7px 11px !important;

    border-radius: 10px !important;

    font-size: 0.70rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    letter-spacing: 0.045em;
    text-transform: uppercase;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65),
        0 3px 8px rgba(20,26,20,.16) !important;
}


/* ============================================================
   3. SIMPLE "ON SALE" / PROMO FLAG

   Warm accent deliberately different from the green price pill.
   It communicates promotion without pretending a numerical
   reduction exists.
   ============================================================ */

.product-miniature
.product-flags
li.product-flag.on-sale,

body#product
.product-flags
li.product-flag.on-sale {
    width: auto !important;
    min-width: 0 !important;

    padding:
        8px 12px !important;

    border:
        1px solid rgba(126, 74, 20, .44) !important;

    border-radius:
        10px !important;

    background:
        linear-gradient(
            145deg,
            #f2b85f 0%,
            #df9339 52%,
            #c97826 100%
        ) !important;

    color:
        #3b2410 !important;

    font-weight:
        850 !important;

    letter-spacing:
        .055em;

    text-transform:
        uppercase;

    text-shadow:
        0 1px 0 rgba(255,255,255,.30);

    box-shadow:
        inset 1px 1px 1px rgba(255,255,255,.58),
        inset -2px -2px 3px rgba(105,55,12,.18),
        0 3px 8px rgba(36,27,18,.20),
        0 0 0 1px rgba(255,255,255,.12)
        !important;
}


/* ============================================================
   4. REAL DISCOUNT FLAG, WHEN PRESTASHOP PROVIDES ONE
   ============================================================ */

.product-miniature
.product-flags
li.product-flag.discount,

body#product
.product-flags
li.product-flag.discount {
    width: auto !important;
    min-width: 0 !important;

    padding:
        8px 12px !important;

    border:
        1px solid rgba(75, 98, 8, .58) !important;

    border-radius:
        10px !important;

    background:
        linear-gradient(
            145deg,
            #b8e837 0%,
            #a4d41d 52%,
            #8fb70e 100%
        ) !important;

    color:
        #182100 !important;

    font-weight:
        900 !important;

    letter-spacing:
        .035em;

    box-shadow:
        inset 1px 1px 1px rgba(255,255,255,.58),
        inset -2px -2px 3px rgba(47,64,2,.20),
        0 3px 8px rgba(26,35,18,.18)
        !important;
}


/* ============================================================
   5. LISTING PRICE CONTAINER
   ============================================================ */

.products
.product-miniature
.product-price-and-shipping,

.featured-products
.product-miniature
.product-price-and-shipping,

.product-accessories
.product-miniature
.product-price-and-shipping {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    flex-wrap:
        wrap !important;

    column-gap:
        8px;

    row-gap:
        4px;
}


/* ============================================================
   6. LISTING REGULAR PRICE
   Only exists when PrestaShop has_discount = true.
   ============================================================ */

.products
.product-miniature
.product-price-and-shipping
.regular-price,

.featured-products
.product-miniature
.product-price-and-shipping
.regular-price,

.product-accessories
.product-miniature
.product-price-and-shipping
.regular-price {
    position:
        relative;

    margin:
        0 !important;

    color:
        #74756d !important;

    font-size:
        .78rem !important;

    font-weight:
        650 !important;

    line-height:
        1.2;

    opacity:
        .92;

    text-decoration:
        line-through !important;

    text-decoration-thickness:
        1.5px !important;

    text-decoration-color:
        rgba(95, 63, 37, .72) !important;
}


/* ============================================================
   7. LISTING DISCOUNT VALUE
   -20%, -CHF..., etc.
   ============================================================ */

.products
.product-miniature
.discount-percentage.discount-product,

.products
.product-miniature
.discount-amount.discount-product,

.featured-products
.product-miniature
.discount-percentage.discount-product,

.featured-products
.product-miniature
.discount-amount.discount-product,

.product-accessories
.product-miniature
.discount-percentage.discount-product,

.product-accessories
.product-miniature
.discount-amount.discount-product {
    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 !important;

    padding:
        4px 7px !important;

    border:
        1px solid rgba(126,74,20,.40);

    border-radius:
        999px;

    background:
        linear-gradient(
            145deg,
            #f2b85f 0%,
            #db8931 100%
        ) !important;

    color:
        #39210d !important;

    font-size:
        .68rem !important;

    font-weight:
        900 !important;

    line-height:
        1 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.48),
        0 2px 5px rgba(24,26,20,.13);
}


/* ============================================================
   8. LISTING REDUCED CURRENT PRICE

   The general sibling selector only hits .price when a
   .regular-price is present before it, therefore ordinary
   products keep their normal price appearance.
   ============================================================ */

.products
.product-miniature
.product-price-and-shipping
.regular-price
~ .price,

.featured-products
.product-miniature
.product-price-and-shipping
.regular-price
~ .price,

.product-accessories
.product-miniature
.product-price-and-shipping
.regular-price
~ .price {
    color:
        #1f2d15 !important;

    font-size:
        1.06rem !important;

    font-weight:
        900 !important;

    line-height:
        1.1;

    text-shadow:
        0 1px 0 rgba(255,255,255,.46);
}


/* ============================================================
   9. PRODUCT PAGE PROMO BADGES
   Turn the old full-width bar into a floating badge.
   ============================================================ */

body#product #content {
    position:
        relative;
}


body#product
#content
> .product-flags,

body#product
#content
.product-flags {
    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    position:
        absolute !important;

    top:
        15px !important;

    left:
        15px !important;

    right:
        auto !important;

    width:
        auto !important;

    max-width:
        calc(100% - 30px);

    margin:
        0 !important;

    padding:
        0 !important;

    gap:
        7px;

    z-index:
        8;

    pointer-events:
        none;
}


body#product
.product-flags
li.product-flag {
    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        max-content !important;

    margin:
        0 !important;
}


/* ============================================================
   10. PRODUCT DETAIL REAL DISCOUNT
   PrestaShop native product-prices.tpl classes.
   ============================================================ */

body#product
.product-prices
.product-discount {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin:
        0 0 5px;
}


body#product
.product-prices
.product-discount
.regular-price {
    color:
        #7c7b72 !important;

    font-size:
        .95rem !important;

    font-weight:
        650 !important;

    text-decoration:
        line-through !important;

    text-decoration-thickness:
        2px !important;

    text-decoration-color:
        rgba(122, 76, 39, .72) !important;
}


body#product
.product-prices
.current-price {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        10px;
}


body#product
.product-prices
.current-price
.current-price-value {
    font-weight:
        900 !important;
}


body#product
.product-prices
.current-price
.discount,

body#product
.product-prices
.current-price
.discount-percentage,

body#product
.product-prices
.current-price
.discount-amount {
    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 !important;

    padding:
        6px 9px !important;

    border:
        1px solid rgba(126,74,20,.42) !important;

    border-radius:
        999px !important;

    background:
        linear-gradient(
            145deg,
            #f2b85f 0%,
            #dc8c33 100%
        ) !important;

    color:
        #38210e !important;

    font-size:
        .76rem !important;

    font-weight:
        900 !important;

    line-height:
        1 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.48),
        0 2px 6px rgba(29,25,18,.14)
        !important;
}


/* ============================================================
   11. MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .product-miniature
    .product-flags {
        top:
            10px !important;

        left:
            10px !important;
    }


    .product-miniature
    .product-flags
    li.product-flag.on-sale,

    .product-miniature
    .product-flags
    li.product-flag.discount {
        padding:
            6px 9px !important;

        font-size:
            .64rem !important;
    }


    body#product
    #content
    .product-flags {
        top:
            11px !important;

        left:
            11px !important;

        max-width:
            calc(100% - 22px);
    }


    body#product
    .product-flags
    li.product-flag.on-sale,

    body#product
    .product-flags
    li.product-flag.discount {
        padding:
            7px 10px !important;

        font-size:
            .67rem !important;
    }
}


/* ETHNIC_PROMO_UI_V1_END */


/* ETHNIC_PROMO_UI_V2_START */


/* ============================================================
   ETHNIC.CH PROMOTION / STOCK STATUS V2

   - Out of stock keeps its successful geometry and relief.
   - Out of stock becomes semantically red / unavailable.
   - Promo moves left to visually match the stock label.
   - Promo gets a stronger retail-sale colour.
   ============================================================ */


/* ============================================================
   1. OUT OF STOCK
   Geometry intentionally untouched.
   ============================================================ */

.product-miniature
.product-flags
li.product-flag.out_of_stock,

body#product
.product-flags
li.product-flag.out_of_stock {
    border:
        1px solid rgba(105, 27, 30, .62) !important;

    background:
        linear-gradient(
            145deg,
            #cf5b54 0%,
            #b83d3a 52%,
            #8f292d 100%
        ) !important;

    color:
        #fff8f3 !important;

    text-shadow:
        0 1px 1px rgba(62, 11, 13, .42);

    box-shadow:
        inset 1px 1px 1px rgba(255,255,255,.34),
        inset -2px -2px 3px rgba(71,14,17,.24),
        0 3px 8px rgba(55,22,22,.23),
        0 0 0 1px rgba(255,255,255,.08)
        !important;
}


/* ============================================================
   2. PROMO COLOUR
   Stronger sale identity than the V1 amber/orange.
   ============================================================ */

.product-miniature
.product-flags
li.product-flag.on-sale,

body#product
.product-flags
li.product-flag.on-sale {
    border:
        1px solid rgba(123, 21, 55, .58) !important;

    background:
        linear-gradient(
            145deg,
            #f05a7e 0%,
            #dd315e 52%,
            #b81e4c 100%
        ) !important;

    color:
        #fffaf7 !important;

    text-shadow:
        0 1px 1px rgba(80, 8, 31, .42);

    box-shadow:
        inset 1px 1px 1px rgba(255,255,255,.38),
        inset -2px -2px 3px rgba(91,11,38,.24),
        0 3px 8px rgba(61,20,35,.22),
        0 0 0 1px rgba(255,255,255,.09)
        !important;
}


/* ============================================================
   3. PRODUCT PAGE PROMO POSITION

   Current V1 puts the flag ~13-15px inside the image.
   Move only PROMO left by ~22px so it sits like the existing
   out-of-stock label, slightly overlapping the image edge.

   Out-of-stock positioning is deliberately NOT modified.
   ============================================================ */

body#product
#content
.product-flags
li.product-flag.on-sale {
    transform:
        translateX(-22px) !important;
}


/* ============================================================
   4. FUTURE REAL DISCOUNT BADGE
   Keep numerical reductions in the same promo family.
   ============================================================ */

.product-miniature
.product-flags
li.product-flag.discount,

body#product
.product-flags
li.product-flag.discount,

.products
.product-miniature
.discount-percentage.discount-product,

.products
.product-miniature
.discount-amount.discount-product,

.featured-products
.product-miniature
.discount-percentage.discount-product,

.featured-products
.product-miniature
.discount-amount.discount-product,

.product-accessories
.product-miniature
.discount-percentage.discount-product,

.product-accessories
.product-miniature
.discount-amount.discount-product,

body#product
.product-prices
.current-price
.discount,

body#product
.product-prices
.current-price
.discount-percentage,

body#product
.product-prices
.current-price
.discount-amount {
    border-color:
        rgba(123, 21, 55, .52) !important;

    background:
        linear-gradient(
            145deg,
            #f05a7e 0%,
            #dd315e 52%,
            #b81e4c 100%
        ) !important;

    color:
        #fffaf7 !important;

    text-shadow:
        0 1px 1px rgba(80,8,31,.38);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.34),
        0 2px 6px rgba(61,20,35,.18)
        !important;
}


/* ============================================================
   5. MOBILE
   Smaller outward overlap to avoid excessive edge overflow.
   ============================================================ */

@media (max-width: 767px) {

    body#product
    #content
    .product-flags
    li.product-flag.on-sale {
        transform:
            translateX(-14px) !important;
    }
}


/* ETHNIC_PROMO_UI_V2_END */


/* ETHNIC_PROMO_UI_V3_START */

/* ============================================================
   ETHNIC.CH PROMO / STOCK FLAGS V3

   Goals:
   - softer stock red
   - ensure stock color also applies on product page
   - promo becomes gold / amber to avoid confusion with stock
   - keep current positioning logic
   ============================================================ */


/* ============================================================
   1. OUT OF STOCK
   ETHNIC_STOCK_BADGE_COLOR_V5

   Muted brick red.
   Applies to listings + generic product contexts.
   Geometry is intentionally untouched.
   ============================================================ */

.product-miniature .product-flags .product-flag.out_of_stock,
.products .product-flags .product-flag.out_of_stock,
.featured-products .product-flags .product-flag.out_of_stock,
.product-accessories .product-flags .product-flag.out_of_stock,
body#product .product-flags .product-flag.out_of_stock,
body#product #content .product-flags .product-flag.out_of_stock,
body#product .images-container .product-flags .product-flag.out_of_stock,
body#product .product-cover .product-flags .product-flag.out_of_stock {
    border:
        1px solid rgba(112, 55, 56, .42) !important;

    background:
        linear-gradient(
            145deg,
            #c98a83 0%,
            #b86d68 52%,
            #9f5555 100%
        ) !important;

    color:
        #fffaf8 !important;

    text-shadow:
        0 1px 1px rgba(75, 30, 31, .24) !important;

    box-shadow:
        inset 1px 1px 1px rgba(255,255,255,.25),
        inset -2px -2px 3px rgba(91,42,43,.12),
        0 3px 8px rgba(67,35,35,.13),
        0 0 0 1px rgba(255,255,255,.05)
        !important;
}


/* ============================================================
   2. PROMO
   Gold / amber family to clearly separate from stock
   Applies to listings + product page
   ============================================================ */

.product-miniature .product-flags .product-flag.on-sale,
.products .product-flags .product-flag.on-sale,
.featured-products .product-flags .product-flag.on-sale,
.product-accessories .product-flags .product-flag.on-sale,
body#product .product-flags .product-flag.on-sale,
body#product #content .product-flags .product-flag.on-sale,
body#product .images-container .product-flags .product-flag.on-sale,
body#product .product-cover .product-flags .product-flag.on-sale,
.product-miniature .product-flags .product-flag.discount,
.products .product-flags .product-flag.discount,
.featured-products .product-flags .product-flag.discount,
.product-accessories .product-flags .product-flag.discount,
body#product .product-flags .product-flag.discount,
body#product #content .product-flags .product-flag.discount,
body#product .images-container .product-flags .product-flag.discount,
body#product .product-cover .product-flags .product-flag.discount {
    border: 1px solid rgba(146, 111, 31, .55) !important;
    background: linear-gradient(
        145deg,
        #f5df92 0%,
        #e7c15b 52%,
        #d2a338 100%
    ) !important;
    color: #4d3304 !important;
    text-shadow: 0 1px 1px rgba(255,255,255,.28) !important;
    box-shadow:
        inset 1px 1px 1px rgba(255,255,255,.34),
        inset -2px -2px 3px rgba(154, 116, 28, .14),
        0 3px 8px rgba(110, 82, 24, .16),
        0 0 0 1px rgba(255,255,255,.06) !important;
}


/* ============================================================
   3. REAL DISCOUNT BADGES
   Future percentage discounts should use the same gold family
   ============================================================ */

.product-miniature .discount-percentage.discount-product,
.product-miniature .discount-amount.discount-product,
.products .discount-percentage.discount-product,
.products .discount-amount.discount-product,
.featured-products .discount-percentage.discount-product,
.featured-products .discount-amount.discount-product,
.product-accessories .discount-percentage.discount-product,
.product-accessories .discount-amount.discount-product,
body#product .product-prices .current-price .discount,
body#product .product-prices .current-price .discount-percentage,
body#product .product-prices .current-price .discount-amount {
    border: 1px solid rgba(146, 111, 31, .50) !important;
    background: linear-gradient(
        145deg,
        #f5df92 0%,
        #e7c15b 52%,
        #d2a338 100%
    ) !important;
    color: #4d3304 !important;
    text-shadow: 0 1px 1px rgba(255,255,255,.24) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        0 2px 6px rgba(110, 82, 24, .14) !important;
}


/* ============================================================
   4. POSITIONING
   Keep promo slightly offset on product page, like requested
   ============================================================ */

body#product #content .product-flags .product-flag.on-sale,
body#product #content .product-flags .product-flag.discount {
    transform: translateX(-22px) !important;
}

@media (max-width: 767px) {
    body#product #content .product-flags .product-flag.on-sale,
    body#product #content .product-flags .product-flag.discount {
        transform: translateX(-14px) !important;
    }
}


/* ETHNIC_PROMO_UI_V3_END */

/* ==========================================================
   ETHNIC_MOBILE_SPACING_V1_START
   Mobile horizontal rhythm only.

   Goals:
   - preserve existing slider/search/card geometry
   - inset mobile cart from viewport edge
   - give footer accordions the same page gutter
   - center Synthweb signature on mobile
   - leave checkout and desktop untouched
   ========================================================== */

@media (max-width: 767.98px) {

  /*
   * HEADER
   *
   * Existing layout uses symmetrical 102px side tracks.
   * Increase both tracks equally so the logo remains perfectly
   * centred, while allowing a 12px inset on the actions side.
   */
  body:not(#checkout)
  #header
  .header-nav
  .ethnic-mobile-header {
    grid-template-columns:
      114px
      minmax(0, 1fr)
      114px !important;
  }

  body:not(#checkout)
  #header
  .ethnic-mobile-header
  .ethnic-mobile-actions {
    margin-right: 12px !important;
  }

  /*
   * On exceptionally narrow screens the larger symmetrical
   * side tracks may leave less than 118px for the logo.
   * Allow the image to shrink rather than crop.
   */
  @media (max-width: 346px) {
    body:not(#checkout)
    #header
    .ethnic-mobile-header
    .ethnic-mobile-logo
    img {
      max-width: 100% !important;
    }
  }


  /*
   * FOOTER
   *
   * 15px becomes the canonical storefront mobile gutter.
   * Neutralise only the direct Bootstrap row negative margins.
   * Nested accordion structure remains untouched.
   */
  body:not(#checkout)
  #footer
  .footer-container
  > .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  body:not(#checkout)
  #footer
  .footer-container
  > .container
  > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body:not(#checkout)
  #footer
  .footer-container
  .links {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
  }


  /*
   * SYNTHWEB SIGNATURE
   *
   * Centre it so the fixed cookie control at bottom-left does
   * not visually sit over the signature.
   */
  body:not(#checkout)
  #footer
  .ethnic-synthweb-signature {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    margin: 8px auto 0 !important;
    padding: 0 15px !important;

    box-sizing: border-box !important;

    flex-wrap: wrap !important;

    text-align: center !important;
  }

}

/* ETHNIC_MOBILE_SPACING_V1_END */

/* ==========================================================
   ETHNIC_MOBILE_SPACING_V2_START
   Footer accordion internal padding.
   V1 outer gutters are intentionally preserved unchanged.
   ========================================================== */

@media (max-width: 767.98px) {

  /*
   * Accordion headers
   */
  body:not(#checkout)
  #footer
  .footer-container
  .links
  .title {
    padding:
      14px
      16px !important;
  }


  /*
   * Accordion link rows
   */
  body:not(#checkout)
  #footer
  .footer-container
  .links
  ul > li > a,
  body:not(#checkout)
  #footer
  .footer-container
  .links
  .collapse
  a {
    padding:
      13px
      16px !important;
  }


  /*
   * Contact / store information blocks can contain text
   * directly instead of standard list links.
   */
  body:not(#checkout)
  #footer
  .footer-container
  .block-contact
  #contact-infos,
  body:not(#checkout)
  #footer
  .footer-container
  .links
  #contact-infos {
    padding:
      13px
      16px !important;
  }


  /*
   * Keep icons away from the right edge by the same amount
   * as the heading text on the left.
   */
  body:not(#checkout)
  #footer
  .footer-container
  .links
  .title
  .navbar-toggler {
    margin-right:
      0 !important;

    padding:
      0 !important;
  }

}

/* ETHNIC_MOBILE_SPACING_V2_END */

/* ==========================================================
   ETHNIC_MOBILE_SPACING_V3_START
   Mobile footer accordion topology.

   Each accordion wrapper becomes its own card.
   V1 outer gutter is preserved.
   V2 internal spacing is normalized here.
   Newsletter / signature / desktop / checkout untouched.
   ========================================================== */

@media (max-width: 767.98px) {

  /*
   * Parent module container must no longer look like one
   * giant card containing several accordion sections.
   */
  body:not(#checkout)
  #footer
  .footer-container
  .links {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    overflow: visible !important;

    box-shadow: none !important;
  }


  /*
   * ps_linklist contains a Bootstrap row around its individual
   * accordion wrappers. Remove the row's negative gutters.
   */
  body:not(#checkout)
  #footer
  .footer-container
  .links
  > .row {
    display: block !important;

    width: 100% !important;

    margin-right: 0 !important;
    margin-left: 0 !important;

    padding: 0 !important;
  }


  /*
   * EACH accordion becomes an independent card.
   *
   * Covers both structures:
   *
   *   .links > .row > .wrapper
   *
   * and modules where the same element carries:
   *
   *   .links.wrapper
   */
  body:not(#checkout)
  #footer
  .footer-container
  .links
  .wrapper,

  body:not(#checkout)
  #footer
  .footer-container
  .links.wrapper {
    float: none !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    flex: 0 0 100% !important;

    margin:
      0
      0
      10px
      0 !important;

    padding: 0 !important;

    border:
      1px solid
      rgba(255,255,255,0.16) !important;

    border-radius:
      9px !important;

    background:
      #ffffff !important;

    overflow:
      hidden !important;

    box-sizing:
      border-box !important;

    box-shadow:
      none !important;
  }


  /*
   * Accordion title.
   *
   * Give text and chevron exactly the same internal gutter.
   */
  body:not(#checkout)
  #footer
  .footer-container
  .links
  .wrapper
  > .title,

  body:not(#checkout)
  #footer
  .footer-container
  .links.wrapper
  > .title,

  body:not(#checkout)
  #footer
  .footer-container
  .links
  .title {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    min-height: 52px !important;

    margin: 0 !important;

    padding:
      14px
      16px !important;

    border: 0 !important;

    background:
      #1b211f !important;

    box-sizing:
      border-box !important;
  }


  /*
   * Header text.
   */
  body:not(#checkout)
  #footer
  .footer-container
  .links
  .title
  .h3,

  body:not(#checkout)
  #footer
  .footer-container
  .links
  .title
  .h4,

  body:not(#checkout)
  #footer
  .footer-container
  .links
  .title
  span.h3,

  body:not(#checkout)
  #footer
  .footer-container
  .links
  .title
  span.h4 {
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    line-height: 1.2 !important;
  }


  /*
   * Chevron.
   */
  body:not(#checkout)
  #footer
  .footer-container
  .links
  .title
  .navbar-toggler {
    flex:
      0
      0
      auto !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /*
   * Expanded area.
   */
  body:not(#checkout)
  #footer
  .footer-container
  .links
  .collapse {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;

    box-sizing:
      border-box !important;
  }


  /*
   * Link list.
   */
  body:not(#checkout)
  #footer
  .footer-container
  .links
  ul {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;
  }


  body:not(#checkout)
  #footer
  .footer-container
  .links
  ul
  > li {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;

    border-bottom:
      1px solid #e8ece8 !important;

    box-sizing:
      border-box !important;
  }


  body:not(#checkout)
  #footer
  .footer-container
  .links
  ul
  > li:last-child {
    border-bottom:
      0 !important;
  }


  /*
   * Actual clickable rows.
   *
   * 16px matches title content exactly.
   */
  body:not(#checkout)
  #footer
  .footer-container
  .links
  ul
  > li
  > a,

  body:not(#checkout)
  #footer
  .footer-container
  .links
  .collapse
  a {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    padding:
      13px
      16px !important;

    background:
      #ffffff !important;

    color:
      #232323 !important;

    box-sizing:
      border-box !important;

    line-height:
      1.35 !important;
  }


  /*
   * Direct contact-information content.
   */
  body:not(#checkout)
  #footer
  .footer-container
  .block-contact
  #contact-infos,

  body:not(#checkout)
  #footer
  .footer-container
  .links
  #contact-infos {
    width: 100% !important;

    margin: 0 !important;

    padding:
      13px
      16px !important;

    box-sizing:
      border-box !important;
  }

}

/* ETHNIC_MOBILE_SPACING_V3_END */

/* ==========================================================
   ETHNIC_CMS_ABOUT_V1_START
   Modern CMS About page.
   Scoped strictly to CMS page id 4.
   ========================================================== */

body#cms .page-cms-4 {
  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}

body#cms .page-cms-4 .ethnic-about {
  display: flex;
  flex-direction: column;
  gap: 30px;

  width: 100%;

  color: var(--ethnic-text);
}


/* HERO */

body#cms .page-cms-4 .ethnic-about-hero {
  position: relative;

  overflow: hidden;

  padding: clamp(34px, 6vw, 66px);

  background:
    linear-gradient(
      135deg,
      #263238 0%,
      #354349 48%,
      #202b2f 100%
    );

  border:
    1px solid
    rgba(255,255,255,0.06);

  border-radius:
    var(--ethnic-radius-lg);

  color:
    var(--ethnic-cream);

  box-shadow:
    var(--ethnic-shadow);
}

body#cms .page-cms-4 .ethnic-about-hero::before {
  position: absolute;

  top: 0;
  right: 0;
  left: 0;

  height: 5px;

  background:
    linear-gradient(
      90deg,
      var(--ethnic-green) 0%,
      #b7dd4b 60%,
      var(--ethnic-green) 100%
    );

  content: "";
}

body#cms .page-cms-4 .ethnic-about-eyebrow,
body#cms .page-cms-4 .ethnic-about-kicker,
body#cms .page-cms-4 .ethnic-about-section-head > span {
  display: block;

  margin-bottom: 10px;

  color:
    var(--ethnic-green);

  font-size: 0.78rem;
  font-weight: 800;

  letter-spacing: 0.11em;
  line-height: 1.3;

  text-transform: uppercase;
}

body#cms .page-cms-4 .ethnic-about-hero h1 {
  max-width: 800px;

  margin: 0 0 18px;

  color: #fff !important;

  font-size:
    clamp(2.15rem, 5vw, 4rem);

  font-weight: 800;

  letter-spacing: -0.035em;
  line-height: 1.02;
}

body#cms .page-cms-4 .ethnic-about-lead {
  max-width: 760px;

  margin: 0;

  color:
    rgba(255,255,255,0.78) !important;

  font-size:
    clamp(1rem, 1.8vw, 1.2rem);

  line-height: 1.65;
}


/* FACTS */

body#cms .page-cms-4 .ethnic-about-facts {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 12px;

  margin-top: 34px;
}

body#cms .page-cms-4 .ethnic-about-fact {
  padding: 17px 16px;

  background:
    rgba(255,255,255,0.055);

  border:
    1px solid
    rgba(255,255,255,0.08);

  border-radius:
    11px;
}

body#cms .page-cms-4 .ethnic-about-fact strong {
  display: block;

  margin-bottom: 4px;

  color:
    var(--ethnic-green);

  font-size: 1.05rem;
  font-weight: 800;
}

body#cms .page-cms-4 .ethnic-about-fact span {
  color:
    rgba(255,255,255,0.72);

  font-size: 0.86rem;
}


/* SECTIONS */

body#cms .page-cms-4 .ethnic-about-section {
  padding:
    clamp(26px, 4vw, 42px);

  background: #fff;

  border:
    1px solid
    var(--ethnic-border);

  border-radius:
    var(--ethnic-radius-lg);

  box-shadow:
    var(--ethnic-shadow);
}

body#cms .page-cms-4 .ethnic-about-section-head {
  max-width: 760px;

  margin-bottom: 25px;
}

body#cms .page-cms-4 .ethnic-about-section-head h2,
body#cms .page-cms-4 .ethnic-about-today h2,
body#cms .page-cms-4 .ethnic-about-cta h2 {
  margin:
    0 0 10px;

  color:
    var(--ethnic-text) !important;

  font-size:
    clamp(1.55rem, 3vw, 2.15rem);

  font-weight: 800;

  letter-spacing: -0.025em;
}

body#cms .page-cms-4 .ethnic-about-section-head p {
  margin: 0;

  color:
    var(--ethnic-text-muted) !important;

  line-height: 1.65;
}


/* ACTIVITY CARDS */

body#cms .page-cms-4 .ethnic-about-grid {
  display: grid;

  gap: 18px;
}

body#cms .page-cms-4 .ethnic-about-grid-two {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}

body#cms .page-cms-4 .ethnic-about-card {
  position: relative;

  overflow: hidden;

  padding: 25px;

  background:
    linear-gradient(
      160deg,
      #f7f9f6 0%,
      #edf2eb 100%
    );

  border:
    1px solid
    #dbe3d8;

  border-radius:
    var(--ethnic-radius-md);
}

body#cms .page-cms-4 .ethnic-about-card-mark {
  width: 42px;
  height: 5px;

  margin-bottom: 20px;

  background:
    var(--ethnic-green);

  border-radius: 99px;
}

body#cms .page-cms-4 .ethnic-about-card h3 {
  margin:
    0 0 10px;

  font-size: 1.2rem;
  font-weight: 800;
}

body#cms .page-cms-4 .ethnic-about-card p {
  margin: 0;

  color:
    var(--ethnic-text-muted) !important;

  line-height: 1.65;
}


/* VALUES */

body#cms .page-cms-4 .ethnic-about-values {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 14px;
}

body#cms .page-cms-4 .ethnic-about-value {
  display: flex;

  gap: 14px;

  padding: 22px;

  background:
    #2c393e;

  border-radius:
    var(--ethnic-radius-md);

  color: #fff;
}

body#cms .page-cms-4 .ethnic-about-check {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 30px;
  height: 30px;

  background:
    var(--ethnic-green);

  border-radius: 50%;

  color: #172000;

  font-weight: 900;
}

body#cms .page-cms-4 .ethnic-about-value strong {
  display: block;

  margin-bottom: 5px;

  color: #fff;

  font-size: 1rem;
}

body#cms .page-cms-4 .ethnic-about-value p {
  margin: 0;

  color:
    rgba(255,255,255,0.69) !important;

  font-size: 0.9rem;

  line-height: 1.5;
}


/* TIMELINE */

body#cms .page-cms-4 .ethnic-about-timeline {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 12px;
}

body#cms .page-cms-4 .ethnic-about-event {
  display: grid;

  grid-template-columns:
    115px
    minmax(0, 1fr);

  overflow: hidden;

  background:
    #f7f9f6;

  border:
    1px solid
    #dce4da;

  border-radius:
    10px;
}

body#cms .page-cms-4 .ethnic-about-year {
  display: flex;

  align-items: center;

  padding: 15px;

  background:
    #354349;

  color:
    #fff;

  font-size: 0.85rem;
  font-weight: 800;

  line-height: 1.3;
}

body#cms .page-cms-4 .ethnic-about-event-copy {
  display: flex;
  flex-direction: column;

  justify-content: center;

  padding: 13px 15px;
}

body#cms .page-cms-4 .ethnic-about-event-copy strong {
  color:
    var(--ethnic-text);

  font-size: 0.95rem;
}

body#cms .page-cms-4 .ethnic-about-event-copy span {
  margin-top: 2px;

  color:
    var(--ethnic-text-muted);

  font-size: 0.88rem;
}

body#cms .page-cms-4 .ethnic-about-current {
  width: fit-content;

  margin-top: 7px;
  padding: 3px 8px;

  background:
    rgba(144,195,34,0.16);

  border-radius: 99px;

  color:
    #527900;

  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;

  text-transform: uppercase;
}


/* TODAY */

body#cms .page-cms-4 .ethnic-about-today {
  display: grid;

  grid-template-columns:
    minmax(0, 1.4fr)
    minmax(250px, 0.6fr);

  gap: 25px;

  align-items: center;

  padding:
    clamp(26px, 4vw, 42px);

  background:
    linear-gradient(
      145deg,
      #e5ecdf 0%,
      #d7e1d2 100%
    );

  border:
    1px solid
    #cbd7c7;

  border-radius:
    var(--ethnic-radius-lg);
}

body#cms .page-cms-4 .ethnic-about-today p {
  margin: 0;

  color:
    var(--ethnic-text-muted) !important;
}

body#cms .page-cms-4 .ethnic-about-address {
  display: flex;
  flex-direction: column;

  gap: 3px;

  margin: 0;
  padding: 21px;

  background: #fff;

  border:
    1px solid
    rgba(45,58,49,0.10);

  border-radius:
    11px;

  color:
    var(--ethnic-text);

  font-style: normal;

  box-shadow:
    0 6px 18px rgba(29,38,31,0.06);
}

body#cms .page-cms-4 .ethnic-about-address strong {
  margin-bottom: 5px;

  font-size: 1.05rem;
}

body#cms .page-cms-4 .ethnic-about-address span:last-child {
  margin-top: 8px;

  color:
    #527900;

  font-size: 0.8rem;
  font-weight: 800;

  text-transform: uppercase;
}


/* TESTIMONIALS */

body#cms .page-cms-4 .ethnic-about-testimonials {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}

body#cms .page-cms-4 .ethnic-about-quote {
  position: relative;

  margin: 0;
  padding: 24px;

  background:
    #f7f9f6;

  border:
    1px solid
    #dce4da;

  border-radius:
    var(--ethnic-radius-md);
}

body#cms .page-cms-4 .ethnic-about-quote::before {
  display: block;

  margin-bottom: 10px;

  color:
    var(--ethnic-green);

  content: "“";

  font-size: 2.6rem;
  font-weight: 800;

  line-height: 0.8;
}

body#cms .page-cms-4 .ethnic-about-quote blockquote {
  margin: 0 0 16px;
  padding: 0;

  border: 0;

  color:
    var(--ethnic-text-muted);

  font-size: 0.93rem;

  line-height: 1.6;
}

body#cms .page-cms-4 .ethnic-about-quote figcaption {
  color:
    var(--ethnic-text);

  font-weight: 800;
}


/* CTA */

body#cms .page-cms-4 .ethnic-about-cta {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 24px;

  padding:
    clamp(25px, 4vw, 38px);

  background:
    var(--ethnic-green);

  border:
    1px solid
    rgba(23,32,0,0.12);

  border-radius:
    var(--ethnic-radius-lg);

  color:
    #172000;
}

body#cms .page-cms-4 .ethnic-about-cta h2 {
  color:
    #172000 !important;
}

body#cms .page-cms-4 .ethnic-about-cta p {
  margin: 0;

  color:
    rgba(23,32,0,0.72) !important;
}

body#cms .page-cms-4 .ethnic-about-cta-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  min-height: 46px;

  padding:
    0 22px;

  background:
    #202b2f;

  border-radius:
    999px;

  color:
    #fff !important;

  font-size: 0.92rem;
  font-weight: 800;

  text-decoration: none !important;

  box-shadow:
    0 6px 14px rgba(20,28,22,0.17);
}

body#cms .page-cms-4 .ethnic-about-cta-button:hover {
  background:
    #354349;

  color:
    var(--ethnic-green) !important;
}


/* MOBILE */

@media (max-width: 767.98px) {

  body#cms .page-cms-4 .ethnic-about {
    gap: 18px;
  }

  body#cms .page-cms-4 .ethnic-about-hero,
  body#cms .page-cms-4 .ethnic-about-section,
  body#cms .page-cms-4 .ethnic-about-today,
  body#cms .page-cms-4 .ethnic-about-cta {
    border-radius:
      13px;
  }

  body#cms .page-cms-4 .ethnic-about-hero {
    padding:
      30px 20px;
  }

  body#cms .page-cms-4 .ethnic-about-facts,
  body#cms .page-cms-4 .ethnic-about-grid-two,
  body#cms .page-cms-4 .ethnic-about-values,
  body#cms .page-cms-4 .ethnic-about-timeline,
  body#cms .page-cms-4 .ethnic-about-testimonials,
  body#cms .page-cms-4 .ethnic-about-today {
    grid-template-columns:
      1fr;
  }

  body#cms .page-cms-4 .ethnic-about-facts {
    gap: 8px;

    margin-top: 25px;
  }

  body#cms .page-cms-4 .ethnic-about-fact {
    padding:
      13px 14px;
  }

  body#cms .page-cms-4 .ethnic-about-section {
    padding:
      24px 18px;
  }

  body#cms .page-cms-4 .ethnic-about-event {
    grid-template-columns:
      105px
      minmax(0, 1fr);
  }

  body#cms .page-cms-4 .ethnic-about-today {
    gap: 18px;

    padding:
      24px 18px;
  }

  body#cms .page-cms-4 .ethnic-about-cta {
    flex-direction: column;

    align-items: stretch;

    padding:
      24px 18px;
  }

  body#cms .page-cms-4 .ethnic-about-cta-button {
    width: 100%;
  }

}

/* ETHNIC_CMS_ABOUT_V1_END */

/* ==========================================================
   ETHNIC_CMS_ABOUT_V2_START
   Additions to the validated About V1 visual system:
   - 5-value layout
   - official distributor brands
   - warehouse photo
   - contact details
   - team cards
   - full six-testimonial grid
   ========================================================== */


/* VALUES V2 */

body#cms
.page-cms-4
.ethnic-about-values-v2 {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(210px, 1fr)
    );
}


/* OFFICIAL DISTRIBUTORS */

body#cms
.page-cms-4
.ethnic-about-brands {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(150px, 1fr)
    );

  gap: 10px;
}

body#cms
.page-cms-4
.ethnic-about-brand {
  display: flex;

  align-items: center;
  justify-content: center;

  min-height: 48px;

  padding:
    10px 14px;

  background:
    #f5f8f3;

  border:
    1px solid
    #d9e2d6;

  border-radius:
    10px;

  color:
    var(--ethnic-text) !important;

  font-size:
    0.9rem;

  font-weight:
    750;

  line-height:
    1.25;

  text-align:
    center;

  text-decoration:
    none !important;

  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease;
}

body#cms
.page-cms-4
a.ethnic-about-brand:hover {
  background:
    rgba(144,195,34,0.12);

  border-color:
    rgba(120,159,25,0.42);

  color:
    #527900 !important;

  transform:
    translateY(-1px);
}

body#cms
.page-cms-4
.ethnic-about-brand-static {
  opacity:
    0.88;

  cursor:
    default;
}


/* WAREHOUSE */

body#cms
.page-cms-4
.ethnic-about-warehouse-grid {
  display: grid;

  grid-template-columns:
    minmax(260px, 0.85fr)
    minmax(0, 1.15fr);

  gap:
    24px;

  align-items:
    stretch;
}

body#cms
.page-cms-4
.ethnic-about-warehouse-photo {
  overflow:
    hidden;

  min-height:
    330px;

  margin:
    0;

  background:
    #e5ebe2;

  border:
    1px solid
    #d1dbce;

  border-radius:
    12px;
}

body#cms
.page-cms-4
.ethnic-about-warehouse-photo
img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  min-height:
    330px;

  object-fit:
    cover;

  object-position:
    center;

  margin:
    0;

  padding:
    0;
}

body#cms
.page-cms-4
.ethnic-about-warehouse-info {
  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;
}

body#cms
.page-cms-4
.ethnic-about-warehouse-info
.ethnic-about-address {
  flex:
    1 1 auto;
}

body#cms
.page-cms-4
.ethnic-about-appointment {
  margin-top:
    10px !important;

  color:
    #527900 !important;

  font-size:
    0.78rem !important;

  font-weight:
    800 !important;

  text-transform:
    uppercase;
}


/* CONTACT */

body#cms
.page-cms-4
.ethnic-about-contact-lines {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    10px;
}

body#cms
.page-cms-4
.ethnic-about-contact-lines
> div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  padding:
    15px;

  background:
    #f6f8f5;

  border:
    1px solid
    #dce4da;

  border-radius:
    10px;
}

body#cms
.page-cms-4
.ethnic-about-contact-lines
strong {
  color:
    var(--ethnic-text-muted);

  font-size:
    0.76rem;

  font-weight:
    800;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}

body#cms
.page-cms-4
.ethnic-about-contact-lines
a {
  color:
    var(--ethnic-text) !important;

  font-size:
    1rem;

  font-weight:
    800;

  text-decoration:
    none !important;
}

body#cms
.page-cms-4
.ethnic-about-contact-lines
a:hover {
  color:
    #527900 !important;
}


/* TEAM */

body#cms
.page-cms-4
.ethnic-about-team-grid {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    14px;

  margin-top:
    24px;
}

body#cms
.page-cms-4
.ethnic-about-team-card {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    15px;

  padding:
    20px;

  background:
    linear-gradient(
      150deg,
      #f7f9f6 0%,
      #edf2eb 100%
    );

  border:
    1px solid
    #dbe3d8;

  border-radius:
    11px;
}

body#cms
.page-cms-4
.ethnic-about-team-initial {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  width:
    42px;

  height:
    42px;

  background:
    #2c393e;

  border-radius:
    50%;

  color:
    var(--ethnic-green);

  font-size:
    1rem;

  font-weight:
    850;
}

body#cms
.page-cms-4
.ethnic-about-team-card
h3 {
  margin:
    1px 0 6px;

  color:
    var(--ethnic-text);

  font-size:
    1.05rem;

  font-weight:
    800;
}

body#cms
.page-cms-4
.ethnic-about-team-card
p {
  margin:
    0;

  color:
    var(--ethnic-text-muted) !important;

  font-size:
    0.91rem;

  line-height:
    1.55;
}


/* SIX TESTIMONIALS */

body#cms
.page-cms-4
.ethnic-about-testimonials-v2 {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}


/* MOBILE */

@media (max-width: 767.98px) {

  body#cms
  .page-cms-4
  .ethnic-about-values-v2,

  body#cms
  .page-cms-4
  .ethnic-about-warehouse-grid,

  body#cms
  .page-cms-4
  .ethnic-about-contact-lines,

  body#cms
  .page-cms-4
  .ethnic-about-team-grid,

  body#cms
  .page-cms-4
  .ethnic-about-testimonials-v2 {
    grid-template-columns:
      1fr;
  }

  body#cms
  .page-cms-4
  .ethnic-about-warehouse-photo {
    min-height:
      0;
  }

  body#cms
  .page-cms-4
  .ethnic-about-warehouse-photo
  img {
    height:
      auto;

    min-height:
      0;

    aspect-ratio:
      1 / 1;

    object-fit:
      cover;
  }

  body#cms
  .page-cms-4
  .ethnic-about-brands {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* VERY NARROW MOBILE */

@media (max-width: 380px) {

  body#cms
  .page-cms-4
  .ethnic-about-brands {
    grid-template-columns:
      1fr;
  }

}

/* ETHNIC_CMS_ABOUT_V2_END */

/* ==========================================================
   ETHNIC_PRODUCT_SORT_CLOSED_V1_START

   Harmonise only the selected value in the closed product
   sorting control with the typography of the dropdown items.

   Dropdown menu and .select-list intentionally untouched.
   ========================================================== */

.products-selection
.sort-by-row
.products-sort-order
.select-title {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

/* ETHNIC_PRODUCT_SORT_CLOSED_V1_END */

/* ==========================================================
   ETHNIC_PRODUCT_SORT_CENTER_V2_START

   Vertically center ONLY the currently selected sort value.
   Dropdown menu and dropdown options remain untouched.
   ========================================================== */

.products-selection
.sort-by-row
.products-sort-order
.select-title {
  display: flex !important;

  align-items: center !important;
  justify-content: space-between !important;

  width: 100% !important;
  height: 54px !important;

  padding:
    0
    12px !important;

  box-sizing: border-box !important;

  line-height: 1 !important;
}

.products-selection
.sort-by-row
.products-sort-order
.select-title
.material-icons {
  float: none !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  margin:
    0
    0
    0
    auto !important;

  line-height: 1 !important;
}

/* ETHNIC_PRODUCT_SORT_CENTER_V2_END */

/* >>> ETHNIC QUICK DISCOUNT LOOK PATCH START >>> */

/*
Objectif:
1) badge discount du listing = style doré comme la fiche produit
2) prix promo final du listing = blanc comme les autres cartes
*/

/* Badge promo sur les cartes produit + petit badge % près du prix */
.products .product-miniature .product-flags li.product-flag.discount,
.featured-products .product-miniature .product-flags li.product-flag.discount,
.product-accessories .product-miniature .product-flags li.product-flag.discount,
.product-miniature .discount-percentage.discount-product,
.product-miniature .discount-amount.discount-product {
  border: 1px solid rgba(146, 111, 31, 0.50) !important;
  background: linear-gradient(145deg, #f5d592 0%, #e7b15b 52%, #d2a338 100%) !important;
  color: #4d3304 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.24) !important;
  box-shadow:
    inset 0 0 0 rgba(255, 255, 255, 0.28),
    0 2px 6px rgba(110, 82, 24, 0.14) !important;
}

/* Prix remisé dans les listings: blanc au lieu de noir */
.products .product-miniature .product-price-and-shipping .regular-price ~ .price,
.featured-products .product-miniature .product-price-and-shipping .regular-price ~ .price,
.product-accessories .product-miniature .product-price-and-shipping .regular-price ~ .price {
  color: #ffffff !important;
  text-shadow: none !important;
}

/* >>> ETHNIC QUICK DISCOUNT LOOK PATCH END >>> */

/* >>> ETHNIC PRODUCT CARD INLINE DISCOUNT GOLD V1 >>> */
body .products .product-miniature .product-price-and-shipping span.discount-percentage.discount-product,
body .featured-products .product-miniature .product-price-and-shipping span.discount-percentage.discount-product,
body .product-accessories .product-miniature .product-price-and-shipping span.discount-percentage.discount-product {
  border: 1px solid rgba(146, 111, 31, 0.50) !important;
  background: linear-gradient(145deg, #f5d592 0%, #e7b15b 52%, #d2a338 100%) !important;
  color: #4d3304 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.24) !important;
  box-shadow:
    inset 0 0 0 rgba(255, 255, 255, 0.28),
    0 2px 6px rgba(110, 82, 24, 0.14) !important;
}
/* <<< ETHNIC PRODUCT CARD INLINE DISCOUNT GOLD V1 <<< */

/* ==========================================================
   ETHNIC_PRODUCT_CARD_META_MOBILE_FIX_V1
   Prevent manufacturer/category metadata from being vertically
   clipped inside product miniatures on mobile.
   ========================================================== */

@media (max-width: 767px) {

  .products .product-miniature .product-card-meta,
  .featured-products .product-miniature .product-card-meta,
  .product-accessories .product-miniature .product-card-meta {
    height: auto !important;
    min-height: 1.25em !important;
    line-height: 1.25 !important;
    overflow: hidden;
  }

  .products .product-miniature .product-card-meta-link,
  .featured-products .product-miniature .product-card-meta-link,
  .product-accessories .product-miniature .product-card-meta-link {
    display: block;
    line-height: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

}

/* ETHNIC_PRODUCT_CARD_META_MOBILE_FIX_V1_END */

/* ethnic-prestablog-cover-date-fix */
#prestablogfront > time.date {
  clear: both;
}
/* /ethnic-prestablog-cover-date-fix */

/* ETHNIC_PRESTABLOG_CE_HEADING_ALIGNMENT_V1 */
#prestablogfront .elementor-widget-heading .elementor-heading-title {
  text-align: inherit;
}
/* ETHNIC_PRESTABLOG_CE_HEADING_ALIGNMENT_V1_END */

/* ETHNIC_PRESTABLOG_MOBILE_SHARE_RATING_FIX_V1 */
@media (max-width: 600px) {

  #prestablogfront .prestablog-share-rating-row {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 12px;
    gap: 12px;
  }

  #prestablogfront .prestablog-share-rating-row .blogsoc-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  #prestablogfront .prestablog-share-rating-row .blogsoc-buttons li {
    float: none;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin: 0;
  }

  #prestablogfront #prestablog-rating.prestablog-rating-block {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 10px 12px;
  }

  #prestablogfront #prestablog-rating .prestablog-rating-form {
    flex: 1 1 160px;
    min-width: 0;
    flex-wrap: wrap;
    gap: 8px 10px;
  }

  #prestablogfront #prestablog-rating .prestablog-rating-stars {
    flex: 0 0 auto;
  }

  #prestablogfront #prestablog-rating .prestablog-rating-submit {
    max-width: 100%;
    white-space: normal;
  }
}
/* ETHNIC_PRESTABLOG_MOBILE_SHARE_RATING_FIX_V1_END */

/* ETHNIC_BRAND_DROPDOWN_SCROLL_V1 */
#search_filters_brands .brands-sort .dropdown-menu {
  max-height: 32rem;
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* ETHNIC_BRAND_DROPDOWN_SCROLL_V1_END */

/* ETHNIC_CATEGORY2_MENU_ALIGNMENT_V1 */

/*
 * Category 2 has no visible root heading.
 * Remove the spacing normally reserved for that heading so the Menu
 * row uses the same vertical rhythm as the other sidebar blocks.
 */
.block-categories .category-top-menu > li:only-child > .category-sub-menu {
  margin-top: 0;
}

.block-categories .category-top-menu > li:only-child > .category-sub-menu > li[data-depth="0"] > a {
  margin-top: 0;
}

/* ETHNIC_CATEGORY2_MENU_ALIGNMENT_V1_END */

/* ETHNIC_CATEGORY2_BREADCRUMB_V1 */

/*
 * Classic hides breadcrumbs with only one level.
 * Category 2 intentionally keeps its single "Accueil" breadcrumb so
 * the catalogue layout has the same top spacing as normal categories.
 */
body.category-id-2 #wrapper .breadcrumb[data-depth="1"] {
  display: block;
}

/* ETHNIC_CATEGORY2_BREADCRUMB_V1_END */


/* ETHNIC_FOOTER_ACCOUNT_TITLE_COLOR_V1
   Harmonise le titre Votre compte avec les autres titres du footer.
*/
#footer #block_myaccount_infos .myaccount-title > a {
  color: #fff !important;
}

#footer #block_myaccount_infos .myaccount-title > a:hover,
#footer #block_myaccount_infos .myaccount-title > a:focus-visible {
  color: var(--ethnic-green) !important;
}

/* ETHNIC_NATIVE_PRICE_SUPPRESSION_V2
 * Product detail only. Hide PrestaShop's redundant native price/tax label
 * when ethnicpublicprice has rendered its own comparison table.
 * Keep native prices for guests and non-eligible customers.
 * Do not hide the hook container or unit price / ecotax information.
 */
body#product .product-prices:has(.ethnic-pro-prices--product) > .product-discount,
body#product .product-prices:has(.ethnic-pro-prices--product) > .product-without-taxes,
body#product .product-prices:has(.ethnic-pro-prices--product) .product-price .current-price,
body#product .product-prices:has(.ethnic-pro-prices--product) .ethnic-native-tax-label {
    display: none !important;
}
body#product .product-prices:has(.ethnic-pro-prices--product) > .product-price:not(:has(.product-unit-price)) {
    display: none !important;
}

/* ============================================================
   ETHNIC_VARIANT_SELECT_ARROW_V1
   Add explicit dropdown arrow on product variant selects
   (Tailles / Colisages), same visual spirit as other selects.
   ============================================================ */

body#product .product-variants .form-control-select,
.quickview .product-variants .form-control-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.25L6 6.25L11 1.25' stroke='%23222' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 2.5rem;
}

body#product .product-variants .form-control-select::-ms-expand,
.quickview .product-variants .form-control-select::-ms-expand {
  display: none;
}

/* ETHNIC_PRODUCT_MODAL_IMAGE_CAPTION_V1
   Same grey gradient as product listing cards.
   Scope: enlarged product image modal only.
*/
#product-modal .modal-content .modal-body .image-caption {
  background: linear-gradient(
    160deg,
    var(--ethnic-panel-1) 0%,
    var(--ethnic-panel-2) 42%,
    var(--ethnic-panel-3) 72%,
    var(--ethnic-panel-deep) 100%
  ) !important;
  border-top: 3px solid rgba(153, 202, 27, 0.72) !important;
  color: #fff !important;
}

#product-modal .modal-content .modal-body .image-caption #product-description-short,
#product-modal .modal-content .modal-body .image-caption #product-description-short * {
  color: #fff !important;
}
/* END_ETHNIC_PRODUCT_MODAL_IMAGE_CAPTION_V1 */

/* ETHNIC_DESKTOP_MEGA_MENU_GRADIENT_V1
   Harmonize desktop mega menu with product listing cards.
   Does not affect top-level navigation or mobile menu.
*/
#header #_desktop_top_menu .top-menu .sub-menu {
  background: linear-gradient(
    160deg,
    var(--ethnic-panel-1) 0%,
    var(--ethnic-panel-2) 42%,
    var(--ethnic-panel-3) 72%,
    var(--ethnic-panel-deep) 100%
  ) !important;

  color: #fff !important;

  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-top: 3px solid rgba(153, 202, 27, 0.72) !important;
}

/* Category headings and subcategory links */
#header #_desktop_top_menu .top-menu .sub-menu a,
#header #_desktop_top_menu .top-menu .sub-menu a.dropdown-submenu {
  color: #fff !important;
}

/* Category headings */
#header #_desktop_top_menu .top-menu .sub-menu a.dropdown-submenu {
  font-weight: 700 !important;
}

/* Hover and keyboard focus */
#header #_desktop_top_menu .top-menu .sub-menu a:hover,
#header #_desktop_top_menu .top-menu .sub-menu a:focus-visible {
  color: var(--ethnic-ui-green, #99ca1b) !important;
}
/* END_ETHNIC_DESKTOP_MEGA_MENU_GRADIENT_V1 */

/* ETHNIC_CONTACT_WHATSAPP_V2
   Simple WhatsApp contact link.
   No external API, scripts or tracking.
*/
body#contact .ethnic-contact-whatsapp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 0 28px;
  padding: 24px;
  border: 1px solid var(--ethnic-section-border, #d1d9cf);
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    #e6ebe3 0%,
    var(--ethnic-section, #e8ede5) 100%
  );
}

body#contact .ethnic-contact-whatsapp__content {
  flex: 1 1 230px;
  min-width: 0;
}

body#contact .ethnic-contact-whatsapp__content h2 {
  margin: 0 0 8px;
  color: var(--ethnic-ui-ink, #222d31);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}

body#contact .ethnic-contact-whatsapp__content p {
  margin: 0;
  color: #46534d;
  font-size: 14px;
  line-height: 1.6;
}

body#contact .ethnic-contact-whatsapp__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid #1ca54d;
  border-radius: 12px;
  background: #25d366;
  color: #103d22 !important;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  text-decoration: none !important;
  transition: background 0.2s ease, transform 0.2s ease;
}

body#contact .ethnic-contact-whatsapp__button:hover {
  background: #20bf59;
  color: #103d22 !important;
  transform: translateY(-2px);
}

body#contact .ethnic-contact-whatsapp__button:focus-visible {
  outline: 3px solid #145c2d;
  outline-offset: 3px;
}

body#contact .ethnic-contact-whatsapp__button .material-icons {
  font-size: 21px;
  line-height: 1;
}

@media (max-width: 575.98px) {
  body#contact .ethnic-contact-whatsapp {
    padding: 20px 16px;
    gap: 16px;
  }

  body#contact .ethnic-contact-whatsapp__button {
    width: 100%;
  }
}
/* END_ETHNIC_CONTACT_WHATSAPP_V2 */

/* ETHNIC_HEADER_CONTACT_WHATSAPP_V2
   Align phone and WhatsApp in the header.
   Keep native PrestaShop modules intact.
*/

@media (min-width: 768px) {
  #header .header-nav > .container > .row > .hidden-sm-down {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    column-gap: 10px !important;
    align-items: center !important;
    height: 46px !important;
  }

  #header .header-nav > .container > .row > .hidden-sm-down > .col-md-5,
  #header .header-nav > .container > .row > .hidden-sm-down > .right-nav {
    display: flex !important;
    align-items: center !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 46px !important;
    padding: 0 !important;
  }

  #header .header-nav > .container > .row > .hidden-sm-down > .right-nav {
    justify-content: flex-end !important;
  }

  #header .header-nav > .container > .row > .hidden-sm-down > .col-md-5 > #_desktop_contact_link {
    padding: 0 !important;
  }

  #header .header-nav #contact-link.ethnic-header-contact-links {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  #header .header-nav #contact-link.ethnic-header-contact-links > a {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }

  #header .header-nav .ethnic-header-call {
    gap: 6px !important;
    color: #ffffff !important;
  }

  #header .header-nav .ethnic-header-call:hover {
    color: var(--ethnic-ui-green, #91c51b) !important;
  }

  #header .header-nav .ethnic-header-whatsapp {
    gap: 5px !important;
    color: #25d366 !important;
    font-weight: 700 !important;
  }

  #header .header-nav .ethnic-header-whatsapp:hover {
    color: #8bf3a8 !important;
  }

  #header .header-nav .ethnic-header-whatsapp .material-icons {
    font-size: 17px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  #header .header-nav .ethnic-header-call:focus-visible,
  #header .header-nav .ethnic-header-whatsapp:focus-visible {
    outline: 2px solid #25d366;
    outline-offset: 3px;
  }
}

/* Compact tablet navigation. */
@media (min-width: 768px) and (max-width: 991.98px) {
  #header .header-nav > .container > .row > .hidden-sm-down {
    column-gap: 7px !important;
  }

  #header .header-nav #contact-link.ethnic-header-contact-links {
    gap: 9px !important;
    font-size: 12px !important;
  }

  #header .header-nav > .container > .row > .hidden-sm-down > .right-nav > *,
  #header .header-nav .language-selector-wrapper,
  #header .header-nav .user-info {
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  #header .header-nav .user-info {
    gap: 4px !important;
  }

  #header .header-nav .ethnic-header-whatsapp .material-icons {
    font-size: 15px !important;
  }
}

/* Extra space for account information on narrow tablets. */
@media (min-width: 768px) and (max-width: 899.98px) {
  #header .header-nav .ethnic-header-call-label {
    display: none !important;
  }
}

/* Contact links inside the mobile navigation menu. */
@media (max-width: 767.98px) {
  #mobile_top_menu_wrapper .js-top-menu-bottom #contact-link.ethnic-header-contact-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    height: auto !important;
    padding: 10px !important;
  }

  #mobile_top_menu_wrapper .js-top-menu-bottom #contact-link.ethnic-header-contact-links > a {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  #mobile_top_menu_wrapper .ethnic-header-whatsapp {
    color: #168d43 !important;
  }

  #mobile_top_menu_wrapper .ethnic-header-whatsapp .material-icons {
    font-size: 18px !important;
  }
}

/* END_ETHNIC_HEADER_CONTACT_WHATSAPP_V2 */

/* ETHNIC_MOBILE_MENU_GRADIENT_V1
   Match the desktop mega-menu gradient.
   Mobile navigation only.
   Preserve layout, search, icons and interactions.
*/
@media (max-width: 767.98px) {

  /* Main menu surface */
  #mobile_top_menu_wrapper {
    background: linear-gradient(
      160deg,
      var(--ethnic-panel-1) 0%,
      var(--ethnic-panel-2) 42%,
      var(--ethnic-panel-3) 72%,
      var(--ethnic-panel-deep) 100%
    ) !important;

    color: #ffffff !important;

    box-shadow:
      inset 0 3px 0 rgba(153, 202, 27, 0.72) !important;
  }

  /* Neutralize nested white backgrounds */
  #mobile_top_menu_wrapper .js-top-menu,
  #mobile_top_menu_wrapper .js-top-menu.mobile,
  #mobile_top_menu_wrapper .top-menu,
  #mobile_top_menu_wrapper .top-menu ul,
  #mobile_top_menu_wrapper .top-menu li,
  #mobile_top_menu_wrapper .sub-menu,
  #mobile_top_menu_wrapper .popover,
  #mobile_top_menu_wrapper .js-top-menu-bottom {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
  }

  /* Top-level and nested category links */
  #mobile_top_menu_wrapper .js-top-menu a,
  #mobile_top_menu_wrapper .js-top-menu .dropdown-item,
  #mobile_top_menu_wrapper .js-top-menu a span,
  #mobile_top_menu_wrapper .js-top-menu .category a,
  #mobile_top_menu_wrapper .js-top-menu .category a span {
    color: #ffffff !important;
    text-decoration: none !important;
  }

  /* Category expand/collapse icons */
  #mobile_top_menu_wrapper .js-top-menu .navbar-toggler,
  #mobile_top_menu_wrapper .js-top-menu .material-icons,
  #mobile_top_menu_wrapper .js-top-menu .collapse-icons,
  #mobile_top_menu_wrapper .js-top-menu .add,
  #mobile_top_menu_wrapper .js-top-menu .remove {
    color: #ffffff !important;
  }

  /* Hover and keyboard navigation */
  #mobile_top_menu_wrapper .js-top-menu a:hover,
  #mobile_top_menu_wrapper .js-top-menu a:focus-visible,
  #mobile_top_menu_wrapper .js-top-menu a:hover span,
  #mobile_top_menu_wrapper .js-top-menu a:focus-visible span,
  #mobile_top_menu_wrapper .js-top-menu .navbar-toggler:hover,
  #mobile_top_menu_wrapper .js-top-menu .navbar-toggler:focus-visible {
    color: var(--ethnic-ui-green, #99ca1b) !important;
  }

  #mobile_top_menu_wrapper .js-top-menu a:focus-visible,
  #mobile_top_menu_wrapper .js-top-menu button:focus-visible {
    outline: 2px solid var(--ethnic-ui-green, #99ca1b);
    outline-offset: 2px;
  }

  /* Category separators */
  #mobile_top_menu_wrapper .top-menu li,
  #mobile_top_menu_wrapper .top-menu a,
  #mobile_top_menu_wrapper .sub-menu,
  #mobile_top_menu_wrapper .js-top-menu-bottom {
    border-color: rgba(255, 255, 255, 0.15) !important;
  }

  /* Language and contact sections */
  #mobile_top_menu_wrapper
  .js-top-menu-bottom .language-selector-wrapper,
  #mobile_top_menu_wrapper
  .js-top-menu-bottom .currency-selector,
  #mobile_top_menu_wrapper
  .js-top-menu-bottom #contact-link {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
  }

  #mobile_top_menu_wrapper
  .js-top-menu-bottom .language-selector-wrapper *,
  #mobile_top_menu_wrapper
  .js-top-menu-bottom .currency-selector *,
  #mobile_top_menu_wrapper
  .js-top-menu-bottom #contact-link a,
  #mobile_top_menu_wrapper
  .js-top-menu-bottom #contact-link a span {
    color: #ffffff !important;
  }

  /* Language dropdown and its options */
  #mobile_top_menu_wrapper
  .js-top-menu-bottom .dropdown-menu {
    background: var(--ethnic-panel-deep) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
  }

  #mobile_top_menu_wrapper
  .js-top-menu-bottom .dropdown-menu a {
    color: #ffffff !important;
  }

  /* Contacts and language hover states */
  #mobile_top_menu_wrapper
  .js-top-menu-bottom #contact-link a:hover,
  #mobile_top_menu_wrapper
  .js-top-menu-bottom #contact-link a:hover span,
  #mobile_top_menu_wrapper
  .js-top-menu-bottom .language-selector-wrapper a:hover,
  #mobile_top_menu_wrapper
  .js-top-menu-bottom .dropdown-menu a:hover {
    color: var(--ethnic-ui-green, #99ca1b) !important;
  }

  /* Keep WhatsApp identifiable */
  #mobile_top_menu_wrapper
  .js-top-menu-bottom .ethnic-header-whatsapp .material-icons {
    color: #25d366 !important;
  }

}
/* END_ETHNIC_MOBILE_MENU_GRADIENT_V1 */

/* ETHNIC_MOBILE_MENU_GRADIENT_V2
   Full-width mobile gradient.
   Fill the remaining visible menu height.
   Restore white language selector text.
*/

@media (max-width: 767.98px) {

  /*
   * Remove the visible white side gutters.
   * Keep 16px of internal space for category links.
   */
  #header .header-top #mobile_top_menu_wrapper {
    box-sizing: border-box !important;

    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding: 0 16px 16px !important;

    min-height: calc(100vh - 104px) !important;
    min-height: calc(100dvh - 104px) !important;

    background: linear-gradient(
      160deg,
      var(--ethnic-panel-1) 0%,
      var(--ethnic-panel-2) 42%,
      var(--ethnic-panel-3) 72%,
      var(--ethnic-panel-deep) 100%
    ) !important;

    color: #ffffff !important;
  }

  /*
   * The category and bottom-menu content should
   * fill the available width without extra margins.
   */
  #header .header-top
  #mobile_top_menu_wrapper .js-top-menu.mobile,
  #header .header-top
  #mobile_top_menu_wrapper .js-top-menu-bottom {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /*
   * The language label currently inherits a dark
   * text color from older mobile-menu rules.
   * Override both the wrapper and its descendants.
   */
  #header .header-top
  #mobile_top_menu_wrapper
  .js-top-menu-bottom .language-selector-wrapper,

  #header .header-top
  #mobile_top_menu_wrapper
  .js-top-menu-bottom .language-selector-wrapper
  .language-selector,

  #header .header-top
  #mobile_top_menu_wrapper
  .js-top-menu-bottom .language-selector-wrapper
  .language-selector *,

  #header .header-top
  #mobile_top_menu_wrapper
  .js-top-menu-bottom .language-selector-wrapper
  .expand-more,

  #header .header-top
  #mobile_top_menu_wrapper
  .js-top-menu-bottom .language-selector-wrapper
  .select-title {
    color: #ffffff !important;
    text-shadow: none !important;
  }

  /*
   * Keep language options readable against
   * the dark gradient.
   */
  #header .header-top
  #mobile_top_menu_wrapper
  .js-top-menu-bottom .language-selector-wrapper
  .dropdown-menu {
    background: var(--ethnic-panel-deep) !important;
    color: #ffffff !important;
  }

  #header .header-top
  #mobile_top_menu_wrapper
  .js-top-menu-bottom .language-selector-wrapper
  .dropdown-menu a {
    color: #ffffff !important;
  }

  /*
   * Ethnic green hover and keyboard focus.
   */
  #header .header-top
  #mobile_top_menu_wrapper
  .js-top-menu-bottom .language-selector-wrapper
  a:hover,

  #header .header-top
  #mobile_top_menu_wrapper
  .js-top-menu-bottom .language-selector-wrapper
  a:hover *,

  #header .header-top
  #mobile_top_menu_wrapper
  .js-top-menu-bottom .language-selector-wrapper
  button:hover,

  #header .header-top
  #mobile_top_menu_wrapper
  .js-top-menu-bottom .language-selector-wrapper
  button:hover * {
    color: var(--ethnic-ui-green, #99ca1b) !important;
  }

}

/* END_ETHNIC_MOBILE_MENU_GRADIENT_V2 */

/* ETHNIC_MOBILE_MENU_FINISH_V3
   Restore white text on the language label.
   V2 viewport-height correction applied above.
*/
@media (max-width: 767.98px) {

  #header .header-top
  #mobile_top_menu_wrapper
  .js-top-menu-bottom
  #language-selector-label,

  #header .header-top
  #mobile_top_menu_wrapper
  .js-top-menu-bottom
  .language-selector-wrapper > span,

  #header .header-top
  #mobile_top_menu_wrapper
  .js-top-menu-bottom
  .language-selector-wrapper > label,

  #header .header-top
  #mobile_top_menu_wrapper
  .js-top-menu-bottom
  .language-selector-wrapper::before {
    color: #ffffff !important;
    text-shadow: none !important;
  }

}
/* END_ETHNIC_MOBILE_MENU_FINISH_V3 */

/* ETHNIC_MOBILE_HEADER_BOTTOM_V4
   Remove the 10px white strip below the mobile menu.
   Preserve the top padding used by the search field.
*/
@media (max-width: 767.98px) {
  body:not(#checkout) #header .header-top {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}
/* END_ETHNIC_MOBILE_HEADER_BOTTOM_V4 */

/* ETHNIC_FOOTER_GRADIENT_V1
   Visual-only footer styling.
   Keep native modules and accordion behavior.
   Exclude the separately validated checkout footer.
*/

body:not(#checkout) #footer {
  background: linear-gradient(
    160deg,
    var(--ethnic-panel-1) 0%,
    var(--ethnic-panel-2) 42%,
    var(--ethnic-panel-3) 72%,
    var(--ethnic-panel-deep) 100%
  ) !important;
  border-top: 3px solid rgba(153, 202, 27, 0.72) !important;
  color: #f4f7f3 !important;
}

body:not(#checkout) #footer .footer-container,
body:not(#checkout) #footer .footer-container > .container,
body:not(#checkout) #footer .footer-container .links,
body:not(#checkout) #footer .footer-container .links > .row,
body:not(#checkout) #footer .footer-container .links .wrapper,
body:not(#checkout) #footer .footer-container .links.wrapper {
  background: transparent !important;
  color: #f4f7f3 !important;
}

/* Accordion and link-block headings. */

body:not(#checkout) #footer .footer-container .links .title,
body:not(#checkout) #footer .footer-container .links .wrapper > .title,
body:not(#checkout) #footer .footer-container .links.wrapper > .title {
  background: rgba(12, 20, 23, 0.24) !important;
  color: #fff !important;
}

body:not(#checkout) #footer .footer-container .links .title .h3,
body:not(#checkout) #footer .footer-container .links .title .h4,
body:not(#checkout) #footer .footer-container .links .title .material-icons,
body:not(#checkout) #footer .footer-container .links .title .navbar-toggler {
  color: #fff !important;
}

/* Remove forced white accordion/list backgrounds. */

body:not(#checkout) #footer .footer-container .links .collapse,
body:not(#checkout) #footer .footer-container .links ul,
body:not(#checkout) #footer .footer-container .links ul > li {
  background: transparent !important;
  color: #f4f7f3 !important;
}

body:not(#checkout) #footer .footer-container .links ul > li {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

body:not(#checkout) #footer .footer-container .links ul > li > a,
body:not(#checkout) #footer .footer-container .links .collapse a {
  background: transparent !important;
  color: #edf3ee !important;
}

body:not(#checkout) #footer .footer-container .links ul > li > a:hover,
body:not(#checkout) #footer .footer-container .links ul > li > a:focus-visible,
body:not(#checkout) #footer .footer-container .links .collapse a:hover,
body:not(#checkout) #footer .footer-container .links .collapse a:focus-visible {
  background: rgba(153, 202, 27, 0.10) !important;
  color: var(--ethnic-green, #99ca1b) !important;
}

/* Store information: address, phone, email. */

body:not(#checkout) #footer .footer-container .block-contact #contact-infos,
body:not(#checkout) #footer .footer-container .links #contact-infos {
  background: transparent !important;
  color: #f4f7f3 !important;
}

body:not(#checkout) #footer .footer-container .block-contact #contact-infos a,
body:not(#checkout) #footer .footer-container .links #contact-infos a {
  color: #edf3ee !important;
}

body:not(#checkout) #footer .footer-container .block-contact #contact-infos a:hover,
body:not(#checkout) #footer .footer-container .links #contact-infos a:hover {
  color: var(--ethnic-green, #99ca1b) !important;
}

/* Desktop headings and Synthweb signature. */

body:not(#checkout) #footer .footer-container .links .h3,
body:not(#checkout) #footer .footer-container .links .h4,
body:not(#checkout) #footer .footer-container .block-contact-title,
body:not(#checkout) #footer .footer-container .myaccount-title,
body:not(#checkout) #footer .footer-container .myaccount-title > a,
body:not(#checkout) #footer .footer-container .ethnic-synthweb-signature {
  color: #fff !important;
}

body:not(#checkout) #footer .footer-container .ethnic-synthweb-signature a {
  color: var(--ethnic-green, #99ca1b) !important;
}

body:not(#checkout) #footer .footer-container .ethnic-synthweb-signature a:hover {
  color: #fff !important;
}

/* Mobile accordion frames.
   No changes to column widths or collapse visibility. */

@media (max-width: 767.98px) {
  body:not(#checkout) #footer .footer-container .links .wrapper,
  body:not(#checkout) #footer .footer-container .links.wrapper {
    background: rgba(12, 20, 23, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 9px !important;
    overflow: hidden !important;
  }
}

/* END_ETHNIC_FOOTER_GRADIENT_V1 */

/* ETHNIC_PRODUCT_REASSURANCE_STYLE_V2
   Product-page reassurance only.
   Uses the established Ethnic grey gradient.
   Does not affect checkout or footer reassurance.
*/
body#product .blockreassurance_product {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 20px 0 0 !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-top: 3px solid rgba(153, 202, 27, 0.72) !important;
  border-radius: 14px !important;
  background: linear-gradient(
    160deg,
    var(--ethnic-panel-1) 0%,
    var(--ethnic-panel-2) 42%,
    var(--ethnic-panel-3) 72%,
    var(--ethnic-panel-deep) 100%
  ) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(18, 30, 25, 0.10);
}

body#product .blockreassurance_product > div:not(.clearfix) {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  align-items: start !important;
  column-gap: 12px !important;
  row-gap: 3px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 13px 4px !important;
  border: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
}

body#product .blockreassurance_product
> div:not(.clearfix) + div:not(.clearfix) {
  border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
}

body#product .blockreassurance_product .item-product {
  box-sizing: border-box !important;
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: 30px !important;
  margin: 0 !important;
  padding: 2px 0 0 !important;
}

body#product .blockreassurance_product .item-product img,
body#product .blockreassurance_product .item-product svg {
  width: 27px !important;
  height: 27px !important;
  max-width: 27px !important;
  max-height: 27px !important;
  margin: 0 !important;
}

body#product .blockreassurance_product .block-title {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

body#product .blockreassurance_product > div:not(.clearfix) > p:not(.block-title) {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.87) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

@media (max-width: 575.98px) {
  body#product .blockreassurance_product {
    margin-top: 16px !important;
    padding: 6px 10px !important;
  }

  body#product .blockreassurance_product > div:not(.clearfix) {
    column-gap: 10px !important;
    padding: 12px 2px !important;
  }
}
/* END_ETHNIC_PRODUCT_REASSURANCE_STYLE_V2 */

/* === ETHNIC NEWSLETTER NOTIFICATIONS CONTRAST V1 START === */
.footer-container .block_newsletter .alert,
#footer .block_newsletter .alert,
.block_newsletter form .alert {
  border-width: 1px;
  border-style: solid;
  border-radius: 0.35rem;
  padding: 0.95rem 1.1rem;
  margin-bottom: 1rem;
  font-weight: 600;
  line-height: 1.45;
  box-shadow: none;
}

.footer-container .block_newsletter .alert-success,
#footer .block_newsletter .alert-success,
.block_newsletter form .alert-success {
  background: #dff3d7;
  border-color: #6aa84f;
  color: #1f4d1a;
}

.footer-container .block_newsletter .alert-danger,
#footer .block_newsletter .alert-danger,
.block_newsletter form .alert-danger {
  background: #f8d7da;
  border-color: #b4232c;
  color: #7a0f17;
}

.footer-container .block_newsletter .alert a,
#footer .block_newsletter .alert a,
.block_newsletter form .alert a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}
/* === ETHNIC NEWSLETTER NOTIFICATIONS CONTRAST V1 END === */

.product-actions .add-to-cart .material-icons {
  line-height: normal;
}

/* ETHNIC_GREEN_ACCENTS_V1_START
   Product reassurance, desktop and mobile category headings.
   Green: #99ca1b / Hover: #c1ec45
*/

/* 1. CUSTOMER REASSURANCE: TITRES */

body#product .blockreassurance_product .block-title,
body#product .blockreassurance_product .block-title a {
  color: var(--ethnic-ui-green, #99ca1b) !important;
  transition: color 180ms ease !important;
}

body#product .blockreassurance_product
> div:not(.clearfix):hover .block-title,
body#product .blockreassurance_product
> div:not(.clearfix):focus-within .block-title,
body#product .blockreassurance_product
> div:not(.clearfix):hover .block-title a,
body#product .blockreassurance_product
> div:not(.clearfix):focus-within .block-title a {
  color: #c1ec45 !important;
}

/* 2. CUSTOMER REASSURANCE: ICONES SVG */

body#product .blockreassurance_product .item-product img,
body#product .blockreassurance_product .item-product svg {
  filter:
    brightness(0)
    saturate(100%)
    invert(73%)
    sepia(63%)
    saturate(950%)
    hue-rotate(28deg)
    brightness(102%)
    contrast(89%) !important;
  transition: filter 180ms ease !important;
}

body#product .blockreassurance_product
> div:not(.clearfix):hover .item-product img,
body#product .blockreassurance_product
> div:not(.clearfix):hover .item-product svg,
body#product .blockreassurance_product
> div:not(.clearfix):focus-within .item-product img,
body#product .blockreassurance_product
> div:not(.clearfix):focus-within .item-product svg {
  filter:
    brightness(0)
    saturate(100%)
    invert(86%)
    sepia(48%)
    saturate(900%)
    hue-rotate(27deg)
    brightness(105%)
    contrast(97%) !important;
}

/* 3. DESKTOP: TITRES DES CATEGORIES DU MEGAMENU */

#header #_desktop_top_menu
.top-menu .sub-menu a.dropdown-submenu,
#header #_desktop_top_menu
.top-menu .sub-menu a.dropdown-submenu span {
  color: var(--ethnic-ui-green, #99ca1b) !important;
  transition: color 180ms ease !important;
}

#header #_desktop_top_menu
.top-menu .sub-menu a.dropdown-submenu:hover,
#header #_desktop_top_menu
.top-menu .sub-menu a.dropdown-submenu:hover span,
#header #_desktop_top_menu
.top-menu .sub-menu a.dropdown-submenu:focus-visible,
#header #_desktop_top_menu
.top-menu .sub-menu a.dropdown-submenu:focus-visible span {
  color: #c1ec45 !important;
}

/* ETHNIC_GREEN_ACCENTS_V1_END */


/* ETHNIC_CART_REASSURANCE_MOBILE_WHITE_V2_START
   Reuse validated product reassurance styles on cart.
   Mobile menu returns to its previous white headings.
*/
body#cart .blockreassurance_product {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 20px 0 0 !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-top: 3px solid rgba(153, 202, 27, 0.72) !important;
  border-radius: 14px !important;
  background: linear-gradient(
    160deg,
    var(--ethnic-panel-1) 0%,
    var(--ethnic-panel-2) 42%,
    var(--ethnic-panel-3) 72%,
    var(--ethnic-panel-deep) 100%
  ) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(18, 30, 25, 0.10);
}

body#cart .blockreassurance_product > div:not(.clearfix) {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  align-items: start !important;
  column-gap: 12px !important;
  row-gap: 3px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 13px 4px !important;
  border: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
}

body#cart .blockreassurance_product
> div:not(.clearfix) + div:not(.clearfix) {
  border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
}

body#cart .blockreassurance_product .item-product {
  box-sizing: border-box !important;
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: 30px !important;
  margin: 0 !important;
  padding: 2px 0 0 !important;
}

body#cart .blockreassurance_product .item-product img,
body#cart .blockreassurance_product .item-product svg {
  width: 27px !important;
  height: 27px !important;
  max-width: 27px !important;
  max-height: 27px !important;
  margin: 0 !important;
}

body#cart .blockreassurance_product .block-title {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

body#cart .blockreassurance_product > div:not(.clearfix) > p:not(.block-title) {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.87) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

@media (max-width: 575.98px) {
  body#cart .blockreassurance_product {
    margin-top: 16px !important;
    padding: 6px 10px !important;
  }

  body#cart .blockreassurance_product > div:not(.clearfix) {
    column-gap: 10px !important;
    padding: 12px 2px !important;
  }
}

/* 1. CUSTOMER REASSURANCE: TITRES */

body#cart .blockreassurance_product .block-title,
body#cart .blockreassurance_product .block-title a {
  color: var(--ethnic-ui-green, #99ca1b) !important;
  transition: color 180ms ease !important;
}

body#cart .blockreassurance_product
> div:not(.clearfix):hover .block-title,
body#cart .blockreassurance_product
> div:not(.clearfix):focus-within .block-title,
body#cart .blockreassurance_product
> div:not(.clearfix):hover .block-title a,
body#cart .blockreassurance_product
> div:not(.clearfix):focus-within .block-title a {
  color: #c1ec45 !important;
}

/* 2. CUSTOMER REASSURANCE: ICONES SVG */

body#cart .blockreassurance_product .item-product img,
body#cart .blockreassurance_product .item-product svg {
  filter:
    brightness(0)
    saturate(100%)
    invert(73%)
    sepia(63%)
    saturate(950%)
    hue-rotate(28deg)
    brightness(102%)
    contrast(89%) !important;
  transition: filter 180ms ease !important;
}

body#cart .blockreassurance_product
> div:not(.clearfix):hover .item-product img,
body#cart .blockreassurance_product
> div:not(.clearfix):hover .item-product svg,
body#cart .blockreassurance_product
> div:not(.clearfix):focus-within .item-product img,
body#cart .blockreassurance_product
> div:not(.clearfix):focus-within .item-product svg {
  filter:
    brightness(0)
    saturate(100%)
    invert(86%)
    sepia(48%)
    saturate(900%)
    hue-rotate(27deg)
    brightness(105%)
    contrast(97%) !important;
}
/* ETHNIC_CART_REASSURANCE_MOBILE_WHITE_V2_END */

/* ETHNIC_DESKTOP_MEGA_ACCENTS_V3_START
   Virtual category headings and featured product price.
   Desktop megamenu only.
*/

/* Virtual category headings such as
   Tabac et accessoires and Puff avec pod pré-rempli. */

#header #_desktop_top_menu
.top-menu .sub-menu .ethnic-mega-virtual-title {
  color: var(--ethnic-ui-green, #99ca1b) !important;
  transition: color 180ms ease !important;
}

#header #_desktop_top_menu
.top-menu .sub-menu .ethnic-mega-virtual-title:hover,
#header #_desktop_top_menu
.top-menu .sub-menu .ethnic-mega-virtual-title:focus-visible,
#header #_desktop_top_menu
.top-menu .sub-menu .ethnic-mega-virtual-group:hover
.ethnic-mega-virtual-title {
  color: #c1ec45 !important;
}

/* Featured product price: white on grey background. */

#header #_desktop_top_menu
.ethnic-mega-product .ethnic-mega-product-price {
  color: #ffffff !important;
  transition: color 180ms ease !important;
}

/* Featured product hover and keyboard focus. */

#header #_desktop_top_menu
.ethnic-mega-product:hover .ethnic-mega-product-price,
#header #_desktop_top_menu
.ethnic-mega-product:focus-within .ethnic-mega-product-price {
  color: #c1ec45 !important;
}

/* ETHNIC_DESKTOP_MEGA_ACCENTS_V3_END */

/* ETHNIC_SHIPPING_PROGRESS_V204E2 */
.ethnic-shipping-threshold-bar {
    height: 8px;
    margin: 9px 0 7px;
    background: #e6eadf;
    border-radius: 999px;
    overflow: hidden;
}
.ethnic-shipping-threshold-bar-fill {
    display: block;
    height: 100%;
    background: #95c11f;
    border-radius: 999px;
    transition: width .25s ease;
}
.ethnic-shipping-threshold-legend {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px 12px;
    margin-bottom: 6px;
    color: #666;
    font-size: 11px;
    line-height: 1.4;
}