/* === 01-tokens.css === */
/* ---------------------------------------------------------------------------
   01-tokens.css

   Custom properties, the Poppins @font-face, and the global img reset.

   Part of the storefront stylesheet. These files are concatenated IN FILENAME
   ORDER by libs/cssBundle.js -- the numeric prefix is load order, not decoration.
   Rules here were lifted verbatim out of views/include/style.ejs, so the cascade
   still depends on their position. Moving a rule between files can change which
   declaration wins; re-run the computed-style check if you do.
   --------------------------------------------------------------------------- */
    img {
        -webkit-user-drag: none;
        -khtml-user-drag: none;
        -moz-user-drag: none;
        user-drag: none;
        -webkit-user-select: none;
        user-select: none;
    }

    :root {
  --line-height: 1.5;
  --font-weight: 400;
  --font-size: 17px;
  --border-radius: 0.25rem;
  --border-width: 1px;
  --outline-width: 3px;
  --spacing: 1rem;
  --typography-spacing-vertical: 1.5rem;
  --block-spacing-vertical: calc(var(--spacing) * 2);
  --block-spacing-horizontal: var(--spacing);
  --grid-spacing-vertical: 0;
  --grid-spacing-horizontal: var(--spacing);
  --form-element-spacing-vertical: 0.75rem;
  --form-element-spacing-horizontal: 1rem;
  --nav-element-spacing-vertical: 1rem;
  --nav-element-spacing-horizontal: 0.5rem;
  --nav-link-spacing-vertical: 0.5rem;
  --nav-link-spacing-horizontal: 0.5rem;
  --form-label-font-weight: var(--font-weight);
  --transition: 0.2s ease-in-out;
  --modal-overlay-backdrop-filter: blur(0.25rem);
  --table-border-color: #ccc;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/BMDupletTXT-Regular.woff2') format('woff2');
  font-display: swap; /* Add this to prevent invisible text while loading */
}
/* === 02-base.css === */
/* ---------------------------------------------------------------------------
   02-base.css

   Element defaults: form controls, buttons, body/main/header, the
   container and grid primitives, headings, links, tables.

   Part of the storefront stylesheet. These files are concatenated IN FILENAME
   ORDER by libs/cssBundle.js -- the numeric prefix is load order, not decoration.
   Rules here were lifted verbatim out of views/include/style.ejs, so the cascade
   still depends on their position. Moving a rule between files can change which
   declaration wins; re-run the computed-style check if you do.
   --------------------------------------------------------------------------- */
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="search"]) {
  -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
  padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
  border-radius: 5rem;
  background-image: var(--icon-search);
  background-position: center left 1.125rem;
  background-size: 1rem auto;
  background-repeat: no-repeat;
}

/*
input, select, textarea {
  --background-color: var(--form-element-background-color);
  --border-color: var(--form-element-border-color);
  --color: var(--form-element-color);
  --box-shadow: none;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  outline: 0;
  background-color: var(--background-color);
  box-shadow: var(--box-shadow);
  color: var(--color);
  font-weight: var(--font-weight);
  transition: background-color var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition);
}*/

:is(button, input[type="submit"], input[type="button"], [role="button"]).contrast {
  --background-color: var(--contrast);
  --border-color: var(--contrast);
  --color: var(--contrast-inverse);
}

[type="button"], [type="reset"], [type="submit"], button {
  -webkit-appearance: button;
}

body, html {
  -moz-osx-font-smoothing: grayscale;
  font-family: "Poppins", sans-serif;
  font-size: var(--font-size);
  margin: 0px;
  background-color: #fafafa;
  width: 100%;
}

main {
    padding: var(--block-spacing-vertical) 0;
}

header {
    padding: var(--block-spacing-vertical) 0;
    background-color: #fafafa;
}

    nav ul {
      align-items: center;
      margin: 0px;
      padding: 0;
      list-style: none;
    }

    nav, nav ul {
      display: flex;
      margin: 0px;
    }

    .container, .container-fluid {
      width: calc(100% - 2rem);
      margin-right: auto;
      margin-left: auto;
      padding-right: var(--spacing);
      padding-left: var(--spacing);
    }

    @media (min-width: 1200px) {
      .container {
        max-width: 1200px;
      }
    }

    section {
        margin-top: 40px;
    }

    /*
    section {
        margin-top: 50px;
        margin-bottom: 50px;
    }

    @media (max-width: 992px) {
      section {
        margin-top: 10px;
        margin-bottom: 10px;
      }
    }
    */

    .viewProduct {
      display: grid;
      grid-template-columns: 1lf;
      margin: 0;
    }

    @media (min-width: 992px) {
      .viewProduct {
      display: grid;
      grid-template-columns: 50% 50%;
      margin: 0;
    }
  }
    

    .grid {
      /*grid-column-gap: var(--grid-spacing-horizontal);
      grid-row-gap: var(--grid-spacing-vertical); */
      display: grid;
      grid-template-columns: 1fr 1fr;
      margin: 0;
      gap: 40px;
    }

    .grid.product {
    grid-template-columns: 1fr;
  }

  .grid.category {
    padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #ccc;
    grid-template-columns: 1fr;
  }

  
  
  @media (min-width: 992px) {
    .grid.category {
        grid-template-columns: 300px auto;
    }
  }


  .viewGrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 40px;
      margin: 20px 0 0;
    }

    /* Card wrapper around the main product image only (thumbnails stay outside) */
    .product-image-card {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border: 1px solid #ececec;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      padding: 24px;
      box-sizing: border-box;
    }

    .product-image-card #productImg {
      width: 100%;
      max-width: 420px;
      height: auto;
      margin: 0;
    }

    @media (max-width: 992px) {
      .viewGrid {
        display: block;
    }

    .product-image-card {
        padding: 16px;
    }

  }

  ol {
    list-style-type: disc;  /* use bullets instead of numbers */
    padding-left: 20px;
    padding-right: 20px;
  }

  @media (min-width: 768px) and (max-width: 991px) {
  .grid {
    grid-template-columns: 50% 50%;
  }
}

