/* verane-skin.css — the "Verane" look: a quiet fashion-editorial layer over
   halftone-skin.css.

   Instrument Serif display type in mixed case (no caps, no tracking), DM Sans for
   everything else at 400/500, white surfaces with #F5F5F5 image plates and #EEEEEE
   panels, black square buttons, hairline 2px gutters between full-bleed tiles, and a
   transparent header that floats over the home hero until the page scrolls.

   Styling only, like the sheet under it: tokens re-declared on :root plus selectors
   on the existing markup. Loaded right after halftone-skin.css and BEFORE the
   theme-fonts / theme-colors includes, so a merchant's Typography or Colors pick
   still wins on plain source order.
   ------------------------------------------------------------------------------- */


/* ============================================================================
   1. Tokens
   ============================================================================ */

:root {
  --font-serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* halftone's two extra voices fold into these: the display face becomes the
     serif, the mono data voice (eyebrows, prices, tabs, tickers) becomes DM Sans */
  --font-display: var(--font-serif);
  --font-mono: var(--font-sans);

  --font-heading--family: var(--font-serif);
  --font-heading--weight: 400;
  --font-highlight--family: var(--font-serif);
  --font-highlight--weight: 400;

  --font-body--family: var(--font-sans);
  --font-body--weight: 400;

  --font-subheading--family: var(--font-sans);
  --font-subheading--weight: 400;
  --font-subheading--transform: none;
  --font-subheading--letter-spacing: 0;
  --font-subheading--size: 1.4rem;

  --font-pcard-title--family: var(--font-sans);
  --font-pcard-title--weight: 500;
  --font-pcard-title--size: 1.5rem;
  --font-pcard-price--family: var(--font-sans);
  --font-pcard-price--weight: 400;
  --font-pcard-badge--family: var(--font-sans);
  --font-pcard-badge--weight: 400;
  --font-pcard-badge--transform: none;
  --font-pcard-badge--letter-spacing: 0;

  --font-navigation--family: var(--font-sans);
  --font-navigation--weight: 400;
  --font-navigation--transform: none;
  --font-navigation--letter-spacing: 0;

  --font-button--family: var(--font-sans);
  --font-button--weight: 500;
  --font-button--transform: none;
  --font-button--letter-spacing: 0;

  /* a narrow serif reads small: the display sizes grow, the leading closes */
  --font-size--mega-title: clamp(6.4rem, calc(10vw + 0.8rem), 16rem);
  --font-size--h1: clamp(4.4rem, calc(4vw + 1.6rem), 8rem);
  --font-size--h2: clamp(3.4rem, calc(2.6vw + 1.4rem), 5.6rem);
  --font-size--h3: clamp(2.6rem, calc(1.4vw + 1.4rem), 3.6rem);
  --font-size--h4: clamp(2.2rem, calc(0.8vw + 1.5rem), 2.8rem);
  --font-size--h5: 2rem;
  --font-size--h6: 1.8rem;
  --font-size--paragraph: 1.5rem;
  --font-size--paragraph-small: 1.3rem;
  --font-mega-title--line-height: 0.9;
  --font-h1--line-height: 0.95;
  --font-h2--line-height: 1;
  --font-h3--line-height: 1.05;
  --font-h4--line-height: 1.1;
  --font-paragraph--line-height: 1.5;

  /* quieter metrics: the reference's buttons are small black slabs */
  --button-height: 4.4rem;
  --input-height: 4.8rem;

  /* badges: black tags, sale included */
  --color-sale-badge-background: 0 0 0;
  --color-sale-badge-text: 255 255 255;
  --color-cart-bubble-background: rgb(0 0 0);
  --color-cart-bubble-text: rgb(255 255 255);
  --color-new-badge-background: 0 0 0;
  --color-new-badge-text: 255 255 255;
  --color-hot-badge-background: 0 0 0;
  --color-hot-badge-text: 255 255 255;
  --color-popular-badge-background: 0 0 0;
  --color-popular-badge-text: 255 255 255;
  --color-focus-ring: 0 0 0;

  /* surfaces */
  --verane-plate: #f5f5f5;
  --verane-gutter: 0.2rem;
}


