.header-logo a,
.header-upper,
.header-actions a.ico-cart,
.header-menu > ul > li > a::after,
#goToTop,
.social-sharing li,
.newsletter-email .newsletter-subscribe-button,
.footer-block .title + *::before,
.header-2 .header-lower,
.mega-menu .title::after,
.item-box .swiper-pagination-bullet-active,
.item-box button,
.item-box .with-icon .product-box-add-to-cart-button,
.pager li.previous-page *,
.pager li.next-page *,
.pager li.first-page *,
.pager li.last-page *,
.overview .add-to-cart-button,
.variant-overview .add-to-cart-button,
.write-review .button-1,
.wishlist-content .button-2.wishlist-add-to-cart-button,
.compare-products-page .button-2,
.registration-page .button-1,
.registration-result-page .button-1,
.login-page .login-button,
.login-page .register-button,
.password-recovery-page .button-1,
.account-page .button-1,
.return-request-page .button-1,
.user-agreement-page .button-1,
.contact-page .button-1,
.email-a-friend-page .button-1,
.account-page .title strong::after,
.account-page .button-2,
.order-details-page .button-2.print-order-button,
.order-details-page .actions button,
.mini-shopping-cart .count,
.mini-shopping-cart button,
.shopping-cart-page .button-2.update-cart-button,
.shopping-cart-page .estimate-shipping-button,
.shopping-cart-page .button-1,
.checkout-page .button-1,
.search-input .button-1,
.sitemap-page .entity-title h2::after,
.post-title::after,
.news-title::after,
.blog-posts .read-more,
.news-items .read-more,
.new-comment .title strong::after,
.comment-list .title strong::after,
.new-comment .button-1,
.forum-search-box .basic .search-box-button,
.forums-table-section-title > a::after,
.forums-table-section-title strong::after,
.topic-post .pm-button,
.profile-info-box .pm-button,
.forum-edit-page .buttons button.button-1,
.move-topic-page .buttons button.button-1,
.private-messages .buttons button.button-1,
.responsive-nav-wrapper,
.item-box .rating div,
.product-review-box .rating div,
.footer-2 .newsletter-block .title,
.apply-vendor-page .button-1,
.ui-dialog-titlebar,
.ui-dialog .notify-me-button,
button.apply-shipping-button,
/*plugins*/ .ajaxCart .productAddedToCartWindowCheckout,
.previous-product a:hover .previous-product-label,
.next-product a:hover .next-product-label,
.sale-of-the-day-offer .go-to-product-page,
.blog-search-box .search-box-button,
.post-navigation a:hover::before,
.jCarouselMainWrapper .slick-dots .slick-active button,
.ajaxFilters .k-window-titlebar,
.ropc .complete-button button,
.header-menu > ul > li > span:after,
.shops-item .shop-name:after,
.shops-item .read-more,
.newsletter-subscribe-popup .newsletter-subscribe-popup-title::after,
.sale-of-the-day-offer li.slick-active button {
  background-color: #0098D6;
}
/* set same border color as bg */

.pager li.previous-page *,
.pager li.next-page *,
.pager li.first-page *,
.pager li.last-page *,
.wishlist-content .button-2.wishlist-add-to-cart-button,
.account-page .button-2,
.order-details-page .button-2.print-order-button,
.order-details-page .actions button,
.shopping-cart-page .button-2.update-cart-button,
.shopping-cart-page .estimate-shipping-button,
.forum-edit-page .buttons button.button-1,
.move-topic-page .buttons button.button-1,
.private-messages .buttons button.button-1,
.attribute-squares .selected-value .attribute-square,
/*plugins*/ .previous-product a:hover .previous-product-label,
.next-product a:hover .next-product-label,
.ui-slider-handle,
.mega-menu .dropdown.fullWidth,
.post-navigation a:hover::before,
.product-filters .ui-slider-handle {
  border-color: #0098D6;
}
/* set differen background color to this button */

.header-2 .header-actions a.ico-cart {
  background-color: #0ab8ff;
}
/* color */

