/* ── Fontul ───────────────────────────────────────────────────────────────
   Toate cele 45 de declaratii cereau doar "Onest", fara nicio rezerva, iar
   body nu avea deloc font-family. Pana se incarca Onest de la Google (link-ul
   are display=swap, deci textul se arata imediat) browserul cadea pe fontul
   lui implicit, care e cu serife - de aici licarirea de Times la refresh.
   Rezerva de mai jos e tot fara serife, asa ca schimbarea nu se mai vede. */
:root {
	--font-sans: Onest, "Segoe UI", Roboto, system-ui, -apple-system,
		"Helvetica Neue", Arial, sans-serif;
}
body {
	font-family: var(--font-sans);
}

/* Folosite des in codul vechi */
/* -----------------------  margins ---------------------------- */
body {
    line-height: 1em;
}
body p{
    line-height: 1.6em;
}
.marginTop5 {
    margin-top: 5px;
}

.marginTop10 {
    margin-top: 10px;
}

.marginTop15 {
    margin-top: 15px;
}

.marginTop20 {
    margin-top: 20px;
}

.marginTop25 {
    margin-top: 25px;
}

.marginTop30 {
    margin-top: 30px;
}

.marginTop35 {
    margin-top: 35px;
}

.marginTop40 {
    margin-top: 40px;
}

.marginTop50 {
    margin-top: 50px;
}

.marginTop60 {
    margin-top: 60px;
}

.marginTop70 {
    margin-top: 70px;
}

.marginTop80 {
    margin-top: 80px;
}

.marginTop90 {
    margin-top: 90px;
}

.marginTop100 {
    margin-top: 100px;
}
.marginBottom0 {
    margin-bottom: 0px;
}

.marginBottom10 {
    margin-bottom: 10px;
}

.marginBottom15 {
    margin-bottom: 15px;
}

.marginBottom20 {
    margin-bottom: 20px;
}

.marginBottom30 {
    margin-bottom: 30px;
}

.marginBottom40 {
    margin-bottom: 40px;
}

.marginBottom50 {
    margin-bottom: 50px;
}

.marginBottom60 {
    margin-bottom: 60px;
}

.marginBottom70 {
    margin-bottom: 70px;
}

.marginBottom80 {
    margin-bottom: 80px;
}

.marginBottom90 {
    margin-bottom: 90px;
}

.marginBottom100 {
    margin-bottom: 100px;
}

/* --------------------------------- paddings------------------------------------ */

.paddingTop0 {
    padding-top: 0px !important;
}

.paddingTop5 {
    padding-top: 5px;
}

.paddingTop10 {
    padding-top: 10px;
}

.paddingTop20 {
    padding-top: 20px;
}

.paddingTop30 {
    padding-top: 30px;
}

.paddingTop40 {
    padding-top: 40px;
}

.paddingTop50 {
    padding-top: 50px;
}

.paddingTop60 {
    padding-top: 60px;
}

.paddingTop70 {
    padding-top: 70px;
}

.paddingTop80 {
    padding-top: 80px;
}

.paddingTop90 {
    padding-top: 90px;
}

.paddingTop100 {
    padding-top: 100px;
}

.paddingBottom0 {
    padding-bottom: 0px !important;
}

.paddingBottom10 {
    padding-bottom: 10px;
}

.paddingBottom20 {
    padding-bottom: 20px !important;
}

.paddingBottom30 {
    padding-bottom: 30px;
}

.paddingBottom40 {
    padding-bottom: 40px;
}

.paddingBottom50 {
    padding-bottom: 50px;
}

.paddingBottom60 {
    padding-bottom: 60px;
}

.paddingBottom70 {
    padding-bottom: 70px;
}

.paddingBottom80 {
    padding-bottom: 80px;
}

.paddingBottom90 {
    padding-bottom: 90px;
}

.paddingBottom100 {
    padding-bottom: 100px;
}

.paddingLeft0 {
    padding-left: 0px;
}

.paddingLeft5 {
    padding-left: 5px;
}

.paddingLeft10 {
    padding-left: 10px;
}

.paddingLeft15 {
    padding-left: 15px;
}

.paddingLeft20 {
    padding-left: 20px;
}

.paddingLeft25 {
    padding-left: 25px;
}

.paddingLeft30 {
    padding-left: 30px;
}

.paddingLeft35 {
    padding-left: 35px;
}

.paddingLeft40 {
    padding-left: 40px;
}

.paddingLeft50 {
    padding-left: 50px;
}

.paddingLeft60 {
    padding-left: 60px;
}

.paddingLeft70 {
    padding-left: 70px;
}

.paddingLeft80 {
    padding-left: 80px;
}

.paddingLeft90 {
    padding-left: 90px;
}

.paddingLeft100 {
    padding-left: 100px;
}

.paddingRight0 {
    padding-right: 0px;
}

.paddingRight5 {
    padding-right: 5px;
}

.paddingRight10 {
    padding-right: 10px;
}

.paddingRight15 {
    padding-right: 15px;
}

.paddingRight20 {
    padding-right: 20px;
}

.paddingRight30 {
    padding-right: 30px;
}

.paddingRight40 {
    padding-right: 40px;
}

.paddingRight50 {
    padding-right: 50px;
}

.paddingRight60 {
    padding-right: 60px;
}

.paddingRight70 {
    padding-right: 70px;
}

.paddingRight80 {
    padding-right: 80px;
}

.paddingRight90 {
    padding-right: 90px;
}

.paddingRight100 {
    padding-right: 100px;
}

.padding0 {
    padding: 0;
}

.padding5 {
    padding: 5px;
}

.padding10 {
    padding: 10px;
}

.padding20 {
    padding: 20px !important;
}

.padding30 {
    padding: 30px;
}

.padding40 {
    padding: 40px;
}

.padding80 {
    padding: 80px;
}

.box100 {
    width: 100% !important;
    display: flex !important;
    margin-bottom: 10px;
    margin-right: 0;
    margin-left: 0;
}
/* -------------------------------------- */

.container {
    max-width: 1320px;
    /* height: 100%; */
    font-family: var(--font-sans);
}
.header-bottom-border {
    margin: 0;
    background: rgba(32, 189, 255, 0.25);
}
.site-content .first-header {
    width: 100%;
    height: 50px;
    background: #234463;
    align-items: center;
    z-index: 999;
}

.site-content .first-header a span {
    color: #fff;
    font-family: var(--font-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
}

.site-content .first-header a svg {
    margin-right: 10px;
}

.site-content .first-header .header-top .contact-info a:nth-child(1) {
    margin-right: 30px;
}

.site-content .second-header {
    background: #0077be;
    height: 90px;
    border-bottom: 1px solid rgba(32, 189, 255, 0.25);
    position: relative;
    z-index: 999;
}

.site-content .container.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
}
.site-content .container.header-top .social-media a:nth-child(2) {
    margin-left: 5px;
    margin-right: 5px;
}