/* ============================================================================
   1b. Colour schemes — Milan's palette over halftone's paper / night / slate
   ============================================================================
   White page, two quiet greys (#F5F5F5 plates, #EEEEEE panels), and black for the
   dark surfaces — where the main button turns white instead of halftone's acid
   green. Same scheme numbers, so every section keeps its own pick; a section with
   "Use theme colors" off still writes its own pair inline, and Theme settings >
   Colors (snippets/theme-colors) still repaints scheme 1 and the buttons after
   this sheet. */

:root {
  /* the accent halftone hands the dark schemes' buttons, the cart count, hover ink */
  --color-accent: 255 255 255;
  --color-accent-ink: 17 17 17;
}

:root,
.color-scheme-1,
.color-scheme-3,
.color-scheme-10 {
  --color-background: 255 255 255;
  --color-background-secondary: 245 245 245;
  --color-foreground: 17 17 17;
  --color-foreground-secondary: rgba(17 17 17 / 0.65);
  --color-border: 17 17 17;
  --color-border-alpha: 0.12;
  --color-primary-button-background: 17 17 17;
  --color-primary-button-text: 255 255 255;
  --color-secondary-button-background: 245 245 245;
  --color-secondary-button-text: 17 17 17;
  --color-secondary-button-border: 245 245 245;
  --color-input-background: 255 255 255;
  --color-input-text: 17 17 17;
  --color-input-focus-text: 17 17 17;
  --input-border-color: rgb(17 17 17 / 0.3);
  --color-swatch-border: rgb(17 17 17 / 0.2);
}

.color-scheme-2,
.color-scheme-4 {
  --color-background: 245 245 245;
  --color-background-secondary: 255 255 255;
  --color-foreground: 17 17 17;
  --color-foreground-secondary: rgba(17 17 17 / 0.65);
  --color-border: 17 17 17;
  --color-border-alpha: 0.12;
  --color-primary-button-background: 17 17 17;
  --color-primary-button-text: 255 255 255;
  --color-secondary-button-background: 255 255 255;
  --color-secondary-button-text: 17 17 17;
  --color-secondary-button-border: 255 255 255;
  --color-input-background: 245 245 245;
  --color-input-text: 17 17 17;
  --color-input-focus-text: 17 17 17;
  --input-border-color: rgb(17 17 17 / 0.3);
  --color-swatch-border: rgb(17 17 17 / 0.2);
}

.color-scheme-7,
.color-scheme-8 {
  --color-background: 238 238 238;
  --color-background-secondary: 245 245 245;
  --color-foreground: 17 17 17;
  --color-foreground-secondary: rgba(17 17 17 / 0.65);
  --color-border: 17 17 17;
  --color-border-alpha: 0.12;
  --color-primary-button-background: 17 17 17;
  --color-primary-button-text: 255 255 255;
  --color-secondary-button-background: 255 255 255;
  --color-secondary-button-text: 17 17 17;
  --color-secondary-button-border: 255 255 255;
  --color-input-background: 238 238 238;
  --color-input-text: 17 17 17;
  --color-input-focus-text: 17 17 17;
  --input-border-color: rgb(17 17 17 / 0.3);
  --color-swatch-border: rgb(17 17 17 / 0.2);
}

.color-scheme-inverse,
.color-scheme-6 {
  --color-background: 17 17 17;
  --color-background-secondary: 38 38 38;
  --color-foreground: 255 255 255;
  --color-foreground-secondary: rgba(255 255 255 / 0.65);
  --color-border: 255 255 255;
  --color-border-alpha: 0.2;
  --color-primary-button-background: 255 255 255;
  --color-primary-button-text: 17 17 17;
  --color-secondary-button-background: 38 38 38;
  --color-secondary-button-text: 255 255 255;
  --color-secondary-button-border: 38 38 38;
  --color-input-background: 17 17 17;
  --color-input-text: 255 255 255;
  --color-input-focus-text: 255 255 255;
  --input-border-color: rgb(255 255 255 / 0.3);
  --color-swatch-border: rgb(255 255 255 / 0.2);
}