.ui-dialog-titlebar,
.eu-cookie-bar-notification button,
.eu-cookie-bar-notification a,
.header-2 .header-links a span:hover,
.header-2 .header-links a:hover,
.styleSelect_item li:hover span,
.footer-block a:hover,
.footer-powered-by a,
.footer-designed-by a,
.block .list li.active > a,
.block.block-account-navigation .list li.active a,
.block .list a:hover,
.block .view-all a,
.block .tags li a:hover,
.product-tags-all-page li a:hover,
.news-list-homepage .news-date,
.poll strong,
.poll .buttons button,
.poll-total-votes,
.breadcrumb a:hover,
.contact-vendor .button-2,
.product-filters .filter-content li a:hover,
.item-box .product-title a:hover,
.item-box .actual-price,
.item-box .tax-shipping-info a,
.pager li a:hover,
.pager li.current-page span,
.product-review-links a,
.overview .subscribe-button,
.variant-overview .subscribe-button,
.overview .value a,
.variant-overview .value a,
.overview .product-price,
.variant-overview .product-price,
.overview .prices .tax-shipping-info a,
.variant-overview .prices .tax-shipping-info a,
.ui-tabs .ui-tabs-nav li a,
.product-tags-list li,
.vendor-list li,
.product-reviews-page h1 a,
.product-review-item .review-info a,
.product-review-helpfulness .vote,
.wishlist-content .tax-shipping-info a,
.wishlist-content .button-2,
.wishlist-page .share-info a:hover,
.compare-products-page .clear-list,
.topic-block a,
.topic-page a,
.enter-password-form button,
.email-a-friend-page .title h2,
#check-availability-button,
.login-page .inputs.reversed a,
.login-page .checkout-as-guest-button,
.add-more-external-records a,
.account-page .return-items-button,
.return-request-list-page a,
.reward-points-history td.points-balance,
.avatar-page .buttons .button-2,
.shopping-cart-page .button-2,
.checkout-page .button-2,
.order-details-page .page-title a,
.terms-of-service a,
.order-completed .details a,
.opc .back-link a:hover,
.order-details-page .order-overview strong,
.order-details-page .tax-shipping-info a,
.order-details-page button.return-items-button,
.sitemap-page a:hover,
.post-title:hover,
.news-title:hover,
.blog-page .tags li,
.blogpost-page .tags li,
.blog-posts .read-comments,
.comment-info .username,
.news-list-homepage .view-all a,
.forum-search-box .advanced a,
.forums-table-section a:hover,
.forums-table-section-title > a:hover,
.forums-table-section .view-all a,
.forums-table-section .latest-post .origin a,
.forums-table-section .latest-post .author a,
.forums-table-section .topic-details .topic-starter a,
.forum-actions .actions a,
.topic-actions .actions a,
.topic-post .username,
.topic-post .post-actions .quote-post-button,
.topic-post .post-actions a:hover,
.forum-edit-page .buttons button,
.move-topic-page .buttons button,
.private-messages .buttons button,
.private-messages-page td a.pm-unread,
.private-messages-page .to a:hover,
.private-messages-page .from a:hover,
.private-messages-page .subject a:hover,
.profile-page .topic-title a,
.profile-page .topic-title a:hover,
.header-menu .sublist li:hover > a,
.mini-shopping-cart .price span,
.mini-shopping-cart .totals strong,
.cart .edit-item > a,
.cart tbody .subtotal,
.compare-products-table .product-price td,
td.footable-last-column,
.go-to-page,
.blog-page .buttons .read-more,
.order-details-page .button-2.re-order-button,
.account-page .button-2.return-items-button,
/*topics descriptions posts*/ .category-description a,
.manufacturer-description a,
.full-description a,
.topic-html-content a,
.post-body a,
.news-body a,
.custom-tab a,
/*plugins*/ .mega-menu .box li a:hover,
.sale-of-the-day-offer .price.actual-price,
.rich-blog-homepage .view-all a,
.instant-search-item .detail .price,
.priceRangeCurrentPricesPanel span,
.specification-current-value-panel span,
.filtersGroupPanel li > a:hover,
.filter-block a.clearFilterOptions,
.filter-block a.clearPriceRangeFilter,
.selected-options-list > li span,
.productAddedToCartWindowSummary a,
.productAddedToCartWindowDescription strong,
.quickViewWindow .links-panel a,
.sale-of-the-day-offer .product-name h4:hover,
.blog-search-results li a,
.jDropDown li span:hover,
.jDropDown li.selected span,
.footer-tax-shipping a,
p .search-term-highlighter,
.ropc .estimate-shipping button,
.ropc .coupon-code button,
.post-relations li a,
.checkbox-list li label:hover,
.spc-header li span,
.spc-categories .category-sublist li a:hover,
.spc-categories .category-info:hover .category-title a,
.getUserGeoLocation,
.align-map-button,
.filter-shops-button,
.shops-item .show-directions,
.shop-map-images .map-controls a,
.shop-full-description a,
.product-filters .selected-price-range {
  color: #0098D6;
}
/* OPSB brand layer for Brooklyn. Source of truth: docs/branding/opsb-brand.src.css in the repo.
   Lives in admin > Nop-Templates > Brooklyn > Settings > Custom Head Styles (appended to theme.custom-1.css).
   The two hexagon placeholders below are filled with SVG data URIs by docs/branding/build-brand-css.js.
   Palette per OPSB-Visual-Guidelines.pdf. The red of the logo P is not a brand colour: logo only.
   Fonts: display stack names Adobe kit bqy0wxz slugs first; on opsb.stratoworks.com the kit is domain-locked,
   so Google "Bebas Neue" is an INTERIM stand-in for Bebas Neue Pro (single weight). Fix waits on O-23. */
