:root {
    --color-black: #000000;
    --color-yellow: #FFC107;
    --color-blue: #0E5669;
    --color-black: #0A0708;
    --color-white: #FFFFFF;
    --colo-white-grey:#f9f9f9;
    --color-grey: #EEEEEE;
    --color-red: #F21B3F;
    --color-dark-white:#FCFDFF;
    --space-0: 0rem;
    --space-1: 0.5rem;   /* 8px */
    --space-2: 1rem;     /* 16px */
    --space-3: 1.5rem;   /* 24px */
    --space-4: 2rem;     /* 32px */
    --space-5: 2.5rem;   /* 40px */
    --space-6: 3rem;     /* 48px */
    --space-7: 3.5rem;   /* 56px */
    --space-8: 4rem;     /* 64px */
    --space-9: 4.5rem;   /* 72px */
    --space-10: 5rem;    /* 80px */
    --space-11: 5.5rem;  /* 88px */
    --space-12: 6rem;    /* 96px */
    --space-14: 7rem;    /* 112px */
    --space-16: 8rem;    /* 128px */
    --space-20: 10rem;   /* 160px */
    --space-24: 12rem;   /* 192px */
    --space-28: 14rem;   /* 224px */
    --space-32: 16rem;   /* 256px */
    --base-padding-x: max(5vw, 40px);
    --base-padding-y: clamp(16px, 4vw, 24px);
  }
/*General */
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    transition: 0.3s ease all;
}
body,html{
    padding:0;
    margin:0;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    background:var(--color-grey);
}
p{
    font-weight: 500;
    line-height: 140%;
}
a{
    text-decoration: none;
}
#whatappButton{
  background-color: var(--color-yellow);
  border-radius: 50%;
  position: fixed;
  bottom: var(--space-12);
  height: 48px;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  right: var(--base-padding-x);
  cursor: pointer;
}
#whatappButton:hover{
  transform: scale(0.9);
}
.password-wrapper {
  position: relative;
  width: 100%;
}

.password-wrapper .form-input {
  width: 100%;
  padding-right: var(--space-4);
}

.password-wrapper .toggle-password {
  position: absolute;
  right: 10px;
  top: 60%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  cursor: pointer;
  opacity: 0.7;
}

.password-wrapper .toggle-password:hover {
  opacity: 1;
}
.form-input{
     border:0.094rem solid var(--color-black);
    border-radius:0.5rem; 
    background-color: var(--colo-white-grey);
    font-size: 1rem;
    padding: var(--space-1) var(--space-2);
    width: 100%;
    font-family: "Montserrat", sans-serif;
     font-size: 1rem;
     font-weight: 500;
}
.form-input:focus{
    border:0.094rem solid var(--color-yellow);
}
.form-input::placeholder{ 
    color: var(--color-black); 
    opacity: 0.8; 
}
.form-input::-webkit-input-placeholder {
     color: var(--color-black); 
      opacity: 0.8; 
}
.form-input::-moz-placeholder {
   color: var(--color-black); 
  opacity: 0.8;
}

.form-input:-ms-input-placeholder {
     color: var(--color-black); 
      opacity: 0.8; 
}
.form-input::-ms-input-placeholder {
    color: var(--color-black); 
     opacity: 0.8; 
}
.form-select {
  appearance: none; 
  -webkit-appearance: none;
  -moz-appearance: none; 
  background-image: url('../images/ArrowCircleUp.svg'); 
  background-repeat: no-repeat;
    background-color: var(--colo-white-grey);
  background-position: right var(--space-2) center; 
  border-radius:0.5rem; 
  border:0.094rem solid var(--color-black);
  padding: var(--space-1) var(--space-2);
  font-family: "Montserrat", sans-serif;
  width: 100%;
  height: 2.375rem;
  font-size: 1rem;
  color:var(--color-black);
}
.form-input:focus,
.form-select:focus {
  outline: none;
}
.form-input:disabled,
.form-select:disabled {
  background-color: #f0f0f0; 
  color: var(--color-black);
  cursor: not-allowed; 
  opacity: 1;
}
.quantity {
    display: flex;
    gap:var(--space-1);
}
.quantity-input{
    width: 4rem;
    text-align: center;
    height: 2.375rem;
}
.btn-quantity{
  background-color: var(--colo-white-grey);
   border-radius:0.5rem; 
    padding: var(--space-1) var(--space-1);
     outline: none;
    border:0.094rem solid var(--color-black);
    height: 2.375rem;
    width: 2.375rem;
    font-size: clamp(1rem, 2vw, 1.5rem);
    line-height: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-primary, .btn-secondary{
    background-color: var(--color-blue);
    border-radius:0.5rem; 
    display: flex;
    color:var(--color-white);
    outline: none;
    border:none;
    width: 100%;
    padding: var(--space-1) var(--space-1);
    align-items: center;
    justify-content: center;
    gap:var(--space-1);
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 600;
    height: 2.375rem;
    font-family: "Montserrat", sans-serif;
    transition: all 0.1s ease;
    cursor: pointer;
}
.btn-secondary{
    background-color: var(--color-yellow);
    color:var(--color-black);
    width: 20rem;
}
.btn-primary:hover, .btn-secondary:hover, .btn-outline:hover{
  scale: 0.98;
}
   
.btn-primary img, .btn-secondary img, .btn-outline img{
    width: var(--space-2);
    height: var(--space-2);
}
.btn-outline{
    border-radius:0.5rem; 
    display: flex;
    color:var(--color-blue);
    outline: none;
    border:none;
    width: 100%;
    padding: var(--space-1) 0;
    align-items: center;
    justify-content: flex-start;
    gap:var(--space-1);
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 600;
    height: 2.375rem;
    font-family: "Montserrat", sans-serif;
}
/* General END */
/* Header */
.top-bar{
    background-color:var(--color-black);
    height:3.125rem;
    display:flex;
    padding: var(--space-1) var(--base-padding-x);
    justify-content: space-between;
}
.top-bar-left,
.top-bar-right,
.top-bar a, .top-bar div{
    display:flex;
    align-items:center;
    justify-content: center;
    color: var(--color-white);
    font-size:0.875rem;
    font-weight: 500;
}
.top-bar img{
    margin-right: var(--space-1);
}
.top-bar-left, 
.top-bar-right{
    gap:var(--space-5);
}
.middle-bar{
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--base-padding-x);
}
.dropdown-menu{
    display: none;
}
.middle-bar-center{
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.search-input{
    border:0.094rem solid var(--color-black);
    border-radius:0.5rem; 
    font-size: 1rem;
    padding: var(--space-1) var(--space-2);
    width: 30vw;
    font-family: "Montserrat", sans-serif;
}
.search-button{
    background-color: var(--color-black);
    border-radius: 1rem;
    outline: none;
    border: none;
    width: 2.333rem;
    height: 2.333rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.search-button:hover{
    scale: 0.9;
}
.middle-bar-right{
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.middle-bar-right img{
   margin-left: var(--space-1);
}
.middle-bar-right a{
    color:var(--color-black);
}
.middle-bar-right a{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}
#cart-count{
    position: absolute;
    right: -0.5rem;
    top: -1rem;
    background-color: var(--color-yellow);
    color:var(--color-black);
    font-size:0.625rem;
    height: var(--space-2);
    width: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 600;
}
.bottom-bar{
    background-color: var(--color-yellow);
     display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--base-padding-x);
}
.bottom-bar-left{
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.bottom-bar-left a{
  cursor: pointer;
}
.bottom-bar-right {
    display: flex;
    align-items: center;
}
.bottom-bar-right a{
    color: var(--color-black);
    font-size: 0.875rem;
    font-weight: 500;
    width: 15vw;
    height: var(--space-5);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.bottom-bar-right .active{
     background-color: var(--color-black);
    color: var(--color-white);
}
.bottom-bar-right a:hover{
    background-color: var(--color-black);
    color: var(--color-white);
}
/* Header END */

/* Footer */
footer{
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 0 var(--base-padding-x);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    margin-top:var(--space-8);
}
footer hr{
    width: 80%;
}
footer .separator{
    grid-column: span 12;
    width: 100%;
    border-bottom:1px solid var(--color-white);
}
footer .copywrite{
    grid-column: span 12;
    text-align: center;
    margin-bottom: var(--space-2);
}
footer h3{
    font-size: clamp(1.5rem, 2vw, 2.25rem);
    color: var(--color-white);
}
footer .logo{
    width: 13.5rem;
}
footer > .col-2, footer > .col-3{
    display: flex;
    flex-direction: column;
    row-gap: var(--space-2);
    margin-top:var(--space-9);
    margin-bottom: var(--space-9);
}
footer > .col-3 > div{
    display: grid;
    grid-template-columns: 4rem auto;
    align-items: start;
    column-gap: var(--space-2);
    width: 80%;
} 
footer > .col-3 > div > p:first-of-type{
    width: 10rem;
}
footer h3{
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    font-weight: 500;
}
footer a, footer p{
    color:var(--color-white);
    font-size: 0.875rem;
    font-weight: 400;
}
footer img{
    width: 100%;
}
/* Footer END */

/* Layout */
#hero{
    margin-top:var(--space-6);
}
#thankyou{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#thankyou img{
  max-height:40vh;
}
#thankyou h1{
      font-size: clamp(2rem, 3vw, 3.125rem);
    font-weight: 900;
    margin-bottom: var(--space-1);
}
section{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem; 
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--base-padding-x);
}
.filter-area {
  grid-column: span 4; 
  background: #000000;
  padding: var(--space-5);
  color: #fff;
  border-radius: var(--space-1);
}
.filter-area h2:nth-of-type(1){
   margin-bottom:var(--space-1);
}
.filter-area h2{
    font-size: clamp(1.5rem, 2vw, 2.25rem);
    color: var(--color-white);
}
.filter-area h2:nth-of-type(2){
    margin-top: var(--space-9);
}
.filter-area div{
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top:var(--space-3);
}
.filter-area div button{
    background: var(--color-blue);
    border-radius: 1rem;
    outline: none;
    border: none;
    width: 2.333rem;
    height: 2.333rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;

}
.filter-area select:nth-of-type1{
    margin-top:var(--space-3);
}
.filter-area select, 
.filter-area > .form-input:nth-of-type(1),
.filter-area > .btn-primary
{
    margin-top:var(--space-3);
}

