/* ==========================================================================
   Naturalistico frontend shell — v3 design
   --------------------------------------------------------------------------
   The promo bar, header, category rail and footer of
   lms/layouts/learn_school.blade.php, ported from the naturalistico-public-v3
   prototype. home_v3.css did the page body of the homepage and deliberately
   left the shell alone; this file is that missing half, and because the layout
   is shared it restyles the header and footer on every frontend page at once.

   Two rules this file lives by:

   1. EVERY selector is scoped under .nlp-shell — the class on #container. The
      layout loads Bootstrap + Nifty + front.css, so the scope buys (0,2,x)
      against their (0,1,x) and we win the cascade with no !important anywhere.
      Where a theme rule is itself nested (.tabs .-primary > li > a) the scoped
      selector is deepened to match rather than escalated.

   2. Tokens are prefixed --nlp-. An unprefixed --green on #container would
      inherit into every .green-text on the page and repaint it, since front.css
      defines --green: #73C64C at :root and .green-text reads it. Prefixing
      keeps the palette from leaking into theme rules.

   The markup keeps all of the live header's JS hooks under new wrappers:
   .nav_looking_search_text / .learn-search-items (search AJAX),
   .learn-lang-currency-trigger (language + currency modal), #checkout-notification
   / .bucket-notification (cart count), #dropdown-user (Bootstrap dropdown),
   .mainnav-toggle (Nifty mobile drawer) and .newcategory-tabs (the "Others"
   overflow adapter). Restyling only — no behaviour was rewired.
   ========================================================================== */

.nlp-shell {
  --nlp-sky: #3FA9E8;
  --nlp-sky-deep: #2286C7;
  --nlp-sky-tint: #EDF6FC;
  --nlp-sky-line: #D3E9F8;
  --nlp-ink: #12303B;
  --nlp-teal: #0F6E78;
  --nlp-paper: #FDFEFE;
  --nlp-mist: #F6FAFA;
  --nlp-line: #E6EDEC;
  --nlp-white: #ffffff;
  --nlp-text: #3D5058;
  --nlp-text-soft: #66787E;
  --nlp-gold: #F0C033;

  /* Height of the promo strip, measured and republished by lms/js/header_v3.js
     on load and on resize. The whole strip travels with the header inside
     .nlp-topbar, so every in-page bar that parks under the header (the PDP nav,
     the paths jump bar, the legal contents rail, the category filter bar) has
     to clear this much more than it used to. They all read it through this
     token, and 0 is the honest default: a page with no banner has no strip, and
     a page that loads without the script keeps exactly the pre-sticky offsets
     rather than a guessed gap. */
  --nlp-promo-h: 0px;

  /* Height of the header row itself, measured and republished by the same
     script. Two heights live in this file — 67px at the full row, 63px once the
     search pill and the desktop nav drop out below 992px — and an in-page bar
     that must sit FLUSH under the pinned chrome needs the real one, not a
     constant. 67px is the honest default here: it is what the widest row
     measures, so a page that loads without the script lands on the desktop
     value instead of collapsing its offsets to nothing.
     Bars that want deliberate air below the header (the PDP's buy card) keep
     their own clearance and do not read this. */
  --nlp-head-h: 67px;
}

/* ============ promo bar ============ */
/* Five mutually exclusive banners share this class — black friday, gift, the
   Naturalistico launch line, the referral line and the admin-scheduled promo.
   The v3 bar is one compact teal strip, so the sizing lives here once and each
   branch keeps its own inner markup. */
/* 13px of padding, not 9px: the strip is pinned now, so it is the one band that
   is on screen the whole visit and it was reading as a thin rule under the
   browser chrome rather than as the offer. --nlp-promo-h is measured, so the
   bars that park under the header follow this without a second edit. */
.nlp-shell .nlp-promo {
  background: var(--nlp-teal);
  padding: 13px 16px;
  text-align: center;
  line-height: 1.5;
}
.nlp-shell .nlp-promo .learn-gift-banner,
.nlp-shell .nlp-promo .black-friday-banner {
  /* front.css sets Fraunces 20px/600 here for the old tall bar. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  /* 17px, up from the 13.5px this bar shipped with: the strip carries the one
     time-limited offer on the page and it was the smallest type in the shell —
     now it is a step above the nav. Still one line at every desktop width. */
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
}
/* The gold text lead-in and the gold coupon pill both come from front.css
   (.learn-color-gift-banner, first-of-type vs the rest) — only the pill's
   type scale needs bringing down to the v3 bar. */
.nlp-shell .nlp-promo .learn-color-gift-banner {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  padding: 3px 11px;
}
/* front.css strips the first pill back to plain gold text; the padding reset
   has to be repeated here because the rule above outranks it on order. */
.nlp-shell .nlp-promo .learn-color-gift-banner:first-of-type {
  font-family: inherit;
  font-size: inherit;
  padding: 0;
}
.nlp-shell .nlp-promo .black-friday-explore p {
  font-size: 15px;
}
/* The strip is a flex row (front.css) holding another flex row, and a flex
   item's automatic minimum size is its max-content width — so on a phone the
   offer ran past the viewport as one line instead of wrapping, and
   #container's overflow:clip cut the tail off. Both levels have to be allowed
   to shrink before the text inside them will wrap. It matters more now that the
   strip is pinned: a clipped line no longer scrolls away. */
.nlp-shell .nlp-promo .learn-gift-banner,
.nlp-shell .nlp-promo .black-friday-banner,
.nlp-shell .nlp-promo p {
  min-width: 0;
}

