/*********MOBILE*********/

/*VARIANT BUTTON CSS -- TEMP*/
    .vbutton-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .vbutton-group.active {
        display: flex;
    }

    .vbutton-row {
        display: flex;
        width: 100%;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 0 0 0 1rem;
        border: none;
        border-radius: 8px;
        background-color: #ebebe6;
        color: #656564;
        position: relative;
    }

.vbutton-wrapper {
    display: flex;
}

    .expandable-content-container {
        flex-basis: 100%;
        width: 100%;
        overflow: hidden;
        transform-origin: top;
        transform: scale(0);
        transition: max-height 0.4s ease, opacity 0.4s ease;
        max-height: 0;
    }

    .expandable-content-container.open {
        max-height: 500px;
        transform: scale(1);
    }

    .expandable-content-container::before {
        content: '';
        display: block;
        width: 94%; /*Changed width from 100% to 94% to resolve divider formartting on 07/28/2025. DC*/
        height: 1px;
        background-color: #949494;
        margin: 2rem auto 1.5rem 0;
    }

    .expandable-content-container ul {
        padding-left: 5px;
        margin-left: 0;
        list-style: none;
        text-align: left;
    }

    .expandable-content-container li:not(:first-child) {
        padding-top: 16px;
    }

    .expandable-content-container li {
        font-size: 14px;
        line-height: 24px;
        font-weight: 400;
        font-family: "Simula";
        color: #6A6A6A;
        padding-right: 10px; /*Added on 07/28/2025 to adjust for mobile formatting. - DC*/
        display: grid;
        grid-template-columns: auto 1fr;
    }

    .expandable-content-container li img {
		padding-right: 12px;
		margin-top: -2px;
    }

    .ss-row {
        min-height: 100px;
        align-items: center;
    }

    body.dark-theme .vbutton-row {
        background-color: #3a3a41;
        color: #f1f1f1;
    }

/* .vbutton-row > div:not(.vbutton-ui-fake-radio) {
	min-height: 42px;
  justify-content: space-between;
} */

    .vbutton-left {
        display: flex;
        flex-direction: column;
        text-align: left;
    }

/*Adding margin back to vbutton icon to better align with Figma design. - DC*/
@media (min-width: 500px){
    .vbutton-left {
        margin-left: 10px;
    }
    
    #ssBtnQuiz > div.vbutton-left {
        margin-right: 5px;
    }
    
    #ssBtnLabs .ss-icon,
    #ssBtnPack .ss-icon {
        width: 38px;
    }
}

    .vbutton-ui-fake-radio {    
	   display: flex;
	   flex-shrink: 0;
       width: 22px;
       height: 22px;
	   background-color: transparent;
       border: 1px solid var(--color-gray-switch);
       border-radius: 100%;
       margin-right: .5rem;
       position: relative;
       justify-content: center;
       align-items: center;  
	   transition: all .3s;
    }
    
    .vbutton-ui-fake-radio:before {
        display: none;
        content: "";
        width: 14px;
        height: 14px;
        transform: scale(0);
        transition: all .3s;
        transform-origin: center;
        background-image: url(/wp-content/themes/joiandblokes/images/nav-logo-joi-and-blokes.svg);
        background-size: contain;
        background-repeat: no-repeat;
    }

/* .mbm_vs_option.selected .vbutton-ui-fake-radio {
	border-color: #222;
	background-color: #222;
}
.mbm_vs_option.selected .vbutton-ui-fake-radio:before {
	transform: scale(1) rotate(45deg);
} */

    /*.vbutton-right {
	   margin-left: 1rem;
    }*/

    .vbutton-radio {
       margin-right: 1rem;
    }

    .vbutton-description {
        font-size: 0.8rem;
        color: #656564;
        display: block;
        padding-right:15px;
    }

    button[id^=ssBtn] .vbutton-title {
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0px;
        color: #363636;
    }

    button[id^=ssBtn] .vbutton-description {
        font-weight: 400;
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 0px;
        color: #737373;
    }

    body.dark-theme .vbutton-description {
        color: #f1f1f1;
    }

    body.dark-theme .vbutton-title {
        color: #FFFFFF;
    }

    body.dark-theme .expandable-content-container li {
        color: #f1f1f1;
    }

    .vbutton-right {
        text-align: left;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        margin-left: 1rem; /*Changed from 2rem to 1rem on 07/28/2025 to adjust for mobile formatting. - DC*/
    }

    .vbutton-price-container {
	   display: flex;
	   gap: .25rem;
    }

    .vbutton-price {
        font-size: 0.8rem;
        font-weight: revert-layer;
        color: #333;
        line-height: 1.1;
    }

/* .vbutton-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background-color: #E4EFEB;
	  border: 1px solid #D4E5DE;
    color: #176F4F;
    border-radius: 5px;
    font-size: 0.76rem;
    text-transform: capitalize;
    width: min-content;
    white-space: nowrap;
    margin-left: auto;
} */

    .badge {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 15px;
        right: 5%;
        background-color: #176F4F;
        color: #FFFFFF;
        height: 20px;
        border-radius: 4px;
        border: 1px solid;
        font-size: 10px;
        line-height: 18px;
        font-weight: 400;
        padding: 0 11px;
		border:0;
    }