.grid.explore-categories {
        grid-template-columns: 1fr 1fr;
      }

    @media (min-width: 992px) {
      .grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
      }

      .grid.categories {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
      }

      .grid.explore-categories {
        grid-template-columns: 1fr 1fr 1fr;
      }

      .grid.cart {
        grid-template-columns: 100px auto auto auto auto;
      }
    }

    h1 {
      --font-size: 1.75rem;
      /* --font-weight: 500; */
      letter-spacing: -2px;
    }

  
    h2 {
      --font-size: 1.5rem;
      /*--font-weight: 700;*/
      letter-spacing: -2px;
      padding-top: 30px;
      padding-bottom: 10px;

     /*   text-transform: uppercase;
      border-bottom: 5px solid #D10024;
      display: inline-block;*/
    }

    @media (max-width: 992px) {
      h2 {
        padding-top: 40px;
        padding-bottom: 10px;
      }
    }

    h3 {
      --font-size: 1rem;
      --font-weight: 700;
     /*   text-transform: uppercase;
      border-bottom: 5px solid #D10024;
      display: inline-block;*/
    }
    

    h1, h2, h3, h4, h5, h6 {
      margin-top: 0;
      margin-bottom: var(--typography-spacing-vertical);
      color: var(--color);
      font-weight: var(--font-weight);
      font-size: var(--font-size);
      font-family: var(--font-family);
    }

    /*
    form {
        margin-bottom: var(--typography-spacing-vertical);
    }*/


    nav {
      justify-content: space-between;
    }

    nav li {
      display: inline-block;
      margin: 0;
      /*padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);*/
    }

    nav li {
      padding-left: 16px;
    }

    html[dir='ltr'] nav li:first-child {
        padding-left: 0px;
}

html[dir='rtl'] nav li:last-child {
        padding-left: 0px;
}

    a {
      font-weight: 400;
      color: #000000;
      text-decoration: none;
    }

    a[role="button"], button, input[type="submit"] {
      font-family: "Greycliff", Assistant, Arial, Helvetica, sans-serif;
      text-align: center;
      display: inline-block;
      text-decoration: none;
      box-sizing: border-box;

      font-weight: 700;
      border-radius: 20px;
      background-color: #000000;
      /*background-color: #D10024;*/
      vertical-align: middle;
      color: #fff;
      font-size: 15px;
      padding: 5px 15px;
      border-color: transparent;
    }

    a.search {
      background-color: #D10024;
    }

    a.addToCart {
      background-color: #D10024;
      height: 32px;
      padding: 0 15px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      text-transform: uppercase;
      text-decoration: none;
      border-radius: 3px;
      transition: background-color 0.2s ease;
    }

    a.addToCart:hover {
      background-color: #b50020;
    }

    html[dir='rtl'] a.addToCart {
      flex-direction: row-reverse;
    }

    a.addToCart .atc-icon {
      flex-shrink: 0;
    }

    a.addToCart.loading .atc-icon {
      display: none;
    }

    a.addToCart.loading::before {
      content: '';
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255,255,255,0.35);
      border-top-color: #fff;
      border-radius: 50%;
      animation: atc-spin 0.65s linear infinite;
      flex-shrink: 0;
    }

    @keyframes atc-spin {
      to { transform: rotate(360deg); }
    }

    /*
    button, input[type="submit"] {
        background-color: #000000;
        padding: 8px 10px;
        margin-top: 15px;
    }*/

    #loginForm {
        width: 100%; 
        max-width: 350px;
        margin: auto;
    }
    #loginForm input {
        width: 100%; 
        padding: 8px;
    }

    #loginForm div {
        padding-top: 10px;
    }
    #loginForm button {
        padding: 7px;
        background-color: #D10024;
        margin-top: 7px;
    }

    a[role="button"].outline {
        color: #000000;
        border-color: #000000;
        background-color: transparent;
    }

    svg {
        vertical-align: middle;
    }

    table {
        width: 100%;
    }

    td, th {
        padding: calc(var(--spacing)/ 2) var(--spacing);
        color: var(--color);
        font-weight: var(--font-weight);
        font-size: var(--font-size);
        text-align: left;
        text-align: start;
        vertical-align: top;
    }

    tr {
        border-bottom: var(--border-width) solid var(--table-border-color);
    }

    /*
    table td:nth-child(2) {
            display: table;
  table-layout: fixed;
  width: 100%;
    }
    */

    h3 {
      font-size: 1.2rem;
      padding-top: 25px;
    }

    h4 {
      font-weight: 600;
    }

    article {
    }

    article h3 {
        margin-bottom:2px;
        padding-top: 20px;
        font-size: 1rem;
    }
