:root {
--colorPrimary: #2D2D2D;
--colorSecondary: #E6D1DD;
--colorDark: #2D2D2D;
--colorLight: #f5f5f5;
--borderRadius: 0;
--containerWidth: 1240px;
--fontHeading: "Avenir next", Sans-serif;
--fontText: "Montserrat", Sans-serif;
--fontButton: "Avenir next", Sans-serif;
} body .woocommerce a.remove {
color: var(--colorPrimary) !important;
transform: translateX(-5px);
transition: all 0.3s;
}
body .woocommerce a.remove:hover {
color: var(--colorPrimary) !important;
background: rgba(0,0,0,0.0);
transform: translateX(-5px) scale(1.8);
}
.cross-sells h2,
.cart_totals h2,
.woocommerce-checkout h3 {
font-size: 1.5rem !important;
}
.showcoupon,
.showlogin {
width: 100%;
}
@media screen and (min-width: 768px) {
.showcoupon,
.showlogin {
width: auto;
margin-left: 1rem;
}
}
.woocommerce-form-login .form-row-first,
.woocommerce-form-login .form-row-last {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
.woocommerce-form-login .lost_password {
margin-top: 1rem;
} .woocommerce-message .button,
.woocommerce-cart .button,
#place_order,
.woocommerce-checkout .button[name=apply_coupon],
.woocommerce-account .button {
border-radius: var(--borderRadius) !important;
background-color: var(--colorPrimary) !important;
font-family: var(--fontButton);
color: white !important;
letter-spacing: 1.5px;
transition: all .3s;
text-align: center;
line-height: 20px !important;
}
.woocommerce-message .button:hover,
.woocommerce-cart .button:hover,
#place_order:hover,
.woocommerce-checkout .button[name=apply_coupon]:hover,
.woocommerce-account .button:hover {
background-color: var(--colorSecondary) !important;
color: var(--colorPrimary) !important;
transition: all .3s;
} .woocommerce-message, 
.woocommerce-info {
border-top-color: var(--colorPrimary) !important;
display: flex;
flex-wrap: wrap;
border-bottom-left-radius: var(--borderRadius);
border-bottom-right-radius: var(--borderRadius);
}
.woocommerce-message:before,
.woocommerce-info:before{
color: var(--colorPrimary) !important;
}
.single-product .woocommerce-notices-wrapper {
background-color: var(--colorLight);
padding: 0 1rem !important;
}
.single-product .woocommerce-message {
max-width: calc( var(--containerWidth) - 6rem );
padding: 1em 0em 1em 2.3em !important;
margin: 0 auto !important;
display: flex;
align-items: center;
justify-content: space-between;    
flex-direction: row-reverse;
border-top: 0 !important;
background-color: rgba(0,0,0,0.0) !important;
}
.single-product .woocommerce-message:before {
top: 1.3em !important;
left: 0 !important;
}
.single-product .woocommerce-message:after {
display: none !important;
} @media screen and (max-width: 768px) {
.single-product .woocommerce-message,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
padding: 1em 0 1em 0 !important;
justify-content: center;   
flex-direction: column;
}
.single-product .woocommerce-message:before,
.woocommerce-account .woocommerce-message:before,
.woocommerce-account .woocommerce-info:before {
display: none;
}
.single-product .woocommerce-message .button,
.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-info .button {
width: auto;
margin: 0 auto;
order: 1;
margin-top: 1rem;
}
} .shop_table {
border-radius: var(--borderRadius) !important;
border: 0 !important;
border-collapse: separate;
border-spacing: 0 14px;
}
.shop_table thead {
display: none;
}
.shop_table tr {
margin-bottom: 14px;
display: flex !important;
flex-direction: column;
padding-top: 10px;
padding-bottom: 4px;
background-color: var(--colorLight) !important;
border-radius: var(--borderRadius) !important;
}
.shop_table td {
border: 0 !important;
background-color: rgba(0,0,0,0.0) !important;
display: flex !important;
justify-content: space-between;
align-items: center;
max-width: calc(100vw - 32px);
flex-wrap: wrap;
}
.shop_table th {
border: 0 !important;
}
.shop_table td.product-remove {
order: 1;
}
.shop_table td.product-thumbnail {
display: none !important;
}
.shop_table td.product-quantity input {
border: none !important;
}
.shop_table .coupon {
display: flex;
flex-direction: column;
width: 100%;
}
.shop_table .coupon:before {
display: none !important;
}
.shop_table .coupon #coupon_code {
width: 100%;
border: none;
border-radius: var(--borderRadius) !important;
}
.shop_table .coupon .button[name=apply_coupon] {
width: 100% !important;
margin-top: 10px;
border-radius: var(--borderRadius) !important;
background-color: #676767 !important;
}
.shop_table .coupon .button[name=apply_coupon]:hover {
background-color: var(--colorSecondary) !important;
color: var(--colorPrimary) !important;
}
.cross-sells h2 {
margin-bottom: 2rem;
}
.cross-sells .products {
text-align: center;
}
.cross-sells .products img {
max-height: 200px;
object-fit: contain;
}
.cross-sells .products .price {
color: var(--e-global-color-text) !important;
}
.cart_totals th {
border-top: 0 !important;
border-bottom: 0;
background-color: rgba(0,0,0,0.0) !important;
}
@media screen and (min-width: 769px) {
.shop_table tr {
flex-direction: row;
padding: 4px 0;
} 
.shop_table td {
flex: 1;
}
.shop_table td.product-remove {
order: 1;
flex: inherit;
}
.shop_table td.product-thumbnail {
display: block !important;
flex: 1.5;
}
.shop_table td.product-thumbnail a {
height: 100%;
display: flex;
}
.shop_table td.product-thumbnail img {
width: 120px !important;
background-color: white;
padding: 10px;
max-height: 120px;
object-fit: contain;
}
.shop_table td.product-name {
flex: 1.5;
}
.shop_table tr:not(.cart_item) {
display: flex !important;
}
.shop_table .coupon {
flex-direction: row;
width: calc((100% / 3) * 2 - 5px);
max-width: 500px;
}
.shop_table .coupon #coupon_code {
margin-right: 5px;
}
.shop_table .coupon .button[name=apply_coupon]  {
margin-left: 5px;
margin-top: 0
}
.shop_table .button[name=update_cart] {
width: calc((100% / 3) * 1 - 5px);
height: 100%;
margin-left: 10px;
max-width: 250px;
}
} .checkout_coupon {
display: flex;
flex-direction: column;
max-width: 500px;
}
.checkout_coupon .form-row,
.checkout_coupon .form-row .button {
width: 100% !important;
}
.checkout_coupon #coupon_code {
height: 100% !important;
}
.woocommerce form .form-row {
margin: 0 0 8px !important;
}
.woocommerce-checkout h3 {
margin-top: 2rem;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-selection,
#payment {
background-color: var(--colorLight) !important;
border: 0 !important;
border-radius: var(--borderRadius) !important;
}
.select2-selection {
display: flex !important;
align-items: center;
height: 35px !important;
margin: 0 0 6px !important;
}
.select2-selection__arrow {
top: auto !important;
}
#order_review th {
border: 0 !important;
}
#payment .button {
margin-bottom: 0 !important;
}
.woocommerce-checkout tr {
flex-direction: row !important;
width: 100vw;
max-width: calc(100vw - 32px);
}
.woocommerce-checkout tr td {
display: block !important;
width: 50% !important;
flex: initial;
}
.woocommerce-checkout tr th {
width: 50%;
font-weight: 600 !important;
}
.product-name,
.product-quantity,
.woocommerce-checkout .order-total .amount {
font-weight: 600 !important;
}
.woocommerce-checkout .cart-subtotal .amount {
font-weight: 400 !important;
}
@media screen and (min-width: 769px) {
.checkout_coupon {
flex-direction: row;
flex-wrap: wrap;
max-width: 700px;
}
.checkout_coupon .form-row {
width: 50% !important;
}
.form-row-first {
padding-right: 8px !important;
}
.form-row-last {
padding-left: 8px !important;
}
.woocommerce-checkout tr {
flex-direction: row !important;
width: 100vw;
max-width: 580px;
}
} .woocommerce-MyAccount-navigation {
margin-bottom: 2rem;
}
.woocommerce-MyAccount-navigation ul {
list-style-type: none;
padding-left: 0;
}
.woocommerce-MyAccount-navigation ul li {
margin-bottom: 10px;
font-weight: 600;
}
.woocommerce-MyAccount-navigation ul li a {
color: var(--colorDark) !important;
}
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
padding: 1rem !important;
text-align: center;
justify-content: center;
}
.woocommerce-Address-title a {
width: 100%;
margin-bottom: 1rem;
font-weight: bold;
}
.woocommerce-EditAccountForm em {
margin-top: 6px;
display: block;
}
.woocommerce-EditAccountForm fieldset {
margin-top: 3rem;
margin-bottom: 1rem;
border-radius: var(--borderRadius) !important;
}
.woocommerce-EditAccountForm fieldset legend{
padding: 0 10px;
font-weight: bold;
}
.button[name=save_address] {
margin-top: 2rem !important;
margin-left: 3px;
}
@media screen and (min-width: 769px) {
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
flex-direction: column-reverse;
align-items: center;
width: fit-content;
}
.woocommerce-account .woocommerce-message:before,
.woocommerce-account .woocommerce-info:before {
display: none;
}
.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-info .button {
margin-top: 10px;
}
} .woocommerce-form-login {
border: 0 !important;
padding: 0 !important;
}
.woocommerce-form-login .form-row:not(.form-row-wide){
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
align-items: center;
}
.woocommerce-LostPassword {
margin-top: 2rem;
margin-bottom: 0;
}
.woocommerce-account:not(.logged-in) .elementor-widget-heading {
display: none;
}
.woocommerce-account:not(.logged-in) .woocommerce {
max-width: 600px !important;
margin: 0 auto;
}
.woocommerce-account .u-columns {
display: flex;
flex-direction: column;
} 
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
width: 100% !important;
} .woocommerce-notice {
text-align: center;
}
.woocommerce-order-overview {
width: fit-content;
margin: 2rem auto 3rem auto !important;
}
.woocommerce-customer-details {
max-width: 580px;
}.btnUnderLine {
display: inline-block;
color: #2D2D2D;
position: relative;
width: fit-content;
overflow: hidden;
padding: 5px;
}
.btnUnderLine:before {
bottom: 4px;
content: "";
opacity: 1;
height: 2px;
left: 0;
position: absolute;
width: 100%;
background-color: white;
z-index: 2;
transform: translateX(-100%);
}
.btnUnderLine:hover:before {
transform: translateX(100%);
transition: all 0.6s ease-in-out;
}
.btnUnderLine:after {
background-color: #2D2D2D;
bottom: 4px;
content: "";
opacity: 0.6;
height: 2px;
left: 0;
position: absolute;
width: 100%;
}