@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;500;600;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap');

:root{
    /* used in line multicolor effect */
    --effect1: #FDA98B;
    --effect2: #2192E0;
    --effect3: #FDCFAB;
    --effect4: #20D0D0;
    --effect5: #F9EBD8;
    --effect6: #51DAD0;

    /* fonts */
    --font-sans-serif:'Poppins', sans-serif;
    --font-serif:'PT Serif', serif;

    /* colors */
    --primary: #486AD2;
    --secondary: #AA5D00;
    --success: #28a745;
    --info: #00C8E8;
    --warning: #C1AA4D;
    --danger: #dc3545;
    --light: #F7F7F7;
    --dark: #1D1D35;
}

body {
    font-family: var(--font-sans-serif);
    background:var(--light);
    color:var(--dark);
    font-size:1rem;
}

.clear {clear:both;}

b,strong {
    font-weight:500;
}

.lines {
    display: block;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--effect3) 27.27273%,var(--effect1) 0,var(--effect1) 51.51515%,var(--effect5) 0,var(--effect5) 63.63636%,var(--effect2) 0,var(--effect2) 75.75758%,var(--effect6) 0);
}

.outer {
    width:90vw;
    margin:0px auto;
}

#header-mobile { display:none; }
#meniu-mobile { display:none; }

#header { background:white; }

#header .button {
    display:inline-block;
    color:var(--gray);
    line-height:1;
    margin-left:20px;
    font-size:0.9rem;
}

#header .button svg {
    width:20px;
    height:20px;
    margin-bottom:5px;
    margin-right:5px;
    stroke-width: 1.7px;
}

#header .button:hover {
    text-decoration:none;
    color:var(--dark);
}

#header .form-control {
    border-radius:2px;
}

.logo {
    width:200px;
}

#meniu {
    border-top:1px solid var(--light);
    border-bottom:1px solid var(--light);
    padding:8px 0;
    text-align:center;
    background:white;
}

#meniu a {
    display:inline-block;
    color:var(--dark);
    position:relative;
    z-index:0;
    margin-left:8px;
    margin-right:8px;
    font-size:0.95rem;
}

#meniu a:hover,#meniu a.active {
    color:var(--success);
}

#meniu a:hover:after,#meniu a.active:after {
    content: "";
    border-radius: 50vw;
    background-color: var(--light);
    position: absolute;
    left: -20px;
    top: -7px;
    bottom: -5px;
    right: -20px;
    z-index: -1;
    -ms-transform: scale(.9);
    transform: scale(.9);
    transition: transform .22s cubic-bezier(.22,.61,.36,1);
}

#submeniu {
    position:absolute;
    z-index:10;
    width:100%;
    display:none;
}

#submeniu .outer {
    width:80vw;
}

#submeniu .inner {
    border-top:1px solid var(--light);
    background:white;
    padding:1.5rem;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom:3px solid var(--success);
}

#submeniu .col:not(:last-child) {
    border-right: 1px solid var(--light);
}

#submeniu ul {
    margin:0px;
    padding:0px;
    list-style-type:none;
}

#submeniu ul li {
    font-weight:500;
    display:block;
    font-size:1rem;
}

#submeniu ul li ul {
    margin-bottom:0.8rem;
}

#submeniu ul li ul li {
    font-weight:normal;
    font-size:0.9rem;
}

#submeniu ul a {
    color:var(--dark);
    display:block;
    padding:4px 5px;
}

#submeniu ul a:hover {
    color:var(--success);
    background:var(--light);
    border-radius:5px;
}

#submeniu ul li ul li a {
    color:#615c65;
}

#submeniu ul li a.with-img {
    font-weight:normal;
    font-size:0.9rem;
    padding-top:2px;
    padding-bottom:2px;
    margin-bottom: 0.6rem;
}

#submeniu ul li a.with-img img {
    margin-right:0.6rem;
    width:40px;
    height:40px;
    object-fit: cover;
    border-radius:5px;
}

#submeniu ul li a.with-img:hover {
    text-decoration:none;
}

/* CONTENT */

#content {
    border-top:1px solid var(--light);
    padding-bottom:2rem;
}

.overlay {
    position: absolute;
    z-index: 9;
    background: rgba(0,0,0,.5);
    width: 100%;
    height: 100%;
    display: none;
}

#cover img {
    width:100%;
    height:350px;
    object-fit: cover;
}

.over-cover {
    background: white;
    margin-top: -7rem;
    position: relative;
    padding: 2rem;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
}