/* === 03-navigation.css === */
/* ---------------------------------------------------------------------------
   03-navigation.css

   Free-delivery bar, #topNavigation, breadcrumb, cart badge, and the
   desktop dropdown menu (including its colour themes).

   Part of the storefront stylesheet. These files are concatenated IN FILENAME
   ORDER by libs/cssBundle.js -- the numeric prefix is load order, not decoration.
   Rules here were lifted verbatim out of views/include/style.ejs, so the cascade
   still depends on their position. Moving a rule between files can change which
   declaration wins; re-run the computed-style check if you do.
   --------------------------------------------------------------------------- */
    .free-delivery-bar {
        background-color: #771016;
        color: #fff;
        text-align: center;
        padding: 8px 0;
        font-weight: 700;
        font-size: 14px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    #topNavigation {
        background-color: #192a56;
        color: #fff;
    }

    #topNavigation a {
        color: #fff;
    }

    #footer {
        background-color: #192a56;
        color: #fff;
    }

    #footer a {
        color: #fff;
    }


    .marginAuto {
        margin: auto;
    }

    .breadcrumb ol, .breadcrumb ul {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.breadcrumb li {
  align-items: center;
  display: flex;
}


.navbar-item {
    position: relative;
    display: inline-block;
}

.cart-value {
    background: #D10024;
    color: #fff;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 700;
    position: absolute;
    top: -5px;
    right: -8px;
    line-height: 16px;
    min-width: 16px;
    padding: 0 4px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

html[dir="rtl"] .cart-value {
    right: auto;
    left: -8px;
}


/*
 
.breadcrumbs ul {
  margin: 0 !important;
  padding: 15px 0 0 !important;
  display: inline-block !important;
  width: 100%;
  font-size: 100% !important;
}
*/

.breadcrumb__list {
  display: flex;
  align-items: center;
}







    /* menu */
.menu-wrapper, .menu a{
    background-color: Tomato;
    width: 100%;
    color: #fff;
}

/* The open dropdown only claims z-index 1, which page content beat: the fiche
   produit paints its flags and its .img-shield at z-index 2, so the card sat
   over the submenu -- hiding the items behind it and swallowing their clicks.
   The bar takes a layer of its own instead, so everything inside it clears the
   page whatever the page stacks. 50 leaves the header search panel (60), the
   cart drawer and the mobile nav (999+), the country switcher (2000) and
   checkout (10000) above it. */
.menu-wrapper {
    position: relative;
    z-index: 50;
}

@media only screen and (max-width: 600px) {
  .menu-wrapper {
    display: none;
  }

}

@media only screen and (max-width: 600px) {
  #searchBox {
    display: none;
  }
}

.menu::after{
    content: '';
    clear: both;
    display: block;
}

.menu a{
    display: block;
    padding: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
}

.menu li{
    position: relative;
}

.menu > li{
    float: left;
}

html[dir="rtl"] .menu > li {
    float: right;
}

.menu, .menu ul{
    padding: 0;
    margin: 0;
    list-style-type: none;
    margin: auto;
}

.menu ul li+li{
    border-top: 1px solid #fff;
}

.menu ul{
    position: absolute;
    box-shadow:  5px 5px 10px 0 rgba(0,0,0, 0.5);
}

.menu > li ul, .menu ul ul{
    opacity: 0;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    z-index: -1;
    visibility: hidden;
}

html[dir="ltr"] .menu > li ul{
    /*top: 130%; */
    left: 0;
}

html[dir="rtl"] .menu > li ul{
    right: 0;
}

.menu ul ul{
    left: 130%;
    top: 0;
}

.menu ul a{
    width: 250px;
}

.menu > li:hover > ul{
    top: 100%;
    opacity: 1;
    z-index: 1;
    visibility: visible;
}

.menu ul > li:hover > ul{
    left: 100%;
    opacity: 1;
    z-index: 1;
    visibility: visible;
}

/* color set */
.menu-gray, .menu-gray a{
    background-color: #CCC;
    color: #222;
}
.menu-gray a:hover{
    background-color: #BBB;
    color: #222;
}

.menu-tomato, .menu-tomato a{
    background-color: Tomato;
    color: #FFF;
}
.menu-tomato a:hover{
    background-color: #ff3c1a;
    color: #FFF;
}

.menu-dodgerblue, .menu-dodgerblue a{
    background-color: dodgerblue;
    color: #FFF;
}
.menu-dodgerblue a:hover{
    background-color: #0080ff;
    color: #FFF;
}

.menu-gold, .menu-gold a{
    background-color: gold;
    color: #000;
}
.menu-gold a:hover{
    background-color: #e6c300;
    color: #000;
}

.menu-limegreen, .menu-limegreen a{
    background-color: limegreen;
    color: #fff;
}
.menu-limegreen a:hover{
    background-color: #28a428;
    color: #fff;
}

.menu-crimson, .menu-crimson a{
    background-color: crimson;
    color: #fff;
}
.menu-crimson a:hover{
    background-color: #bb1133;
    color: #fff;
}

.menu-cadetblue, .menu-cadetblue a{
    background-color: CadetBlue;
    color: #fff;
}
.menu-cadetblue a:hover{
    background-color: #4d7e80;
    color: #fff;
}

.menu-indigo, .menu-indigo a{
    background-color: indigo;
    color: #fff;
}
.menu-indigo a:hover{
    background-color: #3b0066;
    color: #fff;
}

.menu-magenta, .menu-magenta a{
    background-color: magenta;
    color: #fff;
}
.menu-magenta a:hover{
    background-color: #cc00cc;
    color: #fff;
}

.menu-darkkhaki, .menu-darkkhaki a{
    background-color: darkkhaki;
    color: #fff;
}
.menu-darkkhaki a:hover{
    background-color: #b0a94f;
    color: #fff;
}

.menu-sandybrown, .menu-sandybrown a{
    background-color: sandybrown;
    color: #fff;
}
.menu-sandybrown a:hover{
    background-color: #f29340;
    color: #fff;
}

.menu-hotpink, .menu-hotpink a{
    background-color: hotpink;
    color: #fff;
}
.menu-hotpink a:hover{
    background-color: #ff3399;
    color: #fff;
}
/* === 04-footer.css === */
/* ---------------------------------------------------------------------------
   04-footer.css

   Footer grid, footer typography, and the .description block.

   Part of the storefront stylesheet. These files are concatenated IN FILENAME
   ORDER by libs/cssBundle.js -- the numeric prefix is load order, not decoration.
   Rules here were lifted verbatim out of views/include/style.ejs, so the cascade
   still depends on their position. Moving a rule between files can change which
   declaration wins; re-run the computed-style check if you do.
   --------------------------------------------------------------------------- */
/*
.footer {
    grid-column-gap: var(--grid-spacing-horizontal);
    grid-row-gap: var(--grid-spacing-vertical);
    display: grid;
    grid-template-columns: 330px auto auto auto;
    padding-top: 40px;
    padding-bottom: 60px;
}
*/
.footer {
    display: grid;
    padding-top: 40px;
    padding-bottom: 60px;
}

@media (min-width: 992px) {
  .footer {
    grid-template-columns: 3fr 2fr 1fr;
    column-gap: 20px;
  }
}

footer h3 {
    margin-top: 20px;
    font-weight: 700;
    margin-bottom: 15px;
}

footer a {
    font-weight: 400;
}

footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.description {
    color: #555;
    line-height: 20px;
    font-size: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
}
/* === 05-product-detail.css === */
/* ---------------------------------------------------------------------------
   05-product-detail.css

   Product page: price, spec table, quantity stepper, service area,
   image thumbnails.

   Part of the storefront stylesheet. These files are concatenated IN FILENAME
   ORDER by libs/cssBundle.js -- the numeric prefix is load order, not decoration.
   Rules here were lifted verbatim out of views/include/style.ejs, so the cascade
   still depends on their position. Moving a rule between files can change which
   declaration wins; re-run the computed-style check if you do.
   --------------------------------------------------------------------------- */
/*
#productList article h3 {
    font-size: 22px;
}
*/

.price {
    font-size: 19px;
    padding-top: 3px;
    font-weight: bold;
}

td {
  padding: 10px;
}

th {
  padding: 10px;
}

#specs tr:nth-child(odd) {
  background-color: #efefef;
}


