/*
  New Lacoste brand codes, phase 1 (BA-8471): tokens, typography scale, header, footer and homepage.
  Loaded after styles.css and mobile.css (Head.cshtml), so it only overrides; deleting the file and its line in
  Head.cshtml gives the previous look back. Values from the Figma files of the ticket: "DS Web New Brand Codes (TEST)"
  (Colors, Typography, Actions, Navigation, Footer) and "User Journey Web • New Brand" (Home, menu). PLP / PDP follow in phase 2.
*/

/*********** FONTS ***********/
/* Mona Sans (text) and FF Modern (editorial titles) are the files the client delivered (ClickUp BA-8471). Neither has
   Greek letters (Mona Sans only μ and π), so unicode-range keeps the Greek blocks out of them: Greek text renders whole
   in the next font of the stack (Arial / Georgia) instead of mixing two typefaces inside one word. No local() source:
   GitHub's unrelated "Mona Sans" shares the family name and would win on machines that have it installed.
   Agreed with the client: they will deliver Greek-capable cuts. Then overwrite the 4 files under the same names and delete
   the 4 unicode-range lines below; until then Greek stays in Arial / Georgia.
   Each face is served as WOFF2 (about half the size, converted 1:1 from the delivered file: same glyphs and character map)
   with the delivered file as the fallback; Head.cshtml preloads the Regular text face and FF Modern. */
@font-face {
  font-family: 'Mona Sans';
  src: url('../fonts/MonaSans-Regular.woff2') format('woff2'), url('../fonts/MonaSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-036F, U+0400-1EFF, U+2000-FFFF;
}

@font-face {
  font-family: 'Mona Sans';
  src: url('../fonts/MonaSans-Medium.woff2') format('woff2'), url('../fonts/MonaSans-Medium.ttf') format('truetype');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-036F, U+0400-1EFF, U+2000-FFFF;
}

@font-face {
  font-family: 'Mona Sans';
  src: url('../fonts/MonaSans-RegularItalic.woff2') format('woff2'), url('../fonts/MonaSans-RegularItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-036F, U+0400-1EFF, U+2000-FFFF;
}

/* FF Modern ships one weight and serves every weight asked of it, so a bold rule never fakes a second one */
@font-face {
  font-family: 'FF Modern';
  src: url('../fonts/FFModern-Regular.woff2') format('woff2'), url('../fonts/FFModern-Regular.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-036F, U+0400-1EFF, U+2000-FFFF;
}

/* Greek titles: Georgia Regular for every weight too, so a Greek and a Latin word of one title keep the same weight */
@font-face {
  font-family: 'FF Modern';
  src: local('Georgia');
  font-weight: 100 900;
  font-style: normal;
  unicode-range: U+0370-03FF, U+1F00-1FFF;
}


/*********** TOKENS ***********/
/* Figma "DS Web New Brand Codes (TEST)": page Colors (Color Theming (New Brand), Dev & Design mapping) and page Typography
   (Text Style (New Brand)). The left column of the Dev & Design table is what styles.css used; the theme variables below
   are remapped to the right column, so the existing rules pick the new values up. */
:root {
  /* colours */
  --brand-green: #082415;            /* Dark Green: brand, copy, interactions, footer */
  --brand-green-hover: #145E3E;      /* Dark Green (Hover) */
  --brand-conversion: #06532A;       /* Crocodile Green / Conversion: add to cart */
  --brand-conversion-hover: #558863;
  --brand-promo: #008A20;            /* Digital Green / Promotion */
  --brand-focus: #79BE76;            /* Bright Green / Focus */
  --brand-success: #24A141;
  --brand-error: #D30018;
  --brand-warning: #C05131;
  --brand-ecru: #F3F2E1;
  --brand-grey-100: #F2F2F2;
  --brand-grey-200: #E6E6E6;
  --brand-grey-400: #B1B1B1;
  --brand-grey-600: #585858;
  --brand-grey-700: #6E6E6E;         /* Grey (Default) */
  --brand-grey-800: #515151;
  --brand-white: #FFFFFF;
  --brand-green-line: rgba(255, 255, 255, .16);
  --brand-green-muted: rgba(255, 255, 255, .72);

  --primary: var(--brand-green);
  --primary-color-hover: var(--brand-green-hover);
  --green2: var(--brand-conversion);
  --green3: var(--brand-promo);       /* price flags («30% OFF»): Promotion */
  --grey1: var(--brand-grey-700);
  --grey2: var(--brand-grey-100);
  --grey3: var(--brand-grey-800);
  --border-low-opacity: var(--brand-green-line);

  /* type: family, then size / line height of each Figma text style (desktop, mobile below) */
  --font-sans: 'Mona Sans', 'Figtree', Arial, Helvetica, sans-serif;
  --font-serif: 'FF Modern', Georgia, 'Times New Roman', serif;
  --fs-display: 80px;   --lh-display: 80px;   /* 2XL Display */
  --fs-h1: 32px;        --lh-h1: 32px;        /* XL Heading */
  --fs-h2: 24px;        --lh-h2: 24px;        /* L Heading */
  --fs-lead: 18px;      --lh-lead: 20px;      /* L Body */
  --fs-body: 16px;      --lh-body: 24px;      /* M Body copy */
  --fs-small: 14px;     --lh-small: 20px;     /* S Body copy */
  --fs-caption: 12px;   --lh-caption: 16px;   /* XS Label, uppercase */
  --fs-micro: 11px;     --lh-micro: 16px;     /* 2XS Disclaimer */

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* header */
  --header-top-bar: 40px;
  --header-upper: 64px;
  --header-strip: 44px;
}

@media all and (max-width: 768px) {
  :root {
    --fs-display: 40px;   --lh-display: 40px;
    --fs-h1: 24px;        --lh-h1: 24px;
    --fs-h2: 20px;        --lh-h2: 24px;
  }
}

/*********** TYPOGRAPHY ***********/
body,
input, textarea, select, button,
.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
  font-family: var(--font-sans);
}

body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* page and section titles (h1, h2) are FF Modern Regular, no uppercase, no tracking (the Figtree titles were uppercase
   at -2 / -6 %). h3 marks panel, card and checkout-step titles of the theme: those stay in Mona Sans until phase 2 / 3 */
h1, h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  /* FF Modern ships one weight: never let a bold rule fake a second one */
  font-synthesis: none;
  text-transform: none;
  letter-spacing: 0;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }

/* product names stay in Mona Sans: the PDP is redesigned in phase 2 */
h1.product-name,
.product-essential h1,
.mini-product-collateral h1.product-name {
  font-family: var(--font-sans);
}
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { line-height: var(--lh-body); letter-spacing: 0; }

/* small uppercase labels the theme marks up as h2 (FAQ boxes) stay Mona Sans */
.faq-box h2 {
  font-family: var(--font-sans);
}

small, .caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: 0;
}

