html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}
html {
-webkit-text-size-adjust: 100%;
}
/* Prevent items movement when lazy loading images */
img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }
input { outline: none; }
.woocommerce form .form-row label {
line-height: initial;
}
.grecaptcha-badge {
display: none;
}
/* Fix min input size to avoid iPhone zoom */
textarea,
input,
select {
font-size: 16px;
}
:root {
--hint-color: #ee815e;
--base-color: #1D1D1D;
--base-color-dark: #000000;
--base-color-light: #1d1d1d88;
--hint-color-light: #f8cec3;
--hint-color-dark: #ee815e0a;
--hint-color-extralight: #f8cec380;
--extra-color: #eec55e;
}
/* Necesario para background del spinner */
html {
position: relative;
min-height: 100%;
}
html,body,div,p,a,ul,li,h1,h2,h3,h4,h5,h6,h7,h8 {
font-family: "Sora", sans-serif;
font-optical-sizing: auto;
font-size: 16px;
font-weight: 300;
font-style: normal;
}
body.modal-open {
overflow: hidden;
}
#primary {
padding-left: 30px;
padding-right: 30px;
}
.container {
max-width: 1500px !important;
margin: 0 auto;
}
a {
color: var(--hint-color);
text-decoration: none;
}
strong {
font-weight: 500;
}
.text-highlight {
color: var(--hint-color);
}
.hidden {
display: none;
}
.modal-wrapper-bg {
background-color: #000000de;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 999;
display: none;
}
.modal-wrapper-bg .modal-wrapper-container {
width: 95%;
max-width: 500px;
max-height: 95%;
overflow-y: auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #FFF;
padding: 60px 30px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.modal-wrapper-bg .modal-wrapper-close {
position: absolute;
top: 15px;
right: 15px;
font-weight: bold;
cursor: pointer;
}
.button-outlined {
background-color: #FFF;
width: auto;
padding-right: 15px;
padding-left: 15px;
text-transform: uppercase;
text-decoration: none;
color: var(--hint-color);
font-weight: 800;
border: 3px solid var(--hint-color);
cursor: pointer;
}
.button-outlined:hover {
background-color: var(--hint-color);
color: #FFF;
}
.button-filled {
background-color: var(--base-color);
width: auto;
padding-right: 15px;
padding-left: 15px;
text-transform: uppercase;
text-decoration: none;
color: #FFF;
font-weight: 800;
border: 3px solid var(--base-color);
cursor: pointer;
}
.button-filled:hover {
background-color: var(--base-color-light)
}
.button-filled.featured {
background-color: var(--hint-color);
border: 3px solid var(--hint-color);
}
.button-filled.featured:hover {
background-color: #000000;
border-color: #000000;
}
.button-filled.extra {
background-color: var(--extra-color);
border: 3px solid var(--extra-color);
color: #000;
}
.button-filled.extra:hover {
background-color: #000000;
border-color: #000000;
color: #FFF;
}
.button-outlined-dark {
background-color: #FFF;
width: auto;
padding-right: 15px;
padding-left: 15px;
text-transform: uppercase;
text-decoration: none;
color: #000;
font-weight: 800;
border: 3px solid #000;
cursor: pointer;
}
.button-outlined-dark:hover {
background-color: #00000033;
}
/* SPINNER */
#custom-spinner-container {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: #000000ad;
z-index: 9999;
}
#custom-spinner .spinner {
animation: spin 1s linear infinite;
position: fixed;
top: calc(50% - 60px);
left: calc(50% - 30px);
transform: translate(-50%, -50%);
max-width: 100px;
max-height: 100px;
width: 60px;
}
/* GOOGLE MAPS AUTOCOMPLETE OPTIONS FOR SEARCH*/
.pac-container {
z-index: 99999;
}
@media screen and (max-width: 650px) {
#primary {
padding-left: 3%;
padding-right: 3%;
}
.modal-wrapper-bg .modal-wrapper-container {
top: 25%;
}
}
.archive-wrapper {
display: flex;
align-items: start;
gap: 50px;
margin-top: 30px;
}
#category-nav-buttom {
position: fixed;
z-index: 99;
padding: 10px 30px;
font-weight: 400;
font-size: 15px;
display: none;
justify-content: center;
align-items: center;
gap: 10px;
bottom: 10px;
left: 10px;
}
#category-nav-buttom img {
width: 20px;
}
.archive-wrapper .sidebar-overlay {
display: none;
}
.archive-wrapper .shop-menu-close {
display: none;
}
.archive-wrapper .archive-sidebar {
width: 250px;
min-width: 250px;
max-width: 250px;
position: sticky;
top: 110px;
flex-shrink: 0;
display: flex;
align-items: start;
}
.archive-wrapper .archive-container {
flex: 1;
}
.archive-wrapper .products-loop-wrapper {
display: flex;
flex-wrap: wrap;
gap: 50px 15px;
justify-content: start;
align-items: start;
}
.archive-wrapper .product-loop-item {
max-width: 280px;
}
.archive-wrapper .product-loop-item img {
border: 1px solid #CCC;
max-width: 100%;
height: auto;
}
.archive-wrapper .product-loop-item:hover img {
border-color: var(--hint-color);
}
.archive-wrapper .product-loop-item h2 {
color: #444;
display: block;
text-align: center;
margin-top: 10px;
line-height: 22px;
}
.archive-wrapper .product-loop-item span.price {
display: block;
width: 100%;
text-align: center;
margin-top: 20px;
color: #444;
}
.archive-wrapper .product-loop-item span.price ins {
text-decoration: none;
}
.archive-wrapper .product-loop-item span.price ins bdi {
text-decoration: none;
font-weight: 600;
font-size: 22px;
margin-left: 5px;
color: red;
}
.archive-wrapper #infinite-scroll-flag {
margin-top: 40px;
}
.archive-wrapper #infinite-scroll-flag img {
height: 40px;
display: block;
margin: auto;
animation: spin 1s linear infinite;
}
.archive-wrapper .woocommerce-no-products-found {
text-align: center;
margin-top: 40px;
}
@media screen and (max-width: 950px) {
.archive-wrapper .archive-sidebar {
display: none;
}
#category-nav-buttom {
display: flex;
}
.archive-wrapper.menu-opened .archive-sidebar {
display: block;
position: fixed;
background-color: #FFF;
width: 300px;
max-width: 300px;
z-index: 999;
top: 0;
left: 0;
padding-top: 30px;
padding-left: 20px;
height: 100%;
overflow-y: scroll;
}
#category-nav-buttom.hidden {
display: none;
}
.archive-wrapper.menu-opened #shop-menu-title {
display: none;
}
.archive-wrapper.menu-opened .sidebar-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000b3;
z-index: 999;
display: block;
}
.archive-wrapper.menu-opened .shop-menu-close {
text-decoration: underline;
text-align: right;
cursor: pointer;
margin-bottom: 45px;
margin-top: 20px;
display: block;
}
.archive-wrapper.menu-opened .shop-menu-close:hover {
color: var(--hint-color);
}
}
@media screen and (max-width: 650px) {
.archive-wrapper .products-loop-wrapper {
gap: 40px 0px;
justify-content: space-between;
padding-left: 0;
padding-right: 0;
}
.archive-wrapper .product-loop-item {
flex: 0 0 49%;
box-sizing: border-box;
}
.archive-wrapper .product-loop-item h2 {
line-height: 22px;
font-size: 15px;
}
.archive-wrapper .product-loop-item span.price {
margin-top: 10px;
}
}
#shop-menu-wrapper {
width: 250px;
}
#shop-menu-title {
font-weight: 500;
font-size: 18px;
margin-bottom: 25px;
}
#shop-menu-title .shop-menu-title-underline {
width: 50px;
height: 2px;
background-color: #000;
margin-top: 10px;
}
#shop-menu-catalogue .shop-menu-catalogue-item-wrapper {
margin-bottom: 25px;
margin-top: 25px;
}
#shop-menu-catalogue .shop-menu-catalogue-item {
display: flex;
justify-content: space-between;
align-items: center;
line-height: 20px;
}
#shop-menu-catalogue .shop-menu-catalogue-item a {
color: #444;
font-size: 14px;
}
#shop-menu-catalogue .shop-menu-catalogue-item a:hover {
color: var(--hint-color);
}
#shop-menu-catalogue .shop-menu-catalogue-item-tick {
width: 20px;
height: 20px;
background-image: url("../img/tick-down-darkgrey.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
cursor: pointer;
}
#shop-menu-catalogue .shop-menu-catalogue-item-wrapper.opened .shop-menu-catalogue-item-tick {
background-image: url("../img/tick-up-darkgrey.svg");
}
#shop-menu-catalogue .shop-menu-catalogue-item.subategory {
display: none;
margin-bottom: 15px;
margin-top: 15px;
}
#shop-menu-catalogue .shop-menu-catalogue-item.subategory .shop-menu-catalogue-item-bullet {
width: 10px;
height: 10px;
background-image: url(../img/tick-right-darkgrey.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
display: inline-block;
margin-right: 10px;
margin-left: 5px;
}
#shop-menu-catalogue .shop-menu-catalogue-item-wrapper.opened .shop-menu-catalogue-item.subategory {
display: block;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#header-sentinel {
height: 0;
visibility: hidden;
width: 100%;
}
#header-wrapper {
padding: 10px 30px;
margin-bottom: 15px;
background-color: #FFF;
position: sticky;
top: 0;
transition: padding 0.3s ease-in-out;
z-index: 999;
}
#header-wrapper.stuck {
padding-top: 5px;
padding-bottom: 5px;
}
#header-wrapper.fixed {
padding-top: 5px;
padding-bottom: 5px;
position: fixed;
width: 100%;
}
#header-wrapper .header {
display: flex;
align-items: center;
justify-content: space-between;
}
#header-wrapper .header-logo {
width: 100px;
}
#header-wrapper .header-logo img {
max-width: 100px;
max-height: 90px;
}
#header-wrapper .header-navigation {
display: flex;
gap: 20px;
justify-content: end;
align-items: center;
}
#header-wrapper .header-navigation-menu {
display: flex;
gap: 30px;
justify-content: end;
align-items: center;
}
#header-wrapper .header-navigation-menu a {
color:var(--base-color);
font-size: 15px;
}
#header-wrapper .header-navigation-menu a:hover {
color: var(--hint-color);
}
#header-wrapper .header-navigation-menu .header-menu-group-icon {
width: 10px;
height: 10px;
background-image: url("../img/tick-down-darkgrey.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
display: inline-block;
margin-left: 5px;
}
#header-wrapper #header-menu-groups-wrapper {
margin: auto;
background-color: #FFF;
position: absolute;
left: 0;
width: 100%;
padding-top: 40px;
padding-bottom: 30px;
padding-left: 30px;
padding-right: 30px;
border-bottom: 1px solid #EEE;
height: 0px;
visibility: hidden;
opacity: 0;
overflow: hidden;
transition: height 0.5s ease-in-out, opacity 0.3s ease-in-out;
}
#header-wrapper #header-menu-groups-wrapper.active {
height: auto;
overflow: visible;
opacity: 1;
visibility: visible;
z-index: 99;
}
#header-wrapper .header-menu-groups {
max-width: 1500px;
margin: auto;
}
#header-wrapper .header-menu-group-wrapper {
display: flex;
justify-content: end;
align-items: start;
background-color: #FFF;
gap: 10px 30px;
flex-wrap: wrap;
}
#header-wrapper .header-menu-group-wrapper.hidden {
display: none;
}
#header-wrapper .header-menu-group-block {
display: flex;
flex-direction: column;
gap: 20px;
justify-content: start;
align-items: start;
flex-wrap: wrap;
}
#header-wrapper .header-menu-group-block-title {
font-weight: 500;
font-size: 15px;
}
#header-wrapper .header-menu-group-block,
#header-wrapper .header-menu-group-block a {
color:var(--base-color);
font-size: 15px;
}
#header-wrapper .header-menu-group-block a:hover {
color: var(--hint-color);
}
#header-wrapper .header-navigation-extras {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 20px;
justify-content: end;
align-items: center;
}
#header-wrapper .header-navigation-extras a {
display: inline-block;
white-space: nowrap;
}
#header-wrapper .header-navigation-extras .header-navigation-extras-icon {
display: inline-block;
color: var(--base-color);
}
#header-wrapper .header-navigation-extras .header-navigation-extras-icon:hover {
color: var(--hint-color);
}
#header-wrapper .header-navigation-extras .header-navigation-extras-icon svg {
width: 23px;
height: 23px;
}
#header-wrapper .header-navigation-catalogue-mobile-wrapper {
display: none;
}
#header-wrapper .header-navigation-catalogue-mobile-wrapper a {
color: var(--base-color);
font-size: 15px;
text-transform: uppercase;
font-weight: bold;
}
#header-wrapper .header-navigation-extras #header-navigation-extras-menu-mobile {
display: none;
width: 35px;
height: 35px;
border: 1px solid var(--base-color);
padding: 3px;
}
#header-wrapper .header-navigation-extras #header-navigation-extras-menu-mobile svg {
width: 100%;
height: 100%;
}
#header-wrapper .header-navigation-extras #header-navigation-extras-menu-mobile svg path {
fill: var(--base-color);
}
#header-menu-search-wrapper.active {
display: block;
}
#header-menu-search-wrapper form {
display: flex;
justify-content: center;
gap: 20px;
}
#header-menu-search-wrapper input {
outline: none;
background-color: #FFF;
font-size: 15px;
width: 300px;
border: 1px solid var(--base-color);
border-radius: 0px;
height: 40px;
max-width: 100%;
font-size: 25px;
color: var(--base-color);
}
#header-notification-banner-wrapper {
width: 100%;
padding: 12px 30px;
display: flex;
justify-content: center;
align-items: center;
}
#header-notification-banner-wrapper .header-notification-banner-container {
width: 100%;
}
#header-notification-banner-wrapper .header-notification-banner-container p {
font-size: 13px;
}
#header-wrapper .header-menu-mobile-wrapper {
display: none;
position: fixed;
z-index: 999;
background-color: #FFF;
height: 100%;
width: 100%;
left: 0;
padding: 20px;
flex-direction: column;
overflow-y: scroll;
padding-bottom: 120px;
}
#header-wrapper .header-menu-mobile-wrapper.active {
display: flex;
}
#header-wrapper .header-navigation-menu-mobile {
display: flex;
flex-direction: column;
}
#header-wrapper .header-navigation-menu-mobile div.header-menu-item.header-menu-group {
padding-bottom: 15px;
padding-top: 15px;
border-bottom: 1px solid #ccc;
}
#header-wrapper .header-navigation-menu-mobile div.header-menu-item a.header-menu-link {
color: var(--base-color);
display: block;
width: 100%;
padding-bottom: 15px;
padding-top: 15px;
border-bottom: 1px solid #ccc;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: start;
gap: 10px;
}
#header-wrapper .header-navigation-menu-mobile div.header-menu-item a.header-menu-link:hover {
color: var(--hint-color);
}
#header-wrapper .header-navigation-menu-mobile .header-menu-group-title {
color: var(--base-color);
font-weight: 600;
font-size: 15px;
margin-bottom: 20px;
}
#header-wrapper .header-navigation-menu-mobile .header-menu-group-block-title {
font-size: 14px;
}
#header-wrapper .header-navigation-menu-mobile .header-menu-group-wrapper.hidden {
display: flex;
}
#header-wrapper .header-navigation-menu-mobile #header-menu-item-close {
display: block;
width: 100%;
text-align: right;
text-decoration: underline;
margin-bottom: 20px;
cursor: pointer;
color: var(--base-color);
}
#header-wrapper .header-navigation-menu-mobile .header-navigation-extras-icon svg {
width: 23px;
height: 23px;
}
@media screen and (max-width: 950px) {
#header-wrapper .header-navigation-menu {
display: none;
}
#header-menu-search-wrapper input {
max-width: 60%;
}
#header-wrapper .header-navigation-catalogue-mobile-wrapper {
display: flex;
}
#header-wrapper .header-menu-group-wrapper {
justify-content: space-between;
}
#header-wrapper .header-navigation-extras .header-navigation-extras-search {
display: none;
}
#header-wrapper .header-navigation-extras .header-navigation-extras-account-link {
display: none;
}
#header-wrapper .header-navigation-extras #header-navigation-extras-menu-mobile {
display: flex;
}
}
@media screen and (max-width: 950px) {
#header-wrapper {
padding: 20px 5px;
}
}
/* Trustbadge */
[id^="trustbadge-container-"] {
z-index: 999 !important;
}
@media screen and (max-width: 1760px) {
.woocommerce-cart [id^="trustbadge-container-"],
.woocommerce-checkout [id^="trustbadge-container-"] {
display: none;
}
}
.category-customblock {
margin-bottom: 90px;
}
.category-customblock .emptyblock {
display: block;
width: 100%;
height: auto;
}
.category-customblock h1 {
font-size: 24px;
font-weight: 300;
text-transform: uppercase;
color: #444;
margin-bottom: 15px;
}
.category-customblock h2 {
font-size: 17px;
margin-top: 15px;
margin-bottom: 15px;
text-transform: uppercase;
color: #444;
}
.category-customblock .category-contentblock {
line-height: 30px;
margin-top: 15px;
margin-bottom: 15px;
}
.category-customblock .category-contentblock strong,
.category-customblock .category-contentblock b {
font-weight: bold;
color: #444;
}
.category-customblock .category-contentblock img {
max-width: 90%;
margin: auto;
display: block;
}
.category-customblock .category-contentblock a {
color: var(--hint-color);
}
.category-customblock .category-contentblock a:hover {
text-decoration: underline;
}
.category-customblock .category-categoryblock {
display: flex;
align-items: end;
justify-content: space-evenly;
flex-wrap: wrap;
margin-top: 30px;
margin-bottom: 30px;
gap: 40px 10px;
}
.category-customblock .categoryblock-item-wrapper {
width: 150px;
min-width: 150px;
height: 150px;
background-color: #CCC;
background-size: cover;
background-position: center center;
border-radius: 200px;
box-sizing: border-box;
}
.category-customblock .categoryblock-item-name {
width: 100%;
text-align: center;
margin-top: 15px;
color: #444;
font-weight: 300;
text-transform: uppercase;
font-size: 13px;
}
.category-customblock .categoryblock-item:hover .categoryblock-item-name{
color: var(--hint-color);
}
.category-customblock .category-productsblock {
display: flex;
align-items: end;
justify-content: space-evenly;
flex-wrap: wrap;
gap: 25px;
margin-top: 30px;
margin-bottom: 30px;
}
.category-customblock .productsblock-item-wrapper {
width: 250px;
min-width: 200px;
height: 200px;
background-color: #CCC;
display: flex;
align-items: end;
justify-content: center;
background-size: cover;
background-position: center center;
border: 1px solid #CCC;
padding-bottom: 15px;
}
.category-customblock .productsblock-item-wrapper:hover {
border-color: var(--hint-color);
}
.category-customblock .productsblock-item-name {
width: 100%;
text-align: center;
background-color: #FFF;
padding: 10px 5px;
color: #444;
font-weight: 300;
text-transform: uppercase;
font-size: 13px;
}
.category-customblock .productsblock-item:hover .productsblock-item-name{
color: var(--hint-color);
}
.single-product-wrapper {
display: flex;
gap: 50px;
flex-wrap: nowrap;
align-items: start;
justify-content: space-between;
}
.woocommerce .single-product-wrapper .woocommerce-breadcrumb {
justify-content: start;
}
.single-product-wrapper .product-title {
font-size: 30px;
font-weight: 600;
line-height: 40px;
color: var(--base-color);
margin-bottom: 15px;
}
.single-product-wrapper .product-subtitle {
font-size: 19px;
font-weight: 600;
line-height: 27px;
color: #5d5d5d;
margin-bottom: 15px;
}
.single-product-wrapper .delivery-info-wrapper {
display: flex;
justify-content: end;
margin-top: 10px;
font-size: 14px;
line-height: 16px;
font-weight: 800;
color: green;
}
.single-product-wrapper .secure-payment-wrapper {
display: flex;
justify-content: end;
margin-top: 5px;
}
.single-product-wrapper .toggle-item {
border-bottom: 1px solid #CCC;
}
.single-product-wrapper .toggle-item.toggle-item-first {
margin-top: 30px;
}
.single-product-wrapper .toggle-item .toggle-item-title-wrapper {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding-top: 18px;
padding-bottom: 18px;
}
.single-product-wrapper .toggle-item .toggle-item-title {
font-weight: 300;
text-transform: uppercase;
font-size: 15px;
}
.single-product-wrapper .toggle-item .toggle-item-title-wrapper:hover .toggle-item-title,
.single-product-wrapper .toggle-item.open .toggle-item-title {
font-weight: 500;
}
.single-product-wrapper .toggle-item .toggle-item-icon {
width: 13px;
height: 10px;
background-image: url(../img/accordeon-closed.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.single-product-wrapper .toggle-item.open .toggle-item-icon {
transform: scaleY(-1);
}
.single-product-wrapper .toggle-item.disabled .toggle-item-icon {
display: none;
}
.single-product-wrapper .toggle-item .toggle-item-content {
display: none;
margin-top: 10px;
font-size: 16px;
line-height: 30px;
padding-bottom: 30px;
}
.single-product-wrapper .toggle-item.open .toggle-item-content {
display: block;
}
.single-product-wrapper .toggle-item .toggle-item-content p {
margin-bottom: 15px;
}
.single-product-wrapper .toggle-item .toggle-item-content p b {
font-weight: bold;
}
.single-product-wrapper .toggle-item .toggle-item-content h1 {
font-size: 24px;
line-height: 32px;
font-weight: 600;
margin-bottom: 15px;
margin-top: 30px;
}
.single-product-wrapper .toggle-item .toggle-item-content h2 {
font-size: 20px;
line-height: 28px;
font-weight: 600;
margin-bottom: 15px;
margin-top: 30px;
}
.single-product-wrapper .toggle-item .toggle-item-content h3 {
font-size: 16px;
line-height: 24px;
font-weight: 600;
margin-bottom: 15px;
margin-top: 30px;
}
.single-product-wrapper .toggle-item .toggle-item-content h4 {
font-size: 14px;
line-height: 22px;
font-weight: 600;
margin-bottom: 15px;
margin-top: 30px;
}
.single-product-wrapper .toggle-item .toggle-item-content ul {
margin-bottom: 30px;
margin-top: 30px;
padding-left: 20px;
}
.single-product-wrapper .toggle-item .toggle-item-content ol {
list-style-type: decimal;
margin-bottom: 15px;
margin-top: 30px;
}
.single-product-wrapper .toggle-item .toggle-item-content li {
list-style-type: disc;
margin-bottom: 15px;
}
.single-product-wrapper .default-buttom-container table.variations {
display: none;
}
.single-product-reviews-wrapper {
margin-top: 100px;
}
@media screen and (max-width: 950px) {
.single-product-wrapper {
flex-direction: column;
align-items: center;
}
}
.single-product-wrapper .single-product-left-wrapper {
position: sticky;
top: 90px;
flex: 0 1 600px;
max-width: 600px;
min-width: 0;
}
.single-product-wrapper .single-product-right-wrapper {
flex: 1 0 530px;
min-width: 530px;
}
.single-product-wrapper .product-single-gallery-wrapper {
width: 100%;
}
#product-single-gallery-main {
position: relative;
}
#product-single-gallery-main a {
cursor: initial;
}
#product-single-gallery-main img {
width: 100%;
height: auto;
}
#product-single-gallery-main .product-single-gallery-main-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.9);
border: none;
font-size: 28px;
cursor: pointer;
padding: 5px 10px;
z-index: 10;
user-select: none;
transition: background 0.3s ease, opacity 0.3s ease;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
#product-single-gallery-main .product-single-gallery-main-arrow:hover {
background: rgba(255, 255, 255, 1);
}
#product-single-gallery-main .product-single-gallery-main-arrow.left {
left: 5px;
}
#product-single-gallery-main .product-single-gallery-main-arrow.right {
right: 5px;
}
#product-single-gallery-thumbs-wrapper {
position: relative;
overflow: hidden;
}
#product-single-gallery-thumbs-wrapper.scrollable {
padding-left: 35px;
padding-right: 35px;
}
#product-single-gallery-thumbs-wrapper .product-single-gallery-thumbs-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: white;
border: none;
font-size: 24px;
cursor: pointer;
padding: 4px 8px;
display: none;
}
#product-single-gallery-thumbs-wrapper.scrollable .product-single-gallery-thumbs-arrow {
display: block;
}
#product-single-gallery-thumbs-wrapper .product-single-gallery-thumbs-arrow.left { left: 0; }
#product-single-gallery-thumbs-wrapper .product-single-gallery-thumbs-arrow.right { right: 0; }
#product-single-gallery-thumbs {
display: flex;
flex-wrap: nowrap;
gap: 10px;
overflow: hidden;
padding: 10px 0px;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
/* Estilo de cada thumbnail */
#product-single-gallery-thumbs .woocommerce-product-gallery__image {
flex: 0 0 auto;
scroll-snap-align: start;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
}
@media screen and (max-width: 950px) {
.single-product-wrapper .single-product-left-wrapper {
position: relative;
top: 0px;
flex: 1;
max-width: 100%;
}
.single-product-wrapper .single-product-right-wrapper {
flex: 1;
min-width: auto;
}
}
@media screen and (max-width: 650px) {
}
/* GENERAL */
/* LABEL */
/* OPTIONS */
/* GENERAL */
.single-product-wrapper .product-customizer-wrapper {
margin-top: 18px;
}
.single-product-wrapper .product-customizer-title {
font-weight: 300;
text-transform: uppercase;
font-size: 15px;
}
.single-product-wrapper .product-customizer-description {
margin-top: 10px;
font-size: 16px;
line-height: 30px;
}
.single-product-wrapper .customizer-price-block {
margin-top: 18px;
flex-shrink: 0;
position: sticky;
top: 90px;
}
.single-product-wrapper .product-customizer-content {
margin-top: 45px;
}
.single-product-wrapper .custom-field {
margin-top: 25px;
margin-bottom: 40px;
}
.single-product-wrapper .custom-field.hidden {
display: none;
}
.single-product-wrapper .custom-field .custom-field-description {
margin-top: 10px;
margin-bottom: 20px;
font-size: 16px;
line-height: 30px;
text-align: justify;
}
.single-product-wrapper .custom-field .custom-field-errors {
padding: 20px 10px;
background-color: #ff000017;
font-weight: 300;
color: #900000;
margin-top: 25px;
}
.single-product-wrapper .custom-field .custom-field-error {
display: block;
}
.single-product-wrapper .custom-field .custom-field-errors,
.single-product-wrapper .custom-field .custom-field-error.hidden {
display: none;
}
.single-product-wrapper .custom-field.invalid.modified .custom-field-errors {
display: block;
}
.single-product-wrapper .custom-field-extra-price {
text-align: right;
}
.single-product-wrapper .custom-field-extra-price-inner {
width: auto;
display: inline-block;
padding: 10px;
font-size: 18px;
}
.single-product-wrapper .custom-field-extra-price b {
font-weight: 600;
}
.single-product-wrapper .custom-field-extra-price.hidden {
display: none;
}
.single-product-wrapper .custom-field-extra-info {
text-align: right;
}
.single-product-wrapper .custom-field-extra-info-inner {
width: auto;
display: inline-block;
padding: 10px 15px;
font-size: 16px;
border: 2px solid var(--hint-color-light);
}
.single-product-wrapper .custom-field-extra-info b {
font-weight: 600;
}
.single-product-wrapper .custom-field-extra-info.hidden {
display: none;
}
.single-product-wrapper .custom-field-extra-base {
text-align: right;
}
.single-product-wrapper .custom-field-extra-base-inner {
width: auto;
display: inline-block;
padding: 10px;
font-size: 18px;
}
.single-product-wrapper .custom-field-extra-base b {
font-weight: 600;
}
.single-product-wrapper .custom-field-extra-base.hidden {
display: none;
}
.single-product-wrapper .custom-field-price-label {
font-weight: bold;
font-size: 16px;
background-color: #ee815e36;
padding: 10px;
}
/* GENERAL */
/* LABEL */
.single-product-wrapper .custom-field .custom-field-label {
font-size: 18px;
font-weight: 500;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-self: start;
gap: 10px
}
.single-product-wrapper .custom-field .custom-field-label .customize-icon {
font-size: 19px;
background-color: #000;
border-radius: 20px;
color: #FFF;
height: 30px;
line-height: 32px;
padding: 0px 11px;
}
.single-product-wrapper .custom-field .custom-field-label .custom-field-label-selection {
font-weight: 300;
text-transform: uppercase;
}
/* LABEL */
/* OPTIONS */
.single-product-wrapper .custom-field .custom-field-options {
margin-top: 15px;
margin-bottom: 15px;
display: flex;
justify-content: center;
align-items: start;
flex-wrap: wrap;
gap: 20px;
}
.single-product-wrapper .custom-field .custom-field-option-price {
margin-top: 10px;
}
.single-product-wrapper .custom-field .custom-field-option-wrapper {
display: flex;
align-items: center;
flex-direction: column;
}
.single-product-wrapper .custom-field .custom-field-option-top-sales {
font-weight: bold;
font-size: 15px;
margin-top: 10px;
color: var(--hint-color);
text-transform: uppercase;
}
.single-product-wrapper .custom-field .custom-field-option {
width: 60px;
height: 60px;
border: 1px solid #CCC;
display: inline-block;
padding: 2px;
cursor: pointer;
}
.single-product-wrapper .custom-field.invalid.modified .custom-field-option {
border-color: #ff0000;
}
.single-product-wrapper .custom-field.invalid.modified .custom-field-option:hover,
.single-product-wrapper .custom-field .custom-field-option:hover {
border-color: var(--base-color);
}
.single-product-wrapper .custom-field .custom-field-option.medium {
width: 160px;
height: 160px;
}
.single-product-wrapper .custom-field .custom-field-option.big {
width: 300px;
height: 300px;
}
.single-product-wrapper .custom-field .custom-field-option.text.mini,
.single-product-wrapper .custom-field .custom-field-option.text.medium,
.single-product-wrapper .custom-field .custom-field-option.text.big {
width: auto;
height: auto;
line-height: 24px;
font-size: 24px;
padding: 12px;
margin-bottom: 10px;
}
.single-product-wrapper .custom-field .custom-field-option.selected {
border: 3px solid var(--base-color);
padding: 0px;
}
.single-product-wrapper .custom-field .custom-field-option .custom-field-option-fill {
width: 100%;
height: 100%;
}
.single-product-wrapper .custom-field .custom-field-option.image .custom-field-option-fill {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* OPTIONS */
.product-single-gallery-wrapper #mini-selected-image img {
width: 100%;
height: auto;
}
/* INPUTS */
.single-product-wrapper .custom-field .custom-field-input-price {
display: flex;
justify-content: end;
margin-bottom: 10px;
}
.single-product-wrapper .custom-field .custom-field-input {
font-size: 20px;
margin-top: 15px;
margin-bottom: 15px;
}
.single-product-wrapper .custom-field textarea {
width: 100%;
height: 80px;
padding-left: 5px;
padding-right: 5px;
border: 1px solid #000;
}
.single-product-wrapper .custom-field .custom-field-input input[type=file] {
padding: 10px;
border: 1px solid #ccc;
display: flex;
width: fit-content;
}
.single-product-wrapper .custom-field .custom-field-select,
.single-product-wrapper .custom-field .custom-field-select {
margin-top: 15px;
margin-bottom: 15px;
}
.single-product-wrapper .custom-field input,
.single-product-wrapper .custom-field select {
width: 100%;
height: 50px;
padding-left: 5px;
padding-right: 5px;
border: 1px solid #000;
background-color: #FFF;
}
.single-product-wrapper .custom-field input[type=file] {
border: none;
font-size: 15px;
}
.single-product-wrapper .custom-field .custom-field-extra {
text-align: left;
margin-top: 15px;
margin-bottom: 15px;
}
.single-product-wrapper .custom-field .custom-field-extra .custom-field-extra-checkbox-wrapper {
display: flex;
align-items: center;
justify-content: start;
gap: 10px;
}
.single-product-wrapper .custom-field .custom-field-extra input[type=checkbox] {
height: 30px;
width: 30px;
display: inline;
vertical-align: middle;
}
.single-product-wrapper .custom-field .custom-field-extra .custom-field-extra-label {
display: inline-block;
font-size: 20px;
margin-left: 7px;
vertical-align: middle;
line-height: 28px;
}
/* INPUTS */
/* MAP */
.single-product-wrapper .custom-field .custom-field-map-action {
display: flex;
justify-content: start;
align-items: start;
}
.single-product-wrapper .custom-field .custom-field-map-action .custom-field-map-action-explore {
display: flex;
justify-content: start;
align-items: center;
gap: 10px;
cursor: pointer;
border: 1px solid #CCC;
padding: 10px;
padding-right: 20px;
}
.single-product-wrapper .custom-field .custom-field-map-action .custom-field-map-action-explore.hidden {
display: none;
}
.single-product-wrapper .custom-field .custom-field-map-action .custom-field-map-action-explore:hover {
border-color: #000;
}
.single-product-wrapper .custom-field .custom-field-map-action .custom-field-map-action-explore img {
width: 40px;
}
.single-product-wrapper .custom-field.custom-field-map .custom-field-map-result {
width: 200px;
height: 200px;
border: 3px solid #000;
box-sizing: content-box;
}
.single-product-wrapper .custom-field.custom-field-map .custom-field-map-result .custom-map-overlay {
width: 200px;
height: 200px;
position: absolute;
z-index: 99;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.single-product-wrapper .custom-field.custom-field-map .custom-field-map-result img {
width: 100%;
height: 100%;
}
.single-product-wrapper .custom-field.custom-field-map .custom-field-map-result-change {
margin-top: 10px;
display: flex;
justify-content: start;
gap: 0px;
align-items: center;
cursor: pointer;
}
.single-product-wrapper .custom-field.custom-field-map .custom-field-map-result-change img {
width: 30px;
aspect-ratio: 1 / 1;
object-fit: contain;
}
/* MAP */
/*MAP SELECTOR*/
.single-product-wrapper .custom-field-map-selector-wrapper {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.single-product-wrapper .custom-field-map-selector-wrapper.hidden {
display: none;
}
.single-product-wrapper .custom-field-map-selector-wrapper .custom-field-map-selector {
padding: 40px 30px;
}
.single-product-wrapper .custom-field-map-selector .custom-map-search-input input {
height: 40px;
font-size: 16px;
}
.single-product-wrapper .custom-field-map-selector .custom-map-content-wrapper {
margin-top: 15px;
}
.single-product-wrapper .custom-field-map-selector .custom-map-content {
height: 400px;
width: 400px;
margin: auto;
}
.single-product-wrapper .custom-field-map-selector .leaflet-control-attribution {
display: none;
}
.single-product-wrapper .custom-field-map-selector .custom-map-content .custom-map-overlay {
width: 400px;
height: 400px;
position: absolute;
z-index: 999;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
pointer-events: none;
}
.single-product-wrapper .custom-field-map-selector .custom-map-reset {
cursor: pointer;
font-weight: 500;
margin-top: 20px;
display: flex;
justify-content: end;
align-items: center;
gap: 5px;
}
.single-product-wrapper .custom-field-map-selector .custom-map-reset img {
width: 30px;
height: 30px;
}
.single-product-wrapper .custom-field-map-selector .custom-map-actions {
display: flex;
justify-content: end;
align-items: center;
gap: 20px;
margin-top: 20px;
}
.single-product-wrapper .custom-field-map-selector .custom-map-actions .custom-map-actions-cancel {
padding-top: 10px;
padding-bottom: 10px;
}
.single-product-wrapper .custom-field-map-selector .custom-map-actions .custom-map-actions-ok {
padding-top: 10px;
padding-bottom: 10px;
}
/*MAP SELECTOR*/
/* ADD TO CART */
.single-product-wrapper form.cart .default-buttom-container {
text-align: right;
pointer-events: auto;
}
.single-product-wrapper form.cart .woocommerce-add-to-cart-wrapper {
display: flex;
justify-content: right;
align-items: center;
gap: 10px;
}
.single-product-wrapper form.cart .default-buttom-container .quantity {
float: none;
margin: 0;
padding: 0;
}
.single-product-wrapper form.cart .default-buttom-container .quantity input,
.single-product-wrapper form.cart .default-buttom-container #quantity-alt {
width: 46px;
height: 46px;
padding-left: 5px;
padding-right: 5px;
border: 1px solid #000;
background-color: #FFF;
color: #000;
font-size: 20px;
font-weight: 900;
text-align: center;
}
.single-product-wrapper form.cart .default-buttom-container .quantity input.hidden,
.single-product-wrapper form.cart .default-buttom-container #quantity-alt.hidden {
display: none;
}
.single-product-wrapper form.cart .default-buttom-container #quantity-alt {
vertical-align: top;
}
.single-product-wrapper form.cart .default-buttom-container #quantity-alt:disabled {
background-color: #CCC;
}
.single-product-wrapper form.cart .default-buttom-container button.single_add_to_cart_button {
padding: 10px 20px;
font-size: 16px;
}
.single-product-wrapper form.cart .addtocart-price-total-label {
display: flex;
justify-content: end;
margin-bottom: 10px;
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
}
.single-product-wrapper form.cart .addtocart-price-base p.price {
font-size: 40px;
font-weight: 900;
text-align: right;
margin-bottom: 0px;
color: #000;
}
.single-product-wrapper form.cart .addtocart-price-base p.price del {
font-size: 25px;
font-weight: 600;
margin-right: 10px;
}
.single-product-wrapper form.cart .addtocart-price-base p.price ins {
text-decoration: none;
color: red;
}
.single-product-wrapper #addtocart-container-wrapper-sentinel {
height: 1px;
width: 100%;
}
.single-product-wrapper #addtocart-container-wrapper {
transition: bottom 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}
.single-product-wrapper #addtocart-container-wrapper.bottom-sticky {
position: fixed;
bottom: 0px;
width: 100%;
left: 0;
transform: translateY(0);
opacity: 1;
pointer-events: none;
z-index: 99;
}
.single-product-wrapper #addtocart-container-wrapper.bottom-sticky .addtocart-container-wrapper-inner {
max-width: 1500px;
margin: auto;
}
.single-product-wrapper #addtocart-container-wrapper.bottom-sticky .addtocart-container-details-wrapper {
float: right;
padding: 15px;
border: 3px solid #000;
background-color: #ffffffc7;
margin-bottom: 5px;
pointer-events: all;
}
@media screen and (max-width: 650px) {
.single-product-wrapper #addtocart-container-wrapper.bottom-sticky .addtocart-container-details-wrapper {
margin-right: 5px;
}
.single-product-wrapper .custom-field-map-selector-wrapper .custom-field-map-selector {
padding: 40px 0px;
top: 50%;
overflow: scroll;
text-align: center;
min-width: 400px;
}
.modal-wrapper-bg .custom-map-search {
padding-left: 20px;
padding-right: 20px;
}
.single-product-wrapper .custom-field-map-selector .custom-map-reset {
padding-right: 20px;
}
.single-product-wrapper .custom-field-map-selector .custom-map-actions {
gap: 5px;
padding-right: 20px;
padding-left: 20px;
}
}
@media screen and (max-width: 450px) {
.single-product-wrapper .custom-field .custom-field-option.medium {
width: 130px;
height: 130px;
}
}
.woocommerce-cart-form {
}
.woocommerce-cart-items-wrapper {
}
.woocommerce-cart-items-wrapper .cart-item {
margin-bottom: 30px;
display: flex;
justify-content: start;
align-items: center;
gap: 40px;
border-bottom: 1px solid #CCC;
padding-bottom: 35px;
}
.woocommerce-cart-items-wrapper .cart-item .cart-item-col {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.woocommerce-cart-items-wrapper .cart-item .cart-item-image {
width: 180px;
}
.woocommerce-cart-items-wrapper .cart-item .cart-item-name {
padding-top: 10px;
align-items: start;
padding-left: 10px;
flex: 1 1 auto;
}
.woocommerce-cart-items-wrapper .cart-item .cart-item-name a {
font-size: 17px;
line-height: 25px;
font-weight: 400;
color: var(--base-color) !important;
}
.woocommerce-cart-items-wrapper .cart-item .cart-item-name a:hover {
color: var(--hint-color) !important;
}
.woocommerce-cart-items-wrapper .cart-item .cart-item-custom-details {
margin-top: 10px;
}
.woocommerce-cart .cart-item-custom-details dt,
.woocommerce-cart .cart-item-custom-details dd {
margin: 0px;
}
.woocommerce-cart .cart-item-custom-details dt {
margin-top: 15px;
margin-bottom: 5px;
font-size: 10px;
color: #999;
}
.woocommerce-cart .cart-item-custom-details dd p {
font-size: 14px;
color: #000;
font-weight: 400;
}
.woocommerce-cart .cart-item-custom-details .custom-field-file-image {
width: 100px;
height: auto;
margin: 0;
padding: 0;
}
.woocommerce-cart .cart-item-custom-details .custom-field-map-result p,
.woocommerce-cart .cart-item-custom-details .custom-field-map-result img {
width: 100px;
height: 100px;
margin: 0;
padding: 0;
}
.woocommerce-cart .cart-item-custom-details .custom-field-map-result .custom-map-overlay {
width: 100px;
height: 100px;
position: absolute;
z-index: 99;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
pointer-events: none;
}
.woocommerce-cart-items-wrapper .cart-item .cart-item-prices-wrapper {
display: flex;
gap: 15px;
flex-wrap: nowrap;
flex: 3 1 0;
justify-content: space-between;
align-items: center;
max-width: 420px;
flex: 0 0 420px;
}
.woocommerce-cart-items-wrapper .cart-item .cart-item-price-label {
font-size: 10px;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 15px;
color: #999;
}
.woocommerce-cart-items-wrapper .cart-item .cart-item-price-units .cart-item-price-value {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.woocommerce-cart-items-wrapper .cart-item .cart-item-price-units .cart-item-price-units-action {
font-size: 13px;
font-weight: 400;
padding: 0px 4px;
line-height: 16px;
border-radius: 6px;
background-color: #000;
color: #FFF;
cursor: pointer;
width: 18px;
text-align: center;
}
.woocommerce-cart-items-wrapper .cart-item .cart-item-price-units .cart-item-price-units-action:hover {
background-color: #666;
}
.woocommerce-cart-items-wrapper .cart-item .cart-item-price-units .quantity {
display: none;
}
.woocommerce-cart-items-wrapper .cart-item .cart-item-price-total bdi {
font-weight: 700;
}
.woocommerce-cart-items-wrapper .cart-item .cart-item-remove {
flex: 0 0 50px;
}
.woocommerce-cart-items-wrapper .cart-item .cart-item-remove a {
color: #FFF !important;
background-color: #a90000;
font-size: 13px;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
text-align: center;
line-height: 21px;
font-weight: 300;
}
.woocommerce-cart-items-wrapper .cart-item .cart-item-remove a:hover {
background-color: #e44242;
}
.cart-collaterals-wrapper {
margin-top: 30px;
display: flex;
justify-content: space-between;
align-items: start;
gap: 100px;
}
.cart-collaterals-wrapper .cart-collaterals-side {
flex: 1;
}
.cart-collaterals-wrapper .coupon {
display: flex;
justify-content: start;
align-items: center;
gap: 10px;
}
.cart-collaterals-wrapper .coupon input {
width: 200px;
height: 40px;
border: 1px solid #000;
padding-left: 10px;
padding-right: 10px;
font-size: 14px;
}
.cart-collaterals-wrapper .coupon button {
height: 40px;
}
.woocommerce-cart #update-cart {
display: none;
}
.woocommerce .cart-collaterals-wrapper .cart-collaterals,
.woocommerce-page .cart-collaterals-wrapper .cart-collaterals {
width: 100%;
max-width: 500px;
}
.woocommerce-cart .cart-collaterals-wrapper .cart_totals,
.woocommerce-page .cart-collaterals-wrapper .cart_totals {
width: auto;
float: none;
}
.cart-collaterals-wrapper .cart_totals .cart-totals-item {
display: flex;
gap: 10px;
padding-bottom: 20px;
border-bottom: 1px solid #000;
margin-bottom: 20px;
}
.cart-collaterals-wrapper .woocommerce-shipping-totals .checkout-billing-field-title {
text-transform: uppercase;
margin-bottom: 10px;
}
.cart-collaterals-wrapper .checkout-billing-shipping-warning,
.cart-collaterals-wrapper .woocommerce-shipping-totals .checkout-billing-field-info {
font-size: 14px;
line-height: 16px;
color: green;
font-weight: 400;
padding-left: 5px;
}
.cart-collaterals-wrapper .cart_totals .cart-totals-item-label {
text-transform: uppercase;
}
.cart-collaterals-wrapper .cart_totals .cart-totals-item-value,
.cart-collaterals-wrapper .cart_totals .cart-totals-item-value strong {
font-weight: 600;
}
.cart-collaterals-wrapper .cart_totals .cart-totals-item-value small {
display: none;
}
.cart-collaterals-wrapper .cart_totals .cart-total .cart-totals-item-savings {
text-align: right;
color: green;
font-weight: 600;
margin-bottom: 5px;
margin-top: 5px;
}
.cart-collaterals-wrapper .cart_totals .cart-totals-item .wc-proceed-to-checkout-price-total-before bdi {
font-size: 15px !important;
margin-right: 5px;
text-decoration: line-through;
font-weight: 600;
color: #000 !important;
}
.cart-collaterals-wrapper .cart_totals .cart-total.cart-totals-item .onsale bdi {
color: red;
font-size: 20px;
}
.cart-collaterals-wrapper .woocommerce-shipping-totals-title {
text-transform: uppercase;
margin-bottom: 15px;
}
.cart-collaterals-wrapper .woocommerce-shipping-totals {
margin-bottom: 20px;
}
.cart-collaterals-wrapper .woocommerce-shipping-totals ul#shipping_method {
padding-bottom: 20px;
border-bottom: 1px solid;
margin-bottom: 20px;
}
.cart-collaterals-wrapper .woocommerce-shipping-totals .woocommerce-shipping-methods li {
display: flex;
justify-content: start;
align-items: center;
gap: 10px;
}
.cart-collaterals-wrapper .woocommerce-shipping-totals .woocommerce-shipping-methods input {
margin: 0;
padding: 0;
}
.cart-collaterals-wrapper .woocommerce-shipping-totals .woocommerce-shipping-methods label {
font-size: 13px;
font-weight: 600;
margin: 0;
padding: 0;
line-height: 17px;
}
.cart-collaterals-wrapper .woocommerce-shipping-totals p.woocommerce-shipping-destination {
padding-bottom: 20px;
border-bottom: 1px solid;
margin-bottom: 20px;
}
.cart-collaterals-wrapper .secure-payment-wrapper {
display: flex;
justify-content: end;
}
.cart-empty-wrapper {
justify-content: start;
display: flex;
flex-direction: column;
align-items: center;
}
.cart-empty-wrapper .return-to-shop {
margin-top: 30px;
}
.cart-empty-wrapper .return-to-shop a {
padding: 12px 20px;
}
.woocommerce-cart .wc-proceed-to-checkout a.button-filled.featured.checkout-button.button {
background-color: var(--hint-color);
border: 3px solid var(--hint-color);
}
.woocommerce-cart .wc-proceed-to-checkout a.button-filled.featured.checkout-button.button:hover {
background-color: #000000;
border-color: #000000;
}
.single-product-wrapper #addtocart-container-wrapper-sentinel {
height: 1px;
width: 100%;
}
.wc-proceed-to-checkout .wc-proceed-to-checkout-total-label {
display: none;
justify-content: end;
margin-bottom: 10px;
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
}
.wc-proceed-to-checkout .wc-proceed-to-checkout-price-savings {
display: block;
text-align: right;
color: green;
font-weight: 600;
margin-bottom: 10px;
margin-top: 5px;
line-height: 20px;
}
.wc-proceed-to-checkout .wc-proceed-to-checkout-price-savings.forsticked {
display: none;
}
.wc-proceed-to-checkout .wc-proceed-to-checkout-price {
display: none;
text-align: right;
}
.wc-proceed-to-checkout .wc-proceed-to-checkout-price bdi {
font-size: 35px;
font-weight: 900;
text-align: right;
margin-bottom: 0px;
color: #000;
}
.wc-proceed-to-checkout .wc-proceed-to-checkout-price small {
display: none;
}
.wc-proceed-to-checkout .wc-proceed-to-checkout-price-total-before bdi {
font-size: 19px;
margin-right: 5px;
text-decoration: line-through;
font-weight: 600;
color: #000 !important;
}
.wc-proceed-to-checkout .wc-proceed-to-checkout-price.onsale bdi {
color: red;
}
.wc-proceed-to-checkout.bottom-sticky {
position: fixed;
bottom: 0px;
transform: translateY(0);
opacity: 1;
margin: 0;
padding: 0;
padding: 15px;
border: 3px solid #000;
background-color: #ffffffc7;
margin-bottom: 5px;
margin-left: 90px;
z-index: 99;
right: calc((100vw - 1500px) / 2);
}
.wc-proceed-to-checkout.bottom-sticky .wc-proceed-to-checkout-price {
display: block;
}
.wc-proceed-to-checkout.bottom-sticky .wc-proceed-to-checkout-total-label {
display: flex;
}
.wc-proceed-to-checkout.bottom-sticky .wc-proceed-to-checkout-price-savings {
display: none;
}
.wc-proceed-to-checkout.bottom-sticky .wc-proceed-to-checkout-price-savings.forsticked {
display: block;
}
.woocommerce-cart .wc-proceed-to-checkout.bottom-sticky a.checkout-button {
padding-top: 10px;
padding-bottom: 10px;
margin-top: 5px;
margin-bottom: 0px;
}
.woocommerce-cart .wc-proceed-to-checkout.bottom-sticky .ppc-button-wrapper,
.woocommerce-cart .wc-proceed-to-checkout.bottom-sticky .ppcp-messages {
display: none !important;
}
@media screen and (max-width: 1500px) {
.wc-proceed-to-checkout.bottom-sticky {
margin-left: 0px;
right: 30px;
}
}
@media screen and (max-width: 950px) {
.woocommerce-cart-items-wrapper .cart-item .cart-item-prices-wrapper {
flex-direction: column;
max-width: 100px;
gap: 40px;
flex: 0 0 100px;
}
.woocommerce-cart-items-wrapper .cart-item .cart-item-col.cart-item-price-single {
display: none;
}
.woocommerce-cart-items-wrapper .cart-item .cart-item-price-label {
margin-bottom: 8px;
}
.woocommerce-cart-items-wrapper .cart-item .cart-item-remove {
flex: 1;
}
}
@media screen and (max-width: 650px) {
.woocommerce-cart-items-wrapper .cart-item {
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.woocommerce-cart-items-wrapper .cart-item .cart-item-image {
order: 1;
}
.woocommerce-cart-items-wrapper .cart-item .cart-item-name {
order: 3;
}
.woocommerce-cart-items-wrapper .cart-item .cart-item-prices-wrapper {
order: 2;
}
.cart-collaterals-wrapper {
flex-direction: column;
gap: 50px;
}
.woocommerce-cart-items-wrapper .cart-item .cart-item-price-units .cart-item-price-units-action {
width: 30px;
line-height: 30px;
font-size: 25px;
}
.wc-proceed-to-checkout.bottom-sticky {
margin-left: 0px;
right: 5px;
}
}
.woocommerce-notices-wrapper {
border: none;
outline: none;
max-width: 1500px;
margin: 0 auto;
margin-bottom: 30px;
}
.woocommerce-notices-wrapper:empty {
display: none;
}
.woocommerce-NoticeGroup,
.woocommerce-notices-wrapper {
flex: 0 0 100%;
}
.woocommerce-NoticeGroup .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-error {
background-color: #FFF;
border: 1px solid #CCC;
border-top: 3px solid #b81c23;
padding: 8px 20px 10px 20px;
position: relative;
}
.woocommerce-NoticeGroup .woocommerce-error li,
.woocommerce-notices-wrapper .woocommerce-error li {
margin-top: 10px;
margin-bottom: 10px;
font-size: 14px;
padding-left: 10px;
}
.woocommerce-notices-wrapper .woocommerce-error li b {
font-weight: 800;
}
.woocommerce-NoticeGroup .woocommerce-error a,
.woocommerce-notices-wrapper .woocommerce-error a {
color: #000;
}
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-error::before {
display: none;
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-info:focus-visible,
.woocommerce-message:focus-visible {
border: none;
margin: auto;
background-color: transparent;
outline: none;
}
.woocommerce-message a,
.woocommerce-info a {
font-weight: 500;
}
.woocommerce-message,
.woocommerce-info::before {
color: #000;
}
.woocommerce .custom-map-overlay.leftheart {
background-image: url("../img/mask-map-heart-2a.png");
}
.woocommerce .custom-map-overlay.rigthheart {
background-image: url("../img/mask-map-heart-2b.png");
}
.woocommerce .custom-map-overlay.heart {
background-image: url("../img/mask-map-heart.png");
}
.woocommerce .custom-map-overlay.circle {
background-image: url("../img/mask-map-circle.png");
}
.woocommerce .woocommerce-breadcrumb {
display: flex;
justify-content: end;
margin-bottom: 5px;
font-size: 11px;
line-height: 16px;
gap: 5px;
text-transform: uppercase;
flex-wrap: wrap;
}
.woocommerce .woocommerce-breadcrumb a {
font-size: 11px;
line-height: 16px;
color: #000;
font-weight: 400;
}
.woocommerce .woocommerce-breadcrumb a:hover {
color: var(--hint-color);
}
.woocommerce .woocommerce-breadcrumb .crumb:last-child,
.woocommerce .woocommerce-breadcrumb .crumb-separator:nth-last-child(2) {
display: none;
}
.woocommerce .woocommerce-shipping-totals .shipping-custom-items {
text-align: left;
padding: 15px 5px;
}
.woocommerce .woocommerce-shipping-totals .shipping-custom-items .shipping-custom-item {
border: 1px solid #000;
margin-bottom: 10px;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
line-height: 21px;
}
.woocommerce .woocommerce-shipping-totals .shipping-custom-items .shipping-custom-item.active {
background-color: var(--hint-color-light) !important;
border-color: var(--hint-color);
}
.woocommerce .woocommerce-shipping-totals .shipping-custom-items .shipping-custom-item-label {
font-weight: bold;
margin-bottom: 5px;
}
.woocommerce .woocommerce-shipping-totals .shipping-custom-items .shipping-custom-item-extra,
.woocommerce .woocommerce-shipping-totals .shipping-custom-items .shipping-custom-item-time {
font-size: 14px;
line-height: 19px;
font-weight: 300;
margin-top: 5px;
}
.woocommerce .woocommerce-shipping-totals .shipping-custom-items .shipping-custom-item-extra-info {
margin-top: 5px;
font-size: 14px;
font-weight: 500;
}
.woocommerce .woocommerce-shipping-totals .shipping-custom-items .shipping-custom-item-price {
text-align: right;
margin-top: 10px;
font-size: 18px;
font-weight: bold;
}
.woocommerce .woocommerce-shipping-totals .shipping-custom-items .shipping-custom-item-check {
display: none;
}
.woocommerce .woocommerce-shipping-totals .shipping-message {
font-size: 14px;
line-height: 16px;
font-weight: 300;
}
form.woocommerce-checkout {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
flex-wrap: nowrap;
}
form.woocommerce-checkout .woocommerce-checkout-wrapper {
display: flex;
flex-direction: row;
justify-content: center;
align-items: start;
flex-wrap: nowrap;
}
form.woocommerce-checkout .checkout-actions {
padding: 30px;
display: flex;
justify-content: end;
align-items: start;
}
form.woocommerce-checkout .checkout-cart {
flex-shrink: 0;
position: sticky;
top: 90px;
}
form.woocommerce-checkout .checkout-actions-content {
max-width: 450px;
}
form.woocommerce-checkout .checkout-cart .checkout-cart-content {
width: 500px;
padding: 30px;
background-color: var(--hint-color-extralight);
}
form.woocommerce-checkout .checkout-billing-field {
margin-bottom: 30px;
}
form.woocommerce-checkout .checkout-billing-field-title {
font-weight: 600;
font-size: 20px;
margin-bottom: 12px;
}
.woocommerce form.woocommerce-checkout .checkout-billing-field-content.two-columns {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: start;
}
.woocommerce form.woocommerce-checkout .form-row.two-columns p {
flex: 0 0 50%;
}
.woocommerce form.woocommerce-checkout p.create-account label{
cursor: pointer;
font-weight: 400;
font-size: 15px;
margin-bottom: 12px;
}
.woocommerce form.woocommerce-checkout .woocommerce-account-fields {
margin-top: 25px;
}
.woocommerce form.woocommerce-checkout .payment-wrapper {
margin-top: 25px;
}
.woocommerce form.woocommerce-checkout .payment-wrapper #payment {
background-color: transparent;
border-radius: 20px;
}
.woocommerce form.woocommerce-checkout .payment-wrapper .ppcp-messages {
margin-top: 20px;
margin-bottom: 20px;
border: 1px dashed #CCC;
padding: 9px 10px;
}
.woocommerce form.woocommerce-checkout .payment-wrapper #payment .payment_methods {
margin: 0;
padding: 0;
}
.woocommerce form.woocommerce-checkout .payment-wrapper #payment .payment_methods .payment_method_title {
padding: 20px 15px;
}
.woocommerce form.woocommerce-checkout .payment-wrapper #payment .payment_methods .payment_method_title {
display: flex;
align-items: center;
gap: 10px;
justify-content: start;
cursor: pointer;
font-weight: 400;
}
.woocommerce form.woocommerce-checkout .payment-wrapper #payment .payment_methods .payment_method_title label {
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
cursor: pointer;
font-weight: 400;
}
.woocommerce form.woocommerce-checkout .payment-wrapper #payment .payment_methods .payment_method_title img {
max-height: 20px;
}
.woocommerce form.woocommerce-checkout .payment-wrapper #payment .payment_methods input[type="radio"] {
width: 20px;
height: 20px;
margin: 0px;
padding: 0px;
}
.woocommerce form.woocommerce-checkout .payment-wrapper #payment .wc_payment_method {
border: 1px solid #EEE;
}
.woocommerce form.woocommerce-checkout .payment-wrapper #payment .wc_payment_method:first-child {
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}
.woocommerce form.woocommerce-checkout .payment-wrapper #payment .wc_payment_method:last-child {
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
.woocommerce form.woocommerce-checkout .payment-wrapper #payment .wc_payment_method .payment_box {
background-color: #f5fbff;
margin: 0;
padding: 15px;
font-size: 16px;
}
.woocommerce form.woocommerce-checkout .payment-wrapper #payment .wc_payment_method .payment_box p {
font-weight: 300;
font-size: 13px;
line-height: 20px;
}
.woocommerce form.woocommerce-checkout .payment-wrapper #payment .wc_payment_method .payment_box::before {
display: none;
}
.woocommerce form.woocommerce-checkout .payment-wrapper #payment .wc_payment_method:last-child .payment_box {
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
.woocommerce form.woocommerce-checkout .payment-wrapper #payment .wc_payment_method.selected {
border-color: #36a0d9;
background-color: #eff7ff;
}
.woocommerce form.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce form.woocommerce-checkout .woocommerce-privacy-policy-text p,
.woocommerce form.woocommerce-checkout .woocommerce-privacy-policy-text p a {
font-size: 12px;
line-height: 18px;
}
.woocommerce form.woocommerce-checkout .checkout-terms-wrapper > label{
display: flex;
align-items: center;
gap: 10px;
justify-content: start;
margin-top: 18px;
cursor: pointer;
}
.woocommerce form.woocommerce-checkout .checkout-terms-wrapper > label input {
width: 20px;
height: 20px;
margin: 0px;
order: 1;
}
.woocommerce form.woocommerce-checkout .checkout-terms-wrapper > label .woocommerce-terms-and-conditions-checkbox-text {
order: 3;
}
.woocommerce form.woocommerce-checkout .checkout-terms-wrapper > label abbr {
order: 2;
}
.woocommerce form.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text,
.woocommerce form.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text,
.woocommerce form.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a {
font-size: 14px;
line-height: 18px;
}
.woocommerce form.woocommerce-checkout .woocommerce-privacy-policy-text p a,
.woocommerce form.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a {
font-weight: 400;
color: #000;
text-decoration: underline;
}
.woocommerce-checkout .checkout-payment-container #place_order {
padding: 10px 20px;
font-size: 20px;
margin-top: 40px;
background-color: var(--hint-color);
border: 3px solid var(--hint-color);
color: #FFF;
text-transform: uppercase;
font-weight: 800;
}
.woocommerce-checkout .checkout-payment-container #place_order:hover {
background-color: #000000;
border-color: #000000;
}
.woocommerce-checkout .woocommerce-form-login-wrapper {
border: 1px solid #000;
margin-bottom: 50px;
outline: none;
}
.woocommerce-checkout .woocommerce-form-login-toggle {
border: none;
margin: 0;
}
.woocommerce-checkout .woocommerce-shipping-methods-wrapper {
margin-bottom: 30px;
}
.woocommerce-checkout .woocommerce-shipping-methods-wrapper .woocommerce-shipping-totals-title {
font-size: 15px;
text-transform: uppercase;
font-weight: 500;
}
.woocommerce-checkout .woocommerce-shipping-methods-wrapper .checkout-billing-field-info,
.woocommerce-checkout .woocommerce-shipping-methods-wrapper .checkout-billing-shipping-warning {
font-size: 13px;
line-height: 16px;
}
.woocommerce-checkout .woocommerce-shipping-methods-wrapper ul#shipping_method {
margin-top: 15px;
}
.woocommerce-checkout .woocommerce-shipping-methods-wrapper ul#shipping_method li {
line-height: 1.5em;
list-style: none outside;
display: flex;
gap: 10px;
justify-content: left;
align-items: center;
margin: 0;
border: 1px solid #DDD;
padding: 15px 10px;
cursor: pointer;
background-color: #FFF;
}
.woocommerce-checkout .woocommerce-shipping-methods-wrapper ul#shipping_method li:first-child {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.woocommerce-checkout .woocommerce-shipping-methods-wrapper ul#shipping_method li:last-child {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.woocommerce-checkout .woocommerce-shipping-methods-wrapper ul#shipping_method li input {
width: 20px;
height: 20px;
margin: 0;
}
.woocommerce-checkout .woocommerce-shipping-methods-wrapper ul#shipping_method li.selected {
background-color: #eff7ff;
border-color: #36a0d9;
}
.woocommerce-checkout .checkout-cart-item {
display: flex;
justify-content: space-between;
align-items: start;
gap: 40px;
margin-bottom: 20px;
margin-top: 15px;
}
.woocommerce-checkout .checkout-cart-item .checkout-cart-item-content {
width: 100%;
margin-bottom: 15px;
}
.woocommerce-checkout .checkout-cart-item .checkout-cart-item-info {
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px
}
.woocommerce-checkout .checkout-cart-item .checkout-cart-item-name {
font-size: 16px;
line-height: 20px;
font-weight: 500;
}
.woocommerce-checkout .checkout-cart-item dl.variation {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.woocommerce-checkout .checkout-cart-item dl.variation .variation-item {
display: flex;
justify-content: start;
align-items: center;
gap: 10px;
line-height: 15px;
}
.woocommerce-checkout .checkout-cart-item dl.variation dt,
.woocommerce-checkout .checkout-cart-item dl.variation dd {
margin: 0;
font-size: 10px;
}
.woocommerce-checkout .checkout-cart-item dl.variation dt {
color: #999;
padding-top: 2px;
}
.woocommerce-checkout .checkout-cart-item dl.variation dd p {
font-size: 12px;
}
.woocommerce-checkout .checkout-cart-item dl.variation dd .custom-field-file-image img {
width: 100px;
height: auto;
margin: 0;
padding: 0;
}
.woocommerce-checkout .checkout-cart-item dl.variation dd p img {
width: 100px;
height: 100px;
margin: 0;
padding: 0;
}
.woocommerce-checkout .checkout-cart-item dl.variation dd .custom-field-map-result .custom-map-overlay {
width: 100px;
height: 100px;
position: absolute;
z-index: 99;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
pointer-events: none;
}
.woocommerce-checkout .checkout-cart-item .checkout-cart-item-total {
width: 80px;
text-align: right;
}
.woocommerce-checkout .cart-subtotal,
.woocommerce-checkout .order-total,
.woocommerce-checkout .cart-discount,
.woocommerce-checkout .cart-fee,
.woocommerce-checkout .tax-rate {
display: flex;
flex-direction: column;
justify-content: end;
align-items: end;
gap: 8px;
margin-bottom: 10px;
padding-top: 10px;
border-top: 1px solid #CCC;
padding-bottom: 10px;
}
.woocommerce-checkout .checkout-totals-label {
font-weight: 600;
text-transform: uppercase;
font-size: 14px;
}
.woocommerce-checkout .checkout-totals-value {
font-size: 18px;
}
.woocommerce-checkout .order-total .checkout-totals-value bdi {
font-size: 25px;
font-weight: 800;
}
.woocommerce-checkout .checkout-totals-value small {
display: none;
}
.woocommerce-checkout .secure-payment-wrapper {
display: flex;
justify-content: end;
}
.woocommerce-checkout .minimum-order-warning {
color: red;
margin-top: 30px;
margin-bottom: 30px;
border: 1px solid red;
padding: 20px;
}
.woocommerce-checkout .coupon-form-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.woocommerce-checkout .coupon-form-container-left {
flex: 1;
}
.woocommerce-checkout .coupon-form-container-left .coupon-form-container-left-content {
max-width: 450px;
margin: 0 30px 0 auto;
justify-content: start;
}
.woocommerce-checkout .coupon-form-container-right {
flex: 0 0 50%;
}
.woocommerce-checkout .coupon-form-container-right-content {
width: 500px;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
padding: 0;
margin-top: 30px;
margin-bottom: 15px;
font-size: 16px;
color: #000;
font-weight: 500;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
display: none;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle a {
padding: 0;
margin-top: 30px;
margin-bottom: 15px;
font-size: 16px;
color: #000;
font-weight: 500;
text-decoration: underline;
}
.woocommerce-checkout form.checkout_coupon {
margin: 15px 0px;
border: 0;
padding: 0;
}
.woocommerce-checkout .woocommerce-form-coupon-fields input {
width: 200px;
height: 40px;
border: 1px solid #000;
padding-left: 10px;
padding-right: 10px;
font-size: 16px;
}
.woocommerce-checkout .woocommerce-form-coupon-fields button {
height: 40px;
}
form.woocommerce-checkout .woocommerce-NoticeGroup,
form.woocommerce-checkout .woocommerce-notices-wrapper {
margin-top: 30px;
margin-bottom: 30px;
}
/* Special containers only for mobile */
.woocommerce-checkout .secure-payment-wrapper.mobile-actor,
.woocommerce-checkout div.form-row.mobile-actor {
display: none;
}
.woocommerce-checkout .checkout .checkout-inline-error-message {
margin-top: 5px;
padding-left: 5px;
}
.woocommerce-checkout .checkout-actions-mobile {
display: none;
}
@media screen and (max-width: 950px) {
.woocommerce-checkout .coupon-form-wrapper {
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
}
.woocommerce-checkout form.checkout_coupon {
text-align: center;
}
form.woocommerce-checkout .woocommerce-checkout-wrapper {
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 30px;
margin-top: 30px;
}
form.woocommerce-checkout .checkout-cart {
position: relative;
margin: 0px;
top: auto;
}
form.woocommerce-checkout .checkout-actions {
padding: 0px;
}
form.woocommerce-checkout .checkout-cart .checkout-cart-content {
width: auto;
padding: 20px 10px;
}
.woocommerce-checkout .secure-payment-wrapper,
.woocommerce-checkout #payment div.form-row {
display: none;
}
.woocommerce-checkout .secure-payment-wrapper.mobile-actor,
.woocommerce-checkout div.form-row.mobile-actor {
display: block;
}
.woocommerce-checkout div.form-row.mobile-actor {
padding: 1em;
max-width: 500px;
}
.woocommerce-checkout div.form-row.mobile-actor #place_order {
float: none;
width: 100%;
box-sizing: border-box;
margin-bottom: 1em;
padding: 10px 20px;
font-size: 20px;
margin-top: 40px;
}
form.woocommerce-checkout .woocommerce-NoticeGroup, form.woocommerce-checkout .woocommerce-notices-wrapper {
margin-bottom: 0px;
}
.woocommerce-checkout .checkout-actions-mobile {
display: block;
}
.woocommerce-checkout .checkout-actions-mobile #place_order {
display: block !important;
}
}
@media screen and (max-width: 650px) {
.woocommerce-checkout .woocommerce-form-login-wrapper {
margin-bottom: 20px;
}
.woocommerce-checkout .coupon-form-container-right {
flex: 1;
text-align: center;
line-height: 23px;
}
.woocommerce-checkout .coupon-form-container-right-content {
width: auto;
}
}
.woocommerce form.woocommerce-form-login {
margin: 0;
border: none;
display: block;
margin: auto;
max-width: 600px;
}
.woocommerce form.woocommerce-form-login .form-login-label {
margin-bottom: 20px;
}
.woocommerce form.woocommerce-form-login .form-login-label p {
font-size: 15px;
color: #000;
font-weight: 300;
line-height: 20px;
}
.woocommerce form .woocommerce-password-strength {
font-size: 14px;
font-weight: 400;
padding: 5px 15px;
margin-left: 10px;
margin-right: 10px;
margin-top: 4px;
}
.woocommerce form.woocommerce-form-login .form-login-fields {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
}
.woocommerce form.woocommerce-form-login .form-login-fields p {
max-width: 300px;
}
.woocommerce form.woocommerce-form-login .form-login-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 20px;
}
.woocommerce form.woocommerce-form-login .woocommerce-form-login__submit {
float: none;
margin: 0;
padding: 10px 20px;
}
.woocommerce form.woocommerce-form-login .form-login-remember-account {
display: flex;
justify-content: center;
margin-top: 25px;
}
.woocommerce form.woocommerce-form-login .form-login-remember-account a {
font-size: 14px;
color: #000;
text-decoration: underline;
}
.form-styled-wrapper .form-row label {
font-size: 10px;
position: absolute;
margin-top: 5px;
margin-left: 10px;
opacity: 0;
color: #888;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
z-index: 9;
}
.form-styled-wrapper .form-row label abbr,
.form-styled-wrapper .form-row label span.required {
display: none;
}
.form-styled-wrapper .form-row input.input-text,
.form-styled-wrapper .form-row textarea {
height: 50px;
padding-left: 10px;
padding-right: 10px;
border-radius: 10px;
border-color: #DDD;
font-size: 16px;
font-family: "Sora", sans-serif;
font-weight: 400;
transition: padding-top 0.3s ease-in-out;
box-shadow: none;
outline: none;
border: 1px solid #DDD;
}
.form-styled-wrapper .form-row input.input-text::placeholder,
.form-styled-wrapper .form-row textarea::placeholder {
color: #888;
font-family: "Sora", sans-serif;
font-size: 14px;
font-weight: 200;
}
.form-styled-wrapper .form-row.filled label {
opacity: 1;
visibility: visible;
}
.form-styled-wrapper .form-row.filled input.input-text {
padding-top: 14px;
}
.form-styled-wrapper .form-row .show-password-input {
margin-top: 8px;
}
.form-styled-wrapper .select2-container .select2-selection--single {
height: 50px;
padding-left: 10px;
padding-right: 10px;
border-radius: 10px;
border-color: #DDD;
font-size: 14px;
font-family: "Sora", sans-serif;
font-weight: 400;
transition: padding-top 0.3s ease-in-out;
padding-top: 5px;
}
.form-styled-wrapper .form-row .select2-container .select2-selection--single .select2-selection__arrow {
height: 48px;
}
.form-styled-wrapper .form-row.filled .select2-container .select2-selection--single .select2-selection__rendered {
margin-top: 12px;
}
.form-styled-wrapper .form-row.filled .select2-container .select2-selection--single .select2-selection__arrow {
height: 57px;
}
.form-styled-wrapper .form-row textarea {
padding: 10px 5px;
height: 80px;
}
.form-styled-wrapper .form-row textarea::placeholder {
font-size: 13px;
}
.form-styled-wrapper .form-row.woocommerce-invalid label,
.form-styled-wrapper .form-row.woocommerce-invalid input.input-text {
color: red;
}
.form-styled-wrapper .form-row.woocommerce-invalid input.input-text {
border-color: red;
}
.myaccount-auth-wrapper {
display: flex;
justify-content: center;
align-items: start;
gap: 30px;
}
.myaccount-auth-wrapper .myaccount-login-wrapper,
.myaccount-auth-wrapper .myaccount-register-wrapper {
flex: 1;
padding: 20px;
}
.myaccount-auth-wrapper h2 {
font-weight: 600;
font-size: 20px;
margin-bottom: 12px;
}
.myaccount-auth-wrapper form.woocommerce-form-login,
.myaccount-auth-wrapper form.woocommerce-form-register {
max-width: none;
border: 1px solid #000;
margin-top: 20px;
border-radius: 0px;
}
.myaccount-auth-wrapper form.woocommerce-form-register > br,
.myaccount-auth-wrapper form.woocommerce-form-register #mailchimp-gdpr-fields {
display: none;
}
.myaccount-auth-wrapper .myaccount-login-actions-wrapper {
display: flex;
justify-content: start;
align-items: center;
gap: 10px;
margin-top: 20px !important;
}
.myaccount-auth-wrapper .myaccount-login-actions-wrapper::before {
display: none;
}
.myaccount-auth-wrapper .myaccount-login-actions-wrapper label {
display: flex !important;
align-items: center;
gap: 10px;
justify-content: start;
cursor: pointer;
font-size: 14px;
line-height: 18px;
}
.myaccount-auth-wrapper .myaccount-login-actions-wrapper .input-checkbox {
width: 20px;
height: 20px;
margin: 0px !important;
}
.myaccount-auth-wrapper .myaccount-login-actions-wrapper button {
float: none;
margin: 0;
padding: 10px 20px;
}
.myaccount-auth-wrapper .myaccount-login-remember-wrapper {
margin-top: 30px;
}
.myaccount-auth-wrapper .myaccount-login-remember-wrapper a {
color: #000;
text-decoration: underline;
font-size: 14px;
}
.myaccount-auth-wrapper .myaccount-register-wrapper .g-recaptcha {
margin-top: 20px;
margin-bottom: 10px;
}
.myaccount-auth-wrapper .myaccount-register-wrapper .woocommerce-privacy-policy-text {
margin-top: 20px;
margin-bottom: 20px;
}
.myaccount-auth-wrapper .myaccount-register-wrapper .woocommerce-privacy-policy-text p {
font-size: 14px;
line-height: 16px;
}
.myaccount-auth-wrapper .myaccount-register-wrapper button {
float: none;
margin: 0;
padding: 10px 20px;
}
.myaccount-reset-password-wrapper {
display: block;
max-width: 600px;
margin: 0 auto;
border: 1px solid #000;
padding: 20px;
}
.myaccount-reset-password-wrapper .reset-password-info {
font-size: 14px;
line-height: 16px;
}
.myaccount-reset-password-wrapper .reset-password-email-wrapper {
margin-bottom: 20px !important;
margin-top: 20px !important;
float: none !important;
width: 100% !important;
}
.myaccount-reset-password-wrapper button {
float: none;
margin: 0;
padding: 10px 20px;
}
.myaccount-auth-wrapper form.lost_reset_password {
max-width: none;
border: 1px solid #000;
margin-top: 20px;
display: block;
margin: auto;
padding: 20px;
}
.myaccount-auth-wrapper form button.button-filled.woocommerce-Button.woocommerce-button.button {
background-color: var(--base-color);
width: auto;
padding-right: 15px;
padding-left: 15px;
text-transform: uppercase;
text-decoration: none;
color: #FFF;
font-weight: 800;
border: 3px solid var(--base-color);
cursor: pointer;
}
@media screen and (max-width: 950px) {
.myaccount-auth-wrapper {
flex-direction: column;
justify-content: center;
align-items: center;
}
}
.woocommerce-order-received .woocommerce-notice--success.woocommerce-thankyou-order-received {
background-color: #FFF;
border: 1px solid #CCC;
border-top: 3px solid var(--hint-color);
padding: 25px 20px;
font-size: 16px;
margin-bottom: 30px;
font-weight: 400;
}
.woocommerce-order-received ul.woocommerce-order-overview {
margin-top: 50px;
}
.woocommerce-order-received ul.order_details li strong {
font-size: 14px;
font-weight: 500;
margin-top: 5px;
}
.woocommerce-order-received .woocommerce-thankyou-payment-method {
margin-bottom: 50px;
margin-top: 50px;
}
.woocommerce-order-received .woocommerce-thankyou-payment-method:empty {
margin: 0;
}
.woocommerce-order-received .woocommerce-order-details .order_item,
.myaccount-wrapper .woocommerce-order-details .order_item {
display: flex;
justify-content: space-between;
align-items: start;
gap: 40px;
margin-bottom: 20px;
margin-top: 15px;
}
.woocommerce-order-received .woocommerce-order-details .order_item .product-item-details,
.myaccount-wrapper .woocommerce-order-details .order_item .product-item-details {
width: 100%;
margin-bottom: 15px;
}
.woocommerce-order-received .woocommerce-order-details .order_item .product-name,
.myaccount-wrapper .woocommerce-order-details .order_item .product-name {
display: flex;
justify-content: start;
align-items: center;
gap: 30px;
}
.woocommerce-order-received .woocommerce-order-details .order_item .product-name-label,
.myaccount-wrapper .woocommerce-order-details .order_item .product-name-label {
font-size: 16px;
line-height: 20px;
font-weight: 500;
}
.woocommerce-order-received .woocommerce-order-details .order_item .product-name-label a,
.myaccount-wrapper .woocommerce-order-details .order_item .product-name-label a {
font-size: 17px;
line-height: 25px;
font-weight: 400;
color: var(--base-color) !important;
}
.woocommerce-order-received .woocommerce-order-details .order_item .product-name-quantity strong,
.myaccount-wrapper .woocommerce-order-details .order_item .product-name-quantity strong {
font-weight: 500;
}
.woocommerce-order-received .woocommerce-order-details .order_item .product-total,
.myaccount-wrapper .woocommerce-order-details .order_item .product-total {
width: 80px;
text-align: right;
}
.woocommerce-order-received .woocommerce-order-details .order_item .wc-order-item-meta,
.myaccount-wrapper .woocommerce-order-details .order_item .wc-order-item-meta {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.woocommerce-order-received .woocommerce-order-details .order_item .wc-order-item-meta-item,
.myaccount-wrapper .woocommerce-order-details .order_item .wc-order-item-meta-item {
display: flex;
justify-content: start;
align-items: center;
gap: 10px;
line-height: 15px;
}
.woocommerce-order-received .woocommerce-order-details .order_item .wc-order-item-meta-item-label,
.myaccount-wrapper .woocommerce-order-details .order_item .wc-order-item-meta-item-label {
margin: 0;
font-size: 10px;
color: #999;
padding-top: 2px;
}
.woocommerce-order-received .woocommerce-order-details .order_item .wc-order-item-meta-item-value,
.myaccount-wrapper .woocommerce-order-details .order_item .wc-order-item-meta-item-value {
margin: 0;
font-size: 10px;
}
.woocommerce-order-received .woocommerce-order-details .order_item .custom-field-file-image img {
width: 100px;
height: auto;
margin: 0;
padding: 0;
}
.woocommerce-order-received .woocommerce-order-details .order_item .custom-field-map-result img,
.myaccount-wrapper .woocommerce-order-details .order_item .custom-field-map-result img {
width: 100px;
height: 100px;
margin: 0;
padding: 0;
}
.woocommerce-order-received .woocommerce-order-details .order_item .custom-field-map-result .custom-map-overlay,
.myaccount-wrapper .woocommerce-order-details .order_item .custom-field-map-result .custom-map-overlay {
width: 100px;
height: 100px;
position: absolute;
z-index: 99;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
pointer-events: none;
}
.woocommerce-order-received .order-details-totals,
.myaccount-wrapper .order-details-totals {
display: flex;
flex-direction: column;
justify-content: end;
align-items: end;
gap: 8px;
margin-bottom: 10px;
margin-top: 40px;
}
.woocommerce-order-received .order-details-total-item,
.myaccount-wrapper .order-details-total-item {
padding-top: 15px;
padding-bottom: 15px;
border-top: 1px solid #CCC;
width: 100%;
display: flex;
flex-direction: column;
justify-content: end;
align-items: end;
gap: 8px;
}
.woocommerce-order-received .order-details-total-item-label,
.myaccount-wrapper .order-details-total-item-label {
font-weight: 600;
text-transform: uppercase;
font-size: 14px;
}
.woocommerce-order-received .order-details-total-item-value,
.myaccount-wrapper .order-details-total-item-value {
font-size: 18px;
}
.woocommerce-order-received .order-details-total-item.order_total .order-details-total-item-value,
.myaccount-wrapper .order-details-total-item.order_total .order-details-total-item-value {
font-size: 25px;
font-weight: 800;
}
.woocommerce-order-received .order-details-total-item.order_total .order-details-total-item-value small,
.myaccount-wrapper .order-details-total-item.order_total .order-details-total-item-value small {
display: none;
}
.myaccount-wrapper {
max-width: 1500px;
margin: 40px auto;
}
.myaccount-wrapper .woocommerce {
display: flex;
align-items: start;
gap: 50px;
margin-top: 30px;
flex-wrap: wrap;
justify-content: start;
}
.myaccount-wrapper nav.woocommerce-MyAccount-navigation {
float: none;
width: auto;
}
.myaccount-wrapper nav.woocommerce-MyAccount-navigation .shop-menu-catalogue-item-wrapper:first-child {
margin-top: 0 !important;
}
.myaccount-wrapper nav.woocommerce-MyAccount-navigation .shop-menu-catalogue-item-name {
text-transform: uppercase;
}
.myaccount-wrapper .woocommerce-MyAccount-content {
flex: 1;
width: auto;
float: none;
}
.myaccount-wrapper .woocommerce-MyAccount-content p {
line-height: 20px;
margin-bottom: 20px;;
}
.myaccount-wrapper .woocommerce-MyAccount-content p a {
color: #000;
text-decoration: underline;
}
.myaccount-wrapper .woocommerce-orders-table th a,
.myaccount-wrapper .woocommerce-orders-table td a {
color: #000;
font-weight: 500;
font-size: 14px;
text-decoration: underline;
}
.myaccount-wrapper .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
display: flex;
justify-content: start;
align-items: center;
gap: 15px;
}
.myaccount-wrapper .woocommerce-pagination {
display: flex;
justify-content: space-between;
align-items: center;
}
.myaccount-wrapper .woocommerce-pagination a {
color: #000;
font-weight: 600;
text-decoration: underline;
text-transform: uppercase;
}
.myaccount-wrapper form.edit-account em {
margin-top: 5px;
display: block;
font-size: 13px;
padding-left: 5px;
}
.myaccount-wrapper form.edit-account fieldset {
margin-top: 40px;
}
.myaccount-wrapper form.edit-account legend {
font-weight: 600;
font-size: 20px;
margin-bottom: 12px;
}
.myaccount-wrapper form.edit-account button {
float: none;
margin: 0;
padding: 10px 20px;
}
@media screen and (max-width: 950px) {
.myaccount-wrapper .woocommerce {
flex-direction: column;
justify-content: center;
align-items: center;
gap: 15px;
margin-top: 0px;
}
.myaccount-wrapper #shop-menu-wrapper {
width: 100%;
}
.myaccount-wrapper #shop-menu-catalogue {
display: flex;
justify-content: center;
align-items: center;
gap: 45px;
}
.myaccount-wrapper #shop-menu-catalogue .shop-menu-catalogue-item a {
border: 1px solid #444;
padding: 5px 10px;
}
.myaccount-wrapper #shop-menu-catalogue .shop-menu-catalogue-item a:hover {
border-color: var(--hint-color);
}
.myaccount-wrapper #shop-menu-catalogue .shop-menu-catalogue-item-wrapper {
margin-top: 0;
}
.myaccount-wrapper .woocommerce-MyAccount-content {
padding-left: 30px;
padding-right: 30px;
min-width: 500px;
}
}
@media screen and (max-width: 650px) {
.myaccount-wrapper {
margin-top: 10px;
}
.myaccount-wrapper nav.woocommerce-MyAccount-navigation {
width: 100%;
}
.myaccount-wrapper #shop-menu-wrapper {
padding-left: 30px;
padding-right: 30px;
}
.myaccount-wrapper #shop-menu-catalogue {
flex-direction: column;
gap: 0;
}
.myaccount-wrapper #shop-menu-catalogue .shop-menu-catalogue-item-wrapper {
margin-bottom: 10px;
width: 100%;
}
.myaccount-wrapper #shop-menu-catalogue .shop-menu-catalogue-item a {
width: 100%;
}
.myaccount-wrapper .woocommerce-MyAccount-content {
min-width: auto;
width: 100%;
margin-top: 30px;
}
}
.compositor-wrapper {
display: flex;
flex-direction: column;
align-items: start;
margin-top: 30px;;
}
.compositor-wrapper .compositor-section-wrapper {
padding-top: 30px;
padding-bottom: 30px;
}
.compositor-wrapper .compositor-section-wrapper .compositor-section {
display: flex;
flex-direction: column;
gap: 25px;
justify-content: start;
align-items: start;
}
.compositor-wrapper .compositor-section-wrapper.fullwidth {
width: 100%;
}
.compositor-wrapper .compositor-section-wrapper.fullwidth .compositor-section {
width: 100%;
}
.compositor-wrapper .compositor-section-wrapper.fullwidthboxed {
width: 100%;
}
.compositor-wrapper .compositor-section-wrapper.fullwidthboxed .compositor-section {
max-width: 1200px;
margin: 0 auto;
}
.compositor-wrapper .compositor-section-wrapper.boxed {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.compositor-wrapper .compositor-block-wrapper {
width: 100%;
}
.compositor-wrapper .compositor-block-titleblock .compositor-block-title.left {
text-align: left;
}
.compositor-wrapper .compositor-block-titleblock .compositor-block-title.center {
text-align: center;
}
.compositor-wrapper .compositor-block-titleblock .compositor-block-title.right {
text-align: right;
}
.compositor-wrapper .compositor-block-titleblock h1 {
font-size: 40px;
line-height: 48px;
font-weight: 100;
text-transform: uppercase;
}
.compositor-wrapper .compositor-block-titleblock h2 {
font-size: 30px;
line-height: 38px;
font-weight: 100;
text-transform: uppercase;
}
.compositor-wrapper .compositor-block-titleblock h3 {
font-size: 24px;
line-height: 32px;
font-weight: 100;
text-transform: uppercase;
}
.compositor-wrapper .compositor-block-titleblock h4 {
font-size: 20px;
line-height: 28px;
font-weight: 100;
text-transform: uppercase;
}
.compositor-wrapper .compositor-block-content p {
font-size: 18px;
line-height: 28px;
margin-bottom: 30px;
}
.compositor-wrapper .compositor-block-content h1 {
font-size: 30px;
line-height: 38px;
margin-bottom: 15px;
}
.compositor-wrapper .compositor-block-content h2 {
font-size: 25px;
line-height: 30px;
margin-bottom: 15px;
}
.compositor-wrapper .compositor-block-content ul li {
margin-bottom: 10px;
list-style: disc;
margin-left: 20px;
font-size: 18px;
line-height: 25px;
}
.compositor-wrapper .compositor-block-content ol li {
margin-bottom: 10px;
list-style: decimal;
margin-left: 20px;
font-size: 18px;
line-height: 28px;
}
.compositor-wrapper .compositor-block-images {
display: flex;
justify-content: center;
align-items: start;
gap: 30px;
flex-wrap: wrap;
}
.compositor-wrapper .compositor-block-images .compositor-block-image {
text-align: center;
box-sizing: border-box;
position: relative;
}
.compositor-wrapper .compositor-block-images.one .compositor-block-image {
width: 100%;
}
.compositor-wrapper .compositor-block-images.two .compositor-block-image {
flex: 1 1 calc(50% - 30px);
max-width: calc(50% - 30px);
}
.compositor-wrapper .compositor-block-images.three .compositor-block-image {
flex: 1 1 calc(33% - 30px);
max-width: calc(33% - 30px);
}
.compositor-wrapper .compositor-block-images.four .compositor-block-image {
flex: 1 1 calc(25% - 30px);
max-width: calc(25% - 30px);
}
.compositor-wrapper .compositor-block-images img {
border: 2px solid #000;
max-width: 100%;
width: auto;
height: auto;
margin: 0 auto;
}
.compositor-wrapper .compositor-block-images img:hover {
border-color: var(--hint-color);
}
.compositor-wrapper .compositor-block-images .compositor-block-image-title {
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
background: #000000;
color: #fff;
padding: 15px 10px;
font-size: 14px;
box-sizing: border-box;
text-transform: uppercase;
}
.compositor-wrapper .compositor-block-images .compositor-block-image:hover .compositor-block-image-title {
background-color: var(--hint-color);
}
.compositor-wrapper .compositor-block-textimageblock .compositor-block-textimage {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
flex-wrap: nowrap;
align-items: stretch;
}
.compositor-wrapper .compositor-block-textimageblock.left .compositor-block-textimage {
flex-direction: row-reverse;
}
.compositor-wrapper .compositor-block-textimageblock.right .compositor-block-textimage {
flex-direction: row;
}
.compositor-wrapper .compositor-block-textimage .compositor-block-textimage-content {
flex: 2;
}
.compositor-wrapper .compositor-block-textimage .compositor-block-textimage-image {
flex: 1;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.compositor-wrapper .compositor-block-reviewsblock {
display: flex;
justify-content: center;
}
.compositor-wrapper .compositor-block-reviews {
max-width: 100%;
}
.compositor-wrapper .compositor-block-accordion {
display: flex;
justify-content: center;
align-items: start;
flex-direction: column;
}
.compositor-wrapper .compositor-block-accordion .compositor-block-accordion-item {
border-bottom: 1px solid #000;
width: 100%;
}
.compositor-wrapper .compositor-block-accordion .compositor-block-accordion-item:last-child {
border-bottom: none;
}
.compositor-wrapper .compositor-block-accordion .compositor-block-accordion-item-title {
cursor: pointer;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.compositor-wrapper .compositor-block-accordion .compositor-block-accordion-item-title .icon {
font-size: 30px;
font-weight: 100;
}
.compositor-wrapper .compositor-block-accordion .compositor-block-accordion-item-title .icon-open {
display: block;
}
.compositor-wrapper .compositor-block-accordion .compositor-block-accordion-item-title .icon-close {
display: none;
}
.compositor-wrapper .compositor-block-accordion .compositor-block-accordion-item-title:hover {
background-color: #000;
color: #fff;
}
.compositor-wrapper .compositor-block-accordion .compositor-block-accordion-item-content-wrapper {
display: none;
padding: 0px 50px 20px 50px;
line-height: 25px;
}
.compositor-wrapper .compositor-block-accordion .compositor-block-accordion-item-content {
background-color: #eeeeee42;
padding: 20px;
border: 1px solid #000;
border-top: none;
}
.compositor-wrapper .compositor-block-accordion .compositor-block-accordion-item.open .compositor-block-accordion-item-title {
background-color: #000;
color: #fff;
}
.compositor-wrapper .compositor-block-accordion .compositor-block-accordion-item.open .compositor-block-accordion-item-title .icon-open {
display: none;
}
.compositor-wrapper .compositor-block-accordion .compositor-block-accordion-item.open .compositor-block-accordion-item-title .icon-close {
display: block;
}
.compositor-wrapper .compositor-block-accordion .compositor-block-accordion-item.open .compositor-block-accordion-item-title .icon {
transform: rotate(180deg);
}
.compositor-wrapper .compositor-block-accordion .compositor-block-accordion-item.open .compositor-block-accordion-item-content-wrapper {
display: block;
}
.compositor-wrapper .compositor-block-topsales .products-loop-wrapper {
gap: 25px 10px;
}
.compositor-wrapper .compositor-block-topsales .products-loop-wrapper .product-loop-item {
max-width: 200px;
}
.compositor-wrapper .compositor-block-header {
font-size: 24px;
line-height: 32px;
font-weight: 400;
}
.compositor-wrapper .compositor-block-header.left {
text-align: left;
}
.compositor-wrapper .compositor-block-header.right {
text-align: right;
}
.compositor-wrapper .compositor-block-header.center {
text-align: center;
}
.compositor-wrapper .compositor-block-header.big {
font-size: 48px;
line-height: 56px;
}
.compositor-wrapper .compositor-block-header.verybig {
font-size: 74px;
line-height: 85px;
}
.compositor-wrapper .compositor-block-header.enormous {
font-size: 94px;
line-height: 102px;
}
.compositor-wrapper .compositor-block-button {
display: flex;
justify-content: center;
align-items: center;
}
.compositor-wrapper .compositor-block-button.left {
justify-content: flex-start;
}
.compositor-wrapper .compositor-block-button.right {
justify-content: flex-end;
}
.compositor-wrapper .compositor-block-button.center {
justify-content: center;
}
.compositor-wrapper .compositor-block-button .button-filled {
padding: 20px 30px;
}
.compositor-wrapper .compositor-block-threecols {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
flex-wrap: nowrap;
align-items: stretch;
}
.compositor-wrapper .compositor-block-threecols h1 {
font-size: 24px;
line-height: 30px;
font-weight: 400;
}
.compositor-wrapper .compositor-block-threecols h2 {
font-size: 20px;
line-height: 26px;
font-weight: 400;
}
.compositor-wrapper .compositor-block-threecols h3 {
font-size: 16px;
line-height: 24px;
font-weight: 400;
}
.compositor-wrapper .compositor-block-threecols p {
font-size: 16px;
line-height: 24px;
font-weight: 400;
margin-top: 15px;
padding-bottom: 15px;
}
@media screen and (max-width: 1500px) {
.compositor-wrapper .compositor-section-wrapper.fullwidthboxed .compositor-section {
padding-left: 30px;
padding-right: 30px;
}
}
@media screen and (max-width: 950px) {
.compositor-wrapper .compositor-block-images.three .compositor-block-image,
.compositor-wrapper .compositor-block-images.four .compositor-block-image {
flex: 1 1 calc(50% - 30px);
max-width: calc(50% - 30px);
}
.compositor-wrapper .compositor-block-textimageblock .compositor-block-textimage {
flex-direction: column;
}
.compositor-wrapper .compositor-block-textimageblock.right .compositor-block-textimage {
flex-direction: column-reverse;
}
.compositor-wrapper .compositor-block-textimage .compositor-block-textimage-image {
height: 350px;
width: 100%;
flex: auto;
}
.compositor-wrapper .compositor-block-threecols {
flex-direction: column;
}
}
@media screen and (max-width: 650px) {
.compositor-wrapper .compositor-section-wrapper.fullwidthboxed .compositor-section {
padding-left: 15px;
padding-right: 15px;
}
.compositor-wrapper .compositor-block-titleblock h1 {
font-size: 32px;
}
.compositor-wrapper .compositor-block-images.one .compositor-block-image,
.compositor-wrapper .compositor-block-images.two .compositor-block-image,
.compositor-wrapper .compositor-block-images.three .compositor-block-image,
.compositor-wrapper .compositor-block-images.four .compositor-block-image {
flex: 1 1 100%;
max-width: 100%;
}
.compositor-wrapper .compositor-block-accordion .compositor-block-accordion-item-content-wrapper {
padding: 0px;
}
.compositor-wrapper .compositor-block-header.big {
font-size: 42px;
line-height: 50px;
}
.compositor-wrapper .compositor-block-header.verybig {
font-size: 46px;
line-height: 56px;
}
.compositor-wrapper .compositor-block-header.enormous {
font-size: 54px;
line-height: 62px;
}
}
.contact-wrapper {
display: flex;
align-items: start;
gap: 50px;
margin-top: 30px;
padding-left: 30px;
padding-right: 30px;
}
.contact-wrapper .contact-content {
max-width: 1500px;
display: flex;
flex-direction: row;
gap: 35px;
justify-content: space-between;
align-items: start;
margin: auto;
width: 100%;
}
.contact-wrapper .contact-info {
max-width: 500px;
display: flex;
flex-direction: column;
gap: 20px;
justify-content: start;
align-items: start;
}
.contact-wrapper .contact-info img {
max-width: 100%;
}
.contact-wrapper .contact-details {
display: flex;
flex-direction: column;
gap: 50px;
}
.contact-wrapper .contact-details-group {
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-wrapper .contact-details-title {
font-size: 22px;
font-weight: 200;
text-transform: uppercase;
}
.contact-wrapper .contact-details-content {
display: flex;
flex-direction: column;
gap: 10px;
}
.contact-wrapper .contact-details-content-item {
display: flex;
justify-content: start;
align-items: center;
gap: 10px;
}
.contact-wrapper .contact-details-content-item .icon {
width: 20px;
height: 20px;
}
.contact-wrapper .contact-details-content-item small {
font-size: 12px;
font-style: italic;
}
.contact-wrapper .contact-details-content-item.social-links {
display: flex;
justify-content: start;
align-items: center;
gap: 15px;
margin-top: 20px;
}
.contact-wrapper .contact-details-content-item.social-links .social-link {
border-radius: 25px;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.contact-wrapper .contact-details-content-item.social-links .social-link.instagram {
background-color: #f00075;
}
.contact-wrapper .contact-details-content-item.social-links .social-link.instagram:hover {
background-color: #f00075b8;
}
.contact-wrapper form.wpcf7-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.contact-wrapper form.wpcf7-form input,
.contact-wrapper form.wpcf7-form textarea {
width: 100%;
}
.contact-wrapper form.wpcf7-form .wpcf7-not-valid-tip {
font-size: 12px;
}
.contact-wrapper form.wpcf7-form .wpcf7-form-control-wrap {
margin: 0;
padding: 0;
display: block;
}
.contact-wrapper form.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
display: block;
margin: 0;
}
.contact-wrapper form.wpcf7-form .wpcf7-acceptance label {
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
justify-content: start;
margin: 0;
padding: 0;
position: relative;
}
.contact-wrapper form.wpcf7-form .wpcf7-acceptance label input {
margin: 0;
padding: 0;
width: auto;
}
.contact-wrapper form.wpcf7-form .wpcf7-acceptance label .wpcf7-list-item-label,
.contact-wrapper form.wpcf7-form .wpcf7-acceptance label .wpcf7-list-item-label a {
font-size: 12px;
}
.contact-wrapper form.wpcf7-form .wpcf7-acceptance.error label {
color: red;
}
.contact-wrapper form.wpcf7-form .submit-wrapper {
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center;
align-items: center;
}
.contact-wrapper form.wpcf7-form .wpcf7-submit,
.contact-wrapper form.wpcf7-form .seal-submit {
padding-top: 8px;
padding-bottom: 8px;
margin-top: 15px;
}
.contact-wrapper form.wpcf7-form .wpcf7-submit {
display: none;
}
.contact-wrapper form.wpcf7-form .submit-wrapper.ready .wpcf7-submit {
display: block;
}
.contact-wrapper form.wpcf7-form .submit-wrapper.ready .seal-submit {
display: none;
}
.contact-wrapper .wpcf7 form .wpcf7-response-output {
margin-top: 0px;
}
@media (max-width: 1300px) {
.contact-wrapper .contact-info {
max-width: 350px;
}
}
@media (max-width: 1100px) {
.contact-wrapper .contact-content {
flex-wrap: wrap;
justify-content: center;
gap: 50px 30px;
}
.contact-wrapper .contact-info {
width: 100%;
order: 3;
justify-content: center;
align-items: center;
max-width: 100%;
}
.contact-wrapper .contact-details {
order: 1;
max-width: calc(50% - 40px);
}
.contact-wrapper .contact-form {
order: 2;
max-width: calc(50% - 40px);
}
}
@media (max-width: 650px) {
.contact-wrapper .contact-details {
max-width: 100%;
}
.contact-wrapper .contact-info {
order: 2;
}
.contact-wrapper .contact-form {
order: 3;
max-width: 100%;
}
}
.footer-wrapper {
background-color: #000;
display: flex;
flex-direction: column;
gap: 30px;
justify-content: center;
align-items: center;
padding-top: 40px;
padding-bottom: 20px;
margin-top: 60px;
border-top: 2px solid #000;
}
.footer-wrapper .footer-links {
display: flex;
gap: 20px;
justify-content: center;
align-items: center;
}
.footer-wrapper .footer-links a {
color: #FFF;
text-transform: uppercase;
font-size: 14px;
font-weight: 500;
}
.footer-wrapper .footer-links a:hover {
color: var(--hint-color-extralight);
}
.footer-wrapper #copyright {
font-size: 12px;
font-weight: 500;
color: #FFF;
}
@media screen and (max-width: 650px) {
.footer-wrapper .footer-links {
flex-direction: column;
}
}
.notfound-wrapper {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
text-align: center;
}
.notfound-wrapper h1 {
font-size: 40px;
margin-bottom: 10px;
}
.commissions-wrapper {
max-width: 1400px;
margin: 40px auto;
padding: 0 20px;
}
.commissions-wrapper .commissions-notice {
padding: 16px 20px;
border-radius: 8px;
margin-bottom: 20px;
font-size: 0.938rem;
line-height: 1.5;
display: flex;
align-items: center;
gap: 12px;
}
.commissions-wrapper .commissions-notice p {
margin: 0;
}
.commissions-wrapper .commissions-notice-warning {
background-color: #fff3cd;
border: 1px solid #ffc107;
color: #856404;
}
.commissions-wrapper .commissions-notice-warning::before {
content: "⚠️";
font-size: 1.25rem;
flex-shrink: 0;
}
.commissions-wrapper .commissions-header {
margin-bottom: 30px;
}
.commissions-wrapper .commissions-header-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.commissions-wrapper .commissions-header h1 {
font-size: 28px;
font-weight: 600;
margin-bottom: 0;
color: #1a1a1a;
}
.commissions-wrapper .commissions-header-back {
font-size: 0.938rem;
font-weight: 600;
color: var(--hint-color);
text-decoration: none;
transition: color 0.2s ease;
}
.commissions-wrapper .commissions-header-back:hover {
color: var(--hint-color-dark);
text-decoration: underline;
}
/* Commissions Filters */
.commissions-wrapper .commissions-filters {
background: #ffffff;
border-radius: 12px;
padding: 24px;
margin-bottom: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border: 1px solid #e5e7eb;
}
.commissions-wrapper .commissions-filter-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
align-items: end;
}
.commissions-wrapper .filter-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.commissions-wrapper .filter-group label {
font-size: 0.875rem;
font-weight: 600;
color: #374151;
margin-bottom: 4px;
}
.commissions-wrapper .filter-group select,
.commissions-wrapper .filter-group input[type="date"] {
width: 100%;
padding: 10px 14px;
font-size: 0.938rem;
border: 1px solid #d1d5db;
border-radius: 8px;
background-color: #ffffff;
color: #1f2937;
transition: all 0.2s ease;
outline: none;
}
.commissions-wrapper .filter-group select:hover,
.commissions-wrapper .filter-group input[type="date"]:hover {
border-color: #9ca3af;
}
.commissions-wrapper .filter-group select:focus,
.commissions-wrapper .filter-group input[type="date"]:focus {
border-color: var(--hint-color);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.commissions-wrapper .filter-group select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
.commissions-wrapper .filter-actions {
display: flex;
gap: 10px;
align-items: flex-end;
}
.commissions-wrapper .btn {
padding: 10px 20px;
font-size: 0.938rem;
font-weight: 600;
border-radius: 8px;
border: none;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
}
.commissions-wrapper .btn-secondary {
background-color: #f3f4f6;
color: #374151;
border: 1px solid #d1d5db;
}
.commissions-wrapper .btn-secondary:hover {
background-color: #e5e7eb;
border-color: #9ca3af;
}
.commissions-wrapper .commissions-summary {
display: flex;
gap: 30px;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e0e0e0;
}
.commissions-wrapper .summary-item {
display: flex;
flex-direction: column;
gap: 5px;
}
.commissions-wrapper .summary-label {
font-size: 14px;
color: #666;
font-weight: 500;
}
.commissions-wrapper .summary-value {
font-size: 24px;
font-weight: 700;
color: #1a1a1a;
}
.commissions-wrapper .commissions-table-container {
overflow-x: auto;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.commissions-wrapper .commissions-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.commissions-wrapper .commissions-table thead {
background: #f8f9fa;
border-bottom: 2px solid #e0e0e0;
}
.commissions-wrapper .commissions-table th {
padding: 16px 12px;
text-align: left;
font-weight: 600;
color: #1a1a1a;
white-space: nowrap;
}
.commissions-wrapper .commissions-table tbody tr {
border-bottom: 1px solid #e0e0e0;
transition: background-color 0.2s;
}
.commissions-wrapper .commissions-table tbody tr:hover {
background-color: #f8f9fa;
}
.commissions-wrapper .commissions-table tbody tr:last-child {
border-bottom: none;
}
.commissions-wrapper .commissions-table td {
padding: 14px 12px;
color: #333;
}
.commissions-wrapper .commissions-table td a {
color: var(--hint-color);
text-decoration: none;
font-weight: 500;
}
.commissions-wrapper .commissions-table td a:hover {
text-decoration: underline;
}
.commissions-wrapper .commission-amount {
font-weight: 600;
color: #2e7d32;
}
.commissions-wrapper .commission-status {
display: inline-block;
padding: 6px 12px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.commissions-wrapper .commission-status.status-pending {
background-color: #fff3cd;
color: #856404;
}
.commissions-wrapper .commission-status.status-approved {
background-color: #d4edda;
color: #155724;
}
.commissions-wrapper .commission-status.status-paid {
background-color: #d1ecf1;
color: #0c5460;
}
.commissions-wrapper .commission-status.status-cancelled {
background-color: #f8d7da;
color: #721c24;
}
.commissions-wrapper .no-data {
text-align: center;
padding: 40px 20px !important;
color: #999;
font-style: italic;
}
/* Responsive */
@media (max-width: 768px) {
.commissions-wrapper .commissions-summary {
flex-direction: column;
gap: 15px;
}
.commissions-wrapper .commissions-table-container {
overflow-x: scroll;
}
.commissions-wrapper .commissions-table {
min-width: 800px;
}
.commissions-wrapper .commissions-filter-form {
grid-template-columns: 1fr;
}
.commissions-wrapper .filter-actions {
flex-direction: column;
width: 100%;
}
.commissions-wrapper .btn {
width: 100%;
}
.commissions-wrapper .commissions-filters {
padding: 16px;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.commissions-wrapper .commissions-filter-form {
grid-template-columns: repeat(2, 1fr);
}
.commissions-wrapper .filter-actions {
grid-column: span 2;
}
}
@media (min-width: 1025px) {
.commissions-wrapper .commissions-filter-form {
grid-template-columns: 2fr 1.5fr 1.5fr 1fr;
}
}
/* Pagination Styles */
.commissions-wrapper .commissions-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 30px;
padding: 20px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border: 1px solid #e5e7eb;
flex-wrap: wrap;
}
.commissions-wrapper .pagination-btn {
padding: 8px 16px;
font-size: 0.875rem;
font-weight: 600;
color: #374151;
background-color: #ffffff;
border: 1px solid #d1d5db;
border-radius: 8px;
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.commissions-wrapper .pagination-btn:hover:not(.disabled) {
background-color: #f3f4f6;
border-color: #9ca3af;
transform: translateY(-1px);
}
.commissions-wrapper .pagination-btn.disabled {
color: #9ca3af;
cursor: not-allowed;
opacity: 0.5;
}
.commissions-wrapper .pagination-numbers {
display: flex;
align-items: center;
gap: 6px;
}
.commissions-wrapper .pagination-number {
min-width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 8px;
font-size: 0.875rem;
font-weight: 500;
color: #374151;
background-color: #ffffff;
border: 1px solid #d1d5db;
border-radius: 8px;
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
}
.commissions-wrapper .pagination-number:hover:not(.current) {
background-color: #f3f4f6;
border-color: #9ca3af;
transform: translateY(-1px);
}
.commissions-wrapper .pagination-number.current {
background-color: #3b82f6;
color: #ffffff;
border-color: #3b82f6;
cursor: default;
font-weight: 700;
}
.commissions-wrapper .pagination-ellipsis {
padding: 0 4px;
color: #9ca3af;
font-weight: 600;
}
.commissions-wrapper .pagination-info {
width: 100%;
text-align: center;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #e5e7eb;
font-size: 0.875rem;
color: #6b7280;
font-weight: 500;
}
/* Responsive Pagination */
@media (max-width: 768px) {
.commissions-wrapper .commissions-pagination {
padding: 16px;
gap: 8px;
}
.commissions-wrapper .pagination-btn {
padding: 6px 12px;
font-size: 0.813rem;
}
.commissions-wrapper .pagination-number {
min-width: 32px;
height: 32px;
font-size: 0.813rem;
}
.commissions-wrapper .pagination-info {
font-size: 0.813rem;
}
}
/**
* Commissions Chart Styles
*/
.commissions-chart-wrapper {
background: #fff;
border-radius: 8px;
padding: 24px;
margin: 24px 0;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.commissions-chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 16px;
}
.commissions-chart-header h2 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #111827;
}
.commissions-chart-legend {
display: flex;
gap: 24px;
align-items: center;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
}
.legend-color {
width: 16px;
height: 16px;
border-radius: 3px;
}
.legend-color.legend-orders {
background-color: var(--base-color);
}
.legend-color.legend-amount {
background-color: var(--hint-color);
}
.legend-label {
font-size: 14px;
color: #6b7280;
font-weight: 500;
}
.commissions-chart-container {
position: relative;
height: 400px;
width: 100%;
}
.commissions-chart-empty {
display: flex;
align-items: center;
justify-content: center;
height: 300px;
background: #f9fafb;
border-radius: 8px;
border: 2px dashed #d1d5db;
}
.commissions-chart-empty p {
color: #6b7280;
font-size: 14px;
margin: 0;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.commissions-chart-wrapper {
padding: 16px;
}
.commissions-chart-header {
flex-direction: column;
align-items: flex-start;
}
.commissions-chart-legend {
width: 100%;
justify-content: flex-start;
}
.commissions-chart-container {
height: 300px;
}
}
@media (max-width: 480px) {
.commissions-chart-legend {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.commissions-chart-container {
height: 250px;
}
}
/**
* Order Details Modal Styles
*/
/* Modal Container */
.order-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
/* Modal Overlay */
.order-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1;
}
/* Modal Content */
.order-modal-content {
position: relative;
background: #fff;
border-radius: 8px;
max-width: 800px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
z-index: 2;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
/* Close Button */
.order-modal-close {
position: sticky;
top: 0;
right: 0;
float: right;
background: transparent;
border: none;
font-size: 32px;
line-height: 1;
color: #666;
cursor: pointer;
padding: 15px 20px;
z-index: 10;
transition: color 0.3s ease;
}
.order-modal-close:hover {
color: #000;
}
/* Modal Body */
.order-modal-body {
padding: 20px 30px 30px;
}
/* Loading State */
.order-modal-loading {
text-align: center;
padding: 40px 20px;
}
.order-modal-loading .spinner {
display: inline-block;
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 15px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.order-modal-loading p {
color: #666;
font-size: 14px;
margin: 0;
}
/* Error State */
.order-modal-error {
text-align: center;
padding: 40px 20px;
}
.order-modal-error p {
color: #e74c3c;
font-size: 16px;
margin: 0;
}
/* Order Details Content */
.order-details-modal-content {
padding-top: 10px;
}
.order-details-header {
border-bottom: 2px solid #eee;
padding-bottom: 15px;
margin-bottom: 25px;
}
.order-details-header h2 {
margin: 0 0 5px 0;
font-size: 24px;
color: #333;
}
.order-details-header .order-date {
margin: 0;
color: #666;
font-size: 14px;
}
/* Order Items Section */
.order-details-items,
.order-details-totals,
.order-details-notes {
margin-bottom: 30px;
}
.order-details-items h3,
.order-details-totals h3,
.order-details-notes h3 {
font-size: 18px;
margin: 0 0 15px 0;
color: #333;
}
/* Order Items Table */
.order-items-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
.order-items-table thead th {
background-color: #f8f8f8;
padding: 12px;
text-align: left;
font-weight: 600;
border-bottom: 2px solid #ddd;
font-size: 14px;
}
.order-items-table tbody td {
padding: 12px;
border-bottom: 1px solid #eee;
font-size: 14px;
}
.order-items-table tbody tr:last-child td {
border-bottom: none;
}
.order-items-table tbody td:nth-child(2),
.order-items-table tbody td:nth-child(3),
.order-items-table tbody td:nth-child(4),
.order-items-table thead th:nth-child(2),
.order-items-table thead th:nth-child(3),
.order-items-table thead th:nth-child(4) {
text-align: right;
}
.order-items-table tbody td small {
color: #999;
font-size: 12px;
}
/* Order Totals Table */
.order-totals-table {
width: 100%;
max-width: 400px;
margin-left: auto;
border-collapse: collapse;
}
.order-totals-table tbody th {
text-align: left;
padding: 8px 12px;
font-weight: 500;
font-size: 14px;
color: #666;
}
.order-totals-table tbody td {
text-align: right;
padding: 8px 12px;
font-size: 14px;
color: #333;
}
.order-totals-table tr.order-total th,
.order-totals-table tr.order-total td {
border-top: 2px solid #ddd;
padding-top: 12px;
font-size: 16px;
color: #000;
}
.order-totals-table tr.order-total td strong {
font-weight: 700;
}
/* Order Notes */
.order-details-notes p {
background-color: #f8f8f8;
padding: 15px;
border-radius: 4px;
margin: 0;
font-size: 14px;
color: #666;
line-height: 1.6;
}
/* Order Number Link */
.order-number-link {
color: #3498db;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.order-number-link:hover {
color: #2980b9;
text-decoration: underline;
}
/* Responsive */
@media (max-width: 768px) {
.order-modal-content {
width: 95%;
max-height: 95vh;
}
.order-modal-body {
padding: 15px 20px 20px;
}
.order-details-header h2 {
font-size: 20px;
}
.order-items-table thead th,
.order-items-table tbody td {
padding: 8px;
font-size: 13px;
}
.order-totals-table {
max-width: 100%;
}
.order-totals-table tbody th,
.order-totals-table tbody td {
padding: 6px 8px;
font-size: 13px;
}
}
@media (max-width: 480px) {
.order-items-table thead th:nth-child(3),
.order-items-table tbody td:nth-child(3) {
display: none;
}
.order-modal-close {
padding: 10px 15px;
font-size: 28px;
}
}