/*HEADER STYLING*/

.header-wrapper {
    width: 100%;
    position: relative;
    height: 105px;
}

.desktop.header{
    background-color: #FFFFFF;
    height: 105px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    transition: height 0.3s;
}

.desktop .boxed{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 1440px;
    padding: 0px 20px;
}

.desktop .button-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.desktop .logo {
    display: flex;
    flex-direction: row;
    justify-content; start;
    align-items: center;
    width: 219px;
}

.desktop .logo img{
    width: 100%;
    max-width: 219px;
    transition: max-width 0.2s;
}

.desktop .basket {
    color: #042653 !important;
    font-family: Montserrat;
    font-size: 16px;
    user-select: none;
}

/*ACTIVE HEADER*/

.desktop.header.active {
    width: 100%;
    top: 0px;
    position: fixed;
    z-index: 50;
    height: 72px;
    background-color: rgba(255,255,255,0.8) !important;
    backdrop-filter: blur(38.9px);
}

.desktop.header.active .logo img{
    max-width: 174px;
    transition: max-width 0.3s;
}

/*MENU STYLING*/

.desktop .menu-container li{
	list-style: none;
}

.desktop .menu-container li a{
	color: #042653;
	font-family: montserrat;
	font-size: 16px;
}

.desktop .menu-container ul{
	padding: unset;
}

.desktop .menu-container nav ul{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 20px;
}


/*RIBBON STYLING*/

.contact-ribbon {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-height: 38px;
    background-color: #042653;
}

.contact-ribbon .boxed {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 1440px;
    padding: 0px 20px;
}

.contact-ribbon .contact-method {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.contact-ribbon a {
    font-family: Montserrat;
    font-size: 14px;
    color: #F1F5F9 !important;
}


/* SUB-MENU STYLING */

/* Ensure the parent is the positioning anchor */
.desktop .menu-container li.menu-item-has-children {
    position: relative;
}

/*Align Text to Center*/
.desktop .menu-container .sub-menu li a{
    display: flex;
    text-align: center;
}

.desktop .menu-container .sub-menu li{
    padding: 5px 10px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.2s;
}

.desktop .menu-container .sub-menu li:hover{
    background-color: rgba(0,0,0,0.06);
}

/* Update your existing sub-menu block to push it down */
.desktop .menu-container .sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 50px); /* Moves it down 40px from the parent */
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    border-radius: 8px;
    filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.15));
    min-width: 150px;
    padding: 10px;
    z-index: 100;
}

.desktop.active .menu-container .sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 30px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    border-radius: 8px;
    filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.15));
    min-width: 150px;
    padding: 10px;
    z-index: 100;
}

/* Shrink the invisible bridge to match the 30px active-state gap */
.desktop.active .menu-container .sub-menu::before {
    top: -30px;
    height: 30px;
}

/* The Invisible Bridge - keeps the hover active across the 40px gap */
.desktop .menu-container .sub-menu::before {
    content: '';
    position: absolute;
    top: -50px; /* Matches the distance pushed down */
    left: 0;
    width: 100%;
    height: 50px;
    background: transparent; /* Keeps it invisible */
}