/* ---- the stuck state ---- */
/* The whole point of the resting size is the first screen: the offer has to land
   before anything else does. Once the visitor is reading, that same size is
   permanent furniture — 120px of pinned chrome is 11% of a 1080px screen but
   16% of the 768px laptop that is still the most common desktop height, and
   ~14% of a phone. So the strip condenses the moment the page moves and expands
   again at the top.
   Only the STRIP condenses, never the header: every in-page sticky bar parks at
   "header clearance + --nlp-promo-h", so a shrinking header would open a gap
   between itself and those bars that the page shows through. The strip's height
   is what the token carries, and the ResizeObserver in lms/js/header_v3.js
   republishes it as it changes, so the article's contents rail and the PDP nav
   ride up with it in the same frame.
   header_v3.js adds .is-stuck; with the script blocked the bar simply stays at
   its resting size. */
.nlp-shell .nlp-topbar {
  transition: box-shadow .2s ease;
}
.nlp-shell .nlp-promo {
  transition: padding .2s ease;
}
.nlp-shell .nlp-promo .learn-gift-banner,
.nlp-shell .nlp-promo .black-friday-banner,
.nlp-shell .nlp-promo .learn-color-gift-banner {
  transition: font-size .2s ease, padding .2s ease;
}
/* Stuck rules carry .is-stuck on top of the resting selector, one class deeper,
   so they win on specificity — which means they would also outrank the
   breakpoint rules further down this file. Each breakpoint therefore repeats its
   own stuck sizes at the same depth. */
.nlp-shell .nlp-topbar.is-stuck {
  box-shadow: 0 6px 22px -14px rgba(15, 80, 95, .5);
}
.nlp-shell .nlp-topbar.is-stuck .nlp-promo {
  padding: 7px 16px;
}
.nlp-shell .nlp-topbar.is-stuck .nlp-promo .learn-gift-banner,
.nlp-shell .nlp-topbar.is-stuck .nlp-promo .black-friday-banner {
  font-size: 15px;
}
.nlp-shell .nlp-topbar.is-stuck .nlp-promo .learn-color-gift-banner {
  font-size: 13px;
  padding: 2px 10px;
}
.nlp-shell .nlp-topbar.is-stuck .nlp-promo .learn-color-gift-banner:first-of-type {
  font-size: inherit;
  padding: 0;
}

/* ============ header ============ */
/* Nifty gives #container overflow:hidden, which turns it into a scroll
   container and quietly kills position:sticky on anything inside it. clip
   keeps the same "don't let children cause a scrollbar" job without becoming
   a scrollport, so the header can stick. Selector carries the id because
   #container (1,0,0) outranks a bare class. Browsers without overflow:clip
   drop the declaration and keep hidden — the header is then simply static. */
#container.nlp-shell {
  overflow: clip;
}
/* The one sticky element in the shell. It wraps the promo strip and the header
   so the offer stays on screen with the nav; sticking them separately would
   mean feeding the header the strip's live height, and it would overlap the
   strip in every browser that missed the measurement. The category rail below
   is deliberately left out — it is the tallest of the three and the row that
   costs the least to scroll away.
   z-index sits above the page but under the login modal (front.css, 1050). */
.nlp-shell .nlp-topbar {
  position: sticky;
  top: 0;
  z-index: 90;
}
.nlp-shell .p-header {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--nlp-line);
  /* Nifty puts "Open Sans" on <body>, which the layout never loads, so the
     shell was falling back to a system face. Inter is set here rather than on
     <body> to keep the change inside the header. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* 1320px matches the page rail below, so the wordmark lines up with the hero.
   The prototype spent that width on five nav labels and nothing else; live
   also carries a sixth label, the language pill and the profile chip, so the
   gaps here are tighter than the prototype's 28px to keep the search pill at
   a usable width for a signed-in visitor. */
.nlp-shell .p-header .h-in {
  max-width: 1320px;
  margin: 0 auto;
  padding: 13px 30px;
  display: flex;
  align-items: center;
  /* 14px, down from 18px (and 22px before that). The gaps are where the row pays
     for anything it gains, because .h-in stops growing at the rail: a 4K screen
     has exactly the 1260px inside the padding that a 1320px one has. This 8px
     (two gaps) is part of the ~21px bought back so the 230px search field fits
     alongside a signed-in chip without eating into the profile name — see the
     min-width:1300px block near the end of the file. */
  gap: 14px;
}
.nlp-shell .wordmark {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}
.nlp-shell .wordmark img {
  height: 31px;
  width: auto;
  max-width: 100%;
  display: block;
}

/* ---- primary nav ---- */
.nlp-shell .p-nav-wrap {
  flex: 0 0 auto;
  min-width: 0;
}
/* 14px rather than the 13.5px this row shipped with, with the gap cut 17px→14px
   to pay for it. The row is exactly full at the 1320px rail — the search pill is
   its only elastic control — so type that grows without the gaps shrinking comes
   straight out of the pill, and a signed-in visitor (whose profile chip is 65px
   wider than the sign-in button) ends up with the placeholder clipped mid-word.
   The two changes together leave the row the width it was.
   Below 1200px the responsive block puts the labels back to 13.5px: that band
   still shows the full nav, the language pill and the chip, in a row up to
   330px narrower. */
/* 12px, down from 14px: five gaps, so 10px of the ~21px the fixed-width search
   field needed. The labels keep their 14px — type size is what the row was tuned
   around, and gaps are the cheaper thing to spend. */
.nlp-shell .p-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--nlp-text);
}
.nlp-shell .p-nav > li {
  padding: 0;
  margin: 0;
  font-size: inherit;
  color: inherit;
  white-space: nowrap;
}
.nlp-shell .p-nav > li > a {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
}
.nlp-shell .p-nav > li > a:hover,
.nlp-shell .p-nav > li > a:focus {
  color: var(--nlp-ink);
  border-bottom-color: var(--nlp-sky);
}
/* The layout marks the current page with .text-semibold; v3 shows it as the
   underline instead of a weight change, so the row never reflows on navigate. */
