.product-attributes-summary {
    grid-template-columns: 1fr 1fr;
    padding: 16px 18px
}

    .product-attributes-summary .fp-feature {
        align-items: flex-start
    }

        .product-attributes-summary .fp-feature i {
            flex: 0 0 29px
        }

        .product-attributes-summary .fp-feature span {
            line-height: 1.65
        }

        .product-attributes-summary .fp-feature b {
            display: block;
            color: #14213d;
            font-size: 12px
        }

        .product-attributes-summary .fp-feature:nth-child(3) {
            grid-column: 1/-1
        }

        .product-attributes-summary .fp-feature:nth-child(5) {
            grid-column: 1/-1
        }

.fp-content-side:empty {
    display: none
}

.fp-content-grid:has(.fp-content-side:empty) {
    grid-template-columns: 1fr
}

@media(max-width:640px) {
    .product-attributes-summary {
        grid-template-columns: 1fr
    }

        .product-attributes-summary .fp-feature:nth-child(3), .product-attributes-summary .fp-feature:nth-child(5) {
            grid-column: auto
        }
}
.flower-reviews {
    padding: 0 0 75px;
    background: #f6f8fc
}

.flower-review-box {
    background: #fff;
    border: 1px solid #e9edf5;
    border-radius: 23px;
    padding: 28px
}

    .flower-review-box + .flower-review-box {
        margin-top: 18px
    }

    .flower-review-box h2 {
        font-size: 21px;
        margin: 0 0 22px
    }

.ratings-layout {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 38px;
    align-items: center
}

.ratings-total {
    text-align: center
}

    .ratings-total strong {
        display: block;
        font-size: 50px;
        color: #14213d
    }

    .ratings-total .fp-stars {
        font-size: 18px
    }

    .ratings-total p {
        font-size: 12px;
        color: #778195
    }

.rating-line {
    display: grid;
    grid-template-columns: 65px 1fr 35px;
    gap: 10px;
    align-items: center;
    margin: 9px 0;
    font-size: 12px;
    color: #687386
}

.rating-track {
    height: 8px;
    background: #eef1f5;
    border-radius: 999px;
    overflow: hidden
}

    .rating-track i {
        display: block;
        height: 100%;
        background: #ffb400;
        border-radius: inherit
    }

.reviews-empty {
    padding: 20px 0;
    color: #667085
}

    .reviews-empty b {
        display: block;
        color: #14213d;
        margin-bottom: 7px
    }

.review-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px
}

    .review-form label {
        display: flex;
        flex-direction: column;
        gap: 7px;
        font-size: 13px;
        color: #4f5b70
    }

        .review-form label.full {
            grid-column: 1/-1
        }

    .review-form input, .review-form textarea {
        border: 1px solid #dfe4ed;
        border-radius: 13px;
        padding: 12px;
        font: inherit;
        outline: 0;
        background: #fafbfc
    }

        .review-form input:focus, .review-form textarea:focus {
            border-color: #155eef;
            box-shadow: 0 0 0 4px rgba(21,94,239,.08)
        }

    .review-form textarea {
        min-height: 150px;
        resize: vertical
    }

.review-stars {
    display: flex;
    gap: 7px;
    color: #c5cad3;
    font-size: 22px;
    direction: ltr
}

    .review-stars button {
        border: 0;
        background: transparent;
        color: inherit;
        font-size: inherit;
        cursor: pointer
    }

        .review-stars button:hover {
            color: #ffb400
        }

.review-consent {
    grid-column: 1/-1;
    display: flex !important;
    flex-direction: row !important;
    align-items: center
}

.review-submit {
    justify-self: start;
    border: 0;
    border-radius: 11px;
    background: #155eef;
    color: #fff;
    padding: 11px 24px;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer
}

@media(max-width:650px) {
    .ratings-layout {
        grid-template-columns: 1fr
    }

    .review-form {
        grid-template-columns: 1fr
    }

        .review-form label.full, .review-consent {
            grid-column: auto
        }

    .flower-review-box {
        padding: 20px
    }
}
.home-shop-categories {
    padding: 92px 0;
    background: linear-gradient(180deg,#fff 0,#f7f9fd 100%);
    position: relative;
    overflow: hidden
}

    .home-shop-categories:before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: rgba(24,94,239,.055);
        left: -240px;
        top: 60px
    }