.car-area{
  grid-column: span 8;
  background: #F7F9FD url("../images/MasiniNoiIntratePeStoc.jpg") no-repeat center center;
  background-size: cover;
  padding: var(--space-5);
  border-radius: var(--space-1);
  display: flex;
}
.car-area h1{
    font-size: clamp(2rem, 3vw, 3.125rem);
    font-weight: 900;
    margin-bottom: var(--space-1);
}
.car-area div{
    width: 45%;
}
.car-area .btn-primary{
    width: 50%;
    margin-top:var(--space-4);
}
.trust-area{
    grid-column: span 12;
    background-color: var(--color-white);
    border-radius: var(--space-1);
    display: flex;
    align-items: center;
    gap:var(--space-3);
    justify-content: space-between;
    padding: var(--space-3) var(--space-2);
}
.trust-item{
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.trust-item h2{
    font-size: clamp(1.5rem, 1.8vw, 1.75rem);
    color: var(--color-black);
    font-weight: 900;
}
.trust-item div{
    display: flex;
    flex-direction: column;
}
.title{
    grid-column: span 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:var(--space-2);
}
.title h2{
   font-size: clamp(1.5rem, 3.7vw, 4.188rem);
    color: var(--color-black);
    font-weight: 500;
}
.title p{
    text-align: center;
    width: 50%;
}
.title h2 span{
    color: var(--color-yellow);
    font-weight: 900;
}
#masini, #piese, #testimoniale, #categorii , #intrebari{
    margin-top:var(--space-14);
}
.card-wrapper{
    grid-column: span 12;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem; 
    margin: 0 auto;
    width: 100%;
    margin-top:var(--space-8);
}
.card{
    grid-column:span 3;
    background: var(--color-white);
    padding: var(--space-2);
    border-radius: var(--space-1);
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.card-image figure{
    width: 100%;
    height: 16.25rem;
    border-radius: var(--space-1);
}
.card-image figure img{
    object-fit: cover;
    height: 16.25rem;
    width: 100%;
    border-radius: var(--space-1);
}
.card-body h3{
     margin-top:var(--space-3); 
     margin-bottom: var(--space-4); 
}
.card-body h3 a{
    font-size: clamp(1rem, 1.5vw, 1.313rem);
    color: var(--color-black);
    font-weight: 500;
    margin-top:var(--space-3);   
}
.card-desc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.card-desc-piese{
    display: flex;
    flex-direction: column;
      gap: var(--space-1);
}
.card-desc-piese p{
  width: 100%;
  font-size: 0.75rem;
}
.card-desc p {
  width: calc(50% - var(--space-1));
  font-size: 0.75rem;
}
.card-desc p span, .card-desc-piese span{
    color:var(--color-blue);
    font-weight: 600;
}
.card-footer{
     display: flex;
     gap: var(--space-1);
     justify-content: flex-end;
     margin-top:var(--space-8);
     align-items: center;
}
.card-footer:has(> *:nth-child(2):last-child) {
    justify-content: space-between;
}
.card-footer a{
     width:50%;
}
.card-footer h4{
    font-size: clamp(2rem, 2.2vw, 3rem);
    font-weight: 900;
}
.card-footer h4 span{
      font-size: 0.875rem;
      font-weight: 500;
}

.categorii-wrapper{
    grid-column: span 12;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    margin: 0 auto;
    margin-top:var(--space-8);
    width: 100%;
}
.categorii-item{
   grid-column: span 4;
    background: var(--color-white);
    padding: var(--space-2);
    border-radius: var(--space-1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-5);
}
.categorii-item > div > h3{
     font-size: clamp(1rem, 1.5vw, 1.313rem);
     color:var(--color-yellow);
     font-weight: 900;
}
.categorii-item > div{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--space-2);
}
.categorii-item > div > a{
    color:var(--color-black);
    font-weight: 500;
}
.categorii-item > div > .btn-outline{
    color:var(--color-blue);
     font-weight: 600;
}
.col-3{
    grid-column: span 3;
}
.col-2{
    grid-column: span 2;
}
#title h1{
    grid-column: span 12;
      font-size: clamp(1.5rem, 3.7vw, 4.188rem);
    color: var(--color-black);
    font-weight: 500;
    text-align: center;
    margin-top:var(--space-10);
    margin-bottom: var(--space-3);
}
#title h1 span {
    color: var(--color-yellow);
    font-weight: 900;
}
#shop-container{
 margin-top:var(--space-8);
}
.breadcrumb{
    grid-column: span 12;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}
.breadcrumb-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background-color: var(--color-white);
    border-radius: var(--space-1);
    padding: var(--space-1);
}
.breadcrumb-wrapper a{
    color:var(--color-black);
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0.6;
    font-size: 1rem;
    cursor: pointer;
}
.breadcrumb-wrapper a:last-of-type{
    opacity: 1;
}
.side-bar{
    grid-column: span 3;
}
.filtre{
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background-color: var(--color-white);
    border-radius: var(--space-1);
    padding: var(--space-5);
}
.filtre label{
    font-weight: 500;
}
.filtre select{
    margin-top:var(--space-1);
}
.rezultateMasini{
    grid-column: span 9;
}
.rezultateMasini .card-wrapper{
    margin-top:0;
}
.rezultateMasini .card-wrapper > .card{
    grid-column: span 4;
}
#pagination-controls{
    margin-top:var(--space-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#pagination-controls button{
    border:1px solid var(--color-black);
    background-color: var(--color-white);
    border-radius: var(--space-1);
    width:2.875rem; 
    height:2.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.1s ease;
}
#pagination-controls button:hover{
    background-color: var(--color-yellow);
    scale: 0.9;
}
#page-info{
    font-weight: 500;
}
.masini-details{
    grid-column: span 7;
    display: flex;
    gap: var(--space-5);
    background-color: var(--color-white);
    border-radius: var(--space-1);
    padding: var(--space-5);
}
.piese-details{
    grid-column: span 9;
    display: flex;
    gap: var(--space-5);
    background-color: var(--color-white);
    border-radius: var(--space-1);
    padding: var(--space-5);
    width: 100%;
}

