/* 1. RESET: Remove any previous custom checkmarks from text boxes */
.variable-item.selected::before,
.variable-item.selected::after {
    display: none !important;
    content: none !important;
}

/* 2. THE BOX: Set the border and allow the circle to sit on the edge */
.variable-item.selected {
    border: 2px solid #000 !important;
    position: relative !important;
    overflow: visible !important; /* This lets the circle pop out of the corner */
}

/* 3. THE CIRCLE CHECKMARK: Top right corner of Shape and Size only */
.variable-item.selected::after {
    content: "" !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    /* Position */
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    
    /* Size & Shape */
    width: 18px !important;
    height: 18px !important;
    background-color: #000 !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
    
    /* The Checkmark Icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") !important;
    background-size: 10px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    
    /* Depth */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    z-index: 99 !important;
}

/* 4. TEXT CENTER: Ensure 'Square' or '10 ft' stays centered */
.variable-item-contents {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
span.wpc-term-count-value::before {
    content: "(";
}

/* Forces the main image container to fill 100% of the gallery width */
.woocommerce-product-gallery .flex-viewport {
    width: 100% !important;
}

/* Ensures the image inside scales to fill the space */
.woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain; /* Keeps the umbrella from looking stretched */
}

/* Optional: Removes the margin so it aligns perfectly with the thumbnails */
.woocommerce-product-gallery .flex-control-nav {
    padding: 0 !important;
    margin-top: 15px;
}
.woocommerce .elementor-3518 .elementor-element.elementor-element-104a748 form.cart .variations {
    width: 70%!IMPORTANT;
    margin-bottom: 0px!IMPORTANT;
}
span.wpc-term-count-value::after {
    content: ")";
}

legend.wc-pao-addon-name.wc-pao-legend{     padding: 0px!important;
    margin-left: 0px!important;
}
/* Prevent FOUC: hide mega menu descriptions immediately */
.mega-menu-description,
.mega-menu-item-description,
.menu-item-description,
.mega-description {
    display: none !important;
}


/* Desktop styles */
.single-product div.product p.price {
    margin: 50px 0 0 0 !important;
}

.price-note {
    font-size: 0.6em !important;
}

/* Mobile styles */
@media (max-width: 768px) {
    .single-product div.product p.price {
        margin: 0 0 0 0 !important; /* reduced margin for mobile */
    }

    .price-note {
        font-size: 0.5em !important; /* slightly smaller font for readability */
    }
}

/* Hide disabled variation buttons (Woo Variation Swatches) 
.variations .variable-item.disabled {
    display: none !important;
}
*/

/*change the color of radio buttons in checkout pages*/
.star-rating span:before, .quantity .plus, .quantity .minus, p.stars a:hover:after, p.stars a:after, .star-rating span:before, #payment .payment_methods li input[type=radio]:first-child:checked+label:before {
    color: #0693e3;
}
.wc-pao-addon-image-swatch img {
    max-height: 99px!important;
}

.umyoutube-video {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.woocommerce-store-notice.demo_store {
background-color:#26A293;
text-align: center;
font-weight: bold;
font-family: "Montserrat", Sans-serif;
font-size: .9em;
}

/*trustpilot zindext fix for dropdown
div#trustpilot-widget-trustbox-0-wrapper {
    z-index: 1!important;
}*/
/*remove related posts from detail pages*/
#mega-menu-wrap-primary #mega-menu-primary {
z-index: 1005;
}

span.woo-selected-variation-item-name {
    font-size: 14px;
    font-weight: 500;
    color: #23A455;
}
#jp-relatedposts {
    display: none!important;
}

/*move cart button*/

#top .woocommerce-cart .actions .wc-proceed-to-checkout {
   /* float: right;*/
}

#top .woocommerce-cart .actions .button[name="update_cart"] {
    /*float: none;*/
}
.price del+ins {
    margin-left: 0px;
}
.woocommerce-info, .woocommerce-noreviews, p.no-comments {
    background-color: rgba(22,101,107,0.82);
}