::selection {
  background-color: var(--brand-green);
  color: var(--brand-white);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--brand-focus);
  outline-offset: 2px;
}

/*********** BUTTONS ***********/
/* Figma Actions > Call to Action: XS Label (Mona Sans 12/16 Regular, uppercase), square corners, existing padding.
   Primary: Dark Green, no border, white text. Secondary: white, full 1px border, Dark Green text, grey on hover. */
.btn {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  border-radius: 0;
}

.green-btn {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  color: var(--brand-white);
}

  .green-btn:hover {
    background-color: var(--brand-green-hover);
    border-color: var(--brand-green-hover);
  }

.black-btn {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  color: var(--brand-white);
}

  .black-btn:hover {
    background-color: var(--brand-green-hover);
    border-color: var(--brand-green-hover);
  }

.white-btn {
  background-color: var(--brand-white);
  border: 1px solid var(--brand-green);
  color: var(--brand-green);
}

  .white-btn:hover {
    background-color: var(--brand-grey-100);
    border-color: var(--brand-green);
    color: var(--brand-green);
  }

/*********** HEADER ***********/
/* Figma DS > Navigation > Navigation Bar (new brand): white background, Mona Sans M 16/24 Regular, Dark Green for the
   selected entry, Grey Default for the others, Digital Green for promo. The colours are variables so the transparent
   header of the Rene / Sneakers pages (white over a full-bleed picture) only swaps them. */