.home-shop-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 38px;
    position: relative
}

    .home-shop-head .eyebrow {
        display: inline-flex;
        padding: 7px 12px;
        border-radius: 999px;
        background: #edf3ff;
        color: #155eef;
        font-weight: 800;
        font-size: 13px
    }

    .home-shop-head h2 {
        font-size: 38px;
        margin: 13px 0 9px
    }

    .home-shop-head p {
        color: #667085;
        line-height: 1.9;
        margin: 0
    }

.home-shop-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 22px;
    position: relative
}

.home-shop-card {
    --accent: #ed4a7b;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e9edf5;
    border-radius: 28px;
    background: #fff;
    color: #14213d;
    box-shadow: 0 18px 55px rgba(25,46,90,.08);
    transition: .35s
}

    .home-shop-card:nth-child(2) {
        --accent: #39a68b
    }

    .home-shop-card:nth-child(3) {
        --accent: #ef8c37
    }

    .home-shop-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 26px 65px rgba(25,46,90,.14)
    }

.home-shop-image {
    height: 245px;
    overflow: hidden;
    background: #f6f8fb;
    position: relative
}

    .home-shop-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .5s
    }

.home-shop-card:hover img {
    transform: scale(1.05)
}

.home-shop-image span {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    font-size: 11px;
    font-weight: 800
}

.home-shop-body {
    padding: 21px 22px 23px
}

.home-shop-icon {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    margin-top: -44px;
    margin-bottom: 12px;
    position: relative;
    border-radius: 15px;
    border: 5px solid #fff;
    background: var(--accent);
    color: #fff;
    font-size: 20px;
    box-sizing: content-box
}

.home-shop-body h3 {
    font-size: 21px;
    margin: 0 0 7px
}

.home-shop-body p {
    min-height: 50px;
    color: #667085;
    font-size: 13px;
    line-height: 1.8;
    margin: 0 0 15px
}

.home-shop-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--accent);
    font-weight: 900
}

    .home-shop-link i {
        display: grid;
        place-items: center;
        width: 31px;
        height: 31px;
        border-radius: 50%;
        background: #f5f7fb;
        font-style: normal
    }

.home-shop-all {
    text-align: center;
    margin-top: 30px
}

    .home-shop-all .btn {
        padding: 13px 24px
    }

@media(max-width:900px) {
    .home-shop-grid {
        grid-template-columns: 1fr 1fr
    }

    .home-shop-card:last-child {
        grid-column: 1/-1
    }
}

@media(max-width:620px) {
    .home-shop-categories {
        padding: 62px 0
    }

    .home-shop-head h2 {
        font-size: 29px
    }

    .home-shop-grid {
        grid-template-columns: 1fr
    }

    .home-shop-card:last-child {
        grid-column: auto
    }

    .home-shop-image {
        height: 225px
    }
}
.catalog-hero {
    background: linear-gradient(135deg,#f7f9fd,#eef4ff);
    overflow: hidden
}

.catalog-head {
    display: grid;
    grid-template-columns: 1fr 330px;
    align-items: center;
    gap: 45px;
    padding: 12px 0 42px
}

    .catalog-head h1 {
        font-size: 42px;
        margin: 17px 0 7px
    }

    .catalog-head p {
        color: var(--shop-muted);
        font-size: 16px;
        line-height: 1.9
    }

    .catalog-head img {
        width: 100%;
        height: 230px;
        object-fit: cover;
        border-radius: 28px;
        box-shadow: 0 18px 45px rgba(32,57,110,.12)
    }

.catalog-section {
    padding: 44px 0 78px
}

.catalog-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 21px
}