/*cart thubmnail size*/
table.cart .product-thumbnail img {
 max-width: 250px;
}
.free-shipping{
		padding:25px;
	} 
.woo-variation-swatches-stylesheet-enabled .variable-items-wrapper {
    padding: 12px 0 10px 0;
}
span.swatch.swatch-image.swatch-none {
    display: none;
}
/*remove text from side bar cart*/

dt.variation-Selectacanopycolor {
      display: none;
}
dt.variation-BaseOptions {
    display: none;
}
dt.variation-Selectabaseoption {
    display: none;
}
header.entry-header {
    text-align: center;
}
header#masthead {
    margin-bottom: 1px;
}
li.sf-pro-search {
    margin-left: 2px;
}

/*footer h3 font size*/
.widget-title {
    font-size: 18px!important;
}
/*constant contact extra text remove*/


/*secondary nav styling*/
.storefront-pro-active nav.secondary-navigation {
    background-color: #bbc4cb;
    padding: 5px 5px;
}
/*Hide Individual Product Page Sale Tag
span.onsale {
   display: none;
 }
*/
/*remove old product tabs*/
div#infinite-handle {
    display: none;
}

/*styles for desktop only*/
@media screen and (min-width: 768px) {
site-header {
border-bottom: 2px solid rgba(255, 255, 255, .9);
border-top: 2px solid rgba(255, 255, 255, .9);
  }
}
/*styles for mobile only*/
@media only screen and (max-width: 768px){
h1.product_title.entry-title {
    font-size: 1.1em;
    font-weight: bold;
}
}
/*mini cart style*/
#site-navigation.main-navigation ul li:hover a {
    background: #f3f3f3;
}
.storefront-pro-active .site-header-cart .widget_shopping_cart *:not(.button) {
    color: #fff;
}

/*main buttons nav adjustment*/
.main-navigation ul.nav-menu > li {
  border: 1px solid rgba(255, 255, 255, .1);
  background: #376d7c;
} #site-navigation.main-navigation ul li:hover a{
background-color:rgba(0,0,0,.7);
}


.social-info a {
  color: #fff;
}

.overlay h1 {
  font-size: 3em !important;
  text-shadow: rgba(0, 0, 0, 0.4) 0px 4px 5px;
letter-spacing: 3px;
}


.woocommerce div.product.elementor form.cart table.variations td.label {
    margin-top: -21px;
}

/*product thumbnail size fix descktop only*/
@media only screen and (min-width : 1280px){
.storefront-full-width-content.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
 width: 19%;
 margin-right: 5px;
	}}
@media (max-width: 768px){
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
    width: 66px;
   margin-right: 3px;
}}

/*product price adding text before it*/
.price del{
display: inherit;
margin:0px;
}
.single_variation .price del+ins::before {
content: "Your Price: ";
font-weight: bold;
font-size:1.3em;
	color:red;
}
.single_variation .price del::before {
content: "List Price: ";
margin: .327em;
font-weight: bold;
}


/*.price:before{
content:"From: "
}*/
/*green boarder around selected variations*/
.woo-variation-swatches-stylesheet-enabled .variable-items-wrapper .variable-item:not(.radio-variable-item).selected, .woo-variation-swatches-stylesheet-enabled .variable-items-wrapper .variable-item:not(.radio-variable-item).selected:hover {
    -webkit-box-shadow: 0 0 0 4px #3bafa0;
    box-shadow: 0 0 0 4px #3bafa0;
}
/*footer*/
.site-info{
text-align:center;
}
/*product tab styling*/

.storefront-pro-active .woocommerce-tabs ul.tabs.wc-tabs li{
padding-right:20px;
padding-left:20px;
margin-right:0px;
margin-left:-20px;
}
li#tab-title-description.active{
background-color:#f2f2f2;
}
div#tab-hurricane-side-wind-assembly-instructions {
    width: 100%;
}
div#tab-sirocco-assembly-instructions {
    width: 100%;
}
div#tab-assembly-instructions {
    width: 100%;
}