/*------------------------*/
/* brick about
/*------------------------*/

section.about .container.small {text-align: left;}
section.about .container p img {display: inline-block; overflow: hidden; object-fit: cover;}
section.about .container h1 {margin: -0.75rem auto 1.5rem; font-size: 2.6rem;}
section.about .container h1 + p {padding-top: 0;}
section.about .container .buttons {justify-content: center;}

/*------------------------*/
/* brick intro
/*------------------------*/

section.intro {text-align: center; position: relative;}
section.intro img {margin: 3rem auto 0; width: 38rem;}
section.intro img.is_svg {max-width: 85%;}
section.intro h1 + p {padding-top: 0;}

/*------------------------*/
/* brick post
/*------------------------*/

section.post .container h1 {text-align: center;}
section.post .container h1:last-child {margin-bottom: 3rem;}
section.post .container .featuredimage {border-radius: 1rem; margin-bottom: 3rem;}
section.post .container .meta {justify-content: center; margin-bottom: 3rem; margin-top: -0.75rem;}

/*------------------------*/
/* brick cta
/*------------------------*/

section.cta .twocols {display: flex;}
section.cta .twocols .text {flex: 2;}
section.cta .twocols .image {flex: 1;}
section.cta .twocols .image img {display: inline-block; width: 20rem;}
section.cta .twocols .image img.is_svg {margin: 0!important;}
@media (max-width: 600px) {
    section.cta .twocols {flex-direction: column;}
    section.cta .twocols .text {text-align: center;}
    section.cta .twocols .image {text-align: left; display: none;}
}

/*------------------------*/
/* brick image
/*------------------------*/

section.image + section.image.alt {margin-top: 0!important;}
section.image.alt {background: var(--light); border-top: 0.1rem solid var(--light); border-bottom: 0.1rem solid var(--light);}
section.image.alt .container {direction: rtl;}
section.image.alt .container > div {direction: ltr;}
section.image .twocols .image {text-align: center; position: relative; height: 100%;}
section.image .twocols .image img {width: auto; display: block; width: 100%; margin: auto; border-radius: 1rem;}
section.image .twocols .image img.is_svg {max-width: 85%; border-radius: 0;}
section.image .twocols {row-gap: 2.5rem;}
@media (max-width: 600px) {
    section.image .twocols .image {text-align: left;}
}

/*------------------------*/
/* brick contact
/*------------------------*/

section.contact .twocols {align-items: flex-start;}

/*------------------------*/
/* brick title
/*------------------------*/

section.title .container.small {text-align: center;}
section.title:not(.bgimage) {padding-bottom: 3.25rem;}
section.title ul.breadcrumbs li a {color: var(--accent);}
section.title.bgimage ul.breadcrumbs:first-child {margin-top: -2rem;}


/*------------------------*/
/* brick quote
/*------------------------*/
section.title.quote:not(.bgimage) h2 + p {color: var(--textMedium);}

/*------------------------*/
/* brick wide
/*------------------------*/

section.wide {max-width: 60rem; margin-left: auto; margin-right: auto;}
section.wide h1 {text-align: center;}
section.wide h1 + *:not(.breadcrumbs) {padding-top: 1.25rem;}

/*------------------------*/
/* brick map
/*------------------------*/

section.map div.map {padding: 3rem 0; aspect-ratio: auto; border-radius: 0;}
section.map .overlay {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background: rgba(0,0,0,0);}
section.map div.map > .container {display: flex; justify-content: flex-end;}
section.map div.map > .container > div {background: white; padding: 2.5rem 3rem 2.5rem; border-radius: 1rem; position: relative; z-index: 2; min-width: 22rem; box-shadow: 0px 0px 1.5rem rgba(0,0,0,0.05);} 
section.map div.map > .container > div .buttons {padding: 0;}
@media (max-width: 55rem) {
    section.map div.map > .container {justify-content: center;}
}