.nlp-shell .p-nav > li.text-semibold > a {
  color: var(--nlp-ink);
  border-bottom-color: var(--nlp-sky);
}

/* ---- right cluster ---- */
.nlp-shell .h-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  /* 5px, down from 6px (8px originally) — see the note on .h-in's gap. Three
     gaps here, so the last 3px of the ~21px. */
  gap: 5px;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
  float: none;
  min-width: 0;
}
.nlp-shell .h-right > li {
  padding: 0;
  margin: 0;
  float: none;
}
/* Nifty dresses .navbar-top-links > li > a for its dark fixed topbar:
   display:table-cell, height:59px, colour #dbdbdb. Every control in this
   cluster has to start from neutral, so the reset lands here at (0,3,2) —
   and each control below then re-selects itself as > a.<class> to sit at
   (0,4,2) and win back its own paint. Skipping that second step is what
   made the sign-in button white-on-white. */
.nlp-shell .h-right > li > a {
  display: inline-flex;
  align-items: center;
  height: auto;
  padding: 0;
  color: inherit;
  background: transparent;
  transition: none;
}
.nlp-shell .h-right > li > a:hover,
.nlp-shell .h-right > li > a:focus {
  background: transparent;
}

/* ---- search: two states, and the COLLAPSED one is the default ---------------
   This control used to be the row's single elastic element: `flex: 0 1 auto` on
   a 230px pill, so every shortfall in the row came out of it. That works until
   the row runs short, and the row runs short nearly everywhere — .h-in caps at
   the 1320px rail, and inside that cap the wordmark, the six nav labels, the
   cart, the language pill and the sign-in button already want 1017 of the
   1260px available. Measured signed out: 230px at a 1347px viewport, 174px at
   1261px. Signed in, the profile chip is 71px wider than the sign-in button,
   which puts the pill at ~172px on ANY monitor — the rail caps the row, so a 4K
   screen is no roomier here than a 1320px one — and ~113px at 1261px. 113px is
   53px of typing room behind a 60px of icon and padding. That is the field
   reported as unusable on a 13" screen, and no amount of retuning the gaps
   fixes it, because the row is over its budget by more than the pill is wide.

   So the pill stops absorbing. Its default is a 40px icon button — the cart
   control's size, radius and hover, because they sit next to each other and
   should read as one pair — which opens the field at its full width OVER the
   row. Open is out of flow, so nothing in the row moves and the field is the
   same size at 992px as at 1920px, in every locale, signed in or out.

   The inline field comes back at 1300px and up, claimed by the min-width query
   near the end of this file — and by nothing else. There used to be a second
   gate, a runtime measurement in lms/js/header_v3.js that revoked the pill
   below 200px; it is gone, because what it measured depended on which webfonts
   had loaded when it ran, so live and local disagreed about the same row at the
   same width. Width decides, the profile name absorbs the shortfall. */
.nlp-shell .p-search {
  position: relative;
  display: block;
  /* No shrink and no grow: the button is a fixed 40px and the open field is out
     of flow, so the row's width no longer depends on this control at all. */
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
}
.nlp-shell .p-search .p-search-field {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  /* 12px, not 999px: .cart-btn is a 40px rounded square and these two are the
     only icon buttons in the cluster. */
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.nlp-shell .p-search .p-search-field:hover,
.nlp-shell .p-search .p-search-field:focus-within {
  background: var(--nlp-sky-tint);
}
.nlp-shell .p-search .p-search-field:hover .learn-search-icon {
  color: var(--nlp-ink);
}
/* Collapsed the input is still in the DOM — it still carries any $search_key the
   page rendered with, and the search JS resolves it through
   .learn-contain-search-input — but it must not be focusable or hold a caret.
   width:0 plus visibility:hidden does both; display:none would drop it out of
   that find(). */
.nlp-shell .p-search:not(.is-open) .learn-search-input {
  width: 0;
  padding: 0;
  visibility: hidden;
}
/* 20px matches the cart glyph beside it; the inline pill puts it back to 17. */
.nlp-shell .p-search:not(.is-open) .learn-search-icon .material-icons {
  font-size: 20px;
}

/* ---- search: open over the row ----------------------------------------------
   Out of flow, pinned to the button's right edge, growing leftwards across the
   nav labels — the only direction with room, and it leaves the cart, language
   pill and profile chip to the right of it untouched. 340px fits the placeholder
   and a real query at 14px; the min() keeps it inside the narrowest row this
   state runs on. 260px of subtrahend is the cluster to its right plus the row's
   padding, so the field never reaches under the cart button. */
.nlp-shell .p-search.is-open .p-search-field {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 20;
  width: min(340px, calc(100vw - 260px));
  height: 40px;
  justify-content: flex-start;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid var(--nlp-sky-line);
  border-radius: 999px;
  background: var(--nlp-white);
  box-shadow: 0 6px 20px rgba(16, 40, 52, .12);
  cursor: default;
}
.nlp-shell .p-search.is-open .learn-search-input {
  width: 100%;
  visibility: visible;
}
/* The results panel follows the FIELD's right edge. Left-aligned it would hang
   off a 40px anchor and sit under the nav instead of under the field. */
.nlp-shell .p-search.is-open .learn-search-items {
  left: auto;
  right: 0;
  width: min(340px, calc(100vw - 260px));
  min-width: 0;
}
.nlp-shell .p-search .learn-search-icon {
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nlp-text-soft);
  cursor: pointer;
  flex: 0 0 auto;
}
.nlp-shell .p-search .learn-search-icon .material-icons {
  font-size: 17px;
  line-height: 1;
}
.nlp-shell .p-search .learn-search-input {
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  width: 100%;
  /* An <input> defaults to a ~20-character intrinsic minimum. The inline pill no
     longer shrinks below 230px so it does not need this any more, but the open
     field's min() can still land under that minimum on a 992px row. */
  min-width: 0;
  height: auto;
  padding: 0;
  font-family: inherit;
  /* 14px, half a step under the nav labels. It was set here because the pill
     used to be the control that gave when the row ran out of room and
     "Search any topic" stopped fitting at 14.5px; the pill is fixed-width now,
     and 14px is kept because it is the size the row was tuned around. */
  font-size: 14px;
  color: var(--nlp-ink);
}
.nlp-shell .p-search .learn-search-input::placeholder {
  color: #9AABB1;
}
/* The AJAX result panel hangs off the pill rather than the old input group. */
.nlp-shell .p-search .learn-search-items {
  top: calc(100% + 8px);
  left: 0;
  min-width: 320px;
  border: 1px solid var(--nlp-line);
  border-radius: 14px;
  padding: 8px 14px;
}

