.item-box .btn-wrapper button:hover,
input[type="radio"]:checked + label:before,
input[type="checkbox"]:checked + label:before,
.select input[type="checkbox"]:checked + label,
.select-boxes input[type="checkbox"]:checked + label,
.two-row-carousels .slick-arrow:hover,
.home-page-polls .answer input[type="radio"]:checked + label:before,
.answer input[type="radio"]:checked + label:before,
.pager li a:hover,
.pager li span,
.pager li.previous-page a:hover,
.pager li.next-page a:hover,
.pager li.first-page a:hover,
.pager li.last-page a:hover,
.ui-datepicker-header,
.ui-datepicker-calendar a.ui-state-active:hover,
.ui-datepicker-calendar a.ui-state-active,
.order-progress .active-step:not(.last) a:hover:before,
.opc .selector input[type="checkbox"]:checked ~ label:before,
.forum-search-box.search-box .search-box-button:hover,
.ico-wishlist .wishlist-qty,
.ico-cart .cart-qty,
.shopping-cart-link .cart-qty,
.selected-options-list > li span,
.header-menu .close-menu,
.close-side-menu,
.mobile-flyout-wrapper .close-side-menu,
.header-menu ul li.back-button,
.avatar-page .upload-image.valid + label,
.ui-slider-range,
.filters-button,
.quick-view-button a:hover,
.jCarouselMainWrapper .slick-next:hover,
.jCarouselMainWrapper .slick-prev:hover,
.blog-search-box .search-box-button:hover,
.sale-of-the-day-offer .timer-info-box,
.spc-products .slick-arrow:hover,
.nivo-directionNav a:hover,
.anywhere-slider .slick-arrow:hover,
.theme-roller .open-button {
  background-color: #2a55e2;
}
.selected-options-list > li span:hover,
.theme-roller .open-button:hover,
.avatar-page .upload-image.valid + label:hover {
  background-color: #1739a9;
}
.link-rss:hover:before,
.field-validation-valid,
.username-available-status,
.cart a,
.data-table a,
.compare-products-table a,
.forums-table-section a,
.cart .product a:hover,
.data-table .product a:hover,
.compare-products-table .product a:hover,
.forums-table-section .product a:hover,
.cart .edit-item a,
.data-table .edit-item a,
.compare-products-table .edit-item a,
.forums-table-section .edit-item a,
.mini-shopping-cart .count a:hover,
.mini-shopping-cart .price,
.mini-shopping-cart .totals strong,
.login-form-in-header .in-header-register .register-button:hover,
.login-form-in-header .inputs input:focus + .inputs-icons,
.footer-block a:hover,
.social-sharing a:hover:before,
.footer-block .title:before,
.footer-block .title:after,
.block .title:before,
.block .list li.active > a,
.block .list a:hover,
.block .view-all a,
.block .tags li a:hover,
.product-tags-all-page li a:hover,
.poll > strong,
.block .answer label:hover,
.breadcrumb a:hover,
.breadcrumb a:hover span,
.item-box .actual-price,
.item-box .tax-shipping-info a,
.vendor-item:hover .title a,
.manufacturer-item:hover .title a,
.category-grid .item-box:hover .title a,
.product-name .manufacturers .value,
.overview .manufacturers .value,
.product-review-links a:hover,
.product-no-reviews a:hover,
.compare-products .add-to-compare-list-button:hover,
.compare-products .add-to-compare-list-button:hover:before,
.back-in-stock-subscription:hover:before,
.overview .additional-details div .value a,
.variant-overview .additional-details div .value a,
.download-sample a,
.product-social-sharing li a:hover:before,
.email-a-friend:hover:before,
.overview .product-price,
.variant-overview .product-price,
.tier-prices .item-price,
.product-tags-list a,
.ui-tabs .ui-tabs-nav li a:hover,
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.ui-tabs .ui-state-active.ui-tabs-active a,
.ui-tabs .submitReviewResult,
.product-review-helpfulness .vote:hover:before,
.wishlist-page .share-info a,
.compare-products-mobile .price .item span,
.email-a-friend-page .title a,
.accept-privacy-policy .read,
.account-page .button-2.return-items-button:hover,
.account-page .button-2.return-items-button:hover:before,
.order-total td label,
.order-total td span,
.cart-total .order-total,
.terms-of-service .read,
.cart-collaterals > div > .title:hover,
.cart-collaterals > div > .title:before,
.cart-collaterals .message-success,
.checkout-page .add-button .btn-holder.open:before,
.order-completed .order-number,
.opc > li.allow:not(.active) .step-title:after,
.opc > li.active .step-title .number,
.opc > li.active .step-title .title,
.order-details-page .order-overview .order-number,
.sitemap-page a,
.post-date,
.news-date,
.post-navigation a:before,
.post-navigation a:after,
.back-to-all-button:hover,
.back-to-all-button:hover:before,
.blog-page .tags li,
.blogpost-page .tags a,
.read-comments:hover,
.read-comments:hover:before,
.new-comment .result,
.news-list-homepage .view-all a,
.news-list-homepage .view-all a:after,
.current-time,
.forum-search-box .advanced > a:hover,
.forum-table a:hover,
.topic-post .pm-button:before,
.topic-post .post-vote > .vote.up:hover:before,
.topic-post .post-vote > .vote.down:hover:before,
.compare-products-table .product-price td,
.order-progress .active-step.last a span,
.category-navigation-list-wrapper ul li:hover > a,
.category-navigation-list-wrapper ul li:hover > span,
.category-navigation-list-wrapper ul li:hover > a:after,
.header-links a:hover,
.header-links a:hover:before,
.block.block-recently-viewed-products .list a:hover,
.block-account-navigation.block .list a:hover,
.block-account-navigation.block .list a:hover:after,
.block-account-navigation.block .list a.active,
.block-account-navigation.block .list a.active:after,
.header-selectors-wrapper > div input[type="radio"]:checked + label,
.ajaxCart .k-window-titlebar.k-header .k-window-actions .k-icon:hover:before,
.productAddedToCartWindowDescription strong,
.clearFilterOptionsAll:hover,
.filter-block .toggleControl:before,
.filter-block a.clearFilterOptions:hover:before,
.filter-block a.clearPriceRangeFilter:hover:before,
.picture-thumbs .slick-prev:hover:before,
.picture-thumbs .slick-next:hover:before,
.instant-search-item .detail .price,
.home-page .jCarouselMainWrapper.small-products .nop-jcarousel .carousel-title:before,
.mega-menu .sublist li:hover > a,
.category-navigation-list .dropdown .box .title a,
.category-navigation-list .dropdown .box .subcategory-item a:hover,
.mega-menu .manufacturers .box:hover .title,
.mega-menu .vendors .box:hover .title,
.previous-product a:before,
.next-product a:before,
.quickView .k-window-titlebar.k-header .k-window-actions a:hover:before,
.quickViewWindow #accordion > h3 span:before,
.quickViewWindow .product-variant .product-price,
.ropc .section .title:after,
.ropc .coupon-box-panel .message-success,
.ropc .giftcard-box-panel .message-success,
.ropc .cart-total .cart-total-row span,
.sale-of-the-day-offer .product-name a:hover,
.sale-of-the-day-offer .price.actual-price,
.sale-of-the-day-offer .slick-arrow:hover:before,
.rich-blog-homepage .view-all a,
.rich-blog-homepage .view-all a:after,
.blog-search-results .search-term-highlighter,
.share-post li a:hover:before,
.post-relations li a,
.spc-products .spc-header li:hover,
.spc-categories .navigation li:hover,
.spc-header li.active,
.spc-categories .navigation li.active,
.spc-categories .category-title,
.spc-categories .category-sublist a:hover,
.spc-categories .slick-prev:hover:before,
.spc-categories .slick-next:hover:before,
.advantages-item .title a:hover,
.scroll-back-button:before,
.inputs.accept-consent .read {
  color: #2a55e2;
}
.product-name .manufacturers .value:hover,
.product-tags-list a:hover:hover,
.overview .additional-details div .value a:hover,
.variant-overview .additional-details div .value a:hover,
.terms-of-service .read:hover,
.download-sample a:hover,
.sitemap-page a:hover,
.blog-page .tags a:hover,
.blogpost-page .tags a:hover,
.product-tags-list a:hover,
.cart .edit-item a:hover,
.news-list-homepage .view-all a:hover,
.news-list-homepage .view-all a:hover:after,
.manufacturers .value:hover,
.block .view-all a:hover,
.data-table a:hover,
.forums-table-section a:hover,
.category-navigation-list .dropdown .box .title a:hover,
.rich-blog-homepage .view-all a:hover,
.rich-blog-homepage .view-all a:hover:after,
.post-relations li a:hover,
.spc-categories .category-title a:hover {
  color: #1739a9;
}
.ajax-loading-block-window:before,
.ajax-loading-block-window:after,
.two-row-carousels .slick-arrow:hover,
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.ui-tabs .ui-state-active.ui-tabs-active a,
.order-progress .active-step.last a:before,
.block-account-navigation.block .list a.active,
.nopAjaxCartPanelAjaxBusy:before,
.nopAjaxCartPanelAjaxBusy:after,
.miniProductDetailsPanelAjaxBusy:before,
.miniProductDetailsPanelAjaxBusy:after,
.ui-slider-handle,
.productPanelAjaxBusy:before,
.productPanelAjaxBusy:after,
.infinite-scroll-loader:before,
.infinite-scroll-loader:after,
.cloudzoom-ajax-loader:before,
.cloudzoom-ajax-loader:after,
.jCarouselMainWrapper .slick-next:hover,
.jCarouselMainWrapper .slick-prev:hover,
.quickView .k-loading-image:before,
.quickView .k-loading-image:after,
.quickView .cloudzoom-ajax-loader:before,
.quickView .cloudzoom-ajax-loader:after,
.panel-loader-effect .spinner:before,
.panel-loader-effect .spinner:after,
.spc-categories .loading-overlay:before,
.spc-categories .loading-overlay:after,
.spc-body .loading-overlay:before,
.spc-body .loading-overlay:after,
.spc-products .slick-arrow:hover,
.scroll-back-button,
.nivoSlider:before,
.nivoSlider:after,
.anywhere-slider:before,
.anywhere-slider:after {
  border-color: #2a55e2;
}
.pager li a:hover,
.pager li span {
  border-color: #2a55e2 !important;
}
.button-1,
.eu-cookie-bar-notification button,
.login-form-in-header .login-button,
.category-navigation-list-wrapper:hover .category-navigation-title,
.category-navigation-list-wrapper.menuItemsAreClickable.opened .category-navigation-title,
.newsletter-email .newsletter-subscribe-button,
.home-page-polls .poll .buttons input,
.contact-vendor-button,
.item-box .buttons .button-2:hover,
.grouped-btn:hover,
.write-review .title strong,
.comment-form-btn strong,
.mfp-container .apply-shipping-button,
.write-review .button-1,
.qq-uploader .qq-upload-button,
.blog-posts .read-more,
.news-items .read-more,
.forums-table-section .view-all a,
.topic-post .post-actions .quote-post-button,
.ropc .complete-button button,
.spc-categories .category-picture .spc-to-all-products,
.jCarouselMainWrapper .slick-dots .slick-active button,
.sale-of-the-day-offer .owl-dot.active {
  background-color: #101418;
}
.button-1:hover,
.eu-cookie-bar-notification button:hover,
.mini-shopping-cart input[type="button"]:hover,
.login-form-in-header .login-button:hover,
.search-box .search-box-button:hover,
.newsletter-email .newsletter-subscribe-button:hover,
.poll .buttons input:hover,
.contact-vendor-button:hover,
.product-reviews-page .title .write-review-title:hover,
.mfp-container .apply-shipping-button:hover,
.write-review .button-1:hover,
.qq-uploader .qq-upload-button:hover,
.blog-posts .read-more:hover,
.news-items .read-more:hover,
.open-comment-form:hover,
.forums-table-section .view-all a:hover,
.topic-post .post-actions .quote-post-button:hover,
.ropc .complete-button button:hover {
  background-color: #000000;
}
@media all and (min-width: 1025px) {
  .search-box .search-box-button,
  .center-2 .product-list .item-box .buttons .button-2 {
    background-color: #101418;
  }
  .center-2 .product-list .item-box .buttons .button-2:hover {
    background-color: #000000;
  }
  .block-account-navigation.block .list .active a,
  .block-account-navigation.block .list .active a:after {
    color: #2a55e2;
  }
  .block-account-navigation.block .list .active a {
    border-color: #2a55e2;
  }
}
.categories .picture a:before,
.category-grid .item-box .picture a:before {
  padding-top: 80%;
}
/* ===========================================
   CLOUD WHOLESALE – VERIFIED DESKTOP CSS
   (Top header stays black; menu row styled & aligned)
   =========================================== */