.details{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.details p {
    margin-bottom: var(--space-1);
}
.details p span{
    color: var(--color-blue);
    font-weight: 600;
}
.piese-info{
    display: flex;
    flex-wrap: wrap;
    column-gap:var(--space-5);
    row-gap: var(--space-1);
    justify-content: space-between;
}
.piese-info p{
    width: calc(50% - var(--space-5));
}
.disponibilitate{
    margin-top:var(--space-1);
}

.tag{
    background-color: var(--color-yellow);
    color:var(--color-black);
    font-size: 0.875rem;
    font-weight: 600;
    padding: var(--space-1) var(--space-1);
    border-radius: var(--space-1);
    text-align: center;
    width: 4rem;
}
.cumpara-form{
    grid-column: span 3;
    display: flex;
    background-color: var(--color-white);
    border-radius: var(--space-1);
    padding: var(--space-5);
    flex-direction: column;
    justify-content: space-between;
    row-gap: var(--space-3);
}
.cumpara-form > div:first-of-type{
    display: flex;
    flex-direction: column;
    gap:var(--space-2);
}
.cumpara-form .col-12{
    grid-column: span 12;
}
.cumpara-form h4{
    font-size: clamp(2rem, 2.5vw, 3rem);
    font-weight: 900;
}
.cumpara-form h4 span{
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-black);
}
.cumpara-form h5{
    font-size: clamp(1.5rem, 1.8vw, 1.75rem);
    color: var(--color-black);
    font-weight: 900;
}
.cumpara-form hr{
    margin-top: var(--space-1);
    margin-bottom: var(--space-1);
    border-color:var(--color-black);
}
.info{
    padding: var(--space-1) var(--space-2);
    background-color: #f9f9f9;
    font-weight: 500;
    display: flex;
    gap:var(--space-1);
    border-radius: var(--space-1);
    width: fit-content;
    font-size: 0.875rem;


}   
.info-outline{
     padding: var(--space-1) 0;
    font-weight: 500;
    display: flex;
    gap:var(--space-1);
    border-radius: var(--space-1);
    width: fit-content;
     font-size: 0.875rem;
}
.group-price-qty{
    display: flex;
    gap:var(--space-1);
}
.solicita-form{
    grid-column: span 5;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    background-color: var(--color-white);
    border-radius: var(--space-1);
    padding: var(--space-5);
}
.solicita-form .col-6{
    grid-column: span 6;
}
.solicita-form .col-12{
    grid-column: span 12;
}
.solicita-form p{
    margin-bottom: var(--space-1);
}
.solicita-form p span{
    color: var(--color-red);
}
.solicita-form textarea{
   height: 10rem;
}
#trust, #piese-masina{
    margin-top:var(--space-3);
}
#intrebari .banner-reduceri-vertical, #intrebari .banner-piese-vertical{
    grid-column: span 3;
}
#video{
  position: relative;
  height: 40vh;
}
#video video{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
#video::after{
  content:'';
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: var(--color-black);
  opacity: 0.8;
  display: flex;
  width: 100%;
  height: 100%;
}
#video .title{
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
}
#video .title h1{
    font-weight: 500;
    text-align: center;
     font-size: clamp(1.5rem, 3.7vw, 4.188rem);
    color:var(--color-white);
}
#video .title h1 span{
  color:var(--color-yellow);
  font-weight: 900;
}
#video .title p{
    font-size: 1.125rem;
    color:var(--color-white);
    text-align: center;
    margin-top: var(--space-2);
}
#descriere{
  margin-top: var(--space-8);
}
#descriere article{
    grid-column-start: 4;
    grid-column-end: span 9;
    background-color: var(--color-white);
    border-radius: var(--space-1);
}
#descriere article p{
  font-size: 0.875rem;
  margin: var(--space-2);
}
.about{
  margin-top:var(--space-8);
  display: flex;
   align-items: center;
   padding: 0 calc(2 * var(--base-padding-x ));
}
.about .image{
  width: 50%;
}
.about img{
  display: flex;
  max-height:38rem;
}
.about > .text{
    display: flex;
    width:50%;
    flex-direction: column;
}
.about .flag-img{
  margin-left:-15rem;
}
.about .box-img{
  margin-left:-9rem;
}
.about > .text h2{
  font-size: clamp(1.5rem, 3.7vw, 4.188rem);
}
.about hr{
  margin-bottom: var(--space-2);
  margin-top:var(--space-2);
  border-color:var(--color-black);
}
.about p {
  margin-bottom: var(--space-2);
   
}
.contact{
  padding: 0 calc(2 * var(--base-padding-x));
  display: flex;
  gap:var(--space-12);
  margin-top:var(--space-14);
}
.contact-info{
  width: calc(35% - var(--space-3));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.contact-info h3{
  font-size: clamp(0.875rem, 1vw, 1rem);
  font-weight: 500;
}
.contact-info h3 span{
  font-weight: 600;
}
.contact-info img{
  margin-bottom: var(--space-2);
}
.contact-info div:nth-last-of-type(1) > div{
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}
.contact-info div:nth-last-of-type(1) > div span{
  font-weight: 600;
}
.program{
  display: flex;
  flex-direction: column;
}
.contact-form{
  position: relative;
  width: calc(65% - var(--space-3));
}
.contact-form::before{
    content: '';
    display: block;
    position: absolute;
    left:-4rem;
    top:0;
    width: 1px;
    height: 100%;
    background-color: var(--color-black);
}
.contact-form h2{
     font-size: clamp(1.5rem, 2vw, 2.25rem);
     margin-bottom: var(--space-3);
     
}
#contactForm{
       display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap:var(--space-3)
}
.contact-form .col-6{
    grid-column: span 6;
}
.contact-form .col-12{
    grid-column: span 12;
}
.contact-form label{
    font-size:1rem;
    font-weight: 500;
}
.contact-form label span{
    color: var(--color-red);
}
.contact-form .form-input{
    margin-top:var(--space-1);
}
.contact-form textarea{
  height: 10rem;
}
.map-responsive{
  margin-top:var(--space-14);
  height: 38rem;
  padding: 0 calc(2 * var(--base-padding-x ));

}
#map {
    grid-column: span 12;
  height: 100%;
  width: 100%;
    border-radius: var(--space-1);
}
.intrebari-contact{
   padding: 0 calc(2 * var(--base-padding-x ));
   gap: var(--space-6);
}
.intrebari-contact .title{
  grid-column: span 3;
 
}
.intrebari-contact .title p{
  text-align: left;
  width: 100%;
}
.politica:nth-of-type(1){
  margin-top:var(--space-8);
}
.politica{
  padding: 0 calc(2 * var(--base-padding-x ));
  margin-bottom: var(--space-5);
}
.politica a{
  display: block;
  color:var(--color-black);
  font-weight: 500;
  text-decoration: underline;
  line-height: 180%;
}
.offset{
  margin-left:var(--space-3);
}
.politica h2{
  margin-bottom: var(--space-2);
}

#auth div:nth-of-type(1){
  grid-column-start: 2;
  grid-column: span 5;

}
#auth div:nth-of-type(1) .btn-primary{
  width: 50%;
}
#auth div:nth-of-type(1) p{
  margin-bottom: var(--space-3);
}
#auth h1, #auth h2{
   margin-bottom: var(--space-1);
   font-size: clamp(1.5rem, 2vw, 2.25rem);
}
#auth .auth-form{
  grid-column-start: 7;
  grid-column-end: span 12;
  background-color: var(--colo-white-grey);
  border-radius: var(--space-1);
  padding: var(--space-5);
}
.auth-form label{
  font-weight: 500;
}
.auth-form .form-input{
  margin-top: var(--space-1);
}
#user_error, #pass_error{
  display: none;
  color:var(--color-red);
  font-size: 1rem;
}
.red-box-shadow{
  outline:1px solid var(--color-red);
  border:0;
}
.auth-form div{
  margin-top: var(--space-3);
}
.auth-form div:last-of-type{
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
  align-items: center;
}
.auth-form div:last-of-type a:first-of-type{
  color:var(--color-blue);
  font-weight: 600;
}
.auth-form div:last-of-type a{
  width: calc(50% - var(--space-3));
}
#register{
  margin-top:var(--space-8);

}
#register > div{
  grid-column-start: 3;
  grid-column-end: span 8;
  display: flex;
  align-items: flex-end;
  margin-bottom: var(--space-3);
  justify-content: space-between;
}
#register > div a{
   color:var(--color-blue);
  font-weight: 600;
}
#register h1{
  font-size: clamp(1.5rem, 3.7vw, 4.188rem);
}
#register-form{
  background-color: var(--color-white);
  border-radius: var(--space-1);
  padding: var(--space-5 );
  grid-column-start: 3;
  grid-column-end: span 8;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}
#orderContainer{
  background-color: var(--color-white);
  border-radius: var(--space-1);
  padding: var(--space-5 );
  grid-column-start: 3;
  grid-column-end: span 8;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  margin-top:var(--space-2);
}
#orderContainer .order{
  grid-column: span 12;
 border-bottom: 2px solid black;
    padding-bottom: var(--space-2);
}
.order > .order-info, .order > .order-details{
  display: flex;
    width: 100%;
    justify-content: space-between;
}
.order h5{
  font-size: 16px;
}
.order-articles{
  margin-top:var(--space-2);
  margin-bottom: var(--space-1);
}
.order-details a{
  color:var(--color-blue);
  font-weight: 500;
}
#orderContainer .order:last-of-type{
  border-bottom: none;
}
#register p{
  font-size: 0.875rem;
}
#register-form label{
  font-weight: 500;
}
#register-form .form-input{
  margin-top:var(--space-1);
}
#register-form .col-6{
  grid-column: span 6;
  display: flex;
    flex-direction: column;
 
}
#register-form .display-inline{
     flex-direction: row;
    align-items: center;
    gap: var(--space-1);
}
#register-form .col-12{
  grid-column: span 12;
}
#page-size{
  width: 16rem;
}
#order_term{
  width: 30rem;
}
#user_auth{
  display: none;
}
.filtre-comenzi{
  display: flex;
  column-gap: var(--space-2);
}
#orders{
      grid-column-start: 4;
  grid-column-end: span 8;
}
#comenzilemele{
   grid-column-start: 3;
  grid-column-end: span 8;
}
#myaccount, #cart, #auth, #checkout{
  margin-top: var(--space-8);
  
}