.catalog-tabs {
    display: flex;
    gap: 7px;
    flex-wrap: wrap
}

    .catalog-tabs a {
        padding: 10px 16px;
        border: 1px solid var(--shop-line);
        border-radius: 11px;
        color: #596377;
        background: #fff;
        font-size: 13px;
        font-weight: 700
    }

        .catalog-tabs a.active {
            color: #fff;
            background: var(--shop-blue);
            border-color: var(--shop-blue)
        }

.catalog-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 270px;
    border: 1px solid #dfe4ed;
    border-radius: 12px;
    padding: 0 12px;
    background: #fff
}

    .catalog-search input {
        width: 100%;
        height: 43px;
        border: 0;
        outline: 0;
        font-family: inherit
    }

.catalog-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 16px;
    border-radius: 13px;
    background: #f7f9fc;
    margin-bottom: 20px;
    font-size: 13px
}

    .catalog-meta select {
        border: 0;
        background: transparent;
        font-family: inherit;
        color: #626d80
    }

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px
}

.catalog-card {
    overflow: hidden;
    border: 1px solid var(--shop-line);
    border-radius: 23px;
    background: #fff;
    transition: .3s
}

    .catalog-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 50px rgba(30,51,94,.11)
    }

.catalog-image {
    display: block;
    position: relative;
    height: 260px;
    background: #f6f8fc;
    overflow: hidden
}

    .catalog-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .45s
    }

.catalog-card:hover .catalog-image img {
    transform: scale(1.04)
}

.catalog-image > span {
    position: absolute;
    right: 15px;
    top: 15px;
    border-radius: 999px;
    padding: 6px 10px;
    background: var(--shop-pink);
    color: #fff;
    font-size: 11px;
    font-weight: 800
}

.catalog-body {
    padding: 18px
}

    .catalog-body small {
        color: var(--shop-blue);
        font-weight: 800
    }

    .catalog-body h2 {
        font-size: 18px;
        margin: 7px 0
    }

        .catalog-body h2 a {
            color: var(--shop-ink)
        }

    .catalog-body p {
        min-height: 42px;
        color: var(--shop-muted);
        font-size: 13px;
        line-height: 1.7;
        margin: 0 0 8px
    }

.catalog-rating {
    color: #ffb400;
    font-size: 13px
}

    .catalog-rating span {
        color: #6e7788
    }

.catalog-price {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 13px 0
}

    .catalog-price b {
        color: var(--shop-ink)
    }

    .catalog-price del {
        font-size: 11px;
        color: #9da4b1
    }

.catalog-detail {
    display: flex;
    justify-content: center;
    padding: 10px;
    border-radius: 10px;
    background: #eef4ff;
    color: var(--shop-blue);
    font-weight: 800;
    font-size: 13px
}

.catalog-empty {
    display: none;
    text-align: center;
    padding: 65px;
    color: var(--shop-muted)
}

.fp-content-stack {
    background: var(--shop-bg);
    padding: 52px 0
}

.fp-content-grid {
    display: grid;
/*    grid-template-columns: minmax(0,1.35fr) minmax(270px,.65fr);
*/    gap: 20px
}

.fp-content-main, .fp-content-side {
    display: flex;
    flex-direction: column;
    gap: 18px
}

.fp-section-card {
    background: #fff;
    border: 1px solid var(--shop-line);
    border-radius: 22px;
    padding: 27px;
    line-height: 2;
    color: #4f5b70
}

    .fp-section-card h2 {
        font-size: 20px;
        color: var(--shop-ink);
        margin: 0 0 10px
    }

.attribute-list {
    margin: 0
}

.attribute-row {
    display: grid;
    grid-template-columns: 170px 1fr;
    align-items: center;
    gap: 20px;
    padding: 13px 0;
    border-bottom: 1px solid var(--shop-line)
}

    .attribute-row:last-child {
        border-bottom: 0
    }

    .attribute-row dt {
        color: #707a8c
    }

    .attribute-row dd {
        margin: 0;
        color: var(--shop-ink);
        font-weight: 700
    }

.delivery-highlight {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f6f9ff;
    color: #4d5a70
}

    .delivery-highlight strong {
        color: #0aa4cd
    }

