/* ========================================
   VIPBUKET NEW THEME — Soft Pink / Beige
   ======================================== */

:root {
    --primary:       #C8738A;
    --primary-light: #F5D5DC;
    --primary-dark:  #A85A72;
    --bg-main:       #FFF8F5;
    --bg-card:       #FFFFFF;
    --bg-sidebar:    #FEF3F0;
    --border:        #EACFD4;
    --text-dark:     #3D2B2B;
    --text-body:     #6B4F4F;
    --text-muted:    #B09090;
    --shadow-sm:     0 2px 12px rgba(200,100,130,0.10);
    --shadow-md:     0 6px 24px rgba(200,100,130,0.16);
    --radius-card:   16px;
    --radius-sm:     10px;
}

/* ── Global ─────────────────────────────── */
body {
    background-color: var(--bg-main);
    color: var(--text-body);
}

a { color: var(--primary); }
a:hover { color: var(--primary-dark); text-decoration: none; }

/* ── Replace old accent colour everywhere ── */
.header-top .guarantees:hover,
.header-top .guarantees-active,
.header-top .header-contacts .header-soc-link a p,
.header-top .header-contacts .header-soc-phone a p,
.header-top .logo-wrapper .logo-text-brand p { color: var(--primary) !important; }

/* ── Header ─────────────────────────────── */
.header-top {
    background: #fff;
    box-shadow: 0 2px 12px rgba(200,100,130,0.08) !important;
    border-bottom: 2px solid var(--primary-light);
}

