/* =========================================================
   GLOBAL / BASE
   ========================================================= */

.stp-section {
    margin-bottom: 100px;
}

.stp-main-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stp-main-section h1 {
    font-size: 48px;
}

.stp-main-section h4 {
    font-size: 18px;
}

/* =========================================================
   BUTTON / LINK STYLES
   ========================================================= */

.links-section .stp-link {
    margin: 6px !important;
}

.stp-link {
    background: linear-gradient(180deg, #b84cff 0%, #7a1fd6 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow:
            0 6px 14px rgba(122, 31, 214, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.stp-link:hover {
    color: #ffffff;
    transition: 0.5s;
    transform: translateY(-1px);
    box-shadow:
            0 -3px 7px rgba(200, 120, 255, 0.65),
            0 5px 10px rgba(122, 31, 214, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.stp-link:active {
    transform: translateY(1px);
    box-shadow:
            0 4px 10px rgba(122, 31, 214, 0.4),
            inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* =========================================================
   STP ART CAROUSEL (PRODUCTS)
   ========================================================= */

.stp-art-carousel {
    display: flex;
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -49vw;
    margin-right: -49vw;
}

.stp-section-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.stp-art-carousel::-webkit-scrollbar {
    height: 6px;
}

.stp-art-carousel::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

/* ITEM */
.stp-carousel-item {
    flex: 0 0 280px;
    background: #fff;
    padding: 5px;
    scroll-snap-align: start;
}

.stp-carousel-item:hover {}

/* IMAGE */
.carousel-item-img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f5f5f5;
}

.carousel-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.carousel-item-artist {
    margin-top: 14px !important;
}

/* DESCRIPTION */
.carousel-item-name {
    line-height: 1;
    color: #222;
}

/* PRICE */
.carousel-item-price {
    margin-top: 8px;
    font-size: 18px;
    color: #6b0cb0;
}

/* Swiper arrows (product carousel) */
.stp-carousel-btn-next.swiper-button-next {
    right: 2% !important;
}

.stp-carousel-btn-next.swiper-button-next,
.stp-carousel-btn-prev.swiper-button-prev {
    top: 40% !important;
}

/* =========================================================
   RESPONSIVE FIXES (ART CAROUSEL)
   ========================================================= */

/* Desktop/tablet tuning */
@media (max-width: 1024px) {
    .stp-section-1 {
        margin-bottom: 60px;
        gap: 24px;
    }

    .stp-main-section h1 {
        font-size: 38px;
        line-height: 1.1;
    }

    .stp-main-section h4 {
        font-size: 16px;
    }

    .stp-carousel-item {
        flex: 0 0 240px;
    }
}

/* Tablet / large phones */
@media (max-width: 768px) {
    .stp-section-1 {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        margin-bottom: 40px;
        gap: 16px;
    }

    .headers-section h1,
    .stp-main-section h1 {
        font-size: 32px;
        line-height: 1.15;
    }

    .headers-section h4,
    .stp-main-section h4 {
        font-size: 16px;
        line-height: 1.3;
    }

    .links-section {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
    }

    .links-section .stp-link {
        margin: 0 !important;
    }

    .stp-link {
        padding: 12px 18px;
        font-size: 15px;
        border-radius: 10px;
    }

    .stp-art-carousel {
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding: 0 16px;
    }

    .stp-carousel-item {
        flex: 0 0 220px;
        padding: 10px;
    }

    .carousel-item-price {
        font-size: 16px;
    }

    .stp-carousel-btn-next.swiper-button-next,
    .stp-carousel-btn-prev.swiper-button-prev {
        top: 45% !important;
    }
}

/* Phones */
@media (max-width: 480px) {
    .stp-section-1 {
        margin-bottom: 28px;
        gap: 12px;
    }

    .headers-section h1,
    .stp-main-section h1 {
        font-size: 26px;
        line-height: 1.15;
    }

    .headers-section h4,
    .stp-main-section h4 {
        font-size: 14px;
        line-height: 1.35;
    }

    .links-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
    }

    .stp-link {
        width: 100%;
        text-align: center;
        padding: 12px 12px;
        font-size: 14px;
        border-radius: 10px;
    }

    .stp-art-carousel {
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding: 0 12px;
        margin-left: -50vw;
        margin-right: -50vw;
    }

    .stp-carousel-item {
        flex: 0 0 170px;
        padding: 8px;
    }

    .carousel-item-artist {
        margin-top: 10px !important;
        font-size: 13px;
    }

    .carousel-item-name {
        font-size: 14px;
        line-height: 1.15;
    }

    .carousel-item-price {
        font-size: 15px;
        margin-top: 6px;
    }

    .stp-carousel-btn-next,
    .stp-carousel-btn-prev {
        display: none !important;
    }
}

/* Very small phones */
@media (max-width: 360px) {
    .links-section {
        grid-template-columns: 1fr;
    }

    .stp-carousel-item {
        flex: 0 0 155px;
    }
}

/* =========================================================
   STP SECTION HEADER (GENERAL)
   ========================================================= */

.stp-section-header {
    width: 100%;
    margin-bottom: 40px;
}

.stp-section-header h1 {
    font-size: 48px;
    line-height: 1.15;
    margin: 0 0 12px 0;
    color: #000;
}

.stp-section-header h4 {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0 0 20px 0;
    color: #222;
}

.stp-section-header .underline {
    width: 100%;
    height: 1px;
    background-color: #f2c94c;
}

@media (max-width: 768px) {
    .stp-section-header h1 {
        font-size: 32px;
    }

    .stp-section-header h4 {
        font-size: 16px;
    }

    .stp-section-header {
        margin-bottom: 28px;
    }
}

@media (max-width: 480px) {
    .stp-section-header h1 {
        font-size: 26px;
        line-height: 1.2;
    }

    .stp-section-header h4 {
        font-size: 14px;
    }
}

/* =========================================================
   ICONS UNDER CAROUSEL
   ========================================================= */

.stp-section-content-under-carousel {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    flex-wrap: nowrap;
}

.stp-section-content-item {
    flex: 1 1 0;
    text-align: center;
    max-width: 160px;
    margin: 0 auto;
}

.stp-icon {
    width: 100%;
    max-width: 120px;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    padding: 18px;
    object-fit: contain;
}

.stp-icon-name {
    text-transform: uppercase;
    margin-top: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #222;
    text-align: center;
}

@media (max-width: 1024px) {
    .stp-section-content-under-carousel {
        gap: 20px;
    }

    .stp-section-content-item {
        max-width: 140px;
    }
}

@media (max-width: 768px) {
    .stp-section-content-under-carousel {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .stp-section-content-item {
        flex: 0 0 calc(33.333% - 20px);
        max-width: none;
    }

    .stp-icon {
        max-width: 100px;
        padding: 14px;
    }

    .stp-icon-name {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .stp-section-content-item {
        flex: 0 0 calc(50% - 16px);
    }

    .stp-icon {
        max-width: 90px;
        padding: 12px;
    }

    .stp-icon-name {
        font-size: 13px;
    }
}

/* =========================================================
   VIDEO SECTION
   ========================================================= */

.stp-video-section {
    position: relative;
    width: 100vw;
    height: 700px;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}

.stp-video-inner {
    max-width: 1450px;
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stp-video {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

.stp-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .stp-video-section {
        height: 520px;
    }
}

@media (max-width: 768px) {
    .stp-video-section {
        height: 420px;
    }
}

@media (max-width: 480px) {
    .stp-video-section {
        height: 300px;
    }
}

/* =========================================================
   SECTION CONTENT BASE
   ========================================================= */

.stp-section-content {
    margin: 0 auto;
}

.stp-content-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.stp-section-content-img-item {
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
}

.stp-section-content-img-item a {
    display: block;
    width: 100%;
    height: 100%;
}

.stp-pid-potredy {
    padding-bottom: 50px !important;
}

/* =========================================================
   "PID POTREDY" GRID
   ========================================================= */

.stp-section-content-header {
    margin-bottom: 24px;
}

.stp-section-content-header h4 {
    font-size: 24px;
    margin: 0;
    margin-top: 5px;
}

.stp-section-content-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    font-size: 20px;
}

.stp-section-content-img-item {
    padding: 0;
    margin: 0;
}

.stp-section-content-img-item img {
    border: 15px solid #f4f4f4;
    min-height: 300px;
    min-width: 300px;
}

.stp-content-item-name {
    margin-top: 10px;
}

.material-toggle-arrow.expanded{
    position: relative;
    height: 40px;
    width: 40px;
    margin: 4px;
}

.material-toggle-arrow{
    position: relative;
    height: 40px;
    width: 140px;
    margin: 4px;
}

.material-toggle-arrow:before{
    content: "Інші матеріали";
    position: absolute;
    top: 14px;
    text-align: left;
    font-size: 12px;
    width: 115px;
    height: 20px;
}

.material-toggle-arrow.expanded:before {
    display: none;
}

.material-toggle-arrow:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 10px;
    height: 10px;
    border: 2px solid #000;
    border-left: none;
    border-bottom: none;
}

.material-toggle-arrow.expanded:after {
    left: 50%;
    right: auto;
}

body .woocommerce-product-gallery .swiper-main .swiper-slide:first-child .z-paspartu {
    top: 0 !important;
    transform: translate(-50%, 0) !important;
}

@media (max-width: 1200px) {
    .stp-section-content-img-item {
        padding-bottom: 20px !important;
    }

    .stp-section-content-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .stp-section-content-img-item {
        padding-bottom: 20px !important;
    }

    .stp-section-content-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .stp-section-content-header h4 {
        font-size: 22px;
    }

    .stp-pid-potredy {
        padding-bottom: 32px !important;
    }
}

@media (max-width: 560px) {
    .stp-section-content-img-item {
        padding-bottom: 20px !important;
    }

    .stp-section-content {
        padding: 0 16px;
    }

    .stp-section-content-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .stp-section-content-header {
        margin-bottom: 16px;
    }

    .stp-section-content-header h4 {
        font-size: 20px;
    }

    .stp-section-content-img-item img {
        min-width: 0;
        min-height: 0;
        width: 100%;
        height: 100%;
        border-width: 10px;
    }
}

/* =========================================================
   INTERIORS IMAGE BLOCK
   ========================================================= */

.stp-section-for-interiors-item {
    margin-bottom: 20px !important;
    position: relative;
    width: 100%;
    height: 500px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.stp-interior-caption {
    position: absolute;
    left: 24px;
    bottom: 24px;
    background: rgba(244, 200, 255, 0.92);
    padding: 8px 28px;
    border-radius: 10px;
    line-height: 1;
    max-width: 260px;
}

.stp-interior-caption h4 {
    margin: 0 0 4px;
    font-size: 18px;
    color: #6b0cb0;
}

.stp-interior-caption p {
    margin: 0;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: #333;
}

.stp-interior-caption:hover {
    cursor: pointer;
}

/* =========================================================
   SECTION HEADER (NAV VARIANT)
   ========================================================= */

/* IMPORTANT: underline must be in its own row, so we use grid */
.stp-section-header {
    display: grid;
    grid-template-columns: minmax(280px, 560px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 40px;
    row-gap: 18px;
    align-items: center;
    width: 100%;
}

/* LEFT (H1 + H4) */
.stp-header-text {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.stp-header-text h1 {
    margin: 0;
    font-size: 42px;
    line-height: 1.12;
}

.stp-header-text h4 {
    margin: 0;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 400;
    color: #555;
}

/* NAV */
.stp-header-navigation {
    grid-column: 2;
    grid-row: 1;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: block !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 6px;
    cursor: grab;
    user-select: none;
}

.stp-header-navigation:active {
    cursor: grabbing;
}

.stp-header-navigation::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.stp-header-navigation a {
    display: inline-block !important;
    vertical-align: middle;
    white-space: nowrap;
    margin-right: 36px;
    padding-bottom: 8px;
    text-decoration: none;
}

.stp-header-navigation a:last-child {
    margin-right: 0;
}

.stp-header-navigation a {
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 500;
    color: #777;
    text-decoration: none;
    position: relative;
    padding-bottom: 8px;
}

.stp-header-navigation a:hover {
    color: #000;
}

.stp-header-navigation a.is-active {
    color: #000;
    font-weight: 600;
}

.stp-header-navigation a.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #f2c94c;
}

/* UNDERLINE ALWAYS BOTTOM (spans full width) */
.stp-section-header .underline {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
}

/* ================= CONTENT ================= */

.stp-section-content {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* 4 columns */
.stp-section-content-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
}

/* CARD (keeps your bg + padding) */
.stp-section-content-item-img {
    background: #efefef;
    border-style: solid;
    padding: 18px;
}

.stp-section-content-item-img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.stp-section-content-item-img p {
    margin: 14px 0 0 0;
    font-size: 16px;
    font-weight: 600;
    color: #111;
}

@media (max-width: 1024px) {
    .stp-section-header {
        grid-template-columns: minmax(240px, 520px) minmax(0, 1fr);
        column-gap: 24px;
    }

    .stp-header-text h1 {
        font-size: 34px;
    }

    .stp-header-text h4 {
        font-size: 16px;
    }

    .stp-header-navigation {
        gap: 22px;
    }

    .stp-section-content-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 600px) {
    .stp-section-header {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        row-gap: 12px;
    }

    .stp-header-text {
        grid-column: 1;
        grid-row: 1;
    }

    .stp-header-navigation {
        grid-column: 1;
        grid-row: 2;
        justify-content: flex-start;
        gap: 16px;
    }

    .stp-section-header .underline {
        grid-column: 1;
        grid-row: 3;
    }

    .stp-header-text h1 {
        font-size: 28px;
    }

    .stp-header-text h4 {
        font-size: 14px;
    }

    .stp-section-content {
        margin-top: 18px;
        gap: 14px;
    }

    .stp-section-content-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .stp-section-content-item-img {
        padding: 12px;
    }

    .stp-section-content-item-img p {
        margin-top: 10px;
        font-size: 14px;
    }
}

@media (max-width: 360px) {
    .stp-section-content-row {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   HEADER: TEXT + LINK VARIANT (DUPLICATED IN SOURCE)
   ========================================================= */

.stp-section-header {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 24px;
    row-gap: 16px;
    align-items: center;
    width: 100%;
}

.stp-header-text {
    grid-column: 1;
    grid-row: 1;
}

.stp-header-text h1,
.stp-header-text h4 {
    margin: 0;
}

.stp-header-text h4 {
    margin-top: 8px;
    line-height: 1.35;
}

.stp-section-header .stp-link {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
}

.stp-section-header .underline {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
}

/* =========================================================
   ARTISTS SWIPER
   ========================================================= */

.stp-section-content-artists {
    position: relative;
    background: #efefef;
    margin-top: 26px;
    padding: 40px 64px;
    overflow: hidden;
}

/* Swiper container */
.stp-section-content-artists .swiper {
    width: 100%;
    overflow: hidden;
}

/* FORCE HORIZONTAL LINE */
.stp-section-content-artists .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
}

/* Slide */
.stp-section-content-artists .swiper-slide {
    height: auto;
    flex-shrink: 0 !important;
    display: flex;
    justify-content: center;
}

/* Card */
.stp-section-artist {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

/* Circle image wrapper */
.stp-artist-img {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    display: block;
}

.stp-artist-img img,
.stp-section-artist > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

/* Name */
.stp-artist-name {
    margin: 18px 0 0 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    color: #111;
    max-width: 240px;
}

/* =========================================================
   ARTISTS SWIPER BUTTONS
   ========================================================= */

.stp-section-content-artists {
    position: relative;
}

.stp-carousel-btn-prev.swiper-button-prev,
.stp-carousel-btn-next.swiper-button-next {
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    background: #000;
    cursor: pointer;
    z-index: 10;
}

.stp-carousel-btn-prev.swiper-button-prev {
    left: 20px;
}

.stp-carousel-btn-next.swiper-button-next {
    right: 20px;
}

.stp-carousel-btn-prev.swiper-button-prev:after,
.stp-carousel-btn-next.swiper-button-next:after {
    display: none;
}

.stp-carousel-btn-prev svg,
.stp-carousel-btn-next svg {
    display: block;
}

.stp-carousel-btn-prev svg path,
.stp-carousel-btn-next svg path {
    stroke: #fff;
}

.stp-carousel-btn-next svg {
    transform: scaleX(-1);
}

/* =========================================================
   ARTISTS SWIPER RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {
    .stp-section-content-artists {
        padding: 36px 56px;
    }

    .stp-artist-img {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 1024px) {
    .stp-section-content-artists {
        padding: 32px 52px;
    }

    .stp-artist-img {
        width: 180px;
        height: 180px;
    }

    .stp-artist-name {
        font-size: 16px;
        margin-top: 14px;
    }
}

@media (max-width: 768px) {
    .stp-section-header {
        grid-template-columns: 1fr auto;
        column-gap: 16px;
        row-gap: 12px;
    }

    .stp-section-content-artists {
        padding: 24px 44px;
    }

    .stp-artist-img {
        width: 150px;
        height: 150px;
    }
}

@media (max-width: 480px) {
    .stp-section-header {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .stp-section-header .stp-link {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .stp-section-header .underline {
        grid-row: 3;
    }

    .stp-section-content-artists {
        padding: 20px 40px;
    }

    .stp-artist-img {
        width: 130px;
        height: 130px;
    }

    .stp-artist-name {
        font-size: 15px;
        margin-top: 12px;
    }
}

.stp-section-comments {
    width: 100%;
    background: #f3f3f3;
}

.stp-section-header h1 {
    font-size: 40px !important;
}

.stp-section-comments-item  {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px !important;
}

.stp-section-comments-item.swiper-slide {
    display: flex !important;
    flex-direction: row;
    align-items: stretch;
    box-sizing: border-box;
    padding: 10px;
    padding-left: 50px;
    padding-right: 50px;
}

.stp-comment-item-img {
    flex: 0 0 50%;
}

.stp-comment-item-img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.stp-commtent-item-text {
    flex: 0 0 50%;
    padding-left: 20px !important;
    display: flex;
    flex-direction: column;
}

.stp-comment-header h4 {
    margin: 14px 0 0 0;
    font-size: 16px;
    font-weight: 600;
    color: #111;
}

.stp-comment-text {
    flex: 1;
    display: flex;
    align-items: center;
    opacity: 0.5;
}

.stp-comment-name {
    font-size: 18px;
    font-weight: 600;
    margin-top: auto;
}

.stp-comment-role {
    font-size: 16px;
    opacity: 0.5;
    margin-top: 20px !important;
}

.stp-review-btn-prev,
.stp-review-btn-next {
    background: none !important;
    transition: 0.3s;
}

.stp-review-btn-prev:hover svg path,
.stp-review-btn-next:hover svg path {
    background: none !important;
    stroke: grey;
    transition: 0.3s;
}

.stp-section-news-content {
    display: flex;
    gap: 10px;
}

.stp-news-item {
    flex: 0 0 calc((100% - 30px) / 4);
    display: flex;
    flex-direction: column;
}

.stp-news-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.stp-news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.stp-news-date {
    margin-top: 15px;
    font-size: 14px;
    opacity: 0.5;
}

.stp-news-title {
    margin-top: 8px;
    font-size: 18px;
    line-height: 1.4;
    flex-grow: 1;
}

.stp-news-link {
    margin-top: 80px;
    font-size: 14px;
    text-decoration: none;
}

.stp-news .stp-section-news-header h1.stp-news-h1 {
    display: block;
    margin: 0 0 12px 0;
    font-size: 48px;
    line-height: 1.15;
    color: #000;
}

.stp-news .stp-section-news-header p.stp-news-subtitle {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
    color: #222;
}

/* responsive only for these headings */
@media (max-width: 768px) {
    .stp-news .stp-section-news-header h1.stp-news-h1 { font-size: 32px; }
    .stp-news .stp-section-news-header p.stp-news-subtitle { font-size: 16px; }
}

@media (max-width: 480px) {
    .stp-news .stp-section-news-header h1.stp-news-h1 { font-size: 26px; }
    .stp-news .stp-section-news-header p.stp-news-subtitle { font-size: 14px; }
}

/* ===== STP FAQ (classic) ===== */
.stp-faq__wrap{
    display:flex;
    justify-content:space-between;
    gap:40px;
    align-items:flex-start;
}

.stp-faq__left{
    flex:0 0 42%;
    max-width:560px;
}

.stp-faq__title{
    margin:0 0 14px 0;
    font-size:44px;
    line-height:1.15;
    color:#000;
}

.stp-faq__desc{
    margin:0;
    font-size:16px;
    line-height:1.4;
    color:#222;
}

.stp-faq__right{
    flex:1 1 auto;
    min-width:0;
}

.stp-faq__accordion{
    border-top:1px solid rgba(25, 25, 25, 0.12);
}

.stp-faq__item{
    border-bottom:1px solid rgba(39, 39, 39, 0.12);
}

.stp-faq__question{
    text-transform: none !important;
    width:100%;
    background:transparent;
    border:none;
    padding:28px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    cursor:pointer;
    text-align:left;
    font-size:18px;
    font-weight:500;
    color:#222;
}

.stp-faq__chev{
    font-size:28px;
    line-height:1;
    transform:rotate(0deg);
    transition:transform .2s ease;
    color:#111;
}

.stp-faq__question[aria-expanded="true"] .stp-faq__chev{
    transform:rotate(90deg);
}

.stp-faq__question,
.stp-faq__question:hover,
.stp-faq__question:focus,
.stp-faq__question:active {
    background: transparent !important;
    color: #222 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transform: none !important;
    transition: none !important;
}

.stp-faq__answer{
    padding:0 0 20px 0;
}

.stp-faq__answer p{
    margin:0;
    font-size:16px;
    line-height:1.5;
    color:#444;
    max-width:920px;
}

.stp-faq__btn{
    display:inline-block;
    margin-top:22px;
    padding: 15px 25px 15px 25px;
}



/* Responsive */
@media (max-width: 1024px){
    .stp-faq__title{ font-size:38px; }
    .stp-faq__desc{ font-size:16px; }
    .stp-faq__question{ font-size:16px; }
}

@media (max-width: 768px){
    .stp-faq__wrap{ flex-direction:column; gap:18px; }
    .stp-faq__left{ flex:1 1 auto; max-width:none; }
    .stp-faq__title{ font-size:32px; }
}

@media (max-width: 480px){
    .stp-faq__title{ font-size:26px; }
    .stp-faq__desc{ font-size:14px; }
    .stp-faq__question{ padding:18px 0; }
}

/* ===== STP THREE BLOCKS ===== */

.stp-three-blocks__header h1{
    margin:0 0 10px 0;
    font-size:44px;
}

.stp-three-blocks__header h4{
    margin:0 0 18px 0;
    font-size:18px;
    font-weight:400;
    color:#222;
}

.stp-three-blocks__grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:40px;
    margin-top:40px;
}

.stp-three-blocks__item{
    display:flex;
    flex-direction:column;
}

.stp-three-blocks__image{
    width:100%;
    aspect-ratio:4 / 3;
    overflow:hidden;
    margin-bottom:18px;
}

.stp-three-blocks__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.stp-three-blocks__text{
    font-size:20px;
    margin-bottom:20px;
}

.stp-three-blocks__btn{

    width:fit-content;
    padding: 15px 80px;
}

/* Responsive */

@media (max-width:1024px){
    .stp-three-blocks__grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media (max-width:768px){
    .stp-three-blocks__grid{
        grid-template-columns:1fr;
        gap:24px;
    }
}

.stp-three-blocks__header .underline{
    width: 100%;
    height: 1px;
    background-color: #f2c94c;
    display: block;
    margin-top: 18px;
}

/* =========================================================
   FIX: STP Section (Header + Icons)
   H4 must be under H1, link on the right
   ========================================================= */

.stp-section--icons .stp-section-header{
    display: block !important;   /* перебиваємо всі grid-варіанти нижче по файлу */
    width: 100%;
    margin-bottom: 40px;
}

.stp-section--icons .stp-section-header-top{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.stp-section--icons .stp-section-header-top h1{
    margin: 0;
}

.stp-section--icons .stp-section-header h4{
    display: block;
    margin: 10px 0 20px 0;
}

/* underline завжди під H4 */
.stp-section--icons .stp-section-header .underline{
    width: 100%;
    height: 1px;
    background-color: #f2c94c;
}

/* Responsive */
@media (max-width: 768px){
    .stp-section--icons .stp-section-header-top{
        align-items: flex-start;
    }

    /* якщо на мобілці треба щоб кнопка не "висіла" зверху — можна опустити її нижче */
    .stp-section--icons .stp-link{
        white-space: nowrap;
    }
}

/* =========================================================
   MOBILE FULL OVERRIDE (≤ 480px)
   Добавить В САМЫЙ КОНЕЦ файла
   ========================================================= */

@media (max-width: 480px) {

    /* ================= GLOBAL ================= */

    .stp-section {
        margin-bottom: 40px;
    }

    .stp-main-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .stp-main-section h1 {
        font-size: 26px;
        line-height: 1.2;
    }

    .stp-main-section h4 {
        font-size: 14px;
        line-height: 1.4;
    }

    /* ================= BUTTONS ================= */

    .stp-link {
        width: 100%;
        text-align: center;
        padding: 14px;
        font-size: 14px;
        border-radius: 8px;
    }

    /* ================= SECTION HEADER ================= */

    .stp-section-header {
        display: block !important;
    }

    .stp-header-text h1 {
        font-size: 26px;
        line-height: 1.2;
    }

    .stp-header-text h4 {
        font-size: 14px;
    }

    .stp-section-header .stp-link {
        margin-top: 12px;
        display: inline-block;
    }

    /* ================= NAVIGATION SCROLL ================= */

    .stp-header-navigation {
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding-bottom: 6px;
    }

    .stp-header-navigation a {
        font-size: 14px;
        margin-right: 20px;
    }

    /* ================= CAROUSEL ================= */

    .stp-art-carousel {
        padding: 0 12px;
        gap: 12px;
    }

    .stp-carousel-item {
        flex: 0 0 75%;
        padding: 8px;
    }

    .carousel-item-name {
        font-size: 14px;
    }

    .carousel-item-price {
        font-size: 14px;
    }

    .stp-carousel-btn-next,
    .stp-carousel-btn-prev {
        display: none !important;
    }

    /* ================= ICONS UNDER CAROUSEL ================= */

    .stp-section-content-under-carousel {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .stp-section-content-item {
        flex: 0 0 calc(50% - 12px);
        max-width: none;
    }

    .stp-icon {
        max-width: 80px;
        padding: 10px;
    }

    .stp-icon-name {
        font-size: 12px;
    }

    /* ================= VIDEO ================= */

    .stp-video-section {
        height: 260px;
    }

    /* ================= GRID SECTIONS ================= */

    .stp-section-content-row,
    .stp-section-content-grid,
    .stp-three-blocks__grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .stp-section-content-item-img {
        padding: 12px;
    }

    .stp-section-content-item-img p {
        font-size: 14px;
    }

    /* ================= INTERIORS ================= */

    .stp-section-for-interiors-item {
        height: 300px;
    }

    .stp-interior-caption {
        left: 12px;
        bottom: 12px;
        padding: 8px 16px;
        max-width: 200px;
    }

    .stp-interior-caption h4 {
        font-size: 14px;
    }

    .stp-interior-caption p {
        font-size: 10px;
    }

    /* ================= ARTISTS ================= */

    .stp-section-content-artists {
        padding: 20px 16px;
    }

    .stp-artist-img {
        width: 110px;
        height: 110px;
    }

    .stp-artist-name {
        font-size: 14px;
        margin-top: 10px;
    }

    /* ================= COMMENTS ================= */

    .stp-section-comments-item.swiper-slide {
        flex-direction: column !important;
        padding: 16px !important;
    }

    .stp-comment-item-img,
    .stp-commtent-item-text {
        flex: 1 1 100%;
    }

    .stp-commtent-item-text {
        padding-left: 0 !important;
        margin-top: 14px;
    }

    .stp-comment-name {
        font-size: 16px;
    }

    .stp-comment-role {
        font-size: 14px;
    }

    /* ================= NEWS ================= */

    .stp-section-news-content {
        flex-direction: column;
        gap: 24px;
    }

    .stp-news-item {
        flex: 1 1 100%;
    }

    .stp-news-image {
        height: 180px;
    }

    .stp-news-title {
        font-size: 16px;
    }

    .stp-news-link {
        margin-top: 20px;
    }

    /* ================= FAQ ================= */

    .stp-faq__wrap {
        flex-direction: column;
        gap: 20px;
    }

    .stp-faq__title {
        font-size: 24px;
    }

    .stp-faq__desc {
        font-size: 14px;
    }

    .stp-faq__question {
        font-size: 14px;
        padding: 18px 0;
    }

    .stp-faq__answer p {
        font-size: 14px;
    }

    /* ================= THREE BLOCKS ================= */

    .stp-three-blocks__header h1 {
        font-size: 26px;
    }

    .stp-three-blocks__header h4 {
        font-size: 14px;
    }

    .stp-three-blocks__text {
        font-size: 16px;
    }

    .stp-three-blocks__btn {
        width: 100%;
        text-align: center;
        padding: 14px;
    }

}