.fp-fixed-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #dfe4ed;
    border-radius: 13px;
    padding: 11px 14px;
    background: #f9fafc
}

    .fp-fixed-value span {
        font-weight: 800;
        color: var(--shop-ink)
    }

.service-facts {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px
}

.service-fact {
    padding: 13px;
    border-radius: 13px;
    background: #f7f9fc
}

    .service-fact small {
        display: block;
        color: #788195
    }

    .service-fact b {
        color: var(--shop-ink);
        font-size: 13px
    }

.included-list {
    padding: 0;
    margin: 0;
    list-style: none
}

    .included-list li {
        position: relative;
        padding: 7px 25px 7px 0
    }

        .included-list li:before {
            content: "✓";
            position: absolute;
            right: 0;
            color: #18a36a;
            font-weight: 900
        }

@media(max-width:990px) {
    .catalog-grid {
        grid-template-columns: 1fr 1fr
    }

    .fp-content-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:640px) {
    .catalog-head {
        grid-template-columns: 1fr;
        padding-bottom: 28px
    }

        .catalog-head h1 {
            font-size: 30px
        }

        .catalog-head img {
            display: none
        }

    .catalog-toolbar {
        align-items: stretch;
        flex-direction: column
    }

    .catalog-tabs {
        overflow-x: auto;
        flex-wrap: nowrap
    }

        .catalog-tabs a {
            white-space: nowrap
        }

    .catalog-search {
        width: auto
    }

    .catalog-grid {
        grid-template-columns: 1fr
    }

    .catalog-image {
        height: 245px
    }

    .attribute-row {
        grid-template-columns: 1fr;
        gap: 3px
    }

    .service-facts {
        grid-template-columns: 1fr
    }

    .fp-section-card {
        padding: 20px
    }
}
:root {
    --shop-ink: #14213d;
    --shop-muted: #667085;
    --shop-line: #e9edf5;
    --shop-blue: #155eef;
    --shop-orange: #ff8a2a;
    --shop-pink: #ed4a7b;
    --shop-card: #fff;
    --shop-bg: #f6f8fc
}

body.shop-showcase {
    background: #fff;
    color: var(--shop-ink)
}

.shop-showcase .site-header {
    box-shadow: 0 8px 30px rgba(20,33,61,.05)
}

.sc-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #8992a5;
    padding: 23px 0
}

    .sc-breadcrumb a {
        color: #556074
    }

    .sc-breadcrumb i {
        font-style: normal;
        color: #bdc3cf
    }

.sc-hero {
    position: relative;
    overflow: hidden;
    padding: 42px 0 34px;
    background: radial-gradient(circle at 12% 20%,rgba(255,184,83,.18),transparent 28%),radial-gradient(circle at 88% 80%,rgba(56,118,255,.12),transparent 30%),#f7f9fd
}

    .sc-hero:after {
        content: "";
        position: absolute;
        inset: auto -80px -170px auto;
        width: 450px;
        height: 450px;
        border: 1px solid rgba(21,94,239,.09);
        border-radius: 50%;
        box-shadow: 0 0 0 70px rgba(21,94,239,.025),0 0 0 140px rgba(21,94,239,.018)
    }

.sc-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 60px;
    min-height: 330px
}

.sc-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 13px;
    border-radius: 999px;
    background: #fff;
    color: var(--shop-blue);
    box-shadow: 0 7px 25px rgba(24,56,120,.08);
    font-weight: 700;
    font-size: 13px
}

    .sc-kicker:before {
        content: "";
        width: 8px;
        height: 8px;
        background: var(--shop-orange);
        border-radius: 50%;
        box-shadow: 0 0 0 5px rgba(255,138,42,.12)
    }

.sc-hero h1 {
    font-size: clamp(34px,4vw,57px);
    line-height: 1.35;
    margin: 17px 0 10px;
    letter-spacing: -1.7px
}

    .sc-hero h1 span {
        color: var(--shop-blue)
    }

.sc-hero p {
    font-size: 17px;
    line-height: 2;
    color: var(--shop-muted);
    max-width: 610px;
    margin: 0
}