.quantity {
  position: relative;
  display: inline-block;
  float: left;
    margin-right: 10px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
{
  -webkit-appearance: none;
  margin: 0;
}

input[type=number]
{
  -moz-appearance: textfield;
}

.quantity input {
  width: 45px;
  height: 38px;
  line-height: 1.65;
  float: left;
  display: block;
  padding: 0;
  margin: 0;
  padding-left: 20px;
  border: 1px solid #eee;
  border-radius: 9px;
}


.quantity input:focus {
  outline: 0;
}

.quantity-nav {
  float: left;
  position: relative;
  height: 38px;
}

.quantity-button {
  position: relative;
  cursor: pointer;
  border-left: 1px solid #eee;
  width: 20px;
  text-align: center;
  color: #333;
  font-size: 13px;
  font-family: "Trebuchet MS", Helvetica, sans-serif !important;
  line-height: 1.7;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.quantity-button.quantity-up {
  position: absolute;
  height: 50%;
  top: 0;
  border-bottom: 1px solid #eee;
}

.quantity-button.quantity-down {
  position: absolute;
  bottom: -1px;
  height: 50%;
}


.service-area ul {
    list-style: none;
    padding: 0px;
    margin-top: 30px;
}

.service-area li {
    margin: 0px;
}

.service-area svg {
    padding-right: 20px;
}


.product-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.thumbImg {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 0;
  cursor: pointer;
}
.thumbImg.selected {
  border-color: #555;
}

@media only screen and (min-width: 600px) {
  #cart-table {
    padding-right: 20px;

  }
}

/* Flags overlaid on the main product image ("Déstockage", "En rupture"...).
   The generic .discount / .in_stock / .outOfStock rules in 10-product-grid.css
   and 09-components.css each pin themselves to top/left of the nearest
   positioned ancestor -- on the product page that is .product-image-card, so
   they landed on the card's rounded corner and stacked on top of each other
   when a product carried more than one flag. Here the <ul> does the
   positioning and the items just flow inside it. Specificity is what keeps
   these ahead of the single-class rules loaded later in the bundle. */
.product-image-card .product-flags {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  inset-inline-end: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 2;
}

.product-image-card .product-flags .product-flag {
  position: static;
  width: auto;
  margin: 0;
  padding: 4px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: start;
}

.product-image-card .product-flags .discount {
  background: #d10024;
}

.product-image-card .product-flags .in_stock {
  background: #ff7a00;
}

.product-image-card .product-flags .outOfStock {
  background: rgba(15, 17, 17, 0.72);
  font-weight: 600;
}


/* Colour swatches on the product page. The swatch itself is the shared
   .variation-swatch component in 09-components.css -- the fiche only sizes it
   up (it is the primary control here, not a hint on a tile) and adds the
   label. */
.product-variations {
  --swatch-size: 34px;
  margin: 16px 0;
}

.product-variations .variation-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
}

.product-variations .variation-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* === 06-cart.css === */
/* ---------------------------------------------------------------------------
   06-cart.css

   Cart layout and order totals.

   Part of the storefront stylesheet. These files are concatenated IN FILENAME
   ORDER by libs/cssBundle.js -- the numeric prefix is load order, not decoration.
   Rules here were lifted verbatim out of views/include/style.ejs, so the cascade
   still depends on their position. Moving a rule between files can change which
   declaration wins; re-run the computed-style check if you do.
   --------------------------------------------------------------------------- */
#mycart {
  display: grid;
  grid-template-columns: auto 350px;
}

.totals {
/*  border-radius: 10px; */
  background-color: #f3f3f3;
  padding: 30px;
}

@media only screen and (max-width: 600px) {
  #mycart {
    display: block;
  }

  .totals {
    margin-top: 50px;
    background-color: transparent;
    padding: 0px;
  } 
}

.totals h5 {
  font-weight: 500;
}

.totals-item {
  display: grid;
  grid-template-columns: 50% 50%;
  padding-top: 4px;
}

.totals-value {
  text-align: right;
}
/* === 07-forms.css === */
/* ---------------------------------------------------------------------------
   07-forms.css

   Form fields and labels, article cards, #productList grid, print rules,
   xs- visibility helpers, number inputs, delete/remove buttons.

   Part of the storefront stylesheet. These files are concatenated IN FILENAME
   ORDER by libs/cssBundle.js -- the numeric prefix is load order, not decoration.
   Rules here were lifted verbatim out of views/include/style.ejs, so the cascade
   still depends on their position. Moving a rule between files can change which
   declaration wins; re-run the computed-style check if you do.
   --------------------------------------------------------------------------- */
form label {
	font-size:14px;
	cursor:pointer;
}

/*
form label,
form input {
	width: 100px;
  display: inline-block;
}
*/

form input[type=text], input[type=email], input[type=password] {
	margin: 5px 0;
	padding:10px 10px;
	width: 300px;
  max-width: 100%;
	outline:none;
	border:1px solid #bbb;
	border-radius: 8px;
	display:inline-block;
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
	        box-sizing:border-box;
    -webkit-transition:0.2s ease all;
	   -moz-transition:0.2s ease all;
	    -ms-transition:0.2s ease all;
	     -o-transition:0.2s ease all;
	        transition:0.2s ease all;
}

form input[type=text]:focus,
form input[type="password"]:focus {
	border-color:cornflowerblue;
}

.form-group {
  float: left;
  margin-right: 10px;
}


article img {
  margin: auto;
  width: 150px;
  display: block;
}

article .card-title {
  text-align: center;
  padding-top: 16px;
}




.text-center {
  text-align: center;
}

.pdt-10 {
  padding-top: 10px;
}


#productList.grid h3 {
    padding-top: 25px;
    letter-spacing: -0.7px;
  }

  #productList.grid .price {
    font-size: 18px;
    padding-top: 3px;
    color: #d40f2d;
    font-weight: 600;
    letter-spacing: -0.7px;
  }

  #productList.grid article {
    padding-bottom: 50px;
    padding-right: 10px;
  }

@media (min-width: 992px) {
  #productList.grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #productList.grid article {
    padding-right: 30px;
    padding-bottom: 50px;
  }

  
}

.content {
  max-width: 700px;
}


  .slider-image {
      width: 100%;
      height: auto;
  }


  @media print {
    body * {
      visibility: hidden;
    }

    .print,
    .print * {
      visibility: visible;
    }

    .print {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      padding: 0 20px;
      font-size: 14px; /* Adjust font size for print */
    }
  }

  .xs-visible {
            display: none;
        }

        @media (max-width: 576px) {
            .xs-visible {
                display: block;
            }
        }

        .xs-hidden {
            display: block;
        }

        @media (max-width: 576px) {
            .xs-hidden {
                display: none;
            }
        }

        .input-elevated{
font-size: 16px;
line-height: 1.5;
border: none;
background: #FFFFFF;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path fill='%23838D99' d='M13.22 14.63a8 8 0 1 1 1.41-1.41l4.29 4.29a1 1 0 1 1-1.41 1.41l-4.29-4.29zm-.66-2.07a6 6 0 1 0-8.49-8.49 6 6 0 0 0 8.49 8.49z'></path></svg>");
background-repeat: no-repeat;
background-position: 10px 10px;
background-size: 20px 20px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
border-radius: 5px;
width: 300px;
padding: .5em 1em .5em 2.5em;
} 

.input-elevated::placeholder{
  color: #838D99;
}

.input-elevated:focus {
  outline: none;
  box-shadow: 0 4px 10px 0 rgba(0,0,0,0.16);
}


.input-number {
  width: 20px;
  padding: 0 !important;
  padding-inline-start: 0 !important;
  background-image: none !important;
  border-radius: 0 !important;
  vertical-align: top;
  text-align: center;
  outline: none;
}

.input-number,
.input-number-decrement,
.input-number-increment {
  border: 1px solid #ccc;
  height: 30px;
  user-select: none;
}

