/* =========================================================
   PLCSEA GLOBAL SHELL
   Header / Navigation / Search / Footer
   ========================================================= */


/* =========================================================
   UTILITY BAR
   ========================================================= */

html {
	overflow-y: scroll;
	scrollbar-gutter: stable;
}

html,
body {
	max-width: 100%;
	overflow-x: clip;
}

.utility-bar {
  position: relative;
  z-index: 920;

  width: 100%;
  min-height: 36px;

  border-bottom: 1px solid rgba(255,255,255,.08);

  background:
    linear-gradient(
      90deg,
      #06182f 0%,
      #04162d 55%,
      #03142a 100%
    );

  color: rgba(255,255,255,.82);
}

.utility-bar__inner {
  display: flex;

  width: min(calc(100% - 4rem), 1360px);
  min-height: 36px;

  margin-inline: auto;

  align-items: center;
  justify-content: space-between;

  gap: 1rem;
}

.utility-bar__links {
  display: flex;

  align-items: center;

  gap: 0;
}

.utility-bar__links a {
  position: relative;

  display: inline-flex;

  min-height: 36px;

  align-items: center;

  padding-inline: .78rem;

  color: rgba(255,255,255,.74);

  font-size: .66rem;
  font-weight: 650;
  line-height: 1;

  transition:
    color 160ms ease;
}

.utility-bar__links a:first-child {
  padding-right: 0;
}

.utility-bar__links a:not(:last-child)::after {
  position: absolute;

  top: 50%;
  left: 0;

  width: 1px;
  height: 11px;

  background: rgba(255,255,255,.20);

  content: "";

  transform: translateY(-50%);
}

.utility-bar__links a:hover {
  color: #fff;
}

.utility-bar__contact {
  display: inline-flex;

  min-height: 36px;

  align-items: center;

  gap: .72rem;

  color: rgba(255,255,255,.82);

  font-size: .67rem;
  font-weight: 700;
}

.utility-bar__contact::before {
  width: 21px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      #0fc8e8,
      #1985ff
    );

  content: "";
}

.utility-bar__phone {
  position: relative;

  padding-right: .75rem;

  color: #fff;

  font-size: .69rem;
  font-weight: 780;

  letter-spacing: .015em;
}

.utility-bar__phone::before {
  position: absolute;

  top: 50%;
  right: 0;

  width: 1px;
  height: 11px;

  background: rgba(255,255,255,.20);

  content: "";

  transform: translateY(-50%);
}

.utility-bar__phone:hover {
  color: #8beaff;
}


/* =========================================================
   MAIN HEADER
   ========================================================= */

.site-header {
  position: sticky;
  z-index: 900;

  top: var(--admin-bar-offset, 0);

  height: 86px;

  border-bottom: 1px solid #dce8f3;

  background: rgba(255,255,255,.985);

  box-shadow:
    0 3px 16px rgba(5,33,70,.025);

  backdrop-filter: blur(14px);

  transition:
    height 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.site-header.is-compact {
  height: 70px;

  background: rgba(255,255,255,.97);

  box-shadow:
    0 8px 28px rgba(5,33,70,.065);
}

body.search-open {
  overflow: hidden;
}

.header-inner {
  position: relative;

  display: grid;

  width: min(calc(100% - 4rem), 1360px);
  height: 100%;

  margin-inline: auto;

  align-items: center;

  grid-template-columns:
    220px
    minmax(0,1fr)
    auto;

  gap: 1.5rem;
}


/* ---------------------------------------------------------
   Brand
   --------------------------------------------------------- */

.header-brand {
  display: flex;

  min-width: 0;

  align-items: center;
  justify-content: flex-start;
}

.header-brand .custom-logo-link,
.header-brand .site-logo {
  display: flex;

  align-items: center;
}

.header-brand img {
  display: block;

  width: 205px;
  max-height: 62px;

  object-fit: contain;
  object-position: right center;

  transition:
    width 180ms ease,
    max-height 180ms ease;
}

.site-header.is-compact .header-brand img {
  width: 178px;
  max-height: 51px;
}

.header-signal {
  position: absolute;

  right: 0;
  bottom: -1px;

  width: 110px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #13c8e8,
      #0784ff
    );
}