/* --- TOP HEADER: keep full-width black plate --- */
.header {
  background-color: #000 !important;
}

/* Header content boxed & centered; items aligned */
.header-lower {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1300px;          /* boxed width */
  margin: 0 auto;
  padding: 10px 30px;
  box-sizing: border-box;
}

/* Keep all header items white on black */
.header .header-lower * {
  color: #fff !important;
}

/* Logo size */
.header .header-logo img {
  max-height: 80px !important;
  height: auto;
  display: block;
}

/* --- SEARCH BAR --- */
.search-box.store-search-box input.search-box-text {
  background-color: #fff !important;
  border: 1px solid #ccc !important;
  color: #000 !important;
  border-radius: 4px 0 0 4px;
  padding: 12px;
}

.search-box.store-search-box input.button-1.search-box-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 44px !important;
  height: 47px !important;
  border: none !important;
  border-radius: 0 4px 4px 0 !important;
  margin-left: -1px !important;
  padding: 0 !important;
  cursor: pointer;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  background: #004dff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center !important;
  background-size: 20px 20px !important;
}
.search-box.store-search-box input.button-1.search-box-button:hover {
  background: #1a62ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center !important;
  background-size: 20px 20px !important;
}

/* --- HEADER ICONS (account, wishlist, cart) --- */
.header-links-wrapper a,
.header-links-wrapper i,
.header-links-wrapper .fa,
.header-links-wrapper svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.header-links-wrapper a:hover,
.header-links-wrapper i:hover,
.header-links-wrapper svg:hover {
  color: #004dff !important;
  fill: #004dff !important;
}

