/* Viva Fishing storefront foundation. */
:root {
  --viva-navy: #071a29;
  --viva-blue: #113a55;
  --viva-blue-hover: #174f70;
  --viva-surface: #f4f7f9;
  --viva-border: #d7e0e5;
  --viva-text: #122330;
  --viva-footer-gradient: linear-gradient(180deg,
      #58788b 0%,
      #31566d 30%,
      #113a55 62%,
      #071a29 100%);
  --viva-brands-footer-gradient: linear-gradient(180deg,
      #fff 0%,
      #f5f9fb 25%,
      #d9e7ed 42%,
      #58788b 61%,
      #113a55 76%,
      #071a29 100%);
}

body {
  color: var(--viva-text);
}

/* Clearance remains available from navigation; the duplicate home block is hidden. */
.page-index .ps-specials {
  display: none;
}

.header-bottom {
  background: rgb(255 255 255 / 97%);
  border-bottom-color: var(--viva-border);
  box-shadow: 0 2px 12px rgb(17 58 85 / 6%);
  padding-block: 0.5rem;
}

.header-bottom.is-viva-sticky {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1030;
}

.viva-sticky-header-placeholder {
  height: 0;
}

.header-bottom .navbar-brand .logo {
  max-height: 3.75rem;
  max-width: 10rem;
}

/* Faire-inspired desktop header: logo, wide search and account links on top,
 * with catalogue navigation on its own second row. */
.viva-header-actions {
  align-items: center;
  gap: clamp(0.8rem, 1.5vw, 1.4rem);
  grid-area: actions;
  justify-self: end;
  white-space: nowrap;
}

.viva-header-actions a,
.viva-header-actions__locale {
  align-items: center;
  color: var(--viva-text);
  display: inline-flex;
  font-size: 0.9rem;
  gap: 0.3rem;
  text-decoration: none;
}

.viva-header-actions a:hover,
.viva-header-actions a:focus-visible {
  color: var(--viva-blue);
}

.viva-header-actions__locale .material-icons {
  font-size: 1.05rem;
}

.viva-header-actions__icon-link {
  position: relative;
}

.viva-header-actions__icon-link .material-icons {
  font-size: 1.35rem;
}

.viva-header-actions__badge {
  align-items: center;
  background: var(--viva-blue);
  border-radius: 50rem;
  color: #fff;
  display: flex;
  font-size: 0.625rem;
  font-weight: 700;
  height: 1rem;
  justify-content: center;
  line-height: 1;
  min-width: 1rem;
  padding: 0 0.25rem;
  position: absolute;
  right: -0.5rem;
  top: -0.4rem;
}

.viva-header-actions .viva-header-actions__register {
  background: var(--viva-navy);
  border: 1px solid var(--viva-navy);
  border-radius: 0.25rem;
  color: #fff;
  font-weight: 700;
  min-height: 2.65rem;
  padding: 0.55rem 1rem;
}

.viva-header-actions .viva-header-actions__register:hover,
.viva-header-actions .viva-header-actions__register:focus-visible {
  background: var(--viva-blue);
  border-color: var(--viva-blue);
  color: #fff;
}

@media (min-width: 1200px) {
  .header-top {
    display: none !important;
  }

  .header-bottom {
    padding-bottom: 0;
    padding-top: 0.75rem;
    /* Frosted-glass sticky header. Kept to desktop only: below xl the mobile
     * menu is a position:fixed offcanvas that lives inside .header-bottom, and
     * backdrop-filter here would make .header-bottom its containing block,
     * collapsing the menu to header height. */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .header-bottom__row {
    display: grid !important;
    gap: 0.75rem 1.5rem;
    grid-template-areas:
      "logo search actions"
      "menu menu menu";
    grid-template-columns: auto minmax(20rem, 1fr) auto;
  }

  .header-bottom__logo {
    grid-area: logo;
    margin: 0 !important;
  }

  .header-bottom__row>.ps-mainmenu--desktop {
    border-top: 1px solid var(--viva-border);
    grid-area: menu;
    margin-left: calc(-1 * var(--bs-gutter-x, 1.5rem) / 2);
    margin-right: calc(-1 * var(--bs-gutter-x, 1.5rem) / 2);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) / 2);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) / 2);
    width: auto;
  }

  #_desktop_ps_searchbar {
    grid-area: search;
    margin: 0 !important;
    max-width: none;
    padding: 0;
    width: 100%;
  }

  #_desktop_ps_searchbar #ps_searchbar,
  #_desktop_ps_searchbar .ps-searchbar__form {
    max-width: none;
    width: 100%;
  }

  #_desktop_ps_searchbar .ps-searchbar__input {
    border-radius: 999px;
    min-height: 2.65rem;
  }
}

.ps-mainmenu__tree-link {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Clearance Specials is a direct destination, not a dropdown menu. */
.ps-mainmenu [data-id="category-93"]>.ps-mainmenu__tree-item-wrapper>.ps-mainmenu__tree-dropdown-toggle,
.ps-mainmenu [data-id="category-93"]>.ps-mainmenu__mobile-tree-item-wrapper>.ps-mainmenu__mobile-tree-dropdown-toggle,
#submenu-category-93 {
  display: none !important;
}

/*
 * Hummingbird normally renders a tall tabbed menu with an empty right side.
 * Viva Fishing categories work better as a compact, scannable mega menu.
 */