#myaccount > div:first-of-type{
  grid-column-start:2;
  grid-column-end: span 2;
  padding-top:var(--space-12);
}
#account-details{
  grid-column-start: 4;
  grid-column-end: span 8;
}
#account-details h1, #orders h1, #cart h1{
   font-size: clamp(1.5rem, 3.7vw, 4.188rem);
    font-weight: 900;
    margin-bottom: var(--space-3);
}
.myaccount-link {
  display: flex;
  align-items: center;
    font-size: clamp(1rem, 1.5vw, 1.313rem);
    font-weight: 500;
    column-gap: var(--space-1);
    margin-bottom: var(--space-2);
    cursor: pointer;
}
.myaccount-link.active{
  color:var(--color-yellow);
  font-weight: 800;
}
.myaccount-link.active > .account{
  background: url('../images/PersonY.svg') no-repeat center center;
}
.account{
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  background: url('../images/PersonB.svg') no-repeat center center;
}
.orders{
   width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  background: url('../images/CartB.svg') no-repeat center center;
}
#orders{
  display: none;
}

#cart h1{
  grid-column-start: 2;
  grid-column-end: span 10;
   font-size: clamp(1.5rem, 3.7vw, 4.188rem);
    font-weight: 900;
    margin-bottom: var(--space-3);
    margin-top: var(--space-5);
}
.cart-container{
  grid-column-start: 2;
  grid-column-end: span 7;
  background-color: var(--color-white);
  border-radius: var(--space-1);
  padding: var(--space-5);
  height: fit-content;
}
.text-right{
  text-align: right;
}
.cart-summary{
  grid-column: span 3;
}
.cart-header .col-6{
  grid-column: span 6;
}

.cart-header .col-3{
  grid-column: span 3;
}
.cart-header {
  font-size: clamp(1rem, 1.5vw, 1.313rem);
  font-weight: 900;
  margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1.4px solid var(--color-black);
}
.row-cart, .cart-header{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap:1.5rem
}
.row-cart .col-2{
  grid-column: span 2;
}

.row-cart a{
  color: var(--color-black);
  font-weight: 600;
    font-size: 1rem;
}
.row-cart .col-3{
  grid-column: span 3;

}
.row-cart .col-4{
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.row-cart .col-6{
 grid-column: span 6;
}
.row-cart .col-7{
  grid-column: span 7;
}
.row-cart .col-5{
  grid-column: span 5;
}
.row-cart .col-2 img{
  width: 100%;
  object-fit: cover;
  border-radius: var(--space-1);
}
.row-cart h4{
  font-size: 2rem;
  font-weight: 900;
  text-align: right;
}
.row-cart p {
  font-size: 0.875rem;
  margin-top:var(--space-1);
}
.row-cart p span{
  color: var(--color-blue);
  font-weight: 600;
}
.row-cart .js-btn-delete{
  color:var(--color-red);
  text-decoration: underline;
   font-size: 0.875rem;
   cursor: pointer;
   margin-top:var(--space-2);
}
.row-cart h4 span{
     font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-black);
}
.cart-body hr{
  margin-top:var(--space-2);
  margin-bottom: var(--space-2);
  border-color:var(--color-black);
}
.cart-body hr:last-of-type{
  display: none;
}
.cart-summary{
  background: var(--color-white);
  border-radius: var(--space-1);
  padding: var(--space-5);
  height: fit-content;
}
.cart-summary h4{
 font-size: 1.25rem;
}
.cart-summary h4 span, .cart-summary p{
  font-size: 0.75rem;
}
.cart-summary p{
  margin-bottom: var(--space-2);
}
.cart-summary h2{
 font-size: clamp(1rem, 1.5vw, 1.313rem);
  font-weight: 900;
  margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1.4px solid var(--color-black);
}
.cart-summary .total{
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1.4px solid var(--color-black);
  display: flex;
  justify-content: space-between;
   font-size: 2rem;
  font-weight: 900;
  text-align: right;
}
.total h3{
  font-weight: 900;
}
.total p{
  font-size: 1.25rem;
  font-weight: 900;
}
.total span{
  font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-black);
}
.info-desc{
  margin-top:var(--space-4);
}
.info-desc > .info{
  margin-top:var(--space-1);
}
.cart-summary .btn-primary{
  margin-top: var(--space-3);
}
.checkout-container {
  grid-column-start: 2;
  grid-column-end: span 7;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  background-color: var(--color-white);
  padding: var(--space-5);
  border-radius: var(--space-1);
}
.checkout-container h1, .checkout-container h2{
  grid-column: span 12;
   font-size: clamp(1.5rem, 2vw, 2.25rem);
  font-weight: 900;
}
 #ship_different_address{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  grid-column: span 12;
 }
.checkout-container .col-6, #ship_different_address .col-6{
  grid-column: span 6;
}
.checkout-container .col-12{
  grid-column: span 12;
}
.checkout-container label{
  font-weight: 500;
}
.checkout-container label span{
  color: var(--color-red);
}
.checkout-container .form-input{
  margin-top: var(--space-1);
}
.checkout-container textarea{
  height: 10rem;
}
.checkout-container hr{
  grid-column: span 12;
  border-color: var(--color-black);
}
.checkout-container .form-radio{
  margin-bottom: var(--space-1);
}
.checkout-container .col-6 .form-radio:nth-of-type(1){
  margin-top: var(--space-3);
}
.self-align-end{
  align-self: flex-end;
}
/* Layout END*/

/* Dropdown Menu */
.dropdown-menu {
  display: none;
  position: absolute;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 1000;
  border-radius: var(--space-1);
}
.dropdown-menu li:first-of-type{
  border-top-right-radius: var(--space-1);
  border-top-left-radius: var(--space-1);
}

.dropdown-menu li:last-of-type{
  border-bottom-left-radius: var(--space-1);
  border-bottom-right-radius: var(--space-1);
}

.dropdown-menu li {
  padding: 10px 20px;
}
.dropdown-menu li:hover{
  background-color: var(--color-black);
}
.dropdown-menu li:hover a{
  color:var(--color-white);
}

.dropdown-menu li a {
  text-decoration: none;
  color: var(--color-black);
  display: block;
  cursor: pointer;
}


.show {
  display: block;
}
/* Dropdown Menu End */

/* Banners */
#banners{
    margin-top:var(--space-8);
}
.banner-reduceri{
    grid-column: span 6;
    background: var(--color-blue) url('../images/BannerPieseReducere.svg') no-repeat right center;
    background-size: 55%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--space-5);
    border-radius: var(--space-1);
    background-position-x: 117%;

}
.banner-reduceri h2{
     font-size: clamp(2rem, 3.7vw, 4.188rem);
    color: var(--color-white);
    font-weight: 900;
}
.banner-reduceri p {
    color:var(--color-white);
    margin-top:var(--space-2);
}
.banner-piese{
    grid-column: span 6;
    border-radius: var(--space-1);
    display: flex;
    align-items: center;
    justify-content: center;
    background:url('../images/BannerPiese.jpg') no-repeat center center;
    background-size: cover;
    padding: var(--space-2);
}
.banner-piese div{
    background: transparent;
    border:2px solid var(--color-yellow);
    border-radius: var(--space-1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
   
}
.banner-piese h2{
   color:var(--color-white);
      font-size: clamp(2rem, 3.7vw, 4.188rem);
    font-weight: 500;
    text-align: center;
}
.banners{
    display: flex;
    gap: var(--space-2);
    flex-direction: column;
    margin-top:var(--space-3);
}
.banner-piese-vertical{
    border-radius: var(--space-1);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:url('../images/BannerPieseVertical.jpg') no-repeat center center;
    background-size: cover;
    padding: var(--space-2);
    min-height: 38rem;
    flex-direction: column;
    flex:1;
}
.masini-vertical{
     background:url('../images/BannerMasiniVertical.jpg') no-repeat center center;
     background-size: cover;
}
.banner-piese-vertical div{
    background: transparent;
    border:2px solid var(--color-yellow);
    border-radius: var(--space-1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    flex:1;
}
.banner-piese-vertical h2{
    color:var(--color-white);
    font-size: clamp(1.5rem, 4vw, 3.188rem);
    font-weight: 500;
    text-align: center;
}
.banner-reduceri-vertical a{
    width: 100%;
}
.banner-reduceri-vertical{
    background: var(--color-blue) url(../images/BannerPieseReducere.svg) no-repeat;
    background-size: 120%;
    background-position: 0 -90%;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-3);
    gap: var(--space-2);
    border-radius: var(--space-1);
     min-height: 38rem;
}
.banner-reduceri-vertical h2{
    font-size: clamp(1.5rem, 4vw, 3.188rem);
    color: var(--color-white);
    font-weight: 900;
}
.banner-reduceri-vertical p {
    color:var(--color-white);
    margin-top:var(--space-2);
}
/* Banners END*/

/* Testimonials */
.testimonial-slider {
    grid-column: span 12;
    position: relative;
    overflow: hidden;
    background: url('../images/SliderBackground.jpg') no-repeat center center;
    border-radius: var(--space-1);
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top:var(--space-8);
    height: 25rem;
}
.testimonial-slide {
   position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
    display: flex; 
    justify-content: center; 
    align-items: center; 
}
.testimonial-slide.active {
    opacity: 1;
    pointer-events: auto;
}
.testimonial-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    color: var(--color-white);
}
.user-avatar {
    width: 7.25rem;
    height: 7.25rem;
    border-radius: 50%;
}
.user-info {
    display: flex;
    flex-direction: column;
}
.stars {
    color: var(--color-yellow);
    font-size: 1.5rem;
}
.testimonial-text {
    margin-top: var(--space-1);
    font-size: clamp(1rem, 1.5vw, 1.313rem);
    max-width: 50rem;
}
.dots {
    position: absolute;
    bottom: var(--space-3);
    width: 100%;
    text-align: center;
    z-index: 3;
}
.dot {
    height: 1rem;
    width: 1rem;
    margin: 0 3px;
    background-color: transparent;
    border: 0.125rem solid var(--color-white);
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    cursor: pointer;
}
.dot.active {
    background-color: var(--color-white);
    opacity: 1;
}
/* Testimonials END*/