/* ---- cart ---- */
.nlp-shell .h-right > li > a.cart-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--nlp-text-soft);
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: background .15s ease;
}
.nlp-shell .h-right > li > a.cart-btn:hover,
.nlp-shell .h-right > li > a.cart-btn:focus {
  background: var(--nlp-sky-tint);
  color: var(--nlp-ink);
}
.nlp-shell .cart-btn .contain-bucket {
  border: 0;
  margin: 0;
  width: auto;
  height: auto;
  display: block;
}
.nlp-shell .cart-btn .contain-bucket img {
  width: 20px;
  height: 20px;
  display: block;
}
.nlp-shell .cart-btn .bucket-notification {
  top: -7px;
  right: -7px;
  width: auto;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--nlp-gold);
  color: #4A3A06;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
}

/* ---- language + currency pill ---- */
.nlp-shell .learn-header-language {
  margin: 0;
}
.nlp-shell .h-right > li > a.learn-lang-currency-trigger {
  gap: 6px;
  padding: 8px 11px;
  border: 1px solid var(--nlp-line);
  border-radius: 999px;
  background: var(--nlp-mist);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.nlp-shell .h-right > li > a.learn-lang-currency-trigger:hover,
.nlp-shell .h-right > li > a.learn-lang-currency-trigger:focus {
  background: var(--nlp-sky-tint);
  border-color: var(--nlp-sky-line);
}
.nlp-shell .learn-lang-currency-trigger .learn-lang-currency-label {
  font-size: 14px;
}
.nlp-shell .learn-lang-currency-trigger .learn-lang-currency-chevron {
  font-size: 17px;
  color: var(--nlp-text-soft);
}

/* ---- signed-in profile chip ---- */
/* The chip is the cluster's elastic control, and it is the only one that can be:
   the search field is fixed, and the cart and language pills are already at
   min-content. A flex item will not shrink past its content unless it is told
   to, hence min-width:0 here and on the wrap, with the ellipsis below doing the
   visible part. Before this, a long name pushed the row over budget and the
   search field absorbed all of it. */
.nlp-shell .h-right > li.h-user {
  min-width: 0;
}
.nlp-shell .h-right > li.h-user > a.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 9px 5px 5px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s ease;
  min-width: 0;
  max-width: 100%;
}
.nlp-shell .h-right > li.h-user > a.dropdown-toggle:hover,
.nlp-shell .h-right > li.h-user > a.dropdown-toggle:focus,
.nlp-shell .h-right > li.h-user.open > a.dropdown-toggle {
  background: var(--nlp-sky-tint);
}
.nlp-shell .h-user .avatar_img,
.nlp-shell .h-user .avatar_default {
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  font-size: 32px;
  line-height: 32px;
  color: var(--nlp-text-soft);
  object-fit: cover;
}
.nlp-shell .h-user .learn-header-user-name-wrap {
  margin: 0;
  max-width: 104px;
  /* 104px is the cap, 0 is the floor: between them the wrap takes whatever the
     row has left once the search field, cart and language pill are served. */
  min-width: 0;
  text-align: left;
}
/* One line, truncated — the name is the row's give. Without this it sets the
   chip's min-content width and the shortfall lands on the search field instead. */
.nlp-shell .h-user .learn-header-user-name {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--nlp-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Both lines stay on one line each — "See profile" breaking in two made the
   header taller than the rest of the row. */
.nlp-shell .h-user .learn-header-user-role {
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--nlp-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- sign-in button ---- */
/* Own class rather than .btn.btn-primary — the theme owns those two names and
   this is the one element in the header that has to read as the CTA. */
.nlp-shell .h-right > li > a.nlp-signin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--nlp-sky);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease;
}
/* Hover paints through background-image, not background-color, on purpose.
   Three legacy sheets dress .navbar-top-links > li > a:hover with an important
   background-color — front.css #fcfcfc, nifty.css #25476a, type-full theme #fff
   — and no specificity outranks !important, so the white label sat on a #fcfcfc
   pill and the button read as blank on hover. The class stays on the <ul>
   because the signed-in profile dropdown takes all of its .head-list styling
   from those same sheets. A flat gradient is a background-image, which those
   rules never set, and it paints over whatever colour they win. */
.nlp-shell .h-right > li > a.nlp-signin-btn:hover,
.nlp-shell .h-right > li > a.nlp-signin-btn:focus {
  background-image: linear-gradient(var(--nlp-sky-deep), var(--nlp-sky-deep));
  color: #fff;
}

/* ---- mobile hamburger ---- */
.nlp-shell .learn-mobile-menu {
  margin-left: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  cursor: pointer;
}
.nlp-shell .learn-mobile-menu:hover {
  background: var(--nlp-sky-tint);
}