/*------------------------*/
/* brick 404
/*------------------------*/

section.error404 > .container.small {text-align: center;}
section.error404 > .container.small h1 {font-size: 2.4rem;}

/*------------------------*/
/* brick reviews
/*----------------cta--------*/

section.reviews .container.small {margin-bottom: 4.25rem; text-align: center;}
ul.reviews li div.box {display: flex; flex-direction: column-reverse; padding: 2.25rem 2rem; height: 100%; justify-content: space-between; gap: 2rem;}
ul.reviews li div.box .avatar {height: 3.25rem; width: 3.25rem;}
ul.reviews li div.box h3 {margin: 0; line-height: 1.45; font-size: 1.1rem; padding: 0;}
ul.reviews li div.box .function {color: var(--textDarker); line-height: 1.45;}
ul.reviews li div.box .stars {display: flex; gap: 0.25rem; margin: 0 0 1.5rem;}
ul.reviews li div.box .stars img {height: 1rem;}
ul.reviews li div.box > div:nth-child(1) {display: flex; gap: 1rem; align-items: center;}


/*------------------------*/
/* brick features
/*------------------------*/

section.features .container.small {margin-bottom: 4rem; text-align: center;}
section.features + section.title {padding-top: 0;}
ul.features {gap: 3rem 3rem; padding-bottom: 1rem;}
ul.features li {text-align: center;}
ul.features li img {aspect-ratio: 1.5; object-fit: contain; width: 100%;}
ul.features li p.image {margin-bottom: 0.85rem;}
ul.features li p.image + h3 {padding-top: 0;}
ul.features li.has_icon p.image {display: inline-block; padding: 1.5rem; border-radius: 100%; border: 0.1rem solid var(--accent);}
ul.features li.has_icon p.image img {aspect-ratio: 1; object-fit: contain; width: 3rem; margin: 0 auto; border-radius: 0;}


/*------------------------*/
/* brick blocks
/*------------------------*/

section.blocks .container.small {margin-bottom: 4rem; text-align: center;}
section.blocks + section.title {padding-top: 0;}
ul.blocks {gap: 1.55rem 1.5rem; padding-bottom: 1rem;}
ul.blocks li {text-align: center; aspect-ratio: 1.5; position: relative; border-radius: 1rem;}
ul.blocks li.hasimage {overflow: hidden;}
ul.blocks li:has(a[href]):hover {border: 1px solid rgba(0,0,0,0.2);}
ul.blocks li a {display: flex; width: 100%; position: absolute; height: 100%; z-index: 1; padding: 1.5rem!important; flex-direction: column; justify-content: center; text-decoration: none;}
ul.blocks li.hasimage a {color: white;}
ul.blocks li.hasimage a::before {content: ""; background: rgba(0,0,0,0.32); position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: -1;}
ul.blocks li.box {margin: 0!important; padding: 0;}
ul.blocks li.hasimage div.img {margin: -1.5rem; position: absolute; z-index: -2;}
ul.blocks li.hasimage div.img img {aspect-ratio: 1.5; object-fit: cover; width: 100%;}
ul.blocks li h3 {padding-top: 0; }
ul.blocks li.hasimage h3 {color: white;}

/*------------------------*/
/* brick prices
/*------------------------*/

