/*
 * Sleepbetter.Baby v3.6.11
 * 1. Login / Sign Up stay visible in the header at every width.
 * 2. Account shortcuts move to the top of the menu drawer.
 * 3. Wordmark tagline refresh and gentle design polish.
 */

/* ------------------------------------------------------------------ */
/* Header: account links are part of the main screen, not the drawer. */
/* ------------------------------------------------------------------ */

.sbb-theme-v3611 .sbb-header-library-links {
  gap: .5rem;
}

/* Login: quiet outlined pill. */
.sbb-theme-v3611 .sbb-header-action--login {
  min-height: 44px;
  flex-direction: row;
  gap: .42rem;
  padding: 0 1.05rem 0 .85rem;
  border: 1px solid rgba(111, 82, 66, .3);
  border-radius: 999px;
  background: rgba(255, 253, 249, .72);
  font-size: .78rem;
  font-weight: 680;
  letter-spacing: .01em;
  box-shadow: 0 8px 22px rgba(75, 53, 42, .06);
}

.sbb-theme-v3611 .sbb-header-action--login:hover {
  border-color: rgba(111, 82, 66, .52);
  background: #fffdf9;
}

.sbb-theme-v3611 .sbb-header-action--login .sbb-header-svg {
  width: 19px;
  height: 19px;
}

/* Sign Up: filled brand pill, the clear primary action for new visitors. */
.sbb-theme-v3611 .sbb-header-action--signup {
  min-height: 44px;
  flex-direction: row;
  gap: .4rem;
  padding: 0 1.15rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--sbb-v364-cocoa, #4d3b33);
  color: #fff8f1;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 10px 26px rgba(63, 44, 34, .18);
}

.sbb-theme-v3611 .sbb-header-action--signup:hover {
  background: #5f4a3f;
  color: #fffdf9;
}

.sbb-theme-v3611 .sbb-header-action--signup .sbb-header-svg {
  display: none;
}

/* Transparent hero header (front page before scroll): light-on-photo pills. */
body.sbb-theme-v3611.sbb-has-hero
  .sbb-site-header[data-transparent="true"]:not(.is-scrolled)
  .sbb-header-action--login {
  border-color: rgba(255, 255, 255, .52);
  background: rgba(66, 46, 36, .22);
  color: #fffaf6;
  box-shadow: none;
}

body.sbb-theme-v3611.sbb-has-hero
  .sbb-site-header[data-transparent="true"]:not(.is-scrolled)
  .sbb-header-action--login:hover {
  border-color: rgba(255, 255, 255, .8);
  background: rgba(66, 46, 36, .34);
}

body.sbb-theme-v3611.sbb-has-hero
  .sbb-site-header[data-transparent="true"]:not(.is-scrolled)
  .sbb-header-action--signup {
  background: rgba(255, 250, 244, .96);
  color: #4d3b33;
  box-shadow: 0 12px 30px rgba(31, 21, 16, .22);
}

body.sbb-theme-v3611.sbb-has-hero
  .sbb-site-header[data-transparent="true"]:not(.is-scrolled)
  .sbb-header-action--signup:hover {
  background: #fff;
}

/* Reveal the account links in the compact header (v3.6.4 hid them below
   1761px, which is why Login could only be found inside the menu). */
@media (max-width: 1760px) and (min-width: 641px) {
  .sbb-theme-v3611 .sbb-header-library-links {
    display: inline-flex !important;
  }

  .sbb-theme-v3611 .sbb-header-logo {
    width: min(292px, calc(100% - 372px));
    max-width: min(292px, calc(100% - 372px));
    flex: 0 1 min(292px, calc(100% - 372px));
  }

  /* Logged-in pairs stay compact: icon-first with small labels. */
  .sbb-theme-v3611 .sbb-header-action--library,
  .sbb-theme-v3611 .sbb-header-action--account {
    min-width: 48px;
  }
}

/* The JS fallback compact mode above 1760px behaves the same way. */
.sbb-theme-v3611 .sbb-site-header.sbb-site-header--forced-compact .sbb-header-library-links {
  display: inline-flex !important;
}

.sbb-theme-v3611 .sbb-site-header.sbb-site-header--forced-compact .sbb-header-logo {
  width: min(292px, calc(100% - 372px));
  max-width: min(292px, calc(100% - 372px));
  flex: 0 1 min(292px, calc(100% - 372px));
}

/* v3.0 hides all header action labels below 769px; the Login / Sign Up
   pills need theirs back or they collapse into empty circles. */
@media (max-width: 768px) and (min-width: 641px) {
  .sbb-theme-v3611 .sbb-header-action--login .sbb-header-action-label,
  .sbb-theme-v3611 .sbb-header-action--signup .sbb-header-action-label {
    display: inline;
  }
}

/* Tablet: tighten paddings so logo + Login + Sign Up + Bag + Menu all fit. */
@media (max-width: 900px) and (min-width: 641px) {
  .sbb-theme-v3611 .sbb-header-actions {
    gap: .34rem;
  }

  .sbb-theme-v3611 .sbb-header-action--login {
    padding: 0 .8rem 0 .66rem;
  }

  .sbb-theme-v3611 .sbb-header-action--signup {
    padding: 0 .9rem;
  }

  .sbb-theme-v3611 .sbb-menu-toggle {
    min-width: 0;
    padding: 0 .8rem;
  }

  .sbb-theme-v3611 .sbb-header-logo {
    width: min(240px, calc(100% - 330px));
    max-width: min(240px, calc(100% - 330px));
    flex: 0 1 min(240px, calc(100% - 330px));
  }
}