.color-scheme-5,
.color-scheme-9 {
  --color-background: 38 38 38;
  --color-background-secondary: 52 52 52;
  --color-foreground: 255 255 255;
  --color-foreground-secondary: rgba(255 255 255 / 0.65);
  --color-border: 255 255 255;
  --color-border-alpha: 0.2;
  --color-primary-button-background: 255 255 255;
  --color-primary-button-text: 17 17 17;
  --color-secondary-button-background: 52 52 52;
  --color-secondary-button-text: 255 255 255;
  --color-secondary-button-border: 52 52 52;
  --color-input-background: 38 38 38;
  --color-input-text: 255 255 255;
  --color-input-focus-text: 255 255 255;
  --input-border-color: rgb(255 255 255 / 0.3);
  --color-swatch-border: rgb(255 255 255 / 0.2);
}

/* the sale scheme: red copy on white */
.color-scheme-11 {
  --color-background: 255 255 255;
  --color-background-secondary: 245 245 245;
  --color-input-background: 255 255 255;
  --color-secondary-button-background: 245 245 245;
  --color-secondary-button-border: 245 245 245;
}


/* ============================================================================
   2. Type
   ============================================================================ */

/* every heading role: the serif in mixed case, set slightly tight */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.mega-title,
.text-block.h1 > *, .text-block.h2 > *, .text-block.h3 > *,
.text-block.h4 > *, .text-block.h5 > *, .text-block.h6 > *,
.custom-typography,
.custom-typography > * {
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 400;
}

/* undo halftone's stretched labels (DM Sans has no width axis) */
.rte p,
.text-block.paragraph > *,
.menu__item,
.mega-menu__link--top,
.btn,
.product-card__title,
.badge,
.footer__heading,
.footer .accordion__summary-text,
.accordion__summary-text {
  font-stretch: normal;
}

/* eyebrow: a soft grey line of sans, no rules either side */
.text-subheading {
  color: rgb(var(--color-foreground) / 0.65);
  line-height: 1.4;
}
.text-subheading > :is(p, span, div, h1, h2, h3, h4, h5, h6):not(:empty)::after,
.text-center .text-subheading > :not(:empty)::before {
  content: none;
}

.accordion__summary-text {
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.5rem;
  font-weight: 500;
}