section.prices {padding-bottom: 5rem;}
section.prices .container.small {margin-bottom: 4rem; text-align: center;}
section.prices + section.title {padding-top: 0;}
ul.prices {max-width: 70rem; margin: 0 auto;}
ul.prices > li {text-align: center;}
ul.prices > li div.box {padding: 3rem 2rem; height: 100%; background: #f7f7f8;}
ul.prices li div.box p:first-child {margin: 0;}
ul.prices li div.box p:first-child strong {
    position: relative;
    margin: 0;
    bottom: 2rem;
    display: inline-block;
    width: auto; 
    white-space: nowrap;
    padding: 0.5rem 2rem; 
    font-weight: normal; 
    text-transform: uppercase; 
    font-size: 0.8rem; 
    letter-spacing: 0.15rem; 
}
ul.prices li div.box ul {text-align: left; display: inline-block; margin: 1.5rem 0 2.5rem;}
ul.prices li div.box ul li::before {content: "✓"; display: inline-block; padding: 0 0.15rem;}
ul.prices li div.box h3 {padding: 0.25rem;}
ul.prices li div.box h3 strong {font-size: 3rem; padding: 0 0.25rem; vertical-align: bottom; line-height: 0.9; letter-spacing: -0.1rem;}
ul.prices li div.box h3 em {vertical-align: top; font-style: normal;}
@media (min-width: 65rem) {
    section.prices {padding-bottom: 7rem;}
    section.prices .container.small {margin-bottom: 6rem;}
    ul.prices > li div.box {padding: 3.25rem 2rem 4rem;}
    ul.prices > li:nth-child(1) div.box {border-top-right-radius: 0; border-bottom-right-radius: 0;}
    ul.prices > li:nth-child(3) div.box {border-bottom-left-radius: 0; border-top-left-radius: 0;}
    ul.prices > li:nth-child(2) {transform: scale(1.15); z-index: 2;}
    ul.prices > li:nth-child(2) div.box {padding: 4rem 2rem 2rem;}
    ul.prices > li:nth-child(2) div.box::before, 
    ul.prices > li:nth-child(2) div.box::after {content: ""; position: absolute; background: white; top: 0; right: 0; width: 0.25rem; height: 100%; transform: translateX(calc(100% + 0.1rem));}
    ul.prices > li:nth-child(2) div.box::before {right: auto; left: 0; transform: translateX(calc(-100% - 0.1rem));}
    ul.prices > li:nth-child(2) div.box > div {transform: scale(0.9);}
    ul.prices > li:nth-child(2) div.box p:first-child strong {position: absolute; left: 50%; bottom: auto; margin-top: -5rem; transform: translateX(-50%);}
}

/*------------------------*/
/* brick posts
/*------------------------*/

section.posts .container.small {margin-bottom: 4rem; text-align: center;}
section.posts .grid {grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); grid-gap: 1.55rem 2rem;}
section.posts .grid .item .img {border-radius: 1rem; margin-bottom: 0.251rem; overflow: hidden;}
section.posts .grid .item .img img {display: block;}
section.posts .grid .item h3 {font-size: 1.25rem; padding-top: 1rem; padding-bottom: 1rem;}
section.posts .grid .item p {font-size: 1rem;}
section.posts .grid li.placeholder {display: block!important;}
section.posts .grid .summary .button {position: relative; bottom: 0.8rem;}
section.posts .filter {display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; margin: -2rem 0 1.25rem;}
section.posts .filter .tags {display: flex; margin: 0; gap: 0.75rem;}
section.posts .filter .tags li {list-style: none;}
section.posts .filter .tags.nofilter li {display: none;}
section.posts #loadmoreposts {position: relative; bottom: 1rem;}
section.posts .filter .tags li {
    list-style: none; 
    background: var(--textDark);
    color: white;
    padding: 0 0.6rem 0 1rem;
    font-size: 0.9rem;
    border-radius: 1.15rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 2rem;
    line-height: 1;
    white-space: nowrap;
}
section.posts .filter .tags li::after {
    content: "+";
    display: inline-block;
    margin-left: 1rem;
    font-size: 1.5rem;
    transform: rotate(45deg);
}
section.posts .filter select {
    border: 0;
    background: none;
    padding: 0.25em 0.75em;
    border: 1px solid var(--borderMedium);
}

/*------------------------*/
/* brick small
/*------------------------*/

section.small h1 {text-align: center;}

/*------------------------*/
/* brick docs
/*------------------------*/