/* Carousel */
#carousel-inner {
  display: flex;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 300px;
  border-radius: 8px;
}
.carousel-item {
  flex: 0 0 100%;
  display: none;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  width: 30rem;
  height: 100%;
}
.carousel-item.active {
  display: flex;
  position: relative;
  z-index: 1;
}
.carousel-item img.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
}
#carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 1rem;
  overflow-x: auto;
  padding: 8px;
}
.carousel-thumb {
  width: 5rem;
  height: 3rem;
  object-fit: cover;
  border-radius: var(--space-1);
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.carousel-thumb.active {
  border: 2px solid var(--color-yellow, #f5c518);
  opacity: 1;
}
.carousel-nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  color: white;
  padding: 8px 12px;
  font-size: 18px;
  border: none;
  cursor: pointer;
  z-index: 2;
  user-select: none;
  border-radius: 4px;
}
#carousel-prev {
  left: 10px;
}
#carousel-next {
  right: 10px;
}
#imageModal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}
#imageModal img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
}

#imageModal.closeable {
  cursor: pointer;
}
/* Carousel END*/

/* Accordions */
.accordion {
  grid-column: span 9;
  font-family: 'Montserrat', sans-serif;
}
.accordion-item {
 position: relative;
}
.accordion-header {
  background: #f9f9f9;
  border: none;
  border-radius: var(--space-1);
  width: 100%;
  text-align: left;
  padding: var(--space-2);
  font-size: clamp(1rem, 1.8vw, 1.75rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
  color:var(--color-black);
}
.accordion-header::after {
  content: "";
  position: absolute;
  right: var(--space-2);
  width: var(--space-6);
    height: var(--space-6);
  background: url('../images/ChevronCircle.svg') no-repeat center center;
  font-size: 14px;
  transition: transform 0.3s ease;
}
.accordion-header.active::after {
  transform: rotate(180deg);
}
.accordion-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 var(--space-2);
  transition: max-height 0.3s ease, padding 0.3s ease;
  font-size: 1rem;
  color: var(--color-black);
  font-weight: 500;
}
.accordion-body.show {
  padding: var(--space-2);
  max-height: 500px; /* enough to show content */
  margin-bottom: var(--space-2);
}
/* Accordions END*/

/* MENU Categorii */



.menu {
  display: none;
  background-color: var(--color-white); 
  flex-direction: column;
  margin-left:var(--base-padding-x);
  position: absolute;
  z-index:999;
}
.menu > .menu-item > .menu-link{
  padding: var(--space-2);
  font-size: 18px;
  font-weight: 500;
}

.menu-item {
  width: 13rem;
  background-color: var(--color-yellow);
}

.menu-link {
  display: block;
  color: var(--color-black); 
  text-decoration: none;
  font-size: 16px; 
}

.menu > .menu-item > .menu-link:hover{
  background-color: var(--color-black);
  color:var(--color-white);
}



.submenu {
  display: none;
  position: absolute;
  left:13rem;
  top: 0;
  max-width:  calc(100vw - 14rem - 2 * var(--base-padding-x));
    column-count: 3;
    column-gap: 2rem;
    height:33.73rem;
    overflow-y: hidden;
    background-color: var(--color-white);
    z-index: 99;
    width: calc(100vw - 13rem - 2 * var(--base-padding-x));
    padding: var(--space-2);
}

.submenu-item > .menu-link{
 font-size: 18px;
 color:var(--color-blue);
 font-weight: 700;
 margin-bottom: var(--space-2);
} 
.subsubmenu-item > .menu-link:hover{
  padding-left: var(--space-1);
  font-weight: 700;
}
.subsubmenu-item .menu-link{
  margin-bottom: var(--space-1);
  font-weight: 500;
}

.submenu-item {
  break-inside: avoid;
  margin-bottom: 1rem;
}
.submenu-item, .subsubmenu-item {
  position: relative;
}

.menu-item:hover .submenu
{
  display: block;
}



@media (min-width: 1366px) and (max-width: 1641px) {

  .btn-primary, .btn-secondary, .btn-outline{
    font-size: 0.75rem;
  }

.card{
  padding: var(--space-1);
}
.card-image figure, .card-image figure img{
  height: 10.25rem;
}
.card-footer{
  margin-top: var(--space-4);
}
.card-body h3{
  margin-top:var(--space-2);
  margin-bottom: var(--space-3);
}
.card-footer a:nth-of-type(1){
  width: 45%;
}
.card-footer a:last-of-type{
  width: 55%;
}

.categorii-item img{
  width: 45%;
}
.categorii-item > div{
  width: 45%;
}
.categorii-item > div > a{
  font-size: 0.875rem;;
}
.masini-details, .piese-details, .cumpara-form, .solicita-form, .filter-area, .filtre, .categorii-item, .cart-container, .cart-summary{
  padding: var(--space-3);
}

.details p{
  font-size: 0.875rem;
}
.masini-details > .carousel, .piese-details > .carousel{
  width: 50%;
}
.form-input, .form-select{
  font-size: 0.875rem;
}
.piese-details{
  grid-column: span 8;
}
.cumpara-form{
  grid-column: span 4;
}
.piese-info{
  column-gap: var(--space-2);
}
#video{
  height:37vh;
}
.about img{
  max-height: 31rem;
}
.accordion-header{
  font-size: 1.4rem;
}
#cart h1{
  grid-column-start: 1;
}
.cart-container, .checkout-container{
  grid-column-start: 1;
  grid-column-end: span 8;
}
#register-form, #register > div{
  grid-column-start: 2;
  grid-column-end: span 10;
}
.cart-summary{
  grid-column: span 4;
}
#myaccount > div:first-of-type{
  grid-column-start: 1;
  grid-column-end: span 3;
}
}


@media (min-width: 1024px) and (max-width: 1365px) {
   .btn-primary, .btn-secondary, .btn-outline{
    font-size: 0.75rem;
  }
  .submenu{
        column-count: 2;
    
  }
.masini-details, .piese-details, .cumpara-form, .solicita-form, .filter-area, .filtre, .categorii-item, .cart-container, .cart-summary{
  padding: var(--space-2);
}
.car-area div{
  width: 65%;
}
.car-area{
  padding: var(--space-3);
}
p{
  font-size: 0.875rem;
}
  .trust-area{
    flex-wrap: wrap;
    padding: var(--space-2);
  }
  .trust-item{
    width: calc(50% - var(--space-2));
    flex: auto;
  }
  .card{
    grid-column: span 6;
  }
  .testimonial-slider{
    height: 18rem;
  }
  .banner-reduceri
  {
    padding: var(--space-3);
  }
  .form-input, .form-select{
  font-size: 0.875rem;
}
.categorii-item{
  flex-direction: column;
}
.categorii-item > img{
  width: 60%;
}
.accordion-header{
  font-size: 1.2rem;
}
footer .logo{
  width: 10rem;
}
.masini-details{
  flex-direction: column;
}
.solicita-form{
  height: fit-content;
}
.solicita-form .col-6{
  grid-column: span 12;
}
.accordion{
  grid-column: span 8;
}
.testimonial-content{
  padding: var(--space-9);
}
#intrebari .banner-reduceri-vertical, #intrebari .banner-piese-vertical{
  grid-column: span 4;
}
.banner-reduceri-vertical{
  min-height: 31rem;
      background-position: 0 -22%;
}
.banner-piese-vertical{
  min-height: 31rem;
}
.accordion-header::after{
  width: var(--space-4);
  height: var(--space-4);
}
.accordion-header::after{
  background-size: var(--space-4);
}
.side-bar{
  grid-column: span 4;
}
.rezultateMasini{
  grid-column: span 8;
}
.rezultateMasini .card-wrapper > .card{
  grid-column: span 6;
}
#descriere article{
  grid-column-start: 5;
}
.card-footer{
  flex-direction: column;
  align-items: flex-start;
    margin-top: var(--space-4);
}
.card-footer a{
  width: 100%;
}
.card-image figure, .card-image figure img{
  height: 10.25rem;
}