.block-text h1 {
    font-size:2rem;
    font-weight:400;
}

.block-text h1 span {
    color:var(--gray-dark);
}

.block-text h2 {
    font-size:1.4rem;
    font-weight:400;
}

.block-text h3 {
    font-size:1.2rem;
    font-weight:400;
}

.block-title {
    font-size:1.8rem;
    margin-bottom:2rem;
    font-weight:400;
}

.block-column {
    box-shadow: 0 3px 6px rgba(34,25,36,.2);
    border-radius:8px;
}
.block-column:hover {
    box-shadow: 0 3px 6px rgba(34,25,36,.5);
}

.block-column:hover a {
    text-decoration:underline;
}

.block-column img {
    border-top-left-radius:8px;
    border-top-right-radius:8px;
}

.list-categorii_carousel .block-column img {
    height:180px;
    width:100%;
    object-fit:cover;
}

.list-categorii_static .block-column img {
    width:100%;
    object-fit:cover;
}

.list-categorii_static.cols-2 .block-column  img { height:400px; }
.list-categorii_static.cols-3 .block-column  img { height:220px; }
.list-categorii_static.cols-4 .block-column  img { height:200px; }

.block-column h3 {
    display:block;
    text-align:center;
    padding-top:1.5rem;
    padding-bottom:1.5rem;
    font-size:1.6rem;
}

.block-column a {
    color:var(--success);
}

.block-carousel {
    position: relative;
}

.block-carousel .block-column h3 {
    padding-top:1.2rem;
    padding-bottom:1.2rem;
    font-size:1.4rem;
}

.custom-nav {
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
}

.owl-theme .owl-nav .owl-prev, .owl-theme .owl-nav .owl-next {
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    border-radius:50%;
    background: var(--white);
    border: 1px solid #eaeaea;
    z-index: 8;
    font-size: 1.3rem;
    line-height: 2rem;
    color: var(--dark);
    text-align:center;
}

.owl-theme .owl-nav [class*=owl-]:hover {
    border:1px solid var(--gray);
    color:var(--primary);
    background:white;
}

.owl-prev { left: -1.5rem; }
.owl-next { right: -1.5rem; }

.main-img .custom-nav { top: 45%; }
.main-img .owl-prev { left: 1rem; }
.main-img .owl-next { right: 1rem; }
.main-img .owl-nav .owl-prev, .main-img .owl-nav .owl-next {
    width:3rem;
    height:3rem;
    font-size: 1.5rem;
    line-height: 2.6rem;
}
.main-img img {
    border:1px solid var(--light);
    border-radius:8px;
}

/* ARTICOLE */
#articole {
    margin-bottom:2rem;
    margin-top:2rem;
}

#articole h1 {
    font-size:2rem;
    font-weight:normal;
}

#articole h2 {
    font-size:1rem;
    font-weight:normal;
    text-transform: uppercase;
    color:var(--gray);
}

.articol-col {
    margin-bottom:2rem;
}

.articol-col .card-img-top {
    object-fit: cover;
    height:240px;
}

.articol-col h5 {
    max-height: 4.5rem;
    overflow: hidden;
}
.articol-col h5 a {
    color:var(--dark);
    text-decoration:none;
}

.articol-col h5 a:hover {
    text-decoration:underline;
}

.articol-col p {
    max-height: 5.9rem;
    overflow: hidden;
}

.articol-header h1 {
    font-size:2rem;
    font-weight:600;
}

.articol-header h2 {
    color:#666;
    font-size:1.2rem;
    font-weight:normal;
}

.articol-header span {
    display:block;
    color:#999;
}


.tag {
    line-height: 1;
    text-align: center;
    text-decoration: none;
    transition-duration: .25s;
    transition-timing-function: cubic-bezier(.65,.05,.36,1);
    outline: 0;
    white-space: nowrap;
    appearance: none;
    display: inline-block;
    color: #221924;
    background: #fff;
    border: 1px solid #d9d8db;
    border-radius: 50vw;
    box-shadow: inset 0 0 0 2px transparent;
    padding:0.4rem 1rem;
    margin-bottom:0.5rem;
}

.tag:hover {
    box-shadow: inset 0 0 0 2px var(--primary);
    text-decoration:none;
}

/* CONTENT ALTELE */
#breadcrumb {
    font-size:0.9rem;
}

#breadcrumb a {
    color:var(--gray);
}