.sc-hero-actions {
    display: flex;
    gap: 12px;
    margin-top: 25px
}

    .sc-hero-actions a {
        padding: 13px 22px
    }

.sc-visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    transform: rotate(-2deg)
}

    .sc-visual img {
        width: 100%;
        height: 160px;
        object-fit: cover;
        border-radius: 27px;
        background: #fff;
        box-shadow: 0 18px 48px rgba(37,61,111,.12)
    }

        .sc-visual img:first-child {
            grid-row: span 2;
            height: 334px
        }

        .sc-visual img:nth-child(3) {
            transform: translateX(-24px)
        }

.category-showcase {
    padding: 75px 0 38px
}

.sc-section-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 34px
}

    .sc-section-head .eyebrow {
        color: var(--shop-blue);
        font-weight: 800;
        font-size: 13px
    }

    .sc-section-head h2 {
        font-size: 34px;
        margin: 8px 0 9px
    }

    .sc-section-head p {
        color: var(--shop-muted);
        line-height: 1.9;
        margin: 0
    }

.category-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 22px
}

.category-card {
    --accent: #ed4a7b;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--shop-line);
    border-radius: 30px;
    background: var(--shop-card);
    color: var(--shop-ink);
    box-shadow: 0 18px 60px rgba(25,46,90,.07);
    transition: .35s ease
}

    .category-card:nth-child(2) {
        --accent: #39a68b
    }

    .category-card:nth-child(3) {
        --accent: #ef8c37
    }

    .category-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 65px rgba(25,46,90,.13)
    }

.category-media {
    position: relative;
    overflow: hidden;
    height: 280px;
    background: #f6f8fb
}

    .category-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .6s ease
    }

.category-card:hover .category-media img {
    transform: scale(1.055)
}

.category-count {
    position: absolute;
    right: 17px;
    top: 17px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(8px);
    font-size: 12px;
    font-weight: 700
}

.category-content {
    padding: 22px 23px 24px
}

.category-icon {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    margin-top: -45px;
    margin-bottom: 12px;
    position: relative;
    border: 5px solid #fff;
    border-radius: 16px;
    background: var(--accent);
    color: #fff;
    font-size: 20px;
    box-sizing: content-box
}

.category-content h3 {
    font-size: 22px;
    margin: 0 0 7px
}

.category-content p {
    color: var(--shop-muted);
    font-size: 14px;
    line-height: 1.8;
    margin: 0 0 18px
}

.category-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--accent);
    font-weight: 800
}

    .category-link span {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: color-mix(in srgb,var(--accent) 12%,white);
        transition: .25s
    }

.category-card:hover .category-link span {
    transform: translateX(-4px)
}

.shop-benefits {
    padding: 38px 0 82px
}

.benefit-row {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    padding: 28px;
    border: 1px solid var(--shop-line);
    border-radius: 27px;
    background: #fff;
    box-shadow: 0 14px 45px rgba(25,46,90,.06)
}

.benefit {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 5px 20px;
    border-left: 1px solid var(--shop-line)
}

    .benefit:last-child {
        border-left: 0
    }

.benefit-icon {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    height: 44px;
    border-radius: 14px;
    background: #edf3ff;
    color: var(--shop-blue);
    font-size: 20px
}

.benefit b {
    display: block;
    font-size: 14px
}

.benefit small {
    color: var(--shop-muted);
    font-size: 11px
}
/* Flower product page */
.fp-shell {
    padding-bottom: 75px
}

.fp-summary {
    display: grid;
    grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr);
    gap: 50px;
    align-items: start;
    padding: 13px 0 55px
}

.fp-gallery {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 14px;
    direction: ltr
}

.fp-stage {
    position: relative;
    min-height: 560px;
    border-radius: 29px;
    background: #f6f7fa;
    overflow: hidden
}

    .fp-stage img {
        width: 100%;
        height: 100%;
        min-height: 560px;
        object-fit: cover;
        display: block;
        transition: opacity .25s,transform .45s
    }

    .fp-stage:hover img {
        transform: scale(1.025)
    }

