/* =========================================================
   Best Years - top promo strip
   Position: top-promo
   ========================================================= */

.top-promo-content {
  background: #fff;
  position: relative;
  z-index: 20;
}

.by-header-promo-wrap {
  background: #fff;
  padding: 12px 0 10px;
  border: 0 !important;
  box-shadow: none !important;
}

.by-header-promo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 46px;
  row-gap: 8px;
}

/* Allow promo titles to wrap cleanly and use uppercase titles */
.by-promo-tile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #749acb;
  text-decoration: none;
  line-height: 1.15;

  /* changed: allow wrapping */
  white-space: normal;
}

.by-promo-tile:hover,
.by-promo-tile:focus {
  color: #2f60a0;
  text-decoration: none;
}

.by-promo-img {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.by-promo-img img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  display: block;
}

.by-promo-title {
  display: block;
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  max-width: 150px;
}

/* Tablet */
@media (max-width: 991.98px) {
  .by-header-promo-wrap {
    padding: 10px 0;
  }

  .by-header-promo-grid {
    column-gap: 18px;
    row-gap: 8px;
  }

  .by-promo-img,
  .by-promo-img img {
    width: 40px;
    height: 40px;
  }

  .by-promo-title {
    font-size: 11px;
    max-width: 115px;
  }
}

/* Mobile */
@media (max-width: 575.98px) {
  .by-header-promo-grid {
    justify-content: center;
    column-gap: 10px;
    row-gap: 8px;
  }

  .by-promo-tile {
    width: auto;
    max-width: calc(33.333% - 10px);
    flex: 0 1 calc(33.333% - 10px);
    gap: 6px;
  }

  .by-promo-img,
  .by-promo-img img {
    width: 34px;
    height: 34px;
  }

  .by-promo-title {
    font-size: 10px;
    max-width: 82px;
  }
}

