/* Fan Pajamas — shared header/footer design system (site-wide). Classes are fp-* namespaced
   to avoid colliding with elessi-theme's own rules; only :root variables and body font are
   applied globally. */

:root {
  --fp-navy: #061e4a;
  --fp-navy-800: #12336a;
  --fp-ink: #24334d;
  --fp-red: #f7192d;
  --fp-orange: #ff7919;
  --fp-yellow: #ffc323;
  --fp-surface: #f6f8fd;
  --fp-brand-tint: #e9eff9;
  --fp-line: #d8e1f0;
  --fp-container: 1344px;
  --fp-shadow: 0 24px 58px rgba(6, 30, 74, 0.15);
}

/*
 * The theme's dynamic.css also sets `body` font-family, loads after this file, and isn't even
 * !important — but still wins on a same-specificity tie. Restating at `html body` specificity
 * (rather than adding !important to the plain `body` rule) is the fix; see fp-home.css for the
 * full explanation, which applies here too.
 */
html body, html body button, html body input { font-family: "Manrope", Arial, sans-serif !important; }

.fp-container { width: min(calc(100% - 64px), var(--fp-container)); margin-inline: auto; }

/* ---------------------------------------------------------------------- */
/* Header                                                                  */
/* ---------------------------------------------------------------------- */