/* Phones, signed in: keep My Library one tap away as a compact icon. */
@media (max-width: 640px) {
  body.sbb-theme-v3611.logged-in .sbb-header-library-links {
    display: inline-flex !important;
  }

  body.sbb-theme-v3611.logged-in .sbb-header-library-links .sbb-header-action--account {
    display: none;
  }

  body.sbb-theme-v3611.logged-in .sbb-header-library-links .sbb-header-action-label {
    display: none;
  }

  body.sbb-theme-v3611.logged-in .sbb-header-logo {
    width: min(292px, calc(100% - 228px));
    max-width: min(292px, calc(100% - 228px));
    flex: 0 1 min(292px, calc(100% - 228px));
  }
}

/* ------------------------------------------------------------------ */
/* Phones, signed out: a slim Login / Sign Up strip under the header  */
/* row keeps both actions on the main screen without crushing the     */
/* wordmark.                                                          */
/* ------------------------------------------------------------------ */

.sbb-header-account-strip-v3611 {
  display: none;
}

@media (max-width: 640px) {
  body.sbb-guest-v3611 {
    --sbb-header-height: 118px;
  }

  body.sbb-guest-v3611 .sbb-header-account-strip-v3611 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .5rem;
    width: min(calc(100% - 44px), 1600px);
    margin: 0 auto;
    padding: 0 0 .62rem;
  }

  /* The header row keeps its usual height; the strip adds one calm row. */
  body.sbb-guest-v3611 .sbb-header-inner {
    height: 66px;
  }

  .sbb-header-strip-link {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .015em;
    text-decoration: none;
  }

  .sbb-header-strip-link--login {
    border: 1px solid rgba(111, 82, 66, .32);
    background: rgba(255, 253, 249, .8);
    color: var(--sbb-v364-cocoa, #4d3b33);
  }

  .sbb-header-strip-link--signup {
    border: 1px solid transparent;
    background: var(--sbb-v364-cocoa, #4d3b33);
    color: #fff8f1;
    box-shadow: 0 8px 20px rgba(63, 44, 34, .16);
  }

  /* Over the front-page hero the strip switches to light-on-photo pills. */
  body.sbb-theme-v3611.sbb-has-hero
    .sbb-site-header[data-transparent="true"]:not(.is-scrolled)
    .sbb-header-strip-link--login {
    border-color: rgba(255, 255, 255, .55);
    background: rgba(66, 46, 36, .24);
    color: #fffaf6;
  }

  body.sbb-theme-v3611.sbb-has-hero
    .sbb-site-header[data-transparent="true"]:not(.is-scrolled)
    .sbb-header-strip-link--signup {
    background: rgba(255, 250, 244, .96);
    color: #4d3b33;
  }
}

.sbb-header-strip-link:focus-visible {
  outline: 3px solid rgba(86, 110, 124, .48);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Menu drawer: account shortcuts move to the top, above navigation.  */
/* ------------------------------------------------------------------ */

.sbb-theme-v3611 .sbb-mobile-panel__quick--top {
  margin: 0 1.35rem .95rem;
  padding: 0;
  border-top: 0;
  background: transparent;
}

.sbb-theme-v3611 .sbb-mobile-panel__quick--top .sbb-mobile-panel__quick-link {
  border-color: rgba(111, 82, 66, .18);
}

.sbb-theme-v3611 .sbb-mobile-panel__quick-link--login {
  background: var(--sbb-v364-peach, #f6e8df);
  font-weight: 700;
}

.sbb-theme-v3611 .sbb-mobile-panel__quick-link--signup {
  border-color: transparent;
  background: var(--sbb-v364-cocoa, #4d3b33);
  color: #fff8f1;
  font-weight: 700;
}

.sbb-theme-v3611 .sbb-mobile-panel__quick-link--signup:hover {
  background: #5f4a3f;
  color: #fffdf9;
}

.sbb-theme-v3611 .sbb-mobile-panel__quick-link--signup .sbb-mobile-panel__quick-icon {
  border-radius: 9px;
}

/* ------------------------------------------------------------------ */
/* Gentle design polish                                               */
/* ------------------------------------------------------------------ */

/* Consultant cards: calmer radius, softer lift, consistent image crop. */
.sbb-theme-v3611 .sbb-consultant-card {
  overflow: hidden;
  border-radius: 22px;
  transition: box-shadow .2s ease, transform .2s ease;
}

.sbb-theme-v3611 .sbb-consultant-card:hover {
  box-shadow: 0 18px 44px rgba(74, 51, 39, .12);
  transform: translateY(-2px);
}

.sbb-theme-v3611 .sbb-consultant-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Header actions align optically with the new pill shapes. */
.sbb-theme-v3611 .sbb-header-action--cart {
  border-radius: 14px;
}

/* Keep the drawer nav from feeling cramped now that account moved up. */
.sbb-theme-v3611 .sbb-mobile-nav {
  padding-top: .1rem;
}