/* ===========================================
   HEADER MENU ROW (below the logo/search/icons)
   =========================================== */

/* Keep menu row white with a divider */
.header-menu-parent {
  background-color: #ffffff !important;
  border-bottom: 1px solid #eaeaea;
}

/* Box and align the inner menu row so its left edge
   lines up with the logo above (same 1300px/30px gutter) */
.header-menu {
  display: flex !important;
  align-items: center !important;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 30px;             /* matches header-lower left/right */
  box-sizing: border-box;
  gap: 0 !important;
}

.header-menu-parent .top-menu {
  display: flex;
  align-items: center;
  height: 45px;
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.header-menu-parent .top-menu > li > a {
  color: #000000 !important;
  font-weight: 500;
  padding: 0 15px !important;
}
.header-menu-parent .top-menu > li > a:hover {
  color: #004dff !important;
  text-decoration: none !important;
}
.header-menu-parent .top-menu > li:first-child {
  margin-left: 15px !important;
}

/* --- “Shop by Department” BLUE BUTTON — auto-aligned --- */
.category-navigation-list-wrapper {
  background-color: #004dff !important;
  transition: background-color 0.2s ease-in-out;
  height: 45px !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: fit-content !important;
  margin-left: 0 !important;   /* aligned to same left as logo via .header-menu */
}
.category-navigation-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  padding: 0 15px !important;
  white-space: nowrap;
}
.category-navigation-title:before {
  content: "\2630";
  color: #ffffff !important;
  font-size: 18px !important;
  margin-right: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  top: -3px !important;
  line-height: 1 !important;
}

/* --- Free Delivery text on the far right --- */
.free-delivery-text {
  margin-left: auto;
  margin-right: 40px;
  font-size: 14px;
  font-weight: 600;
  color: #000000;
}
.free-delivery-text span {
  color: #d10000;
  font-weight: 700;
}

/* ===========================================
   ACCOUNT DROPDOWN (logged-in)
   =========================================== */
.profile-menu-box {
  background-color: #ffffff !important;
}
.profile-menu-box a {
  color: #000000 !important;
  font-weight: 500;
}
.profile-menu-box a.ico-account::before,
.profile-menu-box a.ico-logout::before {
  color: #666666 !important;
  fill: #666666 !important;
}
.profile-menu-box a:hover,
.profile-menu-box a:focus {
  color: #004dff !important;
}
.profile-menu-box a.ico-account:hover::before,
.profile-menu-box a.ico-logout:hover::before {
  color: #004dff !important;
  fill: #004dff !important;
}

/* Dropdown text/icons when the flyout is open */
.header-links-wrapper .dropdown-box,
.header-links-wrapper .dropdown-box a,
.header-links-wrapper .dropdown-box span {
  color: #000000 !important;
}
.header-links-wrapper .dropdown-box i,
.header-links-wrapper .dropdown-box .fa,
.header-links-wrapper .dropdown-box svg {
  color: #666666 !important;
  fill: #666666 !important;
}
.header-links-wrapper .dropdown-box a:hover {
  color: #004dff !important;
}