.fp-badge {
    position: absolute;
    left: 18px;
    top: 18px;
    border-radius: 999px;
    background: var(--shop-pink);
    color: #fff;
    padding: 8px 13px;
    font-size: 12px;
    font-weight: 800
}

.fp-zoom {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    box-shadow: 0 7px 25px rgba(25,46,90,.14);
    font-size: 19px;
    cursor: pointer
}

.fp-thumbs {
    display: flex;
    flex-direction: column;
    gap: 11px
}

.fp-thumb {
    height: 82px;
    border: 2px solid transparent;
    border-radius: 18px;
    background: #f6f7fa;
    padding: 0;
    overflow: hidden;
    cursor: pointer
}

    .fp-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .fp-thumb.active {
        border-color: var(--shop-blue);
        box-shadow: 0 0 0 4px rgba(21,94,239,.1)
    }

.fp-info {
    padding-top: 12px
}

.fp-stock {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    color: #16794a;
    background: #eaf8f1;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700
}

    .fp-stock:before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #20a566
    }

.fp-info h1 {
    font-size: 34px;
    line-height: 1.5;
    margin: 14px 0 5px
}

.fp-subtitle {
    font-size: 15px;
    color: var(--shop-muted);
    margin: 0 0 12px
}

.fp-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--shop-line)
}

.fp-stars {
    color: #ffb400;
    letter-spacing: 1px
}

.fp-rating a {
    font-size: 13px;
    color: var(--shop-blue)
}

.fp-price {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 23px
}

    .fp-price strong {
        font-size: 28px;
        color: var(--shop-ink)
    }

    .fp-price del {
        color: #9aa2b1
    }

.fp-discount {
    padding: 5px 9px;
    border-radius: 8px;
    background: #fff0f4;
    color: var(--shop-pink);
    font-size: 12px;
    font-weight: 800
}

.fp-feature-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    margin: 0 0 25px;
    padding: 18px;
    border-radius: 18px;
    background: #f7f9fc
}

.fp-feature {
    display: flex;
    gap: 9px;
    align-items: center;
    color: #4e596d;
    font-size: 13px
}

    .fp-feature i {
        display: grid;
        place-items: center;
        width: 29px;
        height: 29px;
        border-radius: 9px;
        background: #fff;
        color: var(--shop-blue);
        font-style: normal
    }

.fp-option {
    margin: 0 0 21px
}

.fp-option-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px
}

    .fp-option-head b {
        font-size: 14px
    }

    .fp-option-head span {
        font-size: 12px;
        color: var(--shop-muted)
    }

.color-options, .size-options {
    display: flex;
    gap: 9px;
    flex-wrap: wrap
}

.color-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--c);
    border: 4px solid #fff;
    box-shadow: 0 0 0 1px #dfe3eb;
    cursor: pointer
}

    .color-btn.active {
        box-shadow: 0 0 0 2px var(--shop-blue)
    }

.size-btn {
    border: 1px solid #dfe3eb;
    background: #fff;
    border-radius: 11px;
    padding: 9px 14px;
    cursor: pointer;
    font-family: inherit
}

    .size-btn.active {
        border-color: var(--shop-blue);
        background: #edf3ff;
        color: var(--shop-blue);
        font-weight: 800
    }

.fp-message {
    width: 100%;
    height: 82px;
    resize: none;
    border: 1px solid #dfe3eb;
    border-radius: 15px;
    padding: 13px;
    font-family: inherit;
    outline: 0
}

    .fp-message:focus {
        border-color: var(--shop-blue);
        box-shadow: 0 0 0 4px rgba(21,94,239,.08)
    }

.fp-buy-row {
    display: grid;
    grid-template-columns: 116px 1fr;
    gap: 10px
}

.fp-quantity {
    display: grid;
    grid-template-columns: 35px 1fr 35px;
    align-items: center;
    border: 1px solid #dfe3eb;
    border-radius: 13px;
    overflow: hidden
}

    .fp-quantity button {
        border: 0;
        background: #f5f7fa;
        height: 48px;
        font-size: 19px;
        cursor: pointer
    }

    .fp-quantity input {
        width: 100%;
        border: 0;
        text-align: center;
        font-family: inherit;
        font-weight: 800
    }