/* Remove separator line around the promo/header transition */
.top-promo-content,
.top-promo-content .container-fluid,
.top-promo-content .container-inner,
.by-header-promo-wrap {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Avoid a visible line between promo strip and sticky header */
.header-content,
.header-content .header-main {
  border-top: 0 !important;
}

/* Optional: remove line above the menu row too */
.mega-menu-container {
  border-top: 0 !important;
}

/* =========================================================
   Best Years - generic VP Prime mega menu image modules
   Works across all top-level menus
   ========================================================= */

@media (min-width: 992px) {

  /* Top-level active / hover colours */
  .mod-megamenu--current.mod-megamenu--active {
    background-color: #2f60a0;
  }

  .mod-megamenu > .mod-megamenu--item:hover {
    background-color: #2f60a0;
  }

  /* Red NEW menu item */
  #mega-menu .mod-megamenu > .mod-megamenu--item:has(> .mod-megamenu--item-anchor.by-menu-new),
  #mega-menu .mod-megamenu > .mod-megamenu--item:has(> .mod-megamenu--item-anchor.by-menu-new):hover {
    background-color: #ff4d4d !important;
  }

  #mega-menu .mod-megamenu--item-anchor.by-menu-new {
    color: #fff !important;
  }

  /*
   * Blue bottom border across every top-level dropdown panel.
   * This replaces the old Helix:
   * .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner
   */
  #mega-menu .mod-megamenu > .mod-megamenu--item > .mod-megamenu--container {
    background: #fff !important;
    border: 0 !important;
    border-bottom: 3px solid #2f60a0 !important;
    box-shadow: none !important;
  }

  /*
   * Hide menu-item headings where that menu item is just a module/image placeholder.
   * This hides "Wholesale Soft Toys", "Bespoke...", "Dinosaur Rattles", etc.
   */
  #mega-menu .mod-megamenu--item.mod-megamenu--group:has(.by-mega-image-grid) > .mod-megamenu--heading,
  #mega-menu .mod-megamenu--item.mod-megamenu--group:has(.by-mega-card-grid) > .mod-megamenu--heading {
    display: none !important;
  }

  /*
   * Flatten nested module dropdown containers.
   * Without this, VP Prime treats image modules like nested dropdowns/flyouts.
   */
  #mega-menu .mod-megamenu--item.mod-megamenu--group:has(.by-mega-image-grid) > .mod-megamenu--container,
  #mega-menu .mod-megamenu--item.mod-megamenu--group:has(.by-mega-card-grid) > .mod-megamenu--container {
    position: static !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #mega-menu .mod-megamenu--item.mod-megamenu--group:has(.by-mega-image-grid) .mod-megamenu--sub,
  #mega-menu .mod-megamenu--item.mod-megamenu--group:has(.by-mega-card-grid) .mod-megamenu--sub {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #mega-menu .mod-megamenu--item.mod-megamenu--group:has(.by-mega-image-grid) .mod-megamenu--module,
  #mega-menu .mod-megamenu--item.mod-megamenu--group:has(.by-mega-card-grid) .mod-megamenu--module,
  #mega-menu .mod-megamenu--item.mod-megamenu--group:has(.by-mega-image-grid) .mod-custom,
  #mega-menu .mod-megamenu--item.mod-megamenu--group:has(.by-mega-card-grid) .mod-custom {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /*
   * Standard image-module card size.
   * Applies to all current and future image modules.
   */
  #mega-menu .by-mega-image-grid {
    display: block !important;
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #mega-menu .by-mega-image-card {
    display: block !important;
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    text-align: center !important;
    color: #2f60a0 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  #mega-menu .by-mega-image-card-img {
    position: relative !important;
    display: block !important;
    width: 260px !important;
    height: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 0 10px 0 !important;
    aspect-ratio: auto !important;
  }

  #mega-menu .by-mega-image-card-img img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 260px !important;
    height: 260px !important;
    max-width: none !important;
    object-fit: cover !important;
    border: 0 !important;
    box-shadow: none !important;
    transition:
      opacity 260ms ease,
      transform 320ms ease,
      filter 260ms ease;
  }

  /* Double-image hover swap */
  #mega-menu .by-double-image-first {
    opacity: 1 !important;
    transform: scale(1) !important;
    z-index: 1 !important;
  }

  #mega-menu .by-double-image-second {
    opacity: 0 !important;
    transform: scale(1.04) !important;
    z-index: 2 !important;
  }

  #mega-menu .by-mega-image-card-double:hover .by-double-image-first,
  #mega-menu .by-mega-image-card-double:focus .by-double-image-first {
    opacity: 0 !important;
    transform: scale(1.04) !important;
  }

  #mega-menu .by-mega-image-card-double:hover .by-double-image-second,
  #mega-menu .by-mega-image-card-double:focus .by-double-image-second {
    opacity: 1 !important;
    transform: scale(1) !important;
    filter: brightness(0.92) !important;
  }

  /* Product status label */
  #mega-menu .by-mega-image-card-img .product-status {
    position: absolute !important;
    top: 18px !important;
    left: 0 !important;
    z-index: 5 !important;
    pointer-events: none !important;
  }

  #mega-menu .label-pro {
    display: inline-block !important;
    position: relative !important;
    min-width: 58px !important;
    padding: 7px 15px 7px 14px !important;
    background: #18a84a !important;
    color: #fff !important;
    font-family: "Bebas Neue", sans-serif !important;
    font-size: 18px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
  }

  #mega-menu .label-pro::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: -16px !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 16px solid transparent !important;
    border-bottom: 16px solid transparent !important;
    border-left: 16px solid #18a84a !important;
  }

  /* Card text */
  #mega-menu .by-mega-image-card-title {
    display: block !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
    color: #2f60a0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
  }

  #mega-menu .by-mega-image-card-more {
    display: inline-block !important;
    margin-top: 5px !important;
    font-size: 13px !important;
    color: #777 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }
}

/* =========================================================
   Best Years - portrait ratio mega menu image cards
   Source images are 400 x 500.
   Target rendered ratio approx 260 x 324.
   ========================================================= */