section.docs {padding-top: 0!important; margin-top: 0;}
.preheader + header + section.docs {margin-top: -3rem;}
section.docs .container {display: flex; gap: 5rem;}
section.docs .container .menu {border-right: 1px solid rgba(0,0,0,0.1); width: 20rem; max-width: 20rem; padding: 2rem 0 3.2rem;}
section.docs .container .content {min-width: 0; min-height: 0; padding: 3.2rem 0; flex-grow: 1;}
section.docs .container .content > * {max-width: 45rem;}
section.docs .container .content > p img[src$=".svg"] {width: 100%; max-width: 30rem; margin: 3rem 0;}
section.docs .container .content .breadcrumbs {text-align: left;}
section.docs .container .content h1 {font-size: 3rem;}

section.docs .container .menu h3 {display: none;}
section.docs .container .menu ul.nestedmenu {margin-left: 0; margin-right: 5rem; top: 8rem}
header.sticky + section.docs .container .menu ul.nestedmenu {position: sticky;}
body:not(.mobilemenu) header.sticky + section.docs .container .menu ul.nestedmenu {animation: slidedown 1s ease-in-out;}
section.docs .container .menu ul.nestedmenu li {list-style: none; padding: 0.15rem 0;}
section.docs .container .menu ul.nestedmenu li > ul {display: none;}
section.docs .container .menu ul.nestedmenu li > a::before {content: " "; display: inline-block; margin-right: 0.75rem; width: 0.5rem; text-align: center;}
section.docs .container .menu ul.nestedmenu > li > a::before {content: "-";}
section.docs .container .menu ul.nestedmenu li.haschildren > a::before {content: "›";}
section.docs .container .menu ul.nestedmenu li.haschildren.active > a::before {transform: rotate(90deg);}
section.docs .container .menu ul.nestedmenu li.active > ul {display: block;}
section.docs .container .menu ul.nestedmenu li.active > ul li:last-child {margin-bottom: 0.75rem;}
section.docs .container .menu ul.nestedmenu li > a {color: var(--textMedium); text-decoration: none; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block;}
section.docs .container .menu ul.nestedmenu li.current > a {color: var(--accentDarker);}

@media (max-width: 65rem) {
    section.docs {margin-top: -2rem;}
    section.docs .container {flex-direction: column-reverse; gap: 3rem;}
    section.docs .container .menu {width: 100%; max-width: 100%; padding-bottom: 0; border: 0;}
    section.docs .container .menu h3 {display: block;}
    section.docs .container .content {padding-bottom: 0;}
    section.docs .container .menu ul.nestedmenu {margin-top: 0.75rem;}
}

/*------------------------*/
/* stars
/*------------------------*/

.star-container {
    display: inline-flex;
    font-size: 1.2rem;
    gap: 2px;
}

.star {
    display: inline-block;
    position: relative;
    color: #ddd;
}

.star.full {
    color: #f5a623;
}

.star.qtr::before,
.star.half::before,
.star.threeqtr::before {
    content: "★";
    color: #f5a623;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}

.star.qtr::before {
    width: 25%;
}

.star.half::before {
    width: 50%;
}

.star.threeqtr::before {
    width: 75%;
}

/*------------------------*/
/* brick_rank
/*------------------------*/

.brick-rank {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
    margin-bottom: 24px;
}

/*------------------------*/
/* brick_rankitem
/*------------------------*/

.rankitem-card {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    background: #fff;
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
}

.rankitem-badge-outer {
    position: absolute;
    top: 10px;
    left: -6px;
    z-index: 5;
}

.rankitem-badge {
    background: #3b82f6;
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 6px 6px 6px 0;
    padding: 6px 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
}

.rankitem-badge::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0;
    height: 0;
    border-top: 6px solid #1e40af;
    border-left: 6px solid transparent;
}

.rankitem-left {
    flex-shrink: 0;
    width: 140px;
    text-align: center;
}

