/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
/* Enable Custom Styling */
/* Primary Brand Colors */
/* Primary Captain Greek Blue */
/* Complementary Blue */
/* White */
/* Font Settings */
/* Headings Font */
/* Body Text Font */
/* Special Sections Font */
/* Background and Text Colors */
/* Primary text color */
/* Link color */
/* Header text color */
/* Header link color */
/* Header top text (e.g., 'Captain Greek...An Odyssey of Taste') */
/* Menu link color */
/* Hover color for menu links */
/* Footer link color */
/* Additional Colors */
/* Mediterranean Olive Green */
/* Mediterranean Sand Beige */
/* Mediterranean Gold */
/* Seafoam Teal */
/* Soft Grey for backgrounds */
/* Dark grey for primary text */
/* Medium grey for secondary text */
/* Coral Red for CTAs */
/* Turquoise for accents */
/* Header Styles */
.header a {
  color: #2D337F;
  /* Default color for header links */
}
.header a:hover {
  color: #b89b65;
  /* Gold color on hover */
}
/* Search Button Hover Effect */
.action.search:hover {
  background-color: #b89b65;
  border-color: #b89b65;
  /* Optional, if there's a border */
  color: #2D337F;
  /* Ensure text remains readable on hover */
}
/* Secondary Text Color */
.text-secondary {
  color: #666666;
  /* Medium grey for secondary text */
}
/* Link and Active Menu Item Styles */
.link:hover,
.menu-item-active {
  color: #40E0D0;
}
/* Icon Color */
.icon {
  color: #6B8E23;
}
/* Button Hover Effects */
/* Gold color for button hover state */
/* Base button styles */
.action.primary,
.action.secondary {
  white-space: nowrap;
  cursor: pointer;
  margin: 0;
  padding: 5px 15px;
  /* Consistent padding */
  min-width: 120px;
  border-radius: 6px !important;
  /* Apply rounded corners at all times */
  display: inline-block;
  vertical-align: top;
  line-height: 26px;
  text-align: center;
  transition: color 500ms ease, background-color 500ms ease, border-color 500ms ease;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* Hover styles */
.action.primary:hover,
.action.secondary:hover {
  background-color: #b89b65;
  /* Change background on hover */
  border-color: #b89b65;
  /* Optional: change border color on hover */
  color: #2D337F;
  /* Change text color on hover */
}
/* Adjust the button from the image */
.hyper-local-skip-address,
.hyper-local-remove-address,
.action-cancel,
.action-dismiss {
  padding: 0 20px;
  /* Padding for left and right, 0 for top and bottom */
  min-width: 125px !important;
  /* Set the minimum width */
  height: 39px !important;
  /* Ensure both buttons have the same height */
  border-radius: 8px !important;
  /* Apply the same rounded corners */
  font-size: 15px;
  /* Ensure the text size is the same */
  text-align: center;
  /* Center align text horizontally */
  cursor: pointer;
  /* Cursor pointer on hover */
  line-height: 26px !important;
  /* Set line-height equal to height for vertical centering */
  transition: all 0.5s ease;
  color: #2D337F !important;
  /* Smooth transition for hover effects */
}
/* Hover effect for this specific button */
.action-cancel,
.action-dismiss,
.hyper-local-skip-address:hover {
  background-color: #b89b65;
  /* Change to gold on hover */
  color: white;
  /* Text color to white on hover */
  border-color: #b89b65;
  /* Border color to gold on hover */
}
/* Custom Hover Effect */
.hover-effect07:hover {
  background-color: #b89b65;
  /* Gold background on hover */
  border-color: #b89b65;
  /* Optional, if there's a border */
  color: #2D337F;
  /* Blue text on hover */
}
/* Icon Color in Specific Cases */
.media-left .fas.fa-anchor {
  color: #2D337F !important;
  /* Primary Captain Greek Blue */
  font-size: 38px !important;
  /* Adjust the size to match other icons */
}
/* Cookie Notice Styles */
#notice-cookie-block {
  background-color: #ffffff;
  /* Background color for the cookie notice */
  color: #2D337F;
  /* Default text color */
  padding: 15px;
  border: 1px solid #b89b65;
}
.cookie-content {
  text-align: left;
}
.cookie-message-title {
  color: #2D337F;
  /* Title text color (blue) */
  font-weight: bold;
  font-size: 16px;
}
.cookie-message-description {
  color: #2D337F;
  /* Description text color */
  font-size: 14px;
}
.cookie-privacy-link {
  color: #2D337F;
  /* Link default color */
  text-decoration: none;
}
.cookie-privacy-link:hover {
  color: #b89b65;
  /* Link hover color */
  text-decoration: none;
}
/* Newsletter Section Styles */
.newsletter-section {
  background-color: #F4EBD0;
  /* Mediterranean Sand Beige */
  padding: 20px;
  border-radius: 8px;
}
.newsletter-title {
  color: #2D337F;
  text-align: center;
  margin-bottom: 15px;
}
.newsletter-form {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
/* Social Links Styling */
.social-links {
  display: flex;
  justify-content: center;
  padding: 0;
  list-style: none;
}
.social-links li {
  margin: 0 10px;
}
.social-links i {
  font-size: 24px;
  color: #2D337F;
  /* Blue icons */
  transition: color 0.3s ease;
  /* Smooth transition for hover */
}
.social-links i:hover {
  color: #b89b65;
  /* Gold on hover */
}
/* Footer Link Styling */
.footer-link,
.footer a {
  color: #2D337F;
  /* Blue by default */
  text-decoration: none;
  /* Remove underline by default */
}
.footer-link:hover,
.footer a:hover {
  color: #b89b65;
  /* Gold on hover */
  text-decoration: none /* Optional: underline on hover */;
}
/* Payment Logo Styles */
.payment-logo {
  max-width: 200px;
  height: auto;
  display: inline-block;
  margin: 0 auto;
}
/* Tagline Styles */
.welcome {
  font-family: 'Playfair Display', serif !important;
  /* Elegant serif font */
  font-size: 18px !important;
  /* Font size */
  font-style: italic !important;
  /* Italic for a refined look */
  font-weight: bold !important;
  /* Bold text for emphasis */
  color: #2D337F !important;
  /* Blue color */
  letter-spacing: 0.5px !important;
  /* Slight letter spacing */
  line-height: 1.6 !important;
  /* Adjust line height */
  text-align: left !important;
  /* Left align the text */
  padding: 10px 0 !important;
  /* Add some vertical padding */
  margin-left: 35px !important;
  /* Add left margin */
  -webkit-text-stroke: 0.1px #2D337F !important;
  /* Subtle blue stroke */
  text-stroke: 0.1px #2D337F !important;
  /* Subtle blue stroke */
  position: relative;
  /* Required for the pseudo-element effects */
}
/* Enhanced Underline Effect */
.welcome::after {
  content: '';
  position: absolute;
  bottom: -3px;
  /* Slightly below the text */
  left: 0;
  width: 100%;
  height: 2px;
  /* Thickness of the underline */
  background-color: #b89b65;
  /* Gold underline */
  transform: scaleX(0);
  /* Start hidden */
  transform-origin: left;
  transition: transform 0.3s ease-in-out;
}
.header-logo-search-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-search-input {
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
.nav-item {
  margin: 0 20px;
}
.dropdown-menu {
  border: 1px solid #b89b65;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
}
/* .header-icons {
    margin-right: 15px;
    vertical-align: middle;
}
.header-links:hover {
    text-decoration: none;
    color: #2D337F;  
}
    */
.menu-link:hover,
.header-button:hover {
  background-color: #b89b65;
  color: white;
  transition: background-color 0.3s ease;
}
/* Adjust the logo size and position */
.logo img {
  max-width: 200px;
  /* Adjust the size of the logo */
  height: auto;
  transition: all 0.3s ease;
  /* Smooth transition for hover effects */
  padding: 5px;
  /* Add space around the logo */
  margin-left: 30px;
  /* Shift the logo more to the right */
}
/* Remove the shadow */
.logo img {
  box-shadow: none !important;
  /* Remove the shadow */
}
/* Hover effect for the logo (optional, currently blank) */
.logo img:hover {
  /* You can add additional hover effects here, or leave it blank */
}
/* Responsive logo size adjustment */
/* Mobile and Small Screens */
@media (max-width: 768px) {
  .logo img {
    max-width: 100px;
    /* Reduce logo size for smaller screens */
    height: auto;
    /* Ensure the logo maintains aspect ratio */
    margin-left: 10px;
    /* Adjust margin for alignment */
    margin-top: 10px;
    /* Adjust top margin for better placement */
  }
}
/* Medium to Large Screens */
@media (min-width: 769px) and (max-width: 1199px) {
  .logo img {
    max-width: 160px;
    /* Resize for medium screens */
    height: auto;
    /* Maintain aspect ratio */
    margin-left: 20px;
    /* Adjust margin */
    margin-top: 15px;
    /* Adjust top margin */
  }
}
/* Extra Large Screens */
@media (min-width: 1200px) {
  .logo img {
    max-width: 230px;
    /* Resize logo for larger screens */
    height: auto;
    /* Keep aspect ratio */
    margin-left: 40px;
    /* Increase left margin for larger screens */
    margin-top: 20px;
    /* Adjust top margin */
  }
}
.mb-navigation.vertical-menu .title .mbi-menu,
.mb-navigation.vertical-menu .title .d-none.d-md-block,
.mb-navigation.vertical-menu .navigation {
  display: none !important;
  height: 0;
  padding: 0;
  margin: 0;
}
.mb-navigation.vertical-menu {
  display: none !important;
  height: 0;
  padding: 0;
  margin: 0;
}
#wk-outlet-address {
  color: #2d337f;
  /* Main blue color */
  font-weight: bold;
  font-style: italic;
  cursor: pointer;
  text-align: center;
  /* Center the text */
  display: inline-block;
  /* Allows box-like behavior */
  padding: 10px 20px;
  /* Adds padding to increase the box size */
  background-color: #f0f0f0;
  /* Light background to make it stand out */
  border-radius: 5px;
  /* Rounded corners */
  font-size: 20px;
  /* Increase font size */
  transition: background-color 0.3s ease, color 0.3s ease;
  /* Smooth hover effect */
}
#wk-outlet-address:hover {
  color: #b89b65;
  /* Gold color on hover */
}
.footer-copyright-vertical {
  width: 100%;
  margin: 0;
  padding: 0;
  flex-grow: 1;
}
/*
  ul.header.links {
    margin-left: 7px;
}
 
ul.header.links a, 
.col-auto.top-links a {
    color: #2D337F; 
    font-size: 14px; 
    text-decoration: none; 
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

ul.header.links a:hover, 
.col-auto.top-links a:hover {
    color: #b89b65;  
    text-decoration: none 
}

.mbi.mbi-heart, 
.mbi.mbi-bag2, 
.mbi.mbi-user {
    color: #2D337F; 
    transition: color 0.3s ease, transform 0.3s ease; 
}


.mbi.mbi-heart:hover, 
.mbi.mbi-bag2:hover, 
.mbi.mbi-user:hover {
    color: #b89b65; 
    transform: scale(1.3);
}
    */