.input-number-decrement,
.input-number-increment {
  display: inline-block;
  width: 20px;
  line-height: 30px;
  background: #f1f1f1;
  color: #444;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
.input-number-decrement:active,
.input-number-increment:active {
  background: #ddd;
}

.input-number-decrement {
  border-right: none;
  border-radius: 4px 0 0 4px;
}

.input-number-increment {
  border-left: none;
  border-radius: 0 4px 4px 0;
}

html[dir="rtl"] .input-number-decrement {
  border-right: 1px solid #ccc;
  border-left: none;
  border-radius: 0 4px 4px 0;
}

html[dir="rtl"] .input-number-increment {
  border-left: 1px solid #ccc;
  border-right: none;
  border-radius: 4px 0 0 4px;
}




.product-price {
  font-weight: 500;
}

.remove-item {
  padding-top: 0px;
  padding-left: 8px;
  display: block;
}




.delete-button {
    background: #4b4949;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    left: -5px;
    line-height: 17px;
    min-width: 18px;
    position: absolute;
    top: -5px;
    display: inline-block;
    text-align: center;
}

.delete-button a {
  color: #FFFFFF;
  font-weight: 700;
  font-family: sans-serif;
}
/* === 08-mobile-nav.css === */
/* ---------------------------------------------------------------------------
   08-mobile-nav.css

   Filters, off-canvas sidebar, mobile menu, hamburger toggle, floating
   WhatsApp button, and the custom select dropdown.

   Part of the storefront stylesheet. These files are concatenated IN FILENAME
   ORDER by libs/cssBundle.js -- the numeric prefix is load order, not decoration.
   Rules here were lifted verbatim out of views/include/style.ejs, so the cascade
   still depends on their position. Moving a rule between files can change which
   declaration wins; re-run the computed-style check if you do.
   --------------------------------------------------------------------------- */
.filter {
    display: inline-block;
    padding: .1em 1em;
    margin: 2px 2px 2px 2px;
    font-size: 14px;
    white-space: nowrap;
    text-decoration: none;
    text-align: center;
    border-width: 0.5px;
    border-style: solid;
    border-radius: 20px;
    border-color: #aaa;
}





        #sidebar {
            width: 300px;
            height: 100%;
            position: fixed;
            top: 0;
            background-color: #fff;
            transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            z-index: 1001;
            visibility: visible;
            display: flex;
            flex-direction: column;
        }

        html[dir='ltr'] #sidebar {
            left: 0;
            right: auto;
            box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2);
            transform: translateX(-100%);
        }

        html[dir='rtl'] #sidebar {
            right: 0;
            left: auto;
            box-shadow: -2px 0 15px rgba(0, 0, 0, 0.2);
            transform: translateX(100%);
        }

        #sidebar.active {
            transform: translateX(0);
        }

        #menuOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(3px);
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        #menuOverlay.active {
            opacity: 1;
            visibility: visible;
        }

        .sidebar-header {
            padding: 20px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            border-bottom: 1px solid #eee;
        }

        html[dir='rtl'] .sidebar-header {
            justify-content: flex-start;
        }

        .close-sidebar {
            font-size: 32px;
            cursor: pointer;
            color: #333;
            line-height: 1;
            padding: 10px;
            margin: -10px;
            display: inline-block;
        }

        #mobileNav {
            overflow-y: auto;
            flex: 1;
            padding: 10px 0;
            display: flex;
            flex-direction: column;
        }

        .mobile-menu-item {
            border-bottom: 1px solid #f5f5f5;
        }

        .mobile-menu-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .mobile-menu-header:hover {
            background: #f9f9f9;
        }

        .mobile-menu-header a {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            flex: 1;
        }

        .mobile-menu-toggle {
            transition: transform 0.3s ease;
            display: flex;
            align-items: center;
            color: #666;
        }

        .mobile-menu-item.active .mobile-menu-toggle {
            transform: rotate(180deg);
        }

        .mobile-submenu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
            background: #fcfcfc;
        }

        .mobile-menu-item.active .mobile-submenu {
            max-height: 500px;
            transition: max-height 0.5s ease-in;
        }

        .mobile-submenu a {
            display: block;
            padding: 12px 40px;
            font-size: 14px;
            color: #555;
            border-top: 1px solid #f0f0f0;
        }

        @media (min-width: 769px) {
            #sidebar, #menuOverlay {
                display: none;
            }
        }

        .toggle-menu {
            cursor: pointer; /* Pointer cursor for toggle button */
            display: none; /* Initially hidden */
        }

        @media (max-width: 768px) {
            .toggle-menu {
                display: inline-block; /* Show toggle button on mobile */
            }
        }

        .main-content {
            margin-left: 250px; padding: 1rem;
        }

        @media (max-width: 768px) {
            .main-content {
                margin-left: 0px;
            }
        }

.sidebar ul {
  list-style: none;
  padding: 0px;
}

.sidebar ul li {
  border-bottom: 1px solid #ccc;
  padding: 8px;
  padding-left: 20px;
}


.sidebar {
  overflow: auto;
}




#menuToggle
{
  display: none;
  z-index: 2;
  -webkit-user-select: none;
  user-select: none;
  padding-top: 5px;
  position: relative; /* Added to contain the absolute input */
}

@media (max-width: 768px) {
#menuToggle
{
  display: block;
}
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: 0;
  left: 0;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 999; /* ensure it's on top of everything in the nav */
  
  -webkit-touch-callout: none;
}

html[dir="rtl"] #menuToggle input {
    left: auto;
    right: 0;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 30px;
  height: 3px;
  margin-bottom: 5px;
  position: relative;
  background: #FFFFFF;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(1)
{
  transform: rotate(-45deg) translate(0, -1px);
}


.whatsapp-icon {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 80px;
            height: 80px;
            background-color: #00c100;
            background-image: url('/img/whatsapp.svg');
            background-size: cover;
            background-position: center;
            border-radius: 50%;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .whatsapp-icon:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
        }

        /* RTL-specific positioning */
        html[dir="rtl"] .whatsapp-icon {
            right: auto;
            left: 30px;
        }


        @media (max-width: 768px) {
            .whatsapp-icon {
                width: 60px;
                height: 60px;
                bottom: 15px;
                right: 15px;
            }

            html[dir="rtl"] .whatsapp-icon {
                left: 15px;
                right: auto;
            }
        }

        @media (max-width: 480px) {
            .whatsapp-icon {
                width: 50px;
                height: 50px;
                bottom: 10px;
                right: 10px;
            }

            html[dir="rtl"] .whatsapp-icon {
                left: 10px;
                right: auto;
            }
        }


        .select-dropdown {
  position: relative;
  background-color: #e6e6e6;
  width: auto;
  float: left;
  max-width: 100%;
  border-radius: 20px;
  margin-right: 10px; 
  select {
    font-family: "helvetica neue", helvetica;
    font-size: 1rem;
    font-weight: 200;
    max-width: 100%;
    padding: 8px 24px 8px 10px;
    border: none;
    background-color: transparent;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    &:active,
    &:focus {
      outline: none;
      box-shadow: none;
    }
  }
  &:after {
    content: " ";
    position: absolute;
    top: 50%;
    margin-top: -2px;
    right: 8px;
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #aaa;
  }

}