#breadcrumb i {
    margin-left:0.5rem;
    margin-right:0.5rem;
}

#breadcrumb a:hover {
    color:var(--success);
}

.breadcrumb-item.active {
    color:var(--dark);
}

#breadcrumb h2 {
    font-size:0.9rem;
    font-weight:normal;
    display:inline;
}

.subcategorii-inline h2 {

    margin-bottom:1rem;
}

.subcategorii-inline h2 img {
    margin-right:1rem;
    width:50px;
    height:50px;
    object-fit: cover;
    border-radius:5px;
}

.subcategorii-inline h2 a {
    display:block;
    padding:0.2rem;
    border:1px solid var(--light);
    box-shadow: 0 1px 2px rgba(34,25,36,.2);
    border-radius:8px;
    color:var(--dark);
    line-height:1.3;
    font-size:1rem;
    font-weight:500;
}

.subcategorii-inline h2 a span {

}

.subcategorii-inline h2 a i {
    font-size:0.9rem;
}

.subcategorii-inline h2 a:hover {
    color:var(--success);
    text-decoration:none;
}

.subcategorii-inline h2 i {
    float:right;
    margin-top:1rem;
}

#content.bordered {
    border-top:1px solid #eaeaea;
}

#col-filtrare {
    background:white;
    border-radius:8px;
    border:1px solid #eaeaea;
    padding:1.5rem;
}

.filtru {
    border-radius:8px;
    border:1px solid var(--light);
    max-height:250px;
    overflow-x:hidden;
}

.filtru-header {
    text-transform: uppercase;
    display:block;
    padding:0.3rem 0.5rem;
    background:var(--light);
    margin-bottom:0.5rem;
    border-radius:8px;
    color:var(--dark);
}

.filtru ul {
    list-style-type: none;
    margin: 0.4rem 0.8rem;
    padding: 0;
}

.filtru ul li a {
    display:block;
    margin-bottom:3px;
    color:#6A7685;
}

.filtru ul li a:hover {
    color:var(--primary);
    text-decoration:none;
}

.filtru-colors {
    padding:0 0.6rem;
}

.filtru .color-thumb {
    display:inline-block;
    width:30px;
    height:30px;
    background:transparent;
    border-radius:30px;
    border:1px solid #efefef;
    margin-right:5px;
    margin-bottom:5px;
}

.filtru .color-thumb.selected {
    border:1px solid #ccc;
}

.filtru .color-thumb.color-verde { background:green; }
.filtru .color-thumb.color-maro { background:indianred; }
.filtru .color-thumb.color-alb { background:white; }
.filtru .color-thumb.color-negru { background:black; }
.filtru .color-thumb.color-crem { background:lightgoldenrodyellow; }
.filtru .color-thumb.color-gri { background:gray; }
.filtru .color-thumb.color-roz { background:pink; }
.filtru .color-thumb.color-albastru { background:blue; }
.filtru .color-thumb.color-mov { background:purple; }
.filtru .color-thumb.color-portocaliu { background:orange; }
.filtru .color-thumb.color-galben { background:yellow; }
.filtru .color-thumb.color-colorat { background:white; }
.filtru .color-thumb.color-rosu { background:red; }

.filtru .color-thumb:hover {
    text-decoration:none;
}

#sortare {
    border-radius: 8px;
    border-bottom: 1px solid white;
    font-size:0.8rem;
    padding-bottom:0.5rem;
}

#sortare a {
    display:inline-block;
    margin-right:0.5rem;
    margin-bottom:0.5rem;
}

#sortare a.active {
    font-weight:500;
    text-decoration: underline;
}

#cautari {
    max-width:100%;
    position:relative;
    height:40px;
    overflow:hidden;
    white-space: nowrap;
}

#cautari .tag {
    font-size:0.8rem;
    padding: 0.5rem 1rem;
}

.produs-col {
    border-radius:8px;
    border:1px solid #eaeaea;
    padding:0.5rem;
    background:var(--white);
    margin-bottom:2rem;
}

.produs-col .produs-img {
    position:relative;
    z-index:1;
}

.produs-col .produs-img img {
    border-radius:8px;
    border:1px solid var(--light);
    width:100%;
    height:240px;
    object-fit: cover;
    position:relative;
}

.produs-col .produs-img .produs-tag {
    display:inline-block;
    color:white;
    position:relative;
    z-index:2;
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    padding:0.5rem 0.5rem;
    font-size:0.8rem;
    line-height:0.7rem;
    top:auto;
    bottom:1.7rem;
    margin-left:1px;
}

