/* ==========================================================================
   2026 Updates — Gravity Forms & layout overrides
   ========================================================================== */

/* ---------------------------------------------------------------------------
   .help section – Gravity Form 6 single-line layout
   
   Structure (post-GF update):
   form#gform_6
     └ .gform-body > .gform_fields > .gfield (×2)
     └ .gform-footer (submit)
   --------------------------------------------------------------------------- */

/* Reset Gravity Theme defaults that conflict with the custom layout */
.help .gform_wrapper.gravity-theme,
.help .gform_wrapper.gform-theme--no-framework {
  background: none;
  border: none;
  padding: 0;
  max-width: none;
}

.help .gform_wrapper .gform-body,
.help .gform_wrapper .gform_body {
  padding: 0 !important;
}

.help .gform_wrapper .gform-footer,
.help .gform_wrapper .gform_footer {
  padding: 0 !important;
  margin: 20px 0 0 !important;
  border: none;
}

/* Mobile: button matches select width */
.help .gform_wrapper .gform_button,
.help .gform_wrapper .gform-footer input[type="submit"] {
  width: 256px;
  box-sizing: border-box;
}

/* --- Mobile-first: stacked layout ---------------------------------------- */

.help .gform_wrapper .gform_fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
  grid-template-columns: none !important; /* override GF grid */
}

.help .gform_wrapper .gfield {
  padding: 0;
  margin: 0;
}

/* Labels */
.help .gform_wrapper .gfield_label,
.help .gform_wrapper .gform-field-label {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  margin-bottom: 6px;
}

/* Selects */
.help .gform_wrapper .gfield_select,
.help .gform_wrapper .ginput_container_select select {
  height: 50px;
  width: 256px;
  padding: 0 20px;
  border: 2px solid #fff;
  border-radius: 50px;
  background-color: #fff;
  color: #333;
  font-size: 14px;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer;
}

.help .gform_wrapper .gfield_select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

/* Submit button */
.help .gform_wrapper .gform_button,
.help .gform_wrapper input[type="submit"] {
  height: 50px;
  padding: 0 24px;
  border: 3px solid #fff !important;
  border-radius: 50px;
  background: transparent;
  -webkit-appearance: none !important;
  appearance: none !important;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.help .gform_wrapper .gform_button:hover,
.help .gform_wrapper input[type="submit"]:hover {
  background: #fff;
  color: #004766;
}

/* --- Validation states --------------------------------------------------- */

.help .gform_wrapper .validation_message,
.help .gform_wrapper .gfield_validation_message {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 80, 80, 0.85);
  padding: 4px 12px;
  border-radius: 20px;
  margin-top: 4px;
  display: inline-block;
  white-space: nowrap;
}

.help .gform_wrapper .gform_validation_errors,
.help .gform_wrapper .validation_error {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  background: rgba(255, 80, 80, 0.25);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  padding: 12px 20px;
  margin-bottom: 15px;
  text-align: center;
}

.help .gform_wrapper .gform_validation_errors h2,
.help .gform_wrapper .validation_error h2 {
  color: #fff;
  font-size: 16px;
  margin: 0;
}

.help .gform_wrapper .gfield_error .gfield_select,
.help .gform_wrapper .gfield_error .ginput_container_select select {
  border-color: #ff5050;
  box-shadow: 0 0 0 2px rgba(255, 80, 80, 0.4);
}

/* Hide the default GF validation icon/image */
.help .gform_wrapper .gform_validation_errors img,
.help .gform_wrapper .gform_validation_errors svg,
.help .gform_wrapper .gform_validation_errors > span:first-child {
  display: none;
}

/* --- Desktop: single-line layout (≥ 992px) ------------------------------- */