.brand-header {
  --hdr-bg: var(--brand-white);
  --hdr-ink: var(--brand-green);
  --hdr-muted: var(--brand-grey-700);
  --hdr-line: var(--brand-grey-200);
  --hdr-qty-ink: var(--brand-white);
  /* the theme draws the menu dividers with --green1 (Forrest Green): inside the header they follow the light line */
  --green1: var(--hdr-line);
}

.brand-header.transparent-header {
  --hdr-bg: transparent;
  --hdr-ink: var(--brand-white);
  --hdr-muted: rgba(255, 255, 255, .8);
  --hdr-line: rgba(255, 255, 255, .4);
  --hdr-qty-ink: var(--brand-green);
}

.top-message-item {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: 0;
}

.brand-header .header-upper,
.brand-header .header-menu,
.brand-header .panel,
.brand-header .header-mobile-menu-btn,
.brand-header .sublist.sec-level {
  background-color: var(--hdr-bg);
  color: var(--hdr-ink);
}

.brand-header .header-content {
  gap: var(--space-6);
}

.brand-header .left-header {
  gap: var(--space-6);
}

/* the theme's icons are white files: they are painted in the header colour through a mask of the same file
   (the picture itself is moved out of its box), so one file serves the white and the transparent header */
.brand-header .header-logo img,
#header-checkout .header-content > a img,
.brand-header .ico-account img,
.brand-header .ico-register img,
.brand-header .menu-toggle img,
.brand-header #small-search-box-form > img,
.brand-header .extra-menu-links img {
  background-color: var(--hdr-ink);
  object-position: -9999px 0;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  filter: none;
}

.brand-header .header-logo img,
#header-checkout .header-content > a img { -webkit-mask-image: url('../imgs/header-logo.svg'); mask-image: url('../imgs/header-logo.svg'); }
.brand-header .ico-account img { -webkit-mask-image: url('../imgs/my-account.svg'); mask-image: url('../imgs/my-account.svg'); }
.brand-header .ico-register img { -webkit-mask-image: url('../imgs/my-account-guest.svg'); mask-image: url('../imgs/my-account-guest.svg'); }
.brand-header .menu-toggle img.open-menu { -webkit-mask-image: url('../imgs/burger-menu.svg'); mask-image: url('../imgs/burger-menu.svg'); }
.brand-header .menu-toggle img.close-menu { -webkit-mask-image: url('../imgs/menu-close.svg'); mask-image: url('../imgs/menu-close.svg'); }
.brand-header #small-search-box-form > img { -webkit-mask-image: url('../imgs/search-icon.svg'); mask-image: url('../imgs/search-icon.svg'); }
.brand-header .extra-menu-links img[src*="my-account"] { -webkit-mask-image: url('../imgs/my-account-white.svg'); mask-image: url('../imgs/my-account-white.svg'); }
.brand-header .extra-menu-links img[src*="contact"] { -webkit-mask-image: url('../imgs/contact.svg'); mask-image: url('../imgs/contact.svg'); }

.brand-header .header-logo img {
  width: 48px;
  height: 32px;
}

/* inline icons (store pin, wishlist, bag, chevrons) take the header colour too; the files carry fill="white" inline */
.brand-header .header-links svg path:not([fill="none"]),
.brand-header .extra-menu-links svg path:not([fill="none"]),
.brand-header .top-category svg path,
.brand-header .child-category svg path {
  fill: var(--hdr-ink) !important;
}

.brand-header .header-links .header-store-locator svg path,
.brand-header .header-links .header-store-locator svg circle {
  fill: none !important;
  stroke: var(--hdr-ink);
}