@media (min-width: 1200px) {
  .ps-mainmenu .submenu {
    background: #fff;
    border-bottom: 1px solid var(--viva-border);
    box-shadow: 0 16px 32px rgb(17 58 85 / 12%);
    max-height: min(28rem, calc(100vh - 9rem));
    overflow-y: auto;
    padding-block: 1.125rem;
  }

  .ps-mainmenu .submenu__row {
    display: block;
    margin: 0;
  }

  .ps-mainmenu .submenu__left {
    display: grid;
    gap: 0.5rem 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0;
    width: 100%;
  }

  .ps-mainmenu .submenu__left-item {
    align-items: center;
    border: 0;
    border-radius: 0.5rem;
    color: var(--viva-text);
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }

  .ps-mainmenu .submenu__left-item:hover,
  .ps-mainmenu .submenu__left-item:focus-visible {
    background: var(--viva-surface);
    color: var(--viva-blue);
  }

  .ps-mainmenu .submenu__left-item[aria-selected="true"] {
    background: transparent;
    color: var(--viva-text);
  }

  .ps-mainmenu .submenu__left-item[aria-selected="true"]:hover {
    background: var(--viva-surface);
    color: var(--viva-blue);
  }

  .ps-mainmenu .submenu__left-item::after {
    display: none !important;
  }

  /* Category 47 is Shop by Brand. Its first 12 entries are curated in BO. */
  #submenu-category-47 .submenu__left-item:not(.viva-view-all-brands):nth-child(n + 13) {
    display: none;
  }

  #submenu-category-47 .viva-view-all-brands {
    color: var(--viva-blue);
    grid-column: 4;
    justify-content: flex-end;
  }

  #submenu-category-47 .viva-view-all-brands::after {
    content: "\2192";
    display: inline !important;
    margin-inline-start: 0.5rem;
  }

  /* Category 49 is By Product. Its first 12 entries are curated in BO. */
  #submenu-category-49 .submenu__left-item:not(.viva-view-all-products):nth-child(n + 13) {
    display: none;
  }

  #submenu-category-49 .viva-view-all-products {
    color: var(--viva-blue);
    grid-column: 4;
    justify-content: flex-end;
  }

  #submenu-category-49 .viva-view-all-products::after {
    content: "\2192";
    display: inline !important;
    margin-inline-start: 0.5rem;
  }

  .ps-mainmenu .submenu__right {
    display: none;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .ps-mainmenu .submenu__left {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1199.98px) {
  .menu__link {
    font-weight: 600;
  }
}

/* Homepage: curated popular brands. */
.viva-popular-brands {
  background: linear-gradient(180deg, #fff 0%, #f6f9fa 45%, #edf4f7 100%);
  border: 0;
  border-radius: 0;
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

.viva-home-section-header {
  align-items: flex-end;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.viva-home-section-eyebrow {
  color: var(--viva-blue);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 0.25rem;
  text-transform: uppercase;
}

.viva-home-section-header h2 {
  color: var(--viva-navy);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin: 0;
}

.viva-home-section-link {
  color: var(--viva-blue);
  flex-shrink: 0;
  font-weight: 700;
  text-decoration: none;
}

.viva-home-section-link:hover,
.viva-home-section-link:focus-visible {
  color: var(--viva-navy);
  text-decoration: underline;
}

.viva-popular-brands__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.viva-popular-brands__card {
  align-items: center;
  background: #fff;
  border: 1px solid var(--viva-border);
  border-radius: 0.75rem;
  color: var(--viva-text);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: space-between;
  min-height: 9.5rem;
  padding: 1rem;
  text-align: center;
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.viva-popular-brands__card:hover,
.viva-popular-brands__card:focus-visible {
  border-color: var(--viva-blue);
  box-shadow: 0 10px 24px rgb(17 58 85 / 12%);
  color: var(--viva-blue);
  transform: translateY(-2px);
}

.viva-popular-brands__logo-wrap {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
  width: 100%;
}

.viva-popular-brands__logo {
  height: 5.5rem;
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}

.viva-popular-brands__name {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
}

@media (max-width: 1199.98px) {
  .viva-popular-brands__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .viva-home-section-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .viva-popular-brands__grid {
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .viva-popular-brands__card {
    min-height: 8rem;
    padding: 0.75rem;
  }

  .viva-popular-brands__logo {
    height: 4.25rem;
  }
}

/* Privacy Policy: readable legal content using the shared blue-white system. */
.cms-id-2 main {
  background: linear-gradient(180deg, #fff 0%, #f3f8fa 58%, #dbe8ee 100%);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.cms-id-2 main .columns-container {
  max-width: none;
  padding-inline: 0;
  width: 100%;
}

.cms-id-2 main .page-header,
.cms-id-2 main .page-footer {
  display: none;
}

.cms-id-2 .page-content--cms {
  margin: 0;
}

.cms-id-2 .viva-privacy__hero {
  background: linear-gradient(145deg, var(--viva-blue), var(--viva-navy));
  color: #fff;
  padding: clamp(4rem, 9vw, 7rem) 1.25rem;
  text-align: center;
}

.cms-id-2 .viva-privacy__hero-inner {
  margin-inline: auto;
  max-width: 62rem;
}

.cms-id-2 .viva-privacy__eyebrow {
  color: #cfe3ed;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

.cms-id-2 .viva-privacy__hero h1 {
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.7rem, 6vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.08;
  margin-bottom: 1.25rem;
}

.cms-id-2 .viva-privacy__hero p:last-child {
  color: #d9e8ee;
  font-size: 1.05rem;
  margin: 0;
}

.cms-id-2 .viva-privacy__layout {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(13rem, 0.32fr) minmax(0, 1fr);
  margin-inline: auto;
  max-width: 76rem;
  padding: clamp(3rem, 7vw, 6rem) 1.25rem 0;
}

.cms-id-2 .viva-privacy__nav {
  align-self: start;
  background: rgb(255 255 255 / 78%);
  border: 1px solid var(--viva-border);
  padding: 1.25rem;
  position: sticky;
  top: 7rem;
}

.cms-id-2 .viva-privacy__nav strong {
  color: var(--viva-navy);
  display: block;
  margin-bottom: 0.85rem;
}

.cms-id-2 .viva-privacy__nav ol {
  display: grid;
  gap: 0.55rem;
  list-style-position: inside;
  margin: 0;
  padding: 0;
}

.cms-id-2 .viva-privacy__nav a {
  color: #365264;
  font-size: 0.9rem;
  text-decoration: none;
}

.cms-id-2 .viva-privacy__nav a:hover,
.cms-id-2 .viva-privacy__nav a:focus-visible {
  color: var(--viva-blue);
  text-decoration: underline;
}

.cms-id-2 .viva-privacy__content {
  display: grid;
  gap: 1rem;
}

.cms-id-2 .viva-privacy__intro,
.cms-id-2 .viva-privacy__section {
  background: rgb(255 255 255 / 86%);
  border: 1px solid rgb(215 224 229 / 90%);
  padding: clamp(1.35rem, 3vw, 2.25rem);
}

.cms-id-2 .viva-privacy__intro {
  color: #365264;
  font-size: 1.05rem;
  line-height: 1.7;
}

.cms-id-2 .viva-privacy__section h2 {
  color: var(--viva-navy);
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  margin-bottom: 1rem;
}

.cms-id-2 .viva-privacy__section h3 {
  color: var(--viva-blue);
  font-size: 1.05rem;
  margin: 1.25rem 0 0.5rem;
}

.cms-id-2 .viva-privacy__section p,
.cms-id-2 .viva-privacy__section li {
  color: #405867;
  line-height: 1.7;
}

.cms-id-2 .viva-privacy__section ul {
  margin-bottom: 0;
  padding-left: 1.2rem;
}

.cms-id-2 .viva-privacy__section a {
  color: var(--viva-blue);
  font-weight: 650;
}

.cms-id-2 .viva-privacy__contact {
  background: var(--viva-navy);
  border: 0;
}

.cms-id-2 .viva-privacy__contact h2,
.cms-id-2 .viva-privacy__contact p,
.cms-id-2 .viva-privacy__contact a {
  color: #fff;
}

@media (max-width: 767.98px) {
  .cms-id-2 .viva-privacy__layout {
    grid-template-columns: 1fr;
  }

  .cms-id-2 .viva-privacy__nav {
    position: static;
  }
}

/* Shop by Brand landing page (legacy category 47). */
.category-id-47 #left-column {
  display: none;
}

.category-id-47 #center-column {
  width: 100%;
}

.category-id-47 #products {
  display: none;
}

.category-id-47 .category__header {
  margin-bottom: 2rem;
}

.category-id-47 .page-title-section {
  color: var(--viva-navy);
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 0.5rem;
}

.category-id-47 .category__description {
  color: #526570;
  font-size: 1.075rem;
  margin-bottom: 1.5rem;
}

.category-id-47 .subcategory__list {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 2.5rem;
}

.category-id-47 .subcategory__link,
.category-id-47 .subcategory__link--with-image {
  align-items: center;
  background: #fff;
  border: 1px solid var(--viva-border);
  border-radius: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: space-between;
  min-height: 12rem;
  padding: 1rem;
  text-align: center;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.category-id-47 .subcategory__link:hover {
  border-color: var(--viva-blue);
  box-shadow: 0 10px 24px rgb(17 58 85 / 12%);
  transform: translateY(-2px);
}

.category-id-47 .subcategory__link picture {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
  width: 100%;
}

.category-id-47 .subcategory__thumbnail {
  height: 7.5rem;
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}

.category-id-47 .subcategory__name {
  color: var(--viva-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

@media (max-width: 1199.98px) {
  .category-id-47 .subcategory__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .category-id-47 .subcategory__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-id-47 .subcategory__link,
  .category-id-47 .subcategory__link--with-image {
    min-height: 9.5rem;
    padding: 0.75rem;
  }

  .category-id-47 .subcategory__thumbnail {
    height: 5.5rem;
  }
}

/* Shop by Product landing page (legacy category 49). */
.category-id-49 #left-column {
  display: none;
}

.category-id-49 #center-column {
  width: 100%;
}

.category-id-49 #products {
  display: none;
}

.category-id-49 .category__header {
  margin-bottom: 2.5rem;
}

.category-id-49 .page-title-section {
  color: var(--viva-navy);
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 0.5rem;
}

.category-id-49 .category__description {
  color: #526570;
  font-size: 1.075rem;
  margin-bottom: 1.5rem;
}

.category-id-49 .subcategory__list {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 3rem;
}

.category-id-49 .subcategory__link,
.category-id-49 .subcategory__link--with-image {
  align-items: center;
  background: #fff;
  border: 1px solid var(--viva-border);
  border-radius: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  justify-content: space-between;
  min-height: 14rem;
  padding: 1rem;
  text-align: center;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.category-id-49 .subcategory__link:hover {
  border-color: var(--viva-blue);
  box-shadow: 0 10px 24px rgb(17 58 85 / 12%);
  transform: translateY(-2px);
}

.category-id-49 .subcategory__link picture {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
  width: 100%;
}

.category-id-49 .subcategory__thumbnail {
  height: 9rem;
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}

.category-id-49 .subcategory__name {
  color: var(--viva-text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
}

@media (max-width: 991.98px) {
  .category-id-49 .subcategory__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .category-id-49 .subcategory__list {
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-id-49 .subcategory__link,
  .category-id-49 .subcategory__link--with-image {
    min-height: 10.5rem;
    padding: 0.75rem;
  }

  .category-id-49 .subcategory__thumbnail {
    height: 6.5rem;
  }
}

/* Viva Fishing wholesale footer. */
.viva-footer-newsletter .ps-emailsubscription {
  background: linear-gradient(100deg, #e9f3f7 0%, #f7fafb 55%, #fff 100%) !important;
  border-top: 1px solid var(--viva-border);
  padding-block: clamp(1.75rem, 4vw, 3rem) !important;
}

.viva-footer-newsletter .ps-emailsubscription .h3 {
  color: var(--viva-navy);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.viva-footer-newsletter .ps-emailsubscription .form-control {
  background: #fff;
  border-color: #b9cbd4;
  border-radius: 0.35rem;
  min-height: 3rem;
}

.viva-footer-newsletter .ps-emailsubscription .btn {
  background: var(--viva-navy);
  border-color: var(--viva-navy);
  border-radius: 0.35rem;
  font-weight: 700;
}

.viva-footer {
  background: #101820;
  color: #c8d4da;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 0;
}

.viva-footer__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 4.5rem);
  grid-template-columns: minmax(15rem, 1.45fr) repeat(3, minmax(10rem, 1fr));
}

.viva-footer__brand p {
  line-height: 1.65;
  margin: 1.25rem 0;
  max-width: 23rem;
}

.viva-footer__logo .navbar-brand {
  display: inline-block;
}

.viva-footer__logo .logo {
  background: #fff;
  border-radius: 0.4rem;
  max-height: 4.25rem;
  max-width: 11.5rem;
  object-fit: contain;
  padding: 0.35rem;
}

.viva-footer__wholesale-note {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 0.9rem;
  font-weight: 700;
  gap: 0.5rem;
}

.viva-footer__wholesale-note .material-icons {
  color: #46bde6;
  font-size: 1.2rem;
}

.viva-footer__column h2 {
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 1.15rem;
}

.viva-footer__column ul {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.viva-footer__column a {
  color: #c8d4da;
  font-size: 0.925rem;
  text-decoration: none;
  transition: color 150ms ease;
}

.viva-footer__column a:hover,
.viva-footer__column a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.viva-footer__column .viva-footer__contact-button {
  align-items: center;
  border: 1px solid #55707e;
  border-radius: 0.35rem;
  color: #fff;
  display: inline-flex;
  font-weight: 700;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.65rem 0.9rem;
}

.viva-footer__column .viva-footer__contact-button:hover,
.viva-footer__column .viva-footer__contact-button:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--viva-navy);
  text-decoration: none;
}

.viva-footer__bottom {
  align-items: center;
  border-top: 1px solid #344752;
  display: flex;
  font-size: 0.8rem;
  justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-block: 1.25rem;
}

.viva-footer__bottom p {
  margin: 0;
}

@media (max-width: 991.98px) {
  .viva-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .viva-footer__grid {
    gap: 2.25rem;
    grid-template-columns: 1fr;
  }

  .viva-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Wholesale-only notice shown above the main site header. */
.viva-wholesale-notice {
  background: var(--viva-navy);
  border-bottom: 1px solid rgb(255 255 255 / 22%);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.4;
}

.viva-wholesale-notice__inner {
  align-items: center;
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  min-height: 2.75rem;
  padding-bottom: 0.55rem;
  padding-top: 0.55rem;
  text-align: center;
}

.viva-wholesale-notice__icon {
  color: #fff;
  flex: 0 0 auto;
  font-size: 1.25rem;
}

.viva-wholesale-notice__separator {
  margin: 0 0.35rem;
}

@media (max-width: 575.98px) {
  .viva-wholesale-notice {
    font-size: 0.82rem;
  }

  .viva-wholesale-notice__inner {
    align-items: flex-start;
    min-height: 0;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .viva-wholesale-notice__separator {
    display: none;
  }
}

/* Simplified editorial footer inspired by modern wholesale marketplaces. */
.viva-footer--editorial {
  background: var(--viva-footer-gradient);
  border-top: 0;
  color: #e5eef3;
  padding: clamp(3.5rem, 7vw, 7rem) 0 0;
}

/* About us: continue the page's paper grain into the footer so the two feel like one piece. */
.cms-id-4 .viva-footer--editorial {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='paperGrainFooter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='3' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paperGrainFooter)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='paperFiberFooter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='2' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paperFiberFooter)'/%3E%3C/svg%3E"),
    var(--viva-footer-gradient);
  background-size: 180px 180px, 420px 420px, auto;
  background-repeat: repeat, repeat, no-repeat;
  background-blend-mode: soft-light, soft-light, normal;
}

.viva-footer__editorial-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  grid-template-columns: minmax(24rem, 1.6fr) minmax(20rem, 1fr);
}

.viva-footer__links-area {
  display: grid;
  gap: 2.5rem clamp(2rem, 5vw, 5rem);
  grid-template-columns: repeat(2, minmax(9rem, 1fr));
}

.viva-footer__links-area .viva-footer__social {
  grid-column: 1 / -1;
}

.viva-footer__statement h2 {
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.25rem, 4.2vw, 4.25rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.08;
  margin: 0;
  max-width: 49rem;
}

.viva-footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.viva-footer__action {
  align-items: center;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 0.3rem;
  color: #fff;
  display: inline-flex;
  font-weight: 600;
  justify-content: center;
  min-height: 3.25rem;
  min-width: 10rem;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.viva-footer__action:hover,
.viva-footer__action:focus-visible {
  background: rgb(255 255 255 / 12%);
  border-color: #fff;
  color: #fff;
}

.viva-footer__action--primary {
  background: #fff;
  border-color: #fff;
  color: var(--viva-navy);
}

.viva-footer__action--primary:hover,
.viva-footer__action--primary:focus-visible {
  background: #e8f1f5;
  border-color: #e8f1f5;
  color: var(--viva-navy);
}

.viva-footer--editorial .viva-footer__column h2 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 1.35rem;
}

.viva-footer--editorial .viva-footer__column ul {
  gap: 1rem;
}

.viva-footer--editorial .viva-footer__column a {
  color: #d9e6ec;
  font-size: 1rem;
}

.viva-footer--editorial .viva-footer__column a:hover,
.viva-footer--editorial .viva-footer__column a:focus-visible {
  color: #fff;
}

.viva-footer__social .ps-social-follow h4 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 1.35rem;
}

.viva-footer__social .ps-social-follow ul {
  align-items: center;
  display: flex;
  gap: 0.85rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.viva-footer__social .ps-social-follow li:not(.facebook):not(.instagram) {
  display: none;
}

.viva-footer__social .ps-social-follow li {
  margin: 0;
}

.viva-footer__social .ps-social-follow a {
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 50%;
  display: block;
  height: 2.75rem;
  overflow: hidden;
  text-indent: -9999px;
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
  width: 2.75rem;
}

.viva-footer__social .ps-social-follow a:hover,
.viva-footer__social .ps-social-follow a:focus-visible {
  background-color: rgb(255 255 255 / 14%);
  border-color: #fff;
  transform: translateY(-2px);
}

/* Hummingbird's ps_socialfollow override renders SVG links directly. */
.viva-footer__social::before {
  color: #fff;
  content: "Follow us";
  display: block;
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
  white-space: nowrap;
}

.viva-footer__social {
  align-items: center;
  display: flex;
  gap: 1rem;
}

.viva-footer__social .ps-socialfollow {
  padding: 0 !important;
}

.viva-footer__social .ps-socialfollow>.container {
  margin: 0;
  max-width: none;
  padding: 0;
  width: auto;
}

.viva-footer__social .ps-socialfollow ul {
  gap: 0.85rem !important;
  justify-content: flex-start !important;
}

.viva-footer__social .ps-socialfollow a {
  align-items: center;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  height: 2.75rem;
  justify-content: center;
  padding: 0 !important;
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
  width: 2.75rem;
}

.viva-footer__social .ps-socialfollow a:hover,
.viva-footer__social .ps-socialfollow a:focus-visible {
  background: rgb(255 255 255 / 14%);
  border-color: #fff;
  color: #fff;
  transform: translateY(-2px);
}

.viva-footer__social .ps-socialfollow svg {
  height: 1.15rem;
  width: 1.15rem;
}

.viva-footer--editorial .viva-footer__bottom {
  border-top-color: rgb(255 255 255 / 24%);
  color: #c8d8e0;
  margin-top: clamp(3.5rem, 7vw, 6rem);
}

@media (max-width: 991.98px) {
  .viva-footer__editorial-grid {
    gap: 3rem 2rem;
    grid-template-columns: 1fr;
  }

  .viva-footer__statement {
    grid-column: auto;
  }
}

@media (max-width: 575.98px) {
  .viva-footer--editorial {
    padding-top: 3rem;
  }

  .viva-footer__editorial-grid {
    grid-template-columns: 1fr;
  }

  .viva-footer__statement {
    grid-column: auto;
  }

  .viva-footer__links-area {
    grid-template-columns: 1fr;
  }

  .viva-footer__links-area .viva-footer__social {
    grid-column: auto;
  }

  .viva-footer__statement h2 {
    font-size: clamp(2.2rem, 11vw, 3.25rem);
  }

  .viva-footer__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .viva-footer__action {
    width: 100%;
  }
}

/* Homepage: Popular Brands and footer form one uninterrupted gradient region. */
.page-index #wrapper,
.page-index #content-wrapper,
.page-index #content,
.page-index main,
.page-index .page-content--home {
  margin-bottom: 0;
  padding-bottom: 0;
}

.page-index .page-content--home> :last-child {
  margin-bottom: 0;
}

.viva-brands-footer-shell {
  background: var(--viva-brands-footer-gradient);
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.viva-brands-footer-shell .viva-popular-brands {
  background: transparent;
  margin-bottom: 0;
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
}

.viva-brands-footer-shell #footer,
.viva-brands-footer-shell .viva-footer--editorial {
  background: transparent;
  border: 0;
  margin: 0;
}

.viva-brands-footer-shell .viva-footer--editorial {
  color: #e5eef3;
  padding-top: clamp(3rem, 6vw, 5.5rem);
}

.viva-brands-footer-shell .viva-footer__statement h2,
.viva-brands-footer-shell .viva-footer__column h2 {
  color: #fff;
}

.viva-brands-footer-shell .viva-footer__column a {
  color: #d9e6ec;
}

.viva-brands-footer-shell .viva-footer__column a:hover,
.viva-brands-footer-shell .viva-footer__column a:focus-visible {
  color: #fff;
}

.viva-brands-footer-shell .viva-footer__action {
  border-color: rgb(255 255 255 / 55%);
  color: #fff;
}

.viva-brands-footer-shell .viva-footer__action:hover,
.viva-brands-footer-shell .viva-footer__action:focus-visible {
  background: rgb(255 255 255 / 12%);
  border-color: #fff;
  color: #fff;
}

.viva-brands-footer-shell .viva-footer__action--primary {
  background: #fff;
  border-color: #fff;
  color: #113a55;
}

.viva-brands-footer-shell .viva-footer__action--primary:hover,
.viva-brands-footer-shell .viva-footer__action--primary:focus-visible {
  background: #e8f1f5;
  border-color: #e8f1f5;
  color: #071a29;
}

.viva-brands-footer-shell .viva-footer__bottom {
  border-top-color: rgb(255 255 255 / 24%);
  color: #c8d8e0;
}

/* Storefront colour system: deep navy, white and soft navy-derived neutrals. */
body,
#wrapper {
  background-color: #fff;
}

main h1,
main h2,
main h3,
main h4,
.page-title,
.page-title-section,
.product-title,
.product__title {
  color: var(--viva-navy);
}

main a:not(.btn):not(.viva-popular-brands__card) {
  color: var(--viva-blue);
}

main a:not(.btn):not(.viva-popular-brands__card):hover,
main a:not(.btn):not(.viva-popular-brands__card):focus-visible {
  color: var(--viva-navy);
}

.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--viva-navy);
  border-color: var(--viva-navy);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--viva-blue-hover);
  border-color: var(--viva-blue-hover);
  color: #fff;
}

.btn-outline-primary {
  background-color: #fff;
  border-color: var(--viva-navy);
  color: var(--viva-navy);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active {
  background-color: var(--viva-navy);
  border-color: var(--viva-navy);
  color: #fff;
}

.form-control,
.form-select,
.input-group-text {
  border-color: var(--viva-border);
}

.form-control:focus,
.form-select:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--viva-blue);
  box-shadow: 0 0 0 0.2rem rgb(17 58 85 / 16%);
  outline: 0;
}

.breadcrumb,
.breadcrumb-wrapper {
  background-color: var(--viva-surface);
}

.card,
.product-miniature,
.product-miniature__card,
.subcategory__link,
.subcategory__link--with-image {
  border-color: var(--viva-border);
}

.product-miniature__card,
.product-miniature {
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.product-miniature__card:hover,
.product-miniature:hover {
  border-color: rgb(17 58 85 / 42%);
  box-shadow: 0 12px 30px rgb(7 26 41 / 10%);
}

.product-price,
.current-price,
.price {
  color: var(--viva-navy);
}

.product-flag,
.badge-primary,
.bg-primary {
  background-color: var(--viva-navy) !important;
  color: #fff !important;
}

.pagination .page-link {
  border-color: var(--viva-border);
  color: var(--viva-blue);
}

.pagination .page-item.active .page-link,
.pagination .page-link:hover,
.pagination .page-link:focus-visible {
  background-color: var(--viva-navy);
  border-color: var(--viva-navy);
  color: #fff;
}

.ps-mainmenu__tree-link:hover,
.ps-mainmenu__tree-link:focus-visible,
.ps-mainmenu__tree-link[aria-expanded='true'] {
  color: var(--viva-navy);
}

::selection {
  background: var(--viva-navy);
  color: #fff;
}

/* Category pages use the full content width; navigation already lives in the header. */
body#category #left-column,
.page-category #left-column {
  display: none !important;
}

body#category #content-wrapper,
body#category #center-column,
.page-category #content-wrapper,
.page-category #center-column {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

/* Product listings: five balanced cards per row on desktop. */
#js-product-list .products {
  display: grid;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#js-product-list .product-miniature {
  height: 100%;
  margin: 0;
  min-width: 0;
  width: auto;
}

#js-product-list .product-miniature__inner {
  background: #fff;
  border: 1px solid var(--viva-border);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0.75rem;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

#js-product-list .product-miniature:hover .product-miniature__inner,
#js-product-list .product-miniature:focus-within .product-miniature__inner {
  border-color: rgb(17 58 85 / 48%);
  box-shadow: 0 12px 28px rgb(7 26 41 / 11%);
  transform: translateY(-3px);
}

#js-product-list .product-miniature__top {
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 0.35rem;
  overflow: hidden;
}