@media (min-width: 992px) {

  .help .gform_wrapper form {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 15px;
    max-width: 1000px;
    margin: 0 auto;
  }

  .help .gform_wrapper .gform_fields {
    flex-direction: row;
    align-items: flex-end;
    gap: 15px;
    flex: 1;
  }

  .help .gform_wrapper .gfield {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .help .gform_wrapper .gfield_label,
  .help .gform_wrapper .gform-field-label {
    margin-bottom: 0;
    position: static;
  }

  .help .gform_wrapper .gfield_select,
  .help .gform_wrapper .ginput_container_select select {
    width: 256px;
  }

  .help .gform_wrapper .gform-footer,
  .help .gform_wrapper .gform_footer {
    margin-top: 0 !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  .help .gform_wrapper .gform_button,
  .help .gform_wrapper .gform-footer input[type="submit"] {
    width: auto;
  }
}

/* --- Tablet tweaks (768–991px) ------------------------------------------- */

@media (min-width: 768px) and (max-width: 991.98px) {

  .help .gform_wrapper form {
    max-width: 600px;
    margin: 0 auto;
  }

  .help .gform_wrapper .gform_fields {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
  }

  .help .gform_wrapper .gfield {
    flex: 1 1 45%;
  }

  .help .gform_wrapper .gform-footer,
  .help .gform_wrapper .gform_footer {
    text-align: center;
    margin-top: 15px !important;
  }
}


/* ==========================================================================
   Global Gravity Forms styling (all forms except Form 6 in .help section)
   ========================================================================== */

/* --- Wrapper reset ------------------------------------------------------- */

.gform_wrapper.gravity-theme:not(#gform_wrapper_6),
.gform_wrapper.gform-theme--no-framework:not(#gform_wrapper_6) {
  background: none;
  border: none;
  padding: 0;
  max-width: none;
}

/* --- Form heading -------------------------------------------------------- */

.gform_wrapper:not(#gform_wrapper_6) .gform_heading {
  margin-bottom: 20px;
}

.gform_wrapper:not(#gform_wrapper_6) .gform_title {
  font-size: 28px;
  font-weight: 800;
  color: #2c3e50;
  margin: 0 0 8px;
}

.gform_wrapper:not(#gform_wrapper_6) .gform_required_legend {
  font-size: 13px;
  color: #666;
  margin: 0 0 4px;
}

.gform_wrapper:not(#gform_wrapper_6) .gform_description,
.gform_wrapper:not(#gform_wrapper_6) .gfield_html {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}

/* --- Fields grid --------------------------------------------------------- */

.gform_wrapper:not(#gform_wrapper_6) .gform_fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 0;
  margin: 0;
}

.gform_wrapper:not(#gform_wrapper_6) .gfield {
  padding: 0;
  margin: 0;
}

/* Half-width fields side-by-side on desktop */
@media (min-width: 768px) {
  .gform_wrapper:not(#gform_wrapper_6) .gform_fields {
    grid-template-columns: 1fr 1fr;
  }

  .gform_wrapper:not(#gform_wrapper_6) .gfield--width-full,
  .gform_wrapper:not(#gform_wrapper_6) .gfield--type-html,
  .gform_wrapper:not(#gform_wrapper_6) .gfield--type-name,
  .gform_wrapper:not(#gform_wrapper_6) .gfield--type-select:not(.gfield--width-half) {
    grid-column: 1 / -1;
  }

  .gform_wrapper:not(#gform_wrapper_6) .gfield--width-half {
    grid-column: span 1;
  }
}

/* --- Labels -------------------------------------------------------------- */

.gform_wrapper:not(#gform_wrapper_6) .gfield_label,
.gform_wrapper:not(#gform_wrapper_6) .gform-field-label,
.gform_wrapper:not(#gform_wrapper_6) legend.gfield_label {
  font-size: 15px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 6px;
  display: block;
}

.gform_wrapper:not(#gform_wrapper_6) .gfield_required_asterisk {
  color: #e74c3c;
}

/* Sub-labels (First / Last under name fields) */
.gform_wrapper:not(#gform_wrapper_6) .gform-field-label--type-sub {
  font-size: 12px;
  font-weight: 400;
  color: #000;
  margin-top: 4px;
}

/* --- Inputs & selects ---------------------------------------------------- */

.gform_wrapper:not(#gform_wrapper_6) input[type="text"],
.gform_wrapper:not(#gform_wrapper_6) input[type="email"],
.gform_wrapper:not(#gform_wrapper_6) input[type="tel"],
.gform_wrapper:not(#gform_wrapper_6) input[type="number"],
.gform_wrapper:not(#gform_wrapper_6) textarea,
.gform_wrapper:not(#gform_wrapper_6) .gfield_select,
.gform_wrapper:not(#gform_wrapper_6) .ginput_container select {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: none;
  border-radius: 50vw;
  background-color: #e8ecef;
  color: #333;
  font-size: 14px;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.gform_wrapper:not(#gform_wrapper_6) textarea {
  height: auto;
  min-height: 100px;
  padding: 12px 16px;
  border-radius: 20px;
}

.gform_wrapper:not(#gform_wrapper_6) input[type="text"]:focus,
.gform_wrapper:not(#gform_wrapper_6) input[type="email"]:focus,
.gform_wrapper:not(#gform_wrapper_6) input[type="tel"]:focus,
.gform_wrapper:not(#gform_wrapper_6) input[type="number"]:focus,
.gform_wrapper:not(#gform_wrapper_6) textarea:focus,
.gform_wrapper:not(#gform_wrapper_6) .gfield_select:focus,
.gform_wrapper:not(#gform_wrapper_6) .ginput_container select:focus {
  outline: none;
  background-color: #dce1e5;
  box-shadow: 0 0 0 3px rgba(0, 71, 102, 0.25);
}

/* Name field: First + Last side by side */
.gform_wrapper:not(#gform_wrapper_6) .ginput_container_name {
  display: flex;
  gap: 15px;
}

.gform_wrapper:not(#gform_wrapper_6) .ginput_container_name > span {
  flex: 1;
}

.gform_wrapper:not(#gform_wrapper_6) .ginput_container_name input {
  width: 100%;
}

/* --- Submit button ------------------------------------------------------- */

.gform_wrapper:not(#gform_wrapper_6) .gform-footer,
.gform_wrapper:not(#gform_wrapper_6) .gform_footer {
  padding: 0 !important;
  margin: 24px 0 0 !important;
  border: none;
}

.gform_wrapper:not(#gform_wrapper_6) .gform_button,
.gform_wrapper:not(#gform_wrapper_6) input[type="submit"] {
  display: inline-block;
  height: auto;
  padding: 14px 28px;
  border: none;
  border-radius: 50vw;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: #004766;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.gform_wrapper:not(#gform_wrapper_6) .gform_button:hover,
.gform_wrapper:not(#gform_wrapper_6) input[type="submit"]:hover {
  background-color: #003850;
}

/* --- Validation states --------------------------------------------------- */

.gform_wrapper:not(#gform_wrapper_6) .gform_validation_errors,
.gform_wrapper:not(#gform_wrapper_6) .validation_error {
  background: #fef2f2;
  border: 1px solid #e74c3c;
  border-radius: 16px;
  padding: 12px 20px;
  margin-bottom: 18px;
  color: #c0392b;
  font-size: 14px;
}

.gform_wrapper:not(#gform_wrapper_6) .gform_validation_errors h2 {
  font-size: 15px;
  color: #c0392b;
  margin: 0;
}

.gform_wrapper:not(#gform_wrapper_6) .gform_validation_errors img,
.gform_wrapper:not(#gform_wrapper_6) .gform_validation_errors svg,
.gform_wrapper:not(#gform_wrapper_6) .gform_validation_errors > span:first-child {
  display: none;
}

.gform_wrapper:not(#gform_wrapper_6) .validation_message,
.gform_wrapper:not(#gform_wrapper_6) .gfield_validation_message {
  color: #c0392b;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
}

.gform_wrapper:not(#gform_wrapper_6) .gfield_error input,
.gform_wrapper:not(#gform_wrapper_6) .gfield_error select,
.gform_wrapper:not(#gform_wrapper_6) .gfield_error textarea {
  box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.4);
}

/* =============================================================
   NAV RESKIN 2026
   ============================================================= */

:root {
  --tcf-green-new: #709C59;
  --tcf-grey-new:  #434953;
}

/* ----------------------------------------------------------------
   Desktop header
   ---------------------------------------------------------------- */

.site-header {
  background: #fff;
  border-bottom: 1px solid rgba(112, 112, 112, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 40px;
  height: 135px;
}

.header-logo .custom-logo {
  height: 85px;
  width: auto;
  display: block;
}

.header-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  padding-left: 60px;
  height: 100%;
}

/* ---- Utility row (top-right) ---- */

.header-utility {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  padding-top: 30px !important;
  padding-bottom: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}

.utility-login,
.utility-login:visited {
  color: var(--tcf-green-new);
  text-decoration: none !important;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  white-space: nowrap;
}

.utility-login:hover,
.utility-login:focus {
  color: var(--tcf-green-new);
  text-decoration: underline !important;
}

.header-search .widget {
  margin: 0;
}

.header-search input[type="search"],
.header-search input[type="text"] {
  border: 1.2px solid var(--tcf-grey-new);
  border-radius: 100px;
  padding: 6px 18px;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  color: var(--tcf-grey-new);
  background: #fff;
  width: 200px;
  outline: none;
  box-shadow: none;
}
/* Search input: 30px height with 6/12 internal padding. !important needed —
   multiple later concurrent rules reset the dimensions. */
.header-search input[type="search"],
.header-search input[type="text"],
.header-search .wp-block-search__input {
  height: 30px !important;
  padding: 6px 12px !important;
  box-sizing: border-box !important;
  line-height: normal !important;
}

/* Match the SHOP NOW submenu styling across ALL dropdowns:
   green panel, white text, drop flush under the header, hover bridge.
   !important beats the per-item background/color rules further down. */
.primary-nav__list > li.menu-item-has-children > .dropdown-menu {
  background: var(--tcf-green-new) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 10px !important;
  top: calc(100% + 22px) !important;
  min-width: 220px;
}
.primary-nav__list > li.menu-item-has-children > .dropdown-menu li a,
.primary-nav__list > li.menu-item-has-children > .dropdown-menu li a:visited {
  color: #fff !important;
  padding: 6px 14px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em;
}
.primary-nav__list > li.menu-item-has-children > .dropdown-menu li a:hover {
  text-decoration: underline !important;
  color: #fff !important;
}
/* Hover bridge across the 22px drop so the mouse can travel from the
   item to the panel without losing :hover. Inherits the panel's visibility. */
.primary-nav__list > li.menu-item-has-children > .dropdown-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -22px;
  height: 22px;
}

/* Match SHOP NOW's 18px chevron spacing across every dropdown parent link.
   Generic items have no padding-right by default; SHOP NOW has 18px. */
.primary-nav__list > li.menu-item-has-children > a {
  padding-right: 18px !important;
  position: relative !important;
}

/* Force the generic dropdown flush under the header too — beats the later
   concurrent `:not(.shop-now-item)` slide-animation rule (line ~1494)
   which sets top:100% and would otherwise pull the panel up into the header. */
.primary-nav__list > li:not(.shop-now-item) > .dropdown-menu {
  top: calc(100% + 22px) !important;
  transform: translateY(0) !important;
  transition: opacity 0.2s ease, visibility 0s linear 0s, transform 0.2s ease !important;
}
.primary-nav__list > li:not(.shop-now-item):hover > .dropdown-menu,
.primary-nav__list > li:not(.shop-now-item).is-open > .dropdown-menu {
  transform: translateY(0) !important;
}

/* Match SHOP NOW's 18px chevron spacing across every dropdown parent link.
   Generic items have no padding-right by default; SHOP NOW has 18px. */
.primary-nav__list > li.menu-item-has-children > a {
  padding-right: 18px !important;
  position: relative !important;
}

/* Force the generic dropdown flush under the header too — beats the later
   concurrent `:not(.shop-now-item)` slide-animation rule (line ~1494)
   which sets top:100% and would otherwise pull the panel up into the header. */
.primary-nav__list > li:not(.shop-now-item) > .dropdown-menu {
  top: calc(100% + 22px) !important;
  transform: translateY(0) !important;
  transition: opacity 0.2s ease, visibility 0s linear 0s, transform 0.2s ease !important;
}
.primary-nav__list > li:not(.shop-now-item):hover > .dropdown-menu,
.primary-nav__list > li:not(.shop-now-item).is-open > .dropdown-menu {
  transform: translateY(0) !important;
}


/* The concurrent editor added `:not(.shop-now-item)` to override generic
   dropdown padding/backgroud/position with higher specificity. Mirror that
   here so these rules win (same selector, same !important). */
.primary-nav__list > li.menu-item-has-children:not(.shop-now-item) > a {
  padding-right: 18px !important;
}
.primary-nav__list > li.menu-item-has-children:not(.shop-now-item) > .dropdown-menu {
  background: var(--tcf-green-new) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 10px !important;
  top: calc(100% + 22px) !important;
  min-width: 220px;
}
.primary-nav__list > li.menu-item-has-children:not(.shop-now-item) > .dropdown-menu li a,
.primary-nav__list > li.menu-item-has-children:not(.shop-now-item) > .dropdown-menu li a:visited {
  color: #fff !important;
  padding: 6px 14px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em;
}
.primary-nav__list > li.menu-item-has-children:not(.shop-now-item) > .dropdown-menu li a:hover {
  text-decoration: underline !important;
  color: #fff !important;
}
.primary-nav__list > li.menu-item-has-children:not(.shop-now-item) > .dropdown-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -22px;
  height: 22px;
}


.header-search input[type="search"],
.header-search input[type="text"] {
  border: 1.2px solid var(--tcf-grey-new);
  border-radius: 100px;
  padding: 6px 18px;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  color: var(--tcf-grey-new);
  background: #fff;
  width: 200px;
  outline: none;
  box-shadow: none;
}

.header-search input[type="search"]:focus,
.header-search input[type="text"]:focus {
  border-color: var(--tcf-green-new);
}

.header-search .search-form,
.header-search form {
  display: flex;
  align-items: center;
  gap: 0;
}

.header-search .search-submit,
.header-search button[type="submit"] {
  display: none;
}

.header-cart img {
  width: 30px;
  height: auto;
  display: block;
}

/* ---- Primary nav row (bottom-right) ---- */

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 22px;
}

.primary-nav__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.primary-nav__list > li {
  position: relative;
}

/* Pipe separators between items */
.primary-nav__list > li + li::before {
  content: '|';
  color: #000;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  padding: 0 14px;
  pointer-events: none;
  display: inline-block;
}
/* Override concurrent rules: bump desktop nav font +2px. !important needed —
   later rules in this same file set font-size:14px to fit 8 nav items. */
.primary-nav__list > li > a,
.primary-nav__list > li.shop-now-item > a {
  font-size: 16px !important; /* was 14px before; +2px user request */
}

/* Override concurrent li display:flex (line ~1270) which forced each li to
   absorb remaining flex space, pushing the 5 pipe ::before's beyond the
   list width at the bumped 18px font and wrapping onto two lines. */
.primary-nav__list > li { display: list-item; }

.primary-nav__list > li > a {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #000;
  text-decoration: none !important;
  white-space: nowrap;
  display: inline-block;
  transition: color 0.2s ease;
}

.primary-nav__list > li > a:visited {
  color: #000;
}
  top: calc(100% + 22px) !important;
.primary-nav__list > li > a:hover,
.primary-nav__list > li > a:focus {
  color: var(--tcf-green-new);
}

/* ---- SHOP NOW item ---- */

.primary-nav__list > li.shop-now-item > a,
.primary-nav__list > li.shop-now-item > a:visited {
  padding-right: 18px;
  position: relative;
}
.primary-nav__list > li.shop-now-item > a::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'%3E%3Cpath d='M0 0l5 5 5-5z' fill='%23709C59'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

.primary-nav__list > li.shop-now-item.is-open > a::after {
  transform: translateY(-50%) rotate(180deg);
}

/* ---- SHOP NOW dropdown panel ---- */

.primary-nav__list > li.shop-now-item > .dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--tcf-green-new);
  border: 0;
  border-radius: 0;
  padding: 10px;
  min-width: 210px;
  list-style: none;
  margin: 0;
  flex-direction: column;
  gap: 8px;
  z-index: 1001;
}

.primary-nav__list > li.shop-now-item.is-open > .dropdown-menu {
  display: flex;
}

.primary-nav__list > li.shop-now-item > .dropdown-menu li {
  list-style: none;
}

.primary-nav__list > li.shop-now-item > .dropdown-menu li a,
.primary-nav__list > li.shop-now-item > .dropdown-menu li a:visited {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #fff;
  text-decoration: none !important;
  white-space: nowrap;
  display: block;
}

.primary-nav__list > li.shop-now-item > .dropdown-menu li a:hover {
  text-decoration: underline !important;
  color: #fff;
}

/* ---- Sub-menus for other items (future-proof) ---- */

.primary-nav__list > li:not(.shop-now-item) > .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  padding: 10px 0;
  min-width: 200px;
  list-style: none;
  margin: 0;
  z-index: 1001;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.primary-nav__list > li:not(.shop-now-item):hover > .dropdown-menu,
.primary-nav__list > li:not(.shop-now-item).is-open > .dropdown-menu {
  display: block;
}

.primary-nav__list > li:not(.shop-now-item) > .dropdown-menu li a,
.primary-nav__list > li:not(.shop-now-item) > .dropdown-menu li a:visited {
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  color: #000;
  padding: 6px 16px;
  display: block;
  text-decoration: none !important;
}

.primary-nav__list > li:not(.shop-now-item) > .dropdown-menu li a:hover {
  color: var(--tcf-green-new);
}

/* ---- Dropdown: reveal on hover (desktop) ---- */
.primary-nav__list > li.shop-now-item:hover > .dropdown-menu {
  display: flex;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: transform 0.25s ease, visibility 0s linear 0s !important;
}
/* Panel stays solid green while animating in — slide only, no opacity fade
   (fading opacity made the green translucent mid-transition). */
.primary-nav__list > li.shop-now-item > .dropdown-menu {
  transition: transform 0.25s ease, visibility 0s linear 0.25s !important;
}

/* Anchor the SHOP NOW submenu to the menu item, not the header edge.
   A later rule sets the li to position:static + right:40px, which made the
   panel align to #site-header's right edge (far-right, obvious on Safari).
   !important beats those later concurrent rules regardless of order. */
.primary-nav__list > li.shop-now-item {
  position: relative !important;
}
.primary-nav__list > li.shop-now-item > .dropdown-menu {
  right: 0 !important;
  left: auto !important;
  /* li bottom sits ~22px above the header bottom; drop the panel so it opens
     beneath the header like before (header padding below the nav row). */
  top: calc(100% + 22px) !important;
}
/* Invisible bridge across the 33px drop so the mouse can travel from the
   menu item to the panel without losing :hover. Inherits the panel's
   visibility, so it only exists while the panel is open. */
.primary-nav__list > li.shop-now-item > .dropdown-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -22px;
  height: 22px;
}

/* ---- Dropdown arrow: transparent click overlay over the chevron ----
   The chevron visual is the theme's <a>::after; this invisible button only
   provides the arrow its own tap target so the text link stays clickable
   (text navigates, arrow toggles the submenu — see nav.js). */
.mobile-nav__list > li.menu-item-has-children {
  position: relative;
}
.primary-nav__list .nav-arrow,
.mobile-nav__list .nav-arrow {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.primary-nav__list .nav-arrow { width: 22px; }
.mobile-nav__list .nav-arrow { width: 56px; }

/* ----------------------------------------------------------------
   Mobile header bar  (< 1024px)
   ---------------------------------------------------------------- */

:root {
  --tcf-blue: #004766;
  --tcf-sky:  #c4d4e0;
}

.mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  height: 90px;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 1001;
  border-bottom: 1px solid rgba(112, 112, 112, 0.1);
}

.mobile-header__logo .custom-logo {
  height: 60px;
  width: auto;
  display: block;
}

.mobile-header__actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.mobile-header__cart img {
  width: 34px;
  height: auto;
  display: block;
}

.mobile-header__toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  box-shadow: none !important;
  outline: none;
}

.mobile-header__toggle img {
  width: 37px;
  height: 37px;
  display: block;
}

/* ----------------------------------------------------------------
   Mobile nav overlay
   ---------------------------------------------------------------- */

.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--tcf-sky);
  z-index: 2000;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.mobile-nav.is-open {
  transform: translateX(0);
}

body.mobile-nav-open {
  overflow: hidden;
}

.mobile-nav__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
  padding: 0 20px 60px;
}

/* Overlay header row — logo + cart + close, mirrors the bar */
.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 90px;
  margin-bottom: 20px;
}

.mobile-nav__logo .custom-logo {
  height: 60px;
  width: auto;
  display: block;
}

.mobile-nav__actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.mobile-nav__cart img {
  width: 34px;
  height: auto;
  display: block;
}

.mobile-nav__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  box-shadow: none !important;
  outline: none;
}

.mobile-nav__close img {
  width: 37px;
  height: 37px;
  display: block;
}

/* Mobile nav list */
.mobile-nav__list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  text-align: center;
  width: 100%;
}

.mobile-nav__list > li {
  margin-bottom: 34px;
}

.mobile-nav__list > li > a,
.mobile-nav__list > li > a:visited {
  font-family: 'Roboto', sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--tcf-blue);
  text-decoration: none !important;
  letter-spacing: 0.02em;
  display: inline-block;
  transition: color 0.2s ease;
}

.mobile-nav__list > li > a:hover {
  color: var(--tcf-green-new);
}

/* Mobile SHOP NOW */
.mobile-nav__list > li.shop-now-item > a,
.mobile-nav__list > li.shop-now-item > a:visited {
  color: var(--tcf-green-new);
  padding-right: 26px;
  position: relative;
}

.mobile-nav__list > li.shop-now-item.is-open > a::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Mobile SHOP NOW sub-menu */
.mobile-nav__list > li.shop-now-item > .dropdown-menu {
  position: static !important;
  float: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  transform: none !important;
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: none;
  text-align: center;
}

.mobile-nav__list > li.shop-now-item.is-open > .dropdown-menu {
  display: block;
}

.mobile-nav__list > li.shop-now-item > .dropdown-menu li {
  margin-bottom: 20px;
}

.mobile-nav__list > li.shop-now-item > .dropdown-menu li:last-child {
  margin-bottom: 0;
}

/* Kill theme button hover/focus/active bg on mobile menu buttons */
.mobile-header__toggle,
.mobile-header__toggle:hover,
.mobile-header__toggle:focus,
.mobile-header__toggle:active,
.mobile-nav__close,
.mobile-nav__close:hover,
.mobile-nav__close:focus,
.mobile-nav__close:active {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: inherit !important;
}

.mobile-nav__list > li.shop-now-item > .dropdown-menu li a,
.mobile-nav__list > li.shop-now-item > .dropdown-menu li a:visited {
  font-family: 'Roboto', sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--tcf-green-new);
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: inline-block;
  transition: color 0.2s ease;
}

.mobile-nav__list > li.shop-now-item > .dropdown-menu li a:hover {
  color: var(--tcf-blue);
}

/* Mobile utility (login + search) */
.mobile-nav__utility {
  margin-top: auto;
  padding-top: 40px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.mobile-nav__login,
.mobile-nav__login:visited {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--tcf-blue);
  text-decoration: none !important;
}

.mobile-nav__search .widget { margin: 0; }

.mobile-nav__search input[type="search"],
.mobile-nav__search input[type="text"] {
  border: 1.2px solid var(--tcf-grey-new);
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  color: var(--tcf-grey-new);
  background: transparent;
  width: 300px;
  max-width: 100%;
  outline: none;
}

.mobile-nav__search .search-submit,
.mobile-nav__search button[type="submit"] {
  display: none;
}

/* ----------------------------------------------------------------
   Responsive — show/hide
   ---------------------------------------------------------------- */

@media (max-width: 1023px) {
  .mobile-header { display: flex; }
  #site-header   { display: none; }
}

@media (min-width: 1024px) {
  .mobile-header { display: none !important; }
  .mobile-nav    { display: none !important; }
}

/* ----------------------------------------------------------------
   WP admin bar offsets (logged-in) — prevent overlap
   Admin bar: 32px >782px, 46px ≤782px. On the front end it is
   fixed >600px and absolute (scrolls away) ≤600px.
   ---------------------------------------------------------------- */

/* Sticky headers: shift the stick point down by the bar height.
   (≤600px the bar is absolute + html has margin-top, so top:0 is fine.) */
body.admin-bar #site-header  { top: 32px; }
body.admin-bar .mobile-header { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .mobile-header { top: 46px; }
}
@media screen and (max-width: 600px) {
  body.admin-bar .mobile-header { top: 0; }
}

/* Fixed overlay: keep it full-viewport (top:0) so the sky bg fills behind
   the bar, and pad the CONTENT down so it clears the bar at every scroll
   position (the bar's own dark bg covers the top sky strip). */
body.admin-bar .mobile-nav__inner { padding-top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .mobile-nav__inner { padding-top: 46px; }
}

/* Guard: ensure old header selectors don't bleed if markup reverted */
header .nav_logo,
header .nav_menus,
header .account_nav,
.navbar-expand-lg,
.mobile_logo {
  display: none !important;
}

/* =============================================================
   NAV QA — PASS 1
   ============================================================= */

/* ---- 1. Fix nav list alignment (items were starting from left) ---- */
.primary-nav__list {
  justify-content: flex-end;
}

/* ---- 2. Vertical distribution within header-right ---- */
.header-right {
  justify-content: space-between;
}
.header-utility {
  padding-top: 22px;
  padding-bottom: 0;
}

/* ---- 3. Reduce nav font + pipe padding to fit 8 items ---- */
.primary-nav__list > li > a {
  font-size: 14px;
}
.primary-nav__list > li.shop-now-item > a {
  font-size: 14px;
}
.primary-nav__list > li + li::before {
  font-size: 14px;
  padding: 0 8px;
}

/* ---- 4. Kill old Font Awesome caret on new nav ---- */
.primary-nav__list .menu-item-has-children > a::after {
  display: none !important;
  content: none !important;
}
.mobile-nav__list .menu-item-has-children > a::after {
  display: none !important;
  content: none !important;
}

/* ---- 5. Our own caret for non-SHOP-NOW items with children ---- */
.primary-nav__list > li.menu-item-has-children:not(.shop-now-item) > a {
  padding-right: 14px;
  position: relative;
}
.primary-nav__list > li.menu-item-has-children:not(.shop-now-item) > a::after {
  display: inline-block !important;
  content: '' !important;
  width: 8px;
  height: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'%3E%3Cpath d='M0 0l5 5 5-5z' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  font-family: inherit;
  font-weight: normal;
}
.primary-nav__list > li.menu-item-has-children:not(.shop-now-item):hover > a::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'%3E%3Cpath d='M0 0l5 5 5-5z' fill='%23709C59'/%3E%3C/svg%3E");
}

/* ---- 6. Hide search label ---- */
.header-search .wp-block-search__label,
.mobile-nav__search .wp-block-search__label {
  display: none !important;
}

/* ---- 7. Search input placeholder + button ---- */
.header-search .wp-block-search__input {
  border: 1.2px solid var(--tcf-grey-new);
  border-radius: 100px;
  padding: 6px 18px;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  color: var(--tcf-grey-new);
  background: #fff;
  width: 200px;
  outline: none;
  box-shadow: none;
}
.header-search .wp-block-search__button-wrapper,
.header-search .wp-block-search__button {
  display: none !important;
}
.header-search .wp-block-search__inside-wrapper {
  border: none !important;
  padding: 0 !important;
}

/* ---- 8. Depth-1 dropdown items — no FA caret ---- */
.primary-nav__list > li > .dropdown-menu li.menu-item-has-children > a::after {
  display: none !important;
  content: none !important;
}

/* ---- 9. Depth-2 nested dropdown — fly out to right ---- */
.primary-nav__list > li > .dropdown-menu .dropdown-menu {
  position: absolute;
  left: 100%;
  top: 0;
  display: none !important;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 0 8px 8px 0;
  padding: 10px 0;
  min-width: 200px;
  z-index: 1002;
  box-shadow: 4px 4px 12px rgba(0,0,0,0.08);
  list-style: none;
  margin: 0;
}
.primary-nav__list > li > .dropdown-menu li:hover > .dropdown-menu {
  display: block !important;
}

/* ---- 10. Depth-1 dropdown link styles (inside white panel) ---- */
.primary-nav__list > li:not(.shop-now-item) > .dropdown-menu > li > a,
.primary-nav__list > li:not(.shop-now-item) > .dropdown-menu > li > a:visited {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #333;
  padding: 8px 18px;
  display: block;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.primary-nav__list > li:not(.shop-now-item) > .dropdown-menu > li > a:hover {
  color: var(--tcf-green-new);
}

/* ---- 11. Depth-2 dropdown link styles ---- */
.primary-nav__list > li > .dropdown-menu .dropdown-menu > li > a,
.primary-nav__list > li > .dropdown-menu .dropdown-menu > li > a:visited {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #333;
  padding: 8px 18px;
  display: block;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.primary-nav__list > li > .dropdown-menu .dropdown-menu > li > a:hover {
  color: var(--tcf-green-new);
}

/* =============================================================
   NAV QA — PASS 2  (li height, ico-dropdown, uppercase)
   ============================================================= */

/* ---- 1. Make every li a flex row so ::before pipe & <a> share the same
           baseline — fixes first item being shorter than the rest ---- */
.primary-nav__list > li {
  display: flex;
  align-items: center;
}

/* ---- 2. Reset Bootstrap .nav-link padding bleeding onto <a> ---- */
.primary-nav__list > li > a {
  padding: 0 !important;
}
.primary-nav__list > li.menu-item-has-children:not(.shop-now-item) > a {
  padding-right: 14px !important;
}
.primary-nav__list > li.shop-now-item > a {
  padding-right: 18px !important;
}

/* ---- 3. Uppercase nav text ---- */
.primary-nav__list > li > a {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mobile-nav__list > li > a {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- 4. ico-dropdown.svg via CSS mask — desktop ---- */

/* Base: kill all old ::after rules on nav items */
.primary-nav__list li > a::after {
  content: none !important;
  display: none !important;
}

/* SHOP NOW caret — green, flips when open */
.primary-nav__list > li.shop-now-item > a::after {
  content: '' !important;
  display: inline-block !important;
  width: 11px;
  height: 7px;
  -webkit-mask: url('../img/ico-dropdown.svg') no-repeat center / contain;
  mask: url('../img/ico-dropdown.svg') no-repeat center / contain;
  background-color: var(--tcf-green-new);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease, background-color 0.2s ease;
  border: none;
  font-family: inherit;
}
.primary-nav__list > li.shop-now-item.is-open > a::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Other items with children — dark caret, turns green on hover */
.primary-nav__list > li.menu-item-has-children:not(.shop-now-item) > a::after {
  content: '' !important;
  display: inline-block !important;
  width: 11px;
  height: 7px;
  -webkit-mask: url('../img/ico-dropdown.svg') no-repeat center / contain;
  mask: url('../img/ico-dropdown.svg') no-repeat center / contain;
  background-color: #000;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color 0.2s ease;
  border: none;
  font-family: inherit;
}
.primary-nav__list > li.menu-item-has-children:not(.shop-now-item):hover > a::after {
  background-color: var(--tcf-green-new);
}

/* ---- 5. ico-dropdown.svg via CSS mask — mobile SHOP NOW ---- */
.mobile-nav__list > li.shop-now-item > a::after {
  content: '' !important;
  display: inline-block !important;
  width: 17px;
  height: 9px;
  -webkit-mask: url('../img/ico-dropdown.svg') no-repeat center / contain;
  mask: url('../img/ico-dropdown.svg') no-repeat center / contain;
  background-color: var(--tcf-green-new);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
  border: none;
}
.mobile-nav__list > li.shop-now-item.is-open > a::after {
  transform: translateY(-50%) rotate(180deg);
}

/* =============================================================
   NAV QA — PASS 3  (full-width header + dropdown slide)
   ============================================================= */

/* ---- 1. .site-header is a flex container (Bootstrap header rule);
           make .header-inner fill it instead of shrinking to content ---- */
.site-header {
  display: block;
}
.header-inner {
  width: 100%;
  margin: 0 auto;
}

/* ---- 2. Anchor SHOP NOW dropdown to the header so it slides down from
           directly beneath the bar, flush with its bottom edge ---- */
.primary-nav__list > li.shop-now-item {
  position: static;
}

.primary-nav__list > li.shop-now-item > .dropdown-menu {
  position: absolute;
  top: 100%;
  right: 40px;      /* align with .header-inner padding */
  left: auto;
  display: flex !important;   /* keep in flow for animation */
  flex-direction: column;
  gap: 8px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.primary-nav__list > li.shop-now-item.is-open > .dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
}

/* ---- 3. Slide animation for other items' dropdowns (hover) ---- */
.primary-nav__list > li:not(.shop-now-item) > .dropdown-menu {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.primary-nav__list > li:not(.shop-now-item):hover > .dropdown-menu,
.primary-nav__list > li:not(.shop-now-item).is-open > .dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

/* Nested depth-2 stays instant (already flies out on hover) */
.primary-nav__list > li > .dropdown-menu .dropdown-menu {
  transition: none;
  transform: none;
}

/* =============================================================
   FOOTER RESKIN 2026
   ============================================================= */

:root {
  --footer-green: #a3b861;
}

.site-footer {
  background: #004766;
  padding: 0;
}

/* kill the old gradient top bar */
.site-footer::before {
  content: none !important;
  display: none !important;
}

.site-footer__inner {
  display: flex;
  gap: clamp(40px, 8vw, 120px);
  align-items: flex-start;
  max-width: 1500px;
  margin: 0 auto;
  padding: 60px 40px;
}

/* Logo — white on blue */
.site-footer__logo-link {
  display: block;
  width: 198px;
  height: 85px;
  background: url('../img/ico-footer-logo.svg') no-repeat center / contain;
}

/* Column headings */
.site-footer .widget-title {
  font-family: 'Visby Round CF', sans-serif;
  font-weight: bold;
  font-size: 22px;
  line-height: 30px;
  color: var(--footer-green);
  margin: 0 0 20px;
}

/* Link lists (widget nav menus) + contact */
.site-footer .menu,
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer .menu li {
  margin: 0 0 8px;
}
.site-footer .menu li:last-child {
  margin-bottom: 0;
}

.site-footer a,
.site-footer .menu a,
.site-footer .menu a:visited {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  text-decoration: none !important;
  transition: color 0.2s ease;
  padding: 0 !important;
  display: inline-block;
}

.site-footer a:hover,
.site-footer .menu a:hover {
  color: var(--footer-green);
}

/* Contact column */
.site-footer__contact {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  font-style: normal;
  margin: 0 0 24px;
}
.site-footer__contact p {
  margin: 0 0 8px;
}
.site-footer__contact p:last-child {
  margin-bottom: 0;
}
.site-footer__contact a,
.site-footer__contact a:visited {
  color: #fff;
}
.site-footer__contact a:hover {
  color: var(--footer-green);
}

/* Social icons */
.site-footer__socials {
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-footer__socials a {
  display: inline-flex;
  transition: opacity 0.2s ease;
}
.site-footer__socials a:hover {
  opacity: 0.7;
}
.site-footer__socials img {
  width: 25px;
  height: 25px;
  display: block;
}

/* Mobile — stack columns */
@media (max-width: 991px) {
  .site-footer__inner {
    flex-direction: column;
    gap: 40px;
    padding: 40px 20px;
  }
}

/* =============================================================
   FIX: kill legacy Bootstrap `.dropdown:hover .dropdown-menu`
   animation (@keyframes anim) that replays on every hover and
   makes the click-opened SHOP NOW panel flicker in/out.
   Our open/close uses .is-open + transition, not animation.
   ============================================================= */
.primary-nav__list .dropdown-menu,
.mobile-nav__list .dropdown-menu {
  animation: none !important;
}
/* keep hover from repainting the panel bg with the old green */
.primary-nav__list > li.shop-now-item:hover > .dropdown-menu {
  background-color: var(--tcf-green-new) !important;
}

/* =============================================================
   FINAL OVERRIDES — generic dropdowns
   Must come AFTER the concurrent rules at line 1454 (padding) and 1494
   (top/transform). Same specificity so cascade order decides; placed at the
   end of the file to win.
   ============================================================= */
li.menu-item.menu-item-has-children:not(.shop-now-item) > a {
  padding-right: 18px !important;
}
li.menu-item.menu-item-has-children:not(.shop-now-item) > .dropdown-menu {
  top: calc(100% + 22px) !important;
  transform: translateY(0) !important;

}

/* SHOP NOW final overrides — concurrent rules at lines 1316/1454/1564 set
   14px padding, top:100% and right:40px. We anchor the panel to the li
   (not the header) and drop it flush under the header. */
li.menu-item.menu-item-has-children.shop-now-item {
  position: relative !important;
}
li.menu-item.menu-item-has-children.shop-now-item > a {
  padding-right: 18px !important;
}
li.menu-item.menu-item-has-children.shop-now-item > .dropdown-menu {
  right: 0 !important;
  left: auto !important;
  top: calc(100% + 22px) !important;
  transform: translateY(0) !important;
}