/* one 24px box per icon on one centre line (the store pin sat 3.5px lower than the others) */
.brand-header .header-links > ul {
  gap: var(--space-5);
  align-items: center;
}

  .brand-header .header-links > ul > li {
    display: flex;
    align-items: center;
    height: 24px;
  }

  .brand-header .header-links > ul > li > a,
  .brand-header .header-links > ul > li > button,
  .brand-header .header-links .wishlist-label,
  .brand-header .header-links .cart-label {
    display: flex;
    align-items: center;
    height: 24px;
    line-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .brand-header .header-links svg,
  .brand-header .header-links img {
    display: block;
    width: 24px;
    height: 24px;
  }

/* touch: each 24px icon gets an invisible 44px tap area around it (nothing moves) */
.brand-header .header-links > ul > li > a,
.brand-header .header-links > ul > li > button {
  position: relative;
}

  .brand-header .header-links > ul > li > a::after,
  .brand-header .header-links > ul > li > button::after {
    content: "";
    position: absolute;
    inset: -10px;
  }

  .brand-header .header-links > ul > li > a.ico-cart::after {
    left: 12px;
  }

/* counters: a small Dark Green disc with a white figure, on the top right of the icon */
.brand-header .header-qty,
.brand-header .header-qty.green {
  top: -6px;
  right: -8px;
  min-width: 14px;
  height: 14px;
  min-height: 0;
  padding: 0 4px;
  border-radius: 7px;
  background-color: var(--hdr-ink);
  color: var(--hdr-qty-ink);
  font-size: 9px;
  font-weight: 500;
  line-height: 14px;
}

.brand-header a.ico-cart:before {
  top: 2px;
  border-left: 1px solid var(--hdr-ink);
}

/* language switch (shown only when LacosteBrandSettings.ShowLanguageSelector is on) */
.brand-header .header-selectors-wrapper .display-lang {
  margin-right: var(--space-5);
}

  .brand-header .header-selectors-wrapper .display-lang span {
    color: var(--hdr-ink);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    letter-spacing: 0;
    text-transform: uppercase;
  }

/* search: an underlined field with the glass on the left ("Find a product..."), Dark Green text, no box */
.brand-header .search-box input {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--hdr-ink);
  color: var(--hdr-ink);
  font-size: var(--fs-body);
  letter-spacing: 0;
  padding-left: 36px;
}

  .brand-header .search-box input::placeholder {
    color: var(--hdr-ink);
    text-transform: none;
    letter-spacing: 0;
  }

.brand-header #small-search-box-form > img {
  left: 4px;
  width: 20px;
  height: 20px;
}