.price .decimal {
    font-size: 13px; /* Smaller font size for decimals */
    vertical-align: text-top; /* Aligns the decimal slightly higher */
    padding-left: 1px;
  }
/* === 09-components.css === */
/* ---------------------------------------------------------------------------
   09-components.css

   Truncation, language switcher, checkout error, mobile search overlay,
   cart vibrate animation. (The stock/discount badges lived here too, as an
   exact duplicate of the copies in 10-product-grid.css that always won; the
   dead copies are gone.)

   Part of the storefront stylesheet. These files are concatenated IN FILENAME
   ORDER by libs/cssBundle.js -- the numeric prefix is load order, not decoration.
   Rules here were lifted verbatim out of views/include/style.ejs, so the cascade
   still depends on their position. Moving a rule between files can change which
   declaration wins; re-run the computed-style check if you do.
   --------------------------------------------------------------------------- */
  .truncate {
  display: -webkit-box;             /* Use a flexbox-like layout model */
  -webkit-line-clamp: 2;            /* Limit to 2 lines */
  -webkit-box-orient: vertical;     /* Vertical box orientation */
  overflow: hidden;                 /* Hide overflowed text */
  text-overflow: ellipsis;          /* Show ellipsis (...) for truncated text */
  line-height: 1.2em;               /* Adjust line height as needed */
  max-height: 2.4em;                /* Max height to ensure 2 lines (line-height * 2) */
}

.content h1 {
  text-transform: uppercase;
}

.accordion-body {
    max-height: 500rem;
}

.language-dropdown {
  list-style: none;

}

.lang-select {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='black' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 32px;
  transition: border-color 0.2s ease-in-out;
}

.lang-select:hover,
.lang-select:focus {
  border-color: #888;
}

.outOfStock {
    z-index: 2;
    color: #fff;
    background: gray;
    vertical-align: top;
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0;
    padding: 0 6px;
    text-align: center;
    -webkit-transition: all 500ms ease 0s;
    -moz-transition: all 500ms ease 0s;
    -o-transition: all 500ms ease 0s;
    transition: all 500ms ease 0s;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    -moz-border-radius: 3px;
    width: 100px;
}

.content p a {
  text-decoration: underline;
  font-weight: bold;
}

.content p {
  text-align: justify;
}

#checkout-error-message {
    padding: 8px;
    margin-bottom: 10px;
    background-color: #fff3cd; /* Light yellow/warning color */
    border: 1px solid #ffeeba;
    color: #856404; /* Darker text for readability */
    border-radius: 4px;
    text-align: center;
    font-size: 0.9rem;
}

/* Mobile Search Enhancements */
/* The sheet carries the autocomplete panel as well as the input, so its height
   is not fixed any more: it is capped at the region the shopper can actually
   see. --msv-h / --msv-top are written from window.visualViewport in
   header.ejs, because the software keyboard covers the bottom of the window
   without shrinking 100vh -- the tail of the suggestion list used to render
   underneath it. The closed position is translateY(-100%) rather than a
   -100px top so a tall sheet is still fully off-screen when it slides away. */
#mobileSearchInputContainer {
    position: fixed;
    top: var(--msv-top, 0px);
    left: 0;
    width: 100%;
    /* The storefront has no global border-box; without this the sheet's own
       padding is added on top of the viewport budget and the last row of the
       list falls off the bottom of the screen. */
    box-sizing: border-box;
    max-height: var(--msv-h, 100vh);
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 15px 0 calc(15px + env(safe-area-inset-bottom, 0px));
    z-index: 1100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    visibility: hidden;
}

#mobileSearchInputContainer.active {
    transform: translateY(0);
    visibility: visible;
}

.mobile-search-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 15px;
    flex: 0 0 auto;
}

#formMobileSearch {
    flex: 1;
}

.search-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

#mobileSearchInput {
    width: 100%;
    padding: 12px 45px 12px 15px;
    border: 2px solid #eee;
    border-radius: 25px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s;
}

#mobileSearchInput:focus {
    border-color: #D10024;
}

.search-submit-btn {
    position: absolute;
    right: 7px;
    background: #D10024;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.close-search-btn {
    background: none;
    border: none;
    font-size: 32px;
    color: #666;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

#mobileSearchOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 1090;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#mobileSearchOverlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-search-wrapper {
    display: none;
}

@media (max-width: 992px) {
    .mobile-search-wrapper {
        display: block;
    }
    #mobileSearchIcon {
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

#topNavigation {
    position: sticky;
    top: -36px;
    width: 100%;
    z-index: 1000; /* Ensure it stays on top of other content */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optional: for a subtle shadow effect */
}

/* Mobile specific styles - show on screens smaller than 768px */
@media (max-width: 767px) {
    .mobile-search-wrapper {
        display: block;
    }
}

/* Cart vibration animation */
@keyframes vibrate {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

.vibrate-animation {
    animation: vibrate 0.3s ease-in-out infinite;
}

/* Hover effect for the plus icon */                
/*                                                         │
.product-image-wrapper a svg {                                                                               │
  transition: transform 0.2s ease-in-out;              
}                                                                                                     │

.product-image-wrapper a:hover svg {                                                                         │
  transform: scale(1.2);                                             │
}       
*/      

.breadcrumb-container {
  margin-top: 1rem;
  padding: 1px;
}

/* ---------------------------------------------------------------------------
   Colour swatch -- shared by the product page (.product-variations) and the
   category / search grids (.variations). One component so a family looks the
   same wherever it is offered; the caller sets --swatch-size and the row
   layout. The <a> is the ring and the <span> the colour, which is what lets
   the selected state read as a ring around the colour rather than a border
   drawn on top of it.
   --------------------------------------------------------------------------- */
.variation-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Default in the fallback, not a declaration of its own: a custom property
     set on the element would win over the one the page sets on the row. */
  width: var(--swatch-size, 24px);
  height: var(--swatch-size, 24px);
  padding: 3px;
  border: 1px solid #ddd;
  border-radius: 50%;
  box-sizing: border-box;
  transition: border-color 0.15s ease-in-out;
}

.variation-swatch:hover {
  border-color: #888;
}

/* The colour being viewed (or picked on a tile) -- the ring is what tells the
   visitor which of the swatches is theirs. */