.detect-location {
  display: inline-block !important;
  /* Display the icon and text inline */
  vertical-align: middle !important;
  /* Vertically align icon with text */
  cursor: pointer !important;
  /* Change cursor to indicate interactivity */
  font-size: 40px  !important;
  /* Set size for both the text and icon */
  color: #b89b65 !important;
  /* Default gold color */
  margin-right: 10px !important;
  /* Add some spacing between icon and text */
  margin-bottom: 15px !important;
  transition: color 0.3s ease, font-size 0.3s ease !important;
  /* Smooth transition for hover effect */
}
.detect-location:hover {
  color: #B8860B !important;
  /* Darker gold on hover */
  font-size: 45px !important;
  /* Slightly enlarge on hover */
}
/* Mobile-specific styles */
@media only screen and (max-width: 600px) {
  .detect-location {
    font-size: 30px !important;
    /* Smaller font size on mobile */
    margin-right: 5px !important;
    /* Adjust margin for smaller screens */
    margin-bottom: 10px !important;
    /* Adjust margin-bottom for spacing */
    margin-top: 20px !important;
    /* Added margin-top to prevent overlap */
  }
  .detect-location:hover {
    font-size: 35px !important;
    /* Slightly smaller hover enlargement on mobile */
  }
}
@media only screen and (max-width: 600px) {
  /* Ensure both #wk-outlet-address and .detect-location are centered on mobile */
  #wk-outlet-address,
  .detect-location {
    display: block;
    /* Make elements block-level for full-width */
    margin: 0 auto;
    /* Automatically center both elements horizontally */
    text-align: center;
    /* Center the text and icon */
    margin-top: 20px;
    /* Added margin-top to both elements */
  }
  #wk-outlet-address {
    font-size: 18px;
    /* Adjust font size for mobile */
    padding: 10px 15px;
    /* Adjust padding for mobile */
    margin-top: 20px;
    /* Added margin-top to prevent overlap */
  }
  .detect-location {
    font-size: 30px !important;
    /* Adjust icon size for mobile */
    margin-top: 20px !important;
    /* Added margin-top to prevent overlap */
  }
}
/* Styling for .action-cancel, .action-dismiss, and .hyper-local-remove-address */
.action-cancel,
.action-dismiss,
.hyper-local-remove-address {
  color: #2d337f;
  /* Blue text color */
  background-color: #ffffff;
  /* Keep the background white */
  border: 1px solid #2d337f;
  /* Keep the blue border */
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  /* Smooth transition */
}
.action-cancel:hover,
.action-dismiss:hover,
.hyper-local-remove-address:hover {
  background-color: #b89b65;
  /* Gold background on hover */
  color: #2d337f;
  /* Keep the blue text color on hover */
  border-color: #b89b65;
  /* Change the border to gold on hover */
}
.selling-feature {
  display: flex;
  align-items: center !important;
  justify-content: flex-start;
}
.selling-feature .media-left {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 61px !important;
}
.selling-feature .media-left .material-icons {
  font-size: 42.5px !important;
  color: #2d337f !important;
  display: inline-block !important;
  line-height: normal !important;
  margin-left: 53px !important;
  transition: all 0.3s ease !important;
}
.selling-feature .media-left .material-icons:hover {
  color: #b89b65 !important;
  transform: scale(1.2);
}
.selling-feature .media-body {
  text-align: left !important;
}
.mbi-bubbles,
.mbi-sync2,
.mbi-rocket {
  color: #2d337f !important;
  transition: all 0.3s ease !important;
}
.mbi-bubbles:hover,
.mbi-sync2:hover,
.mbi-rocket:hover {
  color: #b89b65 !important;
  transform: scale(1.2);
}
.item-slider .text-normal p {
  color: #b89b65 !important;
}
/*banners*/
@media only screen and (max-width: 768px) {
  .item-slider .block-content.banner-one,
  .item-slider .block-content.banner-two,
  .item-slider .block-content.banner-three {
    position: absolute !important;
    top: 55% !important;
    right: 20px !important;
    transform: translateY(-50%) !important;
    text-align: right !important;
    padding: 0 10px !important;
    z-index: 10 !important;
  }
  .item-slider .block-content.banner-one h2,
  .item-slider .block-content.banner-two h2,
  .item-slider .block-content.banner-three h2 {
    font-size: 18px !important;
    line-height: 1.1 !important;
    margin-bottom: 8px !important;
  }
  .item-slider .block-content.banner-one .text-normal p,
  .item-slider .block-content.banner-two .text-normal p,
  .item-slider .block-content.banner-three .text-normal p {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  .item-slider .block-content.banner-one .btn-wrap a,
  .item-slider .block-content.banner-two .btn-wrap a,
  .item-slider .block-content.banner-three .btn-wrap a {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
}
@media only screen and (max-width: 480px) {
  .item-slider .block-content.banner-one,
  .item-slider .block-content.banner-two,
  .item-slider .block-content.banner-three {
    right: 10px !important;
    padding-left: 10px !important;
  }
  .item-slider .block-content.banner-one h2,
  .item-slider .block-content.banner-two h2,
  .item-slider .block-content.banner-three h2 {
    font-size: 16px !important;
  }
  .item-slider .block-content.banner-one .text-normal p,
  .item-slider .block-content.banner-two .text-normal p,
  .item-slider .block-content.banner-three .text-normal p {
    font-size: 11px !important;
  }
  .item-slider .block-content.banner-one .btn-wrap a,
  .item-slider .block-content.banner-two .btn-wrap a,
  .item-slider .block-content.banner-three .btn-wrap a {
    font-size: 10px !important;
    padding: 5px 10px !important;
  }
}
/* Image Size Adjustments for Larger Screens */
@media only screen and (max-width: 768px) {
  .authenticity-icon.material-icons {
    font-size: 30px !important;
    /* Adjust the icon size for mobile */
    color: #2d337f !important;
    /* Blue color */
    margin-left: 0px !important;
    /* Ensure no margin on the left */
    transition: all 0.35s ease !important;
    /* Smooth transition effect */
  }
  .authenticity-text .media-heading {
    font-size: 16px !important;
    /* Adjust the font size for the heading */
    text-align: left !important;
    /* Align text to the left */
  }
  .authenticity-text .desc {
    font-size: 14px !important;
    /* Adjust the description text size */
    text-align: left !important;
    /* Align the text to the left */
  }
}
/* For very small mobile screens (up to 480px) */
@media (max-width: 480px) {
  .selling-feature .media-left .material-icons {
    font-size: 36px !important;
    /* Smaller icon for small screens */
    margin-left: 0px !important;
    /* No margin for small screens */
    line-height: 0.4 !important;
    /* Adjust line height for small text */
  }
}
/* For small to medium mobile screens (481px to 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .selling-feature .media-left .material-icons {
    font-size: 30px !important;
    /* Medium-sized icon for tablets and larger mobiles */
    margin-left: 0px !important;
    /* Add some margin for better spacing */
    line-height: 1.1 !important;
    /* Line height slightly adjusted */
  }
}
/* For tablet screens and larger mobiles (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .selling-feature .media-left .material-icons {
    font-size: 32px !important;
    /* Larger icon for tablet screens */
    margin-left: 0px !important;
    /* Add more margin */
    line-height: 1.2 !important;
    /* Adjust line height */
  }
}
/* For desktop and larger screens (above 1024px) */
@media (min-width: 1025px) {
  .selling-feature .media-left .material-icons {
    font-size: 40px !important;
    /* Full-size icons for desktop screens */
    margin-left: 31px !important;
    /* Standard margin for desktop */
    line-height: normal !important;
    /* Default line height */
  }
}
.heading-title.block-title {
  color: #2d337f;
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 3px solid #b89b65;
  font-style: italic;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
  width: 100%;
}
.wk-mp-design .input-text {
  width: 100%;
  min-width: 400px;
  height: 150px;
  padding: 10px;
  resize: both;
  max-width: 100%;
}
/* Breadcrumb container styling with increased height */
.wrapper-breadcrums {
  background-color: #f0f0f0;
  /* Light background for breadcrumb area */
  padding: 20px 20px;
  /* Padding for the breadcrumb container */
  border-radius: 5px;
  /* Slight border radius for smooth edges */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Subtle shadow for depth */
  min-height: 50px;
  /* Set a minimum height */
}
/* General breadcrumb link styling */
.wrapper-breadcrums li a {
  font-size: 16px !important;
  /* Standard font size */
  color: #2d337f !important;
  /* Main blue color */
  text-decoration: none !important;
  /* Remove underline */
  font-weight: 500 !important;
  /* Medium font weight */
  padding: 0 5px;
  /* Add space between the links */
}
/* Hover effect for all breadcrumb links */
.wrapper-breadcrums li a:hover {
  color: #b89b65 !important;
  /* Gold on hover */
  text-decoration: underline !important;
  /* Underline on hover */
}
/* Styling for the "Home" link */
.wrapper-breadcrums li.home a {
  font-weight: bold !important;
  /* Make the Home link bold */
  font-size: 18px !important;
  /* Slightly bigger font for Home */
  font-style: italic !important;
  /* Apply italics */
}
/* Hover effect for the "Home" link */
.wrapper-breadcrums li.home a:hover {
  color: #b89b65 !important;
  /* Gold color on hover */
}
/* Styling for the "Last" link */
.wrapper-breadcrums li.last a {
  color: #000 !important;
  /* Use black for the last item (current page) */
  font-weight: bold !important;
  /* Make it bold to highlight the current page */
}
/* test 

/* General Styles for Feature Boxes */
.selling-feature {
  padding: 20px 0;
}
.list-features {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  text-align: center;
}
/* Icon Wrapper to Control Alignment and Spacing */
.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 0;
  /* Ensures spacing issues are minimal */
}
/* Common Icon Styles */
.list-features i {
  font-size: 2em;
  color: #2d337f;
  text-align: center;
  line-height: 1;
  width: auto;
  height: auto;
}
/* Individual Icon Customizations */
.shipping-icon-custom {
  font-size: 2.5em;
}
.returns-icon-custom {
  font-size: 2.2em;
}
.care-icon-custom {
  font-size: 2.5em;
}
.authenticity-icon-custom {
  font-size: 2.7em;
}
/* Centralize Text on Mobile */
.heading-text,
.description-text {
  text-align: center;
}
/* Headings (with Text Color, Underline, and Italics) */
.heading-text {
  color: #2d337f;
  font-size: 1.5em;
  font-weight: bold;
}
.heading-text span em {
  text-decoration: none;
  font-style: italic;
}
/* Descriptions (Subtext Underneath the Heading) */
.description-text {
  color: #b89b65;
  font-size: 1em;
  margin-top: 5px;
}
/* Responsive Design: Mobile Screen Adjustments */
@media (max-width: 768px) {
  .list-features {
    flex-direction: column;
    text-align: center;
    margin-bottom: 15px;
  }
  .icon-wrapper {
    margin-right: 0;
    margin-bottom: 10px;
  }
  /* Centralize text and make icons responsive for smaller screens */
  .list-features i {
    font-size: 2em;
    text-align: center;
  }
  .shipping-icon-custom,
  .returns-icon-custom,
  .care-icon-custom,
  .authenticity-icon-custom {
    font-size: 2em;
  }
  /* Centralize text */
  .heading-text {
    font-size: 1.2em;
    text-align: center;
  }
  /* Adjust Description Size for Mobile */
  .description-text {
    font-size: 0.9em;
    text-align: center;
  }
}
/* Specific fix for the "Authenticity Guarantee" icon */
.authenticity-icon-custom {
  font-size: 2.5em;
  /* Ensure size isn't too large */
  display: inline-block;
  /* Ensure icon stays in line with text */
  vertical-align: middle;
}
/* Ensure Cross-browser consistency */
.icon-wrapper i,
.material-icons {
  display: inline-block;
  vertical-align: middle;
  line-height: inherit;
  text-align: center;
}
@media (max-width: 768px) {
  .authenticity-icon.authenticity-icon-custom {
    font-size: 3.2em !important;
    /* Increase the icon size on mobile */
    display: inline-block !important;
    /* Ensure the icon is displayed correctly */
    vertical-align: middle !important;
    text-align: center !important;
  }
  .authenticity-text .media-heading em {
    font-size: 0.8em !important;
    margin-top: 16px !important;
    display: block;
    text-align: center !important;
  }
}
@media (max-width: 768px) {
  /* Centralize the "Mediterranean Sourced" text */
  .authenticity-text .text.desc.std {
    text-align: center !important;
    margin-top: 10px;
    /* Adjust this value to lower the text if needed */
  }
  /* Centralize the "Always here to help" text */
  .care-text .text.desc.std {
    text-align: center !important;
    margin-top: 10px;
    /* Adjust this value to lower the text if needed */
  }
  .returns-text .text.desc.std {
    text-align: center !important;
    margin-top: 10px;
    /* Adjust this value to lower the text if needed */
  }
  .shipping-text .text.desc.std {
    text-align: center !important;
    margin-top: 10px;
    /* Adjust this value to lower the text if needed */
  }
  .shipping-text .media-heading em {
    text-align: center !important;
    display: block !important;
    /* Ensures block-level behavior for centering */
  }
  /* Centralize the "24/7 Support" heading */
  .care-text .media-heading em {
    text-align: center !important;
    display: block !important;
    /* Ensures block-level behavior for centering */
  }
}
@media (max-width: 768px) {
  /* Ensure the slider container height adjusts automatically */
  .item-slider {
    height: auto;
  }
  /* Ensure image scales correctly */
  .item-slider .img-fluid {
    width: 100%;
    height: auto;
    /* Maintain the aspect ratio */
  }
  /* Ensure the banner content is centered and fits the screen */
  .block-content.banner-one {
    position: relative;
    left: 0;
    /* Ensure no negative left offset on mobile */
    text-align: center;
    padding: 10px;
  }
  /* Adjust the heading size for smaller screens */
  .block-content.banner-one h2 {
    font-size: 1.5em;
    line-height: 1.4;
  }
  /* Adjust the paragraph text size */
  .block-content.banner-one p {
    font-size: 1.2em;
  }
  /* Button adjustments for better spacing */
  .btn-wrap .action.primary {
    padding: 8px 15px;
    font-size: 1em;
  }
}
/* Mobile Styles for screen sizes up to 768px */
@media only screen and (max-width: 768px) {
  /* Targeting the img element specifically inside img-slide and img-native-wrap */
  .img-slide .img-native-wrap > img.img-fluid {
    width: 100% !important;
    object-fit: contain !important;
    /* Ensures the image fits without cropping */
    max-height: unset !important;
    /* Remove any max-height restrictions */
  }
  .img-slide .img-native-wrap {
    padding-bottom: 56.25% !important;
    /* 16:9 aspect ratio */
  }
}
/* imgage external css */
.item-slider {
  height: 358px;
  /* Move from inline to less */
}
.img-native-wrap {
  padding-bottom: 18.646%;
  /* Keep the aspect ratio in less */
}
.banner-one {
  position: relative;
  left: -28px;
  /* Move position adjustments here */
}
.btn-wrap .action.primary {
  background-color: #2d337f;
  color: #ffffff;
  border: 1px solid #b89b65;
  padding: 10px 20px;
}
.btn-wrap .action.primary:hover {
  background-color: #b89b65;
  color: #2d337f;
}
form.form.contact {
  display: none;
}
/* helpdesk css */
.wk_ts_nav_left h4 a {
  font-weight: bold !important;
  font-style: italic !important;
  color: #2d337f !important;
  /* Main blue color */
  text-decoration: underline !important;
  text-decoration-color: #b89b65 !important;
  /* Gold underline */
  text-align: center !important;
  display: block;
  font-size: 24px !important;
  /* Increase the font size */
}
ul li.dropdown:nth-of-type(1) {
  display: none !important;
}
/* General container styles */
.wk_support_information_container {
  background-color: #f7f7f7 !important;
  padding: 30px !important;
  font-family: Arial, sans-serif !important;
  margin-top: 0px !important;
  width: 100% !important;
}
.wk_support_information_container h1 {
  font-size: 36px !important;
  font-style: italic !important;
  font-weight: bold !important;
  color: #2d337f !important;
  /* Main blue color */
  text-align: center !important;
  border-bottom: 2px solid #b89b65 !important;
  /* Gold underline */
}
.wk_support_information_container p {
  font-size: 18px !important;
  line-height: 1.6 !important;
  text-align: justify !important;
}
/* Subheading styling */
.wk_support_information_container h2 {
  font-size: 28px !important;
  font-style: italic !important;
  font-weight: bold !important;
  color: #2d337f !important;
  text-align: center !important;
  border-bottom: 2px solid #b89b65 !important;
}
/* Ordered list styles */
.wk_support_information_container ol {
  font-size: 18px !important;
  line-height: 1.6 !important;
  text-align: justify !important;
  padding-left: 20px !important;
}
/* List item styles */
.wk_support_information_container ol li strong {
  font-style: italic !important;
  color: #2d337f !important;
  /* Main blue color */
}
.wk_support_information a {
  font-size: 20px !important;
  /* Make the text bigger */
  font-weight: bold !important;
  /* Make the text bold */
  color: #2d337f !important;
  /* Main blue color */
  text-decoration: none !important;
  /* Remove default underline */
}
.wk_support_information a:hover {
  text-decoration: underline !important;
  text-decoration-color: #b89b65 !important;
  /* Gold underline on hover */
}
.dropdown-support-category {
  display: none !important;
}
/* Style for dropdown ticket links */
.dropdown-menu a {
  font-size: 14px !important;
  /* Make the text bigger */
  font-weight: bold !important;
  /* Bold text */
  font-style: italic !important;
  /* Italic text */
  color: #2d337f !important;
  /* Captain Greek main blue color */
  text-decoration: none !important;
  /* Remove default underline */
  padding: 10px 15px !important;
  /* Add some padding for better spacing */
  display: block;
  /* Ensure full clickable area */
}
.dropdown-menu a:hover {
  text-decoration: underline !important;
  /* Add underline on hover */
  text-decoration-color: #b89b65 !important;
  /* Gold underline on hover */
  color: #b89b65 !important;
  /* Change text color to gold on hover */
}
/* Style for the Ticket(s) text */
.dropdown {
  font-size: 12px !important;
  /* Increase text size */
  font-weight: bold !important;
  /* Make text bold */
  font-style: italic !important;
  /* Italic styling */
  color: #2d337f !important;
  /* Captain Greek main blue color */
  text-decoration: none !important;
  /* No underline by default */
  cursor: pointer;
  /* Make it look clickable */
}
/* Hover state for the Ticket(s) text */
.dropdown:hover {
  text-decoration: underline !important;
  /* Underline on hover */
  text-decoration-color: #b89b65 !important;
  /* Gold underline */
  color: #b89b65 !important;
  /* Turn text gold on hover */
}
/* Style for the caret symbol */
.dropdown > .caret {
  color: #2d337f !important;
  /* Main blue for caret */
  font-weight: bold !important;
  /* Bold caret */
}
/* Hover state for the caret symbol */
.dropdown:hover > .caret {
  color: #b89b65 !important;
  /* Turn caret gold on hover */
}
/* Captain Greek Styling CSS */
/* General Form Container Styling */
.wk_ts_thread_container {
  font-family: Arial, sans-serif !important;
  background-color: #f7f7f7 !important;
  padding: 30px !important;
  border-radius: 10px !important;
  width: 100% !important;
  box-sizing: content-box !important;
  border: 2px solid #b89b65 !important;
  /* Golden border */
}
/* Page Title */
.page-title h1 {
  font-size: 36px !important;
  font-weight: bold !important;
  font-style: italic !important;
  color: #2d337f !important;
  /* Captain Greek blue */
  text-align: center !important;
  border-bottom: 2px solid #b89b65 !important;
  /* Gold underline */
  padding-bottom: 10px !important;
  margin-bottom: 20px !important;
  width: auto !important;
  /* Ensure it adapts to text size */
}
/* Draft Saved Message */
#draft_msg_box {
  color: #757a7d !important;
  font-size: 13px !important;
  float: left !important;
  width: 100% !important;
  font-style: italic !important;
}
/* Form Labels */
label {
  font-size: 14px !important;
  font-weight: bold !important;
  color: #2d337f !important;
  margin-bottom: 10px !important;
  display: block !important;
}
/* Required Fields Indicator */
.required em {
  color: red !important;
  font-weight: bold !important;
}
.form-list label {
  font-size: 16px !important;
  /* Increase font size */
  color: #2d337f !important;
  /* Captain Greek blue */
  font-weight: bold !important;
  /* Keep it bold */
  margin-bottom: 10px !important;
}
.wk_ts_nav {
  background: #f8f8f8 !important;
  border: 1px solid #b89b65 !important;
  height: 50px;
  float: left;
  min-height: 50px;
  border-radius: 4px;
  width: 105.4% !important;
}
.action.search {
  position: absolute;
  right: 0;
  top: -10px !important;
  margin: 10px !important;
  width: 100px;
  text-align: center;
  font-size: 1.6rem;
}
label[data-role="minisearch-label"] {
  display: none !important;
}
label[for="search"] {
  display: none !important;
}
/* General Content Styling */
.wk_ts_content {
  width: 98% !important;
  padding: 15px !important;
  float: left !important;
  box-sizing: content-box !important;
  background-color: #f7f7f7 !important;
  border-radius: 10px !important;
  border: 2px solid #b89b65 !important;
  /* Golden border */
}
/* Container Ajax */
.container_ajax {
  margin-bottom: 20px !important;
}
/* Heading Styling */
.wk_ts_content h1 {
  font-size: 36px !important;
  font-weight: bold !important;
  font-style: italic !important;
  color: #2d337f !important;
  /* Captain Greek blue */
  text-align: center !important;
  border-bottom: 2px solid #b89b65 !important;
  /* Gold underline */
  padding-bottom: 10px !important;
}
/* Button Styling */
.wk_ts_clear {
  background-color: #2d337f !important;
  /* Captain Greek blue */
  color: #ffffff !important;
  padding: 10px 20px !important;
  border: none !important;
  border-radius: 5px !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: background-color 0.3s, color 0.3s !important;
}
.wk_ts_clear:hover {
  background-color: #b89b65 !important;
  /* Gold background on hover */
  color: #2d337f !important;
  /* Blue text on hover */
}
/* Text Styling */
.wk_ts_content p {
  font-size: 18px !important;
  color: #2d337f !important;
  line-height: 1.6 !important;
}
/* Table Styling */
.wk_ts_ticket_table {
  width: 100% !important;
  border: 1px solid #2d337f !important;
  border-collapse: collapse !important;
}
.wk_ts_ticket_table th,
.wk_ts_ticket_table td {
  padding: 10px !important;
  text-align: left !important;
  border: 1px solid #2d337f !important;
  /* Blue borders */
  color: #333 !important;
}
.wk_ts_ticket_table th {
  background-color: #b89b65 !important;
  /* Gold background for table headers */
  color: #ffffff !important;
  /* White text in headers */
}
.wk_ts_ticket_table td {
  background-color: #f7f7f7 !important;
  /* Light background for table rows */
}
.wk_ts_tickets_container {
  border: 2px solid #b89b65 !important;
  /* Golden border */
  float: left !important;
  width: 105.4% !important;
  /* Adjusted width to fit container properly */
  border-radius: 10px !important;
  /* Rounded corners */
  margin-bottom: 20px !important;
  /* Increased bottom margin */
  background-color: #f7f7f7 !important;
  /* Light background color */
  padding: 20px !important;
  /* Added padding for better spacing */
}
.wk_btn_warning {
  background-color: #ffffff !important;
  /* White background */
  color: #2d337f !important;
  /* Captain Greek blue text */
  border: 2px solid #b89b65 !important;
  /* Gold border */
  margin: 9px !important;
  font-weight: bold !important;
  /* Bold text */
  transition: background-color 0.3s, color 0.3s !important;
  /* Smooth hover effect */
}
/* Hover Effect */
.wk_btn_warning:hover {
  background-color: #b89b65 !important;
  /* Gold background on hover */
  color: #ffffff !important;
  /* White text on hover */
  border-color: #b89b65 !important;
  /* Maintain gold border */
}
.catalog-category-view .page-title {
  text-align: center !important;
  /* Centers the text */
  font-weight: bold !important;
  /* Makes the text bold */
  color: #2d337f !important;
  /* Sets the text color to blue */
  font-style: italic !important;
  /* Makes the text italic */
  text-decoration: underline !important;
  /* Adds an underline */
  text-decoration-color: #b89b65 !important;
  /* Sets the underline color to gold */
  text-transform: capitalize !important;
  /* Retain capitalization */
  font-size: 2.4rem !important;
  /* Retain the font size */
}
.sidebar-product-wrap {
  display: none;
}
/* For mobile devices and tablets */
@media (max-width: 1199px) {
  .container {
    max-width: 100% !important;
  }
}
/* For PC screens and laptops */
@media (min-width: 1200px) {
  .container {
    max-width: 1350px !important;
  }
}
.header-content-action {
  display: flex;
  /* Use Flexbox for better alignment */
  align-items: center;
  /* Vertically center all children */
  justify-content: flex-end;
  /* Align elements to the right */
  flex-wrap: nowrap;
  /* Prevent wrapping */
}
.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}
/* Ensure the customer-welcome container stacks elements vertically */
.customer-welcome.acc-topbar {
  display: flex;
  flex-direction: column;
  /* Stack items vertically */
  align-items: flex-start;
  /* Align items to the left */
  gap: 5px;
  /* Add spacing between items */
}
/* Style the customer-name section to keep "Hi, customer name" in one line */
.customer-name.acc-btn {
  display: flex;
  /* Use flex to keep "Hi," and the name on the same line */
  flex-direction: row;
  /* Align items horizontally */
  align-items: center;
  /* Vertically center the text */
  gap: 5px;
  /* Space between "Hi," and the name */
  margin-bottom: 10px;
  /* Space between the name and the menu items */
}
/* Style the customer-menu section to stack items correctly 
.customer-menu.acc-list {
    display: flex;
    flex-direction: column;  Stack the list items vertically 
} */
.customer-menu.acc-list ul {
  list-style: none;
  /* Remove bullet points */
  padding: 0;
  margin: 0;
}
.customer-menu.acc-list ul li {
  display: block;
  /* Make each menu item block-level */
  margin-bottom: 5px;
  /* Add space between each menu item */
}
/* .col-auto.top-links a, ul.header.links a {
    color: #2D337F;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
    display: block !important; 
  }

  .header-content-action > div {
    margin-right: 30px; 
    display: flex; 
    align-items: center; 
}

.header-content-action > div:last-child {
    margin-right: 0; 
}
.user-topbar .header.links li {
    white-space: nowrap !important; 
    line-height: 19px !important;
} 
*/
.horizontal-menu {
  margin-left: 0px !important;
}
.block-search {
  width: 100% !important;
}
@media only screen and (max-width: 768px) {
  .wk-right {
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically if it has a set height */
    margin: 0 auto;
    /* Ensure centering with auto margins */
    width: 100%;
    /* Make the element take the full width */
    text-align: center;
    /* Center text content if applicable */
  }
}
.page-wrapper {
  overflow-x: hidden !important;
  /* Only hides horizontal overflow */
}
@media only screen and (max-width: 768px) {
  .img-slide .img-native-wrap > img.img-fluid {
    width: 100% !important;
    object-fit: cover !important;
    max-height: unset !important;
    max-width: none !important;
    overflow: hidden !important;
    box-sizing: border-box;
  }
}
/*test*/
html,
body {
  overflow-x: hidden;
}
@media (max-width: 767px) {
  .menu-btn-text {
    font-size: 1.1rem !important;
    margin-top: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #2D337F !important;
    margin-left: 3.5px !important;
    margin-right: 4px !important;
  }
}
.sidebar .block-title {
  position: relative;
  color: #2d337f;
  /* Blue color as per your brand */
  text-transform: uppercase;
  margin-bottom: 10px;
  text-align: center;
  /* Centralizes the title */
  font-size: 20px;
  /* Makes the title a bit bigger */
  font-style: italic;
  /* Applies italics */
  text-decoration: none;
  /* Underlines the title */
}
.sidebar .block-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  /* Thickness of the underline */
  background-color: #b89b65;
  /* Gold color for the underline */
  margin-top: 5px;
  /* Space between text and underline */
}
.sidebar .block-content {
  display: block !important;
  font-size: 18px;
  /* Adjusts the font size to make it bigger */
  transition: color 0.3s ease, transform 0.3s ease;
  /* Adds smooth transitions for color and transform */
}
.wk-mp-design .input-text {
  width: 100%;
  min-width: 0px !important;
  height: 50px !important;
  padding: 10px;
  resize: both;
  max-width: 100%;
  text-align: left !important;
}
.wk-mp-design .fieldset > .legend {
  position: relative;
  color: #2d337f;
  /* Blue color as per your brand */
  text-transform: uppercase;
  margin-bottom: 10px;
  text-align: center;
  /* Centralizes the title */
  font-size: 20px;
  /* Makes the title a bit bigger */
  font-style: italic;
  /* Applies italics */
  text-decoration: none;
  /* Underlines the title */
}
.wk-mp-design .fieldset > .legend::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  /* Thickness of the underline */
  background-color: #b89b65;
  /* Gold color for the underline */
  margin-top: 5px;
  /* Space between text and underline */
}
/* Ensures spacing and alignment for .wk-ask-question */
.wk-dashboard-container .wk-ask-question {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}
/* Flex layout for .wk-report-filter with spacing */
.wk-report-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  z-index: auto;
  /* Default stacking to prevent interference */
  position: absolute;
}
/* Dropdown styling with controlled margins */
.wk-dashboard-container .wk-sales-filter {
  width: 150px;
  margin-top: 7px;
  z-index: auto;
}
/* Fix for button clickability */
.wk-ask-question button {
  position: relative;
  z-index: 10;
  /* Ensures button is on top */
}
.ask-que-to-admin-style {
  position: relative !important;
  right: 0;
  top: 0;
  margin: 1rem 0;
  z-index: 10;
}
.wk-mp-collection-container .toolbar select,
toolbar-products .limiter .control {
  margin-left: 10px;
  background-color: transparent;
  box-shadow: none;
}
.toolbar-products .limiter {
  display: flex;
}
.toolbar-products label {
  margin-top: 5px;
}
.btn,
.wk-mp-collection-view-btn a {
  background-color: #2d337f;
  /* Captain Greek primary color */
  color: #ffffff;
  /* White text */
  border: 1px solid #b89b65;
  /* Gold border */
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.btn:hover,
.wk-mp-collection-view-btn a:hover {
  background-color: #b89b65;
  /* Gold on hover */
  color: #2d337f;
  /* Blue text on hover */
  border: 1px solid #2d337f;
  /* Border changes to blue */
  text-decoration: none;
  /* No underline */
}
.store-brick .store-profile .name-brick,
.store-brick .store-profile .location a,
.store-brick .store-profile .stats {
  margin-left: 100px;
}
.store-brick .store-profile .name-brick .name {
  color: #2d337f;
  /* Captain Greek primary blue color */
  font-weight: bold;
  text-decoration: none;
  text-decoration-color: #b89b65;
  /* Gold underline */
  font-size: 35px;
  transition: color 0.3s ease;
}
.store-brick .store-profile .name-brick .name:hover {
  color: #b89b65;
  /* Gold color on hover */
  text-decoration-color: #2d337f;
  /* Underline color changes to blue */
}
.wk-mp-design button {
  background: #ffffff;
  /* White background */
  color: #2d337f;
  /* Blue text color */
  border: 1px solid #b89b65;
  /* Gold border */
  box-shadow: none !important;
  border-radius: 8px !important;
  /* Slightly rounded corners */
  padding: 8px 25px;
  /* Adjusted padding for better proportions */
  font-size: 18px;
  font-weight: bold;
  /* Bolder text */
  font-family: Arial, sans-serif;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.wk-mp-design button:hover {
  background: #b89b65 !important;
  /* Gold background on hover */
  color: #ffffff !important;
  /* White text on hover */
  border-color: #2d337f !important;
  /* Consistent border color on hover */
}
.social-btn .btn-social {
  display: block;
  text-decoration: none;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.6;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  background-image: none;
  border-radius: 5px;
  padding: 12px 12px 12px 60px;
  text-align: center;
  background-color: #ffffff;
  /* White background */
  color: #2D337F;
  /* Blue text */
  border: 1px solid #b89b65;
  /* Gold border */
  margin-top: 10px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.social-btn .btn-social:hover {
  background-color: #b89b65 !important;
  /* Gold background on hover */
  color: #ffffff !important;
  /* White text on hover for contrast */
}
.btn-social > svg {
  position: absolute;
  left: 15px;
  /* Adds padding to the left */
  top: 50%;
  bottom: 0;
  width: 44px;
  text-align: center;
  fill: #2D337F;
  /* Blue color to match text */
  height: 44px;
  margin-top: -22px;
  font-size: 14px;
  padding: 5px 0;
  background-color: #ffffff;
  border-radius: 3px;
  /* To make it a bit more appealing */
}
#wk_rma_new_request a {
  display: inline-block;
  font-size: 16px;
  /* Base font size */
  font-weight: bold;
  color: #2D337F;
  /* Captain Greek blue for text */
  text-decoration: none;
  background-color: #ffffff;
  /* White background for contrast */
  padding: 10px 20px;
  /* Padding for a button-like feel */
  border: 1px solid #b89b65;
  /* Gold border for accent */
  border-radius: 5px;
  /* Slightly rounded corners */
  text-align: center;
  cursor: pointer;
  outline: none;
  /* Remove outline */
}
#wk_rma_new_request a:hover {
  background-color: #b89b65;
  /* Gold background on hover */
  color: #2D337F;
  /* White text on hover for contrast */
  border-color: #2D337F;
  /* Change border to blue on hover */
  outline: none;
  /* Remove outline */
  transition: color 0.3s ease;
}
#wk_rma_new_request a:focus {
  background: transparent;
  /* Ensures background stays transparent on hover */
  border-bottom: 2px solid #2D337F;
  outline: none;
  /* Remove outline */
}
legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
  outline: none !important;
  /* Removes any outline effect */
  box-shadow: none !important;
  /* Removes any shadow that may appear */
  background-color: transparent;
  /* Ensure background is transparent */
}
legend:hover {
  outline: none !important;
  /* Remove outline on hover */
  box-shadow: none !important;
  /* Remove any hover shadow */
  background-color: transparent !important;
  /* Maintain transparent background */
}
#wk_rma_new_request {
  background: transparent;
  border: none !important;
  /* Remove the border-bottom */
  text-align: center;
  width: 30%;
  float: right;
  outline: none !important;
  /* Remove any outline */
  box-shadow: none !important;
  /* Remove any potential shadow */
}
#wk_rma_new_request:hover {
  background: transparent;
  border: none !important;
  /* Ensure border-bottom is not added on hover */
  outline: none !important;
  /* Remove outline on hover */
  box-shadow: none !important;
  /* Remove shadow on hover */
}
.tooltip {
  position: relative;
  display: inline-block;
  margin-left: 10px;
}
.tooltip .tooltiptext {
  visibility: visible;
  width: 300px;
  color: #333;
  text-align: left;
  padding: 8px;
  border-radius: 6px;
  position: relative;
  z-index: 1;
  left: 50%;
  margin-left: -100px;
  line-height: 2.1;
  display: block;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
.info-icon {
  cursor: pointer;
  color: #2d337f;
  font-weight: bold;
  font-size: 21px;
}
.convert-btn {
  background-color: #b89b65;
  color: #333;
  border: 1px solid #b89b65;
  padding: 4px 105px !important;
  font-size: 18px !important;
  /* Adjust font size for a smaller appearance */
  font-weight: bold;
  border-radius: 3px;
  /* Slightly reduce border radius */
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.convert-btn:hover {
  background-color: #2d337f;
  color: #fff;
}
.questimg {
  cursor: pointer;
  margin-bottom: 10px;
  display: inline-block;
  color: #2d337f;
  transition: color 0.3s ease;
  padding: 0 0px;
  height: 20px;
  transform: scale(1.1);
}
.questimg:hover {
  color: #b89b65;
  /* Gold hover color */
}
.hint-container {
  position: relative;
  display: inline-block;
}
.hint-text {
  display: none;
  position: absolute;
  background-color: #f7f7f7;
  color: #333;
  padding: 12px;
  border-radius: 5px;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
  font-size: 15px;
  max-width: 451px;
  z-index: 100;
  top: 20px;
  left: 0;
  white-space: normal;
  width: 450px;
  border: #2d337f;
}
.hint-container:hover .hint-text {
  display: block;
  /* Show tooltip on hover */
}
/* Style each button individually */
#save-btn-unique,
#save-duplicate-btn-unique,
#save-draft-btn-unique {
  background-color: white;
  /* Background color */
  color: #2d337f;
  /* Text color */
  border: 1px solid #2d337f;
  /* Border color */
  padding: 10px 20px;
  /* Padding */
  font-size: 14px;
  /* Font size */
  border-radius: 5px;
  /* Rounded corners */
  cursor: pointer;
  transition: all 0.3s ease;
  /* Transition for hover effect */
  display: inline-block;
  /* Align inline */
  margin-right: 10px;
  /* Space between buttons */
  float: none !important;
}
/* Hover effect */
#save-btn-unique:hover,
#save-duplicate-btn-unique:hover,
#save-draft-btn-unique:hover {
  background-color: #2d337f;
  /* Hover background color */
  color: white;
  /* Hover text color */
}
/* Align buttons to the right */
.button-container {
  display: flex;
  justify-content: flex-end;
  /* Right alignment */
  margin-top: 15px;
  /* Margin above button container */
}
.admin__data-grid-pager .admin__control-text {
  text-align: center;
  width: 7rem !important;
  max-height: 3.4rem !important;
  float: left;
  height: 40px;
}
.page-title {
  display: none;
}
.group-image {
  width: 240px;
  /* Adjust size as needed */
  height: auto;
  /* Maintain aspect ratio */
  display: block;
  margin: 10px auto;
  /* Center the image and add vertical space */
  border-radius: 15px;
  /* Add rounded corners */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Smooth hover effect */
}
.wk-mp-banner-container {
  width: 100%;
  border: none;
}
.wk-mp-banner {
  background-position: center;
  /* Centers the image */
  background-repeat: no-repeat;
  /* Prevents the background from repeating */
  background-color: #ffffff;
  padding: 30px 20px;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
  max-width: 100%;
}
.wk-sellergroup .wk-sellergroup-wrapper-container {
  margin-bottom: 20px;
  width: 100%;
  list-style: none;
  padding-left: 0px !important;
  display: inline-block;
  vertical-align: top;
  max-width: 280px;
  margin-left: 15px;
  white-space: nowrap;
}
.wk-mp-header h2 {
  font-size: 30px !important;
}
.wk-mp-header h1 {
  font-size: 2em !important;
  color: #FFFFFF;
  margin-bottom: 0.3em;
  font-weight: bold;
  word-wrap: break-word;
}
.learn-more-container {
  text-align: center;
  margin-top: 20px;
}
.learn-more-link {
  font-size: 22px;
  font-weight: bold;
  color: #2d337f;
  text-decoration: none;
  border: 1px solid #2d337f;
  padding: 10px 20px;
  border-radius: 5px;
  display: inline-block;
  transition: background-color 0.3s, color 0.3s;
  margin-bottom: 100px;
}
.learn-more-link:hover {
  background-color: #b89b65;
  color: #ffffff;
}
.custom-message-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  /* Adjust this value to move the div lower */
}
.custom-message-content {
  background-color: #f7f7f7;
  /* Light background */
  border: 2px solid #2d337f;
  /* Main Captain Greek color */
  border-radius: 12px;
  padding: 40px;
  max-width: 600px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.welcome-message {
  font-size: 28px;
  /* Larger font size */
  color: #2d337f;
  /* Captain Greek main color */
  font-weight: bold;
  margin-bottom: 10px;
}
.instructions {
  font-size: 20px;
  /* Larger font size */
  color: #333;
  /* Dark text color */
  margin-bottom: 20px;
}
.pricing-link .purchase-link {
  display: inline-block;
  font-size: 22px;
  /* Larger font size */
  color: #b89b65;
  /* Gold color */
  border: 2px solid #b89b65;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s, color 0.3s;
}
.pricing-link .purchase-link:hover {
  background-color: #b89b65;
  /* Gold background on hover */
  color: #2d337f;
  /* Main color on hover */
}
/* Base layout structure */
.wk-mp-page-wrapper {
  display: flex;
  width: 100%;
  min-height: 100vh;
}
/* Sidebar styling */
.wk-mp-menu-wrapper {
  position: fixed;
  /* Keep sidebar fixed while scrolling */
  width: 280px;
  /* Fixed width instead of percentage */
  height: 100vh;
  /* Full viewport height */
  overflow-y: auto;
  /* Scrollable if content is too long */
  background: #f8f8f8;
  border-right: 1px solid #e3e3e3;
  padding: 20px;
  box-sizing: border-box;
}
/* Main content area */
.wk-mp-columns {
  flex: 1;
  margin-left: 280px;
  /* Same as sidebar width */
  padding: 20px;
  box-sizing: border-box;
}
.wk-mp-main {
  width: 100%;
}
/* Adjust the field container if necessary */
.field.password.required {
  /* Remove any styles that might affect the layout, such as display: flex; */
  /* If using flexbox and you need to keep it: */
  display: flex;
  flex-direction: column;
  /* Stack children vertically */
}
/* Password wrapper styles remain the same */
.control.password-wrapper {
  position: relative;
  margin-bottom: 20px;
  /* Space after the password field */
}
.control.password-wrapper .input-text {
  width: 100%;
  padding-right: 40px;
  /* Space for the eye icon */
}
.control.password-wrapper .password-actions {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.control.password-wrapper .password-actions #togglePassword {
  cursor: pointer;
  color: #2D337F;
}
/* Forgot password styles */
.forgot-password {
  display: block;
  text-align: center;
  margin-top: -30px;
  position: absolute;
  margin-left: 65px;
  padding-bottom: 50px !important;
}
.forgot-password .action.remind {
  color: #2D337F;
  text-decoration: none;
  font-size: 16px;
}
.forgot-password .action.remind:hover {
  color: #b89b65;
  text-decoration: none;
}
.custom-login-button {
  margin-bottom: 10px;
}
.product-item .product-item-name {
  text-align: center;
}
.box-tocart #instant-purchase {
  display: block;
  padding: 10px 0;
  padding-left: 28px;
  width: px !important;
  max-width: 250px;
  transform: scaleX(1.28);
  font-size: 15px;
}
.box-tocart .actions {
  display: block;
  text-align: left;
  width: 100%;
}
.action-primary.action-accept {
  background-color: #2D337F !important;
  /* Blue background */
  color: #FFFFFF !important;
  /* White text */
  border: 1px solid #2D337F !important;
  /* Blue border */
  border-radius: 8px !important;
  /* Rounded corners */
  padding: 8px 45px !important;
  /* Adjust padding as needed */
  font-size: 16px !important;
  /* Adjust to your preferred size */
  font-weight: bold;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease !important;
}
.action-primary.action-accept:hover {
  background-color: #b89b65 !important;
  /* Gold background on hover */
  color: #FFFFFF !important;
  /* Blue text on hover */
  border-color: #b89b65 !important;
  /* Update border color to match hover background */
}
.ask-que-to-admin-link {
  transition: all 0.3s ease;
  /* Smooth transition for all properties */
}
/* Hover effect */
.ask-que-to-admin-link:hover {
  background-color: #b89b65;
  /* Gold background */
  color: #2D337F;
  /* Blue text */
  text-decoration: none;
  /* Remove underline on hover if any */
}
.title.block-collapsible-nav-title.marketplace-navigation-title {
  color: #2D337F;
  /* Captain Greek's primary blue */
  font-family: Arial, sans-serif;
  /* Consistent font styling */
  font-size: 20px;
  /* Reduced size for better proportions */
  font-weight: bold;
  /* Keep bold for emphasis */
  text-align: center;
  /* Center-align text */
  padding: 10px 15px;
  /* Adjust padding for spacing */
  border-radius: 5px;
  /* Slightly rounded corners */
  line-height: 1.5;
  /* Adjust line spacing */
}
/* Strong element styling for the title */
.title.block-collapsible-nav-title .marketplace-title {
  font-size: 20px;
  /* Smaller font size */
  font-weight: bold;
  /* Emphasize text */
  font-style: italic;
  /* Italics for styling */
  color: #2D337F;
  /* Blue text for branding */
  letter-spacing: 1px;
  /* Slight letter spacing */
  text-decoration: none;
  /* Underline the text */
  text-decoration-color: #b89b65;
  /* Gold underline */
  text-decoration-thickness: 2px;
  /* Make the underline thicker */
  text-underline-offset: 4px;
  /* Add some space between text and underline */
}
/* Ensure visibility of the header */
#marketplace-nav-header {
  display: block;
  /* Ensure it's visible */
  visibility: visible;
  /* Make fully visible */
  opacity: 1;
  /* Ensure opacity */
  text-align: center;
}
/* Affiliate Management Navigation Title */
.title.block-collapsible-nav-title.affiliates-management-navigation-title {
  color: #2D337F;
  /* Captain Greek's primary blue */
  font-family: Arial, sans-serif;
  /* Consistent font styling */
  font-size: 20px;
  /* Reduced size for better proportions */
  font-weight: bold;
  /* Keep bold for emphasis */
  text-align: center;
  /* Center-align text */
  padding: 10px 15px;
  /* Adjust padding for spacing */
  border-radius: 5px;
  /* Slightly rounded corners */
  line-height: 1.5;
  /* Adjust line spacing */
}
/* Strong element styling for the Affiliate Management title */
.title.block-collapsible-nav-title .affiliates-management-title {
  font-size: 20px;
  /* Smaller font size */
  font-weight: bold;
  /* Emphasize text */
  font-style: italic;
  /* Italics for styling */
  color: #2D337F;
  /* Blue text for branding */
  letter-spacing: 1px;
  /* Slight letter spacing */
  text-decoration: none;
  /* Underline the text */
  text-decoration-color: #b89b65;
  /* Gold underline */
  text-decoration-thickness: 2px;
  /* Make the underline thicker */
  text-underline-offset: 4px;
  /* Add some space between text and underline */
}
/* Ensure visibility of the header */
#affiliates-management-nav-header {
  display: block;
  /* Ensure it's visible */
  visibility: visible;
  /* Make fully visible */
  opacity: 1;
  /* Ensure opacity */
  text-align: center;
}
/* Customer Panel Header */
#customer-panel-nav-header {
  display: block;
  /* Ensure it's visible */
  visibility: visible;
  /* Make fully visible */
  opacity: 1;
  /* Ensure opacity */
  text-align: center;
  /* Center-align text */
}
/* Customer Panel Navigation Title */
.title.block-collapsible-nav-title.customer-panel-navigation-title {
  color: #2D337F;
  /* Captain Greek's primary blue */
  font-family: Arial, sans-serif;
  /* Consistent font styling */
  font-size: 20px;
  /* Reduced size for better proportions */
  font-weight: bold;
  /* Keep bold for emphasis */
  text-align: center;
  /* Center-align text */
  padding: 10px 15px;
  /* Adjust padding for spacing */
  border-radius: 5px;
  /* Slightly rounded corners */
  line-height: 1.5;
  /* Adjust line spacing */
}
/* Strong element styling for the Customer Panel title */
.title.block-collapsible-nav-title .customer-panel-title {
  font-size: 20px;
  /* Match Affiliate Management */
  font-weight: bold;
  /* Emphasize text */
  font-style: italic;
  /* Italics for styling */
  color: #2D337F;
  /* Captain Greek's blue */
  letter-spacing: 1px;
  /* Slight letter spacing */
  text-decoration: none;
  /* Underline the text */
  text-decoration-color: #b89b65;
  /* Gold underline */
  text-decoration-thickness: 2px;
  /* Make the underline thicker */
  text-underline-offset: 4px;
  /* Add space between text and underline */
}
.header.links .name {
  white-space: nowrap;
  /* Remove truncation if not required */
  overflow: visible;
  /* Allow full name to be displayed */
}
.title.account-nav-title {
  color: #2D337F;
  /* Captain Greek's primary blue */
  font-family: Arial, sans-serif;
  /* Consistent font styling */
  font-size: 20px;
  /* Adjust font size */
  font-weight: bold;
  /* Make the title bold */
  text-align: center;
  /* Center-align the text */
  padding: 10px 15px;
  /* Add padding for spacing */
  border-radius: 5px;
  /* Rounded corners */
  line-height: 1.5;
  /* Improve readability with proper line height */
}
/* Styling for the strong element inside the title */
.title.account-nav-title strong {
  font-size: 20px;
  /* Match font size for consistency */
  font-weight: bold;
  /* Keep text bold */
  font-style: italic;
  /* Add italic style for emphasis */
  color: #2D337F;
  /* Use Captain Greek's primary blue */
  text-decoration: none;
  /* Underline the text */
  text-decoration-color: #b89b65;
  /* Use Captain Greek's gold for underline */
  text-decoration-thickness: 2px;
  /* Make the underline thicker */
  text-underline-offset: 4px;
  /* Add spacing between text and underline */
}
#block-collapsible-nav-seller {
  display: none;
  transition: max-height 0.3s ease;
}
#block-collapsible-nav-seller.active {
  display: block;
}
#marketplace-nav-header {
  cursor: pointer;
}
#marketplace-nav-header .toggle-arrow {
  transition: transform 0.3s ease;
  display: inline-block;
}
#marketplace-nav-header.active .toggle-arrow {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
/* Hide the content by default */
#block-collapsible-nav-affiliate {
  display: none;
  transition: max-height 0.3s ease;
}
/* Show the content when active */
#block-collapsible-nav-affiliate.active {
  display: block;
}
/* Make the entire header clickable */
#affiliates-management-nav-header {
  cursor: pointer;
}
/* Transition for the arrow */
#affiliates-management-nav-header .toggle-arrow {
  transition: transform 0.3s ease;
  display: inline-block;
}
/* Rotate the arrow when active */
#affiliates-management-nav-header.active .toggle-arrow {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
/* Hide the content by default */
#customer-panel-content {
  display: block;
  transition: max-height 0.3s ease;
}
/* Show the content when active */
#customer-panel-content.active {
  display: none;
}
/* Change cursor to pointer on header */
#customer-panel-header {
  cursor: pointer;
}
/* Arrow transition */
#customer-panel-header .toggle-arrow {
  transition: transform 0.3s ease;
  display: inline-block;
}
/* Rotate arrow when active */
#customer-panel-header.active .toggle-arrow {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
/* Make headers sticky */
.sticky-header {
  position: sticky;
}
/* Adjust content below to prevent overlap */
.content {
  margin-top: 50px;
  /* Adjust based on the height of your headers */
}
/* Additional styles for the arrow */
.sticky-header .toggle-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}
.sticky-header.active .toggle-arrow {
  transform: rotate(180deg);
}
html {
  scroll-behavior: smooth;
}
/* Draggable column headers */
.data-grid .data-grid-th._draggable {
  cursor: grab;
}
/* General styling for sortable and draggable column headers */
.data-grid .data-grid-th,
.data-grid-th_sortable._draggable,
.data-grid .data-grid-multicheck-cell {
  background-clip: padding-box;
  color: #ffffff;
  /* White text for better readability */
  padding: 10px 8px;
  /* Reduced horizontal padding by 2px */
  position: relative;
  vertical-align: middle;
  text-transform: uppercase;
  /* Consistent text */
  font-size: 14px;
  font-weight: bold;
  background-color: #2d337f;
  /* Captain Greek blue */
  border: 1px solid #b89b65;
  /* Gold border for elegance */
  border-radius: 4px;
  /* Rounded corners */
  margin: 1px;
}
/* Styling for table headers */
.data-grid th,
.data-grid-th_sortable._draggable {
  background-color: #2d337f;
  /* Captain Greek blue */
  color: #ffffff;
  /* White text */
  border: 1px solid #b89b65;
  /* Gold borders */
  padding: 10px 8px;
  /* Reduced horizontal padding */
  font-size: 14px;
  /* Uniform font size */
  text-align: center;
  /* Center-align text */
  font-weight: 600;
  border-radius: 4px;
  /* Rounded corners */
}
/* Styling for table cells */
.data-grid td {
  font-size: 14px;
  color: #333333;
  /* Neutral dark text */
  padding: 10px 15px;
  text-align: center;
  /* Center-align content */
  border: 1px solid #dddddd;
  /* Subtle borders */
  background-color: #f9f9f9;
  /* Light background for contrast */
}
/* Alternating row colors */
.data-grid tbody tr:nth-child(odd) td {
  background-color: #ffffff;
  /* White background for odd rows */
  vertical-align: middle;
}
.data-grid tbody tr:nth-child(even) td {
  background-color: #f7f7f7;
  /* Light gray for even rows */
  vertical-align: middle;
}
/* Remove hover effects */
.data-grid th:hover,
.data-grid tbody tr:hover td,
.data-grid td:hover,
.data-grid-th_sortable._draggable:hover {
  background-color: inherit;
  /* Keep the original background color */
  color: inherit;
  /* Keep original text color */
  transform: none;
  /* Remove lift effect */
}
.data-grid .data-grid-th._sortable:hover {
  background-color: #ffffff !important;
  /* Keep Captain Greek Blue */
  color: #2d337f !important;
  /* White text for consistency */
  border: 1px solid #b89b65 !important;
  /* Maintain gold border */
  transform: none !important;
  /* Remove any lift effect */
  cursor: grab;
  /* Ensure the cursor remains consistent */
}
.wk-mp-tr-amount-wrapper {
  box-sizing: border-box;
  margin-bottom: 10px;
  background-color: #f7f7f7;
  /* Matches your main container background */
  padding: 20px;
  /* Adds spacing for a cleaner look */
  border-radius: 10px;
  /* Adds rounded corners */
  border: 1px solid #b89b65;
  /* Gold border to align with your hover color */
  font-family: Arial, sans-serif;
  /* Ensures consistent font */
}
.grid {
  border-radius: 5px;
}
.wk-mp-tr-amount-wrapper {
  box-sizing: border-box;
  margin-bottom: 10px;
  background-color: #f7f7f7;
  /* Matches your main container background */
  padding: 20px;
  /* Adds spacing for a cleaner look */
  border-radius: 10px;
  /* Adds rounded corners */
  border: 1px solid #b89b65;
  /* Gold border to align with your hover color */
  font-family: Arial, sans-serif;
  /* Ensures consistent font */
}
.wk-mp-page-title.legend > span {
  margin-left: 120px;
}
.wk-card {
  display: flex;
  gap: 10px;
  /* Space between cards */
  margin: 20px 0;
  /* Space above and below the card section */
}
.wk-card div {
  border: none;
  /* Remove border */
  border-radius: 0;
  /* Remove rounded corners */
  text-align: center;
  /* Center-align text and numbers */
  transition: transform 0.3s, box-shadow 0.3s;
  /* Smooth hover effects */
}
.wk-card div:hover {
  transform: translateY(-5px);
  /* Lift effect on hover */
  cursor: pointer;
  /* Indicate interactivity */
}
.wk-card div a {
  color: #2D337F;
  /* Captain Greek blue for links */
  font-weight: bold;
  /* Bold text */
  text-decoration: none;
  /* Remove underline */
  font-size: 20px;
  /* Slightly larger font for numbers */
}
.wk-card div span {
  display: block;
  margin-top: 5px;
  /* Space between the number and title */
  color: #333;
  /* Neutral color for the title */
  font-size: 16px;
  /* Title text size */
}
.wk-card > a.active {
  color: #b89b65;
  /* Gold text for active state */
  border: 2px solid #2D337F;
  /* Blue border for active card */
  /* Highlight active card text */
  border-radius: 8px;
  font-weight: bold;
  font-size: 20px;
}
.wk-card > a {
  background: transparent;
  /* Make background transparent */
  padding: 16px;
  /* Consistent padding */
  width: 100%;
  color: #2D337F;
  /* Captain Greek blue for links */
  font-weight: bold;
  /* Bold for emphasis */
  text-decoration: none;
  /* No underline */
  border: 2px solid #b89b65;
  /* Gold border */
  border-radius: 8px;
  /* Rounded corners for a smooth look */
  display: flex;
  /* Flex layout for alignment */
  justify-content: center;
  /* Center the content */
  align-items: center;
  /* Vertically center the content */
  transition: all 0.3s ease;
  /* Smooth transition for hover effects */
}
.wk-card > a:hover {
  color: #FFFFFF;
  /* White text on hover */
  background: #b89b65;
  /* Gold background on hover */
  border-color: #2D337F;
  /* Blue border on hover */
}
.wk-card .wk-product-count {
  font-weight: 800;
  margin-right: 15px;
}
header .action-close.wk-close {
  background-color: #2D337F;
  /* Captain Greek blue */
  color: #FFFFFF;
  /* White text */
  border: 1px solid #b89b65;
  /* Gold border */
  padding: 10px 15px;
  /* Adjust padding */
  border-radius: 5px;
  /* Rounded corners */
  font-size: 14px;
  /* Text size */
  font-weight: bold;
  /* Bold text */
  cursor: pointer;
  /* Pointer cursor */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Subtle shadow */
}
header .action-close.wk-close:hover {
  background-color: #b89b65;
  /* Gold on hover */
  color: #2D337F;
  /* Blue text */
  border-color: #2D337F;
  /* Blue border */
}
.wk-orderbox {
  border: 1px solid #ccc;
  display: inline-block;
  width: 100% !important;
}
/* Override styles for the close button */
.modal-popup .action-close.wk-close {
  background-color: #2D337F !important;
  color: #FFFFFF !important;
  border: 1px solid #b89b65 !important;
  padding: 8px 12px !important;
  border-radius: 5px !important;
  font-size: 14px !important;
  cursor: pointer;
}
/* Adjust the pseudo-element if necessary */
.modal-popup .action-close.wk-close::before {
  content: 'Close';
  color: #FFFFFF;
  font-size: 14px;
  /* Remove any default background or icon */
  background: none;
}
.wk-dashboard-container .wk-dashboard-block {
  background: #ffffff;
  /* Maintain a clean white background */
  display: grid;
  /* Use grid for consistent layout */
  grid-gap: 1.5rem;
  /* Reduce gap slightly for a compact layout */
  padding: 2rem;
  /* Maintain overall padding */
  border-radius: 10px;
  /* Add rounded corners */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Subtle shadow for depth */
  border: 1px solid #b89b65;
  /* Add a thin gold border for Captain Greek branding */
}
.wk-tab-content {
  background: none !important;
}
.wk-dashboard-container .wk-graph-heading {
  color: #2D337F;
  /* Captain Greek blue for visibility */
  font-size: 16px;
  /* Slightly larger font for better readability */
  font-weight: 700;
  /* Make it bold for emphasis */
  text-align: center;
  /* Keep it centered */
  margin-bottom: 1rem;
  /* Add space below the heading */
  text-transform: uppercase;
  /* Make text uppercase for a professional look */
  border-bottom: 2px solid #b89b65;
  /* Add a gold underline */
  padding-bottom: 5px;
  /* Space between text and underline */
}
/*──────────────────────────────────────────────────────────────
  Captain Greek ▸ Global Link Effect  (colour + Y‑lift only)
  Magento‑safe: no :has(), no layers, no underline
  Updated: 2025‑07‑18
──────────────────────────────────────────────────────────────*/
/* 1 ▸ brand colours */
:root {
  --cg-blue: #2d337f;
  /* default link colour */
  --cg-accent: #b89b65;
  /* hover colour        */
}
/* 2 ▸ baseline style for ALL links */
a {
  /* ‑‑ position:relative; removed  */
  color: var(--cg-blue);
  text-decoration: none;
  /* no underline */
  transition: color .35s ease,
        transform .25s ease;
  /* for the lift */
}
a {
  /* existing rules … */
  display: inline-block;
  /* <— NEW            */
}
/* 3 ▸ hover / focus: colour change + upward lift */
a:hover,
a:focus {
  color: var(--cg-accent);
  transform: translateY(-3px) scale(1.015);
  /* subtle 2 px lift */
}
/* 4 ▸ reduced‑motion users */
@media (prefers-reduced-motion: reduce) {
  a {
    transition: none;
  }
  a:hover,
  a:focus {
    transform: none;
  }
}
.wk-dashboard-container .wk-activity-head {
  color: #2D337F;
  /* Captain Greek blue for visibility */
  font-size: 16px;
  /* Slightly larger font for better readability */
  font-weight: 700;
  /* Make it bold for emphasis */
  text-align: center;
  /* Keep it centered */
  text-transform: uppercase;
  /* Make text uppercase for a professional look */
  display: block !important;
}
.wk-dashboard-container .wk-earning {
  justify-items: center;
  grid-gap: 2rem;
  text-align: center;
}
.account-nav .content {
  background: none !important;
  /* Remove any background color or image */
  text-align: center;
  /* Center-align the text */
}
.account-nav .item a {
  display: inline-block;
  /* Ensure consistent layout */
  padding: 10px 15px;
  /* Add spacing */
  background: none !important;
  border: 1px solid transparent;
  /* Default transparent border */
  color: #2D337F;
  /* Captain Greek blue text color */
  font-size: 16px;
  /* Adjust font size */
  text-decoration: none;
  /* Remove underline */
  border-radius: 8px;
  /* Rounded corners */
  transition: all 0.3s ease-in-out;
  /* Smooth transition */
  text-align: center;
  /* Center align text */
}
.account-nav .item a:hover {
  background: #ffffff;
  /* Slightly lighter background on hover */
  color: #b89b65;
  /* Change text color to gold on hover */
  transform: scale(1.1);
  /* Slightly increase size */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Add subtle shadow for depth */
}
.account-nav .item.current a,
.account-nav .item.current strong {
  border-color: #b89b65;
  /* Captain Greek gold */
  border-width: 2px;
  /* Optional: Slightly thicker border for emphasis */
  border-style: solid;
  /* Ensure the border is solid */
  font-weight: 700;
  /* Make the font bold for better visibility */
  color: #2D337F;
  /* Captain Greek blue for text color */
  background-color: #f7f7f7;
  /* Subtle background for active tab */
  padding: 10px;
  /* Add spacing for better readability */
  border-radius: 8px;
  /* Add rounded corners for a polished look */
  text-align: center;
  /* Center-align the text */
  display: inline-block;
  /* Ensure proper alignment */
  transition: all 0.3s ease-in-out;
  /* Smooth transition effect */
}
/* Fix hover for parent menu item */
.account-nav .item:hover > a {
  background-color: #ffffff;
  /* Ensure background matches dropdown */
  transition: background-color 0.3s ease;
  /* Smooth hover effect */
}
.mp-mphyperlocal ul.nav {
  display: none;
  /* Keep hidden by default */
  top: 0;
  /* Align to the top */
  position: absolute;
  /* Ensure positioning relative to parent */
  background-color: #ffffff;
  /* White background for dropdown */
  margin-left: 0%;
  /* Adjust horizontal alignment */
  border: 1px solid #b89b65;
  /* Captain Greek gold border */
  border-radius: 8px;
  /* Rounded corners for a modern look */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Subtle shadow for depth */
  z-index: 10;
  /* Ensure it stays above other elements */
  padding: 10px;
  /* Add spacing inside the dropdown */
}
/* Remove default list styles */
.items {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Display dropdown on hover */
.mp-mphyperlocal:hover ul.nav {
  display: inline-block;
  /* Show dropdown on hover */
  transition: all 0.3s ease-in-out;
  /* Smooth appearance */
}
/* Style individual dropdown items */
.mp-mphyperlocal ul.nav .items > li {
  padding: 10px 15px;
  /* Add spacing for better readability */
  color: #2D337F;
  /* Captain Greek blue for text */
  cursor: pointer;
  /* Indicate clickable area */
  transition: all 0.3s ease-in-out;
  /* Smooth hover transition */
}
/* Add hover effect to dropdown items */
.mp-mphyperlocal ul.nav .items > li:hover {
  background-color: #f7f7f7;
  /* Subtle hover background */
  color: #b89b65;
  /* Captain Greek gold for hover text */
  border-radius: 5px;
  /* Rounded effect on hover */
}
.account-nav .item a {
  display: inline-block;
  padding: 5.5px 18px 5.5px 15px;
  border: none;
}
.account .account-nav {
  margin-bottom: 6px !important;
}
/* General Styling for the Menu */
.mpaffiliate-marketplace-navigation {
  list-style: none;
  /* Remove bullet points */
  padding: 0;
  /* Remove default padding */
  margin: 0;
  /* Remove default margin */
  background-color: #ffffff;
  /* Subtle hover background */
  color: #b89b65;
  /* Captain Greek gold for hover text */
  border-radius: 5px;
  /* Rounded effect on hover */
}
.mpaffiliate-marketplace-navigation .sub-menu {
  list-style: none;
  /* Remove bullet points from sub-menu */
  padding: 0;
  /* Remove default padding */
  margin: 0;
  /* Remove default margin */
  background-color: #ffffff;
  /* Set background color for the dropdown */
  border: 1px solid #b89b65;
  /* Add a Captain Greek gold border */
  border-radius: 8px;
  /* Add rounded corners */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Add a subtle shadow */
  z-index: 10;
  /* Ensure it appears above other elements */
  position: absolute;
  /* Position the dropdown absolutely */
  display: none;
  /* Initially hide the dropdown */
  margin-left: 40%;
}
/* Show dropdown on hover */
.mpaffiliate-marketplace-navigation:hover .sub-menu {
  display: block;
  /* Display the dropdown on hover */
  transition: all 0.3s ease-in-out;
  /* Add smooth animation */
}
/* Style individual items in the menu */
.mpaffiliate-marketplace-navigation .sub-menu .nav.item {
  padding: 10px 15px;
  /* Add spacing for readability */
  color: #2D337F;
  /* Captain Greek blue */
  cursor: pointer;
  /* Indicate clickable area */
  transition: all 0.3s ease-in-out;
  /* Smooth hover effect */
}
/* Hover effect for individual items */
.mpaffiliate-marketplace-navigation .sub-menu .nav.item:hover {
  background-color: #f7f7f7;
  /* Add a light background on hover */
  border-radius: 5px;
  /* Add subtle rounding */
  transition: all 0.3s ease-in-out;
  /* Smooth hover effect */
}
.mpaffiliate-marketplace-navigation > strong,
.mpaffiliate-marketplace-navigation > a {
  color: #2D337F;
  /* Captain Greek blue */
  background-color: #ffffff;
  /* Subtle off-white background */
  padding: 10px 20px;
  /* Add spacing around text */
  display: inline-block;
  /* Make it behave like a button */
  text-align: center;
  /* Center-align the text */
  font-size: 16px;
  /* Set a consistent font size */
  border: 2px solid #b89b65;
  /* Gold border */
  border-radius: 12px;
  /* Rounded corners */
  transition: all 0.3s ease-in-out;
  /* Smooth hover effect */
}
/* Optional hover effect for buttons */
.mpaffiliate-marketplace-navigation > strong:hover,
.mpaffiliate-marketplace-navigation > a:hover {
  background-color: #ffffff;
  /* Change background to white on hover */
  color: #b89b65;
  /* Gold text color */
  transform: scale(1.05);
  /* Slightly enlarge the button */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Add a subtle shadow */
  transition: all 0.3s ease-in-out;
  /* Smooth hover effect */
}
.manage-affiliate-item {
  border-left: 2px solid #b89b65;
  /* Keeps the layout intact while visually removing the left border */
  color: #2D337F;
  /* Captain Greek blue */
  background-color: #ffffff;
  /* Subtle off-white background */
  padding: 10px 20px;
  /* Add spacing around text */
  display: inline-block;
  /* Make it behave like a button */
  text-align: center;
  /* Center-align the text */
  font-weight: bold;
  /* Make the text bold */
  font-size: 16px;
  /* Set a consistent font size */
  border: 2px solid #b89b65;
  /* Gold border */
  border-radius: 12px;
  /* Rounded corners */
  transition: all 0.3s ease-in-out;
  /* Smooth hover effect */
}
.manage-affiliate-item:hover {
  background-color: #ffffff;
  /* Change background to white on hover */
  color: #b89b65;
  /* Gold text color */
  transform: scale(1.05);
  /* Slightly enlarge the button */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Add a subtle shadow */
  border-left: 2px solid #2D337F;
}
.account-nav .item > strong {
  border-left: 2px solid #b89b65;
  display: inline-block;
  padding: 5.5px 18px 5.5px 15px;
}
.account-nav .item > strong:hover {
  background-color: #ffffff;
  /* Change background to white on hover */
  color: #b89b65;
  /* Gold text color */
  transform: scale(1.05);
  /* Slightly enlarge the button */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Add a subtle shadow */
  transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.wk_mpaffiliate_block {
  position: relative;
  /* Ensure proper positioning */
  background-color: #ffffff;
  /* Dropdown background color */
  border: 1px solid #b89b65;
  /* Captain Greek gold border */
  border-radius: 8px;
  /* Add rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Subtle shadow for depth */
  z-index: 10;
  /* Ensure dropdown stays above parent item */
  margin-left: 5px;
  /* Slightly offset dropdown to avoid overlap */
  border-top: 0 !important;
}
.wk_mpaffiliate_block::before,
.wk_mpaffiliate_block::after {
  content: none !important;
  position: absolute;
  top: 10px;
  /* Adjust the vertical position */
  left: -8px;
  /* Adjust the horizontal position */
  border-style: solid;
  height: 0;
  width: 0;
  z-index: 9;
  /* Ensure arrow is above parent menu item but below dropdown */
  border-top: none !important;
  /* Remove the top border */
}
.wk_mpaffiliate_block::before {
  border-width: 9px;
  /* Larger arrow for the outer border */
  border-color: transparent transparent transparent #b89b65;
  /* Captain Greek gold */
}
.wk_mpaffiliate_block::after {
  border-width: 7px;
  /* Smaller arrow for the inner background */
  border-color: transparent transparent transparent #ffffff;
  /* Matches dropdown background */
  left: -7px;
  /* Offset slightly to center it over `::before` */
  top: 12px;
  /* Adjust alignment to match `::before` */
  content: none;
}
/* Styling for the right-pointing arrow */
.affiliate-right-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 15px;
  vertical-align: middle;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #2D337F;
  /* Captain Greek blue color */
}
/* Optional: Change arrow color on hover */
.mpaffiliate-marketplace-navigation:hover .affiliate-right-arrow {
  border-left-color: #b89b65;
  /* Captain Greek gold color on hover */
}
.mpaffiliate-marketplace-navigation:hover {
  border-bottom: none;
  /* Remove the bottom border on hover */
  transition: all 0.3s ease-in-out;
  /* Maintain smooth animation */
}
.mass-action-option {
  width: 150px;
}
#wk-mp-tr-heading {
  background-color: #eeeeee;
  text-align: center;
  border-radius: 10px;
  color: #2D337F;
}
#save-btn,
#wk-mp-save-duplicate-btn,
#wk-mp-save-draft-product-btn {
  margin-top: 35px !important;
}
.save-btn:hover {
  background-color: #b89b65;
  /* Gold color */
  color: #FFFFFF;
  /* White text */
}
.save-btn {
  background-color: #2D337F;
  /* Captain Greek blue */
  color: #FFFFFF;
  /* White text */
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.button-wrapper .button.wk-mp-btn {
  background-color: #FFFFFF;
  color: #2D337F;
  font-size: 16px;
  font-weight: bold;
  border: 1px solid #2D337F;
  border-radius: 5px;
  padding: 10px 20px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
.button-wrapper .button.wk-mp-btn:hover {
  background-color: #b89b65;
  color: #FFFFFF;
  border-color: #b89b65;
}
#save-btn:hover {
  background-color: #b89b65;
  /* Gold background */
  color: #FFFFFF;
  /* White text */
  border: 1px solid #2D337F;
  /* Blue border */
}
.wk-profile-links-container .wk-profile-links a {
  background-color: #2d337f;
  /* Captain Greek primary color */
  color: #ffffff;
  /* White text */
  border: 1px solid #b89b65;
  /* Gold border */
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
  display: inline-block;
  /* Ensures buttons are inline-block */
  text-align: center;
  /* Centers the text */
  opacity: 1;
}
.wk-profile-links-container .wk-profile-links a:hover {
  background-color: #b89b65;
  /* Gold on hover */
  color: #2d337f !important;
  /* Blue text on hover */
  border: 1px solid #2d337f;
  /* Border changes to blue */
  text-decoration: none;
  /* No underline */
}
.wk-profile-links-container {
  text-align: center;
  /* Center-aligns the buttons in the container */
  margin-top: 20px;
  /* Adds spacing above the buttons */
}
.wk-profile-links-container .wk-profile-links {
  display: inline-block;
  /* Keeps links aligned side by side */
  margin: 10px;
  /* Adds spacing between buttons */
}
.wk-orderStatus-results-option:hover,
.wk-category-results-option:hover {
  background-color: #b89b65;
  /* Captain Greek gold hover background */
  color: #2d337f;
  /* Captain Greek blue text */
  font-weight: bold;
  /* Make the text bold for emphasis */
  padding: 10px;
  /* Add padding for better spacing */
  cursor: pointer;
  /* Change cursor to pointer for interactivity */
  border-radius: 5px;
  /* Add rounded corners for consistency */
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
  /* Smooth hover transition */
  transform: scale(1.01);
  /* Slight zoom effect for interaction */
}
.wk-border-blue {
  border: 1px solid #2D337F;
  vertical-align: middle;
  text-align: center;
  padding: 10px 20px;
}
.wk-filter-data-div {
  width: auto;
  height: auto;
  border: 1px solid;
  border-radius: 10px;
  display: inline-block;
}
.wk-border-blue span {
  color: #2d337f;
  vertical-align: middle;
  text-align: center;
}
.wk-border-blue:hover {
  background-color: #b89b65;
  /* Gold background on hover */
  transform: scale(1.01);
  /* Slight zoom on hover */
  cursor: pointer;
  /* Change cursor to pointer for interactivity */
}
.wk-border-blue:hover span {
  color: #FFFFFF;
  /* White text on hover */
}
.wk-bg-blue-color {
  background-color: #2d337f;
}
.action.back,
.action.print,
.action.track,
.action.edit,
.action.view,
.action.change-password {
  color: #2D337F;
  /* Captain Greek main color */
  transition: all 0.3s ease;
}
.action.back:hover,
.action.print:hover,
.action.track:hover,
.action.edit:hover,
.action.view:hover,
.action.change-password:hover {
  color: #b89b65;
  /* Gold hover color */
  transform: scale(1.05) !important;
}
.wk-sbcom-onereply-seller {
  background: #2D337F;
  /* Captain Greek Blue */
  color: #FFFFFF;
  /* White Text */
  padding: 10px 15px;
  /* Padding for better spacing */
  border-radius: 8px;
  /* Rounded corners */
  font-size: 14px;
  /* Standard font size */
  font-weight: 600;
  /* Slightly bold */
  line-height: 1.6;
  /* Better text readability */
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  /* Subtle shadow */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* Smooth hover effect */
  width: 100%;
}
/* Hover Effects */
.wk-sbcom-onereply-seller:hover,
.wk-sbcom-onereply-customer:hover {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  /* Stronger shadow on hover */
}
/* Optional Focus Effect */
.wk-sbcom-onereply-seller:focus,
.wk-sbcom-onereply-customer:focus {
  outline: 2px solid #b89b65;
  /* Golden outline for accessibility */
  outline-offset: 2px;
}
.wk-sbcom-onereply-customer {
  background: #b89b65;
  /* Captain Greek Gold */
  color: #FFFFFF;
  /* White Text */
  padding: 10px 15px;
  /* Consistent spacing */
  border-radius: 8px;
  /* Smooth rounded corners */
  font-size: 14px;
  /* Readable font size */
  font-weight: 600;
  /* Bold text for emphasis */
  line-height: 1.6;
  /* Better readability */
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
  /* Subtle shadow for depth */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* Smooth hover effects */
  width: 100%;
}
/* Left-aligned text (e.g., timestamps) */
.wk-sbcom-onereply-head-left {
  color: #FFFFFF;
  /* White text */
  float: left;
  /* Keep left alignment */
  font-size: 11pt;
  /* Slightly larger for better readability */
  font-weight: bold;
  text-transform: uppercase;
  /* Enhance emphasis */
  letter-spacing: 0.5px;
  /* Subtle spacing */
  margin-left: 5px;
  /* Add small margin for spacing */
}
/* Right-aligned text (e.g., Customer name) */
.wk-sbcom-onereply-head-right {
  color: #FFFFFF;
  /* White text */
  float: right;
  /* Right alignment */
  font-size: 11pt;
  /* Keep font consistent */
  font-weight: bold;
  text-transform: capitalize;
  /* Capitalize the customer name */
  margin-right: 5px;
  /* Add margin for alignment */
}
.wk-message-grid {
  display: flex;
  /* Flexbox layout for control */
  flex-direction: column;
  /* Align items vertically */
  gap: 15px;
  /* Space between items */
  padding: 20px;
  /* Inner spacing */
  background-color: #f7f7f7;
  /* Light gray background for clarity */
  border: 1px solid #e0e0e0;
  /* Soft border */
  border-radius: 8px;
  /* Smooth rounded edges */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Subtle shadow for depth */
}
.wk-mp-menu-wrapper::before {
  background-color: #ffffff;
  /* White background */
  position: fixed;
  width: 10rem;
  /* Increase width for better readability */
  top: 0;
  bottom: 0;
  left: 0;
  content: '';
  z-index: 799;
  border-right: 2px solid #b89b65;
  /* Golden border for a premium look */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  /* Add subtle shadow for depth */
}
#wk-mp-nav .level-0 > a {
  display: flex;
  /* Enable flexbox */
  flex-direction: column;
  /* Stack content vertically (icon and text) */
  justify-content: center;
  /* Center content vertically */
  align-items: center;
  /* Center content horizontally */
  color: #2D337F;
  /* Captain Greek main blue */
  text-decoration: none;
  /* Remove underlines */
  transition: color 0.3s ease;
  /* Smooth hover transition */
  font-size: 1.1rem;
  font-weight: bold;
  height: 100%;
  /* Ensure the container uses all available space */
  text-align: center;
  /* Center-align the text */
  width: 120%;
}
#wk-mp-nav .level-0 > a:hover {
  color: #b89b65;
  /* Gold color on hover */
  background-color: transparent;
  /* No background on hover */
  font-weight: bold;
}
#wk-mp-nav .level-0 > a.active,
#wk-mp-nav .level-0 > a.selected {
  color: #b89b65;
  /* Gold color for selected state */
  background-color: transparent;
  /* No background */
  font-weight: bold;
}
.wk-mp-menu .level-0 > .wk-mp-submenu {
  background-color: #2D2A27;
  /* Darker shade for better contrast */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* Add a soft shadow for depth */
  left: 100%;
  min-height: auto;
  /* Adjust height dynamically */
  padding: 1.5rem;
  /* Balanced padding for content */
  position: absolute;
  top: 0;
  transform: translateX(-100%);
  transition-duration: 0.3s;
  transition-property: transform, visibility;
  transition-timing-function: ease-in-out;
  visibility: hidden;
  z-index: 797;
  border-radius: 8px;
  /* Add rounded corners */
  border: 1px solid #b89b65;
  /* Golden border for premium feel */
}
/* Ensure submenu becomes visible on hover */
.wk-mp-menu .level-0:hover > .wk-mp-submenu {
  visibility: visible;
  transform: translateX(0);
  /* Slide the submenu into view */
}
/* Style the submenu headings */
.wk-mp-menu .wk-mp-submenu h2 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #FFFFFF;
  margin-bottom: 1rem;
  text-align: left;
  border-bottom: 1px solid #b89b65;
  /* Add golden underline for headings */
}
/* Style the submenu links */
.wk-mp-menu .wk-mp-submenu a {
  display: block;
  font-size: 1.1rem;
  font-weight: normal;
  color: #FFFFFF;
  text-decoration: none;
  margin: 0.5rem 0;
  padding: 0.5rem;
  border-radius: 5px;
  /* Slightly rounded links */
  transition: background-color 0.3s ease, color 0.3s ease;
}
/* Add hover effect to submenu links */
.wk-mp-menu .wk-mp-submenu a:hover {
  background-color: #b89b65;
  /* Golden hover effect */
  color: #2D2A27;
  /* Dark text for contrast */
}
.wk-mp-menu .level-0 {
  position: relative;
  /* Establish positioning context for submenu */
}
/* hide the row of mobile buttons on desktop */
@media (min-width: 768px) {
  .col-btn-actions.d-block {
    display: none !important;
  }
}
.amsl-social-login .amsl-buttons {
  display: flex;
  /* keeps the flex layout */
  flex-direction: column;
  /* main axis is now vertical   */
  align-items: center;
  /* horizontal centring on cross-axis */
  justify-content: center;
  /* optional: centres inside the container’s height */
  gap: 1rem;
  /* space between the buttons   */
  padding-left: 30px;
}
/* ----------  design-tokens  ---------- */
:root {
  /* brand colours (from Google & Microsoft guides) */
  --google-blue: #4285F4;
  --ms-border: #d0d7de;
  /* shared tokens */
  --radius: .5rem;
  /* 8 px */
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
/* ----------  base button  ---------- */
.amsl-button-wrapper.with-label.-rectangular .amsl-button {
  display: flex;
  align-items: center;
  gap: .75rem;
  /* space between icon & label              */
  height: 52px;
  /* ≥ 40 dp keeps Google happy              */
  width: 100%;
  padding: 0 1.25rem;
  font: 500 1rem/1 "Work Sans", sans-serif;
  border-radius: var(--radius);
  transition: var(--transition);
  cursor: pointer;
  /* better UX if element is <a> */
  font: inherit;
}
/* ----------  Google variant  ---------- */
.amsl-button.-google {
  background: var(--google-blue);
  color: #fff;
  border: none;
}
.amsl-button.-google:hover,
.amsl-button.-google:focus-visible {
  background: #3b6fd8;
  /* 8 % darker */
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
/* ----------  Microsoft variant  ---------- */
.amsl-button.-microsoftgraph {
  background: #fff;
  color: #1f1f1f;
  border: 2px solid var(--ms-border);
}
.amsl-button.-microsoftgraph:hover,
.amsl-button.-microsoftgraph:focus-visible {
  background: #f5f6f7;
  /* light fill so change is visible */
  border-color: #c4cbd3;
  /* slightly darker border */
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
/* ----------  icon sizing  ---------- */
.amsl-button svg,
.amsl-button img {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
/* =========================================================
   Helper notes: modern, centred, accessible
   ========================================================= */
:root {
  --amsl-accent: #2D337F;
  /* accent bar (Captain Greek blue) */
  --amsl-note-fg: #1f1f1f;
  /* keeps body text dark on white   */
}
.amsl-note {
  /*-- TYPOGRAPHY --*/
  font-size: 1.7rem;
  /* ≥ 18 pt → counted as large  */
  line-height: 1.35;
  font-weight: 600;
  /* semi-bold for quick scan   */
  /*-- LAYOUT & BOX --*/
  position: relative;
  /* allows the accent bar      */
  display: block;
  margin: 1.5rem auto;
  /* vertical rhythm            */
  max-width: 60ch;
  /* optimal line length        */
  padding: 1.25rem 1rem 1.25rem 1.75rem;
  /* space for the accent bar   */
  text-align: center;
  color: var(--amsl-note-fg);
  background: #ffffff;
  border-radius: .75rem;
  /* soft modern corner         */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  /*-- MOTION (prefers-reduced-motion respected) --*/
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}
@media (prefers-reduced-motion: no-preference) {
  .amsl-note.appear {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .amsl-note {
    opacity: 1;
    transform: none;
  }
}
/* Accent bar */
.amsl-note::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: .5rem;
  border-radius: .75rem 0 0 .75rem;
  background: var(--amsl-accent);
}
/* Optional: tweak spacing for the top/bottom modifiers you already use */
.amsl-note.-top {
  margin-bottom: 2rem;
}
.amsl-note.-bottom {
  margin-top: 2rem;
}
/* ----------  design-tokens (add)  ---------- */
:root {
  /* Apple “Sign in” button colours — HIG 2025 */
  --apple-fill: #000000;
  /* Black style (preferred on light pages) */
  --apple-hover: #1a1a1a;
  /* ~7 % lighter for hover/focus */
}
/* ----------  Apple variant  ---------- */
.amsl-button.-apple {
  background: var(--apple-fill);
  /* black at rest */
  color: #fff;
  border: none;
  border-radius: .375rem;
  /* 6 px per Apple HIG */
  transition: var(--transition);
}
/* label colour (rest) */
.amsl-button.-apple .amsl-text {
  color: #fff !important;
}
/* hover / focus — same lift, shadow, colour swap as others */
.amsl-button.-apple:hover,
.amsl-button.-apple:focus-visible {
  background: #fff;
  color: #000;
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.amsl-button.-apple:hover .amsl-text,
.amsl-button.-apple:focus-visible .amsl-text {
  color: #000 !important;
}
/* icon colour swap via CSS filter  ------------------------- */
.amsl-button.-apple .amsl-social-icon {
  filter: invert(1) brightness(2);
  /* white glyph on black btn */
  flex: 0 0 20px;
  /* same 20-px column */
  width: 20px;
  height: 20px;
  background-size: contain;
  background-position: center;
  opacity: 1 !important;
  /* override Amasty 0.54 */
}
.amsl-button.-apple:hover .amsl-social-icon,
.amsl-button.-apple:focus-visible .amsl-social-icon {
  filter: none;
  /* black glyph on white btn */
}
/*───────────────────────────────────────
  CaptainGreek · Social‑login mobile hot‑fix
  Forces Apple button back to black on ≤767 px
───────────────────────────────────────*/
@media (max-width: 767px) {
  .amsl-button.-apple {
    background: var(--apple-fill, #000) !important;
    /* black */
    color: #fff !important;
    /* text  */
    border: none !important;
  }
  /* keep the label / icon legible */
  .amsl-button.-apple .amsl-text {
    color: #fff !important;
  }
  .amsl-button.-apple .amsl-social-icon {
    filter: invert(1) brightness(2) !important;
    /* white glyph */
  }
}
/* ────────────────────────────────────────────────
   1. DESIGN TOKEN – declare the colour once
   ──────────────────────────────────────────────── */
:root {
  /* Bootstrap-5 success green — #28a745  */
  --c-success-500: #28a745;
}
/* Optional: future-friendly override for browsers that
     understand OKLCH (keeps the same visual colour) */
@supports (color: oklch(0 0 0)) {
  :root {
    --c-success-500: oklch(63% 0.182 145);
  }
}
/* ────────────────────────────────────────────────
     2. FONT-AWESOME ICONS INSIDE THE MAGEZON ROW
     ──────────────────────────────────────────────── */
#maincontent .mgz-element-text i.fa-check,
#maincontent .mgz-element-text svg.svg-inline--fa.fa-check {
  /* modern accent */
  color: var(--c-success-500) !important;
  /* keep your existing sizing & spacing */
  font-size: 14px;
  padding-right: 14px;
  /* baseline smoothing (unchanged) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Hover/focus micro-interaction — optional */
#maincontent .mgz-element-text li:hover .fa-check,
#maincontent .mgz-element-text li:focus .fa-check {
  color: color-mix(in srgb, var(--c-success-500) 90%, #000 10%);
}
/*═══════════════════════════════════════════════════════════════════════
  CaptainGreek ▸ Age-Verification Popup – FINAL CSS
═══════════════════════════════════════════════════════════════════════*/
/* Brand colours */
:root {
  --cg-blue: #2D337F;
  --cg-gold: #b89b65;
}
.modal-popup.amage-verification-popup .modal-inner-wrap {
  border-radius: 14px !important;
  /* Fallback for very old browsers (≈ 28 % opacity) */
  background: rgba(255, 255, 255, 0.28) !important;
  /* Modern browsers: 80 % transparent + 8 % gold = pale, see-through tint */
  background: color-mix(in srgb, #fff 50%, #b89b65 20%) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22) !important;
  padding: 0 !important;
}
/*──────── 2 ▸ Title ───────────────────────────────────────────────────*/
.modal-popup.amage-verification-popup .modal-title {
  font-family: "Open Sans", sans-serif !important;
  font-size: 1.6rem !important;
  /* ~26 px */
  font-weight: 700 !important;
  color: var(--cg-blue) !important;
}
/*──────── 3 ▸ Body paragraph ─────────────────────────────────────────*/
.modal-popup.amage-verification-popup .modal-body-content {
  font-family: "Open Sans", sans-serif !important;
  font-size: 1.8rem !important;
  /* ~29 px */
  line-height: 1.45 !important;
  color: #333 !important;
  text-align: center !important;
  padding: 28px 40px 12px !important;
}
/* Links inside body & consent */
.modal-popup.amage-verification-popup a {
  color: var(--cg-blue) !important;
  text-decoration: underline !important;
  transition: color .2s;
}
.modal-popup.amage-verification-popup a:hover {
  color: var(--cg-gold) !important;
  text-decoration: none !important;
}
/*──────── 4 ▸ Checkbox + consent line ─────────────────────────────────*/
#amage-verification-agreement {
  width: 22px !important;
  height: 22px !important;
  border: 2px solid var(--cg-blue) !important;
  border-radius: 4px !important;
  appearance: none !important;
  cursor: pointer !important;
  margin-right: 10px !important;
}
#amage-verification-agreement:checked {
  background: var(--cg-blue) !important;
  /* ONE literal string – URL-encoded SVG check-mark */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11' stroke='%23ffffff' stroke-width='3' fill='none'%3E%3Cpath d='M1 5.5 L5 9 L13 1'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.amage-verification-agreement-label {
  font-family: "Open Sans", sans-serif !important;
  font-size: 1.5rem !important;
  /* ~24 px */
  line-height: 1.4 !important;
  color: #333 !important;
  display: inline-block !important;
  max-width: 88% !important;
}
/* Focus outline (accessibility) */
#amage-verification-agreement:focus-visible {
  outline: 3px solid var(--cg-gold) !important;
  outline-offset: 2px !important;
}
/*──────── 5 ▸ Buttons ────────────────────────────────────────────────*/
/* YES / primary */
.modal-popup.amage-verification-popup .confirmation-button {
  background: var(--cg-blue) !important;
  border: none !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  padding: 16px 42px !important;
  margin-right: 14px !important;
  transition: background .2s;
}
.modal-popup.amage-verification-popup .confirmation-button:hover {
  background: #b89b65 !important;
  /* darkened blue */
}
/* NO / secondary */
.modal-popup.amage-verification-popup .rejection-button {
  background: #fff !important;
  border: 2px solid var(--cg-blue) !important;
  border-radius: 6px !important;
  color: var(--cg-blue) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  padding: 14px 42px !important;
  transition: all .2s;
}
.modal-popup.amage-verification-popup .rejection-button:hover {
  background: #f6f6f6 !important;
  border-color: var(--cg-gold) !important;
  color: var(--cg-gold) !important;
}
/*──────── 6 ▸ Overlay tint ───────────────────────────────────────────*/
.modals-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
}
/* ─── Kill dotted/blue focus outline on modal buttons ─── */
.modal-popup.amage-verification-popup .confirmation-button:focus,
.modal-popup.amage-verification-popup .confirmation-button:focus-visible,
.modal-popup.amage-verification-popup .rejection-button:focus,
.modal-popup.amage-verification-popup .rejection-button:focus-visible {
  outline: none !important;
  /* removes dotted ring        */
  box-shadow: none !important;
  /* removes any glow we added  */
}
/* Completely hide Magento’s native Tax Class field on seller pages */
.mp-seller-product-edit [name="product[tax_class_id]"],
.mp-add-product-form [name="product[tax_class_id]"],
.mp-seller-product-edit #tax-class-id,
.mp-add-product-form #tax-class-id,
.mp-seller-product-edit .field:has(#tax-class-id),
.mp-add-product-form .field:has(#tax-class-id),
.mp-seller-product-edit .field:has([name="product[tax_class_id]"]),
.mp-add-product-form .field:has([name="product[tax_class_id]"]) {
  display: none !important;
}
:root {
  --cg-accent: #b89b65;
  --cg-text: #2d337f;
  --cg-font: "Helvetica Neue", sans-serif;
}
/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: transparent;
  transition: background 0.25s, box-shadow 0.25s;
}
.scrolled .site-header {
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
}
/* ---- Top-level list ---- */
.horizontal-menu {
  display: flex;
  justify-content: center;
}
.cg-menu {
  display: flex;
  gap: clamp(3rem, 6vw, 8rem);
  list-style: none;
  margin: 0;
  padding: 1rem 0;
  align-items: center;
  font-family: var(--cg-font);
}
.cg-item > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  white-space: nowrap;
  font-size: 2.3rem;
  font-weight: 600;
  color: var(--cg-text);
  text-decoration: none;
}
/* hover underline slide */
.cg-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  background: var(--cg-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.cg-item:hover > a::after {
  transform: scaleX(1);
}
.cg-item > a:hover {
  color: var(--cg-accent);
}
/* SVG chevron */
.chevron {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%232d337f"><path d="M5.23 7.21a.75.75 0 0 1 1.06 0L10 10.92l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.24a.75.75 0 0 1-1.06 0L5.23 8.27a.75.75 0 0 1 0-1.06Z"/></svg>') center / contain no-repeat;
  transition: transform .25s;
}
.has-dropdown.open > .cg-toggle .chevron {
  transform: rotate(180deg);
}
/* ---- Dropdown ---- */
.has-dropdown {
  position: relative;
}
.cg-dropdown {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  opacity: 0;
  visibility: hidden;
  min-width: 280px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  padding: 1.25rem 1.5rem;
  list-style: none;
  margin: 0;
  z-index: 50;
  transition: opacity .18s ease,transform .18s ease;
}
.has-dropdown.open > .cg-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* Sub-link */
.cg-dropdown li {
  margin: 0;
  padding: 0;
}
.cg-dropdown a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 0;
  font-size: 1.6rem;
  line-height: 1.45;
  color: var(--cg-text);
  text-decoration: none;
  white-space: nowrap;
}
.cg-dropdown a:hover {
  color: var(--cg-accent);
}
.cg-icon {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
/* Country grid */
.cg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .5rem 1rem;
  padding: 1.25rem 1.5rem;
}
/* Utility links */
.utility {
  font-size: 2.1rem;
  font-weight: 600;
}
/* ---- Mobile ---- */
@media (max-width: 700px) {
  .cg-menu {
    flex-wrap: wrap;
    gap: 2rem 3rem;
  }
  .cg-dropdown {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    opacity: 1;
    visibility: visible;
    padding: .75rem 0;
  }
  .cg-item.open > .cg-dropdown {
    padding: .5rem 0 1rem;
  }
}
/* regions menu specifics */
.cg-regions-menu {
  padding: 1.25rem 1.75rem;
  max-height: 480px;
  overflow-y: auto;
}
.cg-region-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--cg-accent);
  margin: .6rem 0 .3rem;
}
.cg-region-title:first-child {
  margin-top: 0;
}
.cg-flag {
  display: inline-block;
  width: 24px;
  height: 18px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  margin-right: .6rem;
  vertical-align: middle;
}
/* ── Flag icons inside “Shop by Region” dropdown ─────────────── */
.cg-regions-menu .cg-flag {
  width: 24px;
  height: 18px;
  /* keep current size   */
  border-radius: 2px;
  /* same round corner   */
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
  /* soft frame shadow   */
  transition: transform 0.15s, box-shadow 0.15s;
}
.cg-regions-menu a:hover .cg-flag {
  transform: scale(1.15);
  /* subtle zoom on hover*/
  box-shadow: 0 0 0 1.5px var(--cg-accent);
  /* gold outline        */
}
/* ── a bit more gap between country rows ─────────────────────── */
.cg-regions-menu li[role="none"] {
  margin-bottom: .55rem;
}
.horizontal-menu-wrap {
  position: relative;
  z-index: 500;
}
.horizontal-menu {
  display: flex;
  justify-content: center;
}
.horizontal-menu > .cg-menu {
  flex: 1 1 0%;
  /* ALLOWS the ul itself to shrink             */
  max-width: 100%;
  /* never wider than the viewport              */
  display: flex;
  flex-wrap: wrap;
  /* pushes items onto a new row if needed      */
  justify-content: center;
}
@media (max-width: 1100px) {
  .cg-item > a {
    font-size: 1.9rem;
  }
}
.horizontal-menu .cg-item > a {
  position: relative;
  /* enables z-index */
  z-index: 60;
  /* higher than .cg-dropdown (z-index: 50) */
}
.block-collapsible-nav-content {
  display: none;
}
.block-collapsible-nav-content.active {
  display: block;
}
.block-collapsible-nav-title .toggle-arrow {
  transition: transform .2s;
}
.block-collapsible-nav-title.active .toggle-arrow {
  transform: rotate(180deg);
}
:root {
  --cg-blue: #2d337f;
  --cg-accent: #b89b65;
  --icon-scale: 1.3;
  --icon-dur: .6s;
  --icon-ease: cubic-bezier(0.18, 0.72, 0.22, 1);
  --link-fade-dur: 1s;
}
.mbi:is(.mbi-heart,.mbi-bag2,.mbi-user) {
  color: var(--cg-blue);
  transition: color 0.35s var(--icon-ease), scale var(--icon-dur) var(--icon-ease);
  will-change: scale;
}
@media (hover: hover) {
  .mbi:is(.mbi-heart,.mbi-bag2,.mbi-user):hover {
    color: var(--cg-accent);
    scale: var(--icon-scale);
    animation: icon-pop var(--icon-dur) var(--icon-ease);
  }
}
@keyframes icon-pop {
  40% {
    scale: calc(var(--icon-scale) * 1.05) rotate(3deg);
  }
  100% {
    scale: var(--icon-scale);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mbi:is(.mbi-heart,.mbi-bag2,.mbi-user) {
    transition: none;
  }
  .mbi:is(.mbi-heart,.mbi-bag2,.mbi-user):hover {
    animation: none;
  }
}
.header-content-action {
  display: flex;
  align-items: center;
  gap: clamp(5rem, 1vw, 0.2rem);
}
.header-content-action > *:not(script) {
  display: flex;
  align-items: center;
  animation: header-stagger 0.7s var(--icon-ease) backwards;
}
.header-content-action > *:nth-child(1) {
  animation-delay: .10s;
}
.header-content-action > *:nth-child(2) {
  animation-delay: .25s;
}
.header-content-action > *:nth-child(3) {
  animation-delay: .40s;
}
@keyframes header-stagger {
  0% {
    opacity: 0;
    translate: 0 -8px;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
.user-topbar .header.links li {
  white-space: nowrap !important;
  line-height: 20px !important;
  animation: link-fade var(--link-fade-dur) var(--icon-ease) both;
}
@keyframes link-fade {
  0% {
    opacity: 0;
    translate: 0 -10px;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .user-topbar .header.links li {
    animation: none;
  }
}
.header-content-action {
  display: flex;
  align-items: center;
  gap: .1rem;
}
@media (max-width: 1400px) {
  .header-content-action {
    gap: 1rem;
  }
}
@media (max-width: 1200px) {
  .header-content-action {
    gap: .85rem;
  }
}
@media (max-width: 1000px) {
  .header-content-action {
    gap: .70rem;
  }
}
@media (max-width: 800px) {
  .header-content-action {
    gap: .55rem;
  }
}
.header.links .greet,
.header.links .welcome {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}
.header-content-action {
  flex: 0 0 auto;
}
.page-print .logo {
  display: block;
  float: none;
  text-align: left;
}
@media print {
  * {
    -webkit-filter: none !important;
    background: transparent !important;
    color: #000 !important;
    filter: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  .table-wrapper table {
    width: 100%;
    table-layout: fixed;
  }
  .table-wrapper table td {
    width: auto;
  }
  .table-wrapper table > tfoot > tr:first-child {
    border-top: 1px solid #999;
  }
  .box,
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page {
    margin: 1cm;
  }
  .block-content,
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  .block-content {
    page-break-before: avoid;
  }
  .block-title,
  h2,
  h3 {
    page-break-after: avoid;
  }
  .nav-toggle {
    display: none !important;
  }
  .sidebar,
  .nav-sections,
  .header.content > *[class],
  .panel.wrapper > *[class],
  .footer.content > *[class] {
    display: none;
  }
  .logo,
  .footer .copyright {
    display: block !important;
    margin: 10px 0;
  }
  .order-details-items .order-items .order-gift-message:not(.expanded-content) {
    height: auto;
    visibility: visible;
  }
  .column.main {
    float: none !important;
    width: 100% !important;
  }
  .breadcrumbs {
    margin: 0 auto;
    text-align: right;
  }
  .footer.content {
    padding: 0;
  }
  .hidden-print {
    display: none !important;
  }
}