.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); }
/* Desktop menu bar only (D-122). Brooklyn's own top-level menu rule lives in 1024.css under min-width:1025px; below that
   the menu is a white off-canvas panel styled by mobile.css, so white 21px labels must not leak into it. Same breakpoint. */
@media (min-width: 1025px) {
  .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); }
/* Contrast (D-141): white on OP Blue is ~2.9:1 and fails WCAG AA. Hyperlink is ~6.4:1.
   Hover goes to OP Blue, which is acceptable as a transient state on a 16px bold label. */
a.opsb-hero-button, a.opsb-hero-button:hover { display: inline-block; min-height: 48px; box-sizing: border-box; padding: 14px 32px; border-radius: 3px; background: var(--opsb-hyperlink); color: #fff; font-size: 16px; font-weight: 700; line-height: 20px; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }
a.opsb-hero-button:hover { background: var(--opsb-blue); }
@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)}

/* Checkout payment-method list. The theme reserves a ~66px gutter between the
   radio and the method name, but gives .payment-logo an absolutely-positioned
   120x36 box with overflow visible, so any plugin logo larger than the gutter
   lands on top of the text (the stock Check and Manual logos are 120x120).
   Cap the image to the gutter it was given. */
.payment-method .method-list .payment-logo{width:60px;height:auto;display:flex;align-items:center;justify-content:center}
.payment-method .method-list .payment-logo img{display:block;max-width:60px;max-height:36px;width:auto;height:auto;object-fit:contain}

/* Home page (D-139 copy). Scoped to .opsb-home so nothing leaks to other pages. */
.opsb-home .opsb-hero-text h1 { margin: 0 0 18px; font-size: 54px; line-height: 1.02; color: var(--opsb-hyperlink); text-wrap: balance; }
.opsb-home .opsb-hero-sub { margin: 0 0 28px; font-size: 18px; line-height: 1.6; color: var(--opsb-grey); max-width: 54ch; }
.opsb-home .opsb-hero-figure { justify-self: center; text-align: center; min-width: 0; }
.opsb-home .opsb-hero-figure .opsb-hero-img { margin: 0 auto; }
.opsb-landing .opsb-img-note { margin: 10px 0 0; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--opsb-light-grey); }
.opsb-landing .opsb-tile-body { margin: 0; font-size: 16px; line-height: 1.6; color: var(--opsb-grey); }
.opsb-landing .opsb-tile-img-teal { background: rgba(106,199,189,.30); }
.opsb-landing .opsb-strip-body { min-width: 0; }
.opsb-landing .opsb-strip-body p { margin: 0 0 20px; font-size: 17px; line-height: 1.6; }
.opsb-landing .opsb-strip-body p:last-child { margin-bottom: 0; }
.opsb-landing .opsb-strip > h2 { margin: 0; line-height: 1.05; color: var(--opsb-hyperlink); text-wrap: balance; }
@media (max-width: 768px) {
  .opsb-home .opsb-hero-text h1 { font-size: 38px; line-height: 1.04; }
  .opsb-home .opsb-hero-sub { font-size: 17px; }
  .opsb-landing a.opsb-hero-button { display: block; text-align: center; padding-left: 24px; padding-right: 24px; }
}
/* Category landing-page section intro (D-141). The paragraph under a section
   heading on a category page - Mitchell Ponseti, C-Pro ADM, Accessories. */
.opsb-landing .opsb-section-intro, .category-description .opsb-section-intro { margin: 0 0 20px; font-size: 17px; line-height: 1.6; color: var(--opsb-grey); max-width: 70ch; }
/* OPSB logo in the footer (D-141). The markup lives in Footer custom HTML and is
   moved into .footer-middle by script. Width-constrained with height auto: the
   uploaded asset is 1196x264, not the 231x50 the theme's sample logo uses. */
.opsb-footer-logo { margin: 0 0 24px; }
.opsb-footer-logo img { display: block; width: 100%; max-width: 231px; height: auto; }
/* Contact Us (D-142). OPSB's own Cognito form 172 replaces nop's built-in contact
   form, so that form is hidden - on this page only, by the page class the theme puts
   on the body wrapper. Scoped to a direct child of .page-body so no other form on a
   contact page could ever match. */
.contact-page .page-body > form { display: none; }
.opsb-contact .opsb-cognito-form { margin-top: 24px; }
/* Cognito form 172 ships its own stylesheet, which renders the submit button as a
   45x20 grey box with black text - below the 44px touch target and nothing like the
   rest of the site. !important is used deliberately: their rules load after ours and
   are not ours to change. Scoped to our own wrapper so nothing else can match. */
.opsb-cognito-form .cog-button--primary,
.opsb-cognito-form button[type="submit"] {
  width: auto !important; min-height: 48px !important; padding: 14px 32px !important;
  border: 0 !important; border-radius: 3px !important;
  background: var(--opsb-hyperlink) !important; color: #fff !important;
  font-family: var(--opsb-font-body) !important; font-size: 16px !important; font-weight: 700 !important;
  line-height: 20px !important; text-transform: uppercase !important; letter-spacing: .04em !important;
}
.opsb-cognito-form .cog-button--primary:hover,
.opsb-cognito-form button[type="submit"]:hover { background: var(--opsb-blue) !important; }