/* =========================================================
   PRIMARY NAVIGATION
   ========================================================= */

.primary-navigation {
  min-width: 0;
}

.primary-navigation > ul,
.primary-navigation .menu {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: clamp(.9rem, 1.45vw, 1.65rem);

  margin: 0;
  padding: 0;

  list-style: none;
}

.primary-navigation li {
  position: relative;
}

.primary-navigation a {
  position: relative;

  display: flex;

  min-height: 52px;

  align-items: center;

  color: #0a2242;

  font-size: .76rem;
  font-weight: 790;

  white-space: nowrap;

  transition:
    color 160ms ease;
}

.primary-navigation a::after {
  position: absolute;

  right: 0;
  bottom: 0;
  left: 0;

  height: 2px;

  border-radius: 2px;

  background:
    linear-gradient(
      90deg,
      #0784ff,
      #16c6e5
    );

  content: "";

  transform: scaleX(0);
  transform-origin: center;

  transition:
    transform 180ms ease;
}

.primary-navigation a:hover,
.primary-navigation .current-menu-item > a,
.primary-navigation .current-menu-ancestor > a {
  color: #086ed4;
}

.primary-navigation a:hover::after,
.primary-navigation .current-menu-item > a::after,
.primary-navigation .current-menu-ancestor > a::after {
  transform: scaleX(1);
}


/* ---------------------------------------------------------
   Sub menu
   --------------------------------------------------------- */

.primary-navigation .sub-menu {
  position: absolute;

  top: calc(100% + 8px);
  right: -.8rem;

  display: grid;

  width: 225px;

  gap: 0;

  padding: .55rem;

  border: 1px solid #dce7f2;
  border-radius: 9px;

  background: #fff;

  box-shadow:
    0 18px 45px rgba(4,29,62,.12);

  opacity: 0;
  visibility: hidden;

  transform: translateY(-5px);

  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 160ms ease;
}

.primary-navigation li:hover > .sub-menu,
.primary-navigation li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;

  transform: none;
}

.primary-navigation .sub-menu a {
  min-height: 39px;

  padding-inline: .65rem;

  border-radius: 6px;

  font-size: .71rem;
}

.primary-navigation .sub-menu a::after {
  display: none;
}

.primary-navigation .sub-menu a:hover {
  background: #f2f8fd;
}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.header-actions {
  display: flex;

  align-items: center;

  gap: .1rem;

  direction: ltr;
}

.header-actions > .icon-button {
  margin-inline: .15rem;
}

.header-account,
.header-cart {
  position: relative;

  display: inline-flex;

  min-height: 46px;

  align-items: center;

  gap: .45rem;

  padding-inline: .72rem;

  border-left: 1px solid #e0eaf3;

  color: #0a2242;

  font-size: .69rem;
  font-weight: 770;

  direction: rtl;
}