#js-product-list .product-miniature__image-container,
#js-product-list .product-miniature__image-link,
#js-product-list .product-miniature__image-container picture {
  display: block;
  height: 100%;
  width: 100%;
}

#js-product-list .product-miniature__image {
  height: 100%;
  object-fit: contain;
  object-position: center;
  width: 100%;
}

#js-product-list .product-miniature__bottom {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-top: 0.85rem;
}

#js-product-list .product-miniature__infos {
  display: flex;
  flex: 1;
  flex-direction: column;
}

#js-product-list .product-miniature__title {
  display: -webkit-box;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  min-height: 2.6rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#js-product-list .product-miniature__actions {
  align-items: stretch;
  display: flex;
  margin-top: auto;
  padding-top: 0.75rem;
}

#js-product-list .product-miniature__details {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  min-height: 2.4rem;
  padding: 0.45rem 0.75rem;
  width: 100%;
}

#js-product-list-top {
  margin-bottom: clamp(1.25rem, 2vw, 2rem);
}

#js-product-list-top .products__selection {
  align-items: center;
  display: grid;
  gap: 1rem 2rem;
  grid-template-columns: minmax(10rem, 1fr) minmax(18rem, 34rem);
}

#js-product-list-top .products__count,
#js-product-list-top .products__sort {
  margin: 0;
}