.rankitem-img {
    width: 100%;
    border-radius: 6px;
    margin-bottom: 8px;
}

.rankitem-rating {
    font-size: 14px;
    color: var(--textDark);
}

.rankitem-rating .label {
    font-weight: bold;
    display: block;
}

.rankitem-rating .stars {
    color: #fbbf24;
}

.rankitem-rating .star {
    color: #e5e7eb;
}

.rankitem-rating .star.filled {
    color: #fbbf24;
}

.rankitem-rating .score {
    font-weight: bold;
    color: var(--textDark);
    margin-left: 4px;
}

.rankitem-middle {
    flex: 1;
    min-width: 200px;
}

.rankitem-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--textDark);
}

.rankitem-desc-label {
    font-weight: bold;
    color: var(--textDark);
    margin-bottom: 4px;
}

.rankitem-description {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--textMedium);
}

.rankitem-right {
    min-width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rankitem-cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.rankitem-button {
    background: linear-gradient(90deg, #10b981, #22c55e);
    color: #fff;
    font-weight: 600;
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
}

.rankitem-button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}

.rankitem-price {
    font-weight: bold;
    color: #1f2937;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .rankitem-card {
        border: 1px solid #3b82f6;
        flex-direction: column;
        text-align: center;
        padding-top: 64px;
    }

    .rankitem-img {
        width: 50%;
        margin: auto;
    }

    .rankitem-rating {
        font-size: 1.25rem;
        color: var(--textDark);
        margin-top: 16px;
    }

    .rankitem-title {
        font-size: 2rem;
    }

    .rankitem-desc-label {
        font-size: 1.125rem;
        margin-bottom: 4px;
    }

    .rankitem-description {
        font-size: 1.125rem;
    }

    .rankitem-badge-outer {
        top: 0;
        left: 0;
        width: 100%;
    }

    .rankitem-badge {
        border-radius: 10px 10px 0 0;
        width: 100%;
        padding: 10px 0;
        font-size: 1.25rem;
        text-align: center;
    }

    .rankitem-badge::after {
        display: none;
    }

    .rankitem-left,
    .rankitem-right {
        width: 100%;
        align-items: center;
    }

    .rankitem-cta-wrap {
        width: 100%;
    }

    .rankitem-button {
        font-size: 1.5rem;
        width: 100%;
        text-align: center;
    }

    .rankitem-price {
        font-weight: bold;
        color: #1f2937;
        font-size: 1.25rem;
    }
}

/*------------------------*/
/* brick_singleproduct
/*------------------------*/

.brick-singleproduct-card {
    position: relative;
    border: 2px solid #3b82f6;
    border-radius: 10px;
    padding: 24px;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    max-width: 960px;
    margin: 0 auto 32px auto;
}

.brick-singleproduct-badge {
    position: absolute;
    top: 9px;
    left: -7px;
    background: #3b82f6;
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 6px 12px;
    border-radius: 6px 6px 6px 0;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 3;
}

.brick-singleproduct-badge::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0;
    height: 0;
    border-top: 6px solid #1e40af;
    border-left: 6px solid transparent;
}

.brick-singleproduct-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: flex-start;
}

.brick-singleproduct-image {
    position: relative;
    z-index: 1;
}

.brick-singleproduct-image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    object-fit: cover;
}

.brick-singleproduct-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 16px;
}

.brick-singleproduct-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--textDark);
    margin: 0;
    text-decoration: underline;
}

.brick-singleproduct-price {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--textDark);
    margin-top: -8px;
}

.brick-singleproduct-description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--textMedium);
    margin: 0;
}