/* ---- mobile drawer: make it a VIEWPORT panel, not a document-tall one ----
   The drawer opened looking scrolled: the close button, the search field and the
   first three nav items were cut off above the top of the screen, the visible
   list started partway down it, and a white void ran below the last item.
   Nothing was scrolled — every scrollTop in the chain measured 0.

   nifty.css gives #mainnav-container `position: absolute; top: 0; bottom: 0;
   min-height: 100%` (front.css only retunes top from 20px to 0), and #container
   is `position: relative`, so BOTH of those percentages resolve against a box as
   tall as the whole document. Measured on this page at 375×667 scrolled to 284:
   the drawer was 18478px tall with its top edge 284px ABOVE the viewport, and
   #mainnav-menu sat at -195..337 — the missing 195px is exactly what the visitor
   could not see. Open it anywhere below the fold and you get a slice of a
   document-tall panel: the tail of the list, then 18000px of white.

   Nifty's own answer is the .affix/.affix-top pair, but those rules are all
   gated on `#container.mainnav-fixed`, which this layout never sets — so the
   drawer has always been anchored to the document here.

   `fixed` re-resolves top/bottom AND the percentage heights against the
   viewport, which fixes the anchor and the height together: the drawer is one
   screen tall, #mainnav / #mainnav-menu-wrap / .nano inherit that through their
   existing height:100%, and .nano-content (already `position: absolute` inset 0
   with `overflow: scroll`) becomes a real scroller for a list too long to fit.
   min-height has to go with it — 100% of the viewport is what `bottom: 0`
   already gives, and leaving it would keep the old figure alive on any browser
   resolving it against the document.

   Selector is (1,1,0), one class deeper than nifty's and front.css's bare
   #mainnav-container, so it wins on specificity without an !important. The
   drawer is `display: none !important` above 992px in front.css, so this only
   ever applies on phones and tablets. The scrim (#mainnav-container:after) was
   already position: fixed and is unaffected. */
.nlp-shell #mainnav-container {
  position: fixed;
  min-height: 0;
}
/* Keep a flick at the end of the list from handing the scroll to the page
   underneath the scrim, which reads as the drawer dragging the page with it. */
.nlp-shell #mainnav-container .nano > .nano-content {
  overscroll-behavior: contain;
}

/* ============ category rail ============ */
/* Kept on the .tabs / .newcategory-tabs markup so the layout's overflow
   adapter (which measures each li and folds the remainder into "Others")
   still runs. Only the skin changes: v3's quiet 13px labels with an
   underline on hover instead of the theme's 15px dark tabs. */
.nlp-shell .nlp-cats {
  padding: 0;
  background: var(--nlp-white);
  border-bottom: 1px solid var(--nlp-line);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.nlp-shell .nlp-cats .newcategory-tabs {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 22px;
}
.nlp-shell .nlp-cats .tabs .-primary {
  gap: 4px;
  align-items: stretch;
}
.nlp-shell .nlp-cats .tabs .-primary > li {
  padding: 0;
}
.nlp-shell .nlp-cats .tabs .-primary > li > a,
.nlp-shell .nlp-cats .tabs .-primary > li > button {
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--nlp-text-soft);
  border-bottom: 2.5px solid transparent;
  text-align: center;
  text-decoration: none;
}
.nlp-shell .nlp-cats .tabs .-primary > li:hover > a,
.nlp-shell .nlp-cats .tabs .-primary > li:hover > button,
.nlp-shell .nlp-cats .tabs .-primary > li.active > a,
.nlp-shell .nlp-cats .tabs .-primary > li.active > button {
  color: var(--nlp-ink);
  border-bottom-color: var(--nlp-sky-line);
}
.nlp-shell .nlp-cats .tabs .-primary > li.active > a,
.nlp-shell .nlp-cats .tabs .-primary > li.active > button {
  border-bottom-color: var(--nlp-sky);
}
/* "Others" overflow panel */
.nlp-shell .nlp-cats .tabs .-secondary {
  border: 1px solid var(--nlp-line);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 3px 6px rgba(15, 80, 95, .05), 0 18px 40px -14px rgba(15, 80, 95, .16);
  overflow: hidden;
}
.nlp-shell .nlp-cats .tabs .-secondary li {
  border-top: 0;
}
.nlp-shell .nlp-cats .tabs .-secondary a {
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--nlp-text-soft);
  text-align: left;
}
.nlp-shell .nlp-cats .tabs .-secondary a:hover {
  background: var(--nlp-sky-tint);
  color: var(--nlp-ink);
}

/* ============ footer ============ */
/* Two rows inside one #front-footer: .nlp-f-top carries the brand mark, the
   newsletter form and the contact block, .nlp-f-bottom the eight links, the
   accreditation badges and the copyright. The id is kept (front.css and the
   print rule in legal_v3.css both address it), so the container rules are
   written .nlp-shell #front-footer to outrank front.css's own #front-footer. */
/* Flush against the page, separated by the border alone: the band has its own
   background and the 94 views above it end on every colour there is, so any
   top margin reads as a stray white stripe on the ones that do not end white. */
.nlp-shell #front-footer {
  padding: 0;
  margin-top: 0;
  border-top: 1px solid var(--nlp-line);
  background: var(--nlp-mist);
}
.nlp-shell #front-footer .nlp-f-in {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 30px;
}
/* The layout leaves an empty bordered strip between the page and the footer —
   a leftover link row. It drew a second rule right above the footer's own
   border-top, so the v3 shell folds it away. */
.nlp-shell .usercontent_group + .link-list-group {
  display: none;
}

/* -- top row -- */
.nlp-shell #front-footer .nlp-f-top {
  display: flex;
  align-items: flex-start;
  gap: 44px;
  padding: 34px 0 30px;
}
.nlp-shell #front-footer a.nlp-f-wm {
  flex: 0 0 auto;
  display: block;
  line-height: 1;
}
.nlp-shell #front-footer a.nlp-f-wm img {
  height: 25px;
  width: auto;
}
.nlp-shell #front-footer .nlp-f-news {
  flex: 1 1 320px;
  min-width: 0;
}
.nlp-shell #front-footer .nlp-f-form {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* front.css styles .form-control globally; (0,3,1) here clears its border,
   shadow and square corners without touching any other field on the page. */
