:root {
--light-text-color: #f3f3f3;
--light-bg-color: #f7f5f2;
--light-bg-color-secondary: #f9f9f9;
--white-color: #fff;
--accent-color: #b89e7e;
--dark-color: #242728;
--black-color: #000000;
--light-grey: #a49f9f;
--medium-blue-color: #015aba;
}
/* ====================================================================== */
/* ====================================================================== */
.header-black {
background-color: #000;
position: relative !important;
}
header:has(.header-black)::before {
content: " ";
background: none;
height: 140px;
width: 100%;
display: block;
position: absolute;
z-index: 90;
}
#mobile-nav-button {
position: absolute;
display: none;
box-shadow: none;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border: 1px solid #b89e7e;
}
#mobile-nav-close {
display: none;
}
.toggle-navigation-account {
transition: left 200ms;
left: 0 !important;
margin-left: 0 !important;
padding-top: 100px;
}
.top-right {
top: 0;
right: 0 !important;
transition: right 200ms;
padding: 10px;
}
@media only screen and (max-width: 1024px) {
#mobile-nav-button {
position: fixed !important;
left: -5px !important;
top: 200px !important;
width: 20px !important;
height: 80px !important;
background-color: #000 !important;
color: #b89e7e !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end;
}
#mobile-nav-close {
display: block !important;
position: absolute !important;
right: -200vw;
top: 0;
transition: right 200ms;
}
}
.woocommerce-MyAccount-navigation {
@media only screen and (max-width: 1024px) {
position: fixed;
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: left 200ms;
top: 0;
left: -10000px;
background-color: #000;
color: #b89e7e !important;
ul {
display: flex;
flex-direction: column;
margin-top: -100px !important;
}
z-index: 9999;
#mobile-nav-close {
background: none;
border: none;
width: 60px;
height: 60px;
font-size: 24px;
margin: 0;
svg {
width: 100%;
height: 100%;
}
}
background-color: #fff !important;
a {
background-color: #fff !important;
color: #b89e7e !important;
}
a::after {
border-bottom: 1px solid #b89e7e !important;
width: 100% !important;
}
a:hover {
color: #000 !important;
}
a:hover::after {
border-color: #000 !important;
}
.is-active a {
color: #000 !important;
}
.is-active a::after {
border-color: #000 !important;
}
}
}
.woocommerce-MyAccount-navigation {
margin-left: 10px;
ul {
height: 500px;
padding-left: 0;
margin-bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-around;
:last-child {
border-bottom: none;
}
}
li {
font-size: 19px;
a,
a:visited,
a:focus {
display: block;
color: black;
width: 200px;
text-decoration: none;
transition: color 0.3s ease-out;
padding: 10px 10px;
}
a:hover {
color: #b89e7e;
}
a::after {
content: "";
width: 0px;
border-bottom: 1px solid #b89e7e;
display: block;
transition: width 0.3s ease-out, border-color 0.3s ease-out;
}
a:hover::after {
transition: width 0.3s ease-out, border-color 0.3s ease-out;
width: 100%;
border-color: #b89e7e;
}
&.is-active {
a {
color: #b89e7e;
}
::after {
content: "";
width: 100%;
border-bottom: 1px solid #b89e7e;
display: block;
}
}
}
}
/* ====================================================================== */
/* ====================================================================== */
/* Account Details */
.woocommerce-edit-account {
.woocommerce {
padding: 0 100px;
display: flex;
margin-top: 60px;
button {
padding: 9px 15px;
border: 1px solid var(--accent-color);
background: var(--accent-color);
color: var(--white-color);
font-family: "Geologica";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
display: flex;
flex-direction: row;
justify-content: space-between;
box-shadow: inset 0 0 0 0 var(--white-color);
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
@media only screen and (min-width: 1000px) {
&:hover {
box-shadow: inset 400px 0 0 0 var(--white-color);
color: var(--accent-color);
}
}
}
.woocommerce-MyAccount-content {
margin: auto;
}
.woocommerce-EditAccountForm.edit-account {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
.woocommerce-form-row.woocommerce-form-row--wide.form-row.form-row-wide,
fieldset {
grid-column: span 2;
}
fieldset {
display: flex;
flex-direction: column;
gap: 20px;
label,
input {
width: 100%;
}
}
p {
display: flex;
flex-direction: column;
}
.clear {
display: none;
}
label {
color: rgba(0, 0, 0, 0.65);
padding-left: 10px;
span.required {
color: #b89e7e;
}
}
input {
border: 1px solid #b89e7e;
background: none;
padding: 7px 10px;
&:focus {
background-color: none;
outline: none;
box-shadow: none;
caret-color: #b89e7e;
border-color: #b89e7e;
}
}
}
}
@media only screen and (max-width: 1024px) {
.woocommerce {
justify-content: center;
.woocommerce-EditAccountForm.edit-account {
display: flex !important;
flex-direction: column;
}
}
.woocommerce-MyAccount-content {
margin: 0 20px !important;
}
}
}
/* Account Addresses Edit */
.woocommerce-edit-address {
overflow-x: hidden;
.woocommerce {
padding: 0 100px;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
margin-top: 60px;
margin-bottom: 60px;
> div {
/* width: 100%; */
/* padding-right: 10px;
padding-left: 10px; */
display: flex;
height: 100%;
.woocommerce-MyAccount-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 5px 10px 0 10px;
width: inherit;
form {
width: 90%;
}
form h2 {
border-bottom: 1px solid #b89e7e;
margin: 0 auto 40px;
width: max-content;
}
.woocommerce-address-fields {
.woocommerce-address-fields__field-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
justify-content: space-around;
}
.form-row {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
justify-self: start;
margin-bottom: 50px;
width: max-content;
abbr.required {
color: #b89e7e;
}
label {
color: rgba(0, 0, 0, 0.65);
padding-left: 10px;
}
select {
border: 1px solid var(--accent-color);
background: var(--light-bg-color-secondary);
width: 100%;
padding: 9px 15px;
-webkit-appearance: none;
cursor: pointer;
}
input {
border: 1px solid #b89e7e;
background: none;
padding: 7px 10px;
&:focus {
background-color: none;
outline: none;
box-shadow: none;
caret-color: #b89e7e;
border-color: #b89e7e;
}
}
}
p {
text-align: center;
button {
padding: 9px 15px;
border: 1px solid var(--accent-color);
background: var(--accent-color);
color: var(--white-color);
font-family: "Geologica";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
display: flex;
flex-direction: row;
justify-content: space-between;
box-shadow: inset 0 0 0 0 var(--white-color);
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
@media only screen and (min-width: 1000px) {
&:hover {
box-shadow: inset 400px 0 0 0 var(--white-color);
color: var(--accent-color);
}
}
}
}
}
}
}
}
/* @media only screen and (max-width: 1300px) {
.woocommerce {
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
margin-top: 60px;
margin-bottom: 60px;
> div {
.woocommerce-MyAccount-content {
grid-template-areas:
"wrapper wrapper wrapper"
"time time time"
"order order order"
"details details details";
gap: 50px;
justify-items: center;
> .woocommerce-customer-details {
grid-area: details;
padding-bottom: 50px;
> section {
display: flex;
flex-direction: column;
gap: 40px;
}
}
> .woocommerce-order-details {
grid-area: order;
.woocommerce-table.woocommerce-table--order-details.shop_table.order_details {
th {
padding-right: 20px;
}
}
}
}
}
}
} */
@media only screen and (max-width: 1600px) {
.woocommerce {
> div {
/* width: 100%; */
#billing_address_2_field span {
align-self: center !important;
}
.woocommerce-MyAccount-content {
justify-items: flex-start;
padding: 10px !important;
.woocommerce-address-fields {
p {
button {
margin: auto;
}
}
& .form-row {
justify-self: center;
}
.woocommerce-address-fields__field-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
justify-content: space-around;
}
}
}
}
}
}
/* @media only screen and (max-width: 1270) {
.woocommerce {
> div {
width: 100%;
.woocommerce-MyAccount-content {
justify-items: flex-start;
padding: 10px !important;
.woocommerce-address-fields {
.woocommerce-address-fields__field-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
justify-content: space-around;
}
}
}
}
}
} */
@media only screen and (max-width: 1024px) {
.woocommerce {
> div {
width: 100%;
.woocommerce-MyAccount-content {
justify-items: flex-start;
padding: 10px !important;
.woocommerce-address-fields {
& .form-row {
justify-self: center;
}
.woocommerce-address-fields__field-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
justify-content: space-around;
}
}
}
}
}
.woocommerce-MyAccount-content {
padding: 0 !important;
table {
tbody {
td {
max-width: 50px;
}
}
}
}
}
@media only screen and (max-width: 850px) {
.woocommerce {
> div {
width: 100%;
.woocommerce-address-fields p button.button {
margin: auto;
}
.woocommerce-MyAccount-content {
justify-items: flex-start;
padding: 10px !important;
.woocommerce-address-fields {
& .form-row {
justify-self: center;
}
.woocommerce-address-fields__field-wrapper {
display: grid;
grid-template-columns: 1fr;
justify-content: space-around;
}
}
}
}
}
}
@media only screen and (max-width: 480px) {
.woocommerce {
> div {
width: 100%;
.woocommerce-MyAccount-content {
> .u-columns.woocommerce-Addresses.col2-set.addresses {
display: flex;
flex-direction: column;
align-items: center;
}
}
}
}
}
}
/* Account Addresses */
.woocommerce-edit-address {
#mobile-nav-button {
position: absolute;
display: none;
box-shadow: none;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border: 1px solid #b89e7e;
}
#mobile-nav-close {
display: none;
}
.woocommerce {
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
margin-top: 60px;
margin-bottom: 60px;
> div {
/* width: 100%; */
/* padding-right: 10px;
padding-left: 10px; */
display: flex;
height: 100%;
.woocommerce-MyAccount-navigation {
margin-left: 10px;
ul {
height: 500px;
padding-left: 0;
margin-bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-around;
:last-child {
border-bottom: none;
}
}
li {
font-size: 19px;
a,
a:visited,
a:focus {
display: block;
color: black;
width: 200px;
text-decoration: none;
transition: color 0.3s ease-out;
padding: 10px 10px;
}
a:hover {
color: #b89e7e;
}
a::after {
content: "";
width: 0px;
border-bottom: 1px solid #b89e7e;
display: block;
transition: width 0.3s ease-out, border-color 0.3s ease-out;
}
a:hover::after {
transition: width 0.3s ease-out, border-color 0.3s ease-out;
width: 100%;
border-color: #b89e7e;
}
&.is-active {
a {
color: #b89e7e;
}
::after {
content: "";
width: 100%;
border-bottom: 1px solid #b89e7e;
display: block;
}
}
}
}
.woocommerce-MyAccount-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 5px 10px 0 10px;
width: inherit;
p {
margin-bottom: 40px;
}
> .u-columns.woocommerce-Addresses.col2-set.addresses {
display: flex;
justify-content: left;
width: inherit;
@media only screen and (min-width: 677px) {
margin-left: -280px;
justify-content: space-evenly;
}
> div {
width: max-content;
}
}
.woocommerce-Address-title.title h2 {
border-bottom: 1px solid #b89e7e;
margin-bottom: 20px;
}
.woocommerce-Address-title.title::before {
background: none !important;
}
}
}
}
/* @media only screen and (max-width: 1300px) {
.woocommerce {
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
margin-top: 60px;
margin-bottom: 60px;
> div {
.woocommerce-MyAccount-content {
grid-template-areas:
"wrapper wrapper wrapper"
"time time time"
"order order order"
"details details details";
gap: 50px;
justify-items: center;
> .woocommerce-customer-details {
grid-area: details;
padding-bottom: 50px;
> section {
display: flex;
flex-direction: column;
gap: 40px;
}
}
> .woocommerce-order-details {
grid-area: order;
.woocommerce-table.woocommerce-table--order-details.shop_table.order_details {
th {
padding-right: 20px;
}
}
}
}
}
}
} */
@media only screen and (max-width: 750px) {
#mobile-nav-button {
position: fixed !important;
left: -5px;
top: 5vh;
width: 30px;
height: 80px;
background-color: #000;
color: #b89e7e;
display: flex;
align-items: center;
justify-content: flex-end;
}
#mobile-nav-close {
display: block;
position: absolute;
right: -200vw;
top: 0;
transition: right 200ms;
}
.woocommerce {
> div {
width: 100%;
.woocommerce-MyAccount-content {
justify-items: flex-start;
padding: 10px !important;
}
.woocommerce-MyAccount-navigation {
position: fixed;
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: left 200ms;
top: 0;
left: -10000px;
background-color: #000;
color: #b89e7e !important;
ul {
display: flex;
flex-direction: column;
margin-top: -150px;
}
li {
border: none;
padding: 0;
transition: none;
a {
border-radius: 10px;
color: #b89e7e;
background-color: #000;
transition: all 0.3s;
}
a:hover {
transition: none;
color: #000;
background-color: #b89e7e;
transition: all 0.3s;
}
a:hover::after {
border-color: #000;
}
&.is-active {
transition: none;
border: none;
a,
a:hover {
background-color: #816e57;
color: #000;
}
a:hover::after {
border-color: #000;
}
}
}
}
}
}
.woocommerce-MyAccount-content {
padding: 0 !important;
table {
tbody {
td {
max-width: 50px;
}
}
}
}
}
@media only screen and (max-width: 480px) {
.woocommerce {
padding: 0;
> div {
.woocommerce-MyAccount-content {
text-align: center;
width: 100%;
> .u-columns.woocommerce-Addresses.col2-set.addresses {
display: flex;
flex-direction: column;
align-items: center;
}
}
}
}
}
.toggle-navigation-account {
transition: left 200ms;
left: 0 !important;
margin-left: 0 !important;
padding-top: 100px;
}
.top-right {
top: 0;
right: 0 !important;
transition: right 200ms;
padding: 10px;
}
}
/* Account Dashboard */
.woocommerce-dashboard {
display: grid !important;
grid-template-areas:
"navbar navbar"
"title title"
"accountNav info"
"footer footer";
header {
grid-area: navbar;
}
account-heading {
grid-area: title;
}
.woocommerce-ism-acc {
padding: 0 100px;
grid-area: accountNav;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
width: fit-content;
margin-top: 60px;
margin-bottom: 60px;
> div {
width: 100%;
/* padding-right: 10px;
padding-left: 10px; */
display: flex;
height: 100%;
.woocommerce-MyAccount-navigation {
margin-left: 10px;
ul {
height: 500px;
padding-left: 0;
margin-bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-around;
:last-child {
border-bottom: none;
}
}
li {
font-size: 19px;
a,
a:visited,
a:focus {
display: block;
color: black;
width: 200px;
text-decoration: none;
transition: color 0.3s ease-out;
padding: 10px 10px;
}
a:hover {
color: #b89e7e;
}
a::after {
content: "";
width: 0px;
border-bottom: 1px solid #b89e7e;
display: block;
transition: width 0.3s ease-out, border-color 0.3s ease-out;
}
a:hover::after {
transition: width 0.3s ease-out, border-color 0.3s ease-out;
width: 100%;
border-color: #b89e7e;
}
&.is-active {
a {
color: #b89e7e;
}
::after {
content: "";
width: 100%;
border-bottom: 1px solid #b89e7e;
display: block;
}
}
}
}
.woocommerce-MyAccount-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 5px 10px 0 10px;
width: inherit;
p {
margin-bottom: 40px;
}
> .u-columns.woocommerce-Addresses.col2-set.addresses {
display: flex;
justify-content: space-evenly;
width: inherit;
> div {
width: max-content;
}
}
.woocommerce-Address-title.title::before {
background: none !important;
}
}
}
}
.woocommerce-MyAccount-content {
grid-area: info;
align-self: center;
}
footer {
grid-area: footer;
}
}
.woocommerce-dashboard {
@media only screen and (max-width: 1024px) {
.woocommerce-MyAccount-content {
margin: 0 20px;
min-height: 400px;
align-content: center;
}
#mobile-nav-button {
position: fixed !important;
left: -5px;
top: 200px;
width: 20px;
height: 80px;
background-color: #000;
color: #b89e7e;
display: flex;
align-items: center;
justify-content: flex-end;
}
#mobile-nav-close {
display: block;
position: absolute;
right: -200vw;
top: 0;
transition: right 200ms;
}
.woocommerce-MyAccount-navigation {
position: fixed;
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: left 200ms;
top: 0;
left: -10000px;
background-color: #000;
color: #b89e7e !important;
ul {
display: flex;
flex-direction: column;
margin-top: -150px;
}
li {
border: none;
padding: 0;
transition: none;
a {
border-radius: 10px;
color: #b89e7e;
background-color: #000;
transition: all 0.3s;
}
a:hover {
transition: none;
color: #000;
background-color: #b89e7e;
transition: all 0.3s;
}
a:hover::after {
border-color: #000;
}
&.is-active {
transition: none;
border: none;
a,
a:hover {
background-color: #816e57;
color: #000;
}
a:hover::after {
border-color: #000;
}
}
}
}
}
}
/* Account Login */
.woocommerce-account .woocommerce {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-bottom: 100px;
}
.woocommerce-account:not(.logged-in) .woocommerce {
flex-direction: column;
}
.woocommerce-lost-password .woocommerce {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 100px;
padding: 0 30px;
}
.woocommerce-lost-password .woocommerce-message {
width: 100%;
}
#customer_login {
display: flex;
justify-content: center;
.u-column1.col-1 {
width: 100%;
.login-h2 {
display: flex;
justify-content: center;
h2 {
text-align: center;
padding: 50px 10px 5px 10px;
margin-bottom: 80px;
font-size: 40px;
border-bottom: 2px solid #b89e7e;
}
}
form .field-container {
padding: 16px 0px;
}
form .field-container p {
padding: 10px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
label {
color: rgba(0, 0, 0, 0.65);
z-index: -1;
padding-left: 10px;
}
sup {
color: #b89e7e;
}
input {
width: 300px;
border: 1px solid #b89e7e;
background: none;
padding: 7px 10px;
&:focus {
background-color: none;
outline: none;
box-shadow: none;
caret-color: #b89e7e;
border-color: #b89e7e;
}
}
}
.lost_password {
text-align: center;
a:hover {
cursor: pointer;
}
a,
a:focus,
a:visited {
color: black;
text-decoration: none;
}
a {
transition: color 0.3s;
}
a:hover {
transition: color 0.3s;
color: #b89e7e;
}
}
form .form-row {
display: flex;
flex-direction: column;
align-items: center;
.woocommerce-button {
margin: 30px 0;
padding: 9px 15px;
border: 1px solid var(--accent-color);
background: var(--accent-color);
color: var(--white-color);
font-family: "Geologica";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
display: flex;
flex-direction: row;
justify-content: space-between;
box-shadow: inset 0 0 0 0 var(--white-color);
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
@media only screen and (min-width: 1000px) {
&:hover {
box-shadow: inset 400px 0 0 0 var(--white-color);
color: var(--accent-color);
}
&:hover::after {
filter: brightness(0) saturate(100%) invert(75%) sepia(8%)
saturate(1127%) hue-rotate(353deg) brightness(86%) contrast(87%);
}
}
@media only screen and (min-width: 690px) and (max-width: 995px) {
width: 300px;
margin-left: auto;
}
}
#rememberme {
accent-color: #b89e7e;
}
}
}
.u-column2.col-2 {
width: 100%;
max-width: 700px;
.login-h2 {
display: flex;
justify-content: center;
h2 {
text-align: center;
padding: 50px 10px 5px 10px;
margin-bottom: 80px;
font-size: 40px;
border-bottom: 2px solid #b89e7e;
}
}
form.register {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 25px;
}
form .form-row {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 20px;
.woocommerce-button {
margin: 30px 0;
padding: 9px 15px;
border: 1px solid var(--accent-color);
background: var(--accent-color);
color: var(--white-color);
font-family: "Geologica";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
display: flex;
flex-direction: row;
justify-content: space-between;
box-shadow: inset 0 0 0 0 var(--white-color);
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
@media only screen and (min-width: 1000px) {
&:hover {
box-shadow: inset 400px 0 0 0 var(--white-color);
color: var(--accent-color);
}
&:hover::after {
filter: brightness(0) saturate(100%) invert(75%) sepia(8%)
saturate(1127%) hue-rotate(353deg) brightness(86%) contrast(87%);
}
}
@media only screen and (min-width: 690px) and (max-width: 995px) {
width: 300px;
margin-left: auto;
}
}
#rememberme {
accent-color: #b89e7e;
}
}
h2 {
text-align: center;
padding: 50px 10px 5px 10px;
margin-bottom: 80px;
font-size: 40px;
border-bottom: 2px solid #b89e7e;
}
sup {
color: #b89e7e;
}
label {
color: rgba(0, 0, 0, 0.65);
z-index: -1;
padding-left: 10px;
}
input {
width: 300px;
border: 1px solid #b89e7e;
background: none;
padding: 7px 10px;
&:focus {
background-color: none;
outline: none;
box-shadow: none;
caret-color: #b89e7e;
border-color: #b89e7e;
}
}
#register-toggle-container {
margin-top: 0 !important;
}
}
.u-column1.col-1.hide {
display: none;
}
.u-column2.col-2.hide {
display: none;
}
#register-toggle-container {
margin-top: 45px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
#cool-or-divider {
text-align: center;
width: 100%;
border-bottom: 1px solid black;
line-height: 0.1rem;
margin: 10px 0 20px;
span {
background-color: #fff;
padding: 10px;
}
}
#register-toggle {
margin: 30px 0;
padding: 9px 15px;
border: 1px solid var(--accent-color);
background: var(--accent-color);
color: var(--white-color);
font-family: "Geologica";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
display: flex;
flex-direction: row;
justify-content: space-between;
box-shadow: inset 0 0 0 0 var(--white-color);
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
@media only screen and (min-width: 1000px) {
&:hover {
box-shadow: inset 400px 0 0 0 var(--white-color);
color: var(--accent-color);
}
&:hover::after {
filter: brightness(0) saturate(100%) invert(75%) sepia(8%)
saturate(1127%) hue-rotate(353deg) brightness(86%) contrast(87%);
}
}
@media only screen and (min-width: 690px) and (max-width: 995px) {
width: 300px;
margin-left: auto;
}
}
}
}
/* Account Orders Empty */
.woocommerce-orders {
.woocommerce {
padding: 0 100px;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
margin-top: 60px;
margin-bottom: 60px;
> div {
width: 100%;
display: flex;
height: 100%;
.woocommerce-MyAccount-navigation {
margin-left: 10px;
ul {
height: 500px;
padding-left: 0;
margin-bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-around;
:last-child {
border-bottom: none;
}
}
li {
font-size: 19px;
a,
a:visited,
a:focus {
display: block;
color: black;
width: 200px;
text-decoration: none;
transition: color 0.3s ease-out;
padding: 10px 10px;
}
a:hover {
color: #b89e7e;
}
a::after {
content: "";
width: 0px;
border-bottom: 1px solid #b89e7e;
display: block;
transition: width 0.3s ease-out, border-color 0.3s ease-out;
}
a:hover::after {
transition: width 0.3s ease-out, border-color 0.3s ease-out;
width: 100%;
border-color: #b89e7e;
}
&.is-active {
a {
color: #b89e7e;
}
::after {
content: "";
width: 100%;
border-bottom: 1px solid #000;
display: block;
}
}
}
}
.woocommerce-MyAccount-content {
display: flex;
justify-content: center;
align-items: center;
padding: 5px 10px 0 10px;
width: inherit;
table {
width: 100%;
height: max-content;
text-align: center;
a,
a:hover,
a:focus,
a:visited {
color: black;
}
tbody {
tr {
border-bottom: 1px solid black;
}
:last-child {
border-bottom: none;
}
td {
padding-bottom: 20px;
padding-top: 20px;
}
}
}
}
}
}
@media only screen and (max-width: 480px) {
.woocommerce {
> div {
width: 100%;
}
}
}
}
/* Account Orders Single */
.woocommerce-view-order {
#mobile-nav-button {
position: absolute;
display: none;
box-shadow: none;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border: 1px solid #b89e7e;
}
#mobile-nav-close {
display: none;
}
.woocommerce {
padding: 0 100px;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
margin-top: 60px;
margin-bottom: 60px;
> div {
width: 100%;
/* padding-right: 10px;
padding-left: 10px; */
display: flex;
height: 100%;
.woocommerce-MyAccount-navigation {
margin-left: 10px;
ul {
height: 500px;
padding-left: 0;
margin-bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-around;
:last-child {
border-bottom: none;
}
}
li {
font-size: 19px;
a,
a:visited,
a:focus {
display: block;
color: black;
width: 200px;
text-decoration: none;
transition: color 0.3s ease-out;
padding: 10px 10px;
}
a:hover {
color: #b89e7e;
}
a::after {
content: "";
width: 0px;
border-bottom: 1px solid #b89e7e;
display: block;
transition: width 0.3s ease-out, border-color 0.3s ease-out;
}
a:hover::after {
transition: width 0.3s ease-out, border-color 0.3s ease-out;
width: 100%;
border-color: #b89e7e;
}
&.is-active {
a {
color: #b89e7e;
}
::after {
content: "";
width: 100%;
border-bottom: 1px solid #b89e7e;
display: block;
}
}
}
}
.woocommerce-MyAccount-content {
display: grid;
grid-template-areas:
"time time time"
"details details details"
"order order order";
justify-content: space-evenly;
gap: 40px;
padding: 5px 10px 0 10px;
width: inherit;
> .woocommerce-notices-wrapper {
/* grid-area: wrapper; */
display: none;
}
> p {
grid-area: time;
justify-self: flex-start;
margin: 20px 0;
}
> .woocommerce-order-details {
grid-area: order;
h2 {
margin-bottom: 20px;
border-bottom: 1px solid #b89e7e;
width: fit-content;
}
.woocommerce-table.woocommerce-table--order-details.shop_table.order_details {
td {
padding-right: 10px;
}
}
}
> .woocommerce-customer-details {
grid-area: details;
> section {
display: flex;
justify-content: space-between;
}
.woocommerce-column.woocommerce-column--1.woocommerce-column--billing-address.col-1 {
width: max-content;
h2 {
margin-bottom: 20px;
border-bottom: 1px solid #b89e7e;
}
}
.woocommerce-column.woocommerce-column--2.woocommerce-column--shipping-address.col-2 {
width: max-content;
h2 {
margin-bottom: 20px;
border-bottom: 1px solid #b89e7e;
}
}
}
}
}
}
@media only screen and (max-width: 1300px) {
.woocommerce {
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
margin-top: 60px;
margin-bottom: 60px;
> div {
.woocommerce-MyAccount-content {
grid-template-areas:
"time time time"
"details details details"
"order order order";
gap: 50px;
> .woocommerce-customer-details {
grid-area: details;
padding-bottom: 50px;
width: 300px;
> section {
gap: 40px;
}
}
> .woocommerce-order-details {
grid-area: order;
justify-self: flex-start;
.woocommerce-table.woocommerce-table--order-details.shop_table.order_details {
th {
padding-right: 20px;
}
}
}
}
}
}
}
@media only screen and (max-width: 750px) {
#mobile-nav-button {
position: fixed !important;
left: -5px;
top: 5vh;
width: 30px;
height: 80px;
background-color: #000;
color: #b89e7e;
display: flex;
align-items: center;
justify-content: flex-end;
}
#mobile-nav-close {
display: block;
position: absolute;
right: -200vw;
top: 0;
transition: right 200ms;
}
.woocommerce {
> div {
width: 100%;
.woocommerce-MyAccount-content {
padding: 10px !important;
}
.woocommerce-MyAccount-navigation {
position: fixed;
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: left 200ms;
top: 0;
left: -10000px;
background-color: #000;
color: #b89e7e !important;
ul {
display: flex;
flex-direction: column;
margin-top: -150px;
}
li {
border: none;
padding: 0;
transition: none;
a {
border-radius: 10px;
color: #b89e7e;
background-color: #000;
transition: all 0.3s;
}
a:hover {
transition: none;
color: #000;
background-color: #b89e7e;
transition: all 0.3s;
}
a:hover::after {
border-color: #000;
}
&.is-active {
transition: none;
border: none;
a,
a:hover {
background-color: #816e57;
color: #000;
}
a:hover::after {
border-color: #000;
}
}
}
}
}
}
.woocommerce-MyAccount-content {
padding: 0 !important;
table {
tbody {
td {
max-width: 50px;
}
}
}
}
}
@media only screen and (max-width: 480px) {
.woocommerce {
> div {
width: 100%;
.woocommerce-customer-details {
/* > section {
display: flex;
flex-direction: column;
align-items: center;
} */
}
& .woocommerce-MyAccount-content {
& > .woocommerce-order-details {
justify-self: center;
/* h2 {
text-align: center;
} */
}
}
}
}
}
.toggle-navigation-account {
transition: left 200ms;
left: 0 !important;
margin-left: 0 !important;
padding-top: 100px;
}
.top-right {
top: 0;
right: 0 !important;
transition: right 200ms;
padding: 10px;
}
}
/* Account Orders */
.woocommerce-orders {
#mobile-nav-button {
position: absolute;
display: none;
box-shadow: none;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border: 1px solid #b89e7e;
}
#mobile-nav-close {
display: none;
}
.woocommerce {
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
margin-top: 60px;
margin-bottom: 60px;
> div {
width: 100%;
/* padding-right: 10px;
padding-left: 10px; */
display: flex;
height: 100%;
.woocommerce-MyAccount-navigation {
margin-left: 10px;
ul {
height: 500px;
padding-left: 0;
margin-bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-around;
:last-child {
border-bottom: none;
}
}
li {
font-size: 19px;
a,
a:visited,
a:focus {
display: block;
color: black;
width: 200px;
text-decoration: none;
transition: color 0.3s ease-out;
padding: 10px 10px;
}
a:hover {
color: #b89e7e;
}
a::after {
content: "";
width: 0px;
border-bottom: 1px solid #b89e7e;
display: block;
transition: width 0.3s ease-out, border-color 0.3s ease-out;
}
a:hover::after {
transition: width 0.3s ease-out, border-color 0.3s ease-out;
width: 100%;
border-color: #b89e7e;
}
&.is-active {
a {
color: #b89e7e;
}
::after {
content: "";
width: 100%;
border-bottom: 1px solid #b89e7e;
display: block;
}
}
}
}
.woocommerce-MyAccount-content {
display: flex;
justify-items: flex-start;
align-items: flex-start;
padding: 5px 10px 0 10px;
width: inherit;
table {
width: 100%;
height: max-content;
text-align: center;
.woocommerce-orders-table__cell-order-number a {
color: var(--accent-color);
}
td.woocommerce-orders-table__cell-order-actions a,
td.woocommerce-orders-table__cell-order-actions a:hover,
td.woocommerce-orders-table__cell-order-actions a:focus,
td.woocommerce-orders-table__cell-order-actions a:visited {
padding: 9px 15px;
border: 1px solid var(--accent-color);
background: var(--accent-color);
color: var(--white-color);
font-family: "Geologica";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
display: flex;
flex-direction: row;
justify-content: space-between;
box-shadow: inset 0 0 0 0 var(--white-color);
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
@media only screen and (min-width: 1000px) {
&:hover {
box-shadow: inset 400px 0 0 0 var(--white-color);
color: var(--accent-color);
}
}
}
tbody {
tr {
border-bottom: 1px solid #b89e7e;
}
/* :last-child {
border-bottom: none;
} */
td {
padding-bottom: 20px;
padding-top: 20px;
}
}
}
}
}
}
@media only screen and (max-width: 1024px) {
#mobile-nav-button {
position: fixed !important;
left: -5px;
top: 5vh;
width: 30px;
height: 80px;
background-color: #000;
color: #b89e7e;
display: flex;
align-items: center;
justify-content: flex-end;
}
#mobile-nav-close {
display: block;
position: absolute;
right: -200vw;
top: 0;
transition: right 200ms;
}
.woocommerce {
padding: 0 10px;
> div {
width: 100%;
.woocommerce-MyAccount-navigation {
position: fixed;
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: left 200ms;
top: 0;
left: -10000px;
background-color: #000;
color: #b89e7e !important;
ul {
display: flex;
flex-direction: column;
margin-top: -150px;
}
li {
border: none;
padding: 0;
transition: none;
a {
border-radius: 10px;
color: #b89e7e;
background-color: #000;
transition: all 0.3s;
}
a:hover {
transition: none;
color: #000;
background-color: #b89e7e;
transition: all 0.3s;
}
a:hover::after {
border-color: #000;
}
&.is-active {
transition: none;
border: none;
a,
a:hover {
background-color: #816e57;
color: #000;
}
a:hover::after {
border-color: #000;
}
}
}
}
}
}
.woocommerce-MyAccount-content {
padding: 0 !important;
table {
tbody {
td {
max-width: 50px;
}
}
}
}
}
.toggle-navigation-account {
transition: left 200ms;
left: 0 !important;
margin-left: 0 !important;
padding-top: 100px;
}
.top-right {
top: 0;
right: 0 !important;
transition: right 200ms;
padding: 10px;
}
}
/* Booking Form */
.wpbc__form__div {
display: grid;
grid-template-rows: repeat(6, 0.2fr);
justify-content: center;
justify-items: center;
.wpbc__row {
.wpbc_r_submit.wpbc__field {
button {
padding: 9px 15px;
border: 1px solid var(--accent-color);
background: var(--accent-color);
color: var(--white-color);
font-family: "Geologica";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
display: flex;
flex-direction: row;
justify-content: space-between;
box-shadow: inset 0 0 0 0 var(--white-color);
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
@media only screen and (min-width: 1000px) {
&:hover {
box-shadow: inset 400px 0 0 0 var(--white-color);
color: var(--accent-color);
}
}
}
}
label {
color: rgba(0, 0, 0, 0.65);
z-index: -1;
padding-left: 10px;
}
select {
border: 1px solid var(--accent-color);
background: var(--light-bg-color-secondary);
width: 100%;
-webkit-appearance: none;
box-shadow: none;
cursor: pointer;
}
textarea {
border: 1px solid #b89e7e;
}
textarea:focus {
box-shadow: none;
outline: none;
border: 1px solid #b89e7e;
}
input {
/* width: 300px; */
border: 1px solid #b89e7e;
background: none;
padding: 7px 10px;
&:focus {
background-color: none;
outline: none;
box-shadow: none;
caret-color: #b89e7e;
border-color: #b89e7e;
}
}
}
}
.wpbc_calendar_wraper.wpbc_change_over_triangle {
display: flex;
flex-direction: column;
align-items: center;
}
.wpbc_calendar_wraper.wpbc_change_over_triangle a {
color: #b89e7e !important;
}
/* Account Checkout */
.woocommerce-checkout {
legend,
.screen-reader-text {
display: none;
}
.container-of-both {
display: grid;
grid-template-areas:
"header header"
"details summary";
grid-template-columns: auto auto;
grid-template-rows: auto auto auto;
margin: 70px 0;
padding: 0 100px;
gap: 100px;
.checkout-header {
grid-area: header;
h1 {
font-family: "Geologica";
font-weight: 600;
font-size: 35px;
color: var(--black-color);
}
}
.total-price-of-items {
width: 100%;
.wc-block-components-order-summary-item__individual-prices.price.wc-block-components-product-price {
display: grid;
width: 70%;
margin: auto;
grid-template-columns: auto auto;
@media only screen and (max-width: 540px) {
width: 80%;
}
:nth-child(even) {
justify-self: start;
}
}
}
.wc-block-components-main.wc-block-checkout__main.wp-block-woocommerce-checkout-fields-block {
width: fit-content !important;
grid-area: details;
}
.wc-block-components-checkout-step__heading,
.wc-block-components-checkout-order-summary__title {
text-align: center;
width: 100%;
border-bottom: 1px solid #000;
line-height: 0.1rem;
margin: 10px 0 20px;
font-family: "PT Sans";
font-size: 16px;
font-style: normal;
font-weight: 700;
color: var(--black-color);
span {
background-color: #fff;
padding: 10px;
/* font-size: 1.5rem; */
}
span.wc-block-components-checkout-step__heading-content {
display: none;
}
}
.wc-blocks-components-select__expand {
display: none;
}
.wc-block-components-checkbox.wc-block-checkout__use-address-for-billing {
margin-top: 20px;
}
#shipping {
display: grid;
grid-template-areas:
"country country"
"first-name last-name"
"address address"
"city city"
"post-code phone";
justify-content: space-around;
justify-items: start;
gap: 30px;
* {
width: 100%;
}
.wc-block-components-address-form__country {
grid-area: country;
width: 100%;
.wc-blocks-components-select__container {
display: flex;
flex-direction: column;
}
}
.wc-block-components-address-form__first_name {
grid-area: first-name;
display: flex;
flex-direction: column-reverse;
width: 100%;
}
.wc-block-components-address-form__last_name {
grid-area: last-name;
display: flex;
flex-direction: column-reverse;
}
.wc-block-components-address-form__address_1 {
grid-area: address;
display: flex;
flex-direction: column-reverse;
width: 100%;
}
.wc-block-components-address-form__address_2-toggle {
grid-area: apartments;
display: flex;
flex-direction: column-reverse;
}
.wc-block-components-address-form__address_2-hidden-input {
grid-area: address2;
display: flex;
flex-direction: column-reverse;
width: 100%;
}
.wc-block-components-address-form__city {
grid-area: city;
display: flex;
flex-direction: column-reverse;
}
.wc-block-components-state-input {
grid-area: state;
display: flex;
flex-direction: column-reverse;
}
.wc-block-components-address-form__postcode {
grid-area: post-code;
display: flex;
flex-direction: column-reverse;
}
.wc-block-components-address-form__phone {
grid-area: phone;
display: flex;
flex-direction: column-reverse;
}
}
.wc-block-components-checkout-step__description {
margin-bottom: 40px;
}
.wc-block-checkout__main form {
display: flex;
flex-direction: column;
/* align-items: flex-start; */
max-width: 500px;
label {
color: rgba(0, 0, 0, 0.65);
padding-left: 10px;
}
select {
border: 1px solid var(--accent-color);
background: var(--light-bg-color-secondary);
width: 100%;
padding: 9px 15px;
-webkit-appearance: none;
cursor: pointer;
}
.retrieve-options {
position: relative;
}
.retrieve-options::after {
content: "";
background-image: url(../assets/caret-down-single.svg);
background-repeat: no-repeat;
background-size: 60%;
width: 24px;
height: 24px;
position: absolute;
right: 5px;
top: 64%;
pointer-events: none;
}
input {
/* border: none; */
border: 1px solid #b89e7e;
background: none;
padding: 7px 10px;
&:focus {
background-color: none;
outline: none;
box-shadow: none;
caret-color: #b89e7e;
border-color: #b89e7e;
}
}
input[type="checkbox"],
input[type="radio"] {
accent-color: #b89e7e;
}
#contact-fields {
.wc-block-components-address-form__email {
margin: 30px 0;
display: flex;
flex-direction: column-reverse;
}
}
.wc-block-components-radio-control__option {
display: flex;
padding: 10px;
justify-content: flex-start;
align-items: center;
gap: 20px;
}
#shipping-fields {
margin: 35px 0;
}
#shipping-option {
width: 100%;
margin: 35px 0;
}
.retrieve-options {
display: flex;
flex-direction: column;
}
#payment-method {
width: 100%;
margin: 35px 0;
display: flex;
flex-direction: column;
gap: 10px;
.wc-block-components-radio-control-accordion-option {
display: flex;
flex-direction: column;
gap: 0px;
margin-bottom: 30px;
}
}
#order-notes-container {
display: flex;
flex-direction: column;
gap: 20px;
.order-notes-textarea textarea {
border: 1px solid #b89e7e;
width: 100%;
max-height: 200px;
min-height: 40px;
padding: 5px;
&:focus {
outline: none;
caret-color: #b89e7e;
border-color: #b89e7e;
}
}
.wc-block-checkout__actions_row {
display: flex;
justify-content: space-between;
align-items: center;
.wc-block-components-checkout-return-to-cart-button {
color: #b89e7e;
&:hover,
&:focus {
color: #000;
}
&:visited {
color: #b89e7e;
}
}
button {
padding: 9px 15px;
border: 1px solid var(--accent-color);
background: var(--accent-color);
color: var(--white-color);
font-family: "Geologica";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
display: flex;
flex-direction: row;
justify-content: space-between;
box-shadow: inset 0 0 0 0 var(--white-color);
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
@media only screen and (min-width: 1000px) {
&:hover {
box-shadow: inset 400px 0 0 0 var(--white-color);
color: var(--accent-color);
}
&:hover::after {
filter: brightness(0) saturate(100%) invert(75%) sepia(8%)
saturate(1127%) hue-rotate(353deg) brightness(86%)
contrast(87%);
}
}
@media only screen and (min-width: 690px) and (max-width: 995px) {
width: 300px;
margin-left: auto;
}
}
}
}
}
.wc-block-components-sidebar.wc-block-checkout__sidebar.wp-block-woocommerce-checkout-totals-block.is-sticky.is-large {
grid-area: summary;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
gap: 50px;
.wc-block-components-notices,
.wc-block-components-notices__snackbar.wc-block-components-notice-snackbar-list {
display: none;
}
}
.wp-block-woocommerce-checkout-order-summary-block {
width: 100%;
/* max-width: 500px; */
.item-content-wrapper {
padding: 20px 20px 20px 30px;
background-color: var(--dark-color);
color: var(--light-text-color);
display: flex;
flex-direction: column;
justify-content: space-evenly;
gap: 20px;
.location-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
color: var(--light-text-color);
font-family: "PT Sans";
font-size: 15.028px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.501px;
}
.grid-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
}
h3 {
font-family: "Geologica";
font-style: normal;
line-height: normal;
}
@media only screen and (min-width: 1920px) {
/* padding: 15px 38px 25px 55px; */
}
@media only screen and (max-width: 1260px) {
flex-direction: column;
}
@media only screen and (max-width: 768px) {
padding: 20px;
}
.car-description {
font-family: "Geologica";
font-size: 15.028px;
font-style: normal;
font-weight: 200;
line-height: normal;
letter-spacing: 0.501px;
margin-top: -10px;
}
.gold-line {
height: 1px;
width: 100%;
background-color: var(--accent-color);
}
.details-grid {
margin: 10px;
color: var(--light-text-color);
font-family: "PT Sans";
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
row-gap: 20px;
}
}
.wc-block-components-order-summary-item {
display: grid;
grid-template-columns: 45% 55%;
width: 100%;
background-color: var(--dark-color);
@media only screen and (max-width: 1600px) {
grid-template-columns: 100%;
grid-template-rows: auto auto;
}
/* justify-content: space-between; */
}
.wc-block-components-order-summary__content {
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--dark-color);
color: var(--light-text-color);
.wc-block-components-order-summary-item__individual-prices.price.wc-block-components-product-price {
display: grid;
column-gap: 20px;
grid-template-columns: 1fr 1fr;
justify-content: space-between;
/* justify-items: self-end; */
:nth-child(even) {
justify-self: end;
}
}
}
.wc-block-components-order-summary-item__image {
display: flex;
height: 100%;
img {
width: 100%;
height: 100%;
/* vertical-align: middle; */
object-fit: cover;
aspect-ratio: 10 / 6;
}
}
.wc-block-components-order-summary-item__description {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 20px;
.wc-block-components-product-metadata {
display: none;
}
}
.wc-block-components-checkout-order-summary__content {
display: flex;
flex-direction: column;
gap: 40px;
}
.wp-block-woocommerce-checkout-order-summary-totals-block {
display: flex;
flex-direction: column;
&::after {
content: "";
width: 80%;
height: 40px;
display: inline-block;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
align-self: center;
}
.wp-block-woocommerce-checkout-order-summary-subtotal-block.wc-block-components-totals-wrapper
.wc-block-components-totals-item {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
.wc-block-components-totals-item__description {
display: none;
}
}
}
.wc-block-components-totals-shipping .wc-block-components-totals-item {
display: grid;
grid-template-columns: 1fr 1fr;
.wc-block-components-totals-item__value {
display: flex;
justify-content: end;
}
.wc-block-components-totals-item__description {
font-size: 14px;
}
}
.wc-block-components-totals-item.wc-block-components-totals-footer-item {
display: grid;
grid-template:
"total price"
"line line";
justify-content: space-between;
&::after {
grid-area: line;
content: "";
width: 100%;
height: 40px;
display: inline-block;
border-bottom: 1px solid rgba(0, 0, 0, 1);
align-self: center;
justify-self: center;
}
.wc-block-components-totals-item__description {
display: none;
}
}
}
}
.hide {
display: none !important;
}
@media only screen and (max-width: 1080px) {
.container-of-both {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"summary"
"details";
justify-content: center;
.wc-block-components-main.wc-block-checkout__main {
order: 2;
margin: auto;
width: 500px;
}
.wc-block-components-sidebar.wc-block-checkout__sidebar.wp-block-woocommerce-checkout-totals-block.is-sticky.is-large {
order: 1;
margin: auto;
width: 500px;
/* margin-bottom: 200px; */
/* justify-self: start; */
align-self: center;
}
.wc-block-components-totals-item.wc-block-components-totals-footer-item::after {
display: none !important;
}
.wc-block-components-form.wc-block-checkout__form,
.wp-block-woocommerce-checkout-order-summary-block {
margin: 0 20px 0 20px;
}
}
}
@media only screen and (max-width: 540px) {
.wc-block-components-main.wc-block-checkout__main {
order: 2;
margin: auto;
width: 100% !important;
}
/* .wc-block-components-sidebar.wc-block-checkout__sidebar.wp-block-woocommerce-checkout-totals-block.is-sticky.is-large {
order: 1;
margin: auto;
width: 500px;
margin-bottom: 200px;
align-self: center;
} */
.wc-block-components-sidebar.wc-block-checkout__sidebar.wp-block-woocommerce-checkout-totals-block.is-sticky.is-large {
order: 1;
margin: auto;
width: 100vw !important;
padding: 0 20px !important;
}
}
}
/* Failure */
.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received.order-failed {
margin: 0px 10px;
justify-self: center;
align-self: center;
font-size: 20px;
height: auto;
display: flex;
align-items: center;
margin-top: 200px;
grid-area: message;
&::before {
content: url('data:image/svg+xml; utf, ') !important;
margin-right: 10px;
align-self: self-start;
content: url('data:image/svg+xml; utf, ') !important;
}
@media only screen and (max-width: 1200px) {
margin-top: 100px;
}
+ a {
padding: 10px 0;
font-family: "Geologica";
font-size: 16px;
font-weight: 600;
line-height: 21.38px;
letter-spacing: 0.5333333611488342px;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
text-decoration: none;
text-transform: uppercase;
color: var(--white-color);
background-color: var(--accent-color);
border: 1px solid var(--accent-color);
box-shadow: inset 0 0 0 0 var(--white-color);
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
display: block;
width: 300px;
margin-left: 85px;
@media only screen and (min-width: 1000px) {
&:hover {
box-shadow: inset 400px 0 0 0 var(--white-color);
color: var(--accent-color);
}
}
}
}
/* Thank You Page */
.woocommerce-order {
display: grid;
grid-template-areas:
"message message"
"overview overview"
"details details"
"ismailos-cta ismailos-cta";
/* margin-top: -80px; */
margin: auto !important;
gap: 40px;
.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received:not(
.order-failed
) {
grid-area: message;
margin: 0px 10px;
justify-self: center;
align-self: center;
font-size: 20px;
&::before {
content: url('data:image/svg+xml; utf, ') !important;
}
}
.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details {
grid-area: overview;
justify-self: center;
list-style: none;
display: flex;
flex-direction: column;
}
.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details li {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
text-transform: capitalize;
font-size: 16px;
}
.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details li > * {
font-size: 16px;
}
.woocommerce-order-details {
grid-area: details;
justify-self: center;
/* border-right: 1px solid rgb(184, 158, 126, 0.6); */
/* padding-right: 20px; */
}
.woocommerce-customer-details {
grid-area: address;
justify-self: start;
.woocommerce-columns.woocommerce-columns--2.woocommerce-columns--addresses.col2-set.addresses {
display: flex;
gap: 40px;
.woocommerce-column.woocommerce-column--1.woocommerce-column--billing-address.col-1 {
width: max-content;
}
.woocommerce-column.woocommerce-column--2.woocommerce-column--shipping-address.col-2 {
width: max-content;
}
}
}
.ismailos-cta {
grid-area: ismailos-cta;
justify-self: center;
/* border-right: 1px solid rgb(184, 158, 126, 0.6); */
/* padding-right: 20px; */
box-shadow: inset 0 0 0 0 var(--white-color);
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
@media only screen and (min-width: 1000px) {
&:hover {
box-shadow: inset 400px 0 0 0 var(--white-color);
color: var(--accent-color);
}
}
}
}
@media only screen and (max-width: 840px) {
.woocommerce-order {
grid-template-areas:
"message message"
"overview overview"
"details details"
"ismailos-cta ismailos-cta" !important;
}
.woocommerce-order-details {
justify-self: center !important;
border-right: none !important;
border-bottom: 1px solid rgb(184, 158, 126, 0.6);
padding-bottom: 20px;
.woocommerce-order-details__title {
/* margin-left: 75px; */
margin-bottom: 15px;
}
}
.woocommerce-customer-details {
justify-self: center !important;
.woocommerce-columns.woocommerce-columns--2.woocommerce-columns--addresses.col2-set.addresses {
display: flex;
flex-direction: column;
gap: 20px !important;
}
}
.ismailos-cta {
grid-area: ismailos-cta;
justify-self: center;
}
}
/* Wishlist */
svg {
width: 20px;
height: 20px;
}
.woocommerce.yith-wcwl-form.wishlist-fragment {
margin: 60px auto;
width: 70%;
display: flex;
justify-content: center;
@media only screen and (max-width: 540px) {
width: 90%;
}
> div {
width: 100%;
}
.wishlist-title.wishlist-title-with-form {
display: flex;
align-items: center;
position: absolute;
left: 100px;
color: var(--black-color);
font-family: "Geologica";
font-size: 35px;
font-style: normal;
font-weight: 600;
line-height: 32px;
letter-spacing: -0.583px;
text-transform: uppercase;
margin-bottom: 10px;
@media only screen and (max-width: 1800px) {
left: 30px;
}
}
.hidden-title-form {
display: flex;
margin: 40px 0;
position: absolute;
left: 100px;
@media only screen and (max-width: 1800px) {
left: 30px;
}
.edit-title-buttons {
display: flex;
justify-content: space-around;
padding-left: 20px;
align-items: center;
gap: 20px;
a {
color: #b89e7e;
transition: color 0.3s ease-out;
text-decoration: none;
}
a:visited,
a:focus {
transition: color 0.3s ease-out;
color: #b89e7e;
}
a:hover {
transition: color 0.3s ease-out;
color: #000;
}
}
input {
border: 1px solid #b89e7e;
background: none;
padding: 7px 10px;
&:focus {
background-color: none;
outline: none;
box-shadow: none;
caret-color: #b89e7e;
border-color: #b89e7e;
}
}
}
.shop_table.cart.wishlist_table.wishlist_view.traditional.responsive {
margin: auto;
display: flex;
margin-top: 80px;
border-collapse: separate;
border-spacing: 0 40px;
width: max-content;
align-items: start;
width: 100%;
th {
display: none;
}
tbody {
width: 100%;
border-spacing: 0 40px;
border-collapse: collapse;
td {
/* padding: 20px 20px; */
}
tr {
margin: 30px 0;
width: 100%;
display: grid;
grid-template-areas:
"img specs specs"
"img specs specs"
"img remove add";
@media only screen and (max-width: 1280px) {
grid-template-areas:
"img img"
"specs specs"
"remove add";
padding-bottom: 30px;
text-align: center;
/* justify-content: space-between; */
.grid-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
}
.product-name {
padding: 15px 38px 25px 15px;
}
.product-add-to-cart {
/* justify-self: center; */
}
.product-remove {
/* justify-self: center; */
/* margin-left:15px; */
}
}
@media only screen and (max-width: 630px) {
grid-template-areas:
"img img"
"specs specs"
"remove remove"
"add add";
.product-add-to-cart {
justify-self: center;
}
.product-remove {
justify-self: center;
/* margin-left:15px; */
margin: 0;
}
}
grid-template-columns: 45% auto;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
background-color: var(--dark-color);
}
.product-specs {
grid-area: specs;
.item-content-wrapper {
text-align: start;
.details-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
row-gap: 20px;
@media only screen and (min-width: 1261px) and (max-width: 1950) {
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
@media only screen and (max-width: 1260px) {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
@media only screen and (max-width: 517px) {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
column-gap: 20px;
margin: 0;
}
.grid-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 25px;
}
}
.car-heading {
font-size: 25.047px;
font-weight: 200;
letter-spacing: 0.835px;
}
color: #fff;
display: flex;
flex-direction: column;
justify-content: space-evenly;
gap: 20px;
padding: 20px 20px 20px 30px;
background-color: var(--dark-color);
color: var(--light-text-color);
display: flex;
flex-direction: column;
justify-content: space-evenly;
gap: 20px;
@media only screen and (min-width: 1920px) {
padding: 15px 38px 25px 55px;
}
@media only screen and (max-width: 1260px) {
flex-direction: column;
}
@media only screen and (max-width: 768px) {
padding: 20px;
}
.car-description {
font-family: "Geologica";
font-size: 15.028px;
font-style: normal;
font-weight: 200;
line-height: normal;
letter-spacing: 0.501px;
margin-top: -10px;
}
}
.location-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
color: var(--light-text-color);
font-family: "PT Sans";
font-size: 15.028px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.501px;
}
h3 .car-heading {
font-family: "Geologica";
font-style: normal;
line-height: normal;
}
.car-description {
font-family: "Geologica";
font-size: 15.028px;
font-style: normal;
font-weight: 200;
line-height: normal;
letter-spacing: 0.501px;
margin-top: -10px;
}
.gold-line {
height: 1px;
width: 100%;
background-color: var(--accent-color);
}
.details-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
row-gap: 20px;
margin: 10px;
color: var(--light-text-color);
font-family: "PT Sans";
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
}
.product-remove {
grid-area: remove;
margin: 20px 0 20px 30px;
@media only screen and (min-width: 1920px) {
margin: 20px 20px 20px 55px;
}
@media only screen and (max-width: 630px) {
width: 100%;
margin: auto;
}
/* margin: auto; */
.remove.remove_from_wishlist {
@media only screen and (max-width: 630px) {
margin: auto;
width: 89% !important;
}
text-decoration: none;
width: 170.317px;
justify-content: center !important;
padding: 9px 15px;
border: 1px solid var(--accent-color);
background: none;
color: var(--white-color);
font-family: "Geologica";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
display: flex;
flex-direction: row;
justify-content: space-between;
box-shadow: inset 0 0 0 0 var(--white-color);
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
@media only screen and (min-width: 1000px) {
&:hover {
box-shadow: inset 400px 0 0 0 var(--white-color);
color: var(--accent-color);
}
&:hover::after {
filter: brightness(0) saturate(100%) invert(75%) sepia(8%)
saturate(1127%) hue-rotate(353deg) brightness(86%) contrast(87%);
}
}
}
}
.product-thumbnail {
grid-area: img;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 10 / 6;
}
}
.product-add-to-cart {
grid-area: add;
margin: 20px 0;
@media only screen and (max-width: 630px) {
margin: auto;
width: 100% !important;
}
/* margin: auto; */
a {
@media only screen and (max-width: 630px) {
margin: auto;
width: 89% !important;
text-align: center !important;
margin-top: 20px;
justify-content: center !important;
}
text-decoration: none;
width: fit-content;
padding: 9px 15px;
border: 1px solid var(--accent-color);
background: var(--accent-color);
color: var(--white-color);
font-family: "Geologica";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
display: flex;
flex-direction: row;
justify-content: space-between;
box-shadow: inset 0 0 0 0 var(--white-color);
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
@media only screen and (min-width: 1000px) {
&:hover {
box-shadow: inset 400px 0 0 0 var(--white-color);
color: var(--accent-color);
}
&:hover::after {
filter: brightness(0) saturate(100%) invert(75%) sepia(8%)
saturate(1127%) hue-rotate(353deg) brightness(86%) contrast(87%);
}
}
}
}
.product-name {
display: none;
padding: 15px 38px 25px 55px;
grid-area: title;
font-size: 25.047px;
font-weight: 200;
letter-spacing: 0.835px;
a {
color: #fff;
transition: color 0.3s ease-out;
text-decoration: none;
}
a:visited,
a:focus {
color: #fff;
}
a:hover {
color: #fff;
}
}
}
}
}
.hide {
display: none !important;
}
@media only screen and (max-width: 750px) {
.woocommerce.yith-wcwl-form.wishlist-fragment {
tbody {
tr {
display: flex;
flex-direction: column;
.product-name {
text-align: center;
}
/* .product-thumbnail img {
width: 300px !important;
} */
}
}
}
}
span.required {
color: var(--accent-color);
}
.woocommerce-orders-table__row a {
justify-content: center !important;
text-decoration: none;
}
.ismailos-cta {
padding: 10px 0;
font-family: "Geologica";
font-size: 16px;
font-weight: 600;
line-height: 21.38px;
letter-spacing: 0.5333333611488342px;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
text-decoration: none;
text-transform: uppercase;
color: var(--white-color);
background-color: var(--accent-color);
border: 1px solid var(--accent-color);
box-shadow: inset 0 0 0 0 var(--white-color);
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
display: block;
width: 300px;
/* margin-left: 85px; */
}
.account-heading {
margin: 70px 20px 10px;
h1 {
color: var(--black-color);
font-family: "Geologica";
font-size: 35px;
font-style: normal;
font-weight: 600;
line-height: 32px;
letter-spacing: -0.583px;
text-transform: uppercase;
margin-bottom: 10px;
}
span:first-of-type {
margin-right: 5px;
}
span {
color: var(--black-color);
font-family: "Geologica";
font-size: 20px;
font-style: normal;
font-weight: 200;
line-height: 32px;
letter-spacing: -0.417px;
}
}
/* additions start */
#customer_login {
width: unset;
}
.woocommerce-account .woocommerce form .form-row {
margin: 0;
}
#customer_login form {
margin: 0;
padding: 0;
}
.woocommerce-account {
display: flex;
flex-direction: column;
min-height: 100vh;
font-size: 16px;
}
.woocommerce-account .woocommerce .col2-set::after,
.woocommerce-account .woocommerce .col2-set::before,
.woocommerce-account .woocommerce-page .col2-set::after,
.woocommerce-account .woocommerce-page .col2-set::before {
display: none;
}
.woocommerce form .form-row::after, .woocommerce form .form-row::before, .woocommerce-page form .form-row::after, .woocommerce-page form .form-row::before {
content: " ";
display: none;
}
.woocommerce form .show-password-input, .woocommerce-page form .show-password-input {
top: unset;
}
.header-wrapper.header-black{
padding-bottom: 0;
}
.account-icon-wrapper {
text-decoration: none;
}
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
border: none;
}
.woocommerce .woocommerce-form span.required,
.woocommerce-address-fields__field-wrapper abbr.required {
color: var(--accent-color) !important;
}
.account-heading {
grid-area: title;
}
.gold-txt {
color: var(--accent-color) ;
}
.woocommerce-edit-address .woocommerce .woocommerce-MyAccount-content,
.woocommerce-orders .woocommerce .woocommerce-MyAccount-content {
width: 100% !important;
}
.woocommerce-edit-address.woocommerce .woocommerce-ism-acc,
.woocommerce-orders .woocommerce .woocommerce-ism-acc {
width: fit-content !important;
}
.woocommerce table.shop_table {
border: none;
}
.woocommerce table.my_account_orders {
font-size: unset;
}
.woocommerce table.shop_table thead tr th{
text-align: center;
}
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tbody td,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th {
border-top: none;
width: 100%;
align-self: center;
}
.woocommerce table.shop_table tbody tr {
border-bottom: 1px solid #b89e7e;
display: flex;
}
.shop_table tr {
text-align: center;
}
.woocommerce-orders .shop_table td,
.woocommerce-orders .shop_table th {
padding-bottom: 20px !important;
padding-top: 20px !important;
}
.woocommerce-orders {
@media only screen and (max-width: 1024px) {
& .woocommerce-MyAccount-content {
& table {
& tbody {
& td {
max-width: fit-content;
}
}
}
}
}
}
.woocommerce table.shop_table_responsive tr td::before, .woocommerce-page table.shop_table_responsive tr td::before {
content: " ";
}
.woocommerce-edit-address .woocommerce-MyAccount-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
width: inherit;
}
.woocommerce-edit-address .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 {
float: unset;
width: max-content;
}
.woocommerce-edit-address .woocommerce-MyAccount-content .woocommerce-Address-title.title h2,
.woocommerce-edit-address .woocommerce-MyAccount-content h2 {
border-bottom: 1px solid #b89e7e;
margin-bottom: 20px;
width: max-content;
}
/* .woocommerce-edit-address .woocommerce-MyAccount-content .woocommerce-Address-title.title .edit {
float: left;
} */
@media only screen and (min-width: 677px) {
.woocommerce-edit-address .woocommerce-MyAccount-content .u-columns.woocommerce-Addresses.col2-set.addresses {
margin-left: -280px;
justify-content: space-evenly;
display: flex;
}
}
.woocommerce-edit-address .woocommerce-MyAccount-content {
justify-content: center;
padding: 10px;
}
.woocommerce-edit-address .woocommerce-MyAccount-content p {
margin-bottom: 40px;
}
.woocommerce-edit-address .woocommerce-MyAccount-content form {
width: 90%;
display: flex;
flex-direction: column;
align-items: center;
}
.woocommerce-edit-address .woocommerce-MyAccount-content form .woocommerce-address-fields,
.woocommerce-edit-address .woocommerce-MyAccount-content form .woocommerce-address-fields .woocommerce-address-fields__field-wrapper {
width: 100%;
}
.woocommerce-edit-address .woocommerce-MyAccount-content .woocommerce-address-fields .woocommerce-address-fields__field-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
justify-content: space-around;
}
@media only screen and (max-width: 1600px) {
.woocommerce-edit-address .woocommerce-MyAccount-content .woocommerce-address-fields .woocommerce-address-fields__field-wrapper {
grid-template-columns: 1fr 1fr;
}
}
@media only screen and (max-width: 850px) {
.woocommerce-edit-address .woocommerce-MyAccount-content .woocommerce-address-fields .woocommerce-address-fields__field-wrapper {
grid-template-columns: 1fr;
}
}
.woocommerce-edit-address .woocommerce-MyAccount-content .woocommerce-address-fields .woocommerce-address-fields__field-wrapper .form-row {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
justify-self: center;
margin-bottom: 50px;
width: max-content;
justify-content: end;
}
.woocommerce-edit-address .woocommerce-MyAccount-content .woocommerce-address-fields .woocommerce-address-fields__field-wrapper .form-row label {
color: rgba(0, 0, 0, 0.65);
padding-left: 10px;
}
.woocommerce-edit-address .woocommerce-MyAccount-content .woocommerce-address-fields .woocommerce-address-fields__field-wrapper .form-row input {
border: 1px solid #b89e7e;
background: none;
padding: 7px 10px;
border-radius: 0;
}
.woocommerce-edit-address .woocommerce-MyAccount-content .woocommerce-address-fields .woocommerce-address-fields__field-wrapper .form-row select,
.woocommerce-edit-address .woocommerce-MyAccount-content .woocommerce-address-fields .woocommerce-address-fields__field-wrapper .form-row .select2 {
border: 1px solid var(--accent-color);
background: var(--light-bg-color-secondary);
width: 100%;
padding: 9px 15px;
-webkit-appearance: none;
cursor: pointer;
}
.select2-container--default .select2-selection--single {
border: none;
border-radius: 0;
background-color: transparent;
}
.submit-btn {
display: flex;
justify-content: center;
}
.optional {
display: none !important;
}
#billing_country_field span {
pointer-events: none;
border: 1px solid #b89e7e;
background: none;
padding: 7px 10px;
width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-content {
width: unset;
}
.woocommerce-edit-account .woocommerce .woocommerce-EditAccountForm.edit-account p {
width: 100%;
}
@media only screen and (max-width: 1024px) {
& .woocommerce {
& .woocommerce-EditAccountForm.edit-account {
display: flex !important;
flex-direction: column;
}
}
}
.woocommerce-edit-account .woocommerce-EditAccountForm.edit-account .woocommerce-Button.button {
justify-content: center;
}
@media only screen and (max-width: 1024px) {
.woocommerce-edit-account .woocommerce {
padding: 0 30px;
}
}
@media only screen and (max-width: 1024px) {
.woocommerce-edit-address .woocommerce > div {
width: 0;
}
}
.woocommerce table.shop_table_responsive tbody th,
.woocommerce-page table.shop_table_responsive tbody th,
.woocommerce table.shop_table_responsive thead,
.woocommerce-page table.shop_table_responsive thead {
display: block;
}
.woocommerce table.shop_table_responsive thead tr {
width: 100%;
justify-content: space-around;
display: flex;
}
.woocommerce-orders .woocommerce {
place-items: flex-start;
}
.woocommerce-checkout h3.wc-block-components-checkout-step__heading {
margin-top: 35px 0 !important;
}
.woocommerce-checkout label {
color: rgba(0, 0, 0, 0.65);
padding-left: 10px;
}
.woocommerce-checkout input,
.woocommerce-checkout textarea,
.woocommerce form .form-row input {
border: 1px solid #b89e7e;
background: none;
padding: 7px 10px;
border-radius: 0;
}
.woocommerce-checkout input[type="radio"],
.woocommerce form .form-row input[type="radio"] {
accent-color: #b89e7e;
cursor: pointer;
}
.woocommerce-checkout select,
/* .select2-container--default .select2-selection--single, */
.woocommerce form .form-row select {
border: 1px solid var(--accent-color);
background: var(--light-bg-color-secondary);
width: 100%;
padding: 9px 15px;
-webkit-appearance: none;
cursor: pointer;
height: fit-content;
}
.woocommerce-checkout .select2-selection__arrow {
display: none;
}
.woocommerce-checkout .retrieve-options::after,
.woocommerce-checkout .select2-container--default::after {
content: "";
background-image: url(../assets/caret-down-single.svg);
background-repeat: no-repeat;
background-size: 60%;
width: 24px;
height: 24px;
position: absolute;
right: 5px;
top: 64%;
pointer-events: none;
}
.retrieve-options {
position: relative;
}
#billing_country_field {
display: none !important;
}
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment,
#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
background: transparent;
}
.woocommerce-checkout #payment div.payment_box::before {
border: none;
}
.woocommerce-checkout form.woocommerce-checkout {
grid-area: details;
width: fit-content !important;
max-width: 500px;
}
.woocommerce-checkout .ism-checkout-sidebar {
grid-area: summary;
width: 100%;
position: relative;
}
.woocommerce-checkout .ism-checkout-sidebar .wp-block-woocommerce-checkout-order-summary-block {
position: sticky;
top: 140px;
}
.woocommerce-checkout .ism-checkout-sidebar .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item a {
text-decoration: none;
color: var(--light-text-color);
}
.woocommerce-checkout .checkout-header {
text-transform: uppercase;
}
.payment_box {
display: block !important;
color: #000 !important;
}
.woocommerce-checkout #billing_email_field {
margin: 30px 0 !important;
}
.woocommerce-checkout .payment_box {
padding: 0 !important;
}
.woocommerce-checkout li.wc_payment_method {
margin-bottom: 30px !important;
}
#add_payment_method #payment ul.payment_methods,
.woocommerce-cart #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods {
border-bottom: none;
}
.woocommerce-checkout .total-price-of-items {
margin-bottom: 35px;
}
.ism-wrapper {
margin: 35px 0;
}
.woocommerce-billing-fields .ism-wrapper {
margin-top: 0;
}
#terms_and_conditions_field label {
color: #000;
line-height: normal;
}
#payment .form-row.place-order {
padding: 0 !important;
}
.wc_payment_methods.payment_methods.methods {
padding: 0 !important;
}
.woocommerce-checkout .ism-billing-wrapper {
display: grid;
grid-template-areas:
"first-name last-name"
"company company"
"address address "
"city city "
"state state "
"post-code phone ";
justify-content: space-around;
justify-items: start;
gap: 30px;
}
.woocommerce-checkout .ism-billing-wrapper #billing_first_name_field {
grid-area: first-name;
}
.woocommerce-checkout .ism-billing-wrapper #billing_last_name_field {
grid-area: last-name;
}
.woocommerce-checkout .ism-billing-wrapper #billing_company_field {
grid-area: company;
}
.woocommerce-checkout .ism-billing-wrapper #billing_address_1_field {
grid-area: address;
}
.woocommerce-checkout .ism-billing-wrapper #billing_city_field {
grid-area: city;
}
.woocommerce-checkout .ism-billing-wrapper #billing_state_field {
grid-area: state;
}
.woocommerce-checkout .ism-billing-wrapper #billing_postcode_field {
grid-area: post-code;
}
.woocommerce-checkout .ism-billing-wrapper #billing_phone_field {
grid-area: phone;
}
.woocommerce-checkout .ism-billing-wrapper p.form-row {
width: 100%;
display: flex;
flex-direction: column;
padding: 0;
}
@media only screen and (max-width: 1080px) {
.woocommerce-checkout .container-of-both {
grid-template-columns: 1fr;
grid-template-areas:
"header "
"summary"
"details";
justify-content: center;
}
.woocommerce-checkout .container-of-both form.woocommerce-checkout,
.woocommerce-checkout .woocommerce .col2-set .col-1,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .container-of-both .wp-block-woocommerce-checkout-order-summary-block{
width: 100vw !important;
}
}
.woocommerce-ResetPassword.lost_reset_password {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
padding: 0 20px;
}
.woocommerce-order-received .woocommerce-order-details table tr {
display: flex;
justify-content: space-between;
border: none !important;
gap: 10px;
}
.woocommerce-order-received .woocommerce-order-details table tr td,
.woocommerce-view-order .woocommerce-order-details table tr td {
font-weight: normal;
}
.woocommerce-order-received .woocommerce-order-details table tr > * {
padding: 0;
width: max-content !important;
}
.woocommerce-order-received .woocommerce ul.order_details li {
margin-right: 0 !important;
}
.checkbox.woocommerce-form__label.woocommerce-form__label-for-checkbox a {
text-decoration: underline;
}
.woocommerce ul.order_details li {
border: none;
}
.woocommerce-orders.woocommerce-account .woocommerce-MyAccount-content {
flex-direction: column;
align-items: center;
}
.woocommerce-pagination.woocommerce-pagination--without-numbers.woocommerce-Pagination {
display: flex;
gap: 20px;
}
.woocommerce-view-order .woocommerce {
flex-direction: row;
}
.woocommerce-view-order .woocommerce .woocommerce-MyAccount-content {
display: grid;
grid-template-areas:
"time time time "
"details details details"
"order order order ";
justify-content: space-evenly;
gap: 40px;
padding: 5px 10px 0 10px;
width: inherit;
width: 100%;
}
.woocommerce-view-order .woocommerce .woocommerce-MyAccount-content > p {
grid-area: time;
justify-self: flex-start;
margin: 20px 0;
}
.woocommerce-view-order .woocommerce .woocommerce-MyAccount-content .woocommerce-order-details {
grid-area: order;
width: fit-content;
}
.woocommerce-view-order .woocommerce .woocommerce-MyAccount-content .woocommerce-customer-details {
grid-area: details;
}
.woocommerce-customer-details {
display: flex;
justify-content: space-between;
}
.woocommerce-view-order .woocommerce-ism-acc {
padding: 0 100px;
grid-area: accountNav;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
align-self: start;
width: fit-content !important;
/* margin-top: 60px; */
margin-bottom: 60px;
}
.woocommerce-view-order .woocommerce table.shop_table tbody tr {
border-bottom: none;
}
.woocommerce-view-order .shop_table tr {
text-align: center;
justify-content: space-between;
display: flex;
gap: 10px;
}
.woocommerce-view-order .woocommerce table.shop_table th,
.woocommerce-view-order .woocommerce table.shop_table td {
padding: 0;
}
.woocommerce-account mark {
padding: .1875em;
color: var(--dark-color) !important;
background-color: var(--accent-color) !important;
font-weight: 500 !important;
}
.woocommerce-view-order h2.woocommerce-column__title {
margin-bottom: 20px;
border-bottom: 1px solid #b89e7e;
width: fit-content;
}
.woocommerce-view-order .woocommerce .woocommerce-customer-details address {
border: none;
}
.woocommerce-view-order .woocommerce table.shop_table tbody th,
.woocommerce-view-order .woocommerce table.shop_table tbody td,
.woocommerce-view-order .woocommerce table.shop_table tfoot td,
.woocommerce-view-order .woocommerce table.shop_table tfoot th {
width: max-content;
}
.ism-note-row {
max-width: 500px;
}
.woocommerce-edit-address .woocommerce-MyAccount-content .woocommerce-Address .u-column1.woocommerce-Address {
display: flex;
flex-direction: column;
}
.woocommerce-Address-title.title a.edit {
text-decoration: underline;
}
/* additions end */
#select2-billing_state-container {
min-width: 175px;
}
.woocommerce-account .woocommerce-notices-wrapper, .woocommerce-message {
display: block !important;
}
.woocommerce-account .woocommerce-notices-wrapper {
width: 100%;
padding: 0 30px;
}
.woocommerce-MyAccount-content > p {
padding: 0 30px;
}
.woocommerce-error, .woocommerce-info, .woocommerce-message {
background-color: var(--light-bg-color) !important;
color: var(--dark-color) !important;
}
.woocommerce-info{
width: 100%;
border-top-color: var(--accent-color) !important;
}
.woocommerce-info::before {
color: var(--accent-color) !important;;
}
.order-failed {
margin-bottom: 2em;
padding: 1em;
}
.order-failed::before {
content: url('data:image/svg+xml; utf, ') !important;
margin-right: 10px;
/* align-self: self-start; */
content: url('data:image/svg+xml; utf, ') !important;
}
.woocommerce-order-failed-overview {
grid-area: message;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 4em;
}
.woocommerce-order-failed-overview .woocommerce-thankyou-order-failed-actions {
display: flex;
justify-content: space-between;
gap: 20px;
}
.woocommerce-ism-acc {
align-self: flex-start;
}
.woocommerce-account:not(.logged-in) input,
.woocommerce-lost-password input {
border-radius: 0 !important;
border: 1px solid #b89e7e !important;
background: none !important;
padding: 7px 10px !important;
}
.woocommerce .wishlist-title h2 {
vertical-align: middle;
color: var(--black-color);
font-family: "Geologica";
font-size: 35px;
font-style: normal;
font-weight: 600;
line-height: 32px;
letter-spacing: -0.583px;
text-transform: uppercase;
margin-bottom: 10px;
}
.woocommerce-wishlist form {
min-height: 75vh;
}
.compare-heading h1 {
margin-bottom: 10px !important;
}
.compare-heading a.transparent-btn {
margin-top: 30px;
}
.ismailos .compare-heading .compare-empty {
color: var(--black-color);
font-family: "Geologica";
font-size: 25px;
font-style: normal;
font-weight: 400;
line-height: 32px;
letter-spacing: -0.417px;
}
.mercedez .compare-heading .compare-empty {
color: var(--black-color);
font-family: "CorpoS";
font-size: 25px;
font-style: normal;
font-weight: 400;
line-height: 32px;
letter-spacing: -0.417px;
}
@media only screen and (min-width: 690px) and (max-width: 995px) {
#customer_login form .form-row .woocommerce-button,
#register-toggle,
#register-toggle {
width: fit-content !important;
margin-left: unset !important;
}
}
#register_newsletter {
width: fit-content !important;
}
.woocommerce-edit-address .woocommerce-MyAccount-content a,
.woocommerce-dashboard .woocommerce-MyAccount-content a,
.woocommerce-form p a {
text-decoration: underline;
}
@media screen and (max-width: 1024px) {
.woocommerce-account .woocommerce-MyAccount-content {
min-height: 55vh;
}
}
.the_champ_login_container {
display: flex;
justify-content: center;
}
.theChampLogin.theChampFacebookBackground.theChampFacebookLogin::after {
content: "";
background-image: url(../assets/facebook-square.png);
width: 25px;
height: 25px;
display: block;
background-repeat: no-repeat;
background-size: contain;
}
.theChampFacebookLogoContainer {
display: none;
}
div.the_champ_login_container i.theChampFacebookBackground {
background-color: unset !important;
}
#theChampGoogleButton {
background-color: unset !important;
border: none;
}
.theChampLoginSvg.theChampGoogleLoginSvg {
display: none !important;
}
#theChampGoogleButton::after {
content: "";
/* background-image: url(../assets/mail-icon.png); */
background-image: url(../assets/google-icon.svg);
width: 25px;
height: 25px;
display: block;
background-repeat: no-repeat;
background-size: contain;
}
.theChampLogin.theChampInstagramBackground.theChampInstagramLogin::after{
content: "";
background-image: url(../assets/instagram-icon.png);
width: 25px;
height: 25px;
display: block;
background-repeat: no-repeat;
background-size: contain;
}
.theChampLogin.theChampInstagramBackground.theChampInstagramLogin {
background: unset !important;
}
.theChampLoginSvg.theChampInstagramLoginSvg {
display: none !important;
}
.woocommerce-form.woocommerce-form-login.login {
display: flex;
flex-direction: column;
align-items: center;
}