.card-body h3{
  margin-top:var(--space-2);
  margin-bottom: var(--space-3);
}
.piese-details{
  flex-direction: column;
    grid-column: span 7;
}
.cumpara-form{
  grid-column: span 5;
  height: fit-content;
}
.about img{
  max-height: 23rem;
}
.about .flag-img{
  margin-left: -6rem;
}
.about .box-img{
  margin-left: -4rem;
}
#video{
  height: 37vh;
}
#auth div:nth-of-type(1) .btn-primary{
  width: 80%;
}
#auth .auth-form{
  padding: var(--space-3);
}
#myaccount > div:first-of-type{
  grid-column-start: 1;
  grid-column-end: span 3;
}
#register-form{
  padding: var(--space-3);
}
#cart h1{
  grid-column-start: 1;
}
.cart-container, .checkout-container{
  grid-column-start: 1;
  grid-column-end: span 8;
}
#register-form, #register > div{
  grid-column-start: 2;
  grid-column-end: span 10;
}
.cart-summary{
  grid-column: span 4;
}
.row-cart a{
  font-size: 0.875rem;
}
}


@media (min-width: 768px) and (max-width: 1023px) {
  :root{
     --base-padding-x: max(2vw, 24px);
  }
  .submenu{
        column-count: 2;
    
  }
  .top-bar-left, .top-bar-right, .top-bar a, .top-bar div, .btn-primary, .btn-secondary, .btn-outline{
    font-size: 0.75rem;
  }
   .middle-bar-right a, .form-input, .form-select,#register p, label, .search-input, p, .breadcrumb-wrapper a{
  font-size: 0.875rem;
  }
  .title h2, #video .title h1, #register h1{
    font-size: clamp(1.5rem, 5vw, 4.188rem);
  }
  #myaccount, #cart, #auth, #checkout{
    margin-top:var(--space-3);
  }
  #title h1{
    margin-top:var(--space-3);
    margin-bottom: var(--space-2);
        font-size: clamp(1.5rem, 5vw, 4.188rem);
  }
  .cart-summary h4 span, .cart-summary p{
    font-size: 0.875rem;
  }
  #cart h1{
    grid-column-start: 1;
  }
  .row-cart a{
    font-size: 0.875rem;
  }
  .cart-container{
    grid-column-start: 1;
    grid-column-end: span 12;
    padding: var(--space-3);
    
  }
  .checkout-container{
    grid-column-start: 1;
    grid-column-end:span 12;
  }
  .cart-summary{
    padding: var(--space-3);
    grid-column: span 12;
  }
  #auth div:nth-of-type(1) .btn-primary{
    width: 100%;
  }
  #auth .auth-form{
    grid-column-start: 6;
  }
  .auth-form .btn-primary{
    width: 50%;
  }
  #account-details, #orderContainer{
    grid-column-start: 4;
    grid-column-end: span 9;
  }
  #register-form{
    padding: var(--space-2);
  }
  #myaccount > div:first-of-type{
    grid-column-start: 1;
    grid-column-end: span 3;
    display: flex;
    flex-direction: column;
  }
  #register-form, #register > div{
    grid-column-start: 1;
    grid-column-end: span 12;
  }
  .contact, .map-responsive, .intrebari-contact{
        padding: 0 var(--base-padding-x);
  }
  .piese-details, .cumpara-form{
    grid-column: span 12;
    padding: var(--space-2);
  }
  .cumpara-form .btn-primary{
    width: 15rem;
  }
  #shop-container{
    margin-top:var(--space-4);
  }
  .middle-bar-left img{
       width: 10rem;
  }
  #auth .auth-form{
    padding: var(--space-2);
  }
  .categorii-item > div > a{
    font-size: 0.875rem;
  }
  .filtre{
    padding: var(--space-2);
  }
  .side-bar, .rezultateMasini, .masini-details, .solicita-form{
    grid-column: span 12;
  }
  .rezultateMasini .card-wrapper > .card{
    grid-column: span 6;
  }
  #descriere article{
  grid-column-start: 1;
      grid-column-end: span 12;

}
  .masini-details{
    padding: var(--space-2);
    gap:var(--space-2);
  }
 .accordion{
  grid-column: span 8;
 }
 .accordion-body{
  font-size: 0.875rem;
 }
 .accordion-header{
  padding-right: var(--space-5);
 }
 .accordion-header::after{
  width: var(--space-3);
  height: var(--space-3);
  background-size: var(--space-3);
 }
 .masini-details > .carousel, .piese-details > .carousel{
  width: 50%;
}
.banner-reduceri-vertical{
  min-height: 20rem;
  height: 29rem;
  background-position: 0 -26%;
}
.banner-piese-vertical{
  min-height: 20rem;
  height: 29rem;
}
.intrebari-contact .title{
  grid-column: span 4;
}
.contact{
  gap:var(--space-6);
}
.contact-form::before{
  left:-1.5rem;
}
.piese-info{
  column-gap: var(--space-2);
}
#video{
  height: 23vh;
}
#video .title p{
  font-size: 0.875rem;
  margin-top:0;
}
.contact-info div:nth-last-of-type(1) > div span{
  font-size: 0.75rem;
}
.contact-form label{
  font-size: 0.875rem;
}
.about img{
  max-height: 17rem;
}
.about .flag-img{
  margin-left:-5rem;
}

.about .box-img{
  margin-left: -3rem;
}
#carousel-inner{
  height: 220px;
}
  .solicita-form{
    padding: var(--space-2);
  }
  .banners{
    flex-direction: row;
  }
  #intrebari .banner-reduceri-vertical, #intrebari .banner-piese-vertical{
    grid-column: span 4;
  }
  .side-bar .banner-piese-vertical, .side-bar .banner-reduceri-vertical{
    width: calc(50% - var(--space-2));
    min-height: 10rem;
    height: 13rem;
  }
  .side-bar .banner-reduceri-vertical{
    background-position: 0;
  }
  .filter-area{
    padding: var(--space-2);
    grid-column: span 5;
  }
  .filter-area h2:nth-of-type(2){
    margin-top:var(--space-6)
  }
  .car-area{
    padding: var(--space-2);
      grid-column: span 7;
  }
  .car-area div{
    width: 80%;
  }
    .trust-area{
    flex-wrap: wrap;
    padding: var(--space-2);
  }
  .trust-item{
    width: calc(50% - var(--space-2));
    flex: auto;
  }
  .trust-item img{
    width: 3rem;
  }
  #masini, #piese, #testimoniale, #categorii, #intrebari, .map-responsive, .contact{
    margin-top:var(--space-10);
  }
  .card-wrapper{
    margin-top:var(--space-4);
  }
   .card{
    grid-column: span 6;
  }
  .card-footer, #banners, .categorii-wrapper{
    margin-top:var(--space-4);
  }
  .card-body h3{
        margin-top: var(--space-1);
    margin-bottom: var(--space-2);
  }
  .card-image figure img, .card-image figure{
    height: 12rem;
  }
  .testimonial-slider{
    margin-top:var(--space-4);
    height: 14rem;
  }
  .testimonial-text{
    font-size: 0.875rem;
  }
  .testimonial-content{
    padding: var(--space-6);
  }
  .user-avatar{
    width: 5rem;
    height: 5rem;
  }
  .banner-reduceri{
    padding: var(--space-2);
  }
  .categorii-item{
    padding: var(--space-2);
    flex-direction: column;
  }
  .categorii-item > img{
    width: 100%;
  }
  footer > .col-3:nth-of-type(1){
    grid-column: span 12;
    margin-top:var(--space-4);
  }
  footer img{
    width: 80%;
  }
  footer > .col-3 {
    grid-column: span 6;
  }
  footer > .col-2{
    grid-column: span 6;
  }
  footer > .col-2, footer > .col-3{
    margin-top:var(--space-3);
    margin-bottom: var(--space-3);
  }
  footer hr{
    width: 100%;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  :root{
     --base-padding-x: max(2vw, 16px);
  }
    .menu{
    margin-left:0;
  }
  .menu > .menu-item > .menu-link{
    font-size: 14px;
    padding: var(--space-1);
  }
  .menu-item{
    width: 10rem;
    
  }
  .submenu{
        left: 10rem;
        width: calc(100vw - 10rem);
        max-width: calc(100vw - 10rem);
        column-count: 1;
            column-gap: 1rem;
    height: 21.2rem;
  }
  .submenu-item > .menu-link{
    font-size: 14px;
  }
  .subsubmenu-item .menu-link{
    font-size: 12px;
  }
  footer .logo{
    display: none;
  }
  p, .politica a, .row-cart a, .form-input, .form-select, label, .categorii-item > div > a, .breadcrumb-wrapper a, #video .title p, .contact-info div:nth-last-of-type(1) > div span, .contact-form label, .accordion-body{
    font-size: 0.875rem;
  }
  .top-bar a {
   font-size: 0.75rem;
  }
  .top-bar-left > div{
    display: none;
  }
  .middle-bar-left img, footer .logo{
    width: 11rem;
  }
  
  .middle-bar{
    flex-wrap: wrap;
    row-gap: 1rem;
  }
  .middle-bar-center{
    order: 1;
    width: 100%;
  }
  .search-input{
    width: 90%;
  }
  .bottom-bar-right a{
    width: 19vw;
  }
  #hero{
    margin-top:var(--space-3);
  }
  .car-area{
    height: 28rem;
  }
 .car-area div{
  width: 85%;;
 }
  .filter-area, .car-area{
    grid-column: span 12;
    padding: var(--space-2);
  }
  .filter-area h2:nth-of-type(2){
    margin-top:var(--space-4);
  }
  .trust-area{
    flex-wrap: wrap;
    padding: var(--space-2);
  }
   .trust-item img{
    width: 3rem;
  }
  .categorii-item{
    grid-column: span 12;
  }

  .title h2{
    font-size: clamp(2rem, 3.7vw, 4.188rem);
    text-align: center;
  }
  .title p{
    width: 80%;
  }
  #masini, #piese, #testimoniale, #categorii, #intrebari, .contact{
    margin-top:var(--space-8)
  }
  .categorii-item > img{
    width: 12rem
  }
  .categorii-item{
    justify-content: flex-start;
    gap:var(--space-3)
  }
  .card{
    grid-column: span 12;
  }
  .card-wrapper, .testimonial-slider, #banners, .categorii-wrapper, .map-responsive{
    margin-top:var(--space-2)
  }