/* Force sub-menu items to stack vertically, overriding the flex row */
.desktop .menu-container nav .sub-menu {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Display the sub-menu on hover */
.desktop .menu-container li.menu-item-has-children:hover .sub-menu {
    display: flex;
}

/* DESKTOP SUB-MENU INDICATOR */

/* Align the text and the new arrow icon */
.desktop .menu-container li.menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.desktop .menu-container li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 12px; /* Adjust based on your SVG's native proportions */
    height: 8px;
    background-image: url('/wp-content/uploads/2026/04/menu-down-arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
}

/* Rotate the arrow 180 degrees when the parent list item is hovered */
.desktop .menu-container li.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

/*MOBILE HEADER*/

.mobile.header {
    background-color: rgba(255,255,255,0.79);
    height: 75px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: fixed;
    backdrop-filter: blur(38.9px);
    z-index: 50;
    transition: background-color 0.3s;
}

.mobile.header .boxed{
    width: 100%;
    padding: 0px 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.mobile.header .logo {
    width: 200px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

.mobile.header .button-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: end;
    align-items: center;
}

.mobile.header .button-container .basket {
    width: 20px;
    height: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: unset;
    margin: unset;
}

.mobile.header .hamburger {
    border: unset;
    padding: unset;
    border-radius: unset;
    position: relative;
    height: 25px;
    width: 25px;
}

.mobile.header .hamburger:hover {
    background-color: unset;
}

.mobile.header .hamburger {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.mobile.header .hamburger .icon-close, .mobile.header .hamburger .icon-hamburger{
    position: absolute;
    top: 0;
    right: 0;
}

.mobile.header .hamburger .icon-close {
  opacity: 0;
  transform: rotate(-225deg) scale(0.8);
  transition: transform 0.3s, opacity 0.15s;
}

.mobile.header .hamburger .icon-hamburger {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  transition: transform 0.3s, opacity 0.15s;
}

.mobile.header .hamburger[aria-expanded="true"] .icon-hamburger {
  opacity: 0;
  transform: rotate(225deg) scale(0.8);
}

.mobile.header .hamburger[aria-expanded="true"] .icon-close {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.mobile.header .primary {
    fill: #042653;
    transition: fill 0.3s;
}

.mobile.header .accent {
    fill: #0066E4;
    transition: fill 0.3s;
}

.mobile.header.active .primary {
    fill: #FFFFFF;
}

.mobile.header.active .accent {
    fill: #DEDEDE;
}

.mobile.header.active {
    background-color: rgba(29, 59, 100, 0.9);
}


/*MOBILE MENU*/
.mobile.menu *{
    font-family: Montserrat;
    color: white;
}

.mobile.menu {
    min-height: 100vh;
    z-index: 40;
    position: fixed;
    top: 75px;
    width: 100%;
    background-color: rgba(4, 38, 83, 0);
    backdrop-filter: blur(38.9px);
    padding: 20px 20px;

    /* Core Fix: Use visibility instead of display */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Prevents clicking links while hidden */

    transition: background-color 0.15s, opacity 0.3s, visibility 0.3s;
}

.mobile.menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background-color: rgba(4, 38, 83, 0.9);
}

.mobile.menu .boxed {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-content: start;
    gap: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Stagger the inner content slightly if desired */
.mobile.menu.active .boxed {
    opacity: 1;
    transform: translateY(0px);
    transition-delay: 0.1s;
}

.mobile.menu .menu-column{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-content: start;
}

.mobile.menu .menu-column .menu{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-content: start;
    padding: 10px 0px;
    gap: 10px;
}

.mobile.menu .menu-column .heading{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid rgba(255,255,255,0.2) 1px;
    padding: 5px 0px;
}

.mobile.menu .menu-column h2{
    font-size: 24px;
    font-weight: 600;
    margin: unset;
}

.mobile.menu .menu-column .site-icon{
    height: 26px;
    width: 26px;
    background-image: url('/wp-content/uploads/2026/03/nav-arrow.svg');
    background-size: cover;
}

.mobile.menu .menu-column .store-icon{
    height: 26px;
    width: 26px;
    background-image: url('/wp-content/uploads/2026/03/basket-icon-white.svg');
    background-size: cover;
}

.mobile.menu .menu-column .contact-icon{
    height: 26px;
    width: 26px;
    background-image: url('/wp-content/uploads/2026/03/Phone-icon.svg');
    background-size: cover;
}

.mobile.menu .meredith-nav-container ul {
    padding: unset !important;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mobile.menu .meredith-nav-container li {
    list-style: none !important;
}

.mobile.menu .meredith-nav-container li a{
    font-weight: 200;
}

/* SUB-MENU ALIGNMENT & HIDDEN STATE */
.mobile.menu .meredith-nav-container li {
    text-align: left;
}

.mobile.menu .sub-menu {
    display: none !important;
    padding-left: 15px !important; /* Indents the sub-menu */
    margin-top: 10px;
}

/* MOBILE SUB-MENU INDICATOR */

/* Align the text and the white arrow icon */
.mobile.menu .meredith-nav-container li.menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Insert the white SVG as a background image */
.mobile.menu .meredith-nav-container li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url('/wp-content/uploads/2026/04/menu-down-arrow-white.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
}

/* Rotate the arrow 180 degrees when the sub-menu is open */
.mobile.menu .meredith-nav-container li.menu-item-has-children:has(.sub-menu.open) > a::after {
    transform: rotate(180deg);
}

/* Class to be toggled by JavaScript */
.mobile.menu .sub-menu.open {
    display: flex !important;
    margin: 10px 20px;
}

/*HIDE MOBILE MENU ON DESKTOP*/
.mobile.header {
    display: none;
}

/* TABLET CSS*/
@media (max-width: 900px) {
    .contact-ribbon, .desktop.header {
        display: none;
    }
    .header-wrapper {
        height: 75px;
    }
    .mobile.header {
        display: flex;
    }
}

@media (max-width: 768px) {
}

/* ============================================
   COMPLIANZ COOKIE BANNER
   ============================================ */

/* Font */
.cmplz-cookiebanner,
.cmplz-cookiebanner * {
    font-family: 'Montserrat', sans-serif !important;
}

/* Banner shell */
.cmplz-cookiebanner {
    border-radius: 8px !important;
}

/* Category blocks */
.cmplz-cookiebanner .cmplz-category {
    border-radius: 8px !important;
    background-color: #e7ebf0 !important;
    border: 1px solid #d6d8dc !important;
}

/* Toggle track — ::before is the track, ::after is the thumb */

/* Track inactive */
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::before {
    background-color: #1B1B1B !important;
}

/* Track active/checked */
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::before {
    background-color: #0066E4 !important;
}

/* Functional "Always active" — force track blue */
.cmplz-cookiebanner .cmplz-always-active .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::before,
.cmplz-always-active .cmplz-banner-checkbox .cmplz-label::before {
    background-color: #0066E4 !important;
}

/* Thumb — always white */
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::after {
    background-color: #ffffff !important;
}

/* Buttons — radius & no border only; Complianz controls layout */
.cmplz-cookiebanner .cmplz-btn {
    border-radius: 11px !important;
    border: none !important;
    font-weight: 600 !important;
}

/* Accept */
.cmplz-cookiebanner .cmplz-btn.cmplz-accept {
    background-color: #042653 !important;
    color: #ffffff !important;
}

/* Deny / Save preferences / View preferences */
.cmplz-cookiebanner .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-manage-options {
    background-color: #ffffff !important;
    color: #042653 !important;
}

/* Links */
.cmplz-cookiebanner a,
.cmplz-cookiebanner .cmplz-link {
    color: #0066E4 !important;
}

/* ============================================
   END COMPLIANZ COOKIE BANNER
   ============================================ */

/* WooCommerce product card custom fields */
.product-custom-fields-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.product-custom-field {
    font-size: 14px;
}

/* WooCommerce single product custom fields */
.all-custom-fields {
    margin: 15px 0;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 4px;
}

.custom-field-row {
    margin-bottom: 4px;
}