.nlp-shell #front-footer .nlp-f-form input.form-control {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 290px;
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--nlp-line);
  border-radius: 999px;
  background: var(--nlp-white);
  box-shadow: none;
  font-size: 13.5px;
  color: var(--nlp-ink);
}
.nlp-shell #front-footer .nlp-f-form input.form-control:focus {
  border-color: var(--nlp-sky);
  box-shadow: 0 0 0 3px var(--nlp-sky-tint);
}
.nlp-shell #front-footer .nlp-f-form .btn-layout-subscribe {
  flex: 0 0 auto;
  height: 42px;
  margin: 0;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--nlp-sky);
  box-shadow: none;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--nlp-white);
  transition: background .15s ease;
}
.nlp-shell #front-footer .nlp-f-form .btn-layout-subscribe:hover,
.nlp-shell #front-footer .nlp-f-form .btn-layout-subscribe:focus {
  background: var(--nlp-sky-deep);
  color: var(--nlp-white);
}
.nlp-shell #front-footer .nlp-f-note {
  margin: 11px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--nlp-text-soft);
}
.nlp-shell #front-footer .nlp-f-contact {
  flex: 1 1 380px;
  min-width: 0;
  padding: 0;
}
.nlp-shell #front-footer .nlp-f-heading {
  margin: 0 0 7px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--nlp-ink);
}
.nlp-shell #front-footer .nlp-f-copy {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--nlp-text-soft);
}
.nlp-shell #front-footer .nlp-f-copy .front-footer-contact-link {
  color: var(--nlp-sky-deep);
  font-weight: 600;
  text-decoration: none;
}
.nlp-shell #front-footer .nlp-f-copy .front-footer-contact-link:hover,
.nlp-shell #front-footer .nlp-f-copy .front-footer-contact-link:focus {
  color: var(--nlp-sky-deep);
  text-decoration: underline;
}
.nlp-shell #front-footer .nlp-f-social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.nlp-shell #front-footer .nlp-f-social > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--nlp-line);
  border-radius: 50%;
  background: var(--nlp-white);
  transition: border-color .15s ease, background .15s ease;
}
.nlp-shell #front-footer .nlp-f-social > a:hover {
  border-color: var(--nlp-sky-line);
  background: var(--nlp-sky-tint);
}
.nlp-shell #front-footer .nlp-f-social img {
  height: 18px;
  width: 18px;
  opacity: .65;
}
.nlp-shell #front-footer .nlp-f-social > a:hover img {
  opacity: 1;
}

/* -- bottom row: the compact link / badge / copyright strip -- */
/* Wraps at every width, not just the narrow ones: eight link labels in German
   or Portuguese are far wider than in English, and the row has to be able to
   break rather than squeeze the badges and the copyright out of the band. */
.nlp-shell #front-footer .nlp-f-bottom {
  display: flex;
  align-items: center;
  gap: 14px 24px;
  flex-wrap: wrap;
  padding: 16px 0 22px;
  border-top: 1px solid var(--nlp-line);
}
.nlp-shell #front-footer .nlp-f-links {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  min-width: 0;
}
.nlp-shell #front-footer .nlp-f-links > a {
  font-size: 13px;
  color: var(--nlp-text-soft);
  text-decoration: none;
  white-space: nowrap;
}
.nlp-shell #front-footer .nlp-f-links > a:hover,
.nlp-shell #front-footer .nlp-f-links > a:focus {
  color: var(--nlp-ink);
}
.nlp-shell #front-footer .nlp-f-badges {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.nlp-shell #front-footer .nlp-f-badges img {
  height: 30px;
  width: auto;
  opacity: .75;
}
.nlp-shell #front-footer .nlp-f-fine {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  font-size: 12px;
  color: var(--nlp-text-soft);
  white-space: nowrap;
}

/* ============ responsive ============ */

/* ---- the inline search pill's one home -------------------------------------
   Everything narrower than this gets the icon button, which is why this is a
   min-width query and the only one in the file.

   VIEWPORT WIDTH IS THE WHOLE RULE (user's call, 2026-09-02): at 1300px and up
   the field is shown in full, below it the row gets the 40px button. It used to
   be width AND a runtime measurement — lms/js/header_v3.js claimed the pill here
   optimistically and revoked it with .is-compact whenever the field it measured
   landed under 200px. That measurement is what made live and local disagree on
   the same page at the same width: it depends on which faces have loaded at the
   instant it runs (Material Icons unloaded renders "account_circle" and
   "expand_more" as literal words, which measured the same 1872px signed-in row
   at 139px before the icon font landed and 208px after), so a signed-in visitor
   on a wide monitor got the button on live and the pill locally. Nothing in the
   JS adds .is-compact any more; the class is still honoured here so the button
   state stays reachable from one place.

   1300px rather than the 1320px rail: the rail is where .h-in stops growing, so
   above it the row is no roomier and below it the pill is what pays. Now that
   the pill cannot shrink (see the flex below) the shortfall comes out of the
   profile name instead, which ellipsises, so the field is the same width at
   1300px as at 4K — that is the point of the fixed width. */