.site-content .header-inner {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.header-logo a img {
    width: 277px;
    height: 50px;
    aspect-ratio: 277/50;
}

.header-actions .favourites {
    padding-left: 0px;
}
.main-navigation {
    display: flex;
    align-items: center;
    gap: 20px;
}
.main-navigation .menu .menu-item a {
    color: #fff;
    font-family: var(--font-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.main-navigation .menu {
    display: flex;
    align-items: center;
    gap: 10px;
}
.main-navigation .menu .menu-item {
    display: flex;
    padding: 15px;
    align-items: center;
    position: relative;
}

.second-header ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.header-actions {
    display: flex;
    gap: 10px;
}

.header-actions .action {
    display: flex;
    padding: 15px;
    align-items: center;
}

.header-actions .cart-action {
    display: flex;
    padding: 15px 30px;
    align-items: center;
    gap: 10px;
    border-radius: 25px;
    background: #fff;
    position: relative;
}

.header-actions .cart-action .cart-name {
    color: #0077be;
    font-family: var(--font-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 16px */
}
.header-search form {
    display: flex;
    padding: 5px;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-radius: 50%;
    margin-bottom: 0px;
}

.header-search form input {
    font-family: var(--font-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 16px */
    border: none;
    background: transparent;
    width: 100%;
    padding-left: 20px;
}
.header-search {
    border-radius: 25px;
    border: 1px solid #fff;
    position: relative;
}
/* click pe inputul de search */
.header-search form input:focus {
    outline: none;
    box-shadow: none;
}

.header-search form button {
    border: none;
    background: transparent;
    padding: 10px;
}

.cart-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 25px;
}

/* first desktop */
.content {
    width: 100%;
    /* height: 100vh; */
    /* height: calc(100vh - 135px); */
    min-height: 898px;
    /* 100vh - header height */
}
body {
    /* display: flex;
    flex-direction: column;
    min-height: 100vh; */
}
.content {
    /* flex: 1; */
}

.header-search input::-webkit-input-placeholder {
    color: #fff;
}

.header-search input::-moz-placeholder {
    color: #fff;
    opacity: 1;
}

.header-search input:-ms-input-placeholder {
    color: #fff;
}

.header-search input::placeholder {
    color: #fff;
    opacity: 1;
}

.hero {
    /* background: url(/images/background-shapes.png) no-repeat; */
    background: linear-gradient(180deg, #0077be 0%, #20bdff 100%);
    margin-top: 50px;
    margin: 0 auto;
    background-position: top center;
    position: relative;
}
.hero .container {
    position: relative;
    z-index: 2;
}
.hero-bg {
    background: url(/images/background-shapes.png) no-repeat;
    background-position: center top;
    background-size: cover;
    opacity: 0.6;
    position: absolute;
    height: 95%;
    bottom: 0;
    width: 100%;
    z-index: 1;
}

.hero .hero-title {
    padding-top: 141px;
    align-self: stretch;
    color: #fff;
    font-family: var(--font-sans);
    font-size: clamp(2.25rem, 0.878rem + 4.39vi, 4.5rem);
    font-style: normal;
    font-weight: 600;
    line-height: 115%; /* 82.8px */
    width: 60%;
}

.hero .hero-content {
    color: #fff;
    font-family: var(--font-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
    width: 40%;
    padding-top: 30px;
    padding-bottom: 30px;
}

.hero .btn-products,
.hero .btn-about {
    display: flex;
    padding: 5px;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
}
.hero .btn-products {
    margin-right: 20px;
    background: #fff;
}
.hero .btn-products span:nth-child(1),
.hero .btn-about sp {
    margin-left: 20px;
}

.hero .btn-about {
    background: transparent;
    border-radius: 100px;
    border: 1px solid #fff;
}

.hero .btn-about span:nth-child(1) {
    margin-left: 20px;
    color: #fff;
}

.hero .btn-products span {
    background: transparent;
    border: none;
    color: #0077be;
    font-family: var(--font-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
}
.hero .btn-about span {
    background: transparent;
    border: none;
}
.hero .btn-products span svg:nth-child(1),
.hero .btn-about span svg:nth-child(1) {
    width: 40px;
    height: 40px;
    margin-left: 10px;
}
.hero .btn-products span svg:nth-child(2),
.hero .btn-about span svg:nth-child(2) {
    width: 13px;
    height: 12px;
    position: absolute;
    margin-left: -25px;
    margin-top: 14px;
}
.hero .btn-products .btn-products:focus {
    outline: none !important;
    box-shadow: none !important;
}
.hero-buttons {
    display: flex;
    justify-content: left;
    align-items: center;
}

.btn:focus,
.btn:active {
    outline: none;
    box-shadow: none;
}

.banner-logos {
    display: flex;
    align-items: start;
    gap: 20px;
    height: 170px;
    border-radius: 48px 48px 0 0;
    background: #0077be;
    margin-top: 80px;
}

.banner-logos {
    position: relative; /* context pentru absolute */
}
.logo-item img {
    width: 80%;
}
.img-item {
    width: 55%;
    position: absolute;
    bottom: 0;
    right: 0px;
}

.img-item img {
    height: auto;
    width: 100%;
    aspect-ratio: 100/109;
}

.second-desktop {
    background: #fff;
    margin-top: 100px;
}

.services .service-item {
    position: relative;
    flex: 1 1 250px;
    border-radius: 24px;
    border: 1px solid #f3f3f3;
    background: #fff;
}
.swiper {
   overflow: hidden;
   max-width: 100%;
}
.services .service-item-title {
    color: #234463;
    font-family: var(--font-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 22px */
    margin-bottom: 15px;
}

.services .service-item-body {
    color: #7b7b7b;
    font-family: var(--font-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
}
.services .service-item-icon {
    border-radius: 12px;
    background: #20bdff;
    width: 50px;
    height: 50px;
    position: absolute;
    top: -25px;
    left: 25px;
}

.service-item {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px 30px;
    max-width: 380px;
    border: 1px solid #f3f3f3;
    background: #fff;
    transition: all 0.3s ease;
}

.service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
}
.service-item-icon {
    background: linear-gradient(180deg, #0077be 0%, #20bdff 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px auto;
}
.services .container {
    gap: 10px;
    flex-wrap: wrap;
    display: flex;
}

.section-title {
    color: #234463;
    font-family: var(--font-sans);
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 42px */
    text-transform: uppercase;

    display: flex;
    align-items: center;
    justify-content: space-between;
}
.product-categories {
    margin-top: 80px;
    margin-bottom: 80px;
}
.product-categories .category-items {
    gap: 20px;
}
.product-categories .category-item {
    flex: 1; /* se împart egal */
    min-width: 330px; /* ca să poată face wrap */
    margin-top: 30px;
    border-radius: 24px;
    background: #f3f3f3;
    position: relative;
    overflow: hidden;
    height: 300px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}

.product-categories .category-item .category-item-statistics {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 30px 0px;
    flex-direction: row;
    width: 100%;
}

.product-categories .category-item-title {
    color: #234463;
    font-family: var(--font-sans);
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 36px */
    padding-left: 10px;
    padding-right: 10px;
}

.product-categories .category-item-subtitle {
    color: #7b7b7b;
    font-family: var(--font-sans);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 12px */
    margin-top: 5px;
}

.product-categories .category-item-statistics .statistic-item {
    color: #1e1e1e;
    font-family: var(--font-sans);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 12px */
}

.category-item img {
    z-index: 1;
    height: 100%;
    max-width: calc(100% - 40px);
    object-fit: contain;
    object-position: bottom;
}
.category-item-title,
.category-item-subtitle,
.category-item-statistics {
    position: relative;
    z-index: 2;
}

.product-price-buy-div .product-price {
    display: grid;
}
.product-price-buy-div .old-price {
    text-decoration: line-through;
    color: #234463;
    font-family: var(--font-sans);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: line-through;
}
.product-price-buy-div .buy-now-btn {
    display: flex;
    /* width: 72px; */
    width: 55px;
    height: 45px;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    background: #0077be;
    position: relative;
}
.buy-now-btn:hover {
    background-color: #0065a0;
}
.product-price-buy-div .details-btn {
    display: flex;
    width: 72px;
    height: 45px;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    background: #0077be;
    position: relative;
}
.details-btn:hover{
    background-color: #0065a0;
}
.image-fav-div .icons-div {
    justify-content: space-between;
}

.image-fav-div .icons-div .sale-icon {
    display: flex;
    padding: 5px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    background: #ff5858;
    position: relative;
    z-index: 2;
}
.product-image {
    display: grid;
    place-items: center;
    margin-bottom: 20px;
}
.image-fav-div .product-image img {
    z-index: 1;
}

.product-item .product-name {
    color: #234463;
    font-family: var(--font-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.product-item .product-reviews {
    color: #7b7b7b;
    font-family: var(--font-sans);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 12px */
}
.product-item .stock-brand-div {
    color: #7b7b7b;
    font-family: var(--font-sans);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.product-item .product-price-buy-div {
    padding-top: 20px;
}

.product-item .current-price {
    color: #234463;
    font-family: var(--font-sans);
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 24px */
}
.product-item .stock-brand-div,
.product-item .product-price-buy-div {
    margin-top: 10px;
}

/* pozitionam deasupra btn de favorite si discount */
.image-fav-div {
    position: relative;
}
.icons-div {
    position: absolute;
    z-index: 2;
    width: 100%;
    justify-content: space-between;
}
.product-item {
    /* margin-top: 30px; */
    padding: 15px;
    align-items: flex-start;
    gap: 5px;
    border-radius: 16px;
    border: 1px solid #d9d9d9;
    background: #fff;
}

.product-image img {
    height: 179px;
    flex-shrink: 0;
    align-self: stretch;
    aspect-ratio: 1/1;
    border-radius: 12px;
}
.product-items {
    gap: 10px;
}

.sale-icon span {
    color: #fff;
    font-family: var(--font-sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 18px */
}

.reasons {
    border-radius: 36px;
    background: linear-gradient(180deg, #0077be 0%, #20bdff 100%);
    max-width: 1520px;
    margin: 0 auto;
    margin-top: 100px;
}
.reasons-texts {
    width: 60%;
    padding-top: 66px;
    padding-bottom: 66px;
}

.reasons .reasons-line {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 coloane egale */
    gap: 30px 40px; /* row gap / column gap */
}

.reasons-item {
    display: grid;
    grid-template-columns: 24px 1fr; /* checkbox + text */
    column-gap: 12px;
    row-gap: 6px;
    align-items: start;
}

.reasons-item > div:first-child {
    grid-row: 1 / span 2; /* checkbox ocupă 2 rânduri */
}

.reasons .reason-title {
    color: #fff;
    font-family: var(--font-sans);
    font-size: 19px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-top: 4px;
}

.reasons .reason-subtitle {
    color: #fff;
    font-family: var(--font-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
}

.reasons-header-title {
    color: #fff;
    font-family: var(--font-sans);
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.reasons {
    position: relative;
    overflow: visible;
}
.reasons .container {
    position: relative;
    z-index: 2;
}
.reasons-img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 650px;
    height: 650px;
    z-index: 1;
}
.reason-bg {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: 1;
    width: 669px;
    height: 576px;
    aspect-ratio: 223/192;
}
.reason-man {
    position: absolute;
    right: 0px;
    z-index: 2;
    bottom: 0;
    /* width: 674px; */
    height: 625px;
    aspect-ratio: 55/51;
}

.events-cards-div {
    display: flex;
    gap: 15px;
}

.events-cards-div {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 coloane egale */
    gap: 30px;
}
.event {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 70px;
}

.event-card {
    flex: 1;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
}

.event-image img {
    width: 100%;
    height: 250px; /* fixează înălțimea */
    object-fit: cover;
    display: block;
}
.last-events-header-title {
    color: #234463;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 42px */
    text-transform: uppercase;
    margin-top: 90px;
    margin-bottom: 50px;
}
.last-events{
    margin-top: 50px;
}
.event-share {
    position: absolute;
    top: 0;
    right: 0;
}
.event-share svg:nth-child(1) {
    position: absolute;
    right: 15px;
    top: 15px;
}

.event-share svg:nth-child(2) {
    position: absolute;
    right: 30px;
    top: 30px;
}
/* 
.event-title {
    width: 85%;
    border-radius: 0 0 24px 24px;
    background: #f3f3f3;
    padding: 20px;
    margin: 0 auto;
    color: #234463;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    line-height: 22px;
    height: 80px;
} */
.event-title {
    width: 85%;
    border-radius: 0 0 24px 24px;
    background: #f3f3f3;
    padding: 20px;
    margin: 0 auto;
    color: #234463;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;

    margin-top: auto;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 84px;
}

.site-content {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

html,
body {
    height: 100%;
}

footer hr:first-child {
    margin-bottom: 40px;
}
footer .footer-hr {
    margin-bottom: 0;
    margin-top: 40px;
}
footer .copyright {
    height: 50px;
}

footer .social-icons .social-icon {
    margin-right: 10px;
}
footer .webis-company:hover {
    text-decoration: none;
}
footer .webis-company img {
    width: 40px;
}
footer .social-text {
    color: #1e1e1e;
    font-family: var(--font-sans);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

footer .logo-media {
    position: relative;
}

footer .webis-company {
    color: #000;
}

footer .logo-media .media-group {
    position: absolute;
    bottom: 0;
}

footer .link-title {
    color: #7b7b7b;
    font-family: var(--font-sans);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    /* margin-bottom: 15px; */
}
footer .links-titles .row .buy-column,
footer .links-titles .row .informations-column,
footer .links-titles .row .contact-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

footer .contact-column .contact {
    display: flex;
    justify-content: left;
    align-items: center;
}

footer .contact-column .link-contact-title div {
    color: #7b7b7b;
    font-family: var(--font-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}

footer .contact-column svg {
    margin-right: 5px;
}

footer .contact-column .address-details svg {
    width: 20px;
    height: 20px;
}
.copyright {
    display: flex;
    justify-content: space-between; /* stânga / dreapta */
    align-items: center; /* centrare verticală */
    gap: 20px;
}
.sal-sol-imgs img {
    width: 154px;
}

.sal-sol-imgs {
    margin-top: 15px;
    display: grid;
    gap: 7px;

    /* display: flex;
    gap: 15px;
    align-items: center;
    padding-bottom: 15px; */
}

.popular-products-techniciens {
    margin-top: 50px;
}
.imgStea {
    width: 11px;
    height: 10px;
}
.product-stars {
    min-height: 24px; /* cât au stelele -> pentru cazul cand unele produse au stelute si celelealte nu*/
}
.pret-variabil {
    color: #234463;
    font-family: var(--font-sans);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.service-item-icon i {
    color: #fff;
}
.account,
.favourites {
    padding: 15px;
}
.favourites {
    position: relative;
}
.favourites_number,
.cart_number {
    background: #ea1313;
    color: white;
    height: 18px;
    width: 18px;
    position: absolute;
    text-align: center;
    line-height: 18px;
    border-radius: 9px;
    font-size: 80%;
    font-weight: 700;
    top: 6px;
    /* right: 0; */
}
.favourites_number {
    right: 1px;
}
.cart_number {
    right: 14px;
}

.form-control:focus {
    background-color: transparent;
}
.swiper-wrapper {
    padding: 10px 0px;
}
.swiper-slide {
    width: auto;
}
.slider-nav {
    display: flex;
    gap: 10px;
}

.categorySlider {
    padding-bottom: 50px;
}

.categorySlider .swiper-scrollbar {
    position: relative;
    height: 3px;
    width: 100%;
    background: #e3e3e3;
    margin-top: 40px;
}

.categorySlider .swiper-scrollbar-drag {
    height: 8px;
    /* width: 127px !important;  */
    background: #bfbfbf;
    border-radius: 10px;
    top: -3px !important;
}

.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
    /* width: 27% !important;
    left: 35% !important; */
    transform: translateX(0%);
    position: relative !important;
    height: var(--swiper-scrollbar-size, 2px) !important;
}
.scrollbar-wrapper {
   width: 27%;
   margin: 40px auto 0;
}

.categorySlider .swiper-scrollbar {
   width: 100%;
   height: 3px;
   background: #e3e3e3;
   position: relative;
}

.hover-cos #sumar-cos {
    position: absolute;
    max-width: 380px;
    width: 100vw;
    display: none;
    z-index: 1;
    right: -15px;
    padding: 10px;
    top: 74px;
    z-index: 100;
    background: white;
}
.produse_sumar_cos {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}
.nr_prod_cos_sumar {
    border-bottom: 1px solid #f2f2f2;
    border-top: 1px solid #f2f2f2;
    padding: 15px;
    margin-left: 0;
    margin-right: 0;
    font-family: var(--font-sans);
}
.shadow-custom {
    box-shadow: 0px 2px 10px -2px rgba(0, 0, 0, 0.15);
}
.btn-mov {
    background: #0077be;
    color: white;
    border: 1px solid #0077be !important;
}
#sumar-cos .btn-mov {
    color: white !important;
}
#sumar-cos .nume_prod_cos {
    font-size: 12px;
    color: #222;
    display: block;
    line-height: 14px;
    font-family: var(--font-sans);
}
.rand_prod_cos .pret_final {
    margin-bottom: 0px !important;
    color: #234463;
    font-size: 15px;
    font-family: var(--font-sans);
    font-weight: 600;
}
.rand_prod_cos .pret_intreg {
    margin-bottom: 0px !important;
    color: grey;
    font-size: 12px;
    font-family: var(--font-sans);
    font-weight: 600;
    text-decoration: line-through;
}

/* pagina de produs - afisare (din pagina veche) */
#breadcrumps_produs_scroll {
    color: #949998;
}
.breadcrumps_produs a {
    color: #949998;
}
.breadcrumps_produs {
    font-size: 16px;
    font-weight: 600;
    padding: 30px 15px;
}

.vizualizare-produs .left-part {
    position: relative;
}
.content_produs .reducere {
    position: absolute;
    left: 30px;
    top: 30px;
    color: #fff;
    background-color: #ea1313;
    font-family: var(--font-sans);
    font-size: 25px;
    font-weight: 600;
    padding: 3px 8px;
    letter-spacing: 0.5px;
    border-radius: 10px 0 0 0;
    line-height: 35px;
    margin: -10px;
    z-index: 10;
}
.tab-content > .tab-pane.active {
    display: block !important;
    opacity: 1 !important;
}
.content-limit-wrapper {
    position: relative;
}

.content-limit {
    max-height: 250px;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.content-limit.expanded {
    max-height: none;
}

.fade-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.content-limit.expanded + .fade-overlay {
    opacity: 0;
    visibility: hidden;
}

.toggle-content {
    display: block;
    margin: 12px auto 0;
    text-align: center;
    color: var(--Turcoaz, #0077be);
    font-weight: 500;
    cursor: pointer;
}

.toggle-content:hover {
    text-decoration: underline;
}

.box_reviews_mobile,
.box_intrebare_mobile {
    padding: 15px;
}

.btn-variatie {
    border: 1px solid #ccc;
    padding: 6px 14px;
    margin-right: 6px;
    background: #fff;
    cursor: pointer;
}

.btn-variatie.active {
    border-color: #f60;
    background: #fef3e8;
}
.box-variatie-activa .box_cantitate {
    display: inline-flex;
}

.box-variatie-activa {
    display: flex !important;
}
.pret_btn_variabil {
    width: 55;
}
.relative {
    position: relative;
}
.content_produs .left-part,
.planuri_sectiune .left-part,
.comparatie_sectiune .left-part {
    width: 55%;
}
.content_produs .left-part {
    height: fit-content;
}
.shadow-custom {
    box-shadow: 0px 2px 10px -2px rgba(0, 0, 0, 0.15);
}
.bgWhiteProdus {
    background: white;
    padding: 20px;
    border-radius: 20px;
}
.taburi_produs {
    padding: 5px 0;
}
.taburi_produs .nav-tabs {
    border: none;
}
.content_taburi .tab-pane {
    padding: 0;
}

.content_produs .right-part,
.planuri_sectiune .right-part,
.comparatie_sectiune .right-part {
    width: 45%;
    margin-left: 20px;
}
.bgWhiteProdus {
    background: white;
    padding: 20px;
    border-radius: 20px;
}
.image-wrapper-xzoom5 {
    position: relative;
}
.image-wrapper-xzoom5 {
    border-radius: 12px;
    aspect-ratio: 11 / 8;
    overflow: hidden;
    margin-bottom: 15px;
}
.xzoom-thumbs {
    position: relative;
    display: flex;
    min-width: 82%;
}
.xzoom-thumbs .leftLst {
    /* left: -36px; */
    left: 0;
}
.xzoom-thumbs .leftLst,
.xzoom-thumbs .rightLst {
    position: absolute;
    border-radius: 12px;
    /* top: calc(50% - 15px); */
    top: -320%;
    z-index: 2;
    text-align: center;
    color: #949998;
    display: inline-block;
    padding: 14px 28px;
    font-size: 18px;
    background: #f5f5f5bd;
}
.galerieImagini {
    scrollbar-width: none;
}
.galerieImagini {
    display: block;
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;
    padding: 0;
    width: 100%;
    position: relative;
}
.MultiCarousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 45px;
}
.MultiCarousel-inner {
    overflow: hidden;
    position: relative;
}
.galerieImagini .MultiCarousel-inner {
    transition: 1s ease all;
    float: left;
}
.MultiCarousel .MultiCarousel-inner {
    display: flex;
    transition: transform 0.6s ease;
    will-change: transform;
    padding-top: 15px;
}
.galerieImagini .MultiCarousel-inner .item:first-child {
    margin-left: 0;
}

.galerieImagini .MultiCarousel-inner .item {
    /* float: left; */
    margin-left: 5px;
}
.galerieImagini .item {
    width: 70px;
    height: 70px;
    display: inline-block;
    vertical-align: middle;
}
.galerieImagini .MultiCarousel-inner .item img:first-child {
    margin-left: 0;
}
.galerieImagini .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.xzoom-thumbs .xzoom-gallery5 {
    margin-bottom: 0;
}
.xzoom-thumbs img {
    margin-right: 5px;
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
}
.xzoom-thumbs img {
    /* width: 87px; */
    width: 125px;
}
.xzoom-thumbs .rightLst {
    /* right: -36px; */
    right: 0;
}
.xzoom-thumbs .leftLst,
.xzoom-thumbs .rightLst {
    position: absolute;
    border-radius: 12px;
    /* top: calc(50% - 15px); */
    top: -320%;
    z-index: 2;
    text-align: center;
    color: #949998;
    display: inline-block;
    padding: 14px 28px;
    font-size: 18px;
    background: #f5f5f5bd;
}
.image-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    justify-content: center;
    align-items: center;
}
.image-modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
}
.image-modal-content {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
}
.content_produs .left-part,
.planuri_sectiune .left-part,
.comparatie_sectiune .left-part {
    width: 55%;
}

.content_produs .left-part {
    height: fit-content;
}
.bgWhiteProdus {
    background: white;
    padding: 20px;
    border-radius: 20px;
}
.bgWhiteProdus {
    background: white;
    padding: 20px;
}
.content_produs .right-part,
.planuri_sectiune .right-part,
.comparatie_sectiune .right-part {
    width: 45%;
    margin-left: 20px;
}
.image-wrapper-xzoom5 svg {
    width: 4%;
    position: absolute;
    right: 1%;
    top: 1%;
    fill: #dbdbdb;
    cursor: pointer;
    z-index: 3;
}
.right-part .detalii-produs .subtitlu_produs {
    color: var(--Dark-Grey, #636667);
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
}
.right-part .detalii-produs .nota_review,
.right-part .detalii-produs .nota_review .producator_name,
.right-part .detalii-produs .nr_reviews {
    color: var(--Turcoaz-hover, #234463);
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
}
.marginLeft5 {
    margin-left: 5px;
}
.right-part .detalii-produs .pret_produs {
    height: auto;
}
.right-part .detalii-produs .subtitlu_produs {
    color: var(--Dark-Grey, #636667);
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
}

.btn-alb {
    background: white;
    color: #234463;
    letter-spacing: 1.1px;
    border-radius: 0;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 400;
    transition: all 0.3s ease;
}
.detalii-produs .desc_prod {
    font-size: 16px;
}
.detalii-produs .colBtnCos .btn_cos_produs:hover {
    /* background-color: #fff;
    color: #0077be !important;
    border: 1px solid var(--Turcoaz, #0077be) !important; */
}
.detalii-produs .colBtnCos .btn_cos_produs {
    background-color: #0077be;
    color: white !important;
    font-size: 18px;
    font-weight: 400;
    border: none;
    border-radius: 8px;
    border: 1px solid var(--Turcoaz, #0077be) !important;
    padding: 20px 80px;
}
.btnSalveaza:hover,
.btnShare:hover {
    color: var(--Turcoaz, #0077be);
}
.btnSalveaza i:hover,
.btnShare i:hover {
    color: var(--Turcoaz, #0077be) !important;
}
.btnSalveaza i,
.btnShare i {
    color: white;
    -webkit-text-stroke: 1px #0077be;
    font-size: 20px;
}
.sectiune-taburi {
    border-radius: 20px;
    background: #fff;
    padding: 26px 28px;
}
.taburi_produs {
    padding: 5px 0;
}

.taburi_produs .nav-tabs {
    border: none;
}
.taburi_produs .nav-item .nav-link.active {
    background: var(--Turcoaz, #0077be);
    color: white;
    border: 1px solid var(--Turcoaz, #0077be);
}
.taburi_produs .nav-item .nav-link.active {
    background: var(--Turcoaz, #0077be);
    color: white;
    border: 1px solid var(--Turcoaz, #0077be);
}
.taburi_produs .nav-item a {
    border-radius: 8px;
    border: 1px solid var(--Turcoaz, #0077be);
    font-family: inherit;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    color: #0077be;
    background: #fff;
    margin-right: 20px;
    transition: all 0.3s ease-out;
}
/* .nav-tabs .nav-link {
    color: var(--Turcoaz, #0077be);
    background: #ededed;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 500;
    border-radius: 8px;
    background: #ededed;
    padding: 2px 50px;
} */
.paddingTop20 {
    padding-top: 20px;
}
.content_taburi {
    color: var(--Black, #000);
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
}
.content_taburi .tab-pane {
    padding: 0;
}
.content_taburi .titlu_pg_prod {
    font-size: 25px;
    color: #333 !important;
    font-family: inherit;
    font-weight: 600 !important;
    letter-spacing: -0.5px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.content-limit-wrapper {
    position: relative;
}
.content-limit {
    max-height: 250px;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.rowReviews {
    display: flex;
    align-items: flex-start;
}
.paddingRight50 {
    padding-right: 50px;
}
.formReview {
    position: sticky;
    top: 100px;
}
.formReview {
    background: white;
}
.boxConectare .card {
    border: 0;
    background: #fff;
    box-shadow: 0px 0px 25px 0px rgba(154, 156, 202, 0.09);
    padding: 60px;
    border-top: 5px solid var(--Turcoaz, #0077be);
    border-radius: 10px;
}

.formReview .card {
    box-shadow: none !important;
    padding: 0 !important;
}
.btn-mov {
    /* background: #C76B33; */
    background: #0077be;
    color: white;
    /* border: 1px solid #C76B33; */
    border: 1px solid #0077be;
    border-radius: 5px;
    padding: 7px 20px;
    font-size: 14px;
    transition: all 0.3s ease;
}
.box_reviews_mobile,
.box_intrebare_mobile {
    padding: 15px;
}
.boxConectare .card-header h5 {
    font-size: 25px;
    color: #222;
    font-weight: 700;
    letter-spacing: -0.5px;
    font-family: var(--font-sans);
}
.content_taburi .titlu_pg_prod {
    font-size: 25px;
    color: #333 !important;
    font-family: inherit;
    font-weight: 600 !important;
    letter-spacing: -0.5px;
    margin-top: 10px;
    margin-bottom: 20px;
}
.formReview h5 {
    font-weight: 500 !important;
    margin-bottom: 10px;
}
.boxConectare input:not([type="submit"]) {
    border: 0;
    padding: 25px 15px;
    background: #f2f2f2;
}
.formReview .form-control:focus ~ .floating-label,
.formReview .form-control:not(:focus):valid ~ .floating-label {
    top: -12px;
    left: 11px;
    font-size: 11px;
    opacity: 1;
    background: white;
}

.formReview .floating-label {
    position: absolute;
    pointer-events: none;
    left: 20px;
    z-index: 999;
    top: 8px;
    transition: 0.2s ease all;
}
.boxConectare input:not([type="submit"]) {
    border: 0;
    padding: 25px 15px;
    background: #f2f2f2;
}
.formReview .form-control {
    background: white !important;
    border-bottom: 1px solid #ddd !important;
    border-radius: 0;
    font-size: 14px;
}
.formReview .required {
    font-size: 15px;
}
.toggle-content {
    display: block;
    margin: 12px auto 0;
    text-align: center;
    color: var(--Turcoaz, #0077be);
    font-weight: 500;
    cursor: pointer;
}
.detalii-produs .pret_produs .pret_intreg {
    font-family: inherit;
    font-size: 27px;
}
.detalii-produs .pret_produs .pret_final {
    font-family: inherit;
    font-size: 32px;
    font-weight: 600;
    color: #234463;
    margin-top: 15px;
}

.pret_produs .pret_intreg {
    color: gray;
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 600;
    text-decoration: line-through;
    margin-bottom: 0;
}
.right-part .detalii-produs .pret_produs {
    height: auto;
}

.spec_variatie .btn-alb:not(:disabled):hover {
    border: 1px solid #234463;
    color: #234463;
    margin-right: 5px;
}

.btn-alb:hover:not([disabled]) {
    background: #234463;
    color: white !important;
}
/* .spec_variatie .btn-alb { */
/* border: 1px solid #234463;
    color: #234463;
    margin-right: 5px;
    font-size: 12px;
    padding: 3px;
} */
.variatie_selectata {
    background: #234463 !important;
    color: white !important;
}
#decrease,
.decrease {
    margin-right: -4px;
    border-radius: 0;
    /* margin-top: -1px; */
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}
.value-button:hover {
    cursor: pointer;
}
.value-button {
    border: none;
    color: #333;
    background: #f5f5f5;
    font-size: 18px;
}
.value-button {
    display: inline-block;
    /* border: 1px solid #ddd; */
    margin: 0px;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    background: #eee;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 14px;
    color: #000;
    font-weight: 600;
}
input#number,
input.number {
    border: none !important;
}
input#number,
input.number {
    text-align: center;
    /* margin: 0px; */
    background: #f5f5f5;
    padding: 14px;
    color: #000;
    font-weight: 600;
    padding-top: 15px;
    padding-bottom: 16px;
    margin-left: -1px;
    width: 60px;
}
#increase,
.increase {
    margin-left: -4px;
    border-radius: 0;
    /* margin-top: -1px; */
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}
.value-button:hover {
    cursor: pointer;
}
.value-button {
    border: none;
    color: #333;
    background: #f5f5f5;
    font-size: 18px;
}
.value-button {
    display: inline-block;
    /* border: 1px solid #ddd; */
    margin: 0px;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    background: #eee;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 14px;
    color: #000;
    font-weight: 600;
}
.detalii-produs .colBtnCos .btn_cos_produs:hover {
    background-color: #fff;
    color: #0077be !important;
    border: 1px solid var(--Turcoaz, #0077be) !important;
}
.detalii-produs .colBtnCos .btn_cos_produs {
    background-color: #0077be;
    color: white !important;
    font-size: 18px;
    font-weight: 400;
    border: none;
    border-radius: 8px;
    border: 1px solid var(--Turcoaz, #0077be) !important;
    padding: 10px 20px;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

.paddingRight50 {
    padding-right: 50px;
}
.medie_nota .nota_big {
    font-size: 40px;
    font-weight: 600;
}
.medie_nota .imgStea {
    height: 20px !important;
    width: 20px !important;
    margin-right: 3px;
    margin-bottom: 0 !important;
}
.tabel_note_review .nota {
    margin-bottom: 12px;
}
.nr_note {
    display: block;
    line-height: 12px;
}
.padding0 {
    padding: 0;
}
.nr_note {
    display: block;
    line-height: 12px;
}
.boxReview {
    margin-bottom: 30px;
    background: #f2f2f2;
    padding: 10px 20px;
    border-radius: 0 15px 15px 15px;
}
.boxReview .stele_date {
    display: inline-block;
    margin-right: 5px;
}
.boxReview .nume_review {
    display: inline-block;
    font-weight: 600;
}
.boxReview .data_review {
    font-size: 11px;
    font-style: italic;
    color: #979797;
}
.boxReview .titlu_review {
    display: block;
    font-weight: 600;
    color: #222;
    margin-top: 10px;
    margin-bottom: 10px;
}
.boxReview .desc_review {
    margin-bottom: 0;
}
.marginTop10 {
    margin-top: 10px;
}
.boxFormComentariu {
    margin-top: 15px;
    display: none;
}
.boxConectare input:not([type="submit"]) {
    border: 0;
    padding: 25px 15px;
    background: #f2f2f2;
}
.boxFormComentariu input:not([type="submit"]) {
    padding: 5px !important;
    height: calc(2.5em) !important;
    font-size: 12px;
}
.marginRight5 {
    margin-right: 5px;
}

.spanComentariu {
    cursor: pointer;
    color: #234463 !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}
.box_reviews_mobile,
.box_intrebare_mobile {
    padding: 15px;
}
.boxConectare .card-header h5 {
    font-size: 25px;
    letter-spacing: -0.5px;
    font-family: var(--font-sans);
}

.content_taburi .titlu_pg_prod {
    color: #333 !important;
    font-weight: 600 !important;
    margin-top: 10px;
    margin-bottom: 20px;
}
.boxConectare .card-header {
    background-color: transparent;
    border: none;
    padding: 0;
}
#labelFile {
    justify-content: center;
    align-items: center;
}
.formReview .inputfile:focus + label,
.formReview .inputfile + label:hover {
    border: 1px solid #234463;
    border-style: dashed;
    color: #234463;
}
.formReview .inputfile + label {
    font-size: 1.25em;
    font-weight: 700;
    color: #999;
    background-color: white;
    display: inline-block;
    width: 50px;
    border: 1px solid #999;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    border-style: dashed;
}
#labelFile {
    justify-content: center;
    align-items: center;
}
.formReview .inputfile:focus + label,
.formReview .inputfile + label:hover {
    border: 1px solid #234463;
    border-style: dashed;
    color: #234463;
}
.formReview .inputfile + label {
    font-size: 1.25em;
    font-weight: 700;
    color: #999;
    background-color: white;
    display: inline-block;
    width: 50px;
    border: 1px solid #999;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    border-style: dashed;
}
/* custom input file*/

.formReview .inputfile {
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.formReview .inputfile + label {
    font-size: 1.25em;
    font-weight: 700;
    color: #999;
    background-color: white;
    display: inline-block;
    width: 50px;
    border: 1px solid #999;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    border-style: dashed;
}

.formReview .inputfile:focus + label,
.formReview .inputfile + label:hover {
    border: 1px solid #234463;
    border-style: dashed;
    color: #234463;
}

.formReview .inputfile:focus + label {
    outline: 1px dotted #234463;
    outline: -webkit-focus-ring-color auto 5px;
}
.formReview .btn-alb {
    border: 1px solid #234463;
    border-radius: 10px;
}
#imgsPreview img {
    height: 50px;
    margin-right: 5px;
}

#imgsPreview {
    display: inline-block;
    vertical-align: top;
}
.boxFormComentariu .formReview {
    padding: 15px 10px 10px 10px !important;
    background: #f8f8f8;
    border-left: 1px solid #234463;
}

.formReview {
    position: sticky;
    top: 100px;
}
.comentariu-floating-label {
    /* top: -17px !important; */
}
.formReview .form-control:focus ~ .floating-label,
.formReview .form-control:not(:focus):valid ~ .comentariu-floating-label {
    top: -18px;
    left: 11px;
    font-size: 11px;
    opacity: 1;
    background: white;
}

.spec_variatie .alege_variatie {
    border: 1px solid #234463;
    background: #fff;
    color: #2c3e50;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 6px;
    margin-right: 6px;
    margin-top: 5px;
    transition: all 0.2s ease;
}

/* hover */
.spec_variatie .alege_variatie:hover {
    border-color: #234463;
    color: #234463 !important;
    background: #f3f9ff;
}

/* varianta selectată */
.spec_variatie .alege_variatie.active {
    background: #234463;
    border-color: #234463;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.swal_modifica_adresa .swal2-header {
    display: block;
    text-align: left;
}
.swal_modifica_adresa .swal2-popup label {
    font-size: 14px;
    margin-bottom: 0;

    font-weight: 600;
    color: #222;
}
.swal_modifica_adresa .swal2-popup .swal2-input {
    margin-top: 5px;
    height: 2em;
    font-size: 14px;
    margin-bottom: 5px;
}

.swal_modifica_adresa .swal2-title {
    font-size: 20px;
    color: #222;
}
.butoane-adauga-swal button {
    padding: 10px 15px;
}
.butoane-adauga-swal a {
    color: #fff;
}
.adauga_in_cos .fa-shopping-cart {
    padding-right: 10px;
}

.colBtnCos .cere-oferta {
    padding-left: 60px !important;
    padding-right: 60px !important;
}

/* search header -> rezultate */
.hiddenAjax {
    position: absolute;
    /* top: 42px; */
    top: 50px;
    background: white;
    z-index: 10;
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
    z-index: 999;
}

.product-name {
    position: relative;
    font-size: 20px;
    font-weight: 500;
    color: #234463;
    line-height: 1.3;

    display: -webkit-box;
    -webkit-line-clamp: 3; /* maxim 2 randuri */
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.3em * 3);
}

/* fade pe ultimul rand */
.product-name::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40%;
    height: 1.3em;
    background: linear-gradient(to right, transparent, #fff 70%);
}

.product-cart-link {
    text-decoration: none !important;
}

.spec_variatie .variatie_selectata:hover {
    color: #fff !important;
}

/* PAGINA POSTARI */

.header_categorie {
    padding: 25px 20px;
    padding-bottom: 0px;
    background-position: center right;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 35px;
}
.header_categorie .titlu_cat {
    color: #0077be;
    font-size: 30px;
    font-weight: 700;
    line-height: 30px;
    margin-bottom: 0;
}
.breadcrumps a {
    color: #888;
}

.breadcrumps {
    color: #888;
    font-weight: 600;
}
.listaSubcat {
    /* background: #f7f7f7; */
    padding: 20px 25px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.listaSubcat ul li a:hover {
    background: #e8f3f6;
    color: #0077be;
    padding-left: 14px;
}
.listaSubcat ul li a {
    font-size: 16px;
    text-decoration: none;
    color: #4b4b4b;
    padding: 6px 10px;
    border-radius: 6px;
    display: block;
    transition: 0.25s;
}
.listaSubcat a {
    color: #222;
    font-weight: 500;
}
.articole_recente {
    /* background: #f7f7f7; */
    padding: 20px 25px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
    color: #0077be;
}
.categorii-filtru {
    text-transform: uppercase;
    font-size: 20px;
    color: #636667;
}
.articole_recente ul {
    margin-top: 15px;
    padding-left: 0;
    list-style: none;
}

.articole_recente ul li {
    margin-bottom: 10px;
}
.articole_recente ul li a {
    font-size: 16px;
    text-decoration: none;
    color: #4b4b4b;
    padding: 6px 10px;
    border-radius: 6px;
    display: block;
    transition: 0.25s;
}
.contentpostare {
    background: #ffffff;
    padding: 35px 40px;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}
.contentpostare .titlu_cat {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.25;
    color: #2b3a42;
    margin-bottom: 15px;
}
.marginBottom20 {
    margin-bottom: 20px;
}
.marginBottom10 {
    margin-bottom: 10px;
}
.marginBottom0 {
    margin-bottom: 0px;
}
.imgCoverBlog img {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    width: 100% !important;
    margin-bottom: 25px;
    /* height: 380px; */
    object-fit: cover;
    border-radius: 14px;
}
.col80 {
    width: 80%;
    padding-left: 10px;
    max-width: 80%;
    flex: 0 0 80%;
}
.col20 {
    width: 20%;
    padding-right: 0;
    max-width: 20%;
    flex: 0 0 20%;
}
.descPostare table {
    max-width: 800px;
}

.titluPostare {
    min-height: 50px;
}
.nume_proiect,
.titluPostare {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    margin-top: 10px;
    text-align: left;
    margin-bottom: 0;
    display: block;
    white-space: normal;
    word-wrap: break-word;
}
.postare-bottom {
    margin-top: auto;
}
.postare-bottom {
    border-radius: 12px;
    background: #fff;
    padding: 8px;
    width: 100%;
}
.row.pgPostari {
    flex-wrap: nowrap !important;
}

/* Pagina de produse dintr o categorie */
.listareCategorii {
    margin-bottom: 20px;
}

.boxCategorie {
    background: white;
    display: flex;
    color: #222;
    font-weight: 500;
    text-align: left;
    position: relative;
    overflow: hidden;
    padding-top: 10px;
    border-radius: 5px;
    min-height: 190px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.listareCategorii .categorie-div {
    width: 150px;
    height: auto;
}
.categorie-div {
    width: 250px;
    height: 190px;
    display: flex;
    justify-content: center;
}
.boxCategorie.bold .border_img_categorie,
.boxCategorie.active-cat .border_img_categorie {
    border-color: #0077be;
    border: 1px solid #0077be !important;
}
.listareCategorii .border_img_categorie {
    height: 121px;
    width: 121px;
}
.border_img_categorie {
    width: 176px;
    height: 176px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    overflow: hidden;
}
.categorie-div {
    width: 250px;
    height: 190px;
    display: flex;
    justify-content: center;
}
.listareCategorii .border_img_categorie {
    height: 121px;
    width: 121px;
}
.border_img_categorie {
    width: 176px;
    height: 176px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    overflow: hidden;
}
.border_img_categorie.is-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}
.listareCategorii .img_categorie {
    height: 75px;
    width: 75px;
    border-radius: 0px;
}
.boxCategorie .img_categorie {
    height: 165px;
    width: 165px;
    border-radius: 112px;
    transition: all 0.5s ease;
    background-position: center center;
    position: relative;
    background-size: contain;
    transition: all 0.8s ease;
    background-repeat: no-repeat;
}
.listareCategorii .boxCategorie .nume_categorie {
    line-height: 1;
}
.boxCategorie .nume_categorie {
    text-align: center;
    /* width: 90%; */
}
.boxCategorie.bold .nume_categorie span,
.boxCategorie.active-cat .nume_categorie span {
    color: #0077be;
    font-weight: 700;
    font-size: 16px;
}
.filtru_specificatii:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}
.filtru_specificatii {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 18px;
    border: 1px solid #e8e8e8;
    transition: 0.25s ease;
    margin-top: 10px;
}
.filtru_specificatii .nume_specificatie {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}
#amount,
.resetFiltre {
    border: none;
    font-weight: 600;
    color: #0077be;
    margin-bottom: 10px;
    font-size: 14px;
    width: -webkit-fill-available;
}

#slider-range .ui-slider-range {
    background: #0077be !important;
}
.checkbox_filtru:checked {
    background-color: #0077be;
    border-color: #0077be;
}
.box_valori_filtru input {
    vertical-align: middle;
}
#slider-range .ui-slider-range {
    background: #0077be !important;
}
#slider-range .ui-slider-handle {
    border-radius: 50%;
    background: white !important;
    border: 2px solid #0077be !important;
    width: 18px;
    height: 18px;
    top: -5px !important;
}
.produse_categorie_listare.produse {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.categorySlider .category_link,
.divScrollTo {
    text-decoration: none !important;
}

.titlu_sectiune_categ {
    font-size: 22px;
    font-weight: 600;
    margin-top: 6px;
}
.desc_sectiune {
    font-size: 14px;
}
.nr_prod_paginare {
    font-size: 14px;
}
select[name="sortare"] {
    border: 1px solid #f2f2f2;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
}
.product-breadcrumps-line {
    margin-top: 0px;
    margin-bottom: 40px;
}
.colBtnFavorite .btnSalveaza.sterge_din_favorite i {
    color: #488597;
}
.btnSalveaza i:hover,
.btnShare i:hover {
    color: var(--Turcoaz, #147693) !important;
}
.btnSalveaza i,
.btnShare i {
    color: white;
    -webkit-text-stroke: 1px #488597;
    font-size: 20px;
}

.produse_cos .rand_prod_cos {
    background: white;
    padding: 15px;
    margin: 0 0 10px 0;
    min-height: 130px;
}
.rand_prod_cos img {
    height: 50px !important;
}
.produse_cos .nume_prod_cos {
    color: #222222;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
}
.rand_prod_cos .pret_intreg {
    margin-bottom: 0px !important;
    color: grey;
    font-size: 12px;
    font-weight: 600;
    text-decoration: line-through;
}
.produse_cos .rand_prod_cos .pret_final {
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.rand_prod_cos .pret_final {
    margin-bottom: 0px !important;
    color: #0077be;
    font-size: 15px;
    font-weight: 600;
}
.produse_cos .rand_prod_cos .spanFavorite,
.rand_prod_cos .sterge_din_cos,
.rand_prod_cos .sterge_din_favorite {
    font-size: 13px;
    cursor: pointer;
    display: inline-block;
    margin-right: 5px;
}
.adauga_in_cos {
    padding: 0;
}
.produse_cos .rand_prod_cos .subtotal i {
    color: #0077be;
}
.nr_prod_cos_sumar {
    border-bottom: 1px solid #f2f2f2;
    border-top: 1px solid #f2f2f2;
    padding: 10px;
    margin-left: 0;
    margin-right: 0;
}
.header-actions .cart-action:hover {
    cursor: pointer;
}
.rand_prod_cos div:nth-child(1) {
    margin-right: 0;
}

/* bara de search  */
.hiddenAjax .item_cautare {
    padding: 10px;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    transition: all 0.3s ease-out;
}

.hiddenAjax .nume_prod {
    color: #222222 !important;
    font-weight: 700 !important;
    font-size: 13px;
}
.hiddenAjax .desc_prod {
    font-size: 12px;
}

.hiddenAjax .header1 a {
    color: #54595f;
}
.hiddenAjax a:hover {
    text-decoration: none;
}

.hiddenAjax a:last-child .item_cautare {
    border-bottom: 0;
}
.item_cautare:hover {
    background: #e9eaf3;
}
.hiddenAjax .vezi_tot {
    display: block !important;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
}
.header-search .form-control,
.header-search .form-control:focus {
    color: #fff;
}

.box_valori_filtru {
    margin-top: 14px;
    padding-left: 4px;
    max-height: 200px;
    overflow-y: auto;
    font-size: 13px;
    display: grid;
}

.reset_filtru_single {
    font-size: 14px;
    color: #d9534f;
    cursor: pointer;
    margin-top: 10px;
    display: inline-block;
}

.page404 {
    min-height: calc(100vh - 400px);
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 40px !important;
    background-position: center;
    padding: 40px;
    border-radius: 20px;
}

.page404 h2 {
    color: #0077be;
    font-size: 40px;
    font-weight: 700;
}

.page404 .btn-albastru:hover {
    background: #fff;
    color: #0077be !important;
    border: 1px solid #0077be;
}

.page404 .btn-albastru {
    background: #0077be;
    color: white;
    border: 1px solid #0077be;
    border-radius: 5px;
    padding: 8px 13px;
    font-size: 13px;
    transition: all 0.3s ease;
    line-height: 13px;
}
.disabled-filter {
    opacity: 0.6;
    cursor: not-allowed;
}
.boxResetFiltre {
    background: white;
    color: #222;
    font-size: 13px;
    font-weight: 600;
    line-height: 26px;
    padding: 10px;
}

/* .event a {
    cursor: pointer;
} */
.event .event-share svg:last-child {
    transition: transform 0.35s ease;
    transform-origin: center;
}

.event a:hover .event-share svg:last-child {
    transform: rotate(45deg);
}
.event .event-image {
    overflow: hidden;
    border-radius: 20px; /* dacă cardul are colțuri rotunjite */
}

.event .event-image img {
    transition: transform 0.5s ease;
}

.event a:hover .event-image img {
    transform: scale(1.08);
}

/* CONTUL MEU */
.contul-meu .boxContStanga {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
}

.contul-meu .contMeniu .nav-link {
    color: #333;
    padding: 10px 15px;
    border-radius: 6px;
}

.contul-meu .contMeniu .nav-link.active {
    background: #eef6ff;
    color: #488597;
    font-weight: 600;
}

.contul-meu .boxContDreapta,
.contul-meu .boxContStanga {
    background: #fff;
    box-shadow: 0px 0px 25px 0px rgba(154, 156, 202, 0.09);
    /* background: linear-gradient(rgb(245, 245, 245) 0%, rgb(237, 237, 237) 100%); */
    border-radius: 10px;
    padding: 20px;
}

.contul-meu .headerBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.contul-meu .boxActivitate {
    display: grid;
    padding: 20px 0px 20px 0;
    text-align: center;
}

.contul-meu .boxActivitate i {
    font-size: 28px;
    margin-bottom: 10px;
    color: #0077be;
}

.contul-meu .tabContinut {
    display: none;
}

.contul-meu .date-personale {
    display: grid;
}

.contul-meu .titluBox,
.contul-meu .dashboard-subtitle {
    color: #636667 !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 24px;
}
.contul-meu .btn-edit {
    color: black;
    border: 1px solid #636667;
    border-radius: 5px;
    padding: 5px 15px 5px 15px;
}
.boxDatePersonale {
    height: 100%;
}
.contul-meu .tab-content {
    display: none;
}

.contul-meu .tab-content .tab-pane.active.show {
    display: block;
}

.contul-meu .tab-content:has(.tab-pane.active.show) {
    display: block;
}

.contul-meu .tab-content:has(.tab-pane.active.show) ~ .defaultDashboard,
.contul-meu .defaultDashboard:has(+ .tab-content .tab-pane.active.show) {
    display: none;
}
.contul-meu .tab-pane.active.show {
    padding: 20px;
    box-shadow: 0px 0px 25px 0px rgba(154, 156, 202, 0.09);
}
.contul-meu .adrese-btns,
.contul-meu .boxCampValoare .row .my-auto {
    display: inline-flex;
}

.contul-meu .boxCampValoare .row .my-auto .fa-trash-alt {
    margin-left: 5px;
}

.contul-meu .input-group-text {
    padding: 0.135rem 0.75rem;
}

.contul-meu .contMeniu .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contul-meu #v-pills-messages-tab i {
    font-size: 22px;
}

.contul-meu .btn-alb-border {
    border: 1px solid #0077be;
    font-size: 12px;
    padding: 3px 8px;
    color: #0077be !important;
    font-weight: 600;
}

.contul-meu .boxCampValoare {
    background: white;
    font-size: 14px;
    padding: 15px;
    margin-bottom: 20px;
}
.contul-meu .linkTabs:hover {
    cursor: pointer;
    color: #0077be !important;
}
.boxCampValoare .labelCamp {
    display: block;
    color: #c9cbe1;
}
.boxReviews .fa-check-square {
    margin-left: 10px;
}

/* comanda  */
.total_comanda .sumar_comanda {
    background: white;
    padding: 25px;
}
.sumar_comanda .pret_intreg {
    margin-bottom: 0px !important;
    color: grey;
    font-size: 14px;
    font-weight: 600;
    text-decoration: line-through;
}
.sumar_comanda .pret_final {
    margin-bottom: 0px !important;
    color: #222;
    font-size: 19px;
    font-weight: 600;
}
.sumar_comanda .btn-gri:hover {
    color: #6c757d;
    background: white;
}
.sumar_comanda .btn-albastru {
    color: white;
    font-size: 20px;
    font-weight: 400;
    padding: 15px 30px;
    font-size: 16px;
}
.sumar_comanda .btn-albastru {
    background: #0077be;
    color: white;
    border: 1px solid #0077be;
    border-radius: 5px;
    font-size: 16px;
    transition: all 0.3s ease;
    line-height: 13px;
    padding: 15px 30px;
}
.sumar_comanda .btn-albastru:hover {
    background: #fff;
    color: #0077be !important;
    border: 1px solid #0077be;
}

.sumar_comanda .btn-gri:hover {
    background: white;
    color: #6c757d;
    border: 1px solid #6c757d;
}
.sumar_comanda .btn-gri {
    color: white;
    /* font-size: 20px; */
    font-weight: 400;
    border-radius: 5px;
    padding: 15px 30px;
    font-size: 16px;
    border: 1px solid #6c757d;
    background: #6c757d;
    transition: all 0.3s ease;
    line-height: 13px;
}
.steps_comanda {
    margin-bottom: 30px;
    overflow: hidden;
    color: lightgrey;
}
.steps_comanda .list-inline-item:not(:last-child) {
    margin: 0;
}
.steps_comanda .active {
    color: #0077be;
}
.steps_comanda li {
    list-style-type: none;
    font-size: 15px;
    width: 33.3%;
    float: left;
    position: relative;
    font-weight: 400;
}
.steps_comanda li i {
    text-align: center;
    height: 100px;
    width: 100px;
    border-radius: 50px;
    font-size: 34px;
    background: #fff;
    line-height: 100px;
}
li:after {
    background: #0077be;
}
.steps_comanda li:after {
    content: "";
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 50px;
    z-index: -1;
}
.colWhiteFinalizare {
    background: white;
    color: #999;
    padding: 0;
}
.tabsFinalizare .nav-tabs {
    border-bottom: 1px solid #0077be;
}
.colWhiteFinalizare ul {
    padding: 0 40px;
}
.nav-tabs {
    border: none;
}
.tabsFinalizare li {
    width: 50%;
}
.tabsFinalizare .nav-tabs .nav-item.show .nav-link,
.tabsFinalizare .nav-tabs .nav-link.active {
    border-color: #0077be #0077be #fff;
}
.nav-tabs .nav-link.active {
    color: var(--White, #fff);
    background: var(--Turcoaz, #0077be);
}

.nav-tabs .nav-link {
    color: var(--Turcoaz, #0077be);
    background: #ededed;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 8px;
    background: #ededed;
    padding: 2px 50px;
}
.iconMov {
    color: #0077be;
}
.boxAdresaExistenta .radio_adresa {
    top: 3px;
}
.boxAdresaExistenta span {
    display: block;
    font-size: 12px;
}
.desktop-only {
    display: none;
}
.mobile-only {
    display: block;
    font-size: 26px !important;
    margin-bottom: 0px;
}
.radio_adresa {
    position: absolute;
    left: -5px;
    top: 34px;
}
.colWhiteFinalizare {
    background: white;
    color: #999;
    padding: 0;
}
.colWhiteFinalizare h4 {
    color: #222;
    padding: 20px 20px 0px 20px;
    line-height: 30px;
}
.colWhiteFinalizare ul {
    padding: 0 40px;
}
.colWhiteFinalizare .boxFinalizare {
    padding: 20px 40px 20px 40px;
}
.boxAdresaExistenta {
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom: 1px solid #f2f2f2;
}
.btn-alb-border {
    border: 1px solid #0077be;
    font-size: 12px;
    padding: 3px 8px;
    color: #0077be !important;
    font-weight: 600;
}

.metode .boxRadio {
    cursor: pointer;
}
.boxFinalizare .boxRadio {
    display: inline-block;
    width: calc(50% - 10px);
    padding: 10px;
    border: 1px solid #cbbfda;
    border-radius: 3px;
}
.colWhiteFinalizare h4 {
    color: #222;
    padding: 20px 20px 0px 20px;
    line-height: 30px;
}

.colWhiteFinalizare h4 .conexiune_securizata {
    padding: 0 4px;
    float: right;
    border-radius: 5px;
    background: #f2f2f2;
    font-size: 11px;
}
.metode .boxRadio .nume_metoda {
    font-weight: 600;
    color: #444;
    font-size: 14px;
}
.metode .boxRadio .pret_livrare {
    color: #555 !important;
    font-size: 15px;
    font-weight: 600 !important;
}

.metode .boxRadio span {
    display: block;
    line-height: 15px;
}
.colInputsCheck {
    font-size: 14px;
    margin-bottom: 15px;
}
.colInputsCheck {
    font-size: 14px;
    margin-bottom: 15px;
}
.butonPlaseaza p {
    display: inline-block;
    margin: 0;
}
.butonPlaseaza {
    padding: 0 40px 40px 40px;
}
.boxComandaPlasata {
    padding: 20px;
    color: #54595f;
    font-size: 15px;
}
.boxComandaPlasata i {
    font-size: 36px;
    color: green;
}
.open-popup-comanda {
    cursor: pointer;
    color: #0077be !important;
}
.divComenzi .headerComenzi {
    color: #c9cbe1;
    margin-bottom: 15px;
    font-size: 15px;
}
.bullet_status_initiata {
    color: #b9b9b9;
}

.bullet_status_plasata {
    color: #00c4ff;
}

.bullet_status_platita {
    color: #5f38ad;
}

.bullet_status_finalizata {
    color: #38ad41;
}

.bullet_status_procesare {
    color: #e2c709;
}

.bullet_status_anulata {
    color: #e2091d;
}

.bullet_status_esuata {
    color: #222;
}
.marginRight10 {
    margin-right: 10px;
}

/* vizualizare comanda din ocntul meu */
.modalComanda .modal-content {
    padding: 25px;
}
.modalComanda .close {
    right: 3px;
    top: 3px;
    position: absolute;
    background: #161845;
    height: 30px;
    width: 30px;
    line-height: 16px;
    border-radius: 15px;
    padding: 5px;
    color: #ffff;
}
.modalComanda .divContulMeu {
    padding: 15px;
}
.modalComanda .boxCampValoare {
    background: white;
    font-size: 14px;
    padding: 15px;
    margin-bottom: 20px;
}
.boxCampValoare img {
    height: 25px;
}
.boxCampValoare .labelCamp {
    display: block;
    color: #c9cbe1;
    font-size: 14px;
}
.boxCampValoare .valoareCamp {
    display: block;
    color: #222;
    font-size: 15px;
    font-weight: 400;
}
.modalComanda .valoareCamp,
.modalComanda .valoareCamp a,
.modalComanda a {
    color: #54595f !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: block;
    letter-spacing: -0.5px;
    line-height: 19px;
}
.modalComanda .divContulMeu h5 {
    font-weight: 600;
}
.divContulMeu h5 {
    color: #222;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
}
.modalComanda .rand_sumar_comanda {
    font-size: 14px;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}
.modalComanda .rand_sumar_comanda .pret_final {
    font-size: 12px !important;
}
.modalComanda .spanTotal {
    font-size: 20px;
    font-weight: 700;
    color: #0077be;
    letter-spacing: -0.5px;
}
#sumar-cos .nume_prod_cos {
    font-size: 12px;
    color: #222;
    display: block;
    line-height: 14px;
}

.btn-brand {
    padding: 10px 20px;
    border: 1px solid #0077be;
    background-color: #0077be;
    font-size: 14px;
    color: #fff;
    font-weight: 600;
}
.btn-brand:hover {
    background-color: #0065a0 !important;
    color: #fff;
}
.divComenzi .randComanda {
    background: white;
    padding: 15px 10px;
    margin-bottom: 25px;
    color: #222;
    font-weight: 600;
    font-size: 15px;
}
.boxProducator {
    font-weight: 700;
    min-height: 78px;
}

.similar-products,
.associated-products {
    margin-bottom: 70px;
}

.highlightMutare {
    box-shadow: 0 0 10px #2ecc71;
}
.fa-file-invoice {
    margin-right: 10px;
}

.produse_sumar_cos .rand_prod_cos div {
    margin-top: 5px;
}
.boxConectareFinalizare .groupInput {
    padding: 40px;
}

#swal2-title {
    display: inherit !important;
}

.box_cantitate_cos input.number {
    margin-left: -4px;
    margin-right: -4px;
}
.box_cantitate_cos input#number,
input.number {
    padding-top: 14px;
    padding-bottom: 16px;
}
.box_cantitate_cos .value-button {
    padding-top: 14px;
    padding-bottom: 13px;
}
.product-price-buy-div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.descPostare {
    overflow-x: auto;
}

.descPostare table {
    width: 100%;
    min-width: 600px; /* opțional - păstrează lizibilitatea */
    border-collapse: collapse;
}

.descPostare img {
    max-width: 100%;
    height: auto;
}
.mobile-only {
    display: none;
}
.desktop-only {
    display: block;
}
.anunt-site {
    padding: 10px;
    z-index: 999;
    background-color: white;
}
/* Partea responsive */

/* LAptop */
@media (max-width: 1024px) {
    .hero .hero-title {
        font-size: 45px;
        padding-top: 115px;
    }
    .img-item img {
        max-height: 655px !important;
    }
    .banner-logos {
        height: 120px;
        margin-top: 55px;
    }
    .services .container {
        flex-wrap: inherit;
    }
    /* .services .service-item {
        min-width: 235px;
    } */
    .product-categories .category-item {
        min-width: inherit;
    }
    .section-title {
        font-size: 38px;
    }
    .product-categories .category-item-title {
        font-size: 28px;
    }
    .product-image img {
        height: 140px;
    }
    .product-price-buy-div .buy-now-btn {
        width: 45px;
    }
    .pret-variabil {
        font-size: 10px;
    }
    .product-price-buy-div .details-btn {
        width: 65px;
    }
    .product-item .product-name {
        font-size: 16px;
    }
    .sale-icon span {
        font-size: 17px;
    }
    .reasons {
        width: 100%;
    }
    .reasons-header-title {
        font-size: 40px;
    }
    .reasons .reason-title {
        font-size: 18px;
    }
    .reasons .reason-subtitle {
        font-size: 14px;
    }
    .reason-bg {
        width: 580px;
        height: 555px;
    }
    .reasons-texts {
        width: 55%;
    }
    .event-title {
        font-size: 15px;
        padding: 15px;
    }
    footer .link-title {
        font-size: 14px;
    }
    footer .webis-company img {
        width: 35px;
    }
    footer .social-text {
        font-size: 18px;
    }
    footer .logo img {
        width: 90%;
    }
    .sal-sol-imgs {
        display: flex;
    }
    .sal-sol-imgs img {
        width: 127px;
    }
    input#number,
    input.number {
        padding-top: 12px;
        padding-bottom: 13px;
    }
    .value-button {
        padding-top: 11px;
        padding-bottom: 11px;
    }

    .box_cantitate_cos .cant_cos {
        margin-right: -4px;
        margin-left: -4px;
    }
    .box_cantitate_cos input.number {
        padding-top: 13px;
        padding-bottom: 13px;
    }

    .box_cantitate_cos .value-button {
        padding-top: 11px;
        padding-bottom: 12px;
        margin-top: 0px;
    }
    .nav-tabs .nav-link {
        padding: 5px 20px;
    }
    .user-email {
        font-size: 14px;
    }
    .personal-data strong {
        font-size: 14px;
    }
    .input-group-append .input-icon {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* Tablet */
@media (max-width: 768px) {
    .hero .hero-title {
        font-size: 32px;
        padding-top: 30px;
    }
    .hero .hero-content {
        width: 50%;
        padding-top: 20px;
    }

    .header-logo a img {
        width: 100%;
        max-height: 42px;
        height: auto;
    }

    .hero .btn-products span svg:nth-child(1),
    .hero .btn-about span svg:nth-child(1) {
        width: 30px;
        height: 30px;
        margin-left: 5px;
    }

    .hero .btn-products span svg:nth-child(2),
    .hero .btn-about span svg:nth-child(2) {
        margin-top: 10px;
        margin-left: -21px;
    }
    .hero .btn-products span:nth-child(1),
    .hero .btn-about span:nth-child(1) {
        margin-left: 7px;
        font-size: 14px;
    }
    .img-item img {
        max-height: 480px !important;
    }
    .banner-logos {
        height: 100px;
    }
    .services .container {
        flex-wrap: wrap;
        row-gap: 50px;
    }
    .product-image img {
        width: 100%;
    }
    .product-categories .category-item {
        height: 225px;
    }
    .product-categories .category-item-title {
        font-size: 22px;
    }
    .product-item .product-name {
        font-size: 14px;
    }
    .product-price-buy-div .buy-now-btn {
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 15px;
        padding-right: 15px;
        width: auto;
    }
    .product-price-buy-div .buy-now-btn svg {
        width: 15px;
    }
    .product-item .current-price {
        font-size: 14px;
    }
    .reasons-img {
        right: 0;
    }
    .reasons-header-title {
        font-size: 25px;
    }
    .reasons-item svg {
        width: 15px;
    }
    .reasons .reasons-line {
        margin-top: 30px;
        display: flow;
    }
    .reason-bg {
        width: 483px;
    }
    .reasons-texts {
        width: 50%;
        padding-top: 55px;
        padding-bottom: 45px;
    }
    .reason-man {
        height: 590px;
    }
    .reasons .reason-title {
        font-size: 16px;
    }
    .reasons-item {
        column-gap: 0px;
    }
    .product-item {
        padding: 10px;
    }
    .event-image img {
        height: 200px;
    }
    .event-share svg:nth-child(1) {
        position: absolute;
        right: 10px;
        top: 10px;
    }
    .event-share svg:nth-child(2) {
        position: absolute;
        right: 25px;
        top: 25px;
    }
    .event-title {
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-height: 54px;
        font-size: 14px;
        padding: 10px;
    }
    .sal-sol-imgs {
        display: grid;
    }

    footer .links-titles .row .buy-column,
    footer .links-titles .row .informations-column,
    footer .links-titles .row .contact-column {
        gap: 7px;
        margin-top: 30px;
    }
    .copyright {
        font-size: 12px;
    }
    .header_categorie .titlu_cat {
        font-size: 22px;
    }
    .contul-meu .titluBox,
    .contul-meu .dashboard-subtitle {
        font-size: 18px;
    }
    .boxContStanga .user-email {
        font-size: 12px;
    }
    .date-personale span {
        font-size: 14px;
    }

    .boxDatePersonale .personal-data {
        display: grid;
        row-gap: 10px;
    }
    .contul-meu .btn-edit {
        font-size: 12px;
    }
    .contul-meu .boxActivitate {
        display: flex;
        padding: 20px 0 0 0;
    }
    .contul-meu .boxActivitate i {
        margin-right: 10px;
    }
    .boxContStanga .contMeniu {
        font-size: 14px;
    }
    .boxContStanga .contMeniu a img {
        width: 15px;
    }
    .contul-meu .boxActivitate i {
        font-size: 20px;
    }
    .contul-meu #v-pills-messages-tab i {
        font-size: 15px;
    }
    .activitateGrid,
    .boxContDreapta {
        font-size: 14px;
    }
    .pdr {
        padding-right: 0;
        padding-left: 0;
    }
    .divComenzi {
        font-size: 14px;
    }

    .bullet {
        font-size: 12px;
        margin-right: 5px;
    }
    .divComenzi .randComanda {
        margin-bottom: 0;
    }
    .contul-meu .btn-alb-border {
        font-size: 10px;
    }
    .contulMeuLayout .adresa {
        margin-right: 0;
        padding-right: 0;
    }
    .adrese-livrare {
        margin-right: 0;
    }
    .contul-meu .adrese-btns,
    .contul-meu .boxCampValoare .row .my-auto {
        display: grid;
    }
    .contul-meu .modifica_adresa {
        margin-right: 0;
        margin-bottom: 5px;
    }
    .contul-meu .boxCampValoare .row .my-auto .fa-trash-alt {
        margin-left: 0;
    }
    .boxCampValoare .valoareCamp {
        font-size: 12px;
    }
    .boxReview {
        margin-bottom: 15px;
    }
    .adauga_in_cos .fa-shopping-cart {
        padding-right: 0px;
    }

    footer .contact-column .address-details svg {
        width: 30px;
    }
    .link-contact-title svg {
        width: 15px;
    }
    .register-name,
    .password-confirmation {
        margin-top: 15px;
    }
    .alert-info {
        font-size: 14px;
        margin-top: 15px;
    }
    .hero .btn-products {
        margin-right: 5px;
    }
    .second-desktop {
        margin-top: 85px;
    }
    .divContulMeu {
        font-size: 14px;
    }
    .divContulMeu img,
    .groupInput img {
        width: 25px;
    }
    .listareCategorii .border_img_categorie {
        height: 75px;
        width: 75px;
    }
    .produse_categorie_listare.produse {
        grid-template-columns: repeat(3, 1fr);
    }
    .categorii-content .col20,
    .cautare-filtre,
    .blog .col20,
    .postare .col20 {
        width: 25%;
        max-width: 25%;
    }

    .categorii-content .col80,
    .cautare-rezultate,
    .blog .col80,
    .postare .col80 {
        width: 75%;
        max-width: 75%;
    }
    .detalii-produs #nume_produs {
        font-size: 28px;
    }
    .right-part .detalii-produs .subtitlu_produs,
    .producator_name .clasa_in_stoc {
        font-size: 14px;
    }
    .detalii-produs .pret_produs .pret_intreg {
        font-size: 25px;
    }
    .detalii-produs .pret_produs .pret_final {
        font-size: 24px;
    }
    .detalii-produs .product-price-buy-div {
        display: grid;
        row-gap: 10px;
        justify-content: normal;
    }
    .detalii-produs .pr-4 {
        padding-right: 0px !important;
    }
    .taburi_produs .nav-item a {
        font-size: 14px;
        padding: 10px 15px;
        margin-right: 10px;
    }
    .content-limit {
        font-size: 14px;
    }
    .similar-products .section-title {
        font-size: 34px;
    }
    .content_taburi .titlu_pg_prod,
    .boxConectare .card-header h5 {
        font-size: 22px;
    }
    .medie_nota .nota_big {
        font-size: 28px;
    }
    .medie_nota .imgStea {
        height: 13px !important;
        width: 13px !important;
    }
    .medie_nota .nr_reviews {
        font-size: 12px;
    }
    .nr_note {
        font-size: 11px;
    }
    .progress {
        height: 12px;
    }
    .boxReview .titlu_review {
        margin-top: 0;
        margin-bottom: 0;
    }
    .img_review {
        width: 50%;
    }
    .spanComentariu {
        font-size: 11px;
    }
    .rowReviews .paddingRight50 {
        padding-right: 0;
    }
    .main-navigation {
        display: none;
    }
    .formReview .form-control:focus ~ .floating-label,
    .formReview .form-control:not(:focus):valid ~ .floating-label {
        line-height: 12px;
        top: 0px;
    }
    .descPostare {
        overflow-x: auto;
    }

    .descPostare table {
        width: 100%;
        min-width: 600px; /* opțional - păstrează lizibilitatea */
        border-collapse: collapse;
    }

    .descPostare img {
        max-width: 100%;
        height: auto;
    }
    #amount,
    .resetFiltre {
        font-size: 13px;
    }
}

/* Mobile  */
@media (max-width: 480px) {
    .divContulMeu .div-elem {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .stele_date img {
        width: 10px;
    }
    .boxReview .titlu_review {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .contul-meu .adrese-btns,
    .contul-meu .boxCampValoare .row .my-auto {
        display: flex;
        justify-content: end;
    }
    .fs-6 {
        padding-left: 0;
    }
    #v-pills-tab {
        display: block !important;
    }
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    .hero .hero-title {
        width: 100%;
        font-size: 30px;
    }
    .hero .hero-content {
        width: 100%;
    }
    .hero .hero-buttons {
        display: grid;
        row-gap: 10px;
    }
    .hero .btn-products {
        margin-right: 0px;
    }
    .img-item img {
        max-height: 275px !important;
    }
    .banner-logos {
        margin-top: 60px;
    }
    /* .btn-about span:first-child {
        text-align: left;
    } */

    .hero .btn-products,
    .hero .btn-about {
        justify-content: space-between;
    }
    .logo-item img {
        width: 70%;
    }
    .banner-logos .logo-items {
        gap: 5px;
        margin-left: 15px;
    }
    .anunt-site {
        font-size: 14px;
    }

    .contact-info {
        display: grid;
    }
    .site-content .first-header a svg {
        margin-right: 5px;
    }
    .first-header svg {
        width: 13px;
    }
    .site-content .first-header a span {
        font-size: 12px;
    }
    .services .service-item-icon {
        width: 40px;
        height: 40px;
        top: -22px;
        left: 22px;
    }
    .service-item {
        padding: 30px 30px;
    }
    .section-title {
        font-size: 22px;
    }

    .section-title svg {
        width: 35px;
        height: 35px;
    }
    .product-categories .category-item-title {
        font-size: 18px;
    }
    .product-categories .category-item {
        height: 320px;
    }
    .reasons {
        width: 100%;
    }
    .reasons-item {
        margin-bottom: 20px;
    }

    .reasons-texts {
        width: 100%;
    }
    .reason-man {
        height: 370px;
        right: 0;
    }
    .reasons .container {
        flex-direction: column;
    }
    .reasons-img {
        position: relative;
        width: 95%;
        height: 305px;
    }

    .reasons-img .reason-bg {
        width: 100%;
        height: auto;
        left: 20px;
    }
    .mobile-only {
        display: block;
    }
    .desktop-only {
        display: none;
    }
    .popular-products-techniciens {
        margin-top: 50px;
        margin-bottom: 80px;
    }
    .event-image img {
        height: 265px;
    }
    footer .logo-media .media-group {
        position: relative;
        bottom: 0;
        margin-top: 20px;
    }
    .d-inline-mobile {
        display: inline !important;
    }
    .d-none-mobile {
        display: none;
    }
    .butonBoxFiltre {
        border: 1px solid #f2f2f2;
        font-size: 13px;
        background: white;
        font-weight: 400;
    }
    .btnFiltre {
        cursor: pointer;
        display: block;
    }
    .butonBoxFiltre i {
        font-size: 11px;
    }
    select[name="sortare"] {
        background: white;
        font-size: 13px;
    }

    .btnFiltreFixed {
        position: sticky;

        margin-bottom: 20px;

        margin-right: 20px;

        float: right;
    }

    /* #modalFiltre{

      top: calc(50vh - 50%);

   } */

    .butonBoxFiltre {
        border: 1px solid #f2f2f2;
        font-family: "Roboto", var(--font-sans);
        font-size: 13px;
        background: white;
        font-weight: 400;
    }

    select[name="sortare"] {
        background: white;
        font-size: 13px;
    }

    .butonBoxFiltre i {
        font-size: 11px;
    }

    .box_valori_filtru::-webkit-scrollbar {
        width: 2px;
        height: 8px;
        border-radius: 3px;
    }

    .box_valori_filtru::-webkit-scrollbar-button {
        width: 0px;
        height: 0px;
    }

    .box_valori_filtru::-webkit-scrollbar-thumb {
        background: #c76b33;

        border: 0px none #ffffff;

        border-radius: 50px;
    }

    .box_valori_filtru::-webkit-scrollbar-track {
        background: #e1e1e1;
        border: 0px none #ffffff;
        border-radius: 50px;
    }

    .box_valori_filtru::-webkit-scrollbar-corner {
        background: transparent;
    }
    .box_valori_filtru {
        /* display: grid !important; */
    }

    /* favorite */
    .produse_cos .nume_prod_cos {
        line-height: 16px;

        display: block;
    }

    .textPretUnitar {
        display: none;
    }

    /* filtre */
    .btnFiltre {
        cursor: pointer;

        display: block;
    }

    .boxFiltre {
        max-height: 300px;

        overflow-y: auto;
    }
    .d-none-mobile {
        display: none;
    }

    .d-inline-mobile {
        display: inline !important;
    }

    .d-inline-block-mobile {
        display: inline-block !important;
    }

    .d-block-mobile {
        display: block !important;
    }

    .d-flex-mobile {
        display: flex !important;
    }

    .nr_prod_paginare {
        margin-bottom: 5px;
        margin-top: 15px;
    }
    .filtru_specificatii .expandFiltru i {
        font-size: 14px;
        text-align: right;
        transition: 0.3s ease;
    }
    .checkbox_filtru {
        appearance: none;
        -webkit-appearance: none;
        width: 17px;
        height: 17px;
        border: 2px solid #0077be;
        border-radius: 4px;
        margin-right: 8px;
        position: relative;
        cursor: pointer;
        transition: 0.15s ease;
    }
    .box_valori_filtru input {
        vertical-align: middle;
    }
    .box_valori_filtru {
        margin-top: 10px;
        max-height: 200px;
        overflow-y: auto;
        font-size: 13px;
    }
    .box_valori_filtru label {
        font-size: 14px;
        color: #444;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
    }
    .produse_categorie_listare.produse {
        grid-template-columns: repeat(2, 1fr);
    }
    .produse-content,
    .categorii-content,
    .cautare-rezultate,
    .postare {
        display: block;
    }
    .col20 {
        display: none;
    }
    .categorii-content .col80,
    .cautare-rezultate,
    .blog .col80,
    .postare .col80 {
        width: 100%;
        max-width: 100%;
    }
    .produse-content .col80 {
        width: 100%;
        max-width: 100%;
    }
    .content_produs {
        flex-direction: column;
    }
    .content_produs .left-part,
    .planuri_sectiune .left-part {
        width: 100%;
    }
    .content_produs .right-part,
    .planuri_sectiune .right-part {
        margin-left: 0;
        margin-top: 20px;
        width: 100%;
    }
    .detalii-produs .product-price-buy-div {
        display: flex;
        gap: 10px;
    }
    .colBtnCos i {
        /* display: none; */
    }
    .container-fluid,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        padding-right: 0;
        padding-left: 0;
    }
    .product-price-buy-div {
        font-size: 14px;
    }
    .value-button {
        padding-top: 9px;
        padding-bottom: 10px;
    }
    input#number,
    input.number {
        padding-top: 12px;
        padding-bottom: 13px;
    }
    .detalii-produs .colBtnCos .btn_cos_produs {
        padding: 8px 18px;
    }
    .boxConectare .card {
        border-top: 0px;
    }
    .boxConectare .card.active-form {
        border-top: 5px solid #0077be;
        border-radius: 10px;
    }
    .sectiune-taburi {
        padding: 0px;
    }
    .mobile-center {
        text-align: center;
    }

    .mobile-left {
        text-align: left;
    }
    .content-limit.expanded {
        max-height: none;
    }
    .similar-products .section-title {
        font-size: 24px;
    }
    .xzoom-thumbs .leftLst,
    .xzoom-thumbs .rightLst {
        top: -134%;
        background: #f5f5f5bd;
        padding: 11px 12px;
        font-size: 10px;
        z-index: 4;
    }
    .xzoom-thumbs .leftLst {
        left: -10px;
    }
    .xzoom-thumbs .leftLst,
    .xzoom-thumbs .rightLst {
        top: -100%;
        background: #f5f5f5bd;
        padding: 11px 12px;
        font-size: 10px;
        z-index: 4;
    }
    .xzoom-thumbs .rightLst {
        right: -10px;
    }
    #breadcrumps_produs_scroll {
        font-size: 14px;
    }
    .swiper-wrapper {
        padding: 5px 0px;
    }
    .produse_categorie_listare.produse {
        grid-template-columns: repeat(2, 1fr);
    }

    .boxCategorie {
        min-height: auto;
    }
    .categorie-item {
        margin-bottom: 10px;
    }
    .nume_categorie span {
        font-size: 12px;
    }
    .listareCategorii .border_img_categorie {
        height: 60px;
        width: 60px;
    }
    .boxCategorie.bold .nume_categorie span,
    .boxCategorie.active-cat .nume_categorie span {
        font-size: 12px;
    }
    .desktop-only {
        display: none;
    }
    .text-left-mobile {
        text-align: left !important;
    }
    .breadcrumps span {
        font-size: 14px;
    }
    .row.pgPostari {
        display: block;
    }
    .pgPostari {
        flex-direction: column;
        justify-content: center;
    }

    .pgPostari .col20 {
        display: block;
        width: 100%;
        max-width: 100%;
        padding-right: 15px;
    }
    .pgPostari .col80 {
        padding-left: 15px;
    }
    .categorii-filtru {
        font-size: 18px;
    }
    .header_categorie .titlu_cat {
        display: none;
    }
    .copyright {
        font-size: 8px;
    }

    .sal-sol-imgs {
        display: flex;
    }
    footer .logo img {
        width: 80%;
    }
    footer .social-text {
        /* display: none; */
    }
    footer .links-titles .row .buy-column,
    footer .links-titles .row .informations-column {
        display: flex;
        flex-direction: column;
        gap: 7px;
    }
    .buy-column,
    .informations-column {
        width: 50%;
        max-width: 50%;
        flex: 0 0 50%;
    }

    .contact-column {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .boxConectare .paddingRight50,
    .boxRegister .paddingRight50 {
        padding-right: 15px;
    }
    .boxConectare .paddingLeft50 {
        padding-left: 0px;
    }
    .boxRegister .paddingRight50 {
        padding-left: 0;
    }
    .boxConectare .card {
        padding: 25px;
    }
}

.mega-menu {
    position: absolute;
    left: 0;
    width: 100%;
    display: none;
    z-index: 999;
    top: calc(100% - 10px);
}

.mega-container {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    gap: 20px;
    padding: 40px;
    background: #fff;
    border-radius: 36px;
}

.mega-col {
    min-height: 300px;
}
.mega-left {
    display: flex;
    flex: 0 0 40%;
    flex-direction: column;
    gap: 0px;
}
.mega-middle {
    flex: 1;
    border-left: 1px solid #f3f3f3;
    border-right: 1px solid #f3f3f3;
    padding: 0px 20px;
}
.mega-right {
    flex: 1;
}
.mega-left .mega-item {
    font-size: 30px;
    line-height: 1.3em;
    text-decoration: none;
    color: #234463;
    gap: 40px;
    box-sizing: border-box;
}

/* LEFT */
.mega-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    cursor: pointer;
    font-weight: 500;
    border-radius: 12px;
    transition: 0.3s ease;
}

.mega-item:hover,
.mega-item.active {
    background: #f3f3f3;
    padding: 16px 32px;
}

/* MIDDLE */
.mega-sub {
    display: none;
}
.mega-sub-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 30px;
    margin-top: 20px;
    color: #234463;
}
.mega-sub-categories {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.mega-sub-categories a {
    font-size: 18px;
    color: #234463;
    font-weight: 600;
    text-decoration: none;
    padding: 5px 0px;
}
.mega-sub.active {
    display: block;
}

.mega-img-holder {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    overflow: hidden;
    background-color: #f3f3f3;
    border-radius: 12px;
}
/* RIGHT */
.mega-right img {
    width: 100%;
    object-fit: contain;
}
.sidebar-menu {
    display: none;
}
.header-logo .hamburger {
    display: none;
}
.mobile {
    display: none;
}

.mobile-item,
.mobile-socials a,
.mobile-contact-btn {
    opacity: 0;
    transform: translateY(20px);
}

.mobile-menu {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 0;
    background: #0077be;
    color: white; 
    overflow: hidden;
    z-index: 100;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
.mobile-menu-inner {
    padding-top: 200px;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
    height: 100%;
}
.hamburger {
    width: 24px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.hamburger .line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    transform-origin: center;
    /* transition: .03s ease; */
}

.mobile-menu-inner {
    padding-left: 20px;
    padding-right: 20px;
}

.mobile-item {
    border-bottom: 1px solid #eeeeee46;
}

.mobile-item-header {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    font-weight: 600;
    cursor: pointer;
    font-size: 32px;
    line-height: 1em;
    font-family: var(--font-sans);
    align-items: center;
}

.mobile-sub {
    height: 0;
    overflow: hidden;
    display: block; /* IMPORTANT */
}

.mobile-sub-item {
    padding: 8px 0;
    color: white;
}


.mobile-sub-sub {
    height: 0;
    overflow: hidden;
    padding-left: 15px;
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--font-sans);
}

/* toggle icon */
.mobile-toggle {
    position: relative;
    width: 16px;
    height: 16px;
    display: inline-block;
}

.mobile-toggle .toggle-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: white;
    transform-origin: center;
    transform: translateY(-50%);
}

/* vertical line (for +) */
.mobile-toggle .toggle-line:nth-child(2) {
    transform: translateY(-50%) rotate(90deg);
}
.mobile-sub-header .mobile-toggle {
    width: 12px;
    height: 12px;
}

/* sub header */
.mobile-sub-header {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    padding: 8px 0;
    font-size: 18px;
    font-family: var(--font-sans);
}

.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 50vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    z-index: 99;
}
.spec_variatie {
    margin-top: 10px;
}

@media (min-width: 850px) and (max-width: 1120px) {
    .mobile-overlay.active {
        opacity: 1;
        pointer-events: all;
    }
}

@media (max-width: 1120px) {
    .main-navigation {
        display: none;
    }
    .favourites_number,
    .cart_number {
        right: 0px;
    }
    .header-actions .cart-action {
        background: none !important;
        padding: 15px;
    }
    .cart-btn svg path {
        fill: white !important;
    }
    .cart-btn .cart-name {
        display: none;
    }
    .sidebar-menu {
        display: flex;
        padding: 9px 30px;
        background-color: white;
        border-radius: 30px;
        margin-left: 20px;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        cursor: pointer;
    }
    .sidebar-menu .hamburger {
        width: 20px;
    }
    .sidebar-menu span {
        font-family: var(--font-sans);
        font-weight: 600;
        color: #234463;
    }
    .hamburger {
        width: 20px;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    .hamburger .line {
        height: 2px;
        background-color: #234463;
        border-radius: 1px;
        width: 20px;
    }
    .mobile-menu {
        width: 50%;
    }
}
@media (max-width: 850px) {
    .mobile-overlay {
        display: none;
    }
    .mobile-menu {
        width: 100%;
    }

    .hamburger .line {
        width: 24px;
        background-color: white;
    }
    .first-header {
        display: none;
    }
    .second-header {
        display: flex;
        flex-direction: column;
    }
    .sidebar-menu {
        display: none;
    }
    .header-actions {
        gap: 0px;
    }
    .header-actions .action {
        padding: 10px;
    }
    .header-actions .account {
        padding-left: 0px;
    }
    .header-search {
        display: none;
    }
    .mobile {
        display: flex;
    }
    .mobile form {
        width: 100%;
    }
    .search-mobile {
        padding-bottom: 16px;
    }
    .header-logo {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        padding: 16px 0px;
    }
    .header-logo .hamburger {
        display: flex;
    }
    .site-content .second-header {
        height: auto;
    }
}

.mobile-menu-footer {
    margin-top: 30px;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 50px;
}

/* socials */
.mobile-socials {
    display: flex;
    gap: 15px;
}

.mobile-socials a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 16px;
}

/* contact button */
.mobile-contact-btn {
    display: block;
    text-align: center;
    padding: 12px;
    border-radius: 25px;
    background: white;
    color: #234463;
    font-weight: 600;
    text-decoration: none;
    font-family: var(--font-sans);
    line-height: 1.6em;
    font-size: 16px;
    min-height: 50px;
}
.menu-arrow {
    display: inline-flex;
    transition: transform 0.3s ease;
}
.menu-arrow svg {
    fill: white;
}
.nume_categorie {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}
.subcategorii {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: white;
    min-width: 180px;
    width: max-content;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-radius: 12px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    z-index: 100;
    padding: 10px;
}
.menu-item:hover .subcategorii {
   opacity: 1;
   visibility: visible;
   transform: translateX(-50%) translateY(0);
}
.subcategorii a {
    display: block;
    padding: 10px 15px;
    color: #234463 !important;
    text-decoration: none;
    font-size: 14px;
    justify-content: space-between;
    border-radius: 4px;
    gap: 10px;
}
.subcategorie-item {
   width: 100%;
}
.subcategorii a:hover {
    background: #f5f5f5;
}
.mega-container,
.subcategorii {
   box-shadow: 
      0 4px 10px rgba(0, 0, 0, 0.04),
      0 12px 30px rgba(0, 0, 0, 0.08);
}
.general_header{
    padding: 60px 0px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #0077be 0%, #20bdff 100%);
    margin-bottom: 30px;
}
.general_header .container{
    text-align: center;
}
.general_header .titlu_cat{
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(2.25rem, 0.878rem + 4.39vi, 4.5rem);
    color: white;
}
.generic-2-col{
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: center;
}
.contentPagina{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.icon-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    place-items: center;
}
.only1{
    grid-template-columns: 1fr 1fr 1fr; 
    padding-top: 20px;
}
.only1 p{
        text-align: left;
}
.icon-grid-item{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    background: white;
    width: 100%;
    height: 100%;
    padding-top: 40px;
    border: 1px solid #f2f2f2;
    transition: .3s ease;
    justify-content: space-between;
}
.icon-grid-item:hover{
    transform: translateY(-5px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
}
@media (max-width: 1024px){
    .generic-2-col{
        flex-direction: column;
    }
    .general_header .container{
    text-align: left;
    }
    .only1{
        grid-template-columns: 1fr !important;
    }
}
.logo-slider {
   width: 45%;
   margin-left: 10px !important;
}

.logo-slider .swiper-slide {
   display: flex;
   align-items: center;
   justify-content: center;
}

.logo-slider img {
   max-height: 50px;
   width: 100%;
    object-fit: contain;
}
@media (max-width: 1024px){
    .logo-slider img{
        max-height: 32px;
    }
}
.form-contact {
   max-width: 700px;
}

/* labels */
.form-contact label {
   font-weight: 500;
   margin-bottom: 8px;
   display: block;
   color: #1C1C1E;
}

/* inputs */
.form-contact .form-control {
   background: #F3F3F3;
   border: none;
   border-radius: 12px;
   padding: 14px 16px;
   font-size: 14px;

   transition: all 0.2s ease;
}

/* focus */
.form-contact .form-control:focus {
   background: #fff;
   box-shadow: 0 0 0 2px rgba(0, 119, 190, 0.2);
}

/* textarea */
.form-contact textarea.form-control {
   min-height: 120px;
   resize: none;
}

/* spacing între coloane */
.form-contact .row {
   row-gap: 0px;
}

/* checkbox */
.form-contact input[type="checkbox"] {
   accent-color: #0077BE;
   transform: scale(1.1);
   margin-right: 8px;
}

/* checkbox text */
.form-contact div {
   font-size: 14px;
   line-height: 1.4;
   margin-top: 10px;
}

/* button */
.form-contact .btn-albastru {
   background: #0077BE;
   color: white;
   border: none;
   border-radius: 12px;
   padding: 14px;
   font-weight: 500;
   width: 100%;

   transition: all 0.25s ease;
}

/* hover */
.form-contact .btn-albastru:hover {
   background: #005f98;
   transform: translateY(-1px);
}

/* click */
.form-contact .btn-albastru:active {
   transform: translateY(0);
}

/* alerts */
.form-contact .alert {
   border-radius: 12px;
   padding: 12px 16px;
   font-size: 14px;
   margin-bottom: 20px;
}
.mobile-sub-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: white;
   text-decoration: none;
    padding: 18px 0;
    font-size: 18px;
    font-family: var(--font-sans);
}
.mobile-sub-item:hover{
    color: white;
    text-decoration: none;
}

/* ═══ Homepage: widths that fell between the existing breakpoints ═══════════
   The 1024 / 768 / 480 rules above leave a gap roughly between 769 and
   1200px, which is where these three sections broke. */

/* Feature cards. .service-item is flex: 1 1 250px in a wrapping row, so four
   of them need about 1030px and anywhere between roughly 1030 and 1230px the
   fourth wrapped onto a line of its own. Below 1024, .services .container was
   set to flex-wrap: inherit, which resolves to nowrap, so instead all four
   were squeezed onto one line and the titles broke over two rows. Pinning the
   basis to an exact fraction gives 4, then 2, then 1 - never an orphan. */
.services .container {
	flex-wrap: wrap;
	gap: 20px;
}
.services .service-item {
	flex: 1 1 calc(25% - 15px);
	max-width: none;
}
@media (max-width: 1200px) {
	.services .service-item {
		flex-basis: calc(50% - 10px);
	}
}
@media (max-width: 575.98px) {
	.services .service-item {
		flex-basis: 100%;
	}
}

/* The photo in "De ce sa alegi PC Dental" is anchored to the right edge at a
   fixed 625px tall, so about 674px wide. The text beside it is 55% of the
   section (50% under 768px), so from around 1200px down the photo reached
   back underneath the text and the white copy sat unreadable on the man's
   tunic. Sizing it as a share of the section keeps them apart at every width.
   Below 480px the existing rules already drop it into the flow, so this stops
   short of there rather than fighting them. */
@media (min-width: 481px) and (max-width: 1200px) {
	.reason-man,
	.reason-bg {
		height: auto;
		width: 42%;
		max-width: 674px;
	}
}

/* ANPC badges. Under 1024px these become a flex row of two 127px images -
   261px with the gap - inside a column that is a quarter of the container,
   about 217px at 900px. They overran the "Cum cumpar?" links next to them. */
@media (max-width: 1024px) {
	.sal-sol-imgs {
		flex-wrap: wrap;
	}
	.sal-sol-imgs img {
		width: 100%;
		max-width: 127px;
	}
}

/* ── Footer logo column between 481 and 767px ─────────────────────────────
   The 480 block already handles both of these; the gap is the band above it,
   where .logo-media has gone full width (col-sm-12) but the desktop rules
   still apply. */
@media (max-width: 767.98px) {
	/* The 1024 block gives the logo 90% of its column. That is about 195px
	   while the column is col-md-3, and about 555px once it is full width. */
	footer .logo img {
		width: auto;
		max-width: 200px;
	}
	/* Social Media is pinned with position: absolute; bottom: 0 so it sits at
	   the foot of a tall desktop column. In a short full-width column it
	   detaches and lands on top of the two ANPC badges. */
	footer .logo-media .media-group {
		position: relative;
		bottom: auto;
		margin-top: 20px;
	}
}

/* ── Product grid at intermediate widths ──────────────────────────────────
   The grid went 4 columns, then 3 below 768, then 2 below 480. Between 768
   and 991 the filter sidebar is also on screen, so three cards shared about
   600px - roughly 155px each - and below 768 three cards in 600px were not
   much better. Two steps are added so a card never drops below about 250px. */
@media (max-width: 1199.98px) {
	.produse_categorie_listare.produse {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 767.98px) {
	.produse_categorie_listare.produse {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Long subcategory names were clipped rather than wrapped once the column
   grew narrow. Belt and braces alongside the wider columns. */
.categorie-item .nume_categorie,
.categorie-item .nume_categorie span {
	overflow-wrap: break-word;
	word-break: break-word;
	min-width: 0;
}

/* ── Filters below 992px ──────────────────────────────────────────────────
   webis.js hides .boxFiltre and copies it into #modalFiltre whenever the
   window is under 768, and .butonBoxFiltre opens that modal up to 767. But
   the button sits in a wrapper marked "d-none d-inline-mobile", and
   d-inline-mobile only takes effect at 480. So from 481 to 767 the sidebar
   filters were hidden by the script while the button to reach them was
   still invisible, leaving no way to filter at all.
   The .col20 column also went on reserving a quarter of the row for filters
   that were no longer in it, which is the empty box beside the grid. */
@media (max-width: 991.98px) {
	.col80 .d-none.d-inline-mobile {
		display: block !important;
	}
	/* The modal itself is wrapped in the same kind of mobile-only div, so
	   above 480 it opened at 0x0 and all you saw was the backdrop. */
	.categorii-content > .d-none.d-block-mobile {
		display: block !important;
	}
	.butonBoxFiltre .d-none.d-block-mobile {
		display: block !important;
	}
	.butonBoxFiltre {
		border: 1px solid #f2f2f2;
		background: #fff;
		font-size: 13px;
		font-weight: 400;
		cursor: pointer;
	}
	.butonBoxFiltre i {
		font-size: 11px;
	}

	/* Nothing visible is left in the sidebar below this width, so let it
	   collapse instead of holding a column open next to the products. */
	.categorii-content .col20,
	.categorii-content .col80,
	.cautare-filtre,
	.cautare-rezultate {
		/* flex-basis governs the main axis in this flex row, so width alone
		   is ignored - the base rule sets flex: 0 0 20%. */
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		/* .col80 trims padding-left to 10px so it sits closer to the
		   sidebar, while padding-right stays at the Bootstrap 15px. Once it
		   is full width that 5px difference pushes the grid off centre. */
		padding-left: 15px;
	}
}

/* ── Filter modal: scrolling and accordions ───────────────────────────────
   Bootstrap's scrollable modal expects .modal-body to be a direct flex child
   of .modal-content, but here it sits inside a .relative wrapper, so nothing
   shrank and nothing scrolled - the list just ran past the bottom. Carry the
   flex chain through the wrapper. */
@media (max-width: 991.98px) {
	#modalFiltre .modal-content > .relative {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
	}
	#modalFiltre .modal-body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
	}
	/* "Vezi produse" is the last flex item, so it stays put while the body
	   above it scrolls - no stickiness needed. */
	#modalFiltre .btnFiltreFixed {
		flex: 0 0 auto;
		width: auto;
		margin: 12px 16px 16px;
		padding: 14px 20px;
		background: #0077be;
		border: 1px solid #0077be;
		/* .btn-alb-border sets color with !important, so this has to as
		   well or the label stays blue on blue and vanishes. */
		color: #fff !important;
		font-weight: 600;
	}
	#modalFiltre .btnFiltreFixed:hover {
		background: #005f97;
		border-color: #005f97;
		color: #fff !important;
	}

	/* Accordions instead of a scrollbar inside every group. The markup
	   already carries .expandFiltru headers, a plus icon and
	   .box_valori_filtru, and webis.js binds the toggle under 768 - but the
	   icon is d-inline-block-mobile and the collapsed state d-none-mobile,
	   so both only took effect at 480. */
	#modalFiltre .box_valori_filtru {
		display: none;
		max-height: none;
		overflow: visible;
	}
	#modalFiltre .expandFiltru {
		cursor: pointer;
	}
	#modalFiltre .expandFiltru .d-none.d-inline-block-mobile {
		display: inline-block !important;
	}
}

/* jQuery's slideToggle writes an inline display:block when it expands a
   group, which drops the display:grid the base rule relies on to put each
   value on its own row. Below 480 a label rule compensates; above it the
   values ran together inline. Same rule, applied in the modal. */
@media (max-width: 991.98px) {
	#modalFiltre .box_valori_filtru label {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-bottom: 6px;
		font-size: 14px;
		color: #444;
	}
}

/* ── Product photos must not distort ──────────────────────────────────────
   The base rule pairs height: 179px with aspect-ratio: 1/1, which keeps the
   image square. Below 768 another rule adds width: 100%, and once both axes
   are given the aspect-ratio is ignored - so a photo was squeezed into
   roughly 250x140 and came out stretched. object-fit keeps the proportions
   whatever box it is handed, at every width. */
.product-image img {
	object-fit: contain;
}

/* With the distortion gone, a 275px photo was rendering only 140px tall in a
   box nearly twice as wide. Give it back some height in the band where the
   card itself is wide. */
@media (max-width: 767.98px) {
	.product-image img {
		height: 170px;
	}
}

/* ── Room around the count / filter / sort row ────────────────────────────
   marginBottom20 leaves the controls sitting almost on top of the first row
   of cards, and worse once the row wraps onto two lines on narrow screens. */
.filtre-sortare {
	margin-bottom: 30px;
}
@media (max-width: 575.98px) {
	/* Stacked: the count is on its own line above the two controls. */
	.filtre-sortare > [class*="col-"]:not(:first-child) {
		margin-top: 10px;
	}
}

/* ── Page title and breadcrumbs ───────────────────────────────────────────
   The two columns are col-sm-6, so below 576 neither class is active. A
   Bootstrap row is a flex container, so instead of stacking they became
   content-sized items sitting side by side, squeezing each other until the
   breadcrumb broke across lines and lost its alignment with the title.
   Scoped to .header_categorie so all thirteen layouts that share this header
   are covered without editing each one. */
.header_categorie .row {
	align-items: center;
}
.header_categorie .breadcrumps {
	line-height: 1.6;
	overflow-wrap: break-word;
}
@media (max-width: 575.98px) {
	.header_categorie .row > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
		/* The row carries Bootstrap .text-center, which is !important, so
		   matching it is the only way to left-align once stacked. */
		text-align: left !important;
	}
	.header_categorie .breadcrumps {
		margin-top: 6px;
	}
}

/* ── Contact details ──────────────────────────────────────────────────────
   The four blocks were col-sm-3, so from 576 up each got a quarter of the
   row - about 137px - and the address does not fit in that. It rendered
   143px wide and pushed the whole page into a horizontal scroll. They now
   go two-up until md. Breaking long words as well, since an address or an
   email can always be longer than whatever column it lands in. */
.divContactBoxs a,
.divContactBoxs h6 {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Event titles are fixed at 85% of their card, so a long unbroken word - a
   venue or a hyphenated name - pushes past the padding rather than wrapping. */
.event-title {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ── Checkout: rows nested in a column with no padding ────────────────────
   .colWhiteFinalizare sets padding: 0, so the Bootstrap -15px margins on any
   row inside it have nothing to absorb them and the row grows 15px wider
   than its parent on each side. On a 360px screen that was enough to give
   the whole page a horizontal scroll. Zeroing the gutter on those rows keeps
   them inside, and the columns within still carry their own padding. */
.colWhiteFinalizare > .row,
.colWhiteFinalizare .boxFinalizare > .row {
	margin-left: 0;
	margin-right: 0;
}

/* ── Event cards ──────────────────────────────────────────────────────────
   The grid is three columns until the swiper takes over at 480, so between
   481 and 991 three cards shared the row - about 140px each - while the
   image stayed 250px tall with object-fit: cover. A landscape poster cropped
   to a narrow vertical strip, which is why the titles on them were
   unreadable. Fewer columns, and a shorter image, keeps the crop sane. */
@media (max-width: 991.98px) {
	.events-cards-div {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}
@media (max-width: 575.98px) {
	.events-cards-div {
		grid-template-columns: 1fr;
	}
}

/* The title box is fixed at 84px and clamps to three lines, but 20px of
   padding top and bottom leaves about 44px of it - two lines - so the third
   was sliced through the middle. Let the box follow the text instead, and
   centre the text in it rather than letting it sit against the top edge.
   Grid replaces the -webkit-box the clamp needed, so long titles now wrap in
   full instead of truncating - the box grows and the grid row keeps the
   cards level. */
.event-title {
	height: auto;
	min-height: 84px;
	display: grid;
	place-items: center;
}

/* "Vezi toate" sits beside the heading, which stops fitting once the heading
   wraps. Only the sections that carry that button are stacked; the ones with
   slider arrows keep them alongside the title. */
@media (max-width: 767.98px) {
	.section-title:has(.btn-brand) {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
	.section-title .btn-brand {
		align-self: stretch;
		text-align: center;
	}
}

/* A fixed 250px height fights the card width: wide cards crop the poster top
   and bottom, narrow ones crop it to a strip. Tying the box to the card
   width keeps the crop mild and even at every size. */
.event-image img {
	height: auto;
	aspect-ratio: 16 / 10;
}

/* ── Blog: search and categories above the articles below 992 ─────────────
   Same shape as the product pages - the narrow sidebar column stops making
   sense once it is a couple of hundred pixels wide, so it goes full width
   above the list, with the category list folded away so it does not fill
   the screen before a single article shows. */
.categorii-blog-icon {
	display: none;
}
@media (max-width: 991.98px) {
	/* .row.pgPostari is set to flex-wrap: nowrap !important, so full-width
	   columns were forced onto one line instead of stacking. */
	.row.pgPostari {
		flex-wrap: wrap !important;
	}
	.pgPostari .col20,
	.pgPostari .col80 {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
		padding-left: 15px;
	}
	.pgPostari .expandCategoriiBlog {
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
	}
	.categorii-blog-icon {
		display: block;
		font-size: 14px;
		color: #234463;
	}
	.categorii-blog-list {
		display: none;
	}
}

/* "Vezi toate" is absent from the mobile events block entirely - the desktop
   one carries it, and that block is hidden below 480. */
.btn-vezi-toate-mobil {
	display: block;
	width: 100%;
	margin-top: 20px;
	text-align: center;
}

/* .event carries margin-bottom: 70px, which is the gap between grid rows on
   the desktop listing. Inside the slider there is only ever one row, so it
   is just dead space under the card - and on the homepage it pushed "Vezi
   toate" well away from the slider it belongs to. */
.eventsSlider .event.swiper-slide {
	margin-bottom: 0;
}

/* ── Sumarul cosului ──────────────────────────────────────────────────────
   Era pozitionat cu top: 74px fix, deci se desprindea de buton de indata ce
   headerul isi schimba inaltimea, si avea width: 100vw cu un right negativ,
   ceea ce il scotea din ecran pe telefon. Se deschidea cu slideToggle("slow"),
   de unde si senzatia ca apare greu. Acum se ancoreaza de buton, iar pe ecran
   mic sta fixat sub el, la o pozitie calculata din buton, nu ghicita. */
.hover-cos #sumar-cos {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	left: auto;
	width: 360px;
	max-width: calc(100vw - 24px);
	padding: 6px;
	background: #fff;
	border: 1px solid #eceff3;
	border-radius: 16px;
	box-shadow: 0 14px 34px -10px rgba(16, 33, 60, 0.22),
		0 2px 6px rgba(16, 33, 60, 0.06);
	z-index: 1100;

	display: block;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px) scale(0.985);
	transform-origin: top right;
	transition: opacity 0.16s ease, transform 0.16s ease,
		visibility 0s linear 0.16s;
}
.hover-cos #sumar-cos.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
}

/* Varful care leaga panoul de buton. */
.hover-cos #sumar-cos::before {
	content: "";
	position: absolute;
	top: -7px;
	right: 26px;
	width: 12px;
	height: 12px;
	background: #fff;
	border-left: 1px solid #eceff3;
	border-top: 1px solid #eceff3;
	border-radius: 3px 0 0 0;
	transform: rotate(45deg);
}

#sumar-cos .produse_sumar_cos {
	max-height: 300px;
	padding: 2px;
}
#sumar-cos .rand_prod_cos {
	display: block;
	padding: 9px 8px;
	border-radius: 10px;
	text-decoration: none;
	transition: background 0.12s ease;
}
#sumar-cos .rand_prod_cos:hover {
	background: #f4f8fc;
}
#sumar-cos .rand_prod_cos img {
	border-radius: 8px;
	object-fit: contain;
}
#sumar-cos .nume_prod_cos {
	font-size: 13px;
	line-height: 1.35;
}
#sumar-cos .nr_prod_cos_sumar {
	border-top: 1px solid #eef1f5;
	border-bottom: 0;
	padding: 12px 10px 10px;
	font-size: 14px;
	color: #234463;
}
#sumar-cos .btnVeziCos {
	padding: 2px 8px 8px;
}
#sumar-cos .btn-mov {
	border-radius: 10px;
	padding: 11px 14px;
	font-weight: 600;
}
#sumar-cos .faraProdCos {
	padding: 22px 16px;
	text-align: center;
	color: #6b7a8d;
	font-size: 14px;
}

@media (max-width: 767.98px) {
	.hover-cos #sumar-cos {
		position: fixed;
		/* pus de webis.js din marginea de jos a butonului */
		top: var(--cart-top, 76px);
		left: 12px;
		right: 12px;
		width: auto;
		max-width: none;
		transform-origin: top center;
	}
	/* Varful ramane, dar se aseaza sub buton, nu sub coltul panoului. */
	.hover-cos #sumar-cos::before {
		right: auto;
		left: var(--cart-caret, calc(100% - 32px));
		transform: translateX(-50%) rotate(45deg);
	}
}

/* ── Cosul meu ────────────────────────────────────────────────────────────
   Aceeasi limba vizuala ca panoul din header: card alb, colt rotunjit, o
   linie subtire si o umbra discreta. Butoanele de cantitate raman cum erau. */
.produse_cos .rand_prod_cos {
	border: 1px solid #eceff3;
	border-radius: 16px;
	padding: 18px;
	margin-bottom: 14px;
	min-height: 0;
	box-shadow: 0 2px 10px -4px rgba(16, 33, 60, 0.1);
	transition: box-shadow 0.16s ease, border-color 0.16s ease;
}
.produse_cos .rand_prod_cos:hover {
	border-color: #dbe3ec;
	box-shadow: 0 10px 26px -12px rgba(16, 33, 60, 0.2);
}
.produse_cos .rand_prod_cos img {
	border-radius: 10px;
	object-fit: contain;
}
.produse_cos .nume_prod_cos {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: #234463;
}
.subtotalCosTop {
	font-size: 14px;
	color: #6b7a8d;
}
.subtotalCosTop .pret_final {
	color: #234463;
	font-size: 17px;
}

/* Favorite / Sterge: pana acum doua texte lipite; acum tinte de apasat. */
.ultima_coloana_cos {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
	margin-top: 12px;
}
.produse_cos .rand_prod_cos .spanFavorite,
.rand_prod_cos .sterge_din_cos,
.rand_prod_cos .sterge_din_favorite {
	margin-right: 0;
	padding: 6px 10px;
	border-radius: 8px;
	color: #6b7a8d;
	transition: background 0.12s ease, color 0.12s ease;
}
.produse_cos .rand_prod_cos .spanFavorite:hover,
.rand_prod_cos .sterge_din_favorite:hover {
	background: #f4f8fc;
	color: #0077be;
}
.rand_prod_cos .sterge_din_cos:hover {
	background: #fdf1f2;
	color: #d64550;
}

.total_comanda .sumar_comanda {
	border: 1px solid #eceff3;
	border-radius: 16px;
	padding: 22px;
	box-shadow: 0 10px 30px -14px rgba(16, 33, 60, 0.22);
}
.sumar_comanda h3 {
	font-size: 18px;
	font-weight: 600;
	color: #234463;
	margin-bottom: 14px;
}
.sumar_comanda table {
	margin-bottom: 4px;
}
.sumar_comanda .btn-albastru,
.sumar_comanda .btn-gri {
	border-radius: 10px;
	font-weight: 600;
}

@media (max-width: 575.98px) {
	.ultima_coloana_cos {
		justify-content: flex-start;
	}
	.produse_cos .rand_prod_cos {
		padding: 14px;
	}
}

/* ── Cosul meu: alinierea celor doua carduri ──────────────────────────────
   Cardul de produs pornea de la 20px iar sumarul de la 5px, pentru ca
   randurile din jurul lor poarta marginile negative Bootstrap, absorbite in
   locuri diferite. Iar randul cu butoanele, aflat in interiorul sumarului,
   isi scotea marginile de 15px prin padding-ul de 22px al cardului, asa ca
   butoanele ieseau in afara marginii rotunjite. */
.produse_cos > .row,
.total_comanda > .row,
.sumar_comanda .row {
	margin-left: 0;
	margin-right: 0;
}

@media (max-width: 767.98px) {
	/* Stivuit, totul se citeste de la aceeasi margine din stanga; pana acum
	   pretul unitar era la stanga iar sub-totalul la dreapta. */
	.produse_cos .rand_prod_cos .subtotal,
	.produse_cos .rand_prod_cos .subtotalCosTop,
	.produse_cos .rand_prod_cos .ultima_coloana_cos {
		text-align: left !important;
	}
	.produse_cos .rand_prod_cos .ultima_coloana_cos {
		justify-content: flex-start;
	}
	.sumar_comanda {
		text-align: left !important;
	}
	.sumar_comanda .btn-gri,
	.sumar_comanda .btn-albastru {
		margin-top: 10px;
	}
}

/* Butonul de inchidere al panoului. Se pune peste continut, in coltul din
   dreapta sus, si nu impinge randurile. */
#sumar-cos .cart-close {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	width: 30px;
	height: 30px;
	padding: 0;
	line-height: 1;
	font-size: 22px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #8b98a8;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}
#sumar-cos .cart-close:hover {
	background: #f0f4f8;
	color: #234463;
}
/* Loc pentru el, ca sa nu stea peste primul produs. */
#sumar-cos .produse_sumar_cos {
	padding-top: 26px;
}

@media (max-width: 767.98px) {
	/* Cele doua coloane isi anulau paddingul pe parti diferite - una la
	   stanga, alta la dreapta - asa ca butoanele ieseau decalate cu 15px
	   unul fata de celalalt. */
	.sumar_comanda .row > [class*="col-"] {
		padding-left: 0;
		padding-right: 0;
	}
}

/* .ultima_coloana_cos incepe cu un <hr> care pe telefon devine vizibil.
   Odata ce containerul e flex, linia aceea devine si ea un element pe rand
   si impinge actiunile spre dreapta - de unde parea ca alinierea nu se
   aplica. Ii dam rand propriu. */
.ultima_coloana_cos {
	flex-wrap: wrap;
}
.ultima_coloana_cos .separator {
	flex: 0 0 100%;
	width: 100%;
	margin: 6px 0 10px;
}

/* ── Cosul meu: cardul de produs sub 992 ──────────────────────────────────
   Coloanele sunt 6 | 3 | 3, care sub 992 devin 12 | 6 | 6: numele ocupa un
   rand intreg, iar pretul si sub-totalul se aseaza unul langa altul sub el,
   fiecare aliniat altfel. De aici impresia de continut imprastiat. Sub 992
   fiecare bloc primeste randul lui si toate pornesc din aceeasi margine. */
@media (max-width: 991.98px) {
	.produse_cos .rand_prod_cos > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.produse_cos .rand_prod_cos > [class*="col-"] + [class*="col-"] {
		margin-top: 12px;
	}
	.produse_cos .rand_prod_cos .subtotal,
	.produse_cos .rand_prod_cos .subtotalCosTop,
	.produse_cos .rand_prod_cos .ultima_coloana_cos {
		text-align: left !important;
	}
	.produse_cos .rand_prod_cos .ultima_coloana_cos {
		justify-content: flex-start;
	}
	/* Cantitatea are nevoie de aer fata de pretul de deasupra. */
	.produse_cos .rand_prod_cos .box_cantitate_cos {
		margin-top: 8px;
	}
}

/* Linia de sub "Total comanda" nu despartea nimic - suma de sub ea face
   parte din acelasi bloc. Separatorul are sens inaintea butoanelor. */
.sumar_comanda .row {
	border-top: 1px solid #eef1f5;
	margin-top: 16px;
	padding-top: 16px;
}

/* Miniatura are 50px dar coloana ei e col-4 - o treime din card - asa ca
   numele pornea mult prea departe de imagine. Coloana se stramteaza la cat
   ii trebuie, iar numele ocupa restul. */
@media (max-width: 991.98px) {
	.produse_cos .rand_prod_cos .row > [class*="col-"]:first-child {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}
	.produse_cos .rand_prod_cos .row > [class*="col-"]:last-child {
		flex: 1 1 0;
		max-width: none;
	}
}

/* ── Cosul meu: cat de jos se stivuieste, si butoanele ────────────────────
   Stivuiam blocurile cardului sub 992, dar intre 768 si 991 randul are inca
   vreo 700px: continutul se aduna intr-o treime din stanga si restul
   cardului ramanea gol. Randul ramane intreg pana la 768 si abia sub atat se
   stivuieste, unde chiar nu mai incape. */
@media (min-width: 768px) and (max-width: 991.98px) {
	.produse_cos .rand_prod_cos > [class*="col-"] {
		flex: 0 0 25%;
		max-width: 25%;
	}
	.produse_cos .rand_prod_cos > [class*="col-"]:first-child {
		flex: 0 0 50%;
		max-width: 50%;
	}
	.produse_cos .rand_prod_cos > [class*="col-"] + [class*="col-"] {
		margin-top: 0;
	}
	.produse_cos .rand_prod_cos .subtotal,
	.produse_cos .rand_prod_cos .subtotalCosTop,
	.produse_cos .rand_prod_cos .ultima_coloana_cos {
		text-align: right !important;
	}
	.produse_cos .rand_prod_cos .ultima_coloana_cos {
		justify-content: flex-end;
	}
}

/* Butoanele: lipite unul de altul pentru ca le anulasem paddingul pe ambele
   parti, iar la latimi mici textul se rupea in doua randuri, cu sageata
   ramasa singura. Sub 768 stau unul sub altul, pe toata latimea, deci
   textul incape intreg; peste, au un spatiu intre ele. */
@media (max-width: 767.98px) {
	.sumar_comanda .row > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.sumar_comanda .row > [class*="col-"] + [class*="col-"] {
		margin-top: 10px;
	}
	.sumar_comanda .btn-gri,
	.sumar_comanda .btn-albastru {
		margin-top: 0;
	}
}
@media (min-width: 768px) {
	.sumar_comanda .row > [class*="col-"]:first-child {
		padding-right: 7px;
	}
	.sumar_comanda .row > [class*="col-"]:last-child {
		padding-left: 7px;
	}
}

/* Sumarul e col-md-8 cu o coloana goala langa el, deci intre 768 si 991
   ocupa doua treimi din rand: langa el ramane loc alb, iar butoanele impart
   ce mai ramane si textul lor se rupea in doua randuri. Sub 992 cardul ia
   toata latimea - dispare si golul, si ruperea. */
@media (max-width: 991.98px) {
	.total_comanda .row > .col-md-4 {
		display: none;
	}
	.total_comanda .sumar_comanda {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* Intre 576 si 767 randul are inca vreo 700px, deci stivuirea completa lasa
   jumatate de card gol. Numele ia randul intreg, iar pretul si sub-totalul
   se impart pe doua coloane sub el, fiecare ancorat la marginea lui - ca pe
   desktop, doar pe doua randuri. Stivuirea completa ramane sub 576. */
@media (min-width: 576px) and (max-width: 767.98px) {
	.produse_cos .rand_prod_cos > [class*="col-"] {
		flex: 0 0 50%;
		max-width: 50%;
	}
	.produse_cos .rand_prod_cos > [class*="col-"]:first-child {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.produse_cos .rand_prod_cos > [class*="col-"]:first-child + [class*="col-"] {
		margin-top: 14px;
	}
	.produse_cos .rand_prod_cos > [class*="col-"]:last-child {
		margin-top: 14px;
	}
	.produse_cos .rand_prod_cos .subtotal,
	.produse_cos .rand_prod_cos .subtotalCosTop,
	.produse_cos .rand_prod_cos .ultima_coloana_cos {
		text-align: right !important;
	}
	.produse_cos .rand_prod_cos .ultima_coloana_cos {
		justify-content: flex-end;
	}
}

/* ── Cosul meu sub 576: ritmul pe verticala ───────────────────────────────
   Stivuit, totul statea unul in altul: pretul lipit de poza, cantitatea de
   pret, sub-totalul de cantitate. Aceleasi blocuri, doar cu aer intre ele. */
@media (max-width: 575.98px) {
	.produse_cos .rand_prod_cos {
		padding: 16px;
	}
	.produse_cos .rand_prod_cos > [class*="col-"] + [class*="col-"] {
		margin-top: 16px;
	}
	.produse_cos .rand_prod_cos .box_cantitate_cos {
		margin-top: 10px;
	}
	.produse_cos .rand_prod_cos .subtotalCosTop {
		margin-top: 14px;
	}
	.ultima_coloana_cos .separator {
		margin: 14px 0 12px;
	}
	.ultima_coloana_cos {
		gap: 4px 10px;
	}
	/* Poza si numele pe aceeasi linie, centrate intre ele. */
	.produse_cos .rand_prod_cos .row > [class*="col-"] {
		display: flex;
		align-items: center;
	}
}


/* Stivuit, pretul si sub-totalul curgeau unul in altul. O linie deasupra
   sub-totalului desparte produsul de bani. Cea dinaintea actiunilor exista
   deja, dar numai sub 480 - o aducem si ea pana la 576, ca sa fie aceleasi
   doua linii pe toata zona stivuita, nu doua intr-un loc si una in altul. */
@media (max-width: 575.98px) {
	.produse_cos .rand_prod_cos > .subtotal {
		border-top: 1px solid #eef1f5;
		padding-top: 16px;
	}
	.produse_cos .rand_prod_cos .subtotalCosTop {
		margin-top: 0;
	}
	.ultima_coloana_cos .separator {
		display: block !important;
	}
}

/* ── Distantele dintre blocurile cardului ─────────────────────────────────
   Coloanele au clasa .my-auto, adica margin-top: auto !important. Toate
   regulile de margin-top pe care le pusesem mai sus erau, prin urmare,
   ignorate: spatiul care se vedea venea doar de la cutia de cantitate si de
   la sub-total. De aici si linia lipita de cantitate, si numele lipit de
   pretul unitar. */
@media (max-width: 991.98px) {
	.produse_cos .rand_prod_cos > [class*="col-"] + [class*="col-"] {
		margin-top: 18px !important;
	}
}
@media (min-width: 768px) and (max-width: 991.98px) {
	.produse_cos .rand_prod_cos > [class*="col-"] + [class*="col-"] {
		margin-top: 0 !important;
	}
}
@media (min-width: 576px) and (max-width: 767.98px) {
	.produse_cos .rand_prod_cos > [class*="col-"]:first-child + [class*="col-"],
	.produse_cos .rand_prod_cos > [class*="col-"]:last-child {
		margin-top: 16px !important;
	}
}
@media (max-width: 575.98px) {
	/* Linia de deasupra sub-totalului are nevoie de aer peste ea, nu doar
	   sub ea. */
	.produse_cos .rand_prod_cos > .subtotal {
		margin-top: 20px !important;
	}
}

/* ── Finalizare comanda ───────────────────────────────────────────────────
   Cardul statea pe "offset-sm-3 col-sm-6", adica jumatate din latime de la
   576px in sus. Intre 576 si 991 asta insemna un card de 274px pe un ecran
   de 593px, cu campuri de 82px si cele trei pictograme de pas suprapuse.
   Acum cardul ocupa toata latimea pana la md si se stramteaza abia cand are
   de unde. Restul e aceeasi limba vizuala ca la cos si la formularul de
   contact: card alb rotunjit, campuri gri fara chenar, accent albastru. */
.checkout-col {
	--pad: 32px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 767.98px) {
	.checkout-col {
		--pad: 20px;
	}
}
@media (max-width: 575.98px) {
	.checkout-col {
		--pad: 16px;
	}
}

/* ── Pasii comenzii ───────────────────────────────────────────────────────
   Erau trei coloane "float: left" de 33.3% cu pictograme fixe de 100px, deci
   se calcau reciproc pe coloana ingusta. Devin un rand flex cu cerc care
   scade odata cu ecranul, iar linia dintre ei se traseaza intre centre. */
.steps_comanda {
	display: flex;
	align-items: center;
	margin: 6px 0 30px;
	padding: 0;
	overflow: visible;
	color: #b6c2cf;
}
.steps_comanda li {
	flex: 1 1 0;
	width: auto;
	float: none;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	min-width: 0;
}
.steps_comanda li:after {
	display: none;
}
.steps_comanda li + li:before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 50%;
	margin-top: -1px;
	height: 2px;
	left: -50%;
	right: 50%;
	background: #e4eaf0;
}
.steps_comanda li.active:before {
	background: #0077be;
}
.steps_comanda li i {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	height: 84px;
	width: 84px;
	line-height: 80px;
	border-radius: 50%;
	font-size: 30px;
	background: #fff;
	border: 2px solid #e9eef4;
	color: #b6c2cf;
	box-shadow: none;
	transition: border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.steps_comanda li.active i {
	border-color: #0077be;
	color: #0077be;
	box-shadow: 0 6px 18px -8px rgba(0, 119, 190, 0.55);
}
@media (max-width: 991.98px) {
	.steps_comanda li i {
		height: 72px;
		width: 72px;
		line-height: 68px;
		font-size: 26px;
	}
}
@media (max-width: 575.98px) {
	.steps_comanda {
		margin-bottom: 22px;
	}
	.steps_comanda li i {
		height: 56px;
		width: 56px;
		line-height: 52px;
		font-size: 20px;
	}
}

/* ── Cardul ───────────────────────────────────────────────────────────────
   Randurile Bootstrap dinauntru isi pastreaza gutter-ul de 15px, asa ca
   padding-ul cardului il scade ca sa iasa exact --pad pe ambele parti. */
.colWhiteFinalizare {
	border: 1px solid #eceff3;
	border-radius: 16px;
	box-shadow: 0 2px 14px -6px rgba(16, 33, 60, 0.16);
	overflow: hidden;
}
.colWhiteFinalizare .row {
	margin-left: 0;
	margin-right: 0;
	row-gap: 14px;
}
.colWhiteFinalizare h4 {
	padding: 22px var(--pad) 0;
	font-size: 18px;
	font-weight: 600;
	color: #234463;
	line-height: 1.35;
}
.colWhiteFinalizare ul.nav-tabs {
	padding: 0 var(--pad);
}
.colWhiteFinalizare .boxFinalizare {
	padding: 16px calc(var(--pad) - 15px) 24px;
}
.colWhiteFinalizare.paddding20 > .row > [class*="col-"] {
	padding: var(--pad);
}
.butonPlaseaza {
	padding: 0 calc(var(--pad) - 15px) 28px;
}

/* ── Taburile persoana fizica / juridica ──────────────────────────────────
   Aveau "padding: 2px 50px" intr-un li de 50%, deci se revarsau. */
.tabsFinalizare .nav-tabs {
	border-bottom: none;
	gap: 10px;
	flex-wrap: nowrap;
}
.tabsFinalizare li {
	width: 50%;
	min-width: 0;
}
.tabsFinalizare .nav-link {
	padding: 11px 10px;
	text-align: center;
	border: 1px solid transparent;
	white-space: normal;
	font-size: 15px;
}
.tabsFinalizare .nav-link:hover:not(.active) {
	background: #e3e7eb;
}
@media (max-width: 575.98px) {
	.tabsFinalizare .nav-link {
		font-size: 14px;
		padding: 10px 6px;
	}
}

/* ── Alegerea cont / fara cont ────────────────────────────────────────────
   "width: calc(50% - 10px)" taia eticheta pe orice ecran ingust. */
.boxBtnRadio {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.boxFinalizare.boxBtnRadio {
	padding-left: var(--pad);
	padding-right: var(--pad);
}
.boxBtnRadio .boxRadio {
	display: block;
	width: auto;
	flex: 1 1 210px;
	margin: 0 !important;
	padding: 13px 16px;
	border: 1px solid #dfe6ee;
	border-radius: 12px;
	transition: border-color 0.16s ease, background 0.16s ease;
}
.boxBtnRadio .boxRadio:hover,
.boxBtnRadio .boxRadio:focus-within {
	border-color: #0077be;
	background: #f4f9fd;
}
/* Etichetele de livrare sunt mult mai lungi decat "Intra in cont", asa ca
   au nevoie de mai multa latime inainte sa stea una langa alta - altfel
   incap doua coloane, dar textul din fiecare se rupe pe doua randuri. */
.boxLivrare .boxBtnRadio .boxRadio {
	flex-basis: 280px;
}
.boxFinalizare .boxRadio label {
	margin: 0;
	width: 100%;
	cursor: pointer;
	color: #234463;
	font-weight: 500;
}
.boxFinalizare input[type="radio"],
.boxFinalizare input[type="checkbox"] {
	accent-color: #0077be;
	margin-right: 7px;
	vertical-align: middle;
}

/* ── Campurile ────────────────────────────────────────────────────────────
   Aceleasi campuri ca pe pagina de contact: gri, fara chenar, inel albastru
   la focus. Textul dinaintea inputului tine loc de eticheta. */
.colWhiteFinalizare .boxFinalizare .row > [class*="col-"] {
	font-size: 13px;
	font-weight: 500;
	color: #5b6b7d;
}
.colWhiteFinalizare .form-control {
	margin-top: 6px;
	height: auto;
	background: #f3f3f3;
	border: 1px solid transparent;
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 14px;
	color: #234463;
	transition: background 0.16s ease, border-color 0.16s ease,
		box-shadow 0.16s ease;
}
.colWhiteFinalizare select.form-control {
	padding-right: 8px;
}
.colWhiteFinalizare .form-control:focus {
	background: #fff;
	border-color: #0077be;
	box-shadow: 0 0 0 3px rgba(0, 119, 190, 0.15);
}
.colWhiteFinalizare textarea.form-control {
	min-height: 96px;
	resize: vertical;
}

/* ── Adrese salvate ───────────────────────────────────────────────────────
   Pentru utilizatorii logati: fiecare adresa devine un card de ales. */
.boxAdresaExistenta {
	border: 1px solid #dfe6ee;
	border-radius: 12px;
	padding: 12px 14px;
	margin-bottom: 10px;
}
.boxAdresaExistenta:hover,
.boxAdresaExistenta:focus-within {
	border-color: #0077be;
	background: #f4f9fd;
}
.boxAdresaExistenta label {
	margin: 0;
	cursor: pointer;
	color: #234463;
}
.boxAdresaExistenta span {
	color: #6b7a8d;
}

/* ── Metodele de livrare si de plata ─────────────────────────────────────*/
.metode .boxRadio {
	border: 1px solid #dfe6ee;
	border-radius: 12px;
	padding: 14px 16px;
	transition: border-color 0.16s ease, background 0.16s ease;
}
.metode .boxRadio:hover,
.metode .boxRadio:focus-within {
	border-color: #0077be;
	background: #f4f9fd;
}
.metode .boxRadio.row > [class*="col-"] {
	padding-left: 0;
	padding-right: 0;
}
.metode .boxRadio .nume_metoda {
	color: #234463;
	font-size: 15px;
}
.metode .boxRadio span {
	color: #6b7a8d;
	font-weight: 400;
	line-height: 1.45;
	margin-top: 2px;
}
.colWhiteFinalizare h4 .conexiune_securizata {
	float: none;
	display: inline-block;
	margin-left: 8px;
	padding: 3px 8px;
	border-radius: 6px;
	vertical-align: middle;
	white-space: nowrap;
}

/* ── Butoane ──────────────────────────────────────────────────────────────
   "Pasul urmator" statea intr-un col-lg-4 mai ingust decat el insusi si ii
   iesea din coloana. */
.btnPasUrmator .btn-mov,
.butonPlaseaza .btn-mov {
	min-width: 190px;
	border-radius: 10px;
	padding: 12px 26px;
	font-weight: 600;
}
.colInputsCheck {
	line-height: 1.7;
	color: #5b6b7d;
}
.colInputsCheck input[type="checkbox"] {
	accent-color: #0077be;
	margin-right: 8px;
	vertical-align: middle;
}
@media (max-width: 575.98px) {
	.btnPasUrmator .btn-mov {
		width: 100%;
		min-width: 0;
	}
}

/* ── Confirmarea comenzii ─────────────────────────────────────────────────*/
.boxComandaPlasata {
	border-radius: 16px;
	padding: 32px var(--pad);
}
.comandaPlasataFaraStoc i {
	color: #0077be;
}

/* ── Marginea de la ecran sub 480px ───────────────────────────────────────
   Cardul e chiar coloana din grid, iar .colWhiteFinalizare are padding 0,
   deci muchia lui cade exact pe muchia randului. Sub 480px .container-fluid
   isi pierde cei 15px, .container pune 20, iar randul trage inapoi -15: ies
   5px pana la marginea ecranului. Restul paginii are 15, deci ii dam si aici
   15, prin latime plus marginile automate care il si centreaza. */
@media (max-width: 480px) {
	.checkout-col {
		max-width: calc(100% - 20px);
	}
}


/* ── Lista de favorite ────────────────────────────────────────────────────
   Pagina imprumuta pana acum clasele cosului, dar isi punea coloanele plat
   in rand, nu imbricate ca la cos, asa ca regulile cosului cadeau pe alte
   elemente decat cele pentru care fusesera scrise. De aici alinierile care
   nu se legau: poza, numele, pretul si actiunile porneau fiecare din alta
   margine. Cardul e acum scris de la zero, cu grid, ca panoul din header:
   trei zone pe desktop - poza, text, actiuni - si doua randuri pe telefon.
   Nu mai are nimic comun cu cosul, deci nici una din pagini nu o mai poate
   strica pe cealalta. */
.produse_favorite {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.card_favorit {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "poza detalii actiuni";
	align-items: center;
	gap: 0 18px;
	padding: 18px;
	background: #fff;
	border: 1px solid #eceff3;
	border-radius: 16px;
	box-shadow: 0 2px 10px -4px rgba(16, 33, 60, 0.1);
	transition: box-shadow 0.16s ease, border-color 0.16s ease;
}
.card_favorit:hover {
	border-color: #dbe3ec;
	box-shadow: 0 10px 26px -12px rgba(16, 33, 60, 0.2);
}

.card_favorit .fav_poza {
	grid-area: poza;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
}
.card_favorit .fav_poza img {
	max-width: 100%;
	max-height: 72px;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 10px;
}

.card_favorit .fav_detalii {
	grid-area: detalii;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.card_favorit .fav_nume {
	display: block;
	text-decoration: none;
}
.card_favorit .fav_titlu {
	display: block;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: #234463;
	overflow-wrap: break-word;
}
.card_favorit .fav_nume:hover .fav_titlu {
	color: #0077be;
}
.card_favorit .fav_variatie {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	color: #6b7a8d;
}
.card_favorit .fav_pret {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 8px;
}
.card_favorit .pret_final {
	margin-bottom: 0;
	font-size: 16px;
	font-weight: 600;
	color: #234463;
}
.card_favorit .pret_intreg {
	margin-bottom: 0;
	font-size: 12px;
	font-weight: 600;
	color: #93a1b0;
	text-decoration: line-through;
}

.card_favorit .fav_actiuni {
	grid-area: actiuni;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}
.card_favorit .fav_btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	padding: 8px 12px;
	border-radius: 9px;
	font-size: 14px;
	color: #6b7a8d;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}
.card_favorit .fav_btn:hover {
	background: #f4f8fc;
	color: #0077be;
}
.card_favorit .fav_btn_sterge:hover {
	background: #fdf1f2;
	color: #d64550;
}

/* Sub 768 actiunile trec pe randul lor, sub o linie care desparte produsul
   de ce poti face cu el. Poza si textul raman pe aceeasi linie. */
@media (max-width: 767.98px) {
	.card_favorit {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"poza detalii"
			"actiuni actiuni";
		row-gap: 14px;
	}
	.card_favorit .fav_actiuni {
		justify-content: flex-start;
		border-top: 1px solid #eef1f5;
		padding-top: 12px;
	}
	.card_favorit .fav_btn {
		padding: 8px 10px;
	}
}

@media (max-width: 479.98px) {
	.card_favorit {
		padding: 14px;
		gap: 0 14px;
	}
	.card_favorit .fav_poza {
		width: 60px;
		height: 60px;
	}
	.card_favorit .fav_poza img {
		max-height: 60px;
	}
}

/* ── Cosul meu: cardul de produs ──────────────────────────────────────────
   Randul era o grila Bootstrap 6/3/3 cu inca un rand imbricat inauntru, si
   fiecare ajustare a trebuit sa se lupte cu ce venea de la .row si de la
   coloane: marginile negative, .my-auto care e margin-top: auto !important,
   separatorul care devenea element flex. Cardul e acum scris de la zero, ca
   cel de la favorite: o grila cu zone numite, care isi schimba asezarea la
   fiecare prag fara sa mai depinda de nimic din afara. Butoanele + / - raman
   exact cum erau. */
.lista_cos {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.card_cos {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	grid-template-areas: "poza detalii pret total";
	align-items: center;
	gap: 0 20px;
	padding: 18px;
	background: #fff;
	border: 1px solid #eceff3;
	border-radius: 16px;
	box-shadow: 0 2px 10px -4px rgba(16, 33, 60, 0.1);
	transition: box-shadow 0.16s ease, border-color 0.16s ease;
}
.card_cos:hover {
	border-color: #dbe3ec;
	box-shadow: 0 10px 26px -12px rgba(16, 33, 60, 0.2);
}

.card_cos .cos_poza {
	grid-area: poza;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
}
.card_cos .cos_poza img {
	max-width: 100%;
	max-height: 72px;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 10px;
}

.card_cos .cos_detalii {
	grid-area: detalii;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.card_cos .cos_nume {
	display: block;
	text-decoration: none;
}
.card_cos .cos_titlu {
	display: block;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: #234463;
	overflow-wrap: break-word;
}
.card_cos .cos_nume:hover .cos_titlu {
	color: #0077be;
}
.card_cos .cos_variatie {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	color: #6b7a8d;
}
.card_cos .cos_mesaj .alert {
	margin: 4px 0 0;
	padding: 8px 12px;
	border-radius: 10px;
	font-size: 13px;
}

.card_cos .cos_pret {
	grid-area: pret;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
.card_cos .cos_total {
	grid-area: total;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	text-align: right;
}
.card_cos .cos_eticheta {
	font-size: 12px;
	line-height: 1;
	color: #6b7a8d;
}
.card_cos .cos_valori {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 8px;
}
.card_cos .cos_total .cos_valori {
	justify-content: flex-end;
}
.card_cos .pret_final {
	margin-bottom: 0;
	font-size: 16px;
	font-weight: 600;
	color: #234463;
}
.card_cos .pret_intreg {
	margin-bottom: 0;
	font-size: 12px;
	font-weight: 600;
	color: #93a1b0;
	text-decoration: line-through;
}

.card_cos .cos_actiuni {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 4px 6px;
}
.card_cos .cos_btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	padding: 7px 10px;
	border-radius: 9px;
	font-size: 13px;
	color: #6b7a8d;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}
.card_cos .cos_btn:hover {
	background: #f4f8fc;
	color: #0077be;
}
.card_cos .cos_btn_sterge:hover {
	background: #fdf1f2;
	color: #d64550;
}

/* Sub 992 nu mai incap patru zone pe o linie: produsul ramane sus, iar
   pretul si sub-totalul impart randul de dedesubt. */
@media (max-width: 991.98px) {
	/* Poza si pretul ar sta in aceeasi coloana, iar coloana s-ar face cat
	   cel mai lat dintre ele - adica cat butoanele de cantitate - si numele
	   ar porni de la 174px in loc de 111. Asa ca pretul se intinde peste
	   primele doua coloane si lasa coloana pozei sa fie doar cat poza.
	   Spatiul dintre coloane trece in padding, ca liniile de deasupra celor
	   doua blocuri sa se atinga si sa arate ca una singura. */
	.card_cos {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"poza detalii detalii"
			"pret pret total";
		column-gap: 0;
		row-gap: 16px;
	}
	.card_cos .cos_detalii,
	.card_cos .cos_total {
		padding-left: 20px;
	}
	.card_cos .cos_pret,
	.card_cos .cos_total {
		border-top: 1px solid #eef1f5;
		padding-top: 16px;
		/* Centrate fiecare pe inaltimea lui, cele doua blocuri porneau de la
		   inaltimi diferite si liniile lor de sus ieseau decalate cu 9px, ca
		   o linie rupta la mijloc. Intinse pe tot randul, pornesc de sus. */
		align-self: stretch;
	}
}

/* Pe telefon fiecare bloc pe randul lui, cu cate o linie care desparte
   produsul de pretul unitar si pretul unitar de sub-total. */
@media (max-width: 575.98px) {
	.card_cos {
		padding: 16px;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"poza detalii"
			"pret pret"
			"total total";
		column-gap: 0;
	}
	.card_cos .cos_detalii {
		padding-left: 14px;
	}
	.card_cos .cos_total {
		padding-left: 0;
	}
	.card_cos .cos_poza {
		width: 60px;
		height: 60px;
	}
	.card_cos .cos_poza img {
		max-height: 60px;
	}
	.card_cos .cos_total {
		align-items: flex-start;
		text-align: left;
	}
	.card_cos .cos_total .cos_valori,
	.card_cos .cos_actiuni {
		justify-content: flex-start;
	}
}

/* ── Pagina de produs: cardul cu poze si cardul de cumparare ──────────────
   Cele doua carduri stateau pe 55% si 45% plus o margine de 20px, adica mai
   mult decat incape. Acum latimile scad din spatiul dintre ele si se impart
   pe trei praguri: pe ecran larg poza ia mai mult, pe tableta impart randul
   in doua, iar sub 768 fiecare ia tot randul.
   Tot aici: sub 480 exista o regula mai veche care punea containerul pe
   coloana. Impreuna cu align-items: flex-start, care pe coloana nu mai tine
   de aliniere verticala ci de latime, cardul de cumparare se stramta la cat
   ii cerea textul - 297px - si ramanea mai ingust decat cel cu poze. Randul
   ramane rand la orice latime, iar impartirea o face wrap-ul. */
.content_produs {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 20px;
}
.content_produs .left-part,
.content_produs .right-part {
	width: auto;
	margin-left: 0;
	min-width: 0;
}
@media (min-width: 1200px) {
	.content_produs .left-part {
		flex: 0 1 calc(57% - 10px);
	}
	.content_produs .right-part {
		flex: 1 1 calc(43% - 10px);
	}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	.content_produs .left-part {
		flex: 0 1 calc(55% - 10px);
	}
	.content_produs .right-part {
		flex: 1 1 calc(45% - 10px);
	}
}
@media (min-width: 768px) and (max-width: 991.98px) {
	.content_produs .left-part,
	.content_produs .right-part {
		flex: 1 1 calc(50% - 10px);
	}
}
@media (max-width: 767.98px) {
	.content_produs .left-part,
	.content_produs .right-part {
		flex: 1 1 100%;
	}
}

/* ── Poza principala ──────────────────────────────────────────────────────
   Nici xzoom.css, nici foaia noastra nu dadeau vreo dimensiune imaginii, iar
   ea statea intr-un chenar cu aspect-ratio 11/8 si overflow: hidden. Deci se
   afisa la marimea ei reala, 550x550, si i se taia tot ce depasea - 208px in
   dreapta si 302px in jos pe un ecran de 769. Pozele de produs sunt patrate,
   asa ca un chenar patrat plus object-fit: contain le incadreaza exact, fara
   benzi si fara sa strice socoteala lupei de la xzoom. */
.image-wrapper-xzoom5 {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}
.image-wrapper-xzoom5 img.xzoom5 {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	margin-bottom: 0;
	box-shadow: none;
}
/* Cand cardurile stau unul sub altul poza ar lua toata latimea si ar impinge
   pretul mult sub linia de jos a ecranului; pe langa asta o poza de 550px
   intinsa mai mult se si vede moale. */
@media (max-width: 767.98px) {
	.image-wrapper-xzoom5 {
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}
	.xzoom-thumbs {
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ── Miniaturile si sagetile ──────────────────────────────────────────────
   Sagetile trec la imaginea urmatoare, nu doar deruleaza banda - asta face
   carousel.js. Erau insa ascunse cu d-none pentru orice produs cu mai putin
   de sapte poze, si pozitionate absolut la top: -320%, adica undeva peste
   poza mare. Banda devine un rand cu sageata, miniaturi, sageata, asa ca
   pozitionarea se aseaza singura, la orice latime. */
.xzoom-thumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	margin-top: 14px;
}
.xzoom-thumbs .leftLst,
.xzoom-thumbs .rightLst {
	position: static;
	flex: 0 0 auto;
	top: auto;
	left: auto;
	right: auto;
	padding: 10px 12px;
	border-radius: 10px;
	background: #f4f6f9;
	color: #6b7a8d;
	font-size: 15px;
	line-height: 1;
}
.xzoom-thumbs .leftLst:hover,
.xzoom-thumbs .rightLst:hover {
	background: #e7edf4;
	color: #0077be;
}
.galerieImagini.MultiCarousel {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 0;
}
.galerieImagini .MultiCarousel-inner {
	padding-top: 0;
}

/* Randul Bootstrap din cardul de cumparare isi scotea marginile de -15px din
   padding-ul de 20px al cardului, asa ca textul pornea de la 5px. */
.right-part > .row {
	margin-left: 0;
	margin-right: 0;
}
.right-part > .row > .detalii-produs {
	padding-left: 0;
	padding-right: 0;
}

/* ── Cantitate si butonul de cumparare ────────────────────────────────────
   .box_cantitate, .colBtnCos si .flex-column-mobile nu aveau nicio regula in
   foaia de stil, deci butoanele - si + erau doar inline-block care se rupeau
   pe randuri cand nu incapeau. */
.right-part .product-price-buy-div {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
}
.right-part .box_cantitate {
	display: flex;
	flex: 0 0 auto;
	align-items: stretch;
}
.right-part .box_cantitate .value-button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	cursor: pointer;
	user-select: none;
}
.right-part .colBtnCos {
	flex: 1 1 210px;
	min-width: 0;
}
.right-part .btn_cos_produs {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	white-space: nowrap;
}
.right-part .btn_cos_produs .spanAdauga {
	white-space: nowrap;
}

/* Salveaza / Distribuie stateau centrate printr-un style pus in pagina. Pe
   ecran larg centrarea e in regula, dar cand cardul tine tot randul totul
   pleaca de la stanga, asa ca si ele. */
.right-part .produs-share-save {
	justify-content: center;
}
@media (max-width: 767.98px) {
	.right-part .produs-share-save {
		justify-content: flex-start;
	}
}

/* Codul de produs si starea stocului stateau mereu pe acelasi rand, oricat
   de ingust era cardul, pentru ca .flex-column-mobile nu exista. */
@media (max-width: 575.98px) {
	.flex-column-mobile {
		flex-direction: column;
	}
}

/* ── Ritmul textului din paginile de continut ─────────────────────────────
   .contentPagina e o coloana flex cu gap 30px, iar paragrafele isi pastreaza
   marginile lor de 16px: intre doua blocuri ieseau 62-66px, deci si titlul
   statea la fel de departe de textul lui ca de textul dinaintea lui. In
   schimb <li> nu sunt elemente flex, asa ca ramaneau pe line-height: 1em,
   mostenit de la body - randuri de 16px lipite unul de altul.
   Gap mai mic, marginile paragrafelor scoase, titlurile cu aer doar deasupra
   si listele cu ritm propriu. */
.contentPagina {
	gap: 18px;
}
.contentPagina > :first-child {
	margin-top: 0;
}
.contentPagina p {
	margin: 0;
	line-height: 1.75;
}
.contentPagina h2 {
	margin: 14px 0 0;
	line-height: 1.3;
}
.contentPagina h3 {
	margin: 10px 0 0;
	line-height: 1.35;
}
.contentPagina ul,
.contentPagina ol {
	margin: 0;
	padding-left: 22px;
}
.contentPagina li {
	margin-bottom: 10px;
	line-height: 1.7;
}
.contentPagina li:last-child {
	margin-bottom: 0;
}
.contentPagina li > ul,
.contentPagina li > ol {
	margin-top: 10px;
}

/* ── Nota scurta de pe pagina produsului ──────────────────────────────────
   desc_scurta_prod se completeaza din admin cu editorul de text, iar notele
   au fost scrise acolo ca titluri: un <h2> rosu, centrat, cat un sfert din
   card. Nota primeste un chenar al ei si o marime potrivita, indiferent ce
   eticheta a folosit cel care a scris-o; culoarea pusa din editor ramane. */
.right-part .detalii-produs .desc_prod {
	display: block;
	background: #f4f8fc;
	border: 1px solid #dfe6ee;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.55;
}
.right-part .detalii-produs .desc_prod h1,
.right-part .detalii-produs .desc_prod h2,
.right-part .detalii-produs .desc_prod h3,
.right-part .detalii-produs .desc_prod h4,
.right-part .detalii-produs .desc_prod h5,
.right-part .detalii-produs .desc_prod h6 {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
	margin: 0;
}
.right-part .detalii-produs .desc_prod p {
	margin: 0 0 8px;
}
.right-part .detalii-produs .desc_prod > :last-child {
	margin-bottom: 0;
}

/* Sagetile din dropdownurile simple - Producatori, Companie - unde fiecare
   intrare duce direct undeva si nu deschide alt nivel. Sageata sugera ca mai
   e ceva dedesubt. In mega-meniul de la Produse ea ramane, fiindca acolo chiar
   deschide coloana din dreapta; acela foloseste alt marcaj, un <svg> pus direct
   in legatura, deci nu e atins de regula asta. */
.main-navigation .subcategorii .sub-arrow {
	display: none;
}

/* Paginarea de pe blog.

   Listarile de produse merg pe scroll infinit si isi ascund bara din
   JavaScript, deci blogul e singurul loc din front unde ea chiar se vede.
   Bootstrap o randeaza aliniata la stanga si lipita de continut; aici o
   asezam pe centru, cu aer deasupra, si o aducem la culorile temei. */
.lista-articole .pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 36px 0 12px;
	padding-left: 0;
}

.lista-articole .pagination .page-link {
	min-width: 40px;
	padding: 8px 12px;
	border: 1px solid #e3e8ee;
	border-radius: 6px;
	color: #0077be;
	text-align: center;
	line-height: 1.2;
}

.lista-articole .pagination .page-link:hover {
	background-color: #f2f2f2;
	border-color: #cfd8e3;
	color: #0077be;
}

.lista-articole .pagination .page-link:focus {
	/* Bootstrap pune o umbra albastra lata care sare in ochi la click. */
	box-shadow: none;
}

.lista-articole .pagination .page-item.active .page-link {
	background-color: #0077be;
	border-color: #0077be;
	color: #fff;
}

.lista-articole .pagination .page-item.disabled .page-link {
	background-color: transparent;
	border-color: #eef1f5;
	color: #a9b4c0;
}