/* Misfit Mixers — site chrome.

   The base theme's header and footer are the real, feature-complete sections:
   mega menu, predictive search, account entry, locale and market pickers, the
   cart drawer, the mobile nav drawer, payment icons. The store needs all of it,
   so neither section is replaced. This sheet repaints them to the approved
   design and does nothing else.

   Those two sections are not Misfit sections, so they cannot carry
   `misfit-page` and the design's own `.nav` / `.misfit-footer` rules in
   landing.css and home.css can never reach them. The design values therefore
   live here instead, each one behind the same `var(--mm-*, <design value>)`
   token the ported stylesheets use, so the chrome recolours and re-types from
   Theme settings exactly like every Misfit section.

   Every selector is scoped to `.misfit-chrome`, which the two section files put
   on their own root element only when their `misfit_style` switch is on.
   Turning that switch off restores the platform's own paint with no other
   change. Layout mechanics, dropdown and drawer behaviour, and the base
   theme's own breakpoints are deliberately left alone. */

/* ------------------------------------------------------------------ header */

.misfit-chrome .header-section {
  /* The hairline and the hover colour, kept as tokens so the colour scheme and
     the brand palette both keep reaching the chrome. */
  --mm-chrome-rule: rgb(var(--color-entry-line));
  --mm-chrome-hover: var(--mm-pink-light, #ef769d);
}

/* Dark translucent bar with a blur. The tint token wins if a section ever sets
   it; otherwise it is derived from the nav colour at the design's 95% alpha. */
.misfit-chrome .header__container {
  background-color: var(
    --mm-nav-bg-tint,
    color-mix(in srgb, var(--mm-nav-bg, #141126) 95%, transparent)
  );
  backdrop-filter: blur(10px);
}

/* 72px tall with the design's 32px gutter, 64px under 580px. The height is the
   bar's own, not padding, so the header's block padding can stay at zero and the
   wordmark and the nav centre themselves in it. */
.misfit-chrome .header__container-top-wrap {
  min-height: 72px;
  column-gap: 32px;
}

/* Wordmark. The base logo component already falls back from the section logo to
   settings.logo to the store name, so only the text fallback needs the
   design's .brand-name treatment. */
.misfit-chrome .header__logo-link {
  font-family: var(--mm-font-display, Cinzel, Georgia, serif);
  font-size: calc(1.05rem * var(--mm-fs-head, 1));
}

.misfit-chrome .header__logo-text,
.misfit-chrome .header__logo-text.typography-default {
  font-family: var(--mm-font-display, Cinzel, Georgia, serif);
  font-size: calc(1.05rem * var(--mm-fs-head, 1));
  font-weight: 700;
  line-height: 1;
  text-align: start;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  word-break: normal;
  white-space: nowrap;
}

.misfit-chrome .header__logo-image {
  max-height: 46px;
  object-fit: contain;
}

/* Nav links pushed right. The base grid for this layout gives the nav an auto
   column, so the free space has to move into it before margin-inline-start can
   push the list over. */
.misfit-chrome
  .header__container[layout^="left_logo_left_menu"]
  .header__container-top-wrap {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
}

.misfit-chrome [layout^="left_logo_left_menu"] .header-nav {
  margin-inline: auto 0;
}

.misfit-chrome .header-nav__menu {
  gap: 0 28px;
  flex-wrap: nowrap;
}

.misfit-chrome .header-nav__menu-item {
  margin-inline: 0;
}

.misfit-chrome .header-nav__menu-item > a {
  font-size: calc(0.92rem * var(--mm-fs-body, 1));
}

.misfit-chrome .header-nav__menu-item > a:not(.button):hover {
  color: var(--mm-chrome-hover);
}

/* The design marks the hovered top-level link with colour, not a rule. The
   dropdown levels keep the base theme's underline. */
.misfit-chrome .header-nav__menu-item > a.header-nav__underline::after {
  display: none;
}

.misfit-chrome .header-nav-dropdown-menu__hero:not(.button):hover,
.misfit-chrome .header-nav-dropdown-panel__link:not(.button):hover {
  color: var(--mm-chrome-hover);
}

.misfit-chrome .header-nav-dropdown-panel__hero {
  font-family: var(--mm-font-display, Cinzel, Georgia, serif);
  letter-spacing: 0.06em;
}

/* Circular cart button with the pink count bubble. The bubble's colours are
   already the brand's, from the global cart-bubble theme settings; this is the
   design's geometry. The ring goes on the interactive child when there is one,
   otherwise on the bubble itself. */
.misfit-chrome .cart-bubble > a,
.misfit-chrome .cart-bubble > button,
.misfit-chrome .cart-bubble:not(:has(> a, > button)) {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: 50%;
  transition: 0.2s;
}

.misfit-chrome .cart-bubble > a:hover,
.misfit-chrome .cart-bubble > button:hover,
.misfit-chrome .cart-bubble:not(:has(> a, > button)):hover {
  color: var(--mm-pink, #d63e72);
  border-color: rgba(255, 255, 255, 0.22);
  transform: none;
}

.misfit-chrome .cart-bubble svg {
  width: 25px;
  height: 25px;
}

.misfit-chrome .cart-bubble__count {
  inset-block: -2px auto;
  inset-inline: auto -2px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  font-size: calc(0.68rem * var(--mm-fs-body, 1));
  font-weight: 700;
  line-height: 18px;
  border-radius: 9px;
}

/* Hamburger. The drawer it opens is the base theme's, and is already dark
   because the header section hands it its own colour scheme. */
.misfit-chrome .header-action-bar__menu {
  box-sizing: content-box;
  padding: 5px 10px;
  border: 1px solid var(--mm-chrome-rule);
  border-radius: 4px;
}

.misfit-chrome .header-action-bar__menu:hover {
  border-color: var(--mm-chrome-hover);
  transform: none;
}

/* The design's narrow-desktop squeeze, so eight nav items still fit on one row. */
@media (min-width: 901px) and (max-width: 1150px) {
  .misfit-chrome .header__container-top-wrap {
    column-gap: 14px;
  }

  .misfit-chrome .header-nav__menu {
    gap: 0 13px;
  }

  .misfit-chrome .header-nav__menu-item > a {
    font-size: calc(0.78rem * var(--mm-fs-body, 1));
  }
}

/* Under the base theme's mobile breakpoint the design puts the brand at the
   left, then the cart, then the hamburger last. Only the column order changes;
   the drawer trigger and the drawer itself are untouched. */
@media (max-width: 959px) {
  .misfit-chrome .header__container[mobile-layout] .header__container-top-wrap {
    grid-template: "logo action-bar-right action-bar-left";
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .misfit-chrome
    .header__container[mobile-layout]
    .header__container-top-wrap
    .header__logo {
    justify-content: flex-start;
  }

  .misfit-chrome .header-action-bar.left {
    flex: 0;
    width: auto;
    margin-inline: 0;
  }

  .misfit-chrome .header__logo-image {
    max-height: 40px;
  }
}

@media (max-width: 580px) {
  .misfit-chrome .header__container-top-wrap {
    min-height: 64px;
  }

  .misfit-chrome .header__logo-link,
  .misfit-chrome .header__logo-text,
  .misfit-chrome .header__logo-text.typography-default {
    font-size: calc(0.86rem * var(--mm-fs-head, 1));
    letter-spacing: 0.07em;
  }
}

/* Header search (F-08). The base theme's search entry and its drawer are kept
   as they are; only the paint changes. The open drawer covers the 72px bar in
   the nav colour, with the design's hover colour on the icons and a pink focus
   rule under the field. The account entry (F-45) takes the same hover colour,
   in the bar and in the mobile drawer. An installed search app may replace the drawer with
   its own overlay; that overlay is the app's and is not restyled here. */
.misfit-chrome .header-action-bar__search:hover,
.misfit-chrome .header-search-bar__icon:hover,
.misfit-chrome .header-action-bar > a.button--icon:hover,
.misfit-chrome .header-action-bar button.dropdown-menu__label:hover,
.misfit-chrome .header-nav-drawer__login:hover {
  color: var(--mm-chrome-hover);
}

.misfit-chrome .header-search-bar__form {
  background-color: var(--mm-nav-bg, #141126);
  border-block-end: 1px solid var(--mm-chrome-rule);
}

.misfit-chrome .header-search-bar__form:focus-within {
  border-block-end-color: var(--mm-pink, #d63e72);
}

.misfit-chrome .header-search-bar__form .field__input {
  color: var(--mm-cream-light, #f4e5c4);
  font-size: calc(1rem * var(--mm-fs-body, 1));
}

.misfit-chrome .header-search-bar__results {
  background-color: var(--mm-nav-bg, #141126);
}

/* ------------------------------------------------------------------ footer */

.misfit-chrome.footer {
  /* Near-black over the paper texture, the same treatment the ported
     .misfit-footer rule gives the design's own footer. */
  background-color: var(--mm-footer-bg, #0f0d20);
  background-image: linear-gradient(
      var(
        --mm-footer-bg-tint,
        color-mix(in srgb, var(--mm-footer-bg, #0f0d20) 50%, transparent)
      ),
      var(
        --mm-footer-bg-tint,
        color-mix(in srgb, var(--mm-footer-bg, #0f0d20) 50%, transparent)
      )
    ),
    var(--mm-img-texture, var(--mma-background-texture-multiply));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: normal, multiply;

  --mm-chrome-rule: rgb(var(--color-entry-line));
  --mm-chrome-hover: var(--mm-pink-light, #ef769d);
}

/* The design's four-column shelf. The column group flattens so its own four
   blocks — the brand text and the three menus — become the four columns; the
   signup group sits under the brand column and the copyright group spans. */
.misfit-chrome .footer__inner {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  /* Row one is the brand text, so its height is the brand's; the menus'
     extra height goes to row two, under the signup. */
  grid-template-rows: auto 1fr;
  column-gap: 45px;
  row-gap: 17px;
  align-items: start;
  width: 100%;
}

.misfit-chrome .footer__group:has(.footer__menu) {
  display: contents;
}

.misfit-chrome .footer__inner > *,
.misfit-chrome .footer__group > * {
  min-width: 0;
}

.misfit-chrome .footer__group > *:has(.footer__custom-text-title) {
  grid-column: 1;
  grid-row: 1;
}

.misfit-chrome .footer__inner > *:has(.block-subscription) {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  margin-block-start: 6px;
}

/* The menus span both rows, so the signup sits directly under the brand text
   instead of below the tallest menu. */
.misfit-chrome .footer__group > .footer__menu {
  grid-row: 1 / span 2;
}

.misfit-chrome .footer__inner > *:has(.block-subscription) > *,
.misfit-chrome .block-subscription {
  width: 100%;
  max-width: 390px;
}

/* Column headings and links. */
.misfit-chrome .footer__menu-title,
.misfit-chrome .footer__custom-text-title,
.misfit-chrome .footer__email-subscribe-title,
.misfit-chrome .footer__social-media-title {
  margin-block: 0 12px;
  font-family: var(--mm-font-display, Cinzel, Georgia, serif);
  font-size: calc(0.86rem * var(--mm-fs-head, 1));
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgb(var(--color-text));
}

.misfit-chrome .footer__custom-text-title {
  font-size: calc(1.1rem * var(--mm-fs-head, 1));
  padding-block-end: 0;
}

.misfit-chrome .footer__menu-content {
  display: grid;
  gap: 8px;
}

.misfit-chrome .footer__menu-item {
  padding-block-start: 0;
}

.misfit-chrome .footer__menu-item a:not(.button) {
  font-size: calc(0.95rem * var(--mm-fs-body, 1));
  color: rgba(var(--color-text), 0.8);
}

.misfit-chrome .footer__menu-item a:not(.button):hover {
  color: var(--mm-chrome-hover);
}

.misfit-chrome .footer__menu::after {
  background-color: var(--mm-chrome-rule);
}

/* Inline email signup, from the platform's own subscribe block. Its floating
   label and validation are left as they are; only the surfaces change. */
.misfit-chrome .block-subscription__inline-form {
  display: flex;
  gap: 0;
  align-items: stretch;
  max-width: 390px;
}

.misfit-chrome .block-subscription .field {
  min-width: 0;
  margin-block-end: 0;
}

.misfit-chrome .block-subscription .field::after {
  border: 0;
}

.misfit-chrome .block-subscription .field__input {
  padding: 18px 12px 6px;
  background-color: var(--mm-cream-light, #f4e5c4);
  color: var(--mm-ink, #17142f);
}

.misfit-chrome .block-subscription .field__label {
  inset-inline-start: 12px;
  color: color-mix(in srgb, var(--mm-ink, #17142f) 62%, transparent);
}

.misfit-chrome .block-subscription .button:not(.button--link, .button--text) {
  padding-inline: 16px;
  font-family: var(--mm-font-display, Cinzel, Georgia, serif);
  font-size: calc(0.7rem * var(--mm-fs-head, 1));
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* The copyright row is the design's .footer-bottom: the only group in the
   footer that carries neither a menu nor the signup. */
.misfit-chrome
  .footer__inner
  > .footer__group:last-child:not(:has(.footer__menu, .block-subscription)) {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  grid-column: 1 / -1;
  padding-block-start: 18px;
  margin-block-start: 29px;
  font-size: calc(0.8rem * var(--mm-fs-body, 1));
  color: rgb(var(--color-light-text));
  /* The scheme may not define --color-entry-line; the design's own hairline
     is the fallback so the rule never drops out. */
  border-block-start: 1px solid var(--mm-footer-rule, #ffffff22);
}

/* Copyright text: each paragraph is one end of the design's bottom row. */
.misfit-chrome .footer__copyright-text {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  width: 100%;
}

.misfit-chrome .footer__copyright-text p {
  margin: 0;
}

/* .rte adds a clearfix pseudo-element, which would be a third flex item and
   pull the second paragraph to the middle. */
.misfit-chrome .footer__copyright-text::before,
.misfit-chrome .footer__copyright-text::after {
  display: none;
}

.misfit-chrome .footer__group:last-child .footer__copyright,
.misfit-chrome .footer__group:last-child .footer__copyright > * {
  width: 100%;
}

.misfit-chrome .footer__copyright-menu a:not(.button) {
  color: inherit;
}

.misfit-chrome .footer__copyright-menu a:not(.button):hover {
  color: var(--mm-chrome-hover);
}

/* The base theme turns the footer menus into accordions at 959px, so the shelf
   collapses on the same breakpoint rather than the design's 900px — one
   transition instead of two, and full-width rows for the accordion headers. */
@media (max-width: 959px) {
  .misfit-chrome .footer__inner {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 0;
  }

  .misfit-chrome .footer__group > *:has(.footer__custom-text-title),
  .misfit-chrome .footer__group > .footer__menu,
  .misfit-chrome .footer__inner > *:has(.block-subscription) {
    grid-column: 1;
    grid-row: auto;
  }

  .misfit-chrome .footer__menu-title {
    padding-block-start: 15px;
  }

  .misfit-chrome
    .footer__inner
    > .footer__group:last-child:not(:has(.footer__menu, .block-subscription)) {
    display: grid;
    gap: 8px;
    justify-content: start;
    margin-block-start: 24px;
  }
}

/* Password-manager extensions (LastPass) inject an icon into email fields.
   It is not part of the design, so keep it out of every newsletter form. */
[data-lastpass-icon-root] { display: none !important; }

/* Smart Search Recommendations dropdown. The app paints its panel with the dark
   color-scheme-2 but hardcodes product prices to black, so they vanish into the
   background. Match the price to the product name (cream) and mute the
   compare-at price. Results on /search sit on cream and keep the theme price. */
.plugin-product-search [class*="plugin-product-search-currentPrice"],
.plugin-product-search .plugin-product-search-ProductPrice {
  color: var(--mm-cream-light, #f3ead5) !important;
}
.plugin-product-search [class*="plugin-product-search-originPrice"],
.plugin-product-search [class*="plugin-product-search-comparePrice"],
.plugin-product-search .plugin-product-search-ProductPrice s,
.plugin-product-search .plugin-product-search-ProductPrice del {
  color: var(--mm-cream-light, #f3ead5) !important;
  opacity: 0.65;
}