/* Header */
.fame-header-maincon {
  display: flex;
  width: 100%;
  background-color: #0063E3;
  position: relative;
  z-index: 999;
}
.live-edit-frame-loaded .fame-header-maincon {
  z-index: 0;
}
.fame-header-maincon.fame-dashbrd-hder {
  background-color: transparent;
}
.mw-header-sticky-nav {
  margin-bottom: -50px;
}
.fame-header-box {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
/* Dashboard header — full-width wrapper replacing .mw-layout-container.container */
.fame-dashbrd-hder-inner {
  width: 100%;
}
.fame-header-main {
  display: flex;
  width: 100%;
  padding: 0px 30px;
  background-color: #ffffff;
  border-radius: 20px;
}
.fame-ahs-drop-shadow {
  box-shadow: 0px 8px 0px 0px rgba(250, 252, 252, 0.50);
}
.fame-header-main .menu-header-skin-1 {
  display: inline-flex;
  padding: 15px 28px;
  background-color: #121F3E;
  line-height: 1;
  border-radius: 6px;
  gap: 1;
  align-items: center;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -ms-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  position: relative;
}
.fame-header-main .menu-header-skin-1 a {
  text-decoration: none;
  color: #fff;
}

/* ---- Logged out: Login + Register as two separate buttons ----
   skin-1.php adds .is-guest to the wrapper when nobody is signed in, so the
   dark wrapper above no longer draws them as one button. Logged in (My
   Account) and the dashboard's mobile sidebar trigger are unchanged. */
.fame-header-main .menu-header-skin-1.is-guest {
  background-color: transparent;
  padding: 0;
  gap: 10px;
}
.fame-header-main .menu-header-skin-1.is-guest a.fame-auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 1.5px solid transparent;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
/* Login — outlined navy, fills on hover. */
.fame-header-main .menu-header-skin-1.is-guest a.fame-auth-btn--login {
  background-color: #121F3E;
  border-color: #121F3E;
  color: #ffffff;
}
.fame-header-main .menu-header-skin-1.is-guest a.fame-auth-btn--login:hover {
  background-color: #ffffff;
  color: #121F3E;
  border-color: #121F3E;
}
/* Register — solid brand blue. */
.fame-header-main .menu-header-skin-1.is-guest a.fame-auth-btn--register {
  background-color: #0063E3;
  border-color: #0063E3;
  color: #ffffff;
  box-shadow: 0 6px 16px -8px rgba(0, 99, 227, 0.6);
}
.fame-header-main .menu-header-skin-1.is-guest a.fame-auth-btn--register:hover {
  background-color: #0052bd;
  border-color: #0052bd;
  color: #ffffff;
}
.fame-header-main .menu-header-skin-1.is-guest a.fame-auth-btn:focus-visible {
  outline: 2px solid #0063E3;
  outline-offset: 2px;
}
@media (max-width: 991px) {
  .fame-header-main .menu-header-skin-1.is-guest { gap: 8px; }
  .fame-header-main .menu-header-skin-1.is-guest a.fame-auth-btn { padding: 9px 14px; font-size: 13px; }
}
@media (max-width: 400px) {
  .fame-header-main .menu-header-skin-1.is-guest { gap: 6px; }
  .fame-header-main .menu-header-skin-1.is-guest a.fame-auth-btn { padding: 8px 10px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .fame-header-main .menu-header-skin-1.is-guest a.fame-auth-btn { transition: none; }
}
a.fame-myaccount {
  display: inline-flex;
  text-decoration: none;
  color: #333333;
  gap: 6px;
  align-items: center;
  font-size: 16px;
  cursor: pointer;
}

/* My Account dropdown — reveal on hover of the account trigger only */
.fame-myaccount-wrap {
  display: inline-flex;
}
.fame-myaccount-wrap .mw-big-dropdown.dropdown-menu {
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  margin-top: 3px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  z-index: 1050;
}
/* invisible bridge so the menu stays open while the cursor crosses the gap */
.fame-myaccount-wrap .mw-big-dropdown.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.menu-header-mnopt {
  display: flex;
  align-items: center;
  gap: 15px;
}
.dropdown-menu li.nav-item + li.nav-item {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.dropdown-menu li.nav-item a {
  color: #000000;
}
.menu-header-skin-1:hover .mw-big-dropdown.dropdown-menu,
.menu-header-skin-1:focus-within .mw-big-dropdown.dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}
.btn-shopping-cart {
  line-height: normal;
}
a.btn-shopping-cart-link {
  display: inline-flex;
  text-decoration: none;
  gap: 5px;
  position: relative;
  background-color: #0f213c;
  color: #fff;
  padding: 14px;
  border-radius: 6px;
}
a.btn-shopping-cart-link:hover {
    color: #fff;
}
span.js-shopping-cart-quantity {
  position: absolute;
  right: -10px;
  top: -5px;
  background-color: #0f213c;
  width: 20px;
  height: 20px;
  font-size: 11px;
  border-radius: 100%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #fff;
}

/* Footer */
span.fame-footer-mntlt {
  display: flex;
  width: 100%;
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 30px;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  color: #E7E5D8;
}
span.fame-footer-mntlt:before {
  content: '';
  width: 50px;
  background-color: #E7E5D8;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
}
/* TopStrip */
.fame-header-uper-part {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 17px 0;
}
.fame-contact-infocon {
  display: flex;
  gap: 30px;
}
/* The Contact button (phones only, see the 767px block) and its wrapper,
   which adds no box of its own elsewhere. */
.fame-contact-wrap { display: contents; }
.fame-contact-mbtn { display: none; }
.fame-contact-ftinfo-wrp {
  display: flex;
  width: 100%;
  gap: 30px;
  flex-wrap: wrap;
}
.fame-contact-ftinfo {
  display: inline-flex;
  width: 100%;
  align-items: center;
  gap: 15px;
}
.fame-header-socialcon .module-social-links a {
  color: #ffffff;
}
.fame-contact-ftinfo i {
  font-size: 22px;
  display: flex;
}
.fame-contact-ftinfo p,
.fame-contact-ftinfo p a {
  margin: 0;
  color: #ffffff;
}
.fame-contact-ftinfo p a {
  text-decoration: none;
}
.footer-background .fame-contact-ftinfo p {
  margin: 0px;
  color: #6D6E79;
  font-size: 16px;
}
.footer-background .fame-ftnewsletter-form p {
  color: #6D6E79;
  font-size: 16px;
}
.fame-ftnewsletter-form input.form-control {
  display: flex;
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #f0eeee;
  border-radius: 6px;
  height: 50px;
  color: #92969D;
  font-size: 14px;
}
.fame-ftnewsletter-form .form-group button.btn {
  display: inline-flex;
  padding: 12px 30px;
  line-height: 1;
  color: #ffffff !important;
  height: 100%;
  background-color: var(--e-global-color-primary) !important;
  border-radius: 5px;
  border: 1px solid var(--e-global-color-primary) !important;
  font-weight: 500;
  font-size: 18px;
  align-items: center;
}
.fame-ftgogle-abt-inner {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 20px;
}
.fame-footer-logo {
  display: flex;
  width: 100%;
  margin-bottom: 30px;
}
.fame-ftnavmenu .navbar-nav {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px 10px;
}
.fame-ftnavmenu .navbar-nav li a {
  display: flex;
  padding: 0px !important;
  gap: 7px;
  font-size: 14px;
}
.fame-ftnavmenu .navbar-nav li a span {
  color: #6D6E79;
}
.fame-ftnavmenu .navbar-nav li:hover a span {
  color: var(--e-global-color-primary);
}
.fame-ftnavmenu .navbar-nav li a:before {
  content: '';
  width: 10px;
  background-color: #ffffff;
  height: 2px;
  display: inline-flex;
  align-self: center;
  opacity: 0;
  margin-left: -10px;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -ms-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}
.fame-ftnavmenu .navbar-nav li:hover a:before {
  opacity: 1;
  margin-left: 0px;
}
.fame-ftcopyright {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.20);
  padding: 15px 0px 5px 0px;
}
.footer-background .fame-ftcopyright small,
.footer-background .footer-desc-info {
  color: #6D6E79;
  font-size: 16px;
}

/* Dynamic footer colors — driven by the template's "Footer" style picker
   (Microweber --mw-footer-* variables, updated live from the design settings).
   Kept here in the dedicated footer stylesheet instead of the MW design-styles. */
.footer-background {
  background-color: var(--mw-footer-background-color);
}
.footer-background h1,
.footer-background h2,
.footer-background h3,
.footer-background h4,
.footer-background h5,
.footer-background h6,
.footer-background p,
.footer-background span,
.footer-background small,
.footer-background .fame-contact-ftinfo p,
.fame-contact-ftinfo p a,
.footer-background .fame-ftcopyright small,
.footer-background .footer-desc-info,
.fame-contact-ftinfo i {
  color: var(--mw-footer-text-color);
}
/* Footer nav-menu links — dynamic footer link color from the picker.
   Target the <a> and its inner <span> (text lives in the span); the
   :hover primary color keeps its higher specificity and still wins. */
.fame-ftnavmenu .navbar-nav li a,
.fame-ftnavmenu .navbar-nav li a span,
.footer-background a {
  color: var(--mw-footer-link-color);
}


/* SubHeader */
.fame-subheader { width: 100%; padding: 24px 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
.fame-subheader .fame-subheader-inner {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  text-align: center;
}
.fame-subheader-title {
  margin: 0;
  font-style: normal;
  font-weight: 900;
  font-size: 36px;
  line-height: 48px;
  color: #121F3E;
  width: 100%;
}
.fame-subheader-crumbs {
  display: inline-flex;
  border-radius: 100px;
  background-color: var(--fame-blue, #0566E3);
  padding: 5px 15px;
}
.fame-subheader-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.fame-subheader-crumbs li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
}
.fame-subheader-crumbs li:not(:last-child)::after { content: "/"; }
.fame-subheader-crumbs a {
  text-decoration: none;
  color: #ffffff;
}
.fame-subheader-crumbs span[aria-current] { font-weight: 600; }
/* SubHeader End */


@media (max-width: 991px) {
  .fame-header-main {padding: 10px;}
  .fame-header-main .menu-header-skin-1 a.fame-myaccount { text-indent: -99999px; gap: 0; }
  .fame-header-main .menu-header-skin-1 { padding: 8px 10px; }
  a.btn-shopping-cart-link { padding: 6px 10px; }
  a.btn-shopping-cart-link svg { width: 24px; }
  .mw-big-header-logo {width: 50%;}

  /* Dashboard pages only: fame-dashboard-sidebar.js tags this block with
     .is-fame-side-trigger, and tapping it opens the dashboard sidebar drawer.
     Its own account dropdown must stay down so the two don't both appear. */
  .fame-header-main .menu-header-skin-1.is-fame-side-trigger { cursor: pointer; }
  .fame-header-main .menu-header-skin-1.is-fame-side-trigger:hover .mw-big-dropdown.dropdown-menu,
  .fame-header-main .menu-header-skin-1.is-fame-side-trigger:focus-within .mw-big-dropdown.dropdown-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
  }
  .fame-footer-main-row {gap: 35px 20px;}
  .fame-header-uper-part,.fame-contact-infocon {flex-wrap: wrap;}
  .fame-contact-infocon,.fame-header-uper-part {justify-content: center;}
  .fame-contact-infocon {gap: 10px;}
  .fame-contact-ftinfo {width: auto;}
  .fame-subheader-crumbs {text-align: left; border-radius: 10px; padding: 13px 15px;}
}
/* Phones: the top strip in one row — a Contact button on the left (phone and
   email in a tooltip under it) and the social links on the right; then one
   header row with a 150px logo (its inline 270px width needs !important), so
   My Account fits as the full button, icon and text. */
@media (max-width: 767px) {
  .fame-header-uper-part {flex-wrap: nowrap; justify-content: space-between; align-items: center; padding: 8px 0;}
  .fame-contact-wrap {display: block; position: relative;}
  .fame-contact-mbtn {display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 999px; background: transparent; color: #ffffff; font-size: 14px; line-height: 1.2; cursor: pointer;}
  .fame-contact-mbtn i {font-size: 16px; display: flex;}
  .fame-contact-wrap .fame-contact-infocon {display: none; position: absolute; top: calc(100% + 10px); left: 0; z-index: 1000; flex-direction: column; flex-wrap: nowrap; gap: 10px; width: max-content; max-width: calc(100vw - 32px); padding: 12px 14px; background: #ffffff; border-radius: 12px; box-shadow: 0 12px 32px -8px rgba(15, 33, 60, 0.35);}
  .fame-contact-wrap .fame-contact-infocon::before {content: ""; position: absolute; top: -6px; left: 22px; width: 12px; height: 12px; background: #ffffff; transform: rotate(45deg);}
  .fame-contact-wrap.is-open .fame-contact-infocon {display: flex;}
  .fame-contact-wrap .fame-contact-ftinfo {gap: 10px;}
  .fame-contact-wrap .fame-contact-ftinfo i {font-size: 18px; color: #0063E3;}
  .fame-contact-wrap .fame-contact-ftinfo p,
  .fame-contact-wrap .fame-contact-ftinfo p a {color: #121F3E; font-size: 14px; overflow-wrap: anywhere;}
  .fame-header-box {gap: 8px;}
  .fame-header-box .mw-big-header-logo {width: auto; flex: 0 1 150px; min-width: 0;}
  .fame-header-box .mw-big-header-logo .mw-ui-col-x,
  .fame-header-box .mw-big-header-logo img {width: 150px !important; max-width: 100%;}
  .fame-header-box .menu-header-mnopt {gap: 10px;}
  .fame-header-main .menu-header-skin-1 {padding: 8px 14px;}
  .fame-header-main .menu-header-skin-1 a.fame-myaccount {text-indent: 0; gap: 6px; font-size: 14px; white-space: nowrap;}

  /* Sub header with a fixed height and the page pulled up under it (Settings → Sub
     Header, e.g. height 550 / margin-bottom -350): a long title wraps over several
     lines here and ran into the page below. Let the bar grow with its title and keep
     the pulled-up part (--fame-sub-mb, set by subheader.php) clear under it. */
  .fame-subheader[style*="height"] {height: auto !important; padding-bottom: max(24px, calc(24px - var(--fame-sub-mb, 0px))) !important;}
  .fame-subheader-title {margin: 0; font-style: normal; font-weight: 900; font-size: 18px; line-height: 30px; color: #121F3E; width: 100%;}
}
/* ---- Header mini cart (modules/shop/cart/templates/small_modal.php) ---- */
/* The menu hangs from the header's action group (basket + account), right
   edge flush with the group's right edge, so it opens LEFTWARDS under the
   header and its width never depends on where the basket button sits. The
   toggle uses data-display="static", so no Popper transform overrides this. */
.menu-header-mnopt { position: relative; }
.btn-shopping-cart { position: static; }
.mw-big-dropdown-cart.dropdown-menu.shopping-cart {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  margin: 0;
  padding: 0 !important;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px -18px rgba(15, 33, 60, 0.35), 0 4px 16px rgba(15, 33, 60, 0.08);
  overflow: hidden;
  width: 400px;
  min-width: 0;
  max-width: calc(100vw - 40px);
  background: #fff;
}
.fame-mcart { font-family: inherit; color: #0f213c; }
.fame-mcart-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid #edf1f7;
}
.fame-mcart-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.fame-mcart-count {
  font-size: 12px; font-weight: 600; color: #0063E3;
  background: #e8f1ff; border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.fame-mcart-list {
  list-style: none; margin: 0; padding: 6px 8px;
  max-height: min(52vh, 380px); overflow-y: auto; overscroll-behavior: contain;
}
.fame-mcart-item {
  display: grid !important; grid-template-columns: 56px minmax(0, 1fr) 36px; align-items: center; gap: 14px;
  padding: 12px; margin: 0; border-radius: 14px; transition: background .15s ease;
}
/* Nothing inside a row may float or leave the grid flow (theme link / list
   rules and the live-edit chrome would otherwise pull the thumb over the title). */
.fame-mcart-item > * { position: static !important; float: none !important; margin: 0; }
.fame-mcart-item:hover { background: #f5f8fc; }
.fame-mcart-item + .fame-mcart-item { position: relative; }
.fame-mcart-item + .fame-mcart-item::before {
  content: ""; position: absolute; left: 82px; right: 12px; top: 0; height: 1px; background: #edf1f7;
}
.fame-mcart-item:hover + .fame-mcart-item::before { opacity: 0; }
.fame-mcart-thumb {
  width: 56px !important; height: 56px !important; border-radius: 14px; overflow: hidden; flex: none;
  display: flex !important; align-items: center; justify-content: center; padding: 0 !important;
  background: linear-gradient(135deg, #e8f1ff, #dbe8ff); color: #0063E3;
}
.fame-mcart-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fame-mcart-thumb svg { width: 26px !important; height: 26px !important; display: block; }
.fame-mcart-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fame-mcart-name {
  font-size: 14.5px; font-weight: 700; color: #0f213c; text-decoration: none; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fame-mcart-name:hover { color: #0063E3; }
.fame-mcart-meta { font-size: 12.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fame-mcart-price { font-size: 14px; font-weight: 700; color: #0063E3; display: inline-flex; align-items: baseline; gap: 6px; }
.fame-mcart-qty { font-size: 12px; font-weight: 600; color: #64748b; }
.fame-mcart-remove {
  width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: #94a3b8;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  transition: background .15s ease, color .15s ease;
}
.fame-mcart-remove svg { width: 18px; height: 18px; }
.fame-mcart-remove:hover, .fame-mcart-remove:focus-visible { background: #fee2e2; color: #dc2626; outline: none; }
.fame-mcart-foot { padding: 14px 20px 18px; border-top: 1px solid #edf1f7; background: #fafcff; }
.fame-mcart-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.fame-mcart-total span { font-size: 13px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.fame-mcart-total strong { font-size: 20px; font-weight: 800; color: #0f213c; letter-spacing: -0.01em; }
.fame-mcart-checkout {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px; border: 0; border-radius: 12px; cursor: pointer;
  font-size: 15px; font-weight: 700; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #0063E3, #1967D2);
  box-shadow: 0 10px 22px -10px rgba(0, 99, 227, 0.7);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.fame-mcart-checkout svg { width: 18px; height: 18px; transition: transform .15s ease; }
.fame-mcart-checkout:hover { color: #fff; filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgba(0, 99, 227, 0.75); }
.fame-mcart-checkout:hover svg { transform: translateX(3px); }
.fame-mcart-checkout.is-ghost { background: #e8f1ff; color: #0063E3; box-shadow: none; }
.fame-mcart-checkout.is-ghost:hover { background: #dbe8ff; color: #0063E3; }
.fame-mcart-more { display: block; text-align: center; margin-top: 10px; font-size: 13px; font-weight: 600; color: #64748b; text-decoration: none; }
.fame-mcart-more:hover { color: #0063E3; }
.fame-mcart-empty { padding: 30px 24px 26px; text-align: center; }
.fame-mcart-empty-ico {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center; background: #e8f1ff; color: #0063E3;
}
.fame-mcart-empty-ico svg { width: 30px; height: 30px; }
.fame-mcart-empty-text { margin: 0 0 16px; font-size: 14.5px; color: #64748b; }
@media (max-width: 540px) {
  .mw-big-dropdown-cart.dropdown-menu.shopping-cart { width: calc(100vw - 40px); max-width: 400px; }
  .fame-mcart-item { grid-template-columns: 48px minmax(0, 1fr) 32px; gap: 10px; padding: 10px; }
  .fame-mcart-thumb { width: 48px; height: 48px; border-radius: 12px; }
  .fame-mcart-item + .fame-mcart-item::before { left: 68px; }
}

/* ==== Cart popup (#shoppingCartModal) — the header mini cart's design in a dialog.
   Markup: modules/shop/checkout/templates/modal.php + footer_cart.php. States on the
   modal: .is-added (a plan was just added) and .is-leaving (on the way to checkout). ==== */
#shoppingCartModal .fame-cartmodal-dialog { max-width: 460px; position: relative; }
.fame-cartmodal {
  border: 0; border-radius: 20px; overflow: hidden; background: #fff; color: #0f213c;
  box-shadow: 0 30px 80px -24px rgba(15, 33, 60, 0.38);
}
.fame-cartmodal-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 22px 20px 18px 22px;
  background: linear-gradient(135deg, #f3f8ff 0%, #ffffff 72%);
  border-bottom: 1px solid #edf1f7;
}
.fame-cartmodal-badge {
  flex: none; width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: #e8f1ff; color: #0063E3;
}
.fame-cartmodal-badge svg { width: 22px; height: 22px; }
.fame-cartmodal-badge .is-added-icon,
#shoppingCartModal.is-added .fame-cartmodal-badge .is-cart-icon { display: none; }
#shoppingCartModal.is-added .fame-cartmodal-badge .is-added-icon { display: block; }
#shoppingCartModal.is-added .fame-cartmodal-badge {
  background: linear-gradient(135deg, #1fae74, #1e9c6b); color: #fff;
  box-shadow: 0 10px 22px -10px rgba(30, 156, 107, 0.75);
  animation: fameCartPop .45s cubic-bezier(.2, 1.4, .4, 1) both;
}
.fame-cartmodal-heading { flex: 1; min-width: 0; padding-top: 2px; }
.fame-cartmodal-title { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; color: #0f213c; }
.fame-cartmodal-title .is-added-text,
#shoppingCartModal.is-added .fame-cartmodal-title .is-cart-text { display: none; }
#shoppingCartModal.is-added .fame-cartmodal-title .is-added-text { display: inline; }
.fame-cartmodal-sub { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: #64748b; }
.fame-cartmodal-close {
  flex: none; width: 36px; height: 36px; margin: -4px -4px 0 0; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: #94a3b8; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.fame-cartmodal-close svg { width: 18px; height: 18px; }
.fame-cartmodal-close:hover, .fame-cartmodal-close:focus-visible { background: #f1f5f9; color: #0f213c; outline: none; }
/* The dialog's own head replaces the mini cart's "Your Cart" title row. */
.fame-cartmodal .fame-mcart-head { display: none; }
.fame-cartmodal .fame-mcart-list { max-height: min(46vh, 360px); padding: 8px 10px; }
.fame-mcart-more.is-button {
  width: 100%; border: 0; background: transparent; cursor: pointer; font-family: inherit; padding: 4px 0;
}

/* On the way to checkout: a calm hand-over panel over the dialog. */
.fame-cartmodal-leaving {
  position: absolute; inset: 0; z-index: 5;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 28px; text-align: center; border-radius: 20px;
  background: #ffffff; color: #64748b; font-size: 14px;
  box-shadow: 0 30px 80px -24px rgba(15, 33, 60, 0.38);
}
.fame-cartmodal-leaving strong { color: #0f213c; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
#shoppingCartModal.is-leaving .fame-cartmodal-dialog { min-height: 230px; }
#shoppingCartModal.is-leaving .fame-cartmodal-leaving { display: flex; }
.fame-cartmodal-spinner {
  width: 46px; height: 46px; margin-bottom: 10px; border-radius: 50%;
  border: 3px solid #e8f1ff; border-top-color: #0063E3;
  animation: fameCartSpin .8s linear infinite;
}
@keyframes fameCartSpin { to { transform: rotate(360deg); } }
@keyframes fameCartPop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 540px) {
  #shoppingCartModal .fame-cartmodal-dialog { margin: 12px auto; max-width: calc(100vw - 24px); }
  .fame-cartmodal-head { padding: 18px 16px 14px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .fame-cartmodal-spinner, #shoppingCartModal.is-added .fame-cartmodal-badge { animation: none; }
}

/* ---- Admin "Login as user": bar at the bottom (partials/impersonation-bar.php) ---- */
.fame-impersonation-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10050;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px;
  padding: 10px 16px; background: #16203a; color: #fff; font-size: 14px;
  box-shadow: 0 -6px 20px rgba(22, 32, 58, 0.25);
}
.fame-impersonation-bar__text strong { color: #fff; }
.fame-impersonation-bar__email { margin-left: 6px; color: #b9c3d6; }
.fame-impersonation-bar__form { margin: 0; }
.fame-impersonation-bar__btn {
  border: 0; border-radius: 8px; padding: 8px 16px; background: #1877F2; color: #fff;
  font-weight: 700; font-size: 14px; cursor: pointer;
}
.fame-impersonation-bar__btn:hover { background: #1263d2; }
/* Keep page content (and the to-top / WhatsApp buttons) clear of the bar. */
body:has(.fame-impersonation-bar) { padding-bottom: 60px; }
body:has(.fame-impersonation-bar) #to-top { bottom: 76px; }
@media (max-width: 540px) {
  .fame-impersonation-bar { font-size: 13px; }
  .fame-impersonation-bar__email { display: none; }
  body:has(.fame-impersonation-bar) { padding-bottom: 96px; }
}