@media all and (min-width: 1201px) {
  /* row 1: logo, Men / Women / Kids / Discover, search, icons */
  .brand-header .header-upper {
    height: var(--header-upper);
    padding: 0;
    display: flex;
    align-items: center;
  }

    .brand-header .header-upper > .content-wrapper {
      width: 100%;
    }

  .brand-header .first-categories .top-menu {
    gap: 0 var(--space-5);
  }

  .brand-header .first-categories a.top-category {
    position: relative;
    color: var(--hdr-muted);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: var(--header-upper);
    letter-spacing: 0;
    text-transform: none;
    opacity: 1;
    transition: color .2s ease;
  }

    .brand-header .first-categories a.top-category:hover,
    .brand-header .first-categories a.top-category.active {
      color: var(--hdr-ink);
    }

    /* the selected entry carries the chevron of the Figma bar (its level 1 is the row below) */
    .brand-header .first-categories a.top-category:after {
      content: none;
    }

    .brand-header .first-categories a.top-category.active:after {
      content: "";
      position: static;
      display: inline-block;
      width: 5px;
      height: 5px;
      margin: 0 0 4px 2px;
      border-right: 1px solid currentColor;
      border-bottom: 1px solid currentColor;
      background: none;
      transform: rotate(45deg);
    }

  .brand-header .search-box {
    max-width: 460px;
  }

  .brand-header .search-box input {
    height: 40px;
  }

  /* row 2: the level-1 entries of the active root, permanently open and centred */
  .brand-header #navbar {
    display: block;
    transition: transform .3s ease-in-out, opacity .3s ease-in-out, visibility 0s;
  }

  .brand-header .header-menu {
    padding: 0;
    border-top: 0;
  }

  .brand-header #navbar .sublist.first-level.visible {
    display: flex;
    min-height: var(--header-strip);
  }

  .brand-header #navbar a.child-category {
    padding: 0 var(--space-3);
    color: var(--hdr-muted);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: var(--header-strip);
    letter-spacing: 0;
    text-transform: none;
    opacity: 1;
    column-gap: 2px;
    animation: none;
    transition: color .2s ease;
  }

    .brand-header #navbar a.child-category:hover,
    .brand-header #navbar .sublist.visible li:has(.submenu:hover) > a.child-category {
      color: var(--hdr-ink);
    }

  .brand-header #navbar .child-category svg {
    width: 16px;
    height: 16px;
    transform: scale(1);
  }

  /* mega menu: white panel, Dark Green text, the page behind it dimmed (Figma User Journey Web > menu) */
  .brand-header #navbar .submenu .panel {
    border-top: 1px solid var(--brand-grey-200);
    box-shadow: 0 100vh 0 100vh rgba(0, 0, 0, .5);
  }

  /* opening and closing. The theme opened the panel only while the pointer was on the link (.child-category:hover + .submenu)
     and the panel started 5px under it: moving slowly from the link to the panel crossed that gap, the hover dropped and the
     panel vanished at once. Now the whole entry (link + panel) holds it open, the panel starts flush under row 2, it opens
     after 150ms (a quick pass over row 2 does not flash panels) and closes 450ms after the pointer leaves (a slip outside
     does not lose it); another entry under the pointer takes over at once */
  .brand-header #navbar .sublist.first-level > li > .submenu {
    top: var(--header-strip);
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease .25s, visibility 0s linear .45s;
  }

    .brand-header #navbar .sublist.first-level > li > .submenu .panel {
      height: 430px;
      position: relative;
      z-index: 1;
      overflow-y: auto;
    }

      .brand-header #navbar .sublist.first-level > li > .submenu .panel .content-wrapper {
        opacity: 1;
        transform: none;
        transition: none;
      }

      .brand-header #navbar .sublist.first-level > li > .submenu .panel .flex-cl {
        height: 100%;
      }

  .brand-header #navbar .sublist.first-level > li:hover > .submenu,
  .brand-header #navbar .sublist.first-level > li:focus-within > .submenu {
    opacity: 1;
    visibility: visible;
    transition: opacity .15s ease .15s, visibility 0s linear .15s;
  }

  /* touch screens at desktop width (iPad landscape): the first tap opens the panel (TopMenu script adds .touch-open) */
  .brand-header #navbar .sublist.first-level > li.touch-open > .submenu {
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  .brand-header #navbar .sublist.first-level:hover > li:not(:hover) > .submenu {
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  /* the open entry stays Dark Green while its panel is open */
  .brand-header #navbar .sublist.first-level > li:hover > a.child-category {
    color: var(--hdr-ink);
  }

  .brand-header #navbar .submenu a,
  .brand-header #navbar .submenu span,
  .brand-header #navbar .submenu li {
    color: var(--brand-green);
  }

  .brand-header #navbar .submenu .random-links a {
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .brand-header #navbar .submenu .sublist.sec-level a,
  .brand-header #navbar .submenu .last-level-categories a {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    letter-spacing: 0;
    text-transform: none;
    opacity: 1;
  }

  /* columns without content collapse instead of showing an empty, framed column: no quick links (admin fields of the
     category) → the list takes the row; no menu picture → no picture column. The list fills its two columns evenly
     (column-fill: auto filled the first 430px column and left the second empty behind the divider) */
  .brand-header #navbar .submenu .quick-links:not(:has(li)),
  .brand-header #navbar .submenu .bottom-menu:not(:has(img)) {
    display: none;
  }

  .brand-header #navbar .submenu .sublist.sec-level:not(:has(.quick-links li)) {
    grid-template-columns: 100%;
  }

  .brand-header #navbar .submenu .last-level-categories {
    column-fill: balance;
  }

  .brand-header #navbar .submenu .bottom-menu span {
    font-family: var(--font-serif);
    font-size: var(--fs-small);
    text-transform: none;
  }

  /* immersive navigation: scrolling down hides row 2, scrolling up brings it back.
     The Rene / Sneakers pages open with a transparent header over a full-bleed image: there row 2 waits until the header turns solid on scroll */
  .brand-header.header-up #navbar,
  .brand-header.transparent-header #navbar {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    /* out of the keyboard order too, once the fade is over */
    visibility: hidden;
    transition: transform .3s ease-in-out, opacity .3s ease-in-out, visibility 0s .3s;
  }

  /* a scroll while the pointer is on row 2 or its open panel (a trackpad nudge) must not pull the menu from under it */
  .brand-header.header-up #navbar:hover,
  .brand-header.header-up #navbar:focus-within {
    transform: none;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: none;
  }

  /* content starts under top bar + row 1 + row 2 (the full-bleed Rene / Sneakers pages keep their own zero padding) */
  .page:not(.checkout-page, .rene-page, .sneakers-page) {
    padding-top: calc(var(--header-top-bar) + var(--header-upper) + var(--header-strip));
  }

  /* bars that stick under the header (PLP filters, account menu) follow row 2 */
  .prod-numbs.sticky,
  .block-account-navigation .listbox.sticky {
    top: calc(var(--header-top-bar) + var(--header-upper) + var(--header-strip));
  }

  html:has(.brand-header.header-up) .prod-numbs.sticky,
  html:has(.brand-header.header-up) .block-account-navigation .listbox.sticky {
    top: calc(var(--header-top-bar) + var(--header-upper));
  }

  .brand-header .searchbox-content,
  .brand-header #search-result-products {
    top: var(--header-upper);
  }
}