.header-account svg,
.header-cart svg {
  width: 20px;
  height: 20px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-cart {
  border-left: 0;
}

.cart-count {
  display: grid;

  min-width: 18px;
  height: 18px;

  place-items: center;

  border-radius: 50%;

  background: #087cf2;

  color: #fff;

  font-family: var(--plcsea-font-tech);

  font-size: .57rem;
}

.nav-toggle {
  display: none;
}

.mobile-nav-header,
.mobile-nav-heading,
.mobile-nav-tools,
.mobile-nav-backdrop,
.mobile-only-menu-item {
  display: none;
}


/* =========================================================
   SEARCH DIALOG
   ========================================================= */

.search-dialog {
  position: fixed;
  z-index: 2000;

  inset: 0;

  display: block;
}

.search-dialog[hidden] {
  display: none;
}

.search-dialog__backdrop {
  position: absolute;

  inset: 0;

  background: rgba(4,18,40,.56);

  backdrop-filter: blur(4px);
}

.search-dialog__panel {
  position: relative;

  width: min(calc(100% - 2rem),760px);

  margin: min(16vh,130px) auto 0;

  padding: 1.5rem;

  border: 1px solid rgba(255,255,255,.75);
  border-radius: var(--radius-lg);

  background: #fff;

  box-shadow:
    0 28px 80px rgba(3,23,50,.24);
}

.search-dialog__panel h2 {
  font-size: 1.45rem;
}

.search-dialog__close {
  position: absolute;

  top: .7rem;
  left: .7rem;

  font-size: 1.5rem;
}

.search-form label {
  display: block;
}

.search-form__row {
  display: grid;

  grid-template-columns: 1fr auto;

  gap: .5rem;
}

.search-results {
  display: grid;

  gap: .5rem;

  max-height: none;

  overflow-y: auto;

  margin-top: .8rem;
}

.search-results-page .search-results {
  max-height: none;
  overflow: visible;
}

.search-result {
  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  gap: .7rem;

  padding: .65rem;

  border: 1px solid var(--plcsea-line);
  border-radius: var(--radius-sm);
}

.search-empty {
  margin: 0;

  padding: .75rem;

  border-radius: var(--radius-sm);

  background: var(--plcsea-mist-100);

  color: var(--plcsea-ink-500);

  font-size: .76rem;
}


/* =========================================================
   BREADCRUMBS
   ========================================================= */

.breadcrumbs {
  margin-bottom: .7rem;
}

.breadcrumbs ol {
  display: flex;

  align-items: center;
  flex-wrap: wrap;

  gap: .35rem;

  margin: 0;
  padding: 0;

  color: var(--plcsea-ink-500);

  font-size: .67rem;

  list-style: none;
}

.breadcrumbs li {
  display: inline-flex;

  align-items: center;

  gap: .35rem;
}

.breadcrumbs li:not(:last-child)::after {
  color: #a2b4c6;

  content: "‹";
}

.breadcrumbs a {
  color: var(--plcsea-ink-500);
}

.breadcrumbs a:hover {
  color: var(--plcsea-ocean-600);
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  position: relative;

  overflow: hidden;

  border-top: 1px solid var(--plcsea-line);

  background:
    linear-gradient(
      150deg,
      #f7fbff 0%,
      #fff 50%,
      #eef8ff 100%
    );
}

.footer-ocean {
  position: absolute;

  inset: auto 0 0;

  height: 190px;

  pointer-events: none;

  opacity: .7;
}

.footer-ocean i {
  position: absolute;

  right: -8%;
  bottom: -145px;

  width: 60%;
  height: 220px;

  border: 2px solid rgba(8,124,240,.11);
  border-radius: 50%;

  transform: rotate(-6deg);
}

.footer-ocean i:nth-child(2) {
  right: 32%;
  bottom: -170px;

  border-color: rgba(11,189,229,.13);
}

.footer-ocean i:nth-child(3) {
  right: 64%;
  bottom: -155px;
}

.footer-grid {
  position: relative;

  display: grid;

  grid-template-columns:
    1.45fr
    repeat(5,minmax(110px,.72fr));

  column-gap: clamp(1rem,2.4vw,2.5rem);
  row-gap: 1rem;

  padding-block: 1.45rem 1.02rem;
}

.footer-brand {
  text-align: center;
}

.footer-brand img {
  display: block;

  width: 205px;
  max-height: 112px;

  margin: 0 auto .42rem;

  object-fit: contain;
  object-position: center;
}

.footer-brand > p {
  max-width: 320px;

  margin: .2rem auto .3rem;

  color: var(--plcsea-ink-700);

  font-size: .75rem;
  line-height: 1.65;
  text-align: center;
}

.footer-brand .brand-line {
  color: var(--plcsea-ocean-700);

  margin-top: .35rem;

  font-family: var(--plcsea-font-tech);

  font-size: .65rem;
  font-weight: 800;

  letter-spacing: .06em;
}

.footer-brand .brand-line {
  text-align: center;
}

.brand-line span {
  color: var(--plcsea-cyan-500);
}

.social-links {
  display: flex;

  gap: .4rem;

  margin-top: .8rem;

  direction: ltr;

  justify-content: flex-end;
}

.social-links a {
  display: grid;

  width: 33px;
  height: 33px;

  place-items: center;

  border: 1px solid var(--plcsea-line);
  border-radius: 50%;

  background: #fff;

  color: var(--plcsea-navy-900);

  font-family: var(--plcsea-font-tech);

  font-size: .63rem;
  font-weight: 800;
}

.social-links a:hover {
  border-color: var(--plcsea-ocean-600);

  background: var(--plcsea-ocean-600);

  color: #fff;
}

.footer-column h2,
.footer-newsletter h2 {
  margin-bottom: .55rem;

  font-size: .86rem;
}

.footer-column ul {
  display: grid;

  gap: .36rem;

  margin: 0;
  padding: 0;

  list-style: none;
}

.footer-column li,
.footer-column a,
.footer-column small {
  color: var(--plcsea-ink-700);

  font-size: .69rem;
  line-height: 1.6;
}

.footer-column a {
  font-weight: 520;
}

.footer-column a:hover {
  color: var(--plcsea-ocean-600);
}

.footer-newsletter form {
  display: flex;

  gap: .4rem;
}

.footer-newsletter input {
  min-width: 0;
  min-height: 40px;

  font-size: .72rem;
}

.footer-bottom {
  position: relative;

  border-top: 0;

  background:
    linear-gradient(90deg, #08284b 0%, #0a3763 48%, #08284b 100%);

  color: rgba(255,255,255,.72);
}

.footer-bottom .container {
  display: flex;

  width: min(100% - 48px, var(--container, 1360px));
  min-height: 48px;

  margin-inline: auto;
  padding-block: .55rem;

  align-items: center;
  justify-content: space-between;

  gap: 1rem;
}

.footer-bottom p,
.footer-bottom span {
  margin: 0;

  color: rgba(255,255,255,.68);

  font-size: .61rem;
}

.footer-bottom span {
  font-family: var(--plcsea-font-tech);

  letter-spacing: .08em;
}


/* Footer contact + NaarCode credit */
.footer-bottom .footer-credit {
  margin-inline-start: .45rem;
  font-family: var(--plcsea-font);
  letter-spacing: 0;
}

.footer-credit a {
  color: #58b8ff;
  font-weight: 800;
}

.footer-credit a:hover {
  color: #fff;
}




/* =========================================================
   FOOTER — PLCSEA DIRECT CONTACT / ICON ONLY
   ========================================================= */

.footer-connect {
  min-width: 0;
}

.footer-connect > h2 {
  margin-bottom: .42rem;
}

.footer-contact-stack--icons {
  display: grid;
  grid-template-columns: repeat(2, 38px);
  gap: .42rem;
  width: max-content;
  margin-top: .15rem;
}

.footer-contact-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #d7e5f0;
  border-radius: 9px;
  background: #fff;
  color: var(--plcsea-ocean-700);
  box-shadow: 0 4px 12px rgba(6,37,78,.04);
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    background-color 150ms ease;
}

.footer-contact-icon:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(6,37,78,.075);
}