/* .mbm_vs_option.selected .vbutton-badge {
	 background-color: #dae9e4;
} */

    .vbutton-footer {
        text-align: center;
        margin-top: 2rem;
    }

    body.dark-theme .vbutton-row.selected {
        border: 1px solid #d2d2d2;
    }

    .vbutton-row.selected {
        border: 1px solid #949494; /*Changed border size to 1px on 07/22/2025. - DC*/
		flex-wrap: wrap;
		padding-top: 24px;
    }

    .ss-icon {
        width: 25px;
        height:auto;
    }

    /*#ssBtnLabs .ss-icon,
    #ssBtnPack .ss-icon {
        width: 30px;
}*/

    body.dark-theme .ss-icon {
        filter: invert(1);
    }

    #single_product_cart_add {
        border-radius: 50px;
        background-color: #363636;
        color: #f9f4f2;
    }
    
#single_product_cart_add:hover {
    background-color: #f9f4f2;
    color: #363636;
    transition: .4s ease;
}

    body.dark-theme #single_product_cart_add {
        background-color: #ffffff;
        color: #1d1f21;
    }

/* override */
    .single-product .single-product-right {
        border: none !important;
        background: none !important;
    }

/* styling for hardcoded footer - temp, should become ACF eventaully */

    .three-options-container {
        width: 100%;
        height: auto; /*Changed on 07/23/2025 from fixed height of 2230px to auto to resolve formatting issues on mobile. - DC*/
        background-color: #EEEEEE;
        padding-bottom: 150px; /*Added on 07/23/2025 to adjust formatting and enhance design. - DC*/
    }

    .option-section {
		max-width: 1080px;
        width: 90%;
        margin: 100px auto 0;
    }

    .image-container {
        position: relative;
        width: 100%;
        height: auto; /*Changed on 07/23/2025 from 540px to auto to resolve formatting on mobile. - DC*/
        /*border-radius: 10px;*/ /*Removed on 07/24/2025 as style from .smart-supp-img rendered this obsolete. - DC*/
        /*background-color: #E0DBD7;*/
    }

    .smart-supp-img {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    .info-container {
        width: 97%; /*Changed from 100% to 97% on 07/28/2025 to adjust for mobile formatting. - DC*/
        height: auto;
        margin: auto; /*Added on 07/28/2025 to adjust for mobile formatting. - DC*/
        /*max-height: 540px;*/ /*Removed on 07/22/2025 to resolve formatting issues on mobile. - DC*/
        /*margin-left: 70px;*/ /*Removed 07/24/2025 to resolve formatting on mobile. - DC*/
    }

    .options-info-title {
        font-family: 'Simula';
        font-weight: 400;
        font-size: 24px;
        line-height: 32px;
        letter-spacing: 0px;
        color: #363636 !important;
    }

    .info-subtitle {
        font-family: 'Basis Grotesque';
        font-weight: 700;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0px;
    }

    .info-desc {
        font-family: 'Basis Grotesque';
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0px;
        color: #535353;
        padding-bottom: 2rem;
        border-bottom: 1px solid #BBBBBB;
        margin-bottom: 0px;
    }

    .info-price {
        font-family: 'Basis Grotesque';
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0px;
        color: #737373;
    }

    .info-list-item {
        font-family: 'Simula';
        font-weight: 400;
        font-style: italic;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0px;
        color: #535353;
        border-bottom: 1px solid #BBBBBB;
        padding-bottom: 1rem;
    }

    .options-title {
        font-weight: 400;
        font-size: 32px;
        line-height: 40px;
        letter-spacing: 0px;
        margin-top: 150px; /*review mockup to determine if this is intentional. - DC*/
        color: #363636;
        text-align: center;
    }

    .options-subtitle {
        font-weight: 400;
        font-size: 18px;
        line-height: 26px;
        letter-spacing: 0px;
        margin-top: 24px;
        color: #535353;
        text-align: center; /*Added on 07/23/2025 to refine mobile formatting. - DC*/
    }

    .header-section {
        width: 100%;
        height: auto; /*Changed height from 90px to auto to address formatting on mobile on 07/23/2025. - DC*/
        /*margin-bottom: 140px;*/ /*Removed on 07/23/2025 to address formatting. - DC*/
    }

    .footer-badge {
        position: absolute;
        top: 24px;
        right: 25px;
        background-color: #176F4F;
        border: 1px solid #176F4F;
        border-radius: 4px;
        padding: 6px 11px;
        color: #FFFFFF; /*Added on 07/24/2025 to align with Figma design. - DC*/
        font-size: 10px; /*Added on 07/24/2025 to align with Figma design. - DC*/
        line-height: 18px; /*Added on 07/24/2025 to align with Figma design. - DC*/
    }

    .options-get-started-btn,
    a.options-get-started-btn {
        width: 100%;
        border-radius: 140px;
        border: 1px solid #737373;
        padding: 16px 51px;
        background-color: #363636;
        color: #FFFEF2;
        display: flex;
        justify-content: center;
        font-weight: 400;
        font-size: 12px;
        line-height: 20px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

.options-get-started-btn,
a.options-get-started-btn:hover {
    background-color: #f9f4f2;
    border: 1px solid #f9f4f2;
    color: #363636;
    transition: .4s ease;
}

    .supp-circle-container {
        width: 100%;
		max-height: 1304px;
		background-color: #FFFFFF;
		padding: 60px 0;
    }
	
    .supp-circle-container > div {
		max-width: 1080px;
	}

    .pill-desc {
        font-weight: 400;
        font-size: 32px;
        line-height: 40px;
        letter-spacing: 0px;
        color: #363636;
        width: 90%;
        text-align: center;
    }

    .pill-desc span {
        color: #949494;
    }

    .double-pill-row {
        width: 100%;
        padding: 0 10px;
    }

@media (min-width: 640px){
    .options-title {
        width: 80%;
    }
    
   /* .image-container,
    .info-container,
    .single-product .single-product-right {
        width: 80%;
        margin: auto;
    }*/
    .image-container {
        float: left;
        width: 51%;
        max-width: 540px;
    }
    
    .info-container {
        width: 46%;
        max-width: 480px;
		margin: unset;
		margin-left: auto;
    }
    
}
@media (max-width: 639px) {
	.option-section {
		margin-top: 30px;
		max-width: 328px;
		margin-left: auto;
		margin-right: auto;
	}
	.header-section {
		max-width: 360px;
		margin-left: auto;
		margin-right: auto;
	}
	.options-title {
		font-size: 20px;
		line-height: 24px;
		margin-top: 30px;
		max-width: 220px;
	}
	.options-subtitle {
		font-size: 12px;
		line-height: 16px;
		margin-top: 12px;
	}
	.expandable-content-container li img {
		padding-right: 5px;
        width: 25px;
        height: 20px;
        margin-top: -4px;
	}
	.expandable-content-container li {
		font-size: 12px;
		line-height: 16px;
	}
	.smart-supp-img {
        margin-bottom: 25px;
	}
	.options-get-started-btn, a.options-get-started-btn {
		margin-bottom: 20px;
	}
	.info-container .vbutton-footer {
		margin-top: 1rem;
	}
	.info-desc,
	.info-subtitle	{
		font-size: 12px;
		line-height: 16px;
	}
	.info-price	{
		font-size: 14px;
		line-height: 20px;
	}
	.info-list-item	{
		font-size: 14px;
		line-height: 16px;
	}
	.options-info-title	{
		font-size: 20px;
		line-height: 24px;
	}
}

@media (min-width: 1200px){
    .single-product .single-product-right,
    .single-product .single-product-left {
        width: 50%;
    }
    
    .expandable-content-container::before {
        width: 96%;
    }
    
    button[id^=ssBtn] .vbutton-title {
        font-size: 18px;
        line-height: 26px;
    }
    
    button[id^=ssBtn] .vbutton-description {
        font-size: 14px;
        line-height: 24px;
    }
    
    .ss-icon {
        width: 30px;
    }
    
    .badge {
        padding: 10px; /*Added 8/1/2025 to adjust spacing on larger screens. Better aligns with Figma design. - DC*/
    }
    
    /*#ssBtnLabs .ss-icon,
    #ssBtnPack .ss-icon {
        width: 32px;
    }*/
    
    .pill-desc {
        width: 40%;
    }
    
    .double-pill-row {
        width: 80%;
    }
	.option-section {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
}

.mbmVariantUi,
.buy_block_disclaimer {
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 499px) {
	.badge {
		margin-top: -5px;
		margin-right: -5px;
	}
}

/* Dark Mode Overwrites - START */
.dark-theme .three-options-container {
	background-color: #363636;
}
.dark-theme .supp-circle-container {
	background-color: #2b2b2b;
}
.dark-theme .options-title {
	color: white;
}
.dark-theme .options-subtitle,
.dark-theme .info-list-item,
.dark-theme .info-price,
.dark-theme .pill-desc span {
	color: #d2d2d2;
}

.dark-theme .info-subtitle,
.dark-theme .info-desc,
.dark-theme .pill-desc {
	color: #eaeaea;
}
.dark-theme .options-info-title {
	color: white !important;
}

.dark-theme .info-list-item,
.dark-theme .info-desc {
	border-bottom-color: #737373;
}
.dark-theme a.options-get-started-btn {
	border: 0;
	background-color: white;
	color: #2b2b2b;
	transition: all .25s;
}
.dark-theme a.options-get-started-btn:hover {
	background-color: #111;
	color: #efefef;
}
/* Dark Mode Overwrites - END */