.produs-col .produs-rating {
    font-size:0.9rem;
    color:var(--gray);
    padding:0.3rem 0;
    position:relative;
    z-index:10;
}

.produs-col .produs-titlu h3 {
    font-size:1rem;
    line-height:1.3;
    min-height:2.6rem;
    max-height:2.6rem;
    overflow:hidden;
    font-weight:normal;
    margin: 0.5rem 0;
}

.produs-col .produs-titlu h3 a {
    color:var(--dark);
}

.produs-col .produs-pret {
    color:var(--danger);
    font-size:1.3rem;
    font-weight:normal;
}

.produs-col .produs-pret sup {
    font-size:0.8rem;
}

.produs-col .produs-btn .btn {
    border-radius:8px;
}

.categorie-promo-articole {
    background:var(--white);
    padding:2rem;
    border-radius:8px;
    box-shadow: 0 3px 6px rgba(34,25,36,.5);
    margin-bottom:2rem;
}

.categorie-promo-articole h4 {
    font-size:1.2rem;
    color:var(--gray);
    text-transform: uppercase;
    font-weight:normal;
    margin-bottom:1rem;
}

.categorie-promo-articole .articol-col {
    margin-bottom:0px;
}

.pagination a {
    display:inline-block;
    text-align:center;
    width:40px;
    height:40px;
    font-size:1.3rem;
    line-height:2.3rem;
    padding:0.2rem;
    background:var(--light);
    border-radius:100%;
    color:var(--dark);
    margin-left:2px;
    margin-right:2px;
}

.pagination a:hover, .pagination li.active a {
    background:var(--dark);
    color:var(--light);
    text-decoration:none;
}

#produs-content h1 {
    font-size:1.8rem;
    font-weight:600;
}

#produs-content p {
    color:var(--gray-dark);
    font-size:0.9rem;
}

#produs-content p a {
    color:var(--success);
    text-decoration:underline;
}

#produs-content p a:hover {
    text-decoration:none;
}

#produs-content .rating span {
    display:inline-block;
    margin-left:5px;
    font-size:0.9rem;
    font-weight:400;
}

#produs-content .pret h2 {
    color:var(--danger);
    font-size:1.8rem;
}

#produs-content .pret h2 s {
    font-size:1.1rem;
    color:var(--dark);
}

#produs-content .pret h2 span {
    font-size:1.1rem;
    font-weight:400;
}

#produs-content .magazin-info {
    margin-top:1rem;
    border-top:1px solid #eaeaea;
    border-bottom:1px solid #eaeaea;
    padding:1rem 0.5rem;
    border-radius:8px;
}

#produs-content .magazin-info ul {
    list-style-type: none;
    margin:0px;
    padding:0px;
    font-size:0.9rem;
}

#produs-content .magazin-info img {
    height:40px;
    border:1px solid #eaeaea;
    border-radius:8px;
}

#produs-content .c2a a {
    border-radius:8px;
    padding:1rem;
}

#produs-content .descriere {
    font-size:0.9rem;
    color:#999;
    line-height:1.6;
}

#produs-content .descriere h3 {
    font-size:1.1rem;
    font-weight:400;
}

#sumar {
    border:1px solid var(--light);
    padding:1rem;
    border-radius:8px;
    font-size:0.9rem;
    margin-bottom:1rem;
}

#sumar_ul {
    margin-bottom:0px;
    margin-top:0.5rem;
}

.articol-continut p {
    margin-bottom:1rem;
}

.articol-continut h1 {
    font-size:1.6rem;
    margin:1rem 0;
}

.articol-continut h2 {
    font-size:1.4rem;
    margin:1rem 0;
    text-transform: capitalize;
}

.articol-continut h3 {
    font-size:1.2rem;
    margin:1rem 0;
}

.articol-continut .produse-row {
    background:#fcfcfc;
    border-radius:8px;
    padding-top:15px;
    padding-bottom:15px;
}

.articol-continut .produse-row .produs-col {
    margin-bottom:0;
}

.magazine-col {
    padding: 1.5rem;
    background: linear-gradient(180deg, var(--dark) 40%, var(--white) 80%);
    margin-bottom: 2rem;
    text-align:center;
    color:var(--white);
    height:100%;
    border-radius:8px;
}

.magazine-col b {
    font-weight: 800;
    font-size:1.2rem;
}