.fp-add {
    border: 0;
    border-radius: 13px;
    background: var(--shop-blue);
    color: #fff;
    font-family: inherit;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 11px 25px rgba(21,94,239,.24)
}

.fp-notes {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin-top: 13px
}

.fp-note {
    font-size: 11px;
    color: #667085;
    text-align: center;
    padding: 9px;
    border-radius: 10px;
    background: #f7f9fc
}

.fp-tabs-wrap {
    background: var(--shop-bg);
    padding: 55px 0
}

.fp-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid #dfe3eb;
    margin-bottom: 18px
}

.fp-tab {
    border: 0;
    background: transparent;
    padding: 13px 20px;
    font-family: inherit;
    font-weight: 700;
    color: #788195;
    cursor: pointer;
    border-bottom: 3px solid transparent
}

    .fp-tab.active {
        color: var(--shop-blue);
        border-color: var(--shop-blue)
    }

.fp-panel {
    display: none;
    background: #fff;
    border: 1px solid var(--shop-line);
    border-radius: 22px;
    padding: 29px;
    line-height: 2;
    color: #4f5b70
}

    .fp-panel.active {
        display: block
    }

    .fp-panel h2 {
        color: var(--shop-ink);
        font-size: 22px;
        margin: 0 0 10px
    }

.spec-table {
    width: 100%;
    border-collapse: collapse
}

    .spec-table td {
        padding: 13px 10px;
        border-bottom: 1px solid var(--shop-line)
    }

        .spec-table td:first-child {
            width: 30%;
            color: #7b8496
        }

.review-summary {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 35px;
    align-items: center
}

.review-score {
    text-align: center
}

    .review-score strong {
        display: block;
        font-size: 50px;
        color: var(--shop-ink)
    }

.review-bars > div {
    display: grid;
    grid-template-columns: 60px 1fr 35px;
    align-items: center;
    gap: 10px;
    margin: 7px 0;
    font-size: 12px
}

.review-bar {
    height: 7px;
    border-radius: 999px;
    background: #edf0f5;
    overflow: hidden
}

    .review-bar i {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: #ffb400
    }

.related-products {
    padding: 70px 0
}

.fp-products {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 17px
}

.fp-card {
    border: 1px solid var(--shop-line);
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    transition: .3s
}

    .fp-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 17px 45px rgba(25,46,90,.1)
    }

    .fp-card img {
        display: block;
        width: 100%;
        height: 210px;
        object-fit: cover;
        background: #f7f8fb
    }

.fp-card-body {
    padding: 16px
}

.fp-card h3 {
    font-size: 15px;
    margin: 0 0 6px
}

.fp-card p {
    font-size: 12px;
    color: var(--shop-muted);
    margin: 0 0 12px
}

.fp-card b {
    color: var(--shop-blue);
    font-size: 14px
}

.fp-toast {
    position: fixed;
    right: 50%;
    bottom: 35px;
    z-index: 9999;
    transform: translate(50%,25px);
    padding: 12px 18px;
    border-radius: 13px;
    background: #14213d;
    color: #fff;
    box-shadow: 0 15px 40px rgba(20,33,61,.3);
    opacity: 0;
    pointer-events: none;
    transition: .3s
}

    .fp-toast.show {
        opacity: 1;
        transform: translate(50%,0)
    }

