/* ── Product listing: grid layout on content.product-content ── */
.product-view.image-view[no-of-column] .content.product-content {
    width: 100%;
    box-sizing: border-box;
}
.product-view.image-view[no-of-column="1"] .content.product-content { display: grid; grid-template-columns: repeat(1, 1fr); gap: 10px; }
.product-view.image-view[no-of-column="2"] .content.product-content { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.product-view.image-view[no-of-column="3"] .content.product-content { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.product-view.image-view[no-of-column="4"] .content.product-content { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.product-view.image-view[no-of-column="5"] .content.product-content { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.product-view.image-view[no-of-column="6"] .content.product-content { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.product-view.image-view[no-of-column] .content.product-content .product-block {
    margin   : 0;
    min-width: 0;
    overflow : hidden;
}

/* +++++++++++++++++  category details page page design +++++++++++++++++++++++++ */

.category-details-container .title {
    display        : block;
    font-size      : 22px;
    padding-bottom : 20px;
}
.category-details-container .category {
    margin : 0 0 20px 0;
}
.category-details-container .category-details-page-with-background {
    width: 100%;
    padding: 30px;
}
.category-details-container,
.subcategory-container {
    padding-bottom : 20px;
}
.subcategory-container .title,
.product-container .title {
    font-size      : 18px;
    padding-bottom : 15px;
}
.category-details .footer {
    background-color : #F6F6F6;
    border           : 1px solid #CCCCCC;
    margin-top       : 10px;
    padding          : 10px;
}
/* +++++++++++++++++  product details page page design +++++++++++++++++++++++++ */
.image-preview-box.product-detail-view > img {
    vertical-align: middle;
}
.page-product h2.product-name,
.page-product h1.product-name,
.product-info-view-container h1.product-name {
    font-size: 32px;
    line-height: 120%;
    font-weight: 600;
    margin: 0 0 20px;
    padding: 0;
}

.widget-productImage {
    position: relative;
}
.widget-productImage .image-preview-box {
    text-align : center;
    position   : relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.widget-productImage .image-preview-box .sale.tag-mark {
    background : url("/wc/7.0.0/images/site/sale.png") no-repeat scroll left top;
    display    : inline-block;
    height     : 53px;
    position   : absolute;
    left       : 25px;
    top        : 38px;
    width      : 54px;
}
.widget-productImage .image-preview-box .new.tag-mark {
    background : url("/wc/7.0.0/images/site/new.png") no-repeat scroll left top;
    display    : inline-block;
    height     : 27px;
    position   : absolute;
    right      : -6px;
    top        : 10px;
    width      : 52px;
    left: auto;
}
.widget-productImage .image-preview-box .featured.tag-mark {
    background : url("/wc/7.0.0/images/site/featured.png") no-repeat scroll left top;
    display    : inline-block;
    height     : 71px;
    position   : absolute;
    left      : 0;
    top        : 0;
    width      : 85px;
}
/* Featured WITH a custom label. featured.png has the word "Featured" baked into the artwork, so a
   custom label rendered on top of it read as two labels at once — the reported bug. The GSP already
   adds .featured-tag-with-label whenever a label is set, so key off that: drop the image and render the
   label as a flat horizontal badge at the top-left, same treatment as the Sold Out tag below.
   border-radius is reset because the base .featured.tag-mark (site-base-noncritical.css:1712) is a
   rounded amber pill. Labelless products keep the PNG ribbon untouched. */
.widget-productImage .image-preview-box .featured.tag-mark.featured-tag-with-label {
    background    : #CC0031;
    color         : #fff;
    position      : absolute;
    left          : 0;
    right         : auto;
    /* Same top offset as the NEW tag (:87) so the two badges sit on one line. */
    top           : 10px;
    /* Sold Out's 100px as a floor, but allowed to grow so a long label is not clipped. */
    min-width     : 100px;
    width         : auto;
    height        : 28px;
    padding       : 4px 5px;
    box-sizing    : border-box;
    border-radius : 0;
    /* Sold Out sets neither, so it inherits; the base .featured.tag-mark forces 15px/600. Inherit to
       match Sold Out's text exactly. */
    font-size     : inherit;
    font-weight   : inherit;
    line-height   : 20px;
    text-align    : center;
    white-space   : nowrap;
    z-index       : 2;
}
.widget-productImage .image-preview-box .sold-out-tag.tag-mark {
    display: inline-block;
    color: #fff;
    height: 28px;
    position: absolute;
    left: auto;
    bottom: 0;
    background: #CC0031;
    width: 100px;
    padding: 4px 5px;
}
.widget-productImage .multi-image-scroll-wrapper {
    overflow   : hidden;
    position   : relative;
    margin-top : 20px;
}
.widget-productImage .multi-image-scroll-wrapper .image-thumb-container {
    margin   : 5px 18px;
    overflow : hidden;
}
/* HWC-4750: rounded, #E6E6E6 thumbnail frame to match the product-page mockup — the same border
   colour the redesigned product cards use. The radius is declared here only: the .active rule and
   the multi-image-scroll-vertical-view variants below override `border` alone, so they inherit it. */
.widget-productImage .image-thumb-container .thumb-image {
    border        : 1px solid #E6E6E6;
    border-radius : 8px;
    padding       : 3px;
    text-align    : center;
    margin        : 0 3px;
    cursor: pointer;
}
/* HWC-4750: the thumb box is product-thumb-width/height (120px from Settings), but the thumbnail
   file is the configured `thumbnail` size (150px by default), so the image overflowed its own
   frame — the border read as broken because the picture spilled past it on every side. The
   multi-image-scroll-vertical-view variant below already constrained this; the default horizontal
   strip never did. */
.widget-productImage .image-thumb-container .thumb-image img {
    vertical-align : middle;
    max-width      : 100%;
    max-height     : 100%;
}
.widget-productImage .image-thumb-container .thumb-image.active {
    border : 1px solid #CCCCCC;
}
.widget-productImage .multi-image-scroll-wrapper .scroll-navigator {
    background-image  : url("/wc/7.0.0/images/site/product-details-image-slider-arrow.png");
    background-repeat : no-repeat;
    bottom            : 0;
    position          : absolute;
    top               : 0;
    width             : 15px;
}
.widget-productImage .multi-image-scroll-wrapper .image-left-scroller.scroll-navigator {
    background-position : 2px center;
    left                : 0;
}
.widget-productImage .multi-image-scroll-wrapper .image-right-scroller.scroll-navigator {
    background-position : -13px center;
    right               : 0;
}

/* ── Thumbnails: bottom horizontal layout (overrides ecommerce.css vertical-left) ── */
.widget-productImage.multi-image-scroll-vertical-view .image-preview-box {
    padding-left: 0;
}
.widget-productImage.multi-image-scroll-vertical-view.no-thumb-image .image-preview-box {
    padding-left: 0;
}
.widget-productImage.multi-image-scroll-vertical-view .image-preview-box .tag-mark {}
.widget-productImage.multi-image-scroll-vertical-view .multi-image-scroll-wrapper {
    position  : relative;
    top       : auto;
    max-width : 100%;
    height    : auto;
    padding   : 0;
    margin-top: 10px;
}
.widget-productImage.multi-image-scroll-vertical-view .multi-image-scroll-wrapper .scroll-navigator {
    height             : 100%;
    width              : 15px;
    top                : 0;
    bottom             : 0;
    left               : auto;
    background-image   : url("/wc/7.0.0/images/site/product-details-image-slider-arrow.png");
    background-repeat  : no-repeat;
    text-align         : left;
    cursor             : pointer;
}
.widget-productImage.multi-image-scroll-vertical-view .multi-image-scroll-wrapper .image-left-scroller {
    left               : 0;
    top                : 0;
    background-position: 2px center;
}
.widget-productImage.multi-image-scroll-vertical-view .multi-image-scroll-wrapper .image-right-scroller {
    right              : 0;
    top                : 0;
    bottom             : 0;
    background-position: -13px center;
}
.widget-productImage.multi-image-scroll-vertical-view .multi-image-scroll-wrapper .scroll-navigator:after {
    content: none;
}
.widget-productImage.multi-image-scroll-vertical-view .multi-image-scroll-wrapper .image-thumb-container {
    display        : flex;
    flex-direction : row;
    height         : auto !important;
    margin         : 5px 18px;
    overflow       : hidden;
}
.widget-productImage.multi-image-scroll-vertical-view .image-thumb-container .thumb-image {
    display    : inline-block;
    margin     : 5px;
    flex-shrink: 0;
}
.widget-productImage.multi-image-scroll-vertical-view .image-thumb-container .thumb-image img {
    max-width : 100%;
    max-height: 100%;
}

.widget-productSummary {
    padding-bottom : 20px;
}
.widget-productSummary .title {
    display        : block;
    font-size      : 18px;
    padding-bottom : 10px;
}
.widget-productSummary .summary {
    font-size: 14px;
}
.widget-productSku,
.widget-availableStock,
.widget-productCategory,
.widget-productManufacturer,
.widget-productBrand,
.widget-productModel,
.widget-combinedProduct {
    padding-bottom : 5px;
    font-size: 14px;
}
.widget-productSku label,
.widget-availableStock label,
.widget-productCategory label,
.widget-productManufacturer label,
.widget-productBrand label,
.widget-productModel label {
    font-weight: bold;
}

.product-category-widget .info-row {
    border    : medium none;
    font-size : 14px;
    margin    : 0;
    padding   : 0;
}
.product-manufacturer-widget,
.product-brand-widget {
    font-size : 14px;
}
.widget-price {
    padding: 20px 0 10px;
}
.widget-price .price {
    font-size : 22px;
}
.widget-price .price .tax-message {
    color     : #999999;
    font-size : 12px;
}
.widget-price .previous-price.price {
    color           : #FF0000;
    font-size       : 16px;
    padding-right   : 10px;
}
.widget-price .previous-price {
    text-decoration: none;
}
.widget-price .previous-price.strike-through {
    text-decoration: line-through;
}
.product-widget.widget-addCart {
    font-size: 0;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}
.product-widget.widget-addCart * {
    font-size: 13px;
}
.product-widget.widget-addCart span {
    vertical-align: middle;
}
.product-widget.widget-addCart .cart-button-container {
    display: inline-block;
    vertical-align: middle;
}
.widget-addCart .buy-now-button {
    padding: 10px 15px;
    margin-left: 5px;
}
.widget-addCart.purchase-restricted .add-to-cart-button,
.widget-addCart.purchase-restricted .stepper {
    display: none;
}
.page-product .bmui-tab,
.product-info-view-container .bmui-tab {
    padding-top : 40px;
}
.page-product .widget-productImage .image-preview-box .zoom-wrap .image-zoom-portion-mask,
.product-info-view-container .widget-productImage .image-preview-box .zoom-wrap .image-zoom-portion-mask {
    background-color: #FFFFFF;
    /* @alternate */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
    /* @alternate */ -moz-opacity: 40;
    /* @alternate */ -khtml-opacity: 40;
    opacity: 0.4;
}
.product-widget.widget-productSwipe span {
    display: inline-block;
    color: #333;
    border: 1px #ccc solid;
    padding: 5px 15px;
    margin-right: 5px;
    cursor: pointer;
}
.product-widget.widget-productSwipe span:hover {
    color: #fff;
    background-color: #333;
    border: 1px #333 solid;
}
.product-widget.widget-productSwipe span.disabled {
    border: 1px #999 solid;
    background-color: #999;
    color: #666;
    pointer-events: none;
}
.product-widget.widget-information .bmui-tab-body-container .title {
    display        : block;
    font-size      : 18px;
    padding-bottom : 10px;
}
.page-product .widget-likeus,
.product-info-view-container .widget-likeus {
    margin-top: 20px;
}
.page-product .widget-likeus > *,
.product-info-view-container .widget-likeus > * {
    display: inline-block;
    height: 35px;
    vertical-align: top;
}
.page-product .widget-likeus .facebook-like-us,
.product-info-view-container .widget-likeus .facebook-like-us {
    width: 72px;
}
.page-product .widget-likeus .twitter-like-us,
.product-info-view-container .widget-likeus .twitter-like-us {
    width: 62px;
}
.page-product .widget-likeus .tell-friend,
.product-info-view-container .widget-likeus .tell-friend {
    background  : url("/wc/7.0.0/images/site/tell_friend.png") no-repeat scroll left top;
    cursor      : pointer;
    height      : 17px;
    overflow    : hidden;
    text-indent : -200px;
    width       : 23px;
}
.product-downloadable-spec {
    background: none repeat scroll 0 0 #f9f9f9;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    font-size: 15px;
    padding: 5px 10px;
    display: inline-block;
}
.widget-socialMediaShare .social-media-share-row {
    display    : flex;
    align-items: center;
    gap        : 10px;
}
.widget-socialMediaShare .social-media-share-label {
    font-size  : 13px;
    font-weight: 500;
    color      : #3c3c3c;
}

/* Rich social-media share bar (multi-platform SVG icons + optional title).
   Mirrors the blog share bar; scoped to .widget-socialMediaShare. */
/* HWC-4750: standard 20px gap above the share bar — it otherwise butts straight against the action
   bundle (quantity / Add To Cart / Buy now / wishlist / compare), which are adjacent .product-widget
   siblings. 20px matches the product page's existing inter-widget rhythm (cf. .widget-productSummary
   padding-bottom). A merchant's own spacing setting still wins: those emit an inline style on the
   widget's #wi-<uuid>. */
.product-widget.widget-socialMediaShare { margin-top: 20px; }
/* align-items is center so the title sits on the icons' centre line. The title's old `margin: 4px 0 0`
   was a manual nudge approximating that against flex-start — it must be 0 now, or the label rides 4px low. */
.widget-socialMediaShare .social-media-share-wrapper { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.widget-socialMediaShare .social-media-share-wrapper .share-title { display: block; white-space: nowrap; margin: 0; font-size: 13px; font-weight: 500; color: #3c3c3c; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a { text-decoration: none; border: 0; width: 32px; height: 32px; padding: 2px; color: #fff; border-radius: 50%; background-color: #000; display: flex; justify-content: center; align-items: center; cursor: pointer; box-sizing: border-box; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a:hover { box-shadow: 0 0 1px 1px rgba(0,0,0,.1); opacity: .9; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a svg { fill: currentColor; width: 26px; height: 26px; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a svg.ico-threads,
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a svg.ico-whatsapp,
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a svg.ico-tiktok { width: 20px; height: 20px; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a svg.ico-twitterx,
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a svg.ico-telegram,
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a svg.ico-mastodon,
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a svg.ico-bluesky { width: 17px; height: 17px; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.facebook-messenger-share-icon { background-color: transparent; width: auto; height: auto; padding: 0; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.facebook-messenger-share-icon svg { width: 31px; height: 31px; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.facebook-messenger-share-icon path { fill: #448aff !important; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.facebook-share-icon { background-color: #3B5998; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.twitter-share-icon,
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.tiktok-share-icon,
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.threads-share-icon { background-color: #000; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.linkedin-share-icon { background: #007bb5; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.email-share-icon { background: #008DF2; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.snapchat-share-icon { background: #fffc01; color: #000; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.pinterest-share-icon { background: #cb2027; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.telegram-share-icon { background: #0088cc; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.reddit-share-icon { background: #ff5700; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.instagram-share-icon { background: linear-gradient(115deg, #f9ce34, #ee2a7b, #6228d7); }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.youtube-share-icon { background: #bb0000; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.whatsapp-share-icon { background: #25D366; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.bluesky-share-icon { background: #41ADFF; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.mastodon-share-icon { background: #6364FF; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.copy-link-icon { background: #000; color: #fff; }
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.copy-link-icon svg,
.widget-socialMediaShare .social-media-share-wrapper .social-media-share-bar a.copy-link-icon path { fill: #fff; width: 18px; height: 18px; }
.widget-socialMediaShare .social-media-wrapper {
    display    : flex;
    align-items: center;
    gap        : 6px;
}
.widget-socialMediaShare .social-media-wrapper span {
    background-image: url("/wc/7.0.0/images/site/social-media-share.png");
    background-repeat: no-repeat;
    height: 30px;
    width: 30px;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid #3c3c3c;
    flex-shrink: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.widget-socialMediaShare .social-media-wrapper span:hover {
    background-color: #f0f0f0;
}
.widget-socialMediaShare .social-media-wrapper span.email {
    background-position: 3px center;
}
.widget-socialMediaShare .social-media-wrapper span.facebook {
    background-position: -21px center;
}
.widget-socialMediaShare .social-media-wrapper span.twitter {
    background-position: -45px center;
}
.widget-socialMediaShare .social-media-wrapper span.google-plus {
    background-position: -69px center;
}
.widget-socialMediaShare .social-media-wrapper span.linkedin {
    background-position: -93px center;
}
.widget-socialMediaShare .social-media-wrapper span.pinterest {
    background-position: -117px center;
}
.widget-socialMediaShare .social-media-wrapper span.messenger {
    background-position: -140px center;
}

/*saba add*/
.image-popup-mask {
    background-color : #999999;
    /* @alternate */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    /* @alternate */ -moz-opacity: 50;
    /* @alternate */ -khtml-opacity: 50;
    opacity          : 0.5;
    left             : 0;
    top              : 0;
    right            : 0;
    bottom           : 0;
}
.image-popup-container {
    text-align : center;
    z-index    : 999;
}

.image-popup-container .image-wrapper {
    padding: 4px 4px 10px 4px;
    border: 5px solid #ffffff;
    background-color: #FFFFFF;
    vertical-align: middle;
    z-index: 1000;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
}

.image-popup-container .navigator {
    position         : absolute;
    background-image : url("/wc/7.0.0/images/site/popup-image-navigators.png");
    cursor           : pointer;
}

/* The three controls used to be cut from one sprite (popup-image-navigators.png): a close button hung off
   the corner and two half-discs clamped to the outer edges. They are drawn from their own icon set now -
   images/site/popup-close.svg, popup-arrow-prev.svg, popup-arrow-next.svg - round-capped strokes that stay
   crisp at any density and carry no font dependency (the Font Awesome cross and chevrons they replace had
   to match a glyph's metrics rather than the page's).
   Each button names its own background-image, which is what retires the sprite: these selectors are
   (0,3,0) and the shared `.image-popup-container .navigator` that sets it is (0,2,0), so the sprite loses
   wherever that rule is declared - including the copy in the product-quick-view plugin, which is identical
   to this block. Keep the two in step. */
.image-popup-container .navigator.close-button,
.image-popup-container .navigator.left-button,
.image-popup-container .navigator.right-button {
    background-repeat   : no-repeat;
    background-position : center;
}

/* The close is a bare mark, not a disc: it sits on the white frame rather than over the photo, so it needs
   no plate to stay legible, and a filled circle there read as a second control competing with the arrows.
   The hover gives it one anyway - a soft neutral wash on a small radius, the ordinary icon-button
   treatment - so there is no doubt the mark is a target. Opacity moves with it, so the single asset
   serves both states. */
.image-popup-container .navigator.close-button {
    height: 30px;
    width: 30px;
    right: 10px;
    top: 10px;
    border-radius: 8px;
    background-image: url("/wc/7.0.0/images/site/popup-close.svg");
    background-size: 17px 17px;
    background-color: rgb(255 255 255);
    opacity: 0.55;
    transition: opacity 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.image-popup-container .navigator.close-button:hover {
    opacity          : 1;
    background-color: rgb(255 255 255);
}

/* The arrows DO keep a plate: they sit over the photograph, where a bare stroke is lost against a light
   image. Same round-capped drawing as the close, in white, on a disc that deepens on hover. */
.image-popup-container .navigator.left-button,
.image-popup-container .navigator.right-button {
    width            : 44px;
    height           : 44px;
    top              : 50%;
    margin-top       : -22px;
    border-radius    : 50%;
    background-size  : 20px 20px;
    background-color : rgba(0, 0, 0, 0.42);
    transition       : background-color 0.15s ease-in-out;
}

.image-popup-container .navigator.left-button {
    left             : 14px;
    background-image : url("/wc/7.0.0/images/site/popup-arrow-prev.svg");
}

.image-popup-container .navigator.right-button {
    right            : 14px;
    background-image : url("/wc/7.0.0/images/site/popup-arrow-next.svg");
}

.image-popup-container .navigator.left-button:hover,
.image-popup-container .navigator.right-button:hover {
    background-color : rgba(0, 0, 0, 0.72);
}

.image-popup-container > span {
    position       : relative;
    vertical-align : middle;
    display: inline-block;
}

/* The spinner is the fourth member of the popup's icon set (images/site/popup-loader.svg): a light track
   with one dark arc riding it, in the same round-capped stroke as the close and the arrows. It replaces
   loader.gif, whose two revolving arrows read as a RELOAD control rather than "this is loading", and which
   could not scale or recolour.
   The rotation is CSS, so the file itself is static - and it reuses `loading-spinner-animation`, already
   declared in site-base.css (site-critical, so it is loaded wherever this popup can open) rather than
   adding a second set of spin keyframes. 44px, down from the gif's 64px, with the centring margins halved
   to match. */
.image-popup-container.loading .image-loader {
    background-image    : url("/wc/7.0.0/images/site/popup-loader.svg");
    background-repeat   : no-repeat;
    background-position : center;
    background-size     : 44px 44px;
    height              : 44px;
    width               : 44px;
    left                : 50%;
    top                 : 50%;
    margin-left         : -22px;
    margin-top          : -22px;
    position            : absolute;
    animation           : loading-spinner-animation 0.75s linear infinite;
}

/* A spinner is exactly the kind of motion this setting is meant to stop; the icon still reads as a
   loading state standing still. */
@media (prefers-reduced-motion: reduce) {
    .image-popup-container.loading .image-loader {
        animation : none;
    }
}
/*variation design*/
.widget-variation {
    padding-bottom: 20px;
}
.variation-container .variation-type {
    padding-bottom : 5px;
}
.variation-container .variation-type label.type-label {
    display: block;
    font-weight : bold;
    margin-bottom: 5px;
}
.variation-container .variation-type ul.options {
    list-style: none;
    padding: 0;
    margin: 0;
}
.variation-container .variation-type ul.options .option-cell {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px 5px 0;
    cursor: pointer;
}
.variation-container .variation-type.color .variation-value {
    border: 1px solid #ccc;
    display: inline-block;
    height: 20px;
    width: 20px;
    vertical-align: middle;
}
.variation-container .variation-type.text .option-cell .variation-value {
    border: 1px solid #ccc;
    padding: 4px 10px;
    display: inline-block;
    font-size: 13px;
    line-height: 1.4;
}
.variation-container .variation-type.text .option-cell.selected .variation-value {
    border-color: #333;
    background-color: #333;
    color: #fff;
}
.variation-container .variation-type.text .option-cell:hover .variation-value {
    border-color: #555;
}
.variation-container .variation-type.image .variation-value {
    display        : inline-block;
    vertical-align : middle;
}
.variation-container .chosen-container {
    margin-left: 5px;
    padding-right: 0;
}
.variation-type.image.select .product-variation-select {
    width: 50px;
}
.variation-type.image.select .chosen-single .variation-value img {
    max-height: 20px;
}
.variation-type.image .variation-value img {
    max-height: 50px;
    max-width: 50px;
}
.variation-type.color.select .chosen-single .variation-value {
    vertical-align: -3px;
}
/* HWC-4750: solid dark ring for the selected swatch, replacing a dotted 2px green border that
   clashed with the rest of the product page. Text options never showed it — the
   .variation-type.text rule below re-declares border and wins on source order — so this was only
   ever visible on colour/image swatches, where it now matches the text pill's selected #333. */
.variation-container .option-cell.selected .variation-value {
    border: 2px solid #333;
    padding: 1px;
}
.variation-container .variation-type.text .option-cell.selected .variation-value {
    border: 1px solid #333;
    padding: 4px 10px;
}
.variation-container .option-cell .variation-value {
    cursor: pointer;
}
/*combined product design*/

.included-products-container .title {
    font-size: 22px;
    margin-bottom: 15px;
    font-weight: 500;
}
.widget-combinedProduct .included-products-selection-table-wrapper {
    overflow-y: auto;
}
.widget-combinedProduct table {
    min-width:800px;
}
.widget-combinedProduct table th {
    background-color: #f2f2f2;
    border-bottom: 2px #e8e8e8 solid;
    padding: 10px;
}
.widget-combinedProduct table tr:nth-child(odd) {
    background-color: #f5f5f5;
    border-bottom: 1px #eaeaea solid;
}
.widget-combinedProduct table td {
    text-align: center;
    padding: 15px;
}
.included-products-container .info-row a img {
    max-width: 100%;
}
.included-products-container .info-row {
    font-size: 14px;
    padding: 2px 0;
    overflow: visible;
}
.included-products-container .info-row a {
    font-size: 16px;
    font-weight: 500;
}
.included-products-container .info-row a:hover {
    color: #999;
}
.widget-combinedProduct table td .individual-price {
    font-size: 24px;
    font-weight: 500;
}
.widget-combinedProduct table td .quantity {
    font-size: 16px;
    padding: 10px;
}
.widget-combinedProduct .included-quantity-selector {
    min-height: 38px;
    border: 1px solid #d5d5d5;
    padding: 4px 10px;
    box-sizing: border-box;
}
.widget-currency .form-row label {
    width: auto;
    display: inline-block;
    vertical-align: middle;
}
.widget-currency .form-row select {
    min-height: 38px;
    border: 1px solid #d5d5d5;
    padding: 4px 10px;
    box-sizing: border-box;
    vertical-align: middle;
}
.combind-product-variation .variation-type label.type-label {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}
.combind-product-variation.variation-container .chosen-container {
    min-width: inherit;
}
.combind-product-variation .chosen-container-single .chosen-single {
    height: 33px;
}
.combind-product-variation .chosen-container-single .chosen-single span {
    line-height: normal;
    margin-right: 13px;
}
/*matrix view*/
/* HWC-4750: standard spacing/height for the combination matrix. It previously sat flush against the
   price block above and the accordion below with 5px cells, which read as cramped. border-collapse
   keeps the 1px grid single-width now that cells are larger, and #E6E6E6 matches the border colour
   used by the rest of the product page (thumbnails, share divider, cards). The ✓/✗ sprites and the
   selected cell's green fill are deliberately untouched: matrix-available-selected.png is a WHITE
   check drawn for that green background, so lightening the fill would make it invisible. */
.variation-container table.matrix {
    width          : auto;
    margin         : 16px 0;
    border-collapse: collapse;
}
.variation-container table.matrix th,
.variation-container table.matrix td {
    border  : 1px solid #E6E6E6;
    padding : 10px;
    height  : 40px;
    box-sizing: border-box;
}
.variation-container table.matrix td {
    background-image: url("/wc/7.0.0/images/site/matrix-not-available.png");
    background-position: center center;
    background-repeat: no-repeat;
}
.variation-container table.matrix td.available.selected {
    background-color: #06be0f;
    background-image: url("/wc/7.0.0/images/site/matrix-available-selected.png");
    background-position: center center;
    background-repeat: no-repeat;
}
.variation-container table.matrix td.available {
    background-image: url("/wc/7.0.0/images/site/matrix-available.png");
    background-position: center center;
    background-repeat: no-repeat;
}
.variation-container table.matrix th {
    min-width  : 48px;
    font-weight: 500;
    color      : #3c3c3c;
    background : #FAFBFC;
}
.widget-variation .text-variation-type-option-wrapper .variation-type.text ul li.out-of-stock {
    background-image: url("/wc/7.0.0/images/site/matrix-not-available.png") !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    cursor: not-allowed !important;
}
.widget-variation .text-variation-type-option-wrapper .variation-type.text ul li.out-of-stock  span {
    font-size: 0;
}
.widget-variation .text-variation-type-option-wrapper .variation-type.text ul li.out-of-stock:hover {
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/*Product Tag*/

.widget-productTag .accordion-item {
    border: none;
    padding: 10px 0;
    margin: 0;
    /* @alternate */ display: -webkit-box;
    /* @alternate */ display: -ms-flexbox;
    display: flex;
    /* @alternate */ -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 5px;
}

.widget-productTag .accordion-panel {
    padding: 0;
}

.widget-productTag .accordion-panel .label-bar {
    /* @alternate */ display: -webkit-box;
    /* @alternate */ display: -ms-flexbox;
    display: flex;
    /* @alternate */ -webkit-box-align: center;
    /* @alternate */ -ms-flex-align: center;
    align-items: center;
    gap: 0 20px;
    border-bottom: 1px #ddd solid;
    padding: 8px 0;
    cursor: pointer;
}

.widget-productTag .accordion-panel .label-bar .title {
    font-size: 14px;
    font-weight: 500;
    /* @alternate */ -webkit-box-flex: 1;
    /* @alternate */  -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.widget-productTag .accordion-panel .label-bar .toggle-icon {
    height: 16px;
    width: 16px;
    background: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath%20d%3D%22M7.25%2014.75V8.74995H1.25V7.25H7.25V1.25H8.74995V7.25H14.75V8.74995H8.74995V14.75H7.25Z%22%20fill%3D%22black%22%2F%3E %3C%2Fsvg%3E") no-repeat center;
    /* @alternate */ -webkit-box-ordinal-group: 2;
    /* @alternate */ -ms-flex-order: 1;
    order: 1;
    /* @alternate */ -webkit-box-flex: 0;
    /* @alternate */ -ms-flex: 0 0 16px;
    flex: 0 0 16px;
}

.widget-productTag .accordion-panel .label-bar.expanded .toggle-icon {
    background: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath%20d%3D%22M1%208.75V7.25H15V8.75H1Z%22%20fill%3D%22black%22%2F%3E %3C%2Fsvg%3E") no-repeat center;
}

.widget-productTag .accordion-item .title {
    padding: 6px 12px;
    background-color: #e7e7e7;
}
.widget-productTag .accordion-item .tag-heading {
    width: 100%;
    padding-bottom: 5px;
    font-size: 14px;
}

.product-widget.widget-addCart .add-to-cart-button.button {
    font-weight: 600;
    border-radius: 6px;
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
}
/* Brand colour only on the ENABLED button. When Sold Out adds `.disabled`, this (and the
 * hover) stop matching, so the shared `.button.disabled` grey (site-base.css) takes over —
 * no duplicated disabled styles. Layout above stays unconditional so the greyed button
 * keeps the same size/shape. */
.product-widget.widget-addCart .add-to-cart-button.button:not(.disabled) {
    background-color: #008DF2;
    border-color: #008DF2;
    color: #ffffff;
}
.product-widget.widget-addCart .add-to-cart-button.button:not(.disabled):hover {
    background-color: #0078CE;
    border-color: #0078CE;
    color: #ffffff;
}

.product-widget.widget-addCart .button.add-to-wish-list,
.product-widget.widget-addCart .add-to-compare-button.button {
    background-color: #ffffff;
    border-color: #008DF2;
    color: #008DF2;
    border-radius: 6px;
    height: 44px;
    width: 44px;
    min-width: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.product-widget.widget-addCart .button.add-to-wish-list:after,
.product-widget.widget-addCart .add-to-compare-button.button:after {
    color: #008DF2;
}
.product-widget.widget-addCart .button.add-to-wish-list:hover,
.product-widget.widget-addCart .add-to-compare-button.button:hover {
    background-color: #008DF2;
    border-color: #008DF2;
}
.product-widget.widget-addCart .button.add-to-wish-list:hover:after,
.product-widget.widget-addCart .add-to-compare-button.button:hover:after {
    color: #ffffff;
}

.product-widget.widget-addCart .add-to-gift-registry.button {
    background-color: #ffffff;
    border: 1px solid #008DF2;
    color: #008DF2;
    font-weight: 500;
    border-radius: 6px;
    padding: 11px 13px;
    box-sizing: border-box;
    vertical-align: middle;
    white-space: nowrap;
}
.product-widget.widget-addCart .add-to-gift-registry.button:hover {
    background-color: #008DF2;
    border-color: #008DF2;
    color: #ffffff;
}

.product-widget.widget-productReview {
    margin-bottom: 20px;
}

/* Scroller arrow with nowhere to go — toggled by product.js syncThumbScrollerState(). Scoped to
   the thumb wrapper so other scrollers keep their look until opted in. */
.multi-image-scroll-wrapper .scroll-navigator.scroll-navigator-disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

/* Lightbox: pin the container to the viewport and centre the frame with flex, overriding the inline
   left/top/width/height POPUP writes. Position then never changes between images, so the frame only
   expands and shrinks about its own centre — no travelling, and nothing to reposition. */
.image-popup-container.popup {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-popup-container.popup .image-popup-mask {
    position: fixed;
}
/* product.js sets an explicit px width/height here from the decoded dimensions: .image-wrapper is
   inline-flex (shrink-to-fit) and `auto` cannot be transitioned, so the image's own box is what
   animates and the frame follows it. object-fit keeps the picture undistorted while the box
   interpolates between two ratios. */
.image-popup-container .popup-image {
    object-fit: contain;
}
.image-popup-container.nav-smooth .popup-image {
    transition: width 0.28s ease, height 0.28s ease, opacity 0.18s ease;
}
/* Held from the src swap until the box has been re-measured, so the new image is never painted at
   the previous image's width. */
.image-popup-container.img-swapping .popup-image {
    opacity: 0;
}