.banner-reduceri{
  padding: var(--space-2);
}
  .testimonial-content{
    flex-direction: column;
    padding: var(--space-5);
  }
  .banner-reduceri, .banner-piese{
    grid-column: span 12;
    height: 12rem;
  }
   footer > .col-3:nth-of-type(1){
    grid-column: span 12;
    margin-top:var(--space-4);
  }
  footer img{
    width: 80%;
  }
  footer > .col-3 {
    grid-column: span 6;
  }
  footer > .col-2{
    grid-column: span 6;
  }
  footer > .col-2, footer > .col-3{
    margin-top:var(--space-3);
    margin-bottom: var(--space-3);
  }
  footer hr{
    width: 100%;
  }
  #title h1{
    font-size: clamp(2rem, 3.7vw, 4.188rem);
    margin-top:var(--space-4);
    margin-bottom: 0;
  }
  #shop-container{
    margin-top:var(--space-4);
  }
  .side-bar{
    grid-column: span 12;
  }
  .filtre{
    padding: var(--space-2);
  }
  .banner-piese-vertical, .banner-reduceri-vertical{
    height: 12rem;
    min-height: 12rem;
  }
  .banner-reduceri-vertical{
    align-items: flex-start;
    padding: var(--space-2);
  }
  .banner-reduceri-vertical a{
    width: 50%;
  }
  .banner-reduceri-vertical{
    background-size: 75%;
    background-position: 0 45%;
  }
  .rezultateMasini .card-wrapper > .card, .rezultateMasini{
    grid-column: span 12;
  }
    #descriere article{
  grid-column-start: 1;
      grid-column-end: span 12;

}
  .card-footer{
    margin-top:var(--space-4);
  }
  .masini-details, .piese-details{
    grid-column: span 12;
    padding: var(--space-2);
    flex-direction: column;
  }
  .masini-details > .carousel, .piese-details > .carousel{
    width: 100%;
  }
  .details h2{
    margin-bottom: var(--space-2);
  }
  .solicita-form, .cumpara-form{
    grid-column: span 12;
    padding: var(--space-2);
  }
  .accordion{
    grid-column: span 12;
  }
  #intrebari .banner-reduceri-vertical, #intrebari .banner-piese-vertical{
    grid-column: span 12;
  }
  .accordion-header::after{
  width: var(--space-4);
  height: var(--space-4);
}
.accordion-header::after{
  background-size: var(--space-4);
}
.accordion-header{
  padding-right: var(--space-5);
}
#video video{
  object-fit: none;
}
#video .title h1{
  font-size: clamp(2rem, 3.7vw, 4.188rem);
}
#video{
  height: 29vh;
}
.about .image, .about > .text{
  width: 100%;
}
.about img{
  width: 100%;
}
.about .flag-img{
  margin-left:-1rem;
}
.about{
  flex-direction: column;
}
.about:nth-of-type(3), .about:nth-of-type(5){
  flex-direction: column-reverse;
}
.about:nth-of-type(4) > .image > img{
  width: 65%;
    margin-left: 4rem;
}
.about .box-img{
  margin-left:-2rem;
}
.about > .text h2, #cart h1, #register h1{
  font-size: clamp(2rem, 3.7vw, 4.188rem);
}
#video .title{
  padding: var(--space-2);
}
.contact{
  flex-direction: column-reverse;
}
.contact-info{
  width: 100%;
  gap:var(--space-2);
}
.contact-form{
  width: 100%;
}
.intrebari-contact{
  gap: 0;
  row-gap: var(--space-2);
}
.intrebari-contact .title{
  grid-column: span 12;
  align-items: flex-start;
}
 #myaccount, #cart, #auth, #checkout{
    margin-top:var(--space-4);
  }
  #cart h1 {
    grid-column-start: 1;
    margin-top:0;
    margin-bottom: 0;
  }
.cart-container{
    grid-column-start: 1;
    grid-column-end: span 12;
    padding: var(--space-2);
    
  }
  .checkout-container{
    grid-column-start: 1;
    grid-column-end:span 12;
  }
  .cart-summary{
    padding: var(--space-2);
    grid-column: span 12;
  }
  .row-cart .col-3{
    grid-column-start: 7;
    grid-column-end: span 6;
    display: flex;
  
  }
  .row-cart .col-4, .row-cart .col-2{
  grid-column: span 6;
  }
  .cart-header{
    display: none;
  }
  .cart-summary h4 span, .cart-summary p{
    font-size: 0.875rem;
  }
  .total p{
    margin-bottom: 0;
  }
  .cart-summary .total{
    align-items: flex-end;
  }
  .cart-summary h2{
    font-size: clamp(1.5rem, 1.5vw, 1.313rem);
  }
  .checkout-container{
    padding: var(--space-2);
  }
  #auth div:nth-of-type(1), #auth .auth-form, #register > div, #register-form{
    grid-column-start: 1;
    grid-column-end: span 12;
  }
  #auth div:nth-of-type(1) .btn-primary{
    width: 80%;
  }
  #auth .auth-form, #register-form{
    padding: var(--space-2);
  }
  #register-form .col-6{
    grid-column: span 12;
  }
  .auth-form .btn-primary{
    width: 50%;
  }
  #register > div{
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0;
  }
  #register{
    margin-top:var(--space-4);
  }
  #myaccount > div:first-of-type{
    padding: 0;
  }
  #myaccount > div:first-of-type, #account-details, #orders{
    grid-column-start: 1;
     grid-column: span 12;
  }
   .filtre-comenzi{
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: space-between;
  }
  #order_term {
    width: 50%;
}
  #page-size{
    width: 45%;
  }

}