.magazine-col span {
    display:inline-block;
    padding:.2rem 0.5rem;
    border-radius:10px;
    background:var(--dark);
    color:var(--white);
    font-size:.6rem;
}

.magazine-col ul {
    margin:0px;
    padding:0px;
    list-style-type: none;
}

.magazine-col ul li a {
    display:block;
    margin-bottom:.5rem;
    padding:.5rem;
    background:var(--white);
    border: 1px solid #eaeaea;
    border-radius:3px;
    font-weight:500;
    color:var(--dark);
}

.magazine-col ul li a:hover {
    background:var(--success);
    color:var(--white);
    text-decoration:none;
}

/* FOOTER */
#footer {
    border-top:1px solid #eaeaea;
    border-bottom:1px solid #eaeaea;
    background:white;
    padding:2rem 0px;
}

#footer a {
    color:var(--dark);
    text-decoration:underline;
}

#footer a:hover {
    color:var(--secondary);
}


/* RESPONSIVE */
@media (min-width: 1600px) {
    .outer {
        width: 1440px;
    }
}

@media (max-width: 990px) {
    .outer {
        width: 95vw;
    }

    .logo {
        width:160px;
    }

    #header .button {
        text-align:center;
        font-size:0.9rem;
        border-radius:5px;
        margin-left:15px;
        margin-top:3px;
        color:var(--dark);
    }

    #header-mobile { display:block; border-bottom: 1px solid var(--light); }
    #header-desktop { display:none; }
    #meniu { display:none; }

    #meniu-mobile {
        display:none;
        position:absolute;
        width:100%;
        min-height:100vh;
        z-index:800;
        background:white;
        border-top:1px solid var(--light);
        padding:20px;
        padding-top:5px;
    }

    #meniu-mobile ul {
        margin:0px;
        padding:0px;
        list-style-type:none;
    }

    #meniu-mobile ul li a {
        display:block;
        padding:12px 5px;
        color:var(--dark);
        font-size:0.9rem;
        font-weight:500;
        border-bottom:1px solid var(--light);
    }

    #meniu-mobile a i {
        float:right;
        margin-top:3px;
        color:#A0AEBD;
        font-size:13px;
    }

    .submeniu-mobile {
        display:none;
    }

    #cover img {
        height:200px;
    }

    .over-cover {
        margin-top: -4rem;
        padding: 1rem;
        width:95vw;
    }

    .block-text h1 {
        font-size:1.6rem;
        font-weight:400;
    }

    .block-text h2 {
        font-size:1.1rem;
        font-weight:400;
    }

    .block-text h3 {
        font-size:1rem;
        font-weight:400;
    }

    .block-text p {
        font-size:14px;
    }

    .block-column h3 {
        font-size:1.3rem;
        padding-top:1rem;
        padding-bottom:1rem;
    }


    .block-carousel .block-column h3 {
        padding-top:1rem;
        padding-bottom:1rem;
        font-size:1.1rem;
    }

    .block-title {
        font-size:1.4rem;
    }

    #submeniu-inline a {
        display:block;
    }

    .categorie-promo-articole .articol-col {
        margin-bottom:1rem;
    }

    #sortare {
        margin-left:-10px;
        margin-right:-10px;
    }

    #sortare a.btn {
        line-height:1.3;
        margin:0;
    }

    #sortare a.btn span {
        display:block;
        font-size:10px;
    }

    #sortare .no-gutters .col-6 {
        padding-left:5px;
        padding-right:5px;
    }

    .produse-row .col-6,.produse-row .col-12 {
        padding-left:5px;
        padding-right:5px;
    }

    .produs-col {
        margin-bottom:0.7rem;
    }

    .produs-col .produs-pret {
        font-size:1rem;
        margin-bottom: 5px;
    }

    #produs-content h1 {
        font-size: 1.5rem;
    }

    #produs-content .magazin-info li {
        font-size:0.8rem;
    }

    .articol-header h1 {
        font-size:1.4rem;
        font-weight:600;
    }

    .articol-header h2 {
        font-size:1rem;
    }

    #sumar_ul { display:none; }

    .produs-col .produs-btn .btn {
        font-size:0.9rem;
    }

    .magazine-col {
        padding: 1.5rem .5rem;
    }

    .magazine-col ul li a {
        padding:.25rem;
    }

}

@media (max-width: 640px) {
    #col-filtrare {
        display: none;
        margin-bottom: 1rem;
    }
}