/* mobile: white bar (logo, icons, burger), the search row under it, the menu as a white sheet
   (Figma User Journey Web > 1st panel / 2nd panel) */
@media all and (max-width: 1200px) {
  .brand-header .header-logo img {
    width: 42px;
    height: 28px;
  }

  /* the row keeps the 40px the old logo gave it: the sticky PLP filters and account menu sit at that height (93px) */
  .brand-header .header-logo {
    display: flex;
    align-items: center;
    height: 40px;
  }

  .brand-header .store-search-box {
    background-color: var(--hdr-bg);
    border-top: 1px solid var(--hdr-line);
  }

  .brand-header .search-box input {
    height: 48px;
    border-bottom-color: var(--hdr-line);
  }

  .brand-header #small-search-box-form > img {
    left: 16px;
  }

  .brand-header .search-box input {
    padding-left: 48px;
  }

  .brand-header .top-menu.mobile {
    border-bottom: 1px solid var(--hdr-line);
  }

  .brand-header .top-menu.mobile > li > a.top-mobile-cat {
    padding: var(--space-3) var(--space-4);
    color: var(--hdr-muted);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: var(--lh-body);
    letter-spacing: 0;
    text-transform: none;
    opacity: 1;
  }

    .brand-header .top-menu.mobile > li > a.top-mobile-cat:after {
      background: var(--hdr-ink);
    }

    .brand-header .top-menu.mobile > li > a.top-mobile-cat.active-cat {
      color: var(--hdr-ink);
    }

  .brand-header .header-mobile-menu-btn {
    border-bottom: 1px solid var(--hdr-line);
  }

    .brand-header .header-mobile-menu-btn a,
    .brand-header .header-mobile-menu-btn button {
      color: var(--hdr-ink);
      font-size: var(--fs-small);
      line-height: var(--lh-small);
      text-decoration: none;
    }

  .brand-header .top-menu.mobile a.child-category {
    padding: var(--space-2) var(--space-4);
    color: var(--hdr-ink);
    font-size: var(--fs-small);
    font-weight: 400;
    line-height: var(--lh-body);
    letter-spacing: 0;
    text-transform: none;
  }

  .brand-header .top-menu.mobile .sublist.first-level {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--hdr-line);
  }

  .brand-header .top-menu.mobile .sublist.first-level li a svg {
    transform: scale(1) rotate(-90deg) !important;
  }

  .brand-header .top-menu.mobile .sublist.sec-level a,
  .brand-header .top-menu.mobile .breadcrumb-cat,
  .brand-header .top-menu.mobile .return-home {
    color: var(--hdr-ink);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    letter-spacing: 0;
    text-transform: none;
    opacity: 1;
  }

  .brand-header .top-menu.mobile .random-links a {
    color: var(--hdr-ink);
    font-size: var(--fs-small);
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .brand-header .top-menu.mobile .sublist > .header-mobile-menu-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .brand-header .top-menu.mobile .return-home {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
  }

    .brand-header .top-menu.mobile .return-home-icon circle {
      fill: var(--hdr-ink);
    }

    .brand-header .top-menu.mobile .return-home-icon path {
      fill: var(--brand-white);
    }

    .brand-header .top-menu.mobile .return-home span {
      padding-left: 0;
    }

  /* 2nd panel list: one 24px line per entry with 8px above and below, like the 1st panel */
  .brand-header .top-menu.mobile .last-level-categories-mob {
    padding: var(--space-3) 0;
  }

    .brand-header .top-menu.mobile .last-level-categories-mob a {
      display: block;
      padding: var(--space-2) var(--space-4);
      color: var(--hdr-ink);
      font-size: var(--fs-small);
      line-height: var(--lh-body);
      letter-spacing: 0;
      text-transform: none;
    }

  .brand-header .extra-menu-links {
    padding: var(--space-3) 0;
  }

    .brand-header .extra-menu-links a,
    .brand-header .extra-menu-links button {
      color: var(--hdr-ink);
      font-size: var(--fs-small);
      line-height: var(--lh-small);
      letter-spacing: 0;
    }

  /* guests: "Returning customer" + LOG IN (Primary button) + "New customer? Register" */
  .brand-header .extra-menu-links li.menu-member {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-5) 0;
  }

  /* the heart's clip-path points at an id the header repeats; WebKit resolves it to nothing and hides the icon */
  .brand-header .extra-menu-links svg g {
    clip-path: none;
  }

    .brand-header .extra-menu-links .menu-member-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      color: var(--hdr-ink);
      font-size: var(--fs-small);
      font-weight: 500;
      line-height: var(--lh-small);
    }

      /* the chevron of "Already a member? >" */
      .brand-header .extra-menu-links .menu-member-title::after {
        content: "";
        width: 6px;
        height: 6px;
        margin-right: 4px;
        border-top: 1px solid currentColor;
        border-right: 1px solid currentColor;
        transform: rotate(45deg);
      }

    .brand-header .menu-member-text {
      margin-top: calc(-1 * var(--space-2));
      color: var(--hdr-ink);
      font-size: var(--fs-small);
      line-height: var(--lh-small);
    }

    .brand-header .extra-menu-links .menu-member .green-btn {
      padding: var(--space-3) var(--space-5);
      color: var(--brand-white);
      font-size: var(--fs-caption);
      line-height: var(--lh-caption);
    }

    .brand-header .menu-member-new {
      color: var(--hdr-ink);
      font-size: var(--fs-caption);
      line-height: var(--lh-caption);
    }

      .brand-header .extra-menu-links .menu-member-new a {
        display: inline;
        margin-left: var(--space-2);
        font-size: var(--fs-caption);
        text-decoration: underline;
        text-underline-offset: .25rem;
      }
}