@media (max-width: 480px) {
  :root{
     --base-padding-x: max(2vw, 16px);
  }
    #descriere article{
  grid-column-start: 1;
      grid-column-end: span 12;

}
  .menu{
    margin-left:0;
  }
  .menu > .menu-item > .menu-link{
    font-size: 14px;
    padding: var(--space-1);
  }
  .menu-item{
    width: 10rem;
    
  }
  .submenu{
        left: 10rem;
        width: calc(100vw - 10rem);
        max-width: calc(100vw - 10rem);
        column-count: 1;
            column-gap: 1rem;
    height: 21.2rem;
  }
  .submenu-item > .menu-link{
    font-size: 14px;
  }
  .subsubmenu-item .menu-link{
    font-size: 12px;
  }
  .breadcrumb-wrapper{
    flex-wrap: wrap;
  }
  #video .title p{
    margin-top:0;
  }
  footer .logo{
    display: none;
  }
  p, .politica a, .testimonial-text, .row-cart a, .form-input, .form-select, label, .categorii-item > div > a, .breadcrumb-wrapper a, #video .title p, .contact-info div:nth-last-of-type(1) > div span, .contact-form label, .accordion-body{
    font-size: 0.875rem;
  }
  .cart-text{
    display: none;
  }
  .solicita-form .col-6{
    grid-column: span 12;
  }
  .search-input{
     font-size: 0.875rem;
  }
  .top-bar a , .bottom-bar-right a, .middle-bar-right a, .btn-primary, .btn-secondary, .btn-outline{
   font-size: 0.75rem;
  }
  .top-bar-left, .top-bar-right{
    gap: var(--space-2);
  }
  .middle-bar-right{
    gap: var(--space-1);
  }
  .bottom-bar-left{
    gap:0;
  }
  .bottom-bar-left a:nth-of-type(1){
    display: none;
  }
  
  .top-bar-left > div{
    display: none;
  }
  .middle-bar-left img, footer .logo{
    width: 10rem;
  }
  .middle-bar{
    flex-wrap: wrap;
    row-gap: 1rem;
  }
  .middle-bar-center{
    order: 1;
    width: 100%;
  }
  .search-input{
    width: 90%;
  }
  .bottom-bar-right a{
    width: 20vw;
  }
  .user-avatar{
    width: 5rem;
    height: 5rem;
  }
  #hero{
    margin-top:var(--space-3);
  }
  
  .car-area{
    height: 28rem;
  }
 .car-area div{
  width: 100%;
 }
 .trust-item{
  margin-left:var(--space-2);
 }
  .filter-area, .car-area{
    grid-column: span 12;
    padding: var(--space-2);
  }
  .filter-area h2:nth-of-type(2){
    margin-top:var(--space-4);
  }
  .trust-area{
    flex-wrap: wrap;
    padding: var(--space-2);
  }
   .trust-item img{
    width: 3rem;
  }
  .categorii-item, .checkout-container .col-6, #ship_different_address .col-6{
    grid-column: span 12;
  }

  .title h2{
    font-size: clamp(2rem, 3.7vw, 4.188rem);
    text-align: left;
  }
  .title p{
    width: 100%;
  }
  #masini, #piese, #testimoniale, #categorii, #intrebari, .contact{
    margin-top:var(--space-8)
  }
  .categorii-item > img{
    width: 12rem
  }
  .categorii-item{
    justify-content: flex-start;
    gap:var(--space-2);
    flex-direction: column;
  }
  .card{
    grid-column: span 12;
  }
  .card-wrapper, .testimonial-slider, #banners, .categorii-wrapper, .map-responsive{
    margin-top:var(--space-2)
  }
.banner-reduceri{
  padding: var(--space-2);
}
  .testimonial-content{
    flex-direction: column;
    padding: var(--space-5);
  }
  .banner-reduceri, .banner-piese{
    grid-column: span 12;
    height: 12rem;
    flex-direction: column;
    row-gap: var(--space-2);
  }
   footer > .col-3:nth-of-type(1){
    grid-column: span 12;
    margin-top:var(--space-4);
  }
  footer img{
    width: 80%;
  }
  footer > .col-3 {
    grid-column: span 12;
  }
  footer > .col-2{
    grid-column: span 12;
  }
  footer > .col-2, footer > .col-3{
    margin-top:var(--space-1);
    margin-bottom: var(--space-1);
  }
  footer hr{
    width: 100%;
  }
  #title h1{
    font-size: clamp(2rem, 3.7vw, 4.188rem);
    margin-top:var(--space-4);
    margin-bottom: 0;
  }
  #shop-container{
    margin-top:var(--space-4);
  }
  .side-bar{
    grid-column: span 12;
  }
  .filtre{
    padding: var(--space-2);
  }
  .banner-piese-vertical, .banner-reduceri-vertical{
    height: 12rem;
    min-height: 12rem;
  }
  .banner-reduceri-vertical{
    align-items: flex-start;
    padding: var(--space-2);
  }
  .banner-reduceri-vertical a{
    width: 50%;
  }
  .banner-reduceri-vertical{
    background-size: 75%;
    background-position: 0 45%;
  }
  .rezultateMasini .card-wrapper > .card, .rezultateMasini{
    grid-column: span 12;
  }
  .card-footer{
    margin-top:var(--space-4);
  }
  .masini-details, .piese-details{
    grid-column: span 12;
    padding: var(--space-2);
    flex-direction: column;
  }
  .masini-details > .carousel, .piese-details > .carousel{
    width: 100%;
  }
  .details h2{
    margin-bottom: var(--space-2);
  }
  .solicita-form, .cumpara-form{
    grid-column: span 12;
    padding: var(--space-2);
  }
  .accordion{
    grid-column: span 12;
  }
  #intrebari .banner-reduceri-vertical, #intrebari .banner-piese-vertical{
    grid-column: span 12;
  }
  .accordion-header::after{
  width: var(--space-4);
  height: var(--space-4);
}
.accordion-header::after{
  background-size: var(--space-4);
}
.accordion-header{
  padding-right: var(--space-8);
}
#video video{
  object-fit: none;
}
#video .title h1{
  font-size: clamp(2rem, 3.7vw, 4.188rem);
}
#video{
  height: 37vh;
}
.contact-form .col-6{
  grid-column: span 12;
}
.about .image, .about > .text{
  width: 100%;
}
.about img{
  width: 100%;
}

.about .flag-img{
  margin-left:-1rem;
}
.about{
  flex-direction: column;
}
.about:nth-of-type(3), .about:nth-of-type(5){
  flex-direction: column-reverse;
}
.about:nth-of-type(4) > .image > img{
  width: 65%;
    margin-left: 4rem;
}
.about .box-img{
  margin-left:-2rem;
}
.about > .text h2, #cart h1, #register h1{
  font-size: clamp(2rem, 3.7vw, 4.188rem);
}
#video .title{
  padding: var(--space-2);
}
.contact{
  flex-direction: column-reverse;
  gap:var(--space-4);
}
.contact-info{
  width: 100%;
  gap:var(--space-2);
}
.contact-form{
  width: 100%;
}
.intrebari-contact{
  gap: 0;
  row-gap: var(--space-2);
}
.intrebari-contact .title{
  grid-column: span 12;
  align-items: flex-start;
}
 #myaccount, #cart, #auth, #checkout{
    margin-top:var(--space-4);
  }
  #cart h1 {
    grid-column-start: 1;
    margin-top:0;
    margin-bottom: 0;
  }
.cart-container{
    grid-column-start: 1;
    grid-column-end: span 12;
    padding: var(--space-2);
    
  }
  .checkout-container{
    grid-column-start: 1;
    grid-column-end:span 12;
  }
  .cart-summary{
    padding: var(--space-2);
    grid-column: span 12;
  }
  .row-cart .col-3{
    grid-column-start: 7;
    grid-column-end: span 6;
    display: flex;
  
  }
  .row-cart .col-4, .row-cart .col-2{
  grid-column: span 6;
  }
  .cart-header{
    display: none;
  }
  .cart-summary h4 span, .cart-summary p{
    font-size: 0.875rem;
  }
  .total p{
    margin-bottom: 0;
  }
  .cart-summary .total{
    align-items: flex-end;
  }
  .cart-summary h2{
    font-size: clamp(1.5rem, 1.5vw, 1.313rem);
  }
  .checkout-container{
    padding: var(--space-2);
  }
  #auth div:nth-of-type(1), #auth .auth-form, #register > div, #register-form{
    grid-column-start: 1;
    grid-column-end: span 12;
  }
  #auth div:nth-of-type(1) .btn-primary{
    width: 80%;
  }
  #auth .auth-form, #register-form{
    padding: var(--space-2);
  }
  #register-form .col-6{
    grid-column: span 12;
  }
  .auth-form .btn-primary{
    width: 50%;
  }
  #register > div{
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0;
  }
  #register{
    margin-top:var(--space-4);
  }
  #myaccount > div:first-of-type{
    padding: 0;
  }
  #myaccount > div:first-of-type, #account-details, #orders{
    grid-column-start: 1;
     grid-column: span 12;
  }
  .filtre-comenzi{
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: space-between;
  }
  #order_term {
    width: 50%;
}
  #page-size{
    width: 45%;
  }
  .order > .order-info, .order > .order-details{
    flex-wrap: wrap;
  }
  #orderContainer{
    padding: var(--space-2);
  }
  .order-details h2{
    font-size: 1.125rem;
    width: 100%;
  }

}

.hidden {
  display: none;
}