/* marquee band: halftone's big caps ticker becomes an italic serif line */
.marquee .text-block.h2 > *,
.marquee .text-block.h3 > *,
.marquee .text-block.h4 > * {
  font-style: italic;
  font-size: clamp(3rem, calc(2.4vw + 1.2rem), 4.8rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: none;
}
.marquee .text-block.paragraph > * {
  font-weight: 400;
  font-size: clamp(1.3rem, calc(0.4vw + 1rem), 1.5rem);
  letter-spacing: 0;
  text-transform: none;
}


/* ============================================================================
   3. Buttons, tabs, badges, menus
   ============================================================================ */

.btn {
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.4rem;
  font-weight: 500;
}
.btn--small,
.btn--extra-small {
  font-size: 1.3rem;
}

/* tabs: plain words, the selected one on a black tag */
.tabs__button {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.3rem 0.8rem;
}
.tabs__button:before {
  background: rgb(var(--color-foreground));
}
.tabs__button[aria-selected=true],
.tabs__button:hover {
  color: rgb(var(--color-background));
}

.badge {
  font-size: 1.2rem;
  line-height: 1.5;
  padding: 0.2rem 0.6rem;
  letter-spacing: 0;
  text-transform: none;
}

/* a hovered nav item keeps the bar's text colour: the lifted sheet turned it
   white for a black hover pill that halftone-skin removed (white on white) */
.header__top .menu__item:hover {
  color: inherit;
}

.menu__item,
.mega-menu__link--top {
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.4rem;
  font-weight: 400;
}


/* carousel arrows: bare chevrons, no boxes (the outline border and the hover
   fill are both drawn by the lifted .btn rules, at a higher specificity) */
.carousel__controls .carousel__button.btn {
  --button-border-thickness: 0px;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgb(var(--color-foreground));
}
.carousel__controls .carousel__button.btn::before {
  display: none;
}
.carousel__controls .carousel__button.btn:hover {
  opacity: 0.6;
}


/* ============================================================================
   4. Header — transparent over the home hero
   ============================================================================
   transplant.css §22 already limits the overlay to a home page whose FIRST
   section is the hero, where the reference floats the header as an inset rounded
   card. Here it spans the window edge to edge, and until the page scrolls (or the
   shopper reaches into it: hover, focus, a mega menu, a dropdown, search) it has no
   surface at all — white type and a white logo straight on the photo. */

body:has(#content_for_index > :first-child [data-header-overlay]) .header {
  --header-offset-absolute: 0px;
  padding-inline: 0;
}
body:has(#content_for_index > :first-child [data-header-overlay]) .header-section .header__background {
  padding-inline: 0;
  margin: 0;
}
body:has(#content_for_index > :first-child [data-header-overlay]) .header-section .header__top {
  padding-inline: var(--page-padding, 2rem);
}
body:has(#content_for_index > :first-child [data-header-overlay]) .header-section .header__background-inner {
  border-radius: 0 !important;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

body:has(#content_for_index > :first-child [data-header-overlay]):not(.has-mega-menu):not(.has-dropdown-menu):not(.search-open) .header-section:not(.header-scrolled):not(:hover):not(:focus-within) .header__background-inner {
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.22), rgb(0 0 0 / 0));
  box-shadow: none;
}
body:has(#content_for_index > :first-child [data-header-overlay]):not(.has-mega-menu):not(.has-dropdown-menu):not(.search-open) .header-section:not(.header-scrolled):not(:hover):not(:focus-within) .header__background-inner::before {
  opacity: 0 !important;
}
body:has(#content_for_index > :first-child [data-header-overlay]):not(.has-mega-menu):not(.has-dropdown-menu):not(.search-open) .header-section:not(.header-scrolled):not(:hover):not(:focus-within) .header__top {
  --color-foreground: 255 255 255;
  color: rgb(255 255 255);
}
body:has(#content_for_index > :first-child [data-header-overlay]):not(.has-mega-menu):not(.has-dropdown-menu):not(.search-open) .header-section:not(.header-scrolled):not(:hover):not(:focus-within) .header__top :is(.header__logo, .menu__item, .header__icon, .cart-icon, .header__search-toggle) {
  color: rgb(255 255 255);
}
/* one colour fade per item: the lifted sheets fade the nav / icon WRAPPERS and
   each .menu__item too, so a plain link (which carries its own white above)
   eased twice — ~0.5s — while a dropdown title finished in 0.25s. The wrappers
   now switch at once and every leaf fades on the same 0.25s. */
.header__top :is(.header__navigation, .header__icons, .header__logo--text) {
  transition: none;
}
.header__top :is(.menu__item, .header__icon, .cart-icon, .header__search-toggle, .header__logo) {
  transition: color 0.25s ease-in-out;
}

/* an image logo is drawn dark for the white bar: knock it out to white */
.header__logo img {
  transition: filter 0.25s ease;
}
body:has(#content_for_index > :first-child [data-header-overlay]):not(.has-mega-menu):not(.has-dropdown-menu):not(.search-open) .header-section:not(.header-scrolled):not(:hover):not(:focus-within) .header__logo img {
  filter: brightness(0) invert(1);
}