#js-product-list-top .products__sort {
  justify-self: end;
  max-width: 25rem;
  width: 100%;
}

#js-product-list-top .products__sort-dropdown {
  min-width: 14rem;
}

@media (max-width: 1199.98px) {
  #js-product-list .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  #js-product-list-top .products__selection {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  #js-product-list-top .products__sort {
    justify-self: stretch;
    max-width: none;
  }

  #js-product-list .products {
    gap: 0.875rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #js-product-list .product-miniature__inner {
    padding: 0.6rem;
  }

  #js-product-list .product-miniature__title {
    font-size: 0.875rem;
  }
}

/* Product detail page: balanced media, readable information and catalogue-mode spacing. */
.page-product .product__container {
  align-items: start;
}

.page-product .product__left,
.page-product .product__right {
  min-width: 0;
}

.page-product .product__carousel,
.page-product .product__no-image {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--viva-border);
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  max-height: 38rem;
  overflow: hidden;
}

.page-product .product__carousel .carousel-inner,
.page-product .product__carousel .carousel-item,
.page-product .product__carousel picture {
  height: 100%;
  width: 100%;
}

.page-product .product__carousel picture,
.page-product .product__no-image picture {
  align-items: center;
  display: flex;
  justify-content: center;
}

.page-product .product__carousel .carousel-item img,
.page-product .product__no-image img {
  height: 100%;
  max-height: 38rem;
  object-fit: contain;
  object-position: center;
  width: 100%;
}