:root {
  --opsb-blue: #0098D6;
  --opsb-hyperlink: #215E9E;
  --opsb-light-blue: #98C2E8;
  --opsb-grey: #545861;
  --opsb-light-grey: #A7A9AC;
  --opsb-teal: #6AC7BD;
  --opsb-paper: #FFFFFF;
  --opsb-rule: #E3E6EA;
  --opsb-font-body: lato, "Lato", Helvetica, Arial, sans-serif;
  --opsb-font-display: bebas-neue-pro, "Bebas Neue Pro", "Bebas Neue", "Lato", sans-serif;
  --opsb-display-weight: 600;
  --opsb-hex-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20115.47'%3E%3Cpath%20fill%3D'%23000'%20d%3D'M42.21%204.50Q50.00%20-0.00%2057.79%204.50L92.21%2024.37Q100.00%2028.87%20100.00%2037.87L100.00%2077.60Q100.00%2086.60%2092.21%2091.10L57.79%20110.97Q50.00%20115.47%2042.21%20110.97L7.79%2091.10Q-0.00%2086.60%20-0.00%2077.60L-0.00%2037.87Q0.00%2028.87%207.79%2024.37Z'%2F%3E%3C%2Fsvg%3E");
  --opsb-honeycomb: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20268%20310'%3E%3Cpath%20transform%3D'translate(56%200)'%20fill%3D'%2398C2E8'%20fill-opacity%3D'0.45'%20d%3D'M42.21%204.50Q50.00%20-0.00%2057.79%204.50L92.21%2024.37Q100.00%2028.87%20100.00%2037.87L100.00%2077.60Q100.00%2086.60%2092.21%2091.10L57.79%20110.97Q50.00%20115.47%2042.21%20110.97L7.79%2091.10Q-0.00%2086.60%20-0.00%2077.60L-0.00%2037.87Q0.00%2028.87%207.79%2024.37Z'%2F%3E%3Cpath%20transform%3D'translate(168%200)'%20fill%3D'%236AC7BD'%20fill-opacity%3D'0.3'%20d%3D'M42.21%204.50Q50.00%20-0.00%2057.79%204.50L92.21%2024.37Q100.00%2028.87%20100.00%2037.87L100.00%2077.60Q100.00%2086.60%2092.21%2091.10L57.79%20110.97Q50.00%20115.47%2042.21%20110.97L7.79%2091.10Q-0.00%2086.60%20-0.00%2077.60L-0.00%2037.87Q0.00%2028.87%207.79%2024.37Z'%2F%3E%3Cpath%20transform%3D'translate(0%2097)'%20fill%3D'%230098D6'%20fill-opacity%3D'0.18'%20d%3D'M42.21%204.50Q50.00%20-0.00%2057.79%204.50L92.21%2024.37Q100.00%2028.87%20100.00%2037.87L100.00%2077.60Q100.00%2086.60%2092.21%2091.10L57.79%20110.97Q50.00%20115.47%2042.21%20110.97L7.79%2091.10Q-0.00%2086.60%20-0.00%2077.60L-0.00%2037.87Q0.00%2028.87%207.79%2024.37Z'%2F%3E%3Cpath%20transform%3D'translate(112%2097)'%20fill%3D'%23A7A9AC'%20fill-opacity%3D'0.35'%20d%3D'M42.21%204.50Q50.00%20-0.00%2057.79%204.50L92.21%2024.37Q100.00%2028.87%20100.00%2037.87L100.00%2077.60Q100.00%2086.60%2092.21%2091.10L57.79%20110.97Q50.00%20115.47%2042.21%20110.97L7.79%2091.10Q-0.00%2086.60%20-0.00%2077.60L-0.00%2037.87Q0.00%2028.87%207.79%2024.37Z'%2F%3E%3Cpath%20transform%3D'translate(56%20194)'%20fill%3D'%2398C2E8'%20fill-opacity%3D'0.3'%20d%3D'M42.21%204.50Q50.00%20-0.00%2057.79%204.50L92.21%2024.37Q100.00%2028.87%20100.00%2037.87L100.00%2077.60Q100.00%2086.60%2092.21%2091.10L57.79%20110.97Q50.00%20115.47%2042.21%20110.97L7.79%2091.10Q-0.00%2086.60%20-0.00%2077.60L-0.00%2037.87Q0.00%2028.87%207.79%2024.37Z'%2F%3E%3C%2Fsvg%3E");
}
body, input, textarea, select, button, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], .pager li *, .vote-count-post { font-family: var(--opsb-font-body); }
body { color: var(--opsb-grey); font-weight: 400; }
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], textarea, select { color: var(--opsb-grey); }
strong, b { font-weight: 700; }
h1, h2, .page-title h1, .page-title h2, .product-name h1, .title, .title strong, .footer-block .title, .footer-block .title strong, .block .title, .block .title strong, .product-grid .title, .category-grid .title, .header-menu > ul > li > a, .header-menu > ul > li > span, .opsb-display {
  font-family: var(--opsb-font-display); font-weight: var(--opsb-display-weight); font-synthesis: none; text-transform: uppercase; letter-spacing: .03em;
}
.page-title h1, .product-name h1, .one-column .product-name h1, .two-columns .product-name h1 { color: var(--opsb-blue); font-size: 44px; line-height: 1.05; letter-spacing: .03em; }
.title, .title strong, .block .title strong { color: var(--opsb-grey); }
.footer-block .title, .footer-block .title strong { font-size: 22px; letter-spacing: .05em; }
.item-box .product-title, .item-box .product-title a, .sub-category-item .title, .sub-category-item .title a { font-family: var(--opsb-font-body); font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--opsb-grey); }
a { color: var(--opsb-hyperlink); }
a:hover, a:focus { color: var(--opsb-blue); }
.footer-block a, .footer-lower a { color: var(--opsb-grey); }
.footer-block a:hover, .footer-lower a:hover { color: var(--opsb-blue); }
.header-logo a { background-color: var(--opsb-paper); }
.header-2 .header-lower { background-color: var(--opsb-blue); }
.header-menu > ul > li > a, .header-menu > ul > li > span { font-size: 21px; color: #fff; }
.header-menu > ul > li > a:hover, .header-menu > ul > li > a.active { color: #fff; }
.header-menu > ul > li > a::after { background-color: #fff; }
.header-menu .sublist, .header-menu .dropdown .sublist-wrap { border-top: 3px solid var(--opsb-hyperlink); }
.header-menu .sublist a { font-family: var(--opsb-font-body); color: var(--opsb-grey); text-transform: none; }
.header-menu .sublist a:hover { color: var(--opsb-blue); }
.header-2 .header-actions a.ico-cart { background-color: var(--opsb-hyperlink); }
.button-1, .button-2, .add-to-cart-button, .product-box-add-to-cart-button, .overview .add-to-cart-button, .checkout-button, .newsletter-subscribe-button, .search-box-button { font-family: var(--opsb-font-body); font-weight: 700; letter-spacing: .04em; }
.button-1:hover, .button-2:hover, .add-to-cart-button:hover, .product-box-add-to-cart-button:hover, .checkout-button:hover, .newsletter-subscribe-button:hover { background-color: var(--opsb-hyperlink); border-color: var(--opsb-hyperlink); }
/* Hexagons, per guide: pointy-top, rounded corners, never full opacity, never overlapping, honeycomb allowed, may hold images.
   The honeycomb is one SVG with fixed gaps, so no-overlap is built in. Cell opacities .18 to .45. */
.footer { background-color: var(--opsb-paper); background-image: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(0,152,214,.14) 100%); }
.footer-upper { background-color: transparent; }
.footer-middle { background: var(--opsb-honeycomb) no-repeat right 24px bottom 24px / 150px auto; }
.footer-block .title + *::before, .footer-block .title::after { background-color: var(--opsb-blue); }
/* Brooklyn already positions .page-title (absolute band above the breadcrumb) - do not override its position. */
.category-page .page-title::after, .opsb-landing .page-title::after { content: ""; position: absolute; right: 0; top: 42%; width: 60px; height: 70px; transform: translateY(-50%); background: var(--opsb-honeycomb) no-repeat center / contain; pointer-events: none; }
.opsb-hex, .sub-category-item .picture img, .opsb-tile .opsb-tile-img { -webkit-mask: var(--opsb-hex-mask) no-repeat center / contain; mask: var(--opsb-hex-mask) no-repeat center / contain; }
.sub-category-item .picture { background: none; border: 0; }
.opsb-hex-depth { position: relative; isolation: isolate; }
.opsb-hex-depth::before { content: ""; position: absolute; z-index: -1; width: 38%; aspect-ratio: 100 / 115.47; right: -6%; top: -8%; background: var(--opsb-light-blue); opacity: .45; -webkit-mask: var(--opsb-hex-mask) no-repeat center / contain; mask: var(--opsb-hex-mask) no-repeat center / contain; }
/* Landing-page blocks (Foot & Ankle, home) */
.opsb-landing { color: var(--opsb-grey); }
.opsb-landing-section { margin: 0 0 48px; }
.opsb-landing-section > h2 { font-size: 34px; color: var(--opsb-blue); margin: 0 0 6px; text-align: left; }
.opsb-tiles { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 20px; }
.opsb-tiles.opsb-tiles-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.opsb-tile { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 16px; text-align: center; text-decoration: none; border: 1px solid var(--opsb-rule); border-radius: 6px; background: #fff; }
.opsb-tile:hover { border-color: var(--opsb-light-blue); }
.opsb-tile .opsb-tile-img { width: 70%; max-width: 220px; aspect-ratio: 100 / 115.47; background: rgba(152,194,232,.35); object-fit: cover; }
.opsb-tile .opsb-tile-name { font-family: var(--opsb-font-display); font-weight: var(--opsb-display-weight); font-synthesis: none; text-transform: uppercase; font-size: 24px; letter-spacing: .03em; color: var(--opsb-hyperlink); }
.opsb-strip { display: grid; gap: 24px; grid-template-columns: minmax(200px, 1fr) 3fr; align-items: center; padding: 24px; border-radius: 6px; background: linear-gradient(90deg, rgba(33,94,158,.10), rgba(0,152,214,.10)); }
@media (max-width: 768px) { .opsb-strip { grid-template-columns: 1fr; } }
/* Home page blocks */
.opsb-demo-notice { margin: 0 0 24px; padding: 8px 12px; border-left: 4px solid var(--opsb-teal); background: #f6f7f8; font-size: 13px; }
.opsb-hero { display: grid; grid-template-columns: 3fr 2fr; gap: 32px; align-items: center; padding: 40px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(0,152,214,.16) 100%); }
.opsb-hero-img { display: block; width: 100%; max-width: 280px; justify-self: center; aspect-ratio: 100 / 115.47; background: rgba(0,152,214,.25); }
a.opsb-hero-button, a.opsb-hero-button:hover { display: inline-block; padding: 12px 28px; border-radius: 3px; background: var(--opsb-blue); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }
a.opsb-hero-button:hover { background: var(--opsb-hyperlink); }
@media (max-width: 768px) { .opsb-hero { grid-template-columns: 1fr; padding: 24px; } }
/* Visible slot for copy OPSB has not supplied. Loud on purpose so it cannot ship by accident. */
.opsb-copy-needed { display: block; margin: 8px 0 0; padding: 10px 14px; border: 2px dashed var(--opsb-light-grey); border-radius: 4px; background: repeating-linear-gradient(135deg, #fff 0 10px, #f6f7f8 10px 20px); color: var(--opsb-grey); font-style: italic; font-size: 14px; }
.opsb-copy-needed::before { content: "COPY NEEDED FROM OPSB: "; font-style: normal; font-weight: 700; letter-spacing: .04em; }
.bar-notification.success { background-color: var(--opsb-blue); }
.bar-notification.error { background-color: var(--opsb-grey); }
/* UX hides carried over from the C-Pro Direct reference build (D-006) */
.category-top-content-wrapper{align-items:flex-start;margin-bottom:2rem;flex-wrap:wrap}
.category-description{flex:1 1 60%;min-width:300px}
.category-rhs-topic{flex:0 1 35%;min-width:250px;background-color:#f9f9f9;padding:1rem;border-left:1px solid #ccc}
@media(min-width:1025px){.header-2 .header-logo{width:30%}.header-2 .header-options{display:table-cell;width:40%}}
.overview-buttons{display:none}
.overview .add-to-wishlist-button,.variant-overview .add-to-wishlist-button{display:none}
.social-sharing{display:none}
.product-specs-box{display:none}
.product-tags-box{display:none}
.also-purchased-products-grid.product-grid{display:none}
.product-reviews{display:none}
.product-share-button{display:none}
.product-reviews-overview{display:none}
a.ico-wishlist{display:none}
.old-price{display:none!important}
.old-product-price{display:none!important}
.c-prodirect-export-buttons .btn{background-color:var(--opsb-teal)}