/* a second logo for the transparent state (Header > Logo on transparent header):
   it replaces the knocked-out white one while the header has no surface */
.header__logo--alt {
  display: none;
}
body:has(#content_for_index > :first-child [data-header-overlay]):not(.has-mega-menu):not(.has-dropdown-menu):not(.search-open) .header-section:not(.header-scrolled):not(:hover):not(:focus-within) .header__logo--has-alt :is(.header__logo--mobile, .header__logo--desktop) {
  display: none !important;
}
body:has(#content_for_index > :first-child [data-header-overlay]):not(.has-mega-menu):not(.has-dropdown-menu):not(.search-open) .header-section:not(.header-scrolled):not(:hover):not(:focus-within) .header__logo--has-alt .header__logo--alt {
  display: block;
  filter: none;
}

/* phones float the header over the hero too — the lifted sheet only does it from
   768px, so below that the bar sat in flow and pushed the slideshow down */
@media screen and (max-width: 767px) {
  body:has(#content_for_index > :first-child [data-header-overlay]) .header {
    position: absolute;
    width: 100%;
  }
  body:has(#content_for_index > :first-child [data-header-overlay]) .header-sticky {
    position: relative;
    top: 0;
  }
  body:has(#content_for_index > :first-child [data-header-overlay]) .header-sticky.header-scrolled {
    position: sticky;
  }
  body:has(#content_for_index > :first-child [data-header-overlay]) .header-sticky.header-scrolled .header__top {
    position: static;
  }
}

/* phones and tablets search from the menu drawer, like the reference: the header
   keeps only menu, logo, account and cart (the drawer exists below 1024px) */
@media screen and (max-width: 1023px) {
  .header__icons .search-drawer-button {
    display: none;
  }
}
.menu-drawer__search {
  width: 4.4rem;
  height: 4.4rem;
  /* the close button fills the 60px row; centre on it instead of the row's top */
  align-self: center;
}

/* the hero clears the header's height instead of an inset card's */
body:has(#content_for_index > :first-child [data-header-overlay]) [data-header-overlay] .slide__content {
  margin-block-start: var(--header-height, 8rem);
}


/* ============================================================================
   5. Slideshow hero — centred editorial copy
   ============================================================================ */

.section-slideshow .slide__inner {
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-inline: auto;
}
.section-slideshow .slide__inner > * {
  margin-inline: auto;
}
/* phones: the copy is centred, so the controls read as one row — counter and
   progress bar from the left edge, arrows pushed to the right */
@media screen and (max-width: 767px) {
  .section-slideshow .slideshow__controls .carousel__controls--group {
    justify-content: flex-start;
  }
  .section-slideshow .slideshow__controls .carousel__controls-buttons {
    margin-inline-start: auto;
  }
}
.section-slideshow .custom-typography > * {
  line-height: 0.9;
  letter-spacing: -0.02em;
}
/* a soft scrim keeps white copy legible on pale photos */
.section-slideshow .slide__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.08) 45%, rgb(0 0 0 / 0.22));
  pointer-events: none;
}


/* ============================================================================
   6. Collection cards — full-bleed tiles, title on the photo
   ============================================================================
   The reference's second section: tall portrait tiles running edge to edge with a
   2px gutter, each collection named in the serif over the foot of its photo. */

.collection-tabs .section__container {
  --f-column-gap: var(--verane-gutter) !important;
  --f-column-gap-mobile: var(--verane-gutter) !important;
  --f-row-gap: var(--verane-gutter) !important;
  --f-row-gap-mobile: var(--verane-gutter) !important;
}
.collection-tabs .section__wrapper {
  grid-column: 1 / -1;
}
.collection-tabs .section__header {
  justify-content: center !important;
  align-items: center !important;
  text-align: center;
  padding-inline: var(--page-padding, 2rem);
  margin-block-end: 2.4rem;
}
.collection-tabs .section__header .text-block.h1 > * {
  font-size: var(--font-size--h2);
}
.collection-tabs .carousel__controls {
  padding-inline: var(--page-padding, 2rem);
}