@media (min-width: 1300px) {
  /* 0 0 auto, not 0 1 auto: the pill is no longer the row's shock absorber. A
     long profile name used to shrink it — the reported "it collapses when the
     user name is long" — because the chip's name wrap was the one thing in the
     cluster that would not give. The chip gives now (min-width:0 + ellipsis on
     .learn-header-user-name), so the field keeps its 230px and the name loses
     its last characters instead. */
  .nlp-shell .p-search:not(.is-compact) {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    min-width: 0;
  }
  .nlp-shell .p-search:not(.is-compact) .p-search-field {
    justify-content: flex-start;
    gap: 9px;
    width: 230px;
    height: auto;
    max-width: 100%;
    min-width: 0;
    padding: 9px 16px;
    border: 1px solid var(--nlp-line);
    border-radius: 999px;
    background: var(--nlp-mist);
    cursor: text;
  }
  /* The pill is a field, not a button: it must not light up on hover, only when
     something is actually typing in it. */
  .nlp-shell .p-search:not(.is-compact) .p-search-field:hover {
    background: var(--nlp-mist);
  }
  .nlp-shell .p-search:not(.is-compact) .p-search-field:focus-within {
    border-color: var(--nlp-sky-line);
    background: var(--nlp-white);
  }
  .nlp-shell .p-search:not(.is-compact) .learn-search-input {
    width: 100%;
    padding: 0;
    visibility: visible;
  }
  /* Two :not()s to reach (0,5,0). The collapsed rule that sets 20px carries
     :not(.is-open) plus .learn-search-icon plus .material-icons and sits earlier
     in the file, so a (0,4,0) selector here would lose to it and the pill would
     keep the button's larger glyph. */
  .nlp-shell .p-search:not(.is-compact):not(.is-open) .learn-search-icon .material-icons {
    font-size: 17px;
  }
  .nlp-shell .p-search:not(.is-compact) .learn-search-items {
    left: 0;
    right: auto;
    width: 100%;
    min-width: 320px;
  }
}

/* Below 1080px the desktop nav goes; the layout's own .visible-lg/.visible-md
   switches already hand the links to the Nifty drawer, so this only closes the
   gap between Bootstrap 3's 992px md breakpoint and the prototype's 1080px. */
/* The pinned bar is budgeted against viewport HEIGHT, and the common widths map
   onto it closely enough to drive it from width alone. Measured resting → stuck:
     ≥1200px  1920×1080, 1536×864, 1440×900, 1366×768 — 120 → 104
     992–1199 1280×800, 1024×768 (measured at 1008)   — 118 → ~103
     641–991  tablets in portrait (measured at 820)   — 111 → 100
     ≤640px   phones (measured at 390, line wraps)    — 130 → 109
   768px is the height that decides the desktop end: 120px is 16% of it, and that
   is the most common desktop screen there is. The phone end is set by the wrap —
   see the note in that breakpoint. */
@media (max-width: 1199px) {
  .nlp-shell .nlp-promo {
    padding: 12px 16px;
  }
  .nlp-shell .nlp-promo .learn-gift-banner,
  .nlp-shell .nlp-promo .black-friday-banner {
    font-size: 16px;
  }
  .nlp-shell .nlp-topbar.is-stuck .nlp-promo {
    padding: 7px 16px;
  }
  .nlp-shell .nlp-topbar.is-stuck .nlp-promo .learn-gift-banner,
  .nlp-shell .nlp-topbar.is-stuck .nlp-promo .black-friday-banner {
    font-size: 14.5px;
  }
  /* This band was over its width before the search button was ever put in it.
     Measured at a 993px viewport with .visible-lg still hiding the pill: the
     wordmark ended at 166, the nav at 701 and the sign-in button ran to 1029 —
     36px past the right edge, cut off by #container's overflow:clip rather than
     scrolling, so it read as a button with its end sliced off. The row needed
     1029px to hold what it already had, and the search button adds 46 more.

     The 82px comes from three places that can give it up without dropping a
     control: the row's own side padding (30→20, +20), the nav gap and labels
     (16→13 and 13.5→13, +~27), and the language pill's NAME (+~60, see the
     .learn-lang-currency-lang rule below). Together ~107px against 82 needed,
     which leaves the row inside its padding at 992 with room to spare. */
  .nlp-shell .p-header .h-in {
    padding: 13px 20px;
    gap: 16px;
  }
  /* 13px and a 13px gap: 992–1199px is the narrowest row that still shows the
     full nav, and the labels are what has to give there. */
  .nlp-shell .p-nav {
    gap: 13px;
    font-size: 13px;
  }
  /* The flag already carries the language; the currency code cannot go, because
     the pill is the only place the site says which currency its prices are in.
     Hiding the name is worth ~60px of the 82 this row was short. */
  .nlp-shell .learn-lang-currency-label .learn-lang-currency-lang {
    display: none;
  }
  .nlp-shell .h-right > li > a.learn-lang-currency-trigger {
    padding: 8px 9px;
  }
  /* 768px is the one width where this footer stops laying things out side by
     side — the same single break the author page uses. Above it the top row
     stays multi-column, so here the three columns only tighten their gap and
     gain the ability to wrap; they are not sent to their own lines. */
  .nlp-shell #front-footer .nlp-f-top {
    gap: 28px;
    flex-wrap: wrap;
  }
}

/* ---- the profile chip keeps its name as far down as it fits -----------------
   The name wrap used to go at 1199px, which is 140px of viewport earlier than it
   needs to: measured with the full chip forced on, the row has 16px of slack at
   1101px and 3px at 1061px, and only goes negative below that (-65px at 993).
   So avatar + name + "See profile" now survives to 1060px, and 992–1059px — a
   68px sliver before the drawer takes the row over at 991 — is the one band that
   still falls back to the avatar alone. Nothing else in the row was shortened to
   buy that; the 1199px block above had already freed enough.
   Below 992px this rule is moot: #dropdown-user carries .visible-lg .visible-md,
   so the chip is not in the row at all. */
@media (max-width: 1059px) {
  .nlp-shell .h-user .learn-header-user-name-wrap {
    display: none;
  }
}