/* ── Navigation ─────────────────────────── */
.nav-menu,
.header-nav,
nav { background: #fff; }

.header-nav a, nav a { color: var(--text-dark); }
.header-nav a:hover, nav a:hover { color: var(--primary); }

/* ── Category nav bar (if exists) ─────── */
.categories-nav a { color: var(--text-dark); }
.categories-nav a:hover,
.categories-nav a.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ── Breadcrumbs ─────────────────────────*/
.breadcrumbs a p,
.breadcrumbs p { color: var(--text-muted); font-size: 13px; }
.breadcrumbs a:hover p { color: var(--primary); }
.breadcrumbs span { color: var(--primary-light); }

/* ======================================================
   CATALOG LAYOUT
   ====================================================== */

/* Wrapper: side-by-side flex, full width */
.items-wrapper {
    display: flex !important;
    align-items: flex-start;
    gap: 24px;
    padding: 24px 0 40px;
    border-bottom: 1px solid var(--border);
    width: 100%;
}

/* ── Sidebar ─────────────────────────── */
.items-wrapper .leftSide {
    width: 240px;
    flex-shrink: 0;
}

.items-wrapper .leftSide .categories-wrapper {
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding-bottom: 12px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

.items-wrapper .leftSide .categories-wrapper h1,
.items-wrapper .leftSide .categories-wrapper .h1 {
    font-family: "Philosopher", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-dark);
    padding: 14px 16px 8px;
    text-align: left;
}

/* Pink separator line */
.items-wrapper .leftSide .categories-wrapper .line-rose:before,
.items-wrapper .leftSide .categories-wrapper .line-rose:after {
    background-color: var(--border) !important;
}

/* Category items */
.items-wrapper .leftSide .categories-wrapper .categories-parent a {
    color: var(--text-dark);
    text-decoration: none;
}

.items-wrapper .leftSide .categories-wrapper .categories-parent p {
    font-family: "Philosopher", sans-serif;
    font-size: 15px;
    font-weight: 600;
    margin: 0 12px;
    line-height: 38px;
    padding: 0 4px;
    border-radius: 8px;
    transition: all .25s;
}

.items-wrapper .leftSide .categories-wrapper .categories-parent:hover p {
    color: var(--primary) !important;
    background: var(--primary-light);
    padding-left: 8px;
}

.items-wrapper .leftSide .categories-wrapper .active-parent p {
    color: var(--primary) !important;
    font-size: 15px;
    font-weight: 700;
}

.items-wrapper .leftSide .categories-wrapper .categories-child p:before {
    color: var(--primary);
}

.items-wrapper .leftSide .categories-wrapper .categories-child .active > p,
.items-wrapper .leftSide .categories-wrapper .categories-child p:hover {
    color: var(--primary) !important;
}

.items-wrapper .leftSide .categories-wrapper .full-catalog p {
    color: var(--primary) !important;
}

/* ── Right content area ───────────────── */
.items-wrapper .rightSide {
    flex: 1;
    min-width: 0;
    margin-left: 0 !important;
    width: auto !important;
}

/* Category title bar */
.items-wrapper .rightSide .rightSide-title {
    background: linear-gradient(135deg, #fff 0%, var(--bg-sidebar) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 8px 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

.items-wrapper .rightSide .rightSide-title p {
    font-family: "Philosopher", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

/* Sort buttons */
.items-wrapper .rightSide .right-side-sorted input:checked + label {
    background: var(--primary) !important;
    color: #fff;
}

.items-wrapper .rightSide .right-side-sorted label {
    border: 1px solid var(--border);
    color: var(--text-body);
    transition: all .2s;
}

.items-wrapper .rightSide .right-side-sorted label:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* ── PRODUCT GRID — 4 columns ─────────── */
.items-wrapper .rightSide .products-container {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 0;
    text-align: left;
}

/* Product card */
.items-wrapper .rightSide .products-container .item {
    display: flex !important;
    flex-direction: column;
    background: var(--bg-card);
    border: none !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
    min-height: 0 !important;
    width: auto !important;
    margin: 0 !important;
    position: relative;
}

.items-wrapper .rightSide .products-container .item:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

/* Card image */
.items-wrapper .rightSide .products-container .item .item-image {
    overflow: hidden;
    height: 220px;
    background: #ffffff;
    flex-shrink: 0;
}

.items-wrapper .rightSide .products-container .item .item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.items-wrapper .rightSide .products-container .item:hover .item-image img {
    transform: scale(1.05);
}

/* Hover overlay */
.items-wrapper .rightSide .products-container .item .item-hover {
    position: absolute;
    top: -100%;
    left: 0;
    right: 0;
    height: 220px;
    background: rgba(200, 115, 138, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: top .35s;
    z-index: 2;
}

.items-wrapper .rightSide .products-container .item .item-image:hover .item-hover {
    top: 0;
    max-height: none;
}

.items-wrapper .rightSide .products-container .item .item-hover a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.items-wrapper .rightSide .products-container .item .item-hover a p {
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 12px;
}

.items-wrapper .rightSide .products-container .item .item-hover a span {
    display: inline-block;
    background: #fff;
    color: var(--primary);
    border-radius: 20px;
    padding: 6px 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    transition: background .2s;
}

.items-wrapper .rightSide .products-container .item .item-hover a:hover span {
    background: var(--primary-light);
}

/* Card body */
.items-wrapper .rightSide .products-container .item .item-category {
    padding: 10px 12px 4px;
}

.items-wrapper .rightSide .products-container .item .item-category p {
    font-size: 11px;
    color: var(--primary);
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    margin: 0;
    display: inline-block;
}

.items-wrapper .rightSide .products-container .item .item-category p:before {
    display: none !important;
}

.items-wrapper .rightSide .products-container .item .item-name {
    padding: 0 12px 6px;
    flex: 1;
}

.items-wrapper .rightSide .products-container .item .item-name a {
    color: var(--text-dark);
    text-decoration: none;
}

.items-wrapper .rightSide .products-container .item .item-name p {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.items-wrapper .rightSide .products-container .item .item-name a:hover p {
    color: var(--primary);
}

.items-wrapper .rightSide .products-container .item .item-price {
    padding: 4px 12px 0;
    background: none;
}

.items-wrapper .rightSide .products-container .item .item-price p {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
}

.items-wrapper .rightSide .products-container .item .item-price p span {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
}

.items-wrapper .rightSide .products-container .item .item-price .oldPrice {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: line-through;
    display: block;
    margin-bottom: 2px;
}

/* Buy button */
.items-wrapper .rightSide .products-container .item .item-buy,
.items-wrapper .rightSide .products-container .item .in-basket {
    margin: 10px 12px 14px;
    padding: 9px 0;
    width: calc(100% - 24px);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    cursor: pointer;
    transition: all .2s;
}

.items-wrapper .rightSide .products-container .item .item-buy {
    background: var(--primary);
    color: #fff;
}

.items-wrapper .rightSide .products-container .item .item-buy:hover {
    background: var(--primary-dark);
    transform: none;
}

.items-wrapper .rightSide .products-container .item .in-basket {
    background: var(--primary-light);
    color: var(--primary);
}

/* Show more button */
.showMoreButton {
    text-align: center;
    margin: 30px 0;
}

.showMoreButton p {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    border-radius: 30px;
    padding: 12px 36px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .8px;
    cursor: pointer;
    transition: background .2s, transform .2s;
    box-shadow: var(--shadow-sm);
}

.showMoreButton p:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

/* ── Home page product cards (same .item class) ─── */
.products-container .item {
    border: none !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-sm);
    transition: transform .25s, box-shadow .25s;
    background: var(--bg-card);
}

.products-container .item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

/* ── Slider/Banner area ────────────────── */
.header-nav {
    border-bottom: 1px solid var(--border);
}

/* ── Footer ─────────────────────────────── */
footer {
    background: #3D2B2B !important;
    color: #e8d0d0;
}

footer a { color: #e8d0d0 !important; }
footer a:hover { color: #fff !important; }
footer .copyright { color: #b09090; }

/* ── Page background sections ─────────── */
.page-wrapper { background: var(--bg-main); }

/* ── Price range slider ───────────────── */
.ui-slider-range { background: var(--primary) !important; }
.ui-slider-handle { border-color: var(--primary) !important; }

/* ── Pagination ──────────────────────── */
.pagination > li > a,
.pagination > li > span {
    color: var(--primary);
    border-color: var(--border);
    border-radius: 8px;
    margin: 0 2px;
}

.pagination > .active > a,
.pagination > .active > span {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.pagination > li > a:hover {
    background-color: var(--primary-light);
    color: var(--primary);
}

/* ── After-buy bar ───────────────────── */
.after-buy {
    background: var(--primary);
    border-radius: var(--radius-sm);
}

.after-buy a p { color: #fff !important; }

/* ── Product page sections (replaced tabs) ── */
.tab-panel .item-section {
    margin-top: 20px;
    padding: 20px 24px;
    background: var(--bg-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    color: var(--text-body);
    line-height: 1.7;
    font-size: 15px;
}

.item-section-title {
    font-family: "Philosopher", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 12px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-light);
}

/* ══════════════════════════════════════
   PRODUCT PAGE
   ══════════════════════════════════════ */

.product-page {
    max-width: 1160px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}

/* Breadcrumb */
.product-breadcrumb {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.product-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.product-breadcrumb a:hover { color: var(--primary); }
.product-breadcrumb span { color: var(--border); }
.product-breadcrumb .current { color: var(--text-dark); font-weight: 600; }

/* ── Main block: gallery + info ─────── */
.product-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
    align-items: start;
}

/* Gallery */
.product-gallery__main {
    background: #ffffff;
    border-radius: var(--radius-card);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}
.product-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .25s;
}

.product-gallery__thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.product-gallery__thumb {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .2s, transform .2s;
    flex-shrink: 0;
}
.product-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-gallery__thumb:hover,
.product-gallery__thumb.active {
    border-color: var(--primary);
    transform: scale(1.05);
}

/* Info panel */
.product-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.product-info__category a {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--primary);
    text-decoration: none;
    background: var(--primary-light);
    padding: 4px 12px;
    border-radius: 20px;
}
.product-info__category a:hover { background: var(--primary); color: #fff; }

.product-info__name {
    font-family: "Philosopher", sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
    margin: 0;
}

.product-info__articul {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}
.product-info__articul span { font-weight: 600; color: var(--text-body); }

.product-info__desc {
    font-size: 15px;
    color: var(--text-body);
    line-height: 1.6;
    margin: 0;
    padding: 14px 16px;
    background: var(--bg-sidebar);
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Price */
.product-info__price-block {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.product-info__price {
    font-size: 36px;
    font-weight: 800;
    color: var(--primary);
    margin: 0;
}
.product-info__price span {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-muted);
}
.product-info__old-price {
    font-size: 18px;
    color: var(--text-muted);
    text-decoration: line-through;
    margin: 0;
}

/* Buy button */
.product-info__btn {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    border: none;
    border-radius: var(--radius-card);
    cursor: pointer;
    transition: all .2s;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 16px rgba(200,100,130,0.30);
}
.product-info__btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(200,100,130,0.40);
}
.product-info__btn--in-cart {
    background: var(--primary-light);
    color: var(--primary);
    box-shadow: none;
    cursor: default;
}
.product-info__btn--in-cart:hover { transform: none; }

/* Badges */
.product-info__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.product-info__badges span {
    font-size: 12px;
    padding: 6px 12px;
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-body);
}

/* ── Info sections ───────────────────── */
.product-sections { display: flex; flex-direction: column; gap: 20px; }

.product-section {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.product-section__title {
    font-family: "Philosopher", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-sidebar);
}
.product-section__body {
    padding: 20px 24px;
    font-size: 15px;
    color: var(--text-body);
    line-height: 1.7;
}

/* Two-column row for delivery + guarantee */
.product-sections__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* ── Responsive: 2 columns on tablet ── */
@media (max-width: 900px) {
    .items-wrapper .rightSide .products-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .items-wrapper { flex-direction: column; }
    .items-wrapper .leftSide { width: 100%; }
    .product-main { grid-template-columns: 1fr; }
    .product-sections__row { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
    .items-wrapper .rightSide .products-container {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .product-info__name { font-size: 20px; }
    .product-info__price { font-size: 28px; }
}