.fp-site-header {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid rgba(6, 30, 74, 0.08);
  background: rgba(255, 255, 255, 0.96);
}
.fp-header-inner {
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.fp-brand img { display: block; width: 176px; height: 70px; object-fit: contain; }
/*
 * The nav is now the WordPress "primary" menu (wp_nav_menu -> ul.fp-menu > li > a), not a flat run
 * of <a> in header.php, so every selector reaches through the list. `> li >` keeps these rules off
 * the submenu links and off the 32 links inside the mega panel, which sits inside one of the li's.
 */
.fp-desktop-nav { display: flex; }
.fp-menu {
  display: flex;
  align-items: stretch;
  gap: clamp(24px, 3vw, 42px);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* `flex: 0 0 auto` stops the items being shrunk below their text width — without it every
   two-word label ("Satin Pajamas", "Order Tracking") broke onto a second line. */
.fp-menu > li { position: relative; display: flex; flex: 0 0 auto; align-items: center; }
.fp-menu > li > a {
  position: relative;
  display: block;
  padding: 31px 0 28px;
  color: var(--fp-navy);
  font-size: 0.91rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease;
}
.fp-menu > li > a::after {
  position: absolute;
  right: 0;
  bottom: 22px;
  left: 0;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, var(--fp-red), var(--fp-orange));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}
.fp-menu > li > a:hover { color: var(--fp-red); }
.fp-menu > li > a:hover::after,
.fp-menu > li > a:focus-visible::after,
.fp-menu > li:hover > a::after,
.fp-menu > li:focus-within > a::after { transform: scaleX(1); }
/* WordPress marks the item matching the current URL; show it as active. */
.fp-menu > li.current-menu-item > a,
.fp-menu > li.current-menu-ancestor > a { color: var(--fp-red); }
.fp-menu > li.current-menu-item > a::after,
.fp-menu > li.current-menu-ancestor > a::after { transform: scaleX(1); }

/* ---------- ordinary submenu (About Us > Careers / Contact Us) ---------- */
/* The mega item's own submenu is dropped server-side, so this only ever styles the small ones. */
.fp-menu .sub-menu {
  position: absolute;
  z-index: 800;
  top: 100%;
  left: -14px;
  min-width: 190px;
  margin: 0;
  padding: 8px;
  border: 1px solid #e4eaf5;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(6, 30, 74, .16);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.fp-menu > li:hover > .sub-menu,
.fp-menu > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.fp-menu .sub-menu li { display: block; }
.fp-menu .sub-menu a {
  display: block;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--fp-navy);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.fp-menu .sub-menu a:hover,
.fp-menu .sub-menu a:focus-visible { background: #f4f7fc; color: var(--fp-red); }

.fp-header-actions { display: flex; align-items: center; gap: 10px; }
.fp-header-actions > a, .fp-mobile-menu > summary {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  color: var(--fp-navy);
}
.fp-header-actions > a:hover { background: var(--fp-brand-tint); }
.fp-header-actions svg, .fp-mobile-menu svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.fp-mobile-menu { display: none; }
.fp-mobile-menu summary { list-style: none; cursor: pointer; }
.fp-mobile-menu summary::-webkit-details-marker { display: none; }
.fp-mobile-menu summary span { display: block; width: 21px; height: 2px; margin: 2px auto; background: var(--fp-navy); }
.fp-mobile-menu nav {
  position: absolute;
  top: 50px;
  right: 0;
  display: grid;
  width: min(290px, calc(100vw - 40px));
  padding: 12px;
  border: 1px solid var(--fp-line);
  border-radius: 12px;
  background: white;
  box-shadow: var(--fp-shadow);
  z-index: 60;
}
.fp-mobile-menu nav a {
  padding: 11px 13px;
  border-radius: 7px;
  color: var(--fp-navy);
  font-weight: 700;
  text-decoration: none;
}
.fp-mobile-menu nav a:hover { background: var(--fp-brand-tint); }

@media (max-width: 1120px) {
  .fp-menu { gap: 20px; }
  .fp-menu > li > a { font-size: .82rem; }
}

@media (max-width: 900px) {
  .fp-desktop-nav { display: none; }
  .fp-header-actions > a { display: none; }
  .fp-header-actions > a:last-of-type { display: grid; }
  .fp-mobile-menu { position: relative; display: block; }
}

@media (max-width: 640px) {
  .fp-container { width: min(calc(100% - 34px), var(--fp-container)); }
  .fp-header-inner { min-height: 72px; }
  .fp-brand img { width: 145px; height: 58px; }
}

/* ---------------------------------------------------------------------- */

/* ---------- Header search ------------------------------------------------------------------
 * The field is collapsed until the magnifier is clicked (fp-search.js adds .is-open and focuses
 * it); `:focus-within` is kept alongside so keyboard tabbing still opens it with JS disabled.
 */
.fp-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  /*
   * The theme's style.css gives every <form> `margin: 0 0 0.96552em` (15.45px here). Flexbox
   * centres a child by its MARGIN box, so that phantom margin below the form pushed the search
   * field and its magnifier 7.7px above the cart icon next to it. Zeroing it puts both on the
   * same centre line.
   */
  margin: 0;
}
.fp-search-input {
  width: 0;
  min-width: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--surface, #f6f8fd);
  color: var(--fp-navy, #061e4a);
  font-size: 0.9rem;
  opacity: 0;
  transition: width 220ms ease, padding 220ms ease, opacity 180ms ease, border-color 180ms ease;
}
.fp-search-input::placeholder { color: #8fa0bd; }
.fp-search.is-open .fp-search-input,
.fp-search:focus-within .fp-search-input,
.fp-search-input:not(:placeholder-shown) {
  width: 190px;
  padding: 9px 12px;
  border-color: var(--fp-line, #d8e1f0);
  opacity: 1;
}

/*
 * `!important` is load-bearing here, not laziness: the theme's dynamic.css paints every <button>
 * with a navy fill through a rule that carries !important itself, which is why the magnifier was
 * rendering as a solid navy disc instead of the outline icon the header is built from. Matching
 * !important is the only way a plain class selector can win that.
 */
.fp-search-btn {
  display: grid;
  width: 44px;
  height: 44px;
  flex: none;
  place-items: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--fp-navy, #061e4a) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background 180ms ease;
}
.fp-search-btn:hover,
.fp-search.is-open .fp-search-btn { background: var(--fp-tint, #e9eff9) !important; }
.fp-search-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- live results dropdown ---------- */
.fp-search-results {
  position: absolute;
  z-index: 900;
  top: calc(100% + 10px);
  right: 0;
  width: min(360px, calc(100vw - 32px));
  overflow: hidden;
  padding: 6px;
  border: 1px solid #e4eaf5;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 48px rgba(6, 30, 74, .18);
}
.fp-search-results[hidden] { display: none; }

.fp-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  color: var(--fp-navy, #061e4a);
  text-decoration: none;
}
.fp-search-item:hover,
.fp-search-item:focus-visible { background: #f4f7fc; outline: none; }

.fp-search-thumb {
  display: grid;
  width: 46px;
  height: 46px;
  flex: none;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--fp-tint, #e9eff9);
}
.fp-search-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.fp-search-meta { min-width: 0; }
.fp-search-title {
  display: block;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fp-search-price { display: block; color: #5c6d8c; font-size: 12.5px; }
.fp-search-price del { opacity: .6; }
.fp-search-price ins { text-decoration: none; }

.fp-search-empty { margin: 0; padding: 14px 10px; color: #5c6d8c; font-size: 13px; }

/* Submits the form, so it inherits the theme's button styling unless it is reset like the icon. */
.fp-search-all {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px !important;
  border: 0 !important;
  border-top: 1px solid #eef2f8 !important;
  border-radius: 0 0 9px 9px !important;
  background: transparent !important;
  color: var(--fp-red, #f7192d) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: normal !important;
  text-align: center;
  text-transform: none !important;
  cursor: pointer;
}
.fp-search-all:hover { background: #fdf2f3 !important; }

@media (max-width: 640px) {
  .fp-search.is-open .fp-search-input,
  .fp-search:focus-within .fp-search-input,
  .fp-search-input:not(:placeholder-shown) { width: 130px; }
}

/* ---------- Breadcrumb (feedback 11/08) ----------------------------------------------------
 * Rendered only on Product / Product Category / Post / Post Category (see header.php).
 */
.fp-breadcrumb {
  padding: 14px 0;
  border-bottom: 1px solid var(--line, #d8e1f0);
  background: var(--surface, #f6f8fd);
  font-size: .8rem;
  line-height: 1.5;
}
.fp-breadcrumb a { color: var(--ink, #24334d); text-decoration: none; }
.fp-breadcrumb a:hover { color: var(--red, #f7192d); text-decoration: underline; }
.fp-breadcrumb .last, .fp-breadcrumb .rank-math-breadcrumb .last { color: var(--navy, #061e4a); font-weight: 700; }
.fp-breadcrumb .separator { margin: 0 8px; color: #8c9ab5; }
@media (max-width: 640px) { .fp-breadcrumb { padding: 10px 0; font-size: .74rem; } }