.variation-swatch.selected {
  border-color: #0f1111;
  border-width: 2px;
  padding: 2px;
}

.variation-icon {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* A white or near-white colour would otherwise be an invisible circle. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* === 10-product-grid.css === */
/* ---------------------------------------------------------------------------
   10-product-grid.css

   Breadcrumb, product flags, Frequently Bought Together, and the
   .product-grid / .category-grid card systems.

   Part of the storefront stylesheet. These files are concatenated IN FILENAME
   ORDER by libs/cssBundle.js -- the numeric prefix is load order, not decoration.
   Rules here were lifted verbatim out of views/include/style.ejs, so the cascade
   still depends on their position. Moving a rule between files can change which
   declaration wins; re-run the computed-style check if you do.
   --------------------------------------------------------------------------- */
.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  background: none;
  margin: 0;
}

.breadcrumb-item {
  font-size: 0.9rem;
  color: #555;
}

.breadcrumb-item + .breadcrumb-item:before {
  content: "/";
  padding: 0 0.5rem;
  color: #aaa;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: #555;
  text-decoration: none;
  pointer-events: none;
  cursor: default;
}

nav li {
  padding-left: 6px;
}

/* Merged from two .img-fluid rules that each declared only part of this.
   Neither overrode the other, so the effective style was already their union. */
.img-fluid {
  max-width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  width: 100%;
}


.discount {
    z-index: 2;
    color: #fff;
    background: red;
    vertical-align: top;
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0;
    padding: 0 6px;
    text-align: center;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    -moz-border-radius: 3px;
    width: 100px;
}

.in_stock {
    z-index: 2;
    color: #fff;
    background: orange;
    vertical-align: top;
    display: inline-block;
    position: absolute;
    top: 20px;
    left: 0px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0;
    padding: 0 6px;
    text-align: center;
    -webkit-transition: all 500ms ease 0s;
    -moz-transition: all 500ms ease 0s;
    -o-transition: all 500ms ease 0s;
    transition: all 500ms ease 0s;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    -moz-border-radius: 3px;
    width: 100px;
}


.pt-40 {
    padding-top: 40px;
}

.product-flags {
  position: absolute;
}

html[dir="rtl"] .product-flags {
  left: 0;
}

/* Frequently Bought Together Styles */
.frequently-bought-together {
  margin-top: 40px;
  padding: 30px;
  background: #f9f9f9;
  border-radius: 8px;
}

.fbt-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fbt-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.fbt-item {
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  transition: border-color 0.3s ease;
}

.fbt-item:has(input:checked) {
  border-color: #D10024;
}

.fbt-item input[type="checkbox"] {
  margin-bottom: 10px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.fbt-item label {
  cursor: pointer;
  display: block;
}

.fbt-item img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  border-radius: 4px;
}

.fbt-product-info {
  margin-top: 10px;
}

.fbt-product-name {
  font-size: 14px;
  margin: 5px 0;
  line-height: 1.4;
}

.fbt-product-price {
  font-size: 16px;
  font-weight: bold;
  color: #D10024;
  margin: 5px 0;
}

.fbt-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  flex-wrap: wrap;
  gap: 15px;
}

.fbt-total {
  font-size: 18px;
  margin: 0;
}

#fbt-total-price {
  color: #D10024;
  font-size: 20px;
}

@media (max-width: 768px) {
  .fbt-products {
    grid-template-columns: 1fr;
  }
  
  .fbt-summary {
    flex-direction: column;
    text-align: center;
  }
  
  .fbt-summary a {
    width: 100%;
  }
}

/* ============================================================
   Shared product card (used on category, home & product pages)
   Scoped under .product-grid so it never clobbers other cards.
   ============================================================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  padding-bottom: 20px;
}

.product-grid article {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  height: 100%;
  overflow: hidden;
}

.product-grid article:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0, 43, 88, 0.12);
  border-color: #dfe6ee;
}

.product-grid .product-image-wrapper {
  position: relative;
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  margin: 0;
  background: #f7f8fa;
}

.product-grid .product-image-wrapper > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.product-grid .product-image-wrapper img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  margin: 0;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.3s ease;
}

.product-grid article:hover .product-image-wrapper img {
  transform: scale(1.05);
}

.product-grid .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 16px 16px;
}

.product-grid h3.truncate {
  font-size: 14px;
  line-height: 1.4;
  max-height: 2.8em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0 0 10px 0;
  padding: 0;
  font-weight: 500;
}

.product-grid h3.truncate a {
  color: #1a2733;
  text-decoration: none;
  transition: color 0.2s ease;
}

.product-grid h3.truncate a:hover {
  color: #002b58;
  text-decoration: none;
}

/* Price block. The row gap used to be a single `gap: 8px`, which spaced the
   currency away from its own number exactly as much as the crossed-out old
   price -- "349  DH  399 DH" read as three separate things. The amount and its
   symbol are now one unit and only the old price is pushed away from it. Red
   is the colour the discount badge and the fiche produit already use, so a
   price keeps one colour from the grid through to the product page. */
.product-grid .price {
  margin-top: auto;
  padding: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
  font-family: inherit;
  font-weight: 700;
  color: #d10024;
}