.page-product .product__name {
  color: var(--viva-navy);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.page-product .product__manufacturer {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.page-product .product__description-short {
  color: #344b5b;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.page-product .product__description-short> :last-child,
.page-product .product__description> :last-child {
  margin-bottom: 0;
}

.page-product .product__actions,
.page-product .product__variants {
  margin-bottom: 1.5rem;
}

.page-product .product__actions:empty,
.page-product .product__variants:empty,
.page-product .product__prices:empty,
.page-product .product__availability:empty,
.page-product .product__additional-info:empty {
  display: none;
  margin: 0;
}

/* Hide the unconfigured default reassurance-policy placeholders. */
.page-product .blockreassurance_product {
  display: none !important;
}

/* Same-category recommendations are enough; browsing history is repetitive here. */
.page-product .ps-viewedproduct {
  display: none !important;
}

.page-product .viva-related-products {
  margin-top: clamp(2rem, 4vw, 4rem);
}

.page-product .viva-related-products__heading {
  background: transparent;
  border: 0;
  border-radius: 0.35rem;
  margin: 0 0 1.5rem;
  width: fit-content;
}

.page-product .viva-related-products__link {
  align-items: center;
  border-radius: 0.35rem;
  box-shadow: 0 4px 16px rgb(7 26 41 / 9%);
  color: var(--viva-navy);
  display: flex;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 700;
  gap: 1rem;
  height: 60px;
  justify-content: center;
  padding: 0 1.25rem;
  text-decoration: none;
  transition: box-shadow 150ms ease, transform 150ms ease;
  width: fit-content;
}

.page-product .viva-related-products__link:hover,
.page-product .viva-related-products__link:focus-visible {
  background: transparent;
  box-shadow: 4px 6px 20px rgb(7 26 41 / 14%);
  color: var(--viva-navy);
  transform: translateX(4px);
}

.page-product .viva-related-products__arrow {
  font-size: 1.5rem;
  transition: transform 150ms ease;
}

.page-product .viva-related-products__link:hover .viva-related-products__arrow,
.page-product .viva-related-products__link:focus-visible .viva-related-products__arrow {
  transform: none;
}

.page-product .viva-related-products__list {
  display: grid;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
  .page-product .viva-related-products__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-product .product-variant {
  border: 0;
  margin: 0 0 1.25rem;
  padding: 0;
}

.page-product .product-variant__label {
  color: var(--viva-navy);
  font-weight: 700;
  margin-bottom: 0.65rem;
}

.page-product .product-variant__radios,
.page-product .product-variant__colors {
  gap: 0.6rem;
}

.page-product .product__thumbnails-list {
  gap: 0.75rem;
}

.page-product .product__thumbnail-image {
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--viva-border);
  object-fit: contain;
}

.page-product .product__thumbnail.active .product__thumbnail-image {
  outline-color: var(--viva-navy);
}

.page-product .accordion-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgb(7 26 41 / 24%);
}

.page-product .product__accordion {
  border-top: 1px solid rgb(7 26 41 / 24%);
}

.page-product .accordion-button {
  background: transparent;
  box-shadow: none;
  color: var(--viva-navy);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 700;
  padding: 1.35rem 0;
}

.page-product .accordion-button:not(.collapsed) {
  background: transparent;
  box-shadow: none;
  color: var(--viva-navy);
}

.page-product .accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgb(17 58 85 / 14%);
}

.page-product .accordion-button::after,
.page-product .accordion-button:not(.collapsed)::after {
  align-items: center;
  background: none;
  color: var(--viva-navy);
  display: flex;
  font-size: 1.8rem;
  font-weight: 400;
  height: 1.5rem;
  justify-content: center;
  line-height: 1;
  transform: none;
  width: 1.5rem;
}

.page-product .accordion-button::after {
  content: '+';
}

.page-product .accordion-button:not(.collapsed)::after {
  content: '\2212';
}

.page-product .accordion-body {
  color: #344b5b;
  line-height: 1.7;
  padding: 0 0 1.75rem;
}

.page-product .viva-description-image {
  background: #fff;
  border: 1px solid var(--viva-border);
  border-radius: 0.45rem;
  cursor: zoom-in;
  display: inline-flex;
  flex-direction: column;
  margin: 0.75rem 1rem 0.75rem 0;
  max-width: min(22rem, 100%);
  overflow: hidden;
  padding: 0;
  text-align: left;
  vertical-align: top;
}

.page-product .viva-description-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0;
  width: 100%;
}

.page-product .viva-description-gallery .viva-description-image {
  flex: 0 1 20rem;
  margin: 0;
}

.page-product .viva-description-image:hover,
.page-product .viva-description-image:focus-visible {
  border-color: var(--viva-blue);
  box-shadow: 0 10px 24px rgb(7 26 41 / 12%);
  outline: 0;
}

.page-product .viva-description-image img {
  display: block;
  height: 13rem;
  object-fit: contain;
  width: 100%;
}

.page-product .viva-description-image__label {
  align-items: center;
  color: var(--viva-navy);
  display: flex;
  font-size: 0.875rem;
  font-weight: 700;
  justify-content: center;
  min-height: 2.6rem;
  padding: 0.55rem 0.8rem;
}

.viva-image-viewer {
  background: #fff;
  border: 0;
  border-radius: 0.5rem;
  box-shadow: 0 24px 70px rgb(0 0 0 / 35%);
  color: var(--viva-text);
  max-height: 92vh;
  max-width: 92vw;
  padding: 2.75rem 1.25rem 1.25rem;
  width: auto;
}

.viva-image-viewer::backdrop {
  background: rgb(7 26 41 / 82%);
}

.viva-image-viewer__close {
  align-items: center;
  background: var(--viva-navy);
  border: 0;
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 1.6rem;
  height: 2.25rem;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  width: 2.25rem;
}

.viva-image-viewer__image {
  display: block;
  max-height: calc(92vh - 5rem);
  max-width: calc(92vw - 2.5rem);
  object-fit: contain;
}

.viva-image-viewer__caption {
  color: #526570;
  margin: 0.75rem 0 0;
  text-align: center;
}

@media (max-width: 575.98px) {
  .page-product .viva-description-gallery {
    flex-wrap: nowrap;
    margin-left: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
    margin-right: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
    overflow-x: auto;
    padding: 0 calc(0.5 * var(--bs-gutter-x, 1.5rem)) 0.75rem;
    scroll-snap-type: x proximity;
    width: calc(100% + var(--bs-gutter-x, 1.5rem));
  }

  .page-product .viva-description-gallery .viva-description-image {
    flex-basis: min(80vw, 19rem);
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

.page-product .rich-text iframe,
.page-product .product__description iframe,
.page-product .product__description-short iframe {
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
  height: auto;
  margin: 1.25rem 0;
  max-width: 100%;
  width: min(100%, 42rem);
}

@media (min-width: 992px) {
  .page-product .product__container {
    gap: clamp(2rem, 4vw, 4rem);
    grid-template-columns: minmax(0, 52%) minmax(0, 1fr);
  }

  .page-product .product__right {
    padding-top: 0.5rem;
  }

  .page-product .product__bottom {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .page-product .product__bottom-left,
  .page-product .product__bottom-right {
    margin-bottom: 0;
    width: 100%;
  }
}

@media (max-width: 991.98px) {
  .page-product .product__container {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .page-product .product__carousel,
  .page-product .product__no-image {
    max-height: min(34rem, 92vw);
  }

  .page-product .product__carousel .carousel-item img,
  .page-product .product__no-image img {
    max-height: min(34rem, 92vw);
  }
}

@media (max-width: 575.98px) {
  .page-product .product__container {
    gap: 1.25rem;
  }

  .page-product .product__name {
    font-size: 1.65rem;
  }

  .page-product .product__carousel,
  .page-product .product__no-image {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    margin-left: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
    margin-right: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
  }

  .page-product .product__bottom {
    margin-top: 1.5rem;
  }
}

/* Account pages: one calm, consistent sign-in and registration experience. */
.page-authentication main .container--limited-sm,
.page-registration main .container--limited-md,
.page-password main .container--limited-sm,
body#authentication main .container--limited-sm,
body#registration main .container--limited-md,
body#password main .container--limited-sm {
  margin-inline: auto;
}

.page-authentication main .container--limited-sm,
.page-password main .container--limited-sm,
body#authentication main .container--limited-sm,
body#password main .container--limited-sm {
  max-width: 38rem;
}

.page-registration main .container--limited-md,
body#registration main .container--limited-md {
  max-width: 48rem;
}

.page-authentication .page-header,
.page-registration .page-header,
.page-password .page-header,
body#authentication .page-header,
body#registration .page-header,
body#password .page-header {
  margin-bottom: 1.25rem;
  text-align: center;
}