.brick-singleproduct-button {
    background: linear-gradient(90deg, #10b981, #22c55e);
    color: #fff;
    font-weight: 700;
    padding: 12px;
    font-size: 1rem;
    border-radius: 8px;
    text-decoration: none;
    width: 100%;
    text-align: center;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
}

.brick-singleproduct-button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
    .brick-singleproduct-inner {
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: left;
    }

    .brick-singleproduct-image img {
        width: 100%;
        display: block;
        margin: 0 auto;
    }

    .brick-singleproduct-content {
        padding: 0 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .brick-singleproduct-title {
        font-size: 1.8rem;
        font-weight: 800;
        text-align: left;
        margin: 0;
    }

    .brick-singleproduct-price {
        font-size: 1.25rem;
        font-weight: 700;
        margin: 0;
        color: var(--textDark);
    }

    .brick-singleproduct-description {
        font-size: 1.125rem;
        line-height: 1.6;
        text-align: left;
        color: #333;
        margin: 0;
    }

    .brick-singleproduct-button {
        width: 100%;
        max-width: 100%;
        margin-top: 12px;
        font-size: 1.5rem;
    }

    .brick-singleproduct-badge {
        font-size: 1.25rem;
        width: max-content;
        text-align: left;
        border-radius: 6px 6px 6px 0;
        box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
    }

    .brick-singleproduct-badge::after {
        content: "";
        position: absolute;
        bottom: -6px;
        left: 0;
        width: 0;
        height: 0;
        border-top: 6px solid #1e40af;
        border-left: 6px solid transparent;
    }
}

/*------------------------*/
/* brick_reviewcard
/*------------------------*/

.brick-reviewcard-wrapper {
    position: relative;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

.brick-reviewcard {
    position: relative;
    border: 1px solid var(--borderMedium);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.brick-reviewcard:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* Ribbon */
.brick-ribbon-floating {
    position: absolute;
    top: -12px;
    left: -9px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.brick-ribbon-floating-text {
    background-color: var(--blue);
    color: white;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 12px 24px;
    line-height: 1;
    z-index: 5;
}

.brick-ribbon-floating-triangle {
    width: 0;
    height: 0;
    border-right: 10px solid black;
    border-bottom: 10px solid transparent;
}

/* Layout */
.brick-reviewcard-inner {
    display: flex;
    width: 100%;
}

.brick-reviewcard-left {
    flex: 0 0 25%;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--borderLight);
}

.brick-reviewcard-left img {
    max-width: 100%;
    height: auto;
}

.brick-reviewcard-middle {
    flex: 0 0 50%;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.brick-reviewcard-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.title {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.375rem;
    font-weight: bold;
    text-align: center;
    line-height: 1;
}

.rating-block {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.divider-vertical {
    width: 1px;
    height: 100%;
    background-color: var(--borderMedium);
}

.rating-label {
    font-size: 1.125rem;
    font-weight: bold;
}

.rating {
    color: #f39c12;
    font-size: 1.1rem;
    font-weight: bold;
    white-space: nowrap;
}

.brick-divider {
    border: none;
    border-top: 1px solid var(--borderLight);
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

.brick-reviewcard-points ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
    padding: 1rem;
    margin: 0;
    list-style: none;
}

.brick-reviewcard-points li {
    font-size: 1.1rem;
    line-height: 1.4;
}

.brick-reviewcard-desc {
    padding: 1rem;
}

.review-link-wrapper {
    text-align: center;
    margin-top: 1rem;
}

.review-link {
    color: var(--blue);
    font-weight: bold;
    text-decoration: underline;
}

.brick-reviewcard-right {
    flex: 0 0 25%;
    padding: 1rem;
    text-align: center;
    background-color: #f1f9f5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.brick-reviewcard-quote {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--blueDarker);;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.brick-reviewcard-score {
    font-size: 4.375rem;
    font-weight: bold;
    line-height: 1.1;
    color: #111;
}

.brick-reviewcard-stars {
    font-size: 1.25rem;
    line-height: 1.1;
}

.brick-reviewcard-rating-desc {
    font-size: 1rem;
    color: #555;
}

.visit-btn {
    display: inline-block;
    background-color: var(--green);
    color: #fff;
    padding: 0.5rem 2rem;
    border-radius: 4px;
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: bold;
    margin-top: 1rem;
}

.brick-reviewcard-discount {
    font-size: 1.125rem;
    color: var(--green);
    font-weight: bold;
    margin-top: 1rem;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .brick-reviewcard-inner {
        flex-direction: column;
    }

    .brick-reviewcard-left,
    .brick-reviewcard-middle,
    .brick-reviewcard-right {
        flex: 1 1 100%;
        padding: 1rem;
    }

    .brick-reviewcard-middle {
        border-top: 1px solid var(--borderMedium);
    }

    .divider-vertical {
        height: 40px;
    }

    .title,
    .rating-block {
        flex: 0 0 45%;
        align-items: center;
    }

    .brick-reviewcard-points ul {
        grid-template-columns: 1fr;
    }

    .brick-reviewcard-points li {
        font-size: 1.2rem;
    }

    .brick-reviewcard-desc {
        font-size: 1.2rem;
        text-align: center;
    }
}

/* ========== brick-producthighlight ========== */

.brick-highlight-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.04);
    font-family: sans-serif;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

/* Top */
.highlight-header {
    background-color: var(--blueDarker);
    color: white;
    text-align: center;
    padding: 1.25rem 1rem;
}

.highlight-icon {
    font-size: 4.375rem;
    line-height: 1.1;
}

.highlight-title {
    font-size: 1.875rem;
    font-weight: bold;
}

.highlight-subtitle {
    font-size: 1.5rem;
}

/* Middle */
.highlight-main {
    display: flex;
    flex-direction: row;
    background-color: white;
    padding: 1.5rem;
}

.highlight-image {
    flex: 0 0 30%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.highlight-image img {
    max-width: 100%;
    height: auto;
}

.highlight-features {
    flex: 0 0 40%;
    display: flex;
}

.highlight-features ul {
    padding-left: 1rem;
    margin: 0;
    list-style: none;
}

.highlight-features li {
    margin-bottom: 0.4rem;
    font-size: 1.125rem;
    text-align: left;
}

.highlight-rating {
    flex: 0 0 30%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.highlight-quote {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--blueDarker);
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.highlight-score {
    font-size: 4.375rem;
    font-weight: bold;
    line-height: 1.1;
    color: #111;
}

.highlight-stars {
    font-size: 1.2rem;
    line-height: 1.1;
}

.highlight-ratingdesc {
    font-size: 1rem;
    color: #555;
}

.highlight-badge img {
    max-height: 100px;
    margin: 0 auto;
}

.highlight-cta {
    display: inline-block;
    background-color: var(--green);
    color: white;
    padding: 0.6rem 1.25rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    width: 100%;
    max-width: 240px;
    margin: 1rem auto 0;
}

/* Bottom */
.highlight-guarantees {
    background-color: #f5f5f5;
    display: flex;
    justify-content: space-around;
    padding: 1.25rem 1rem;
    text-align: center;
    gap: 1rem;
}

.guarantee-block {
    flex: 1;
    margin: 1rem auto;
}

.guarantee-title {
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--blueDarker);
}

.guarantee-desc {
    font-size: 1rem;
    color: #333;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .highlight-main {
        flex-direction: column;
        text-align: center;
    }

    .highlight-features {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .highlight-features li {
        font-size: 1.3rem;
    }

    .highlight-rating {
        padding: 1rem;
    }

    .highlight-quote {
        font-size: 1.75rem;
    }

    .highlight-ratingdesc {
        font-size: 1.2rem;
    }

    .highlight-guarantees {
        flex-direction: column;
        gap: 1rem;
    }

    .highlight-cta {
        font-size: 1.5rem;
    }

    .guarantee-title {
        font-size: 1.75rem;
    }

    .guarantee-desc {
        font-size: 1.2rem;
    }
}