/*********** HOMEPAGE ***********/
/* Figma User Journey Web > Home: full-width picture, FF Modern title bottom-left in white, square white buttons */
/* white hero text stays readable while the media loads or when a video cannot play */
.hero-banner .hero-content {
  background-color: var(--brand-green);
  isolation: isolate;
}

/* the campaign picture under the video: visible until the first frame, and for good where the video cannot play */
.hero-content .hero-fallback img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  /* framed like the video, so nothing jumps when the first frame paints */
  object-position: center;
}

.hero-content video {
  position: relative;
  display: block;
}

/* the Figma title sits on a dark part of the picture; a soft shade under the text keeps the white copy readable on light
   frames of any campaign. It stays under the text and the buttons and lets clicks through */
.home-page .hero-banner .hero-content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .3) 40%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

.home-page .hero-banner .hero-content > .content-wrapper {
  z-index: 2;
}

/* with the Women / Kids buttons the whole hero opens the main link, the buttons stay clickable above it */
.hero-banner.has-ctas .hero-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-banner.has-ctas .hero-content > .content-wrapper {
  z-index: 2;
  pointer-events: none;
}

  .hero-banner.has-ctas .hero-content > .content-wrapper a {
    pointer-events: auto;
  }

.hero-content h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: var(--lh-display);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: var(--space-4);
}

.hero-content p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 520px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.home-page .hero-ctas .btn {
  margin-top: 0;
  min-width: 148px;
}

/* section titles: L Heading (FF Modern 24/24, mobile 20/24), Dark Green or white on pictures */
.home-page h2,
.home-page .zig-right h2,
.home-page .zig-right h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-h2);
  letter-spacing: 0;
  text-transform: none;
}

.home-page-product-grid {
  margin-bottom: var(--space-9);
}

  .home-page-product-grid h2,
  .homecarousel-content h2 {
    margin-bottom: var(--space-6);
  }