.page-authentication .page-header h1,
.page-registration .page-header h1,
.page-password .page-header h1,
body#authentication .page-header h1,
body#registration .page-header h1,
body#password .page-header h1 {
  color: var(--viva-navy);
  font-size: clamp(1.85rem, 4vw, 2.45rem);
  letter-spacing: -0.025em;
}

.page-authentication .login,
.page-registration .register-form,
.page-password .forgotten-password,
.page-password main .page-content>form,
body#authentication .login,
body#registration .register-form,
body#password .forgotten-password,
body#password main .page-content>form {
  background: #fff;
  border: 1px solid var(--viva-border);
  border-radius: 0.75rem;
  box-shadow: 0 12px 34px rgb(7 26 41 / 8%);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.page-authentication .form-label,
.page-registration .form-label,
.page-password .form-label,
body#authentication .form-label,
body#registration .form-label,
body#password .form-label {
  color: var(--viva-navy);
  font-size: 0.95rem;
  font-weight: 650;
  margin-bottom: 0.45rem;
}

.page-authentication .mb-3,
.page-registration .mb-3,
.page-password .mb-3,
body#authentication .mb-3,
body#registration .mb-3,
body#password .mb-3 {
  margin-bottom: 1.15rem !important;
}

.page-authentication .form-control,
.page-authentication .form-select,
.page-registration .form-control,
.page-registration .form-select,
.page-password .form-control,
.page-password .form-select,
body#authentication .form-control,
body#registration .form-control,
body#password .form-control {
  background-color: #fff;
  border: 1px solid #bfcdd5;
  border-radius: 0.45rem;
  color: var(--viva-text);
  min-height: 3.1rem;
  padding: 0.7rem 0.85rem;
}

.page-authentication .form-control:focus,
.page-authentication .form-select:focus,
.page-registration .form-control:focus,
.page-registration .form-select:focus,
.page-password .form-control:focus,
.page-password .form-select:focus,
body#authentication .form-control:focus,
body#registration .form-control:focus,
body#password .form-control:focus {
  border-color: var(--viva-blue);
  box-shadow: 0 0 0 0.2rem rgb(17 58 85 / 14%);
}

.page-authentication .password-field .btn,
.page-registration .password-field .btn,
.page-password .password-field .btn,
body#authentication .password-field .btn,
body#registration .password-field .btn,
body#password .password-field .btn {
  background: var(--viva-navy);
  border-color: var(--viva-navy);
  border-radius: 0 0.45rem 0.45rem 0;
  min-width: 3.2rem;
}

.page-authentication .password-field .btn:hover,
.page-registration .password-field .btn:hover,
.page-password .password-field .btn:hover,
body#authentication .password-field .btn:hover,
body#registration .password-field .btn:hover,
body#password .password-field .btn:hover {
  background: var(--viva-blue-hover);
  border-color: var(--viva-blue-hover);
}

.page-authentication .alert-danger,
.page-registration .alert-danger,
.page-password .alert-danger,
.page-authentication .has-error .help-block,
.page-registration .has-error .help-block,
.page-password .has-error .help-block,
body#authentication .alert-danger,
body#registration .alert-danger,
body#password .alert-danger {
  background: #fff3f3;
  border: 1px solid #e6a5a5;
  border-radius: 0.5rem;
  color: #7b2020;
}

.page-authentication .alert-danger,
.page-registration .alert-danger,
.page-password .alert-danger,
body#authentication .alert-danger,
body#registration .alert-danger,
body#password .alert-danger {
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem;
}

.page-authentication .buttons-wrapper,
.page-registration .buttons-wrapper,
.page-password .buttons-wrapper,
body#authentication .buttons-wrapper,
body#registration .buttons-wrapper,
body#password .buttons-wrapper {
  align-items: center;
  gap: 0.75rem;
}

.page-authentication #submit-login,
.page-registration .form-control-submit,
.page-password #send-reset-link,
.page-password .renew-password>.btn-primary,
body#authentication #submit-login,
body#registration .form-control-submit,
body#password #send-reset-link,
body#password .renew-password>.btn-primary {
  background: var(--viva-navy);
  border-color: var(--viva-navy);
  border-radius: 0.45rem;
  min-height: 2.85rem;
  padding-inline: 1.5rem;
}

.page-authentication #submit-login:hover,
.page-registration .form-control-submit:hover,
.page-password #send-reset-link:hover,
.page-password .renew-password>.btn-primary:hover,
body#authentication #submit-login:hover,
body#registration .form-control-submit:hover,
body#password #send-reset-link:hover,
body#password .renew-password>.btn-primary:hover {
  background: var(--viva-blue-hover);
  border-color: var(--viva-blue-hover);
}

.page-authentication #login-form .btn-basic,
.page-password #back-to-login,
.page-registration .register-form__login-prompt a,
body#authentication #login-form .btn-basic,
body#password #back-to-login,
body#registration .register-form__login-prompt a {
  color: var(--viva-blue);
  font-weight: 650;
  text-decoration: none;
}

.page-authentication #login-form .btn-basic:hover,
.page-password #back-to-login:hover,
.page-registration .register-form__login-prompt a:hover,
body#authentication #login-form .btn-basic:hover,
body#password #back-to-login:hover,
body#registration .register-form__login-prompt a:hover {
  color: var(--viva-blue-hover);
  text-decoration: underline;
}

.page-authentication .login>hr,
body#authentication .login>hr {
  border-color: var(--viva-border);
  margin: 1.5rem 0;
}

.page-authentication .login__register-prompt,
body#authentication .login__register-prompt {
  text-align: center;
}

.page-authentication .login__register-prompt h2,
body#authentication .login__register-prompt h2 {
  color: var(--viva-navy);
  margin-bottom: 0.8rem;
}

.page-authentication .login__register-prompt .btn,
body#authentication .login__register-prompt .btn {
  border-color: var(--viva-blue);
  border-radius: 0.45rem;
  color: var(--viva-blue);
  min-height: 2.85rem;
}

.page-authentication .login__register-prompt .btn:hover,
body#authentication .login__register-prompt .btn:hover {
  background: var(--viva-navy);
  border-color: var(--viva-navy);
  color: #fff;
}

.page-registration .form-check-inline,
body#registration .form-check-inline {
  margin: 0 0.55rem 0.5rem 0;
}

.page-registration .form-check-inline .form-check-label,
body#registration .form-check-inline .form-check-label {
  border: 1px solid var(--viva-border);
  border-radius: 999px;
  cursor: pointer;
  min-width: 4.25rem;
  padding: 0.45rem 0.85rem 0.45rem 1.9rem;
}

.page-registration .form-check-inline .form-check-input,
body#registration .form-check-inline .form-check-input {
  margin-left: 0.65rem;
  margin-top: 0.7rem;
  position: absolute;
}

.page-registration .form-check-inline:has(.form-check-input:checked) .form-check-label,
body#registration .form-check-inline:has(.form-check-input:checked) .form-check-label {
  background: #eef5f8;
  border-color: var(--viva-blue);
  color: var(--viva-navy);
}