/* ===========================================
   GENERAL PAGE COLORS
   =========================================== */
body, .master-wrapper-content, .page-body {
  background: #ffffff !important;
  color: #222 !important;
}
.page-body a { color: #004dff !important; }
.page-body .button-1,
.page-body button[type="submit"],
.page-body input[type="submit"] {
  background: #004dff !important;
  color: #fff !important;
  border: none !important;
}
.page-body .button-1:hover,
.page-body button[type="submit"]:hover,
.page-body input[type="submit"]:hover {
  background: #0036cc !important;
}

/* ===========================================
   OPTIONAL – INFOBOX STRIP (if you use it)
   =========================================== */
.infobox-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin: 0;
  padding: 0;
}
.infobox-wrapper .infobox-item {
  flex: 1 1 33.333% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 60px;
  box-sizing: border-box;
}
.infobox-wrapper .infobox-item .picture img {
  max-width: none !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}
.infobox-wrapper .infobox-item .text {
  margin-left: 30px !important;
  color: #fff !important;
}
.infobox-wrapper .infobox-item .title {
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}
.infobox-wrapper .infobox-item .description {
  font-size: 1rem !important;
  opacity: 0.85;
}
.infobox-wrapper .infobox-item:nth-child(1) { background-color: #2d2d2d !important; }
.infobox-wrapper .infobox-item:nth-child(2) { background-color: #f48024 !important; }
.infobox-wrapper .infobox-item:nth-child(3) { background-color: #1a45ff !important; }

/* ===========================================
   FOOTER
   =========================================== */
.footer {
  background-color: #000f3d !important;
  color: #ffffff !important;
}
.footer a { color: #ffffff !important; }
.footer a:hover { color: #cccccc !important; }
.footer .newsletter,
.footer .newsletter-subscribe,
.footer .newsletter-subscribe-title {
  display: none !important;
}
.footer .title,
.footer .footer-title,
.footer .footer-block .title strong {
  color: #ffffff !important;
}
.footer .footer-blocks-wrapper {
  display: flex;
  justify-content: center;
  text-align: center;
  gap: 60px;
}
.footer .footer-block {
  float: none !important;
}
/* ===========================================
   BRUTE FORCE FOOTER CENTERING — FINAL
   =========================================== */

/* Make sure nothing outside interferes */
.footer *,
.footer {
  float: none !important;
  text-align: center !important;
  box-sizing: border-box;
}

/* Force the container to center everything */
.footer-middle {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 60px !important;
  width: 100% !important;
  max-width: 1000px;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

/* Kill the empty Customer Service column */
.footer-middle .footer-block:nth-child(3) {
  display: none !important;
}

/* Reset all children to play nice */
.footer-middle .footer-block,
.footer-middle .socials-and-payments {
  flex: 0 1 auto !important;
  min-width: 200px;
  text-align: center !important;
}

/* Titles */
.footer .title,
.footer .footer-block .title strong {
  color: #ffffff !important;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 15px;
  display: block;
}

/* Links */
.footer a {
  color: #ffffff !important;
  text-decoration: none;
}
.footer a:hover {
  color: #cccccc !important;
}

/* Socials & Payments centered */
.socials-and-payments .social-icons ul {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}
.socials-and-payments .pay-options img {
  margin: 5px;
  display: inline-block;
}

/* Optional: remove newsletter completely */
.footer-upper {
  display: none !important;
}
/* ===========================================
   FOOTER — HARD RESET + LEFT-ALIGN (DESKTOP)
   Targets the exact markup you sent.
   =========================================== */
@media (min-width: 1024px) {

  /* 0) Remove the empty "Customer service" column (3rd .footer-block) */
  .footer .footer-middle .footer-block:nth-of-type(3) {
    display: none !important;
  }

  /* 1) NUKE previous centering/floats inside the footer */
  .footer .footer-middle,
  .footer .footer-middle * {
    float: none !important;
    text-align: left !important;
  }

  /* 2) Make a clean 3-column layout: Info | My Account | Socials+Payments */
  .footer .footer-middle {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 48px 20px !important;

    display: grid !important;
    grid-template-columns: 240px 240px 1fr !important; /* left columns fixed, right column flexible */
    column-gap: 72px !important;
    align-items: start !important;
  }

  /* 3) Titles: consistent baseline + spacing */
  .footer .title,
  .footer .footer-block .title strong {
    display: block !important;
    margin: 0 0 14px 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    padding: 0 !important;
  }

  /* 4) Lists: stack neatly under titles (no centering) */
  .footer .footer-block .list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .footer .footer-block .list li { margin: 6px 0 !important; }
  .footer .footer-block .list li a {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    opacity: .9 !important;
    transition: opacity .2s ease;
  }
  .footer .footer-block .list li a:hover { opacity: 1 !important; }

  /* 5) Social icons: fix “squished” look with proper gap */
  .footer .socials-and-payments .social-icons .social-sharing {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;          /* <- spacing between icons */
    align-items: center !important;
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .footer .socials-and-payments .social-icons a {
    display: inline-block !important;
    width: auto !important;
    opacity: .85 !important;
    transition: opacity .2s ease;
  }
  .footer .socials-and-payments .social-icons a:hover { opacity: 1 !important; }

  /* 6) Payment logos: single neat row with consistent size */
  .footer .socials-and-payments .pay-options { text-align: left !important; }
  .footer .socials-and-payments .pay-options .title { margin: 0 0 10px 0 !important; }
  .footer .socials-and-payments .pay-options img {
    height: 28px !important;
    width: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 14px !important;
    opacity: .95 !important;
    transition: opacity .2s ease;
  }
  .footer .socials-and-payments .pay-options img:last-child { margin-right: 0 !important; }

  /* 7) Subtle divider (optional) */
  .footer {
    border-top: 1px solid rgba(255,255,255,.15) !important;
    padding-top: 28px !important;
  }
}
/* ===========================================
   FOLLOW US + PAYMENT ICONS FIX
   =========================================== */
@media (min-width: 1024px) {
  /* Make social icons appear directly under title */
  .footer .socials-and-payments .social-icons {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important; /* space between heading and icons */
  }

  .footer .socials-and-payments .social-icons .social-sharing {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;  /* space between icons */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .footer .socials-and-payments .social-icons a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 22px !important;
    opacity: 0.85 !important;
    transition: opacity 0.2s ease;
  }

  .footer .socials-and-payments .social-icons a:hover {
    opacity: 1 !important;
  }

  /* Payment logo sizing and spacing */
  .footer .socials-and-payments .pay-options img {
    max-height: 34px !important;   /* make them visually balanced */
    width: auto !important;        /* keep natural proportions */
    margin-right: 18px !important; /* even spacing */
    display: inline-block !important;
    vertical-align: middle !important;
  }

  .footer .socials-and-payments .pay-options img:last-child {
    margin-right: 0 !important;
  }
}
/* ================================
   PAYMENT ICONS — NATURAL SIZE + TIGHTER SPACING
   ================================ */
@media (min-width: 1024px) {
  .footer .socials-and-payments .pay-options img {
    height: auto !important;       /* natural logo height */
    max-height: none !important;   /* no forced max height */
    width: auto !important;        /* preserve proportions */
    margin-right: 10px !important; /* tighter spacing between icons */
    display: inline-block !important;
    vertical-align: middle !important;
  }

  .footer .socials-and-payments .pay-options img:last-child {
    margin-right: 0 !important;
  }
}
/* ================================
   PAYMENT ICONS — NATURAL SIZE + TIGHTER SPACING
   ================================ */
@media (min-width: 1024px) {
  .footer .socials-and-payments .pay-options img {
    height: auto !important;       /* natural logo height */
    max-height: none !important;   /* no forced max height */
    width: auto !important;        /* preserve proportions */
    margin-right: 10px !important; /* tighter spacing between icons */
    display: inline-block !important;
    vertical-align: middle !important;
  }

  .footer .socials-and-payments .pay-options img:last-child {
    margin-right: 0 !important;
  }
}
@media (min-width: 1025px) {
  .header-menu.categories-in-side-panel {
    background-color: #ffffff !important;
  }
}
@media (min-width: 1025px) {

  /* 1) Make all header link icons and text white by default */
  .header-links a,
  .header-links a:before {
    color: #ffffff !important;
    transition: color 0.2s ease;
  }

  /* 2) Hover effect: only icon turns blue, text stays white */
  .header-links a.ico-account:hover:before,
  .header-links a.ico-cart:hover:before {
    color: #007bff !important; /* or whatever your blue is */
  }

  .header-links a.ico-account:hover,
  .header-links a.ico-cart:hover {
    color: #ffffff !important;
  }

  /* 3) Remove wishlist completely */
  .header-links a.ico-wishlist {
    display: none !important;
  }

  /* (Optional) If you want Wishlist hidden at all breakpoints */
  .ico-wishlist {
    display: none !important;
  }
}
/* ================================
   Align header cart/account cluster
   with Free Delivery text below
   ================================ */
@media (min-width: 1025px) {
  /* This controls the right section position */
  .header-links-wrapper {
    max-width: 1200px;       /* match your site width */
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    padding-right: 40px;    /* <— tweak this number until cart lines up with Free Delivery */
  }
}
/* ======================================
   MOBILE FOOTER — REMOVE ACCORDION BEHAVIOR
   ====================================== */
@media (max-width: 768px) {

  /* Force the footer lists to stay open and visible */
  .footer .footer-block .list {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Remove accordion arrows */
  .footer .footer-block .title::after,
  .footer .footer-block .title::before {
    display: none !important;
    content: none !important;
  }

  /* Disable click on titles (so tapping doesn't toggle anything) */
  .footer .footer-block .title {
    cursor: default !important;
    pointer-events: none !important;
    margin-bottom: 10px;
  }

  /* Make sure lists are nicely spaced */
  .footer .footer-block ul li {
    padding: 8px 0 !important;
    text-align: center; /* optional — can align left if you prefer */
  }

  /* Optional: center everything if you're going for a clean stacked mobile footer */
  .footer .footer-block {
    text-align: center !important;
  }
}
/* ======================================
   MOBILE FOOTER — CLEAN UP BACKGROUND & TEXT
   ====================================== */
@media (max-width: 768px) {

  /* Remove that grey background behind the list */
  .footer .footer-block ul,
  .footer .footer-block .list {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  /* Ensure the text is pure white */
  .footer .footer-block ul li a {
    color: #ffffff !important;
    opacity: 1 !important;
  }

  /* Remove any hover background on mobile */
  .footer .footer-block ul li a:hover {
    background: transparent !important;
    color: #ffffff !important;
  }

  /* Optional: remove any container padding if you want the blue background to show fully */
  .footer .footer-block ul li {
    background: transparent !important;
  }
}
/* ======================================
   MOBILE FOOTER — ADJUST SECTION DIVIDERS
   ====================================== */
@media (max-width: 768px) {

  /* If these are <hr> lines */
  .footer hr {
    margin-top: 15px !important;
    margin-bottom: 25px !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    width: 70% !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* If instead it's a border-bottom on the footer-block */
  .footer .footer-block {
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  /* Remove duplicate or extra lines if needed */
  .footer .footer-block:last-child {
    border-bottom: none;
  }
}
/* ======================================
   MOBILE FOOTER — TIGHTER & CLEANER
   ====================================== */
@media (max-width: 768px) {

  /* Remove any previous borders/margins */
  .footer .footer-block,
  .footer hr {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* First section (Information) - no line, just light top padding */
  .footer .footer-block:first-child {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Middle sections - one clean line above */
  .footer .footer-block:not(:first-child):not(:last-child) {
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    margin-top: 10px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Last section (Follow Us / Payment Options) */
  .footer .footer-block:last-child {
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    margin-top: 10px !important;
    padding-top: 12px !important;
    padding-bottom: 30px !important; /* space at bottom */
  }

  /* Optional: shorten divider width for nicer mobile look */
  .footer .footer-block {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }
}
/* ===== Emporium mobile header (<=1024px) ===== */
@media (max-width: 1024px) {

  /* Make the mobile header bar black */
  .responsive-nav-wrapper-parent,
  .responsive-nav-wrapper,
  .master-wrapper-header,
  .header,
  .header-upper,
  .header-lower {
    background-color: #000 !important;
  }

  /* Make the icons/labels in the mobile bar white */
  .responsive-nav-wrapper,
  .responsive-nav-wrapper * {
    color: #fff !important;
    fill: #fff !important;
  }

  /* Remove the thin strip under the header
     (border/shadow/padding added by the theme) */
  .responsive-nav-wrapper,
  .responsive-nav-wrapper-parent,
  .master-wrapper-header,
  .header {
    border: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}
/* =============================
   Emporium Mobile Header Cleanup
   ============================= */
@media (max-width: 1024px) {

  /* Remove the mysterious white bar (usually padding or background) */
  .master-wrapper-header,
  .header-lower {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    height: 0 !important;
    min-height: 0 !important;
  }

  /* Ensure slider starts directly below header */
  .anywhere-slider,
  .home-page-top,
  .master-wrapper-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Optional: remove any gap from .responsive-nav-wrapper parent */
  .responsive-nav-wrapper-parent {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}
/* ==============================
   Emporium MOBILE SIDE PANEL (hamburger)
   ============================== */
@media (max-width: 1024px) {

  /* The actual slide-in panel */
  .header-menu.categories-in-side-panel.ps-container,
  .header-menu.categories-in-side-panel.ps-container.open {
    background: #ffffff !important;   /* panel body */
    color: #000 !important;
  }

  /* Panel header (orange bar in your reference) */
  .header-menu.categories-in-side-panel .close-menu,
  .header-menu.categories-in-side-panel .menu-title,
  .header-menu.categories-in-side-panel .menu-header {
    background: #f59e2e !important;   /* pick your color */
    color: #fff !important;
  }

  /* MAKE SURE THE MENU LINKS ARE VISIBLE */
  .header-menu.categories-in-side-panel ul.top-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .header-menu.categories-in-side-panel ul.top-menu > li > a {
    display: block !important;
    padding: 16px 20px !important;
    color: #000 !important;
    font-weight: 600;
  }

  /* Optional: rename “All Categories” -> “Shop by Department” */
  .header-menu.categories-in-side-panel .all-categories > a span,
  .header-menu.categories-in-side-panel .all-categories > span { display: none !important; }
  .header-menu.categories-in-side-panel .all-categories > a::before,
  .header-menu.categories-in-side-panel .all-categories > span::before {
    content: "Shop by Department";
    color: #000;
  }

  /* Dim the page overlay behind the panel */
  .overlayOffCanvas { background: rgba(0,0,0,0.5) !important; }
}
/* ===============================
   Emporium Mobile Flyout Menu
   Clean & Centered - Final Version
   =============================== */
@media (max-width: 1024px) {

  /* Main side panel */
  .header-menu.categories-in-side-panel.ps-container.open {
    background-color: #ffffff !important;
    color: #000 !important;
    padding: 0;
  }

  /* Top orange bar */
  .header-menu.categories-in-side-panel .close-menu {
    background-color: #f59e2e !important;  /* keep orange, or #000 for black */
    color: #fff !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    font-weight: 600;
    text-transform: uppercase;
  }

  .header-menu.categories-in-side-panel .close-menu-text {
    font-size: 18px;
    font-weight: 600;
  }

  /* Category navigation title — 'Shop by Department' */
  .header-menu.categories-in-side-panel .category-navigation-title {
    display: block;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    border-bottom: 1px solid #e5e5e5;
    text-align: left;
  }

  /* Top menu items (Home, About Us, etc.) */
  .header-menu.categories-in-side-panel ul.top-menu {
    display: block !important;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .header-menu.categories-in-side-panel ul.top-menu > li {
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
  }

  .header-menu.categories-in-side-panel ul.top-menu > li > a,
  .header-menu.categories-in-side-panel ul.top-menu > li > span {
    display: block;
    padding: 16px 20px;
    color: #000 !important;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
  }

  /* Remove weird plus-button alignment */
  .header-menu.categories-in-side-panel .plus-button {
    position: absolute;
    right: 20px;
    top: 18px;
  }

  /* Wishlist link styling */
  .header-menu.categories-in-side-panel .ico-wishlist {
    display: block;
    padding: 16px 20px;
    font-weight: 600;
    color: #000 !important;
    text-decoration: none;
    border-top: 1px solid #f0f0f0;
  }

  .header-menu.categories-in-side-panel .wishlist-label {
    margin-right: 5px;
  }

  /* Free delivery text */
  .header-menu.categories-in-side-panel .free-delivery-text {
    padding: 20px;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    color: #000;
    border-top: 1px solid #e5e5e5;
  }

  /* Overlay */
  .overlayOffCanvas {
    background: rgba(0, 0, 0, 0.5) !important;
  }

  /* Remove extra spacing from scrollbars */
  .ps-scrollbar-x-rail,
  .ps-scrollbar-y-rail {
    display: none !important;
  }
}
@media (max-width: 1024px) {

  /* Panel container */
  .header-menu.categories-in-side-panel.ps-container.open {
    background-color: #ffffff !important;
    color: #000 !important;
    padding: 0;
  }

  /* Top orange menu bar */
  .header-menu.categories-in-side-panel .close-menu {
    background-color: #f59e2e !important;
    color: #fff !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    font-weight: 600;
    text-transform: uppercase;
  }

  /* Category section title */
  .header-menu.categories-in-side-panel .category-navigation-title {
    display: block;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    border-bottom: 1px solid #e5e5e5;
    text-align: left;
  }

  /* Top menu links */
  .header-menu.categories-in-side-panel ul.top-menu {
    display: block !important;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .header-menu.categories-in-side-panel ul.top-menu > li {
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
  }
  .header-menu.categories-in-side-panel ul.top-menu > li > a,
  .header-menu.categories-in-side-panel ul.top-menu > li > span {
    display: block;
    padding: 16px 20px;
    color: #000 !important;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
  }

  /* Free delivery text + wishlist */
  .header-menu.categories-in-side-panel .free-delivery-text {
    padding: 20px;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    color: #000;
    border-top: 1px solid #e5e5e5;
  }
  .header-menu.categories-in-side-panel .ico-wishlist {
    display: block;
    padding: 16px 20px;
    font-weight: 600;
    color: #000 !important;
    text-decoration: none;
    border-top: 1px solid #f0f0f0;
  }

  /* Overlay */
  .overlayOffCanvas {
    background: rgba(0, 0, 0, 0.5) !important;
  }

  /* Scrollbar rails hidden */
  .ps-scrollbar-x-rail,
  .ps-scrollbar-y-rail {
    display: none !important;
  }
}
/* ======================================
   CLEAN UP MOBILE FLYOUT PANEL (≤ 1024px)
   ====================================== */
@media (max-width: 1024px) {

  /* 1) Remove free delivery text */
  .header-menu.categories-in-side-panel .free-delivery-text {
    display: none !important;
  }

  /* 2) Remove wishlist section */
  .header-menu.categories-in-side-panel .ico-wishlist,
  .header-menu.categories-in-side-panel a.ico-wishlist,
  .header-menu.categories-in-side-panel .wishlist-label {
    display: none !important;
  }

  /* 3) Remove 'Shop by Department' section INSIDE the flyout */
  .header-menu.categories-in-side-panel .category-navigation-list-wrapper,
  .header-menu.categories-in-side-panel .category-navigation-title {
    display: none !important;
  }

  /* 4) Change orange MENU bar to blue */
  .header-menu.categories-in-side-panel .close-menu {
    background-color: #004dff !important; /* your brand blue */
    color: #fff !important;
  }
}
@media (min-width: 1025px) {
  .header-menu {
    display: flex !important;
    align-items: center !important;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    gap: 0 !important;
  }
}

@media (max-width: 1024px) {
  .header-menu {
    display: block !important;  /* restore Emporium default for mobile */
  }
}
@media (max-width: 1024px) {
  /* 1. Rename 'All Categories' to 'Shop by Department' */
  .header-menu.categories-in-side-panel .all-categories > span,
  .header-menu.categories-in-side-panel .all-categories > a span {
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #000 !important;
  }

  .header-menu.categories-in-side-panel .all-categories > span:before,
  .header-menu.categories-in-side-panel .all-categories > a span:before {
    content: "Shop by Department";
    display: inline-block;
  }

  /* Hide the old text */
  .header-menu.categories-in-side-panel .all-categories > span,
  .header-menu.categories-in-side-panel .all-categories > a span {
    color: transparent !important;
  }

  /* 2. Style to match the rest of the menu */
  .header-menu.categories-in-side-panel .all-categories {
    border-bottom: 1px solid #f0f0f0;
    padding: 16px 20px;
    display: block;
  }
  .header-menu.categories-in-side-panel .all-categories span:before {
    color: #000;
  }
}
@media (max-width: 1024px) {
  /* Target the All Categories element */
  .header-menu.categories-in-side-panel .all-categories {
    background: transparent !important;   /* remove gray */
    padding: 16px 20px !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }

  /* Make its text match the other menu items */
  .header-menu.categories-in-side-panel .all-categories > span,
  .header-menu.categories-in-side-panel .all-categories > a span {
    font-family: "Helvetica Neue", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000 !important;
    text-transform: uppercase;
  }

  /* Override arrow icon */
  .header-menu.categories-in-side-panel .all-categories .plus-button,
  .header-menu.categories-in-side-panel .all-categories::after {
    display: none !important;
  }

  /* Remove any extra box or shadow */
  .header-menu.categories-in-side-panel .all-categories {
    box-shadow: none !important;
  }

  /* Remove weird faint white text layering */
  .header-menu.categories-in-side-panel .all-categories > span:before {
    content: "Shop by Department";
    color: #000 !important;
  }
  .header-menu.categories-in-side-panel .all-categories > span {
    color: transparent !important; /* hide original text */
  }
}
@media (max-width: 1024px) {

  /* Restore base layout */
  .header-menu.categories-in-side-panel .top-menu > li.all-categories {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 20px !important;
    background: transparent !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }

  /* Reset text to original (no pseudo duplication) */
  .header-menu.categories-in-side-panel .top-menu > li.all-categories > span {
    font-family: "Roboto", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000 !important;
    text-transform: uppercase !important;
    line-height: 1.5em !important;
  }

  /* Make sure we don't inject any extra text */
  .header-menu.categories-in-side-panel .top-menu > li.all-categories > span::before {
    content: none !important;
  }

  /* Show the original plus button again */
  .header-menu.categories-in-side-panel .top-menu > li.all-categories .plus-button {
    display: block !important;
    position: relative;
    width: 20px;
    height: 20px;
  }

  /* Optional: tweak the icon position to align nicely */
  .header-menu.categories-in-side-panel .top-menu > li.all-categories .plus-button::before {
    content: "\276F"; /* nice clean arrow */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: #999;
  }

  /* Remove any extra arrows we previously added */
  .header-menu.categories-in-side-panel .top-menu > li.all-categories::after {
    content: none !important;
  }

  /* Optional hover background */
  .header-menu.categories-in-side-panel .top-menu > li.all-categories:hover {
    background-color: #f5f5f5 !important;
  }
}
@media (max-width: 1024px) {

  /* Restore Shop by Department text */
  .header-menu.categories-in-side-panel .top-menu > li.all-categories > span {
    display: inline-block !important;
    font-family: "Roboto", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000 !important; /* <-- makes it visible */
    text-transform: uppercase !important;
    line-height: 1.5em !important;
  }

  /* Fix alignment between text and arrow */
  .header-menu.categories-in-side-panel .top-menu > li.all-categories {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 20px !important;
    background: transparent !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }

  /* Keep the original arrow visible */
  .header-menu.categories-in-side-panel .top-menu > li.all-categories .plus-button {
    display: block !important;
    width: 20px;
    height: 20px;
  }

  /* Reset weird styles from earlier */
  .header-menu.categories-in-side-panel .top-menu > li.all-categories > span::before,
  .header-menu.categories-in-side-panel .top-menu > li.all-categories::after {
    content: none !important;
  }
}
@media (max-width: 1024px) {
  /* Clean up spacing for Shop by Department */
  .header-menu.categories-in-side-panel .top-menu > li.all-categories {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 20px !important;  /* match others */
    margin: 0 !important;
    background: #fff !important;    /* match background of other menu items */
    border-bottom: 1px solid #f0f0f0 !important;
  }

  /* Text alignment fix */
  .header-menu.categories-in-side-panel .top-menu > li.all-categories > span {
    font-family: "Roboto", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000 !important;
    text-transform: uppercase !important;
    line-height: 1.2em !important;   /* more compact */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Arrow position cleanup */
  .header-menu.categories-in-side-panel .top-menu > li.all-categories .plus-button {
    display: block !important;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    position: relative;
    top: 0;
  }

  /* Optional hover */
  .header-menu.categories-in-side-panel .top-menu > li.all-categories:hover {
    background-color: #f5f5f5 !important;
  }
/* --- Make the subcategory anchors be the clickable top layer --- */
.sub-category-grid .item-box,
.subcategory-grid .item-box { position: relative; }

.sub-category-grid .picture,
.subcategory-grid .picture { position: relative; }

/* Stretch the <a> to cover the whole tile/picture */
.sub-category-grid .picture > a,
.subcategory-grid .picture > a {
  position: absolute;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0 */
  z-index: 5;
  display: block;
}

/* Ensure title links are clickable and above effects too */
.sub-category-grid .title a,
.subcategory-grid .title a {
  position: relative;
  z-index: 6;
  pointer-events: auto !important;
  display: inline-block;
}

/* Neutralize common overlay layers that block clicks */
.sub-category-grid .picture::before,
.sub-category-grid .picture::after,
.sub-category-grid .overlay,
.sub-category-grid .hover,
.sub-category-grid .mask,
.sub-category-grid .ribbon,
.sub-category-grid .badge,
.subcategory-grid .picture::before,
.subcategory-grid .picture::after,
.subcategory-grid .overlay,
.subcategory-grid .hover,
.subcategory-grid .mask,
.subcategory-grid .ribbon,
.subcategory-grid .badge {
  pointer-events: none !important;
}

/* In case a parent accidentally disabled clicks */
.sub-category-grid,
.sub-category-grid * ,
.subcategory-grid,
.subcategory-grid * { pointer-events: auto; }
}
/* ================================
   FIX: Login Dropdown Visibility
   ================================ */
.profile-menu-box {
  background: #ffffff !important;
  color: #000000 !important;
}

.profile-menu-box input,
.profile-menu-box label,
.profile-menu-box span,
.profile-menu-box a {
  color: #000000 !important;
}

.profile-menu-box input[type="email"],
.profile-menu-box input[type="password"] {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ccc !important;
}

.profile-menu-box .button-1.login-button,
.profile-menu-box .button-1.register-button {
  background: #004dff !important;
  color: #ffffff !important;
  border: none !important;
}

.profile-menu-box .button-1.login-button:hover,
.profile-menu-box .button-1.register-button:hover {
  background: #0036cc !important;
}

/* Optional: make placeholder text gray instead of invisible white */
.profile-menu-box input::placeholder {
  color: #888 !important;
}
/* ================================
   FIX: Login Dropdown Buttons
   ================================ */

/* Base box styling */
.profile-menu-box {
  background: #ffffff !important;
  color: #000000 !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
}

/* Inputs */
.profile-menu-box input[type="email"],
.profile-menu-box input[type="password"] {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ccc !important;
}

/* Labels, links */
.profile-menu-box label,
.profile-menu-box a,
.profile-menu-box span {
  color: #000000 !important;
}

/* Forgot password text */
.profile-menu-box .forgot-password a {
  color: #555 !important;
  font-weight: 600;
}
.profile-menu-box .forgot-password a:hover {
  color: #004dff !important;
}

/* LOG IN button */
.profile-menu-box .button-1.login-button {
  background: #004dff !important;
  color: #ffffff !important;
  border: none !important;
  width: 100% !important;
  border-radius: 4px !important;
  margin-top: 10px !important;
  padding: 12px 0 !important;
  font-weight: 700 !important;
}
.profile-menu-box .button-1.login-button:hover {
  background: #0036cc !important;
}

/* REGISTER button – make it clean black */
.profile-menu-box .button-1.register-button {
  background: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  width: 100% !important;
  border-radius: 4px !important;
  margin-top: 8px !important;
  padding: 12px 0 !important;
  font-weight: 700 !important;
}
.profile-menu-box .button-1.register-button:hover {
  background: #222 !important;
}