@layer brand {
  :root {
    /*---------- colors ----------*/
    --clr-pink: #d52a82;
    --clr-brand-pink: #f9cbe3;
    --clr-brand-magenta: #eb0a8c;
    --clr-brand-magenta-med: var(--clr-pink);
    --clr-brand-magenta-dark: #c2005d;
    --clr-brand-periwinkle: #d2cffe;
    --clr-brand-lilac: #b9a4f2;
    --clr-brand-indigo: #1e1d4c;
    --clr-brand-white: #f2eff8;
    --clr-brand-white-50: #f8f6fb;
    --clr-brand-black: #1e1226;
    --clr-brand-light-periwinkle: #f0f4fe;

    --clr-brand-primary: var(--clr-brand-magenta-med);
    --clr-brand-secondary: var(--clr-brand-lilac);
    --clr-brand-teritary: var(--clr-brand-indigo);

    --text-color-accent: var(--clr-brand-magenta-dark);
    --link-color: var(--text-color);
    --link-hover-color: var(--clr-brand-magenta-med);
    --text-color-pink: var(--clr-brand-magenta-dark);
    --focus-color: var(--clr-accent);
    --alt-background-color: var(--clr-brand-light-periwinkle);

    /*---------- buttons ----------*/
    --button-font-family: var(--ff-pragmatica-extd-medium);
    --button-text-transform: uppercase;
    --button-primary-background: var(--clr-brand-magenta-dark);
    --button-secondary-background: var(--clr-black);
    --button-tertiary-background: var(--clr-white);

    --button-primary-background-hover: var(--clr-brand-magenta-dark);
    --button-secondary-background-hover: var(--clr-black);
    --button-tertiary-background-hover: var(--clr-white);

    --button-primary-color: var(--clr-white);
    --button-secondary-color: var(--clr-white);
    --button-tertiary-color: var(--clr-black);

    --button-primary-color-hover: var(--clr-white);
    --button-secondary-color-hover: var(--clr-white);
    --button-tertiary-color-hover: var(--clr-black);

    --button-primary-border-color: var(--clr-brand-magenta-dark);
    --button-primary-border-color-hover: var(--clr-brand-magenta-dark);

    /*---------- brand fonts ----------*/
    /*---------- pragmatica ----------*/
    --ff-pragmatica-light: 'pragmatica', 'pragmatica light fallback', sans-serif;
    --ff-pragmatica-light-italic: 'pragmatica', 'pragmatica light italic fallback', sans-serif;
    --ff-pragmatica: 'pragmatica', 'pragmatica Book fallback', sans-serif;
    --ff-pragmatica-bold: 'pragmatica', 'pragmatica Bold fallback', sans-serif;
    --ff-pragmatica-bold-italic: 'pragmatica', 'pragmatica Bold italic fallback', sans-serif;
    --ff-pragmatica-black: 'pragmatica', 'pragmatica Black fallback', sans-serif;
    --ff-pragmatica-black-italic: 'pragmatica', 'pragmatica Black italic fallback', sans-serif;

    /*---------- Pragmatica Cond ----------*/
    --ff-pragmatica-cond-light: 'pragmatica-condensed', 'Pragmatica Cond Extra Light fallback', sans-serif;
    --ff-pragmatica-cond: 'pragmatica-condensed', 'Pragmatica Cond Book fallback', sans-serif;
    --ff-pragmatica-cond-black: 'pragmatica-condensed', 'Pragmatica Cond Black fallback', sans-serif;

    /*---------- Pragmatica Extended ----------*/
    --ff-pragmatica-extd-light: 'pragmatica-extended', 'Pragmatica Extended Light fallback', sans-serif;
    --ff-pragmatica-extd: 'pragmatica-extended', 'Pragmatica Extended Book fallback', sans-serif;
    --ff-pragmatica-extd-medium: 'pragmatica-extended', 'Pragmatica Extended Medium fallback', sans-serif;
    --ff-pragmatica-extd-bold: 'pragmatica-extended', 'Pragmatica Extended Bold fallback', sans-serif;
    --ff-pragmatica-extd-black: 'pragmatica-extended', 'Pragmatica Extended Black fallback', sans-serif;

    /*---------- Scotch ----------*/
    --ff-scotch-text: 'scotch-text', 'scotch-text fallback', serif;
    --ff-scotch-display: 'scotch-display', 'scotch-display fallback', serif;

    /*---------- Scotch Display ----------*/
    --font-scotch-display: var(--fw-normal) var(--body-font-size-m) var(--ff-scotch-display);
    --font-scotch-display-semibold: var(--fw-semibold) var(--body-font-size-m) var(--ff-scotch-display);
    --font-scotch-display-semibold-italic: italic var(--fw-semibold) var(--body-font-size-m) var(--ff-scotch-display);
    --font-scotch-display-bold: var(--fw-bold) var(--body-font-size-m) var(--ff-scotch-display);
    --font-scotch-display-bold-italic: italic var(--fw-bold) var(--body-font-size-m) var(--ff-scotch-display);

    /*---------- Scotch Text ----------*/
    --font-scotch-text: var(--fw-normal) var(--body-font-size-m) var(--ff-scotch-text);
    --font-scotch-text-semibold: var(--fw-semibold) var(--body-font-size-m) var(--ff-scotch-text);
    --font-scotch-text-semibold-italic: italic var(--fw-semibold) var(--body-font-size-m) var(--ff-scotch-text);
    --font-scotch-text-bold: var(--fw-bold) var(--body-font-size-m) var(--ff-scotch-text);
    --font-scotch-text-bold-italic: italic var(--fw-bold) var(--body-font-size-m) var(--ff-scotch-text);

    /*---------- Pragmatica ----------*/
    --font-pragmatica-light: var(--fw-light) var(--body-font-size-m) var(--ff-pragmatica-light);
    --font-pragmatica-light-italic: var(--fs-italic) var(--fw-light) var(--body-font-size-m) var(--ff-pragmatica-light-italic);
    --font-pragmatica: var(--fw-normal) var(--body-font-size-m) var(--ff-pragmatica);
    --font-pragmatica-italic: var(--fs-italic) var(--fw-normal) var(--body-font-size-m) var(--ff-pragmatica);
    --font-pragmatica-bold: var(--fw-bold) var(--body-font-size-m) var(--ff-pragmatica-bold);
    --font-pragmatica-bold-italic: var(--fs-italic) var(--fw-bold) var(--body-font-size-m) var(--ff-pragmatica-bold-italic);
    --font-pragmatica-black: var(--fw-black) var(--body-font-size-m) var(--ff-pragmatica-black);
    --font-pragmatica-black-italic: var(--fs-italic) var(--fw-black) var(--body-font-size-m) var(--ff-pragmatica-black-italic);

    /*---------- Pragmatica Cond ----------*/
    --font-pragmatica-cond-light: var(--fw-light) var(--body-font-size-m) var(--ff-pragmatica-cond-light);
    --font-pragmatica-cond: var(--fw-normal) var(--body-font-size-m) var(--ff-pragmatica-cond);
    --font-pragmatica-cond-black: var(--fw-black) var(--body-font-size-m) var(--ff-pragmatica-cond-black);

    /*---------- Pragmatica Extd ----------*/
    --font-pragmatica-extd-light: var(--fw-light) var(--body-font-size-m) var(--ff-pragmatica-extd-light);
    --font-pragmatica-extd: var(--fw-normal) var(--body-font-size-m) var(--ff-pragmatica-extd);
    --font-pragmatica-extd-medium: var(--fw-medium) var(--body-font-size-m) var(--ff-pragmatica-extd-medium);
    --font-pragmatica-extd-bold: var(--fw-bold) var(--body-font-size-m) var(--ff-pragmatica-extd-bold);
    --font-pragmatica-extd-black: var(--fw-black) var(--body-font-size-m) var(--ff-pragmatica-extd-black);

    /*---------- fonts ----------*/
    --body-font-family: var(--ff-pragmatica);
    --body-font-family-bold: var(--ff-pragmatica-bold);
    --body-font-family-cond: var(--ff-pragmatica-cond);

    --heading-font-family: var(--ff-pragmatica-extd-medium);
    --heading-font-family-secondary: var(--ff-scotch-display);
    --heading-font-family-secondary-bold: var(--ff-scotch-text);

    --body-font-line-height: 1.4;

    /*---------- banner ----------*/
    --global-banner-height: 4.4rem;
    --global-banner-background: var(--clr-brand-black);
    --global-banner-color: var(--clr-brand-periwinkle);
    --banner-font: var(--fw-bold) var(--body-font-size-m)/1.2 var(--body-font-family-bold);

    --promo-banner-background: var(--clr-brand-periwinkle);
    --promo-banner-color: var(--clr-brand-indigo);
    --promo-banner-height: 4.4rem;

    /*---------- nav height ----------*/
    --nav-height: 8rem;

    /*---------- ratings | reviews | Labels  ----------*/
    --stars-filled: var(--clr-brand-magenta-dark);

    @media (width >= 1180px),
      (min-width: 1180px) {
      --nav-height: 9.5rem;
    }
  }

  /*---------- END root: ----------*/

  /*----------  buttons  ----------*/
  :is(a.button:any-link, button, .button):is(.primary, .secondary, .tertiary):is(:hover, :focus-visible) {
    text-decoration: underline;
  }

  /*---------- content font sizing ----------*/
  :is(main:has(.section.hero) .section, main.sidekick-library .section.full > div .block) :is(h1, .h1) {
    font-size: calc(3rem + 2vw);
    line-height: 0.9;
  }

  :is(main:has(.section.hero) .section, main.sidekick-library .section.full > div .block) :is(h1, .h1) > * {
    font-size: inherit;
    line-height: inherit;
  }

  :is(main:has(.section.hero) .section, main.sidekick-library .section.full > div .block).h1-xl :is(h1, .h1) {
    font-size: calc(3rem + 5.6vw);
    margin-block-end: .3em;
  }

  :is(main:has(.section.hero) .section, main.sidekick-library .section.full > div .block).h1-xl :is(h1, .h1) > * {
    font-size: inherit;
    line-height: inherit;
  }

  :is(main:has(.section.hero) .section, main.sidekick-library .section.full > div .block).h1-2xl :is(h1, .h1) {
    font-size: calc(4rem + 7vw);
    margin-block-end: .3em;
  }

  :is(main:has(.section.hero) .section, main.sidekick-library .section.full > div .block).h1-2xl :is(h1, .h1) > * {
    font-size: inherit;
    line-height: inherit;
  }

  main:has(.section.hero) .section,
  main.sidekick-library .section > div .block :is(h1, .h1) {
    font-size: min(calc(3rem + 2vw), 6.2rem);
    line-height: 0.9;
  }

  main:has(.section.hero) .section,
  main.sidekick-library .section > div .block :is(h1, .h1) > * {
    font-size: inherit;
    line-height: inherit;
  }

  main:has(.section.hero) .section,
  main.sidekick-library .section.full > div .block :is(h2, .h2) {
    font-size: calc(2rem + 3vw);
    line-height: 0.9;
  }

  main:has(.section.hero) .section,
  main.sidekick-library .section.full > div .block :is(h2, .h2) > * {
    font-size: inherit;
    line-height: inherit;
  }

  main:has(.section.hero) .section,
  main.sidekick-library .section > div .block :is(h2, .h2) {
    font-size: min(calc(2rem + 3vw), 5.4rem);
    line-height: 0.9;
  }

  main:has(.section.hero) .section,
  main.sidekick-library .section > div .block :is(h2, .h2) > * {
    font-size: inherit;
    line-height: inherit;
  }

  main:has(.section.hero) .section > div .block :is(h3, .h3),
  main.sidekick-library .section > div .block :is(h3, .h3) {
    font-size: min(calc(2rem + 2vw), 4rem);
    line-height: 1;
  }

  main:has(.section.hero) .section > div .block :is(h3, .h3),
  main.sidekick-library .section > div .block :is(h3, .h3) > * {
    font-size: inherit;
    line-height: inherit;
  }

  main:has(.section.hero) .section > div .block :is(h4, .h4, h5, .h5, h6, .h6),
  main.sidekick-library .section > div .block :is(h4, .h4, h5, .h5, h6, .h6) {
    font-size: min(calc(1.8rem + 2vw), 3.2rem);
    line-height: 1;
  }

  main:has(.section.hero) .section > div .block :is(h4, .h4, h5, .h5, h6, .h6),
  main.sidekick-library .section > div .block :is(h4, .h4, h5, .h5, h6, .h6) > * {
    font-size: inherit;
    line-height: inherit;
  }

  /*---------- color helper classes ----------*/
  .color-indigo {
    color: var(--clr-brand-indigo);
  }

  .color-magenta {
    color: var(--clr-brand-magenta-med);
  }

  .color-white {
    color: var(--clr-white);
  }

  .color-brand-white {
    color: var(--clr-brand-white);
  }

  .color-brand-black {
    color: var(--clr-brand-black);
  }

  .background-brand-black {
    background: var(--clr-brand-black);
  }

  .background-pink {
    background: var(--clr-brand-pink);
  }

  .background-indigo {
    background: var(--clr-brand-indigo);
  }

  .background-lilac {
    background: var(--clr-brand-lilac);
  }

  .background-magenta {
    background: var(--clr-brand-magenta);
  }

  .background-magenta-med {
    background: var(--clr-brand-magenta-med);
  }

  .background-magenta-dark {
    background: var(--clr-brand-magenta-dark);
  }

  /*---------- pink section headings ----------*/
  .section.heading-pink .default-content-wrapper :is(h1, h2) {
    color: var(--clr-brand-magenta-med);
  }

  /*=============================================
=            headder            =
=============================================*/
  header.header-wrapper nav .nav-logo .icon {
    height: calc(var(--nav-height) - 2.25rem);
    aspect-ratio: 2 / 1;
  }

  header.header-wrapper nav .nav-menu li:not([aria-label*=New], [aria-label*=Collections]) .menu-nav-dropdown .column li:has(.linked-picture-desktop) {
    display: none;
  }

  @media (min-width: 1024px) {
    header.header-wrapper nav .nav-menu > ul > li .menu-nav-category a {
      padding-block: 0 .25em;
    }

    header.header-wrapper nav > div,
    header.header-wrapper nav .nav-menu > ul {
      align-items: flex-end;
    }

    header.header-wrapper .nav-tools,
    header.header-wrapper form {
      align-self: flex-end;
    }

    header.header-wrapper nav .nav-logo .icon {
      margin-block-end: .5em;
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown *:not(.icon) > img {
      display: block;
      margin-block-end: .5em;
    }

    header.header-wrapper nav .nav-menu li[aria-label] .menu-nav-dropdown .column li:has(.linked-picture-desktop) {
      display: flex;
      flex-flow: column-reverse;
    }

    header.header-wrapper nav .nav-menu li[aria-label] .menu-nav-dropdown .column li:has(.linked-picture-desktop) a:not(.linked-picture-desktop) {
      display: none;
    }

    header.header-wrapper nav .nav-menu li[aria-label] .menu-nav-dropdown .column li:has(.linked-picture-desktop) a:not(.linked-picture-desktop):has(sub) {
      display: block;
    }

    header.header-wrapper nav .nav-menu li[aria-label] .menu-nav-dropdown .column li:has(.linked-picture-desktop) a sub {
      vertical-align: middle;
      font-size: var(--body-font-size-m);
      font-weight: var(--fw-normal);
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown:has(:is(.m-col-1, .m-col-2).empty) .m-col-4 {
      width: 100%;
      display: block;
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown:has(.m-col-2.empty) .m-col-4 {
      grid-column: 2 / span 4;
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown:has(.m-col-1.empty) .m-col-4 {
      grid-column: 1 / span 4;
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown:has(:is(.m-col-1, .m-col-2).empty) .m-col-4 ul {
      display: grid;
      width: 100%;
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown:has(.m-col-2.empty) .m-col-4 ul {
      grid-template-columns: repeat(3, minmax(auto, 40rem));
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown:has(.m-col-1.empty) .m-col-4 ul {
      grid-template-columns: repeat(4, minmax(auto, 40rem));
    }



    header.header-wrapper nav .nav-menu .menu-nav-dropdown .column li .linked-picture-desktop img {
      aspect-ratio: 1.6 / 1;
      width: 100%;
    }
  }
  /*=====  End of headder  ======*/
}