.page-registration select[name^="birthday"],
body#registration select[name^="birthday"] {
  display: inline-block;
  margin: 0 0.45rem 0.45rem 0;
  min-width: 8rem;
  width: auto;
}

.page-registration .form-check:not(.form-check-inline),
body#registration .form-check:not(.form-check-inline) {
  background: var(--viva-surface);
  border: 1px solid var(--viva-border);
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.85rem 1rem 0.85rem 2.45rem;
}

.page-registration .form-check:not(.form-check-inline) .form-check-input,
body#registration .form-check:not(.form-check-inline) .form-check-input {
  margin-left: -1.45rem;
}

.page-registration .form-text,
.page-password .form-text,
body#registration .form-text,
body#password .form-text {
  color: #617480;
  font-size: 0.82rem;
  margin-top: 0.4rem;
}

.page-registration .register-form__login-prompt,
body#registration .register-form__login-prompt {
  color: #526570;
  margin: 1.25rem 0 0;
  text-align: center;
}

.page-password .send-renew-password-link,
body#password .send-renew-password-link {
  color: #526570;
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

@media (max-width: 575.98px) {

  .page-authentication main .container--limited-sm,
  .page-registration main .container--limited-md,
  .page-password main .container--limited-sm,
  body#authentication main .container--limited-sm,
  body#registration main .container--limited-md,
  body#password main .container--limited-sm {
    padding-inline: 0.85rem;
  }

  .page-authentication .login,
  .page-registration .register-form,
  .page-password .forgotten-password,
  .page-password main .page-content>form,
  body#authentication .login,
  body#registration .register-form,
  body#password .forgotten-password,
  body#password main .page-content>form {
    border-radius: 0.6rem;
    padding: 1.25rem 1rem;
  }

  .page-authentication #login-form .buttons-wrapper,
  .page-password .buttons-wrapper,
  body#authentication #login-form .buttons-wrapper,
  body#password .buttons-wrapper {
    align-items: stretch;
    display: flex;
    flex-direction: column;
  }

  .page-authentication #submit-login,
  .page-authentication #login-form .btn-basic,
  .page-password #send-reset-link,
  .page-password #back-to-login,
  body#authentication #submit-login,
  body#authentication #login-form .btn-basic,
  body#password #send-reset-link,
  body#password #back-to-login {
    justify-content: center;
    width: 100%;
  }

  .page-registration select[name^="birthday"],
  body#registration select[name^="birthday"] {
    margin-right: 0;
    width: 100%;
  }
}

/* About us: editorial brand story with a white-to-blue page transition. */
.cms-id-4 main {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='paperGrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='3' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paperGrain)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='paperFiber'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='2' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paperFiber)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,
      var(--viva-navy) 0%,
      var(--viva-blue) 12%,
      #58788b 26%,
      #a9bec9 42%,
      #e7f0f4 60%,
      #f7fafb 78%,
      #fff 90%,
      #58788b 100%);
  background-size: 180px 180px, 420px 420px, auto;
  background-repeat: repeat, repeat, no-repeat;
  background-blend-mode: soft-light, soft-light, normal;
  padding-bottom: clamp(4rem, 9vw, 8rem);
}

.cms-id-4 main .columns-container {
  max-width: none;
  padding-inline: 0;
  width: 100%;
}

.cms-id-4 main .page-header,
.cms-id-4 main .page-footer {
  display: none;
}

.cms-id-4 .page-content--cms {
  margin: 0;
}

.cms-id-4 .viva-about {
  color: var(--viva-text);
}

.cms-id-4 .viva-about__hero {
  align-items: center;
  background: transparent;
  color: #fff;
  display: flex;
  min-height: clamp(32rem, 63vw, 47rem);
  padding: clamp(4rem, 9vw, 8rem) max(1.25rem, calc((100vw - 76rem) / 2));
  text-align: center;
}

.cms-id-4 .viva-about__hero-inner {
  margin-inline: auto;
  max-width: 67rem;
}

.cms-id-4 .viva-about__eyebrow {
  color: #cfe3ed;
  font-size: 0.9rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  margin: 0 0 1.5rem;
  text-transform: uppercase;
}

.cms-id-4 .viva-about__hero h1 {
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.7rem, 6vw, 5.6rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.08;
  margin: 0;
}

.cms-id-4 .viva-about__intro {
  display: grid;
  gap: clamp(2rem, 6vw, 6rem);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  margin-inline: auto;
  max-width: 76rem;
  padding: clamp(4rem, 8vw, 7rem) 1.25rem;
}

.cms-id-4 .viva-about__intro h2,
.cms-id-4 .viva-about__values-heading {
  color: var(--viva-navy);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.25rem, 4vw, 3.8rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.12;
  margin: 0;
}

.cms-id-4 .viva-about__copy {
  color: #334b5a;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.75;
}

.cms-id-4 .viva-about__copy p:last-child {
  margin-bottom: 0;
}

.cms-id-4 .viva-about__afta {
  margin-inline: auto;
  max-width: 86rem;
  padding: 0 1.25rem clamp(4rem, 8vw, 7rem);
}

.cms-id-4 .viva-about__afta-header {
  align-items: end;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  margin-bottom: 1.75rem;
}

.cms-id-4 .viva-about__afta-header h2 {
  color: var(--viva-navy);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.25rem, 4vw, 3.8rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.12;
  margin: 0;
}

.cms-id-4 .viva-about__afta-header p {
  color: #48606e;
  line-height: 1.6;
  margin: 0;
  max-width: 33rem;
}

.cms-id-4 .viva-about__afta-gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

.cms-id-4 .viva-about__feature {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  margin-inline: auto;
  max-width: 86rem;
  padding: clamp(2.5rem, 6vw, 5rem) 1.25rem;
}

.cms-id-4 .viva-about__feature--reverse {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.cms-id-4 .viva-about__feature--reverse .viva-about__feature-text {
  order: 2;
}

.cms-id-4 .viva-about__feature--reverse .viva-about__feature-media {
  order: 1;
}

.cms-id-4 .viva-about__feature-text h2 {
  color: var(--viva-navy);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.14;
  margin: 0 0 1.25rem;
}

.cms-id-4 .viva-about__feature-text p {
  color: #334b5a;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.75;
  margin: 0;
}

.cms-id-4 .viva-about__feature-media {
  box-shadow: 0 16px 38px rgb(7 26 41 / 11%);
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.cms-id-4 .viva-about__feature-media img {
  aspect-ratio: 4 / 3;
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms ease;
  width: 100%;
}

.cms-id-4 .viva-about__feature-media:hover img,
.cms-id-4 .viva-about__feature-media:focus-visible img {
  transform: scale(1.03);
}

@media (max-width: 767.98px) {
  .cms-id-4 .viva-about__feature,
  .cms-id-4 .viva-about__feature--reverse {
    grid-template-columns: minmax(0, 1fr);
  }

  .cms-id-4 .viva-about__feature--reverse .viva-about__feature-text,
  .cms-id-4 .viva-about__feature--reverse .viva-about__feature-media {
    order: initial;
  }
}

.cms-id-4 .viva-about__afta-photo {
  background: #fff;
  box-shadow: 0 16px 38px rgb(7 26 41 / 11%);
  color: var(--viva-text);
  display: block;
  margin-inline: auto;
  max-width: 46rem;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 180ms ease, transform 180ms ease;
  width: 100%;
}

.cms-id-4 .viva-about__afta-photo:hover,
.cms-id-4 .viva-about__afta-photo:focus-visible {
  box-shadow: 0 22px 44px rgb(7 26 41 / 18%);
  color: var(--viva-blue);
  transform: translateY(-3px);
}

.cms-id-4 .viva-about__afta-photo img {
  aspect-ratio: 16 / 10;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.cms-id-4 .viva-about__afta-photo span {
  align-items: center;
  display: flex;
  font-size: 0.95rem;
  font-weight: 700;
  justify-content: space-between;
  min-height: 3.75rem;
  padding: 0.85rem 1rem;
}

.cms-id-4 .viva-about__afta-photo span::after {
  content: "View photo \2197";
  color: var(--viva-blue);
  font-size: 0.8rem;
  font-weight: 700;
}

.cms-id-4 .viva-about__values {
  margin-inline: auto;
  max-width: 76rem;
  padding: 0 1.25rem;
}

.cms-id-4 .viva-about__values-heading {
  margin-bottom: 2rem;
  text-align: center;
}

.cms-id-4 .viva-about__values-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cms-id-4 .viva-about__value {
  background: rgb(255 255 255 / 82%);
  border: 1px solid rgb(255 255 255 / 72%);
  box-shadow: 0 14px 34px rgb(7 26 41 / 9%);
  min-height: 14rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.cms-id-4 .viva-about__value-number {
  color: var(--viva-blue);
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-bottom: 2rem;
}

.cms-id-4 .viva-about__value h3 {
  color: var(--viva-navy);
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}

.cms-id-4 .viva-about__value p {
  color: #48606e;
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 767.98px) {
  .cms-id-4 .viva-about__hero {
    min-height: 27rem;
    padding-block: 4rem;
  }

  .cms-id-4 .viva-about__intro,
  .cms-id-4 .viva-about__values-grid {
    grid-template-columns: 1fr;
  }

  .cms-id-4 .viva-about__intro {
    gap: 1.5rem;
  }

  .cms-id-4 .viva-about__value {
    min-height: auto;
  }

  .cms-id-4 .viva-about__afta-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.75rem;
  }

  .cms-id-4 .viva-about__afta-photo {
    max-width: none;
  }
}

.page-registration .register-form__company-details,
body#registration .register-form__company-details {
  border-bottom: 1px solid var(--viva-border);
  margin-bottom: 1.25rem;
  padding-bottom: 0.25rem;
}

.page-registration .register-form__contact-person,
body#registration .register-form__contact-person {
  border: 0;
  margin: 0 0 1.25rem;
  min-inline-size: 0;
  padding: 0;
}

.page-registration .register-form__contact-person legend,
body#registration .register-form__contact-person legend {
  color: var(--viva-navy);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  padding: 0;
}