.footer-contact-icon svg {
  width: 17px;
  height: 17px;
}

.footer-contact-icon--phone {
  color: #087cf0;
  border-color: rgba(8,124,240,.24);
  background: rgba(8,124,240,.07);
}

.footer-contact-icon--phone svg,
.footer-contact-icon--phone svg path,
.footer-contact-icon--phone svg line,
.footer-contact-icon--phone svg polyline {
  stroke: #087cf0;
}

.footer-contact-icon--email {
  color: #e34d59;
  border-color: rgba(227,77,89,.22);
  background: rgba(227,77,89,.065);
}

.footer-contact-icon--email svg,
.footer-contact-icon--email svg path,
.footer-contact-icon--email svg line,
.footer-contact-icon--email svg polyline {
  stroke: #e34d59;
}

.footer-contact-icon--bale {
  border-color: rgba(21,174,170,.20);
  background: rgba(21,174,170,.055);
}

.footer-contact-icon--whatsapp {
  color: #25d366;
  border-color: rgba(37,211,102,.28);
  background: rgba(37,211,102,.075);
}

.footer-contact-icon--whatsapp svg,
.footer-contact-icon--whatsapp svg path {
  fill: #25d366;
  stroke: none;
}

.footer-contact-icon--whatsapp svg {
  width: 18px;
  height: 18px;
}