@media (min-width: 992px) {

  #mega-menu .by-mega-image-grid,
  #mega-menu .by-mega-image-card {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
  }

  #mega-menu .by-mega-image-card-img {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;

    height: 325px !important;
    min-height: 325px !important;
    max-height: 325px !important;

    aspect-ratio: 4 / 5 !important;
    overflow: hidden !important;
  }

  #mega-menu .by-mega-image-card-img img {
    width: 260px !important;
    height: 325px !important;
    max-width: none !important;
    object-fit: cover !important;
  }

  /*
   * Both double-image layers must use the same portrait dimensions.
   */
  #mega-menu .by-double-image-first,
  #mega-menu .by-double-image-second {
    width: 260px !important;
    height: 325px !important;
  }
}

/* =========================================================
   Product details: prevent sticky product image overlapping header/menu
   ========================================================= */

@media (min-width: 992px) {
  body.view-productdetails .vm-product-media-container.position-sticky,
  body.view-productdetails .product-media-container.position-sticky,
  body.view-productdetails .productdetails-view .position-sticky.sticky-lg-top {
    top: calc(var(--template-header-height, 0px) + 96px) !important;
    z-index: 1 !important;
  }

  body.header-is-sticky.view-productdetails .vm-product-media-container.position-sticky,
  body.header-is-sticky.view-productdetails .product-media-container.position-sticky,
  body.header-is-sticky.view-productdetails .productdetails-view .position-sticky.sticky-lg-top {
    top: 170px !important;
  }

  body.view-productdetails .header-content,
  body.view-productdetails #mega-menu,
  body.view-productdetails .mega-menu-container {
    z-index: 1020;
  }
}

/* =========================================================
   Header account/welcome icon: match VP toolbar icon sizing
   ========================================================= */

.header-right-lg .ersd-welcome-trigger {
  display: flex;
  align-items: center;
}

.header-right-lg .ersd-welcome-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0 !important;
  line-height: 1;
  font-size: inherit;
  background: transparent;
  border: 0;
}

.header-right-lg .ersd-welcome-button .vpi {
  font-size: 2rem !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.header-right-lg .ersd-welcome-button-label {
  display: none !important;
}

/* =========================================================
   Pricing spans
   ========================================================= */
.product-price .vm-display span.vm-price-desc, .related-product-price .vm-display span.vm-price-desc {
    display: none !important;
}
.vm-product-details-container .product-price .vm-display span.PricepriceBeforeTax {
    font-size: 22px;
}
.vm-prices-info.text-muted.by-price-note.by-price-note-trade {
    display: none;
}

/* =========================================================
   Welcome/account icon: short jiggle after offcanvas closes
   ========================================================= */

@keyframes by-account-icon-jiggle {
  0%   { transform: rotate(0deg) scale(1); }
  15%  { transform: rotate(-10deg) scale(1.08); }
  30%  { transform: rotate(8deg) scale(1.08); }
  45%  { transform: rotate(-6deg) scale(1.05); }
  60%  { transform: rotate(4deg) scale(1.03); }
  75%  { transform: rotate(-2deg) scale(1.01); }
  100% { transform: rotate(0deg) scale(1); }
}

.ersd-welcome-button .vpi.by-account-icon-jiggle {
  animation: by-account-icon-jiggle 650ms ease-in-out;
  transform-origin: center center;
}

/* link-follw - about bestyears */
div#mod-custom568 {
    background-color: white;
}

/* OPC */
.proopc-step {
    background: #2F61A0 !important;
}
.proopc-alert-warning {
    color: #c09853;
    background-color: #fcf8e3;
    border: 0 none;
    margin: 0;
    padding: 8px 10px;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
span.min-order-alert {
    color: #333;
}

/* Virtuemart Display */
.virtuemart-categories {
    display: none;
}

p.about {
    padding: 20px;
    margin-bottom: 5px;
}

ul.list-inline.center {
    text-align: center;
}

.image-container {
  text-align: center;
  padding-bottom: 10px;
}
.image-container img {
  max-width: 200px;
  display: inline-block;
}
/* Custom Forms */
.cf-fields {
    font-family: "Open Sans", sans-serif;
}
/* only for VP OPC Background */
.view-cart .fade.in, .view-cart .fade.show {
    opacity: 0.5;
}