@media (max-width: 991px) {
  .nlp-shell .nlp-promo {
    padding: 11px 14px;
  }
  .nlp-shell .nlp-promo .learn-gift-banner,
  .nlp-shell .nlp-promo .black-friday-banner {
    font-size: 15.5px;
  }
  .nlp-shell .nlp-topbar.is-stuck .nlp-promo {
    padding: 7px 14px;
  }
  .nlp-shell .nlp-topbar.is-stuck .nlp-promo .learn-gift-banner,
  .nlp-shell .nlp-topbar.is-stuck .nlp-promo .black-friday-banner {
    font-size: 14px;
  }
  .nlp-shell .p-header .h-in {
    padding: 11px 16px;
    gap: 12px;
  }
  .nlp-shell .p-search {
    display: none;
  }
  .nlp-shell .wordmark img {
    height: 27px;
  }
  /* Tablet width: the brand mark takes the first line on its own and the two
     text columns — newsletter and contact — share the second. Two columns is
     still multi-column, which is what this side of 768px owes; sending them
     280px apiece here is what keeps the subscribe field and the contact
     sentence readable instead of squeezing three columns into 730px.
     The bottom strip stacks: links, then badges and copyright on one line, so
     nothing has to shrink below its legible size. */
  .nlp-shell #front-footer .nlp-f-in {
    padding: 0 20px;
  }
  .nlp-shell #front-footer .nlp-f-top {
    padding: 26px 0 24px;
  }
  .nlp-shell #front-footer a.nlp-f-wm {
    flex-basis: 100%;
  }
  .nlp-shell #front-footer .nlp-f-news,
  .nlp-shell #front-footer .nlp-f-contact {
    flex: 1 1 260px;
  }
  .nlp-shell #front-footer .nlp-f-bottom {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
  }
  .nlp-shell #front-footer .nlp-f-links {
    flex-basis: 100%;
    gap: 14px 20px;
  }
  .nlp-shell #front-footer .nlp-f-fine {
    white-space: normal;
  }
}
/* Phone: one column per row, every one of them centred — the author page's
   single break, applied to the footer. Each block that was a flex ROW above
   this width has to be told again where to line its children up: the column
   direction on the two wrappers only stacks them, it does not centre the
   subscribe field, the social circles, the link list or the badges, and
   .nlp-f-fine's `margin-left: auto` would still shove the copyright to the
   right edge. The flex-basis values set at 991px are dropped rather than
   overridden with a width: in a column container a basis is a HEIGHT. */
@media (max-width: 768px) {
  .nlp-shell #front-footer .nlp-f-top {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 30px 0 26px;
    text-align: center;
  }
  .nlp-shell #front-footer a.nlp-f-wm,
  .nlp-shell #front-footer .nlp-f-news,
  .nlp-shell #front-footer .nlp-f-contact {
    flex: 0 0 auto;
    width: 100%;
  }
  .nlp-shell #front-footer a.nlp-f-wm img {
    margin: 0 auto;
  }
  .nlp-shell #front-footer .nlp-f-form {
    justify-content: center;
  }
  .nlp-shell #front-footer .nlp-f-social {
    justify-content: center;
  }
  .nlp-shell #front-footer .nlp-f-bottom {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 18px 0 26px;
    text-align: center;
  }
  .nlp-shell #front-footer .nlp-f-links {
    flex: 0 0 auto;
    justify-content: center;
    gap: 12px 18px;
  }
  .nlp-shell #front-footer .nlp-f-badges {
    justify-content: center;
  }
  .nlp-shell #front-footer .nlp-f-fine {
    margin: 0;
  }
}
@media (max-width: 640px) {
  /* The offer is ~62 characters, so on a phone it is two lines at any size a
     reader would thank us for — one line is not reachable, not even at 11px.
     Two lines means LEADING is the lever here, not type size: 1.5 spends 16px
     of pure air on a strip that is pinned, where the desktop spends 8. */
  .nlp-shell .nlp-promo {
    padding: 9px 12px;
    line-height: 1.38;
  }
  .nlp-shell .nlp-promo .learn-gift-banner,
  .nlp-shell .nlp-promo .black-friday-banner {
    font-size: 15px;
  }
  .nlp-shell .nlp-promo .learn-color-gift-banner {
    font-size: 13px;
    padding: 2px 9px;
  }
  /* Stuck: 13.5px at 1.22 with 5px of padding puts the strip at 46px measured at
     390px, so the pinned chrome is 109px — 13% of a 844px phone, down from 130,
     and still a size the offer reads at. Everything the desktop stuck state
     changes has to be restated here: those rules are one class deeper than this
     breakpoint's and would otherwise win on specificity. */
  .nlp-shell .nlp-topbar.is-stuck .nlp-promo {
    padding: 5px 12px;
    line-height: 1.22;
  }
  .nlp-shell .nlp-topbar.is-stuck .nlp-promo .learn-gift-banner,
  .nlp-shell .nlp-topbar.is-stuck .nlp-promo .black-friday-banner {
    font-size: 13.5px;
  }
  .nlp-shell .nlp-topbar.is-stuck .nlp-promo .learn-color-gift-banner {
    font-size: 12px;
    padding: 1px 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* Selectors mirror the (0,4,2) shape used above, or the transitions set
     there would outrank this and keep animating. */
  .nlp-shell .nlp-topbar,
  .nlp-shell .nlp-promo,
  .nlp-shell .nlp-promo .learn-gift-banner,
  .nlp-shell .nlp-promo .black-friday-banner,
  .nlp-shell .nlp-promo .learn-color-gift-banner,
  .nlp-shell .h-right > li > a.nlp-signin-btn,
  .nlp-shell .h-right > li > a.cart-btn,
  .nlp-shell .h-right > li > a.learn-lang-currency-trigger,
  .nlp-shell .h-right > li.h-user > a.dropdown-toggle,
  .nlp-shell #front-footer .nlp-f-form .btn-layout-subscribe,
  .nlp-shell #front-footer .nlp-f-social > a {
    transition: none;
  }
}