.footer-contact-icon--bale img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

@media (max-width: 1120px) {
  .footer-contact-stack--icons {
    margin-inline: 0;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    text-align: center;
  }

  .footer-brand,
  .footer-column,
  .footer-connect {
    text-align: center;
  }

  .footer-brand img {
    margin-inline: auto;
    object-position: center;
  }

  .footer-brand > p {
    margin-inline: auto;
  }

  .footer-column ul {
    justify-items: center;
  }

  .footer-column h2,
  .footer-newsletter h2 {
    text-align: center;
  }

  .footer-contact-stack--icons {
    margin-inline: auto;
    grid-template-columns: repeat(4, 36px);
    gap: .5rem;
  }

  .footer-contact-icon {
    width: 36px;
    height: 36px;
  }

  .social-links {
    justify-content: center;
  }

  .footer-bottom .container {
    align-items: center;
    text-align: center;
  }

  .footer-bottom p,
  .footer-bottom span {
    width: 100%;
    text-align: center;
  }

  .footer-bottom .footer-credit {
    display: inline;
    margin-inline-start: .2rem;
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1120px) {

  .utility-bar__inner,
  .header-inner {
    width: min(calc(100% - 3rem),1360px);
  }

  .header-inner {
    grid-template-columns:
      185px
      minmax(0,1fr)
      auto;

    gap: .7rem;
  }

  .header-brand img {
    width: 178px;
  }

  .primary-navigation > ul,
  .primary-navigation .menu {
    gap: .65rem;
  }

  .primary-navigation a {
    font-size: .69rem;
  }

  .header-account span,
  .header-cart__label {
    display: none;
  }

  .footer-grid {
    grid-template-columns:
      1.25fr
      repeat(3,1fr);

    padding-block: 1.3rem .95rem;
  }

  .footer-brand {
    grid-row: span 2;
  }

  .footer-connect {
    grid-column: 2/-1;
  }

}


@media (max-width: 860px) {

  .plcsea-product-hero .product-identity {
        justify-content: center;
        text-align: center;
  }

  .plcsea-product-hero .plcsea-product-hero__title {
    text-align: center;
 } 

  :root {
    --header-height: 68px;
  }

  .utility-bar {
    display: none;
  }

  .header-inner {
    width: min(calc(100% - 2rem),1360px);

    grid-template-columns:
      1fr
      auto
      auto;
  }

  .site-header,
  .site-header.is-compact {
  height: 68px;

  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  } 

  .header-brand img,
  .site-header.is-compact .header-brand img {
    width: 165px;
    max-height: 58px;
  }

  .header-signal {
    right: 0;
    width: 58px;
  }

  .nav-toggle {
    display: inline-grid !important;

    grid-column: 3;
    grid-row: 1;

    align-self: center;
  }

  .header-actions {
    grid-column: 2;
    grid-row: 1;

    align-self: center;
  }

  .header-actions > button[data-search-open] {
    display: none !important;
  }

  .header-actions > .icon-button:not([data-search-open]) {
    display: none;
  }

  body.nav-open {
    overflow: hidden;
  }

  body.nav-open .site-header {
    z-index: 3100;
  }


  /* Mobile navigation backdrop */

  .mobile-nav-backdrop {
    position: fixed;
    z-index: 1;

    top:
      calc(
        var(--header-height) +
        var(--admin-bar-offset,0px)
      );

    right: 0;
    bottom: 0;
    left: 0;

    display: block;

    padding: 0;

    border: 0;

    background: rgba(3,24,53,.38);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    backdrop-filter: blur(2px);

    transition:
      opacity 200ms ease,
      visibility 200ms;
  }

  body.nav-open .mobile-nav-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }


  /* Drawer */

  .primary-navigation {
    position: fixed;
    z-index: 2;

    top:
      calc(
        var(--header-height) +
        var(--admin-bar-offset,0px)
      );

    right: 0;
    bottom: 0;

    display: flex;
    flex-direction: column;

    width: min(88vw,390px);

    height:
      calc(
        100dvh -
        (
          var(--header-height) +
          var(--admin-bar-offset,0px)
        )
      );

    max-height:
      calc(
        100dvh -
        (
          var(--header-height) +
          var(--admin-bar-offset,0px)
        )
      );

    box-sizing: border-box;

    overflow: hidden;

    padding: 0;

    border-left: 1px solid #d8e6f2;

    background:
      linear-gradient(
        180deg,
        #fff 0%,
        #fbfdff 62%,
        #f5faff 100%
      );

    box-shadow:
      -20px 0 55px rgba(3,24,53,.19);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(105%);

    transition:
      transform 240ms ease,
      opacity 180ms ease,
      visibility 240ms;
  }

  .primary-navigation.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: none;
  }


  /* Drawer brand */

  .mobile-nav-header {
    position: relative;
    z-index: 3;

    display: flex;

    width: 100%;
    min-height: 82px;
    flex: 0 0 auto;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin: 0;

    padding: .75rem 1rem;

    box-sizing: border-box;

    border-bottom: 1px solid #dfebf4;

    background: rgba(255,255,255,.98);

    backdrop-filter: blur(12px);
  }

  .mobile-nav-brand {
    display: flex;

    min-width: 0;

    align-items: center;
  }

  .mobile-nav-brand img {
    display: block;

    width: 150px;
    max-height: 58px;

    object-fit: contain;
    object-position: right center;
  }

  .mobile-nav-close {
    display: grid;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    place-items: center;

    padding: 0;

    border: 1px solid #d8e6f2;
    border-radius: 50%;

    background: #f7fbff;

    color: #08264b;

    font-family: Arial,sans-serif;
    font-size: 1.35rem;
    line-height: 1;

    cursor: pointer;

    transition:
      border-color 160ms ease,
      background 160ms ease,
      color 160ms ease;
  }

  .mobile-nav-close:hover {
    border-color: #9bcafb;

    background: #eef7ff;

    color: #087cf0;
  }


  /* Brand line */

  .mobile-nav-heading {
    display: flex;

    flex: 0 0 auto;

    align-items: center;
    justify-content: center;

    gap: .38rem;

    margin: .8rem 1rem;

    padding: .58rem .7rem;

    border-radius: 8px;

    background:
      linear-gradient(
        135deg,
        #061d3d,
        #086ed4
      );

    color: #fff;

    font-family: var(--plcsea-font-tech);

    font-size: .53rem;
    font-weight: 800;

    letter-spacing: .04em;
  }

  .mobile-nav-heading i {
    width: 12px;
    height: 1px;

    flex: 0 0 12px;

    background: #1ad1e8;
  }


  /* Main menu */

  .primary-navigation > ul,
  .primary-navigation .menu {
    display: grid;

    width: 100%;
    min-width: 0;
    min-height: 0;

    flex: 1 1 auto;

    grid-template-columns: minmax(0,1fr);
    align-content: start;
    align-items: stretch;

    gap: .12rem;

    margin: 0;
    padding: 0 1rem .65rem;

    box-sizing: border-box;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;

    list-style: none;
  }

  .primary-navigation li {
    width: 100%;
    min-width: 0;
  }

  .primary-navigation .mobile-only-menu-item {
    display: list-item;
  }

  .primary-navigation a {
    display: flex;

    width: 100%;
    min-width: 0;
    min-height: 42px;

    align-items: center;
    justify-content: flex-start;

    box-sizing: border-box;

    padding: .52rem .75rem;

    border-radius: 7px;

    color: #08264b;

    font-size: .78rem;
    font-weight: 800;
    line-height: 1.7;

    white-space: normal;

    transition:
      background 160ms ease,
      color 160ms ease,
      padding 160ms ease;
  }

  .primary-navigation a:hover,
  .primary-navigation .current-menu-item > a,
  .primary-navigation .current-menu-ancestor > a {
    background:
      linear-gradient(
        90deg,
        #eef7ff,
        #f7fbff
      );

    color: #0871df;
  }

  .primary-navigation .current-menu-item > a,
  .primary-navigation .current-menu-ancestor > a {
    box-shadow:
      inset -3px 0 0 #087cf0;
  }

  .primary-navigation a::after {
    display: none;
  }


  /* Sub menu */

  .primary-navigation .sub-menu {
    position: static;

    display: grid;

    width: 100%;

    gap: .1rem;

    margin: .05rem 0 .25rem;
    padding: 0 .8rem 0 0;

    box-sizing: border-box;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

    opacity: 1;
    visibility: visible;

    transform: none;
  }

  .primary-navigation .sub-menu a {
    min-height: 38px;

    padding: .4rem .65rem;

    color: #587087;

    font-size: .71rem;
    font-weight: 720;
  }


  /* Drawer tools */

  .mobile-nav-tools {
    position: relative;
    z-index: 4;

    display: grid;

    width: 100%;
    flex: 0 0 auto;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr);

    gap: .55rem;

    margin: 0;

    padding:
      .7rem
      1rem
      calc(.8rem + env(safe-area-inset-bottom));

    box-sizing: border-box;

    border-top: 1px solid #dce8f2;

    background: #fff;

    box-shadow:
      0 -8px 22px rgba(5,41,82,.055);
  }

  .mobile-nav-tools a,
  .mobile-nav-tools button {
    display: flex;

    width: 100%;
    min-width: 0;
    height: 42px;
    min-height: 42px;

    align-items: center;
    justify-content: center;

    gap: .4rem;

    margin: 0;
    padding: 0 .5rem;

    box-sizing: border-box;

    border: 1px solid #cfe0ee;
    border-radius: 8px;

    background: #fff;

    color: #08264b;

    font-family: var(--plcsea-font);
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;

    cursor: pointer;

    transition:
      border-color 160ms ease,
      background 160ms ease,
      color 160ms ease;
  }

  .mobile-nav-tools a:hover,
  .mobile-nav-tools button:hover {
    border-color: #91c5f6;

    background: #f1f8ff;

    color: #0871df;
  }

  .mobile-nav-tools .plcsea-icon {
    width: 19px;
    height: 19px;

    flex: 0 0 19px;
  }

  .footer-grid {
    grid-template-columns:
      repeat(2,1fr);

    padding-block: 1.1rem .85rem;
    row-gap: 1.05rem;
  }

  .footer-brand {
    grid-column: 1/-1;
  }

  .footer-connect {
    grid-column: auto;
  }

}