.product-grid .price .integer {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.product-grid .price .currency-symbol {
  font-size: 13px;
  margin-inline-start: 3px;
  font-weight: 600;
}

.product-grid .price .decimal {
  font-size: 11px;
  font-weight: 600;
}

.product-grid .old-price {
  margin-inline-start: 10px;
  font-size: 13px;
  color: #9aa4ae;
  text-decoration: line-through;
  font-weight: 500;
  white-space: nowrap;
}

/* Colour swatches belong with the price, not under the title: the flexible
   space of the card body goes above the swatch row, so the row and the price
   sit together at the bottom of the tile. Prices stay aligned across a grid
   row either way -- what is packed below the auto margin (price + button) is
   the same height whether or not a tile has swatches. Moving the auto margin
   means the price must give its own up, hence the sibling rule; two auto
   margins in one flex column would split the free space between them. */
.product-grid .variations {
  margin-top: auto;
  margin-bottom: 10px;
}

.product-grid .variations + .price {
  margin-top: 0;
}

/* Quantity + add-to-cart on one row at the foot of the tile. The stepper keeps
   its natural width and the button takes the rest. Room is tight -- the grid
   columns are minmax(220px, 1fr) -- so the stepper is as narrow as it can be
   while staying clickable, and the button trades some padding and icon gap for
   label width. Everything below is a reset of a global: `button` is black,
   pill-shaped and padded site-wide, and `input:not([type=checkbox]...)` in
   02-base.css hands every input the rounded search field with its icon. */
.product-grid .card-actions {
  margin-top: 12px;
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.product-grid .card-actions .add-to-cart-btn-icon {
  margin-top: 0;
  flex: 1 1 auto;
  min-width: 0;
  /* Padding, icon gap and a hair of font size go to the label instead: at the
     ~270-310px columns a desktop grid actually produces, that is the
     difference between "Ajouter au panier" on one line and on two. Narrower
     than that it wraps, which costs height but keeps every tile identical. */
  padding: 10px 8px;
  gap: 5px;
  font-size: 12.5px;
}

.product-grid .card-actions .add-to-cart-btn-icon svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.product-grid .qty-stepper {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  border: 1px solid #dfe6ee;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.product-grid .qty-btn {
  width: 24px;
  height: auto;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #f2f5f8;
  color: #002b58;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.product-grid .qty-btn:hover {
  background: #e4eaf1;
}

.product-grid .qty-btn:active {
  background: #d5dee8;
}

.product-grid .qty-input {
  width: 26px;
  height: auto;
  margin: 0;
  padding: 0;
  padding-inline-start: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  background-image: none;
  box-shadow: none;
  outline: none;
  text-align: center;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #1a2733;
}

.product-grid .add-to-cart-btn-icon {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  background-color: #002b58;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.product-grid .add-to-cart-btn-icon svg {
  width: 18px;
  height: 18px;
}

.product-grid .add-to-cart-btn-icon:hover {
  background-color: #d10024;
  color: #fff;
  transform: translateY(-1px);
}

/* Badges overlaid on the image */
.product-grid .product-badges {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-grid .badge-discount {
  background: #d10024;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 20px;
  line-height: 1;
}

.product-grid .badge-destock {
  background: #ff7a00;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 20px;
  line-height: 1;
}

.product-grid .badge-oos {
  background: rgba(15, 17, 17, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 20px;
  line-height: 1;
}

@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .product-grid .product-image-wrapper {
    height: 150px;
    padding: 10px;
  }

  .product-grid .card-body {
    padding: 10px 12px 12px;
  }

  .product-grid h3.truncate {
    font-size: 13px;
  }

  .product-grid .price .integer {
    font-size: 19px;
  }

  .product-grid .add-to-cart-btn-icon {
    padding: 9px 10px;
    font-size: 12px;
  }

  /* Thumb-sized stepper on touch screens. */
  .product-grid .card-actions .add-to-cart-btn-icon {
    padding: 9px 10px;
  }

  .product-grid .qty-btn {
    width: 30px;
  }

  .product-grid .qty-input {
    width: 30px;
  }
}

/* Phones. Below this width the two columns leave the button under ~160px --
   measured as the point where "Ajouter au panier" starts breaking onto a
   second and then a third line. The label gives way to the cart icon the
   button already carries; title and aria-label keep the wording for screen
   readers. Wider than this it fits on one line and stays. */
@media (max-width: 620px) {
  .product-grid .card-actions .add-to-cart-btn-icon span {
    display: none;
  }
}

/* ============================================================
   Category cards (home page) — same card look as products,
   scoped under .category-grid. Column counts stay as-is.
   ============================================================ */
.category-grid {
  gap: 10px;
}

.category-grid article {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.category-grid article:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0, 43, 88, 0.12);
  border-color: #dfe6ee;
}

.category-grid article > a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.category-grid article img {
  width: 100%;
  height: 160px;
  margin: 0;
  display: block;
  object-fit: contain;
  box-sizing: border-box;
  background: #fff;
  padding: 12px 12px 0;
  transition: transform 0.3s ease;
}

.category-grid article:hover img {
  transform: scale(1.05);
}

.category-grid .card-title {
  text-align: center;
  margin: 0;
  padding: 8px 10px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #1a2733;
}

@media (max-width: 768px) {
  .category-grid article img {
    height: 120px;
    padding: 10px 10px 0;
  }

  .category-grid .card-title {
    font-size: 13px;
    padding: 6px 8px 10px;
  }
}


/* === 11-image-protection.css === */
/* ---------------------------------------------------------------------------
   11-image-protection.css

   Fait le pendant CSS de /js/image-protection.js : filigrane sur les photos
   produits + gene des chemins de copie faciles (clic droit, appui long, glisser,
   impression, capture par outil qui vole le focus).

   A savoir : une page web NE PEUT PAS bloquer une capture d'ecran systeme
   (Impr. ecran, Outil Capture, Cmd+Shift+4, screenshot mobile). Aucune API
   navigateur ne l'expose. Ce fichier rend la copie penible et signe l'image :
   le filigrane part DANS la capture, c'est la seule partie qui protege vraiment.

   Charge par le bundle `core` (public/css/storefront/ concatene dans l'ordre des
   noms de fichiers -- voir 01-tokens.css). Ce fichier n'ajoute que des nouveaux
   selecteurs, il ne redefinit rien des bandes 01-10.
   --------------------------------------------------------------------------- */

/* Le menu "Enregistrer l'image" d'iOS/Android sort d'un appui long, pas d'un
   contextmenu -- preventDefault() ne suffit donc pas sur mobile. */
#productImg,
.thumbImg,
.product-image,
.product-grid .product-image-wrapper img,
.fbt-item img {
  -webkit-touch-callout: none;
}

/* Le calque est insere par le JS dans un parent deja `position: relative`
   (.product-image-card sur la fiche, .product-image-wrapper dans la grille). */
.img-shield {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  background-position: center;
  z-index: 1;
}

/* Fiche produit : le calque intercepte aussi le pointeur, le clic droit et
   l'appui long tombent sur un div vide au lieu du <img>. L'image n'est pas
   cliquable ici, on ne casse rien. */
.product-image-card .img-shield {
  pointer-events: auto;
  z-index: 2;
}

/* Grille : l'image est dans <a class="product-link">, le calque doit laisser
   passer le clic. Les badges sont en z-index 2, on reste dessous. */
.product-grid .img-shield {
  pointer-events: none;
}

/* Un outil de capture (Outil Capture, Game Bar, partage d'ecran) prend le focus
   avant de declencher : on floute tant que la fenetre n'est pas active. Impr.
   ecran, lui, ne rend jamais le focus -- c'est le JS qui gere cette touche. */
html.img-shield-hidden #productImg,
html.img-shield-hidden .thumbImg,
html.img-shield-hidden .product-image,
html.img-shield-hidden .product-grid .product-image-wrapper img,
html.img-shield-hidden .fbt-item img {
  filter: blur(18px);
}

/* Ctrl+P / "Enregistrer au format PDF" est une capture comme une autre.
   visibility plutot que display pour ne pas effondrer la mise en page. */
@media print {
  #productImg,
  .thumbImg,
  .product-image,
  .product-grid .product-image-wrapper img,
  .fbt-item img,
  .review-image {
    visibility: hidden !important;
  }
}