.collection-tabs .collection-card .media {
  --ratio: 0.75 !important;
  --ratio-mobile: 0.75 !important;
  aspect-ratio: 3 / 4;
  background: var(--verane-plate);
}
.collection-tabs .collection-card .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.collection-tabs .collection-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.38), rgb(0 0 0 / 0) 42%);
  pointer-events: none;
}
.collection-tabs .collection-card__inner {
  position: relative;
}
.collection-tabs .collection-card__content {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1;
  align-items: center !important;
  text-align: center !important;
  padding: 0 1.6rem clamp(2rem, 2.4vw, 3.2rem);
  color: rgb(255 255 255);
  pointer-events: none;
}
.collection-tabs .collection-card__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, calc(1.2vw + 1.2rem), 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: none;
  color: inherit;
}


/* ============================================================================
   7. Product tabs + product cards
   ============================================================================ */

/* centred serif title, the tab tags on their own row under it */
.section--featured-collection .section__header {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  gap: 2.4rem;
  margin-block-end: 2.4rem;
}
.section--featured-collection .section__header .text-block.h1 > * {
  font-size: var(--font-size--h2);
}
.section--featured-collection .tabs__header .swipe__inner {
  justify-content: center;
}

/* cards sit edge to edge with the hairline gutter */
.section--featured-collection .section__container {
  --f-column-gap: var(--verane-gutter) !important;
  --f-column-gap-mobile: var(--verane-gutter) !important;
}

.product-card__media,
.product-card .media {
  background-color: var(--verane-plate);
}
.product-card__content {
  padding: 1.6rem 1.2rem 0.8rem;
}
.product-card__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}
.price,
.compare-at-price,
.unit-price {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.5rem;
}
.compare-at-price {
  color: rgb(var(--color-foreground) / 0.55);
}


/* ============================================================================
   8. Bundle hotspots + product page
   ============================================================================ */

/* hotspots: a plain white dot in a soft ring, no numbers (the number stays for
   screen readers); the picked one gets a wider ring. The cards' matching number badges
   go too. */
.products-bundle__hotspot {
  --number-size: 2rem;
  font-size: 0;
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 0 0 0.5rem rgb(255 255 255 / 0.3);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.products-bundle__hotspot:hover {
  box-shadow: 0 0 0 0.7rem rgb(255 255 255 / 0.35);
}
.products-bundle__hotspot.is-selected {
  background: rgb(255 255 255);
  box-shadow: 0 0 0 0.7rem rgb(255 255 255 / 0.45);
}
.products-bundle__product-number {
  display: none;
}
@media screen and (max-width: 767px) {
  .products-bundle__hotspot {
    --number-size: 1.8rem;
    box-shadow: 0 0 0 0.4rem rgb(255 255 255 / 0.3);
  }
  .products-bundle__hotspot:hover,
  .products-bundle__hotspot.is-selected {
    box-shadow: 0 0 0 0.6rem rgb(255 255 255 / 0.4);
  }
}

/* two products fill the desktop row (2 per view from 768px): nothing to slide to,
   so the arrows go; a phone shows 1.15 per view and keeps them */
@media screen and (min-width: 768px) {
  .products-bundle__controls--fit {
    display: none;
  }
}

/* header mega menu promo cards: square like every other image */
.mega-promo {
  border-radius: 0;
}

/* product page: the title and the price had no air between them */
.product-details .product-price-block {
  margin-block-start: 1.6rem;
}


/* ============================================================================
   9. Footer
   ============================================================================ */

.footer__heading {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.5rem;
}
.footer .text-block.h1 > * {
  text-transform: none;
  letter-spacing: -0.01em;
}
.footer__copyright,
.footer__bottom {
  font-size: 1.3rem;
  letter-spacing: 0;
  text-transform: none;
}