#main-homepage {
  padding-top: var(--space-9);
}

/* "Shop now" under the carousel pictures: S Body copy, underlined */
.link-title {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: .3rem;
}

/*********** FOOTER ***********/
/* Figma DS > Navigation > Footer: Dark Green, XS labels for the column titles, the LACOSTE wordmark in FF Modern
   (Ecru), the white sign-up button and the white bottom strip */
.footer {
  background-color: var(--brand-green);
}

.footer .title {
  font-size: var(--fs-caption);
  font-weight: 400;
  line-height: var(--lh-caption);
  letter-spacing: 0;
  text-transform: uppercase;
}

.footer-block .list a {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--brand-green-muted);
  transition: color .2s ease;
}

  .footer-block .list a:hover {
    color: var(--brand-white);
  }

.footer-wordmark {
  display: block;
  width: 100%;
  height: auto;
  fill: var(--brand-ecru);
  font-family: var(--font-serif);
}

/* FAQ / Store Locator: rendered after the link columns, shown above them (.footer-right-part is a grid) */
.footer-brand-actions {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-7) 4.36% 0 calc(1 * (100vw - 15px) / 25);
}

/* Secondary button, reverted set: transparent, white border and text */
.footer-brand-button {
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 1px solid var(--brand-white);
  color: var(--brand-white);
  font-size: var(--fs-caption);
  font-weight: 400;
  line-height: var(--lh-caption);
  letter-spacing: 0;
  text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease;
}

  .footer-brand-button:hover {
    background-color: var(--brand-white);
    color: var(--brand-green);
  }

.footer-lower {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: 0;
}

  .footer-lower ul li a,
  .footer-lower .footer-disclaimer,
  .footer-powered-by {
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
  }

  .footer-powered-by a {
    color: var(--brand-green);
  }

/* the newsletter is a Klaviyo embed. Figma footer: the Email row and the full-width SIGN UP strip are 80px each
   (the embed renders 100px and 130px) */
.footer .klaviyo-form-button {
  height: 80px !important;
  min-height: 80px !important;
  font-size: var(--fs-caption) !important;
  letter-spacing: 0 !important;
}

.footer .newsletter-email [data-testid="form-row"]:nth-child(2) > [data-testid="form-component"] {
  display: flex;
  align-items: center;
  height: 80px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

  .footer .newsletter-email [data-testid="form-row"]:nth-child(2) p,
  .footer .newsletter-email [data-testid="form-row"]:nth-child(2) p span {
    line-height: var(--lh-small) !important;
  }

  .footer .newsletter-email [data-testid="form-row"]:nth-child(2) input {
    height: 80px !important;
  }

/* reassurance strip above the footer (Figma: white icons on Dark Green). The icons are dark admin pictures */
.last4-content img {
  filter: brightness(0) invert(1);
}

/*********** CART ***********/
/* order summary toggle ("ΠΡΟΪΟΝΤΑ - €272,00"): the theme set 11px / 3px tracking / weight 800; Figma XS Label */
.order-summary-content summary {
  color: var(--brand-green);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

/*********** CAROUSELS AND MESSAGES ***********/
.owl-dot.active {
  background-color: var(--brand-green);
}

/* --green2 is Conversion now; the back-in-stock confirmation keeps the Success green */
.ui-dialog-content .back-in-stock-subscription-page .success-message {
  color: var(--brand-success) !important;
}

@media all and (max-width: 768px) {
  .footer-brand-actions {
    padding: var(--space-5) var(--space-4) var(--space-4);
  }

  .footer-brand-button {
    flex: 1 1 140px;
    justify-content: center;
    padding: 0 var(--space-3);
  }

  .hero-ctas {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--space-2);
  }

  .home-page .hero-ctas .btn {
    width: 100%;
    min-width: 0;
    padding: 12px var(--space-2);
  }

  /* the video pause button leaves the buttons' corner for the top right of the hero */
  .home-page .hero-banner .play-pause-btn {
    top: var(--space-4);
    right: var(--space-4);
    bottom: auto;
    left: auto;
    z-index: 3;
  }

  #main-homepage {
    padding-top: var(--space-8);
  }

  .home-page-product-grid {
    margin-bottom: var(--space-8);
  }
}