@media(max-width:990px) {
    .sc-hero-grid {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .sc-visual {
        max-width: 650px
    }

    .category-cards {
        grid-template-columns: 1fr 1fr
    }

    .category-card:last-child {
        grid-column: 1/-1
    }

    .benefit-row {
        grid-template-columns: 1fr 1fr;
        gap: 20px
    }

    .benefit:nth-child(2) {
        border-left: 0
    }

    .fp-summary {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .fp-stage, .fp-stage img {
        min-height: 510px
    }

    .fp-products {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:640px) {
    .sc-hero {
        padding-top: 25px
    }

    .sc-hero-grid {
        min-height: auto
    }

    .sc-hero h1 {
        font-size: 34px
    }

    .sc-hero p {
        font-size: 14px
    }

    .sc-visual {
        gap: 8px
    }

        .sc-visual img {
            height: 105px;
            border-radius: 18px
        }

            .sc-visual img:first-child {
                height: 218px
            }

            .sc-visual img:nth-child(3) {
                transform: translateX(-10px)
            }

    .category-showcase {
        padding-top: 52px
    }

    .sc-section-head h2 {
        font-size: 27px
    }

    .category-cards {
        grid-template-columns: 1fr
    }

    .category-card:last-child {
        grid-column: auto
    }

    .category-media {
        height: 240px
    }

    .benefit-row {
        grid-template-columns: 1fr;
        padding: 17px
    }

    .benefit {
        border-left: 0;
        border-bottom: 1px solid var(--shop-line);
        padding: 12px 5px
    }

        .benefit:last-child {
            border-bottom: 0
        }

    .fp-shell {
        padding-bottom: 45px
    }

    .fp-summary {
        padding-top: 0
    }

    .fp-gallery {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .fp-stage {
        grid-row: 1;
        min-height: 390px
    }

        .fp-stage img {
            min-height: 390px
        }

    .fp-thumbs {
        grid-row: 2;
        flex-direction: row
    }

    .fp-thumb {
        width: 70px;
        height: 64px
    }

    .fp-info h1 {
        font-size: 27px
    }

    .fp-feature-list {
        grid-template-columns: 1fr
    }

    .fp-price {
        flex-wrap: wrap
    }

        .fp-price strong {
            font-size: 24px
        }

    .fp-buy-row {
        grid-template-columns: 100px 1fr
    }

    .fp-notes {
        grid-template-columns: 1fr
    }

    .fp-tabs {
        overflow-x: auto
    }

    .fp-tab {
        white-space: nowrap;
        padding-inline: 14px
    }

    .fp-panel {
        padding: 20px
    }

    .review-summary {
        grid-template-columns: 1fr
    }

    .fp-products {
        grid-template-columns: 1fr 1fr;
        gap: 10px
    }

    .fp-card img {
        height: 150px
    }

    .fp-card-body {
        padding: 12px
    }

    .related-products {
        padding: 48px 0
    }

    .bottom-nav ~ .fp-toast {
        bottom: 85px
    }
}
/* ویژگی‌های محصول ـ چیدمان دو ستونه منظم */
.fp-info .product-attributes-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 20px 0 !important;
    padding: 12px !important;
    background: #f7f8fb !important;
    border-radius: 18px !important;
}

    .fp-info .product-attributes-summary .fp-feature,
    .fp-info .product-attributes-summary .fp-feature:nth-child(n) {
        grid-area: auto !important;
        grid-column: auto !important;
        grid-row: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 64px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        gap: 10px !important;
        background: #fff !important;
        border: 1px solid #e9edf4 !important;
        border-radius: 13px !important;
        box-sizing: border-box !important;
    }

        /* آیکن ویژگی */
        .fp-info .product-attributes-summary .fp-feature i {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex: 0 0 36px !important;
            width: 36px !important;
            height: 36px !important;
            margin: 0 !important;
            color: #1769ff !important;
            background: #eef4ff !important;
            border-radius: 10px !important;
            font-size: 16px !important;
            font-style: normal !important;
        }

        /* متن ویژگی */
        .fp-info .product-attributes-summary .fp-feature span {
            display: block !important;
            flex: 1 !important;
            min-width: 0 !important;
            color: #515b6d !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            line-height: 1.7 !important;
        }

        /* عنوان ویژگی */
        .fp-info .product-attributes-summary .fp-feature b {
            display: block !important;
            margin: 0 0 2px !important;
            color: #121c32 !important;
            font-size: 15px !important;
            font-weight: 800 !important;
            line-height: 1.5 !important;
        }

/* موبایل */
@media (max-width: 600px) {
    .fp-info .product-attributes-summary {
        grid-template-columns: 1fr !important;
    }
}