.viva-code-input-group {
  align-items: stretch;
}

.viva-code-input-group .viva-send-code-button {
  white-space: nowrap;
}

.viva-send-code-feedback {
  margin-top: 0.375rem;
}

.viva-send-code-feedback.text-danger {
  color: var(--bs-danger, #dc3545);
}

/* The blockwishlist module ships `width/height: inherit !important` inside
   the `ps-modules` cascade layer. This file compiles unlayered, and per the
   CSS Cascade Layers spec unlayered !important always loses to layered
   !important (layer order is reversed for !important, but unlayered is
   still weakest of all) - so a plain !important override here can never
   win, no matter how it's written. It must be placed in a layer that comes
   before `ps-modules` in the declared layer order (see the `@layer` list
   at the top of the compiled theme CSS) to take priority. */
@layer ps-base {
  /* Scoped to the listing card: this pins the heart to the top-right corner of
     the product thumbnail. It used to apply to every .wishlist-button-add,
     which dragged the product-page heart (which lives in the qty/add-to-cart
     row, not in a positioned thumbnail) out to left: -44px - off screen, which
     is why the detail page looked like it had no heart at all. */
  .thumbnail-container .wishlist-button-add {
    background-color: transparent !important;
    border: none !important;
    bottom: auto !important;
    box-shadow: none !important;
    display: flex !important;
    flex: none !important;
    height: 2.25rem !important;
    inset: 0.5rem 0.5rem auto auto !important;
    left: auto !important;
    margin: 0 !important;
    max-height: 2.25rem !important;
    max-width: 2.25rem !important;
    min-height: 0 !important;
    min-width: 0 !important;
    position: absolute !important;
    right: 0.5rem !important;
    top: 0.5rem !important;
    transform: none !important;
    width: 2.25rem !important;
  }

  /* Wishlist is not wired up yet: blockwishlist renders its dialogs through
     displayFooter, which this theme's footer does not call, so clicking the
     heart flips the icon and sends nothing - customers are told a product was
     saved when it was not. Hide the entry points until the feature is actually
     connected, then delete this rule (and restore the header.tpl link).
     Must live in this layer: a layered !important beats anything unlayered, so
     an unlayered hide would lose to the `display: flex !important` above. The
     .thumbnail-container selector is repeated here because same-layer,
     same-importance ties fall through to specificity - a bare
     .wishlist-button-add (0,1,0) would lose to the scoped rule above (0,2,0). */
  .wishlist-button,
  .wishlist-button-add,
  .thumbnail-container .wishlist-button-add {
    display: none !important;
  }
}

/* "Added to your cart" notice - replaces the blockcart modal (see custom.js). */
#viva-cart-notice {
  align-items: center;
  background: #0d6efd;
  border-radius: 0.5rem;
  bottom: 1.5rem;
  box-shadow: 0 0.5rem 1.5rem rgb(7 26 41 / 25%);
  color: #fff;
  display: flex;
  font-weight: 600;
  gap: 0.5rem;
  left: 50%;
  max-width: calc(100vw - 2rem);
  opacity: 0;
  padding: 0.75rem 1.25rem;
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, 1.5rem);
  transition: transform 0.28s ease, opacity 0.28s ease;
  white-space: nowrap;
  width: max-content;
  z-index: 2000;
}

#viva-cart-notice.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

#viva-cart-notice .material-icons {
  font-size: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  #viva-cart-notice {
    transition: opacity 0.2s ease;
    transform: translate(-50%, 0);
  }
}

/* Checkout step nav: make the whole step one hit target.
   The child override of checkout/_partials/checkout-navigation-step.tpl moves
   the numbered circle inside the <button> (as a sibling <span> it was inert -
   shoppers aim at the breadcrumb dot and nothing happens). These rules restore
   the stacked look: the button becomes a centred column, and its block-start
   padding goes so the circle stays aligned with the ::before/::after connector
   lines the <li> draws at 0.6875rem.
   Plain declarations on purpose - this file compiles unlayered, and unlayered
   normal declarations beat layered ones, so no !important is needed here. */
.checkout-steps__btn.js-viva-step-btn {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding-block-start: 0;
  width: 100%;
}


/* Mobile checkout step bar: the back control added by the child override of
   checkout/_partials/checkout-navigation-step-mobile.tpl. The parent bar is two
   <p> tags with nothing interactive, so below the 768px breakpoint where the
   desktop bar takes over there was no way back from the step bar at all.
   Styled as a link rather than a button so it reads as secondary to the form's
   own primary action.
   Plain declarations - this file compiles unlayered, which already beats the
   theme's layered rules for normal declarations. */
.checkout-steps__back.js-viva-step-back {
  align-items: center;
  align-self: flex-start;
  background: none;
  border: 0;
  color: var(--bs-link-color, #0d6efd);
  display: inline-flex;
  font: inherit;
  gap: 0.125rem;
  margin: 0;
  /* min-height, not padding, so the tap target reaches the 44px guideline
     without pushing the text away from the title it belongs to. */
  min-height: 2.75rem;
  padding-block: 0.25rem;
  padding-inline: 0;
  text-align: start;
}

.checkout-steps__back.js-viva-step-back .material-icons {
  font-size: 1.25rem;
}

/* Units on hand, shown under the price on the product page and on listing
   cards (child overrides of catalog/_partials/product-prices.tpl and
   catalog/_partials/miniatures/product.tpl). Wholesale buyers size their order
   from the real figure, so 0 is shown rather than hidden - which is exactly
   when it needs to read as a warning rather than as neutral information, hence
   the [data-stock="0"] rule. */
/* Item number on the product page.

   Hummingbird only prints the reference inside the collapsed "Product Details"
   accordion at the foot of the page. Viva is wholesale - the item number is how
   buyers place the order - so it is repeated here, between the brand and the
   price. Sits above `.product__prices`, outside the `show_price` gate, so it is
   visible to guests too (it already is, in the accordion below). */
.viva-item-number {
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.875rem;
  line-height: 1.4;
  margin-block-end: 0.5rem;
}

.viva-item-number__value {
  color: var(--bs-body-color, #212529);
  font-weight: 600;
}

.viva-stock-level {
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.875rem;
  line-height: 1.4;
  margin-block-start: 0.25rem;
}

.viva-stock-level__count {
  font-weight: 600;
}

.viva-stock-level[data-stock="0"] {
  color: var(--bs-danger, #dc3545);
}

/* Cards are dense - keep it tight and stop it pushing the buttons around.
   .product-miniature__prices is a wrapping flex row, so without flex-basis the
   stock line sits beside the price instead of under it. */
.viva-stock-level--card {
  flex-basis: 100%;
  font-size: 0.8125rem;
  margin-block-start: 0.125rem;
}