@media (max-width: 560px) {

  .header-inner {
    width: min(calc(100% - 1.25rem),1360px);

    grid-template-columns:
      1fr
      auto
      auto;

    gap: .25rem;
  }

  .header-brand img,
  .site-header.is-compact .header-brand img {
    width: 145px;
  }

  .header-account {
    display: none;
  }

  .header-cart {
    padding-inline: .3rem;
  }

  .search-dialog__panel {
    margin-top: 8vh;

    padding: 1rem;
  }

  .search-form__row {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns:
      1fr
      1fr;

    gap: 1.5rem 1rem;

    padding-block: 2rem;
  }

  .footer-brand,
  .footer-connect {
    grid-column: 1/-1;
  }

  .footer-bottom .container {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;

    gap: .2rem;

    padding-block: .7rem;
  }

}



/* =========================================================
   HEADER FINAL — UTILITY BAR NAVY MATCH
   Matches the footer bottom strip without changing header layout.
   ========================================================= */
.utility-bar {
  background:
    linear-gradient(90deg, #08284b 0%, #0a3763 48%, #08284b 100%) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}

.utility-bar,
.utility-bar a,
.utility-bar span,
.utility-bar__links a,
.utility-bar__contact,
.utility-bar__contact span,
.utility-bar__phone {
  color: rgba(255,255,255,.88) !important;
}

.utility-bar a:hover,
.utility-bar__links a:hover,
.utility-bar__phone:hover {
  color: #ffffff !important;
}

.utility-bar__contact::before,
.utility-bar__contact::after,
.utility-bar__links::before,
.utility-bar__links::after {
  border-color: rgba(88,184,255,.7) !important;
}