.scrollbar-hide::-webkit-scrollbar { display: none }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none }

/* ===== ФОН СТРАНИЦЫ КАК НА HANDS.RU ===== */
body {
background-color: #dce8f5 !important;
}

/* ===== ЦЕНТРАЛЬНАЯ БЕЛАЯ КАРТОЧКА ===== */
.product-main-card {
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

/* ===== ЗАГОЛОВОК ===== */
.product-main-title {
letter-spacing: -0.02em;
}

/* ===== БЛОК "К ВАМ ПРИЕДЕТ МАСТЕР" ===== */
.product-master-block {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ===== ОПИСАНИЕ "СДЕЛАЕМ:" ===== */
.product-do-block {
padding: 0;
}
.product-do-label {
display: inline;
}
.product-do-text {
display: inline;
margin-left: 0.5rem;
}

/* ===== УБИРАЕМ СТАРЫЕ БЛОКИ ===== */
.product-gallery,
.main-img-wrapper,
.thumb,
.gallery-track,
#product-gallery,
#sizes-box,
#specs-container,
#toggle-specs-btn,
.order-1,
.order-2,
.order-3,
aside.order-3 {
display: none !important;
}

/* ===== СВЕТЛЫЙ ФОН ДЛЯ ОТЗЫВОВ И ОПИСАНИЯ ===== */
.description-content,
.reviews-summary,
.no-reviews,
#reviews-section > div:not(.no-reviews):not(.reviews-summary) {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* ===== ВКЛАКИ ===== */
.section-tabs {
display: flex;
gap: 32px;
margin-bottom: 24px;
}
.section-tab {
padding: 14px 0;
font-size: 18px;
font-weight: 700;
color: #6b7280;
cursor: pointer;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
transition: all 0.2s;
}
.section-tab:hover {
color: #111827;
}
.section-tab.active {
color: #2563eb;
border-bottom-color: #2563eb;
}
.section-tab-count {
margin-left: 8px;
color: #9ca3af;
font-weight: 600;
font-size: 16px;
}

/* ===== ОПИСАНИЕ ===== */
.description-content {
background: #fff;
border-radius: 16px;
padding: 28px;
margin-bottom: 24px;
}
.description-content h3 {
font-size: 22px;
font-weight: 700;
margin-bottom: 16px;
color: #111827;
}
.desc-text {
font-size: 16px;
line-height: 1.7;
color: #374151;
margin-bottom: 12px;
}

/* ===== ОТЗЫВЫ ===== */
.reviews-summary {
display: flex;
gap: 32px;
margin-bottom: 32px;
padding: 28px;
background: #fff;
border-radius: 16px;
}
.reviews-rating {
text-align: center;
min-width: 120px;
}
.reviews-rating-value {
font-size: 56px;
font-weight: 700;
color: #111827;
line-height: 1;
}
.reviews-rating-stars {
display: flex;
justify-content: center;
gap: 4px;
margin: 8px 0;
}
.reviews-rating-count {
font-size: 15px;
color: #6b7280;
}
.reviews-bars {
flex: 1;
}
.review-bar-item {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.review-bar-label {
font-size: 15px;
color: #6b7280;
min-width: 32px;
}
.review-bar-progress {
flex: 1;
height: 10px;
background: #e5e7eb;
border-radius: 5px;
overflow: hidden;
}
.review-bar-fill {
height: 100%;
background: #fbbf24;
border-radius: 5px;
transition: width 0.3s;
}
.review-bar-count {
font-size: 15px;
color: #6b7280;
min-width: 32px;
text-align: right;
}
.review-item {
background: #fff;
border: none;
border-radius: 0;
padding: 24px;
margin-bottom: 0;
}
.review-item:not(:last-child) {
border-bottom: 1px solid #f3f4f6;
}
.review-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 12px;
}
.review-author-info {
display: flex;
align-items: center;
gap: 12px;
}
.review-author-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
}
.review-author-placeholder {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 18px;
}
.review-author-details h4 {
font-size: 16px;
font-weight: 600;
color: #111827;
margin: 0;
}
.review-date {
font-size: 13px;
color: #9ca3af;
}
.review-rating-display {
display: flex;
gap: 2px;
}
.review-rating-display svg {
width: 18px;
height: 18px;
}
.review-title {
font-size: 17px;
font-weight: 600;
color: #111827;
margin-bottom: 8px;
}
.review-text {
font-size: 16px;
line-height: 1.7;
color: #374151;
margin-bottom: 12px;
}
.review-images {
display: flex;
gap: 8px;
margin-bottom: 12px;
overflow-x: auto;
}
.review-img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 8px;
cursor: pointer;
transition: opacity 0.2s;
}
.review-img:hover {
opacity: 0.8;
}
.no-reviews {
text-align: center;
padding: 48px 24px;
background: #fff;
border-radius: 16px;
}
.no-reviews-icon {
font-size: 56px;
margin-bottom: 16px;
}
.no-reviews-text {
font-size: 18px;
color: #6b7280;
margin-bottom: 8px;
font-weight: 600;
}
.no-reviews-subtext {
font-size: 15px;
color: #9ca3af;
}

/* ===== КНОПКИ ЛАЙК/ДИЗЛАЙК ===== */
.review-like-btn, .review-dislike-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 8px;
background: #f9fafb;
border: 1px solid #e5e7eb;
cursor: pointer;
transition: all 0.2s;
font-size: 13px;
font-weight: 500;
color: #6b7280;
outline: none !important;
}
.review-like-btn:focus, .review-dislike-btn:focus,
.review-like-btn:active, .review-dislike-btn:active {
outline: none !important;
border-color: #e5e7eb !important;
box-shadow: none !important;
}
.review-like-btn:hover, .review-dislike-btn:hover {
background: #f3f4f6;
border-color: #d1d5db;
}
.review-like-btn.liked svg {
fill: #2563eb;
stroke: #2563eb;
}
.review-dislike-btn.disliked svg {
fill: #ef4444;
stroke: #ef4444;
transform: rotate(180deg);
}
.review-reply-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 8px;
background: transparent;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.2s;
font-size: 13px;
font-weight: 500;
color: #6b7280;
}
.review-reply-btn:hover {
background: #f9fafb;
border-color: #e5e7eb;
}
.review-actions {
display: flex;
gap: 8px;
margin-top: 12px;
}
.review-replies {
margin-top: 16px;
padding-left: 48px;
border-left: 2px solid #e5e7eb;
}
.review-reply {
background: #f9fafb;
border-radius: 12px;
padding: 12px 16px;
margin-bottom: 12px;
}
.review-reply:last-child {
margin-bottom: 0;
}
.reply-form {
margin-top: 12px;
padding: 16px;
background: #f9fafb;
border-radius: 12px;
}
.reply-form textarea {
width: 100%;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 10px 12px;
font-size: 14px;
resize: vertical;
min-height: 80px;
font-family: inherit;
}
.reply-form textarea:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.reply-form-actions {
display: flex;
gap: 8px;
margin-top: 10px;
justify-content: flex-end;
}
.reply-submit {
background: #2563eb;
color: white;
border: none;
padding: 8px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.reply-submit:hover {
background: #1d4ed8;
}
.reply-cancel {
background: transparent;
color: #6b7280;
border: 1px solid #e5e7eb;
padding: 8px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.reply-cancel:hover {
background: #f3f4f6;
border-color: #d1d5db;
}
.reply-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.reply-author-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.reply-author-placeholder {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
}
.reply-author-details {
flex: 1;
min-width: 0;
}
.reply-author-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 2px;
}
.reply-owner-badge {
background: #2563eb;
color: white;
font-size: 9px;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.reply-owner-name {
font-size: 14px;
font-weight: 700;
color: #111827;
margin: 0;
}
.reply-badge {
background: #2563eb;
color: white;
font-size: 10px;
font-weight: 600;
padding: 2px 6px;
border-radius: 4px;
text-transform: uppercase;
}
.reply-author {
font-weight: 600;
font-size: 13px;
color: #111827;
}
.reply-date {
font-size: 11px;
color: #9ca3af;
}
.review-replies .review-reply {
margin-bottom: 0 !important;
border-radius: 0 !important;
}
.review-replies .review-reply:first-child {
border-top-left-radius: 12px !important;
border-top-right-radius: 12px !important;
}
.review-replies .review-reply:last-child {
margin-bottom: 12px !important;
border-bottom-left-radius: 12px !important;
border-bottom-right-radius: 12px !important;
}

/* ===== КНОПКА ОСТАВИТЬ ОТЗЫВ ===== */
.review-submit-btn, button[onclick="openReviewModal()"] {
width: auto !important;
max-width: 280px !important;
padding: 12px 24px !important;
margin: 0 auto !important;
display: inline-flex !important;
justify-content: center !important;
}

/* ===== LIGHTBOX ===== */
.lightbox {
position: fixed;
inset: 0;
background: rgba(0,0,0,.95);
z-index: 9999999 !important;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
}
.lightbox.open {
display: flex !important;
}
.lightbox img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.lightbox button {
position: absolute;
top: 10px;
right: 16px;
background: none;
border: 0;
color: #fff;
font-size: 40px;
cursor: pointer;
line-height: 1;
z-index: 10000000;
}

/* ===== COPY TOAST ===== */
#copy-toast {
position: fixed;
left: 50%;
top: 70px;
z-index: 100;
opacity: 0;
transform: translate(-50%,-8px);
transition: opacity .25s,transform .25s;
pointer-events: none;
max-width: calc(100vw - 32px);
}
#copy-toast.show {
opacity: 1;
transform: translate(-50%,0);
}

/* ===== FAVORITES ===== */
.fav-btn svg {
transition: all .2s;
}
.fav-btn.active svg {
fill: #ef4444;
stroke: #ef4444;
transform: scale(1.15);
}

/* ===== СЕТКА ПОХОЖИХ ТОВАРОВ ===== */
.related-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
}
@media (min-width: 768px) {
.related-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 12px !important;
}
}
@media (min-width: 1024px) {
.related-grid {
grid-template-columns: repeat(4, 1fr) !important;
}
}
@media (min-width: 1280px) {
.related-grid {
grid-template-columns: repeat(5, 1fr) !important;
}
}

/* ===== МОБИЛЬНАЯ КНОПКА КОРЗИНЫ (НЕ ТРОГАЕМ!) ===== */
@media (max-width: 768px) {
main.max-w-\[1440px\] {
padding-bottom: 140px !important;
}
.product-fixed-cart {
left: 0 !important;
right: 0 !important;
background: white !important;
border-top: 1px solid #e5e7eb !important;
padding: 10px 12px !important;
position: fixed !important;
bottom: 55px !important;
z-index: 960 !important;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08) !important;
}
#mobile-cart-block {
padding-bottom: env(safe-area-inset-bottom, 0);
}
body:has(#review-modal:not(.hidden)) .product-fixed-cart,
body:has(#review-thanks-modal:not(.hidden)) .product-fixed-cart,
body:has(#size-color-modal:not(.hidden)) .product-fixed-cart,
body:has(#catalog-drawer:not(.hidden)) .product-fixed-cart,
body:has(#cart-drawer:not(.hidden)) .product-fixed-cart,
body:has(.cart-drawer:not(.hidden)) .product-fixed-cart,
body:has(.cart-drawer-wrapper:not(.hidden)) .product-fixed-cart,
body:has([class*="modal"]:not(.hidden)) .product-fixed-cart,
body:has(.lightbox.open) .product-fixed-cart {
display: none !important;
}
}
@media (max-width: 375px) {
main.max-w-\[1440px\] {
padding-bottom: 160px !important;
}
}

/* ===== МОБИЛЬНАЯ АДАПТАЦИЯ КАРТОЧКИ ===== */
@media (max-width: 640px) {
.product-main-card {
padding: 20px !important;
border-radius: 16px !important;
}
.product-main-title {
font-size: 28px !important;
}
.product-master-block {
margin-top: 16px;
}
.product-do-label {
font-size: 18px !important;
display: block;
margin-bottom: 8px;
}
.product-do-text {
display: block;
margin-left: 0;
font-size: 15px !important;
}
.section-tabs {
gap: 20px;
margin-bottom: 16px;
}
.section-tab {
padding: 10px 0;
font-size: 16px;
}
.section-tab-count {
font-size: 14px;
}
.description-content {
padding: 16px;
margin-bottom: 16px;
border-radius: 12px;
}
.description-content h3 {
font-size: 18px;
margin-bottom: 10px;
}
.desc-text {
font-size: 14px;
line-height: 1.55;
}
.reviews-summary {
flex-direction: column;
gap: 16px;
padding: 16px;
margin-bottom: 16px;
border-radius: 12px;
}
.reviews-rating {
min-width: auto;
}
.reviews-rating-value {
font-size: 44px;
}
.reviews-rating-stars svg {
width: 20px;
height: 20px;
}
.reviews-rating-count {
font-size: 13px;
}
.review-bar-label {
font-size: 13px;
min-width: 28px;
}
.review-bar-progress {
height: 8px;
}
.review-bar-count {
font-size: 13px;
min-width: 28px;
}
.review-item {
padding: 14px 12px;
}
.review-header {
margin-bottom: 8px;
}
.review-author-avatar, .review-author-placeholder {
width: 36px;
height: 36px;
font-size: 15px;
}
.review-author-details h4 {
font-size: 14px;
}
.review-date {
font-size: 12px;
}
.review-rating-display svg {
width: 15px;
height: 15px;
}
.review-title {
font-size: 15px;
margin-bottom: 6px;
}
.review-text {
font-size: 14px;
line-height: 1.5;
margin-bottom: 10px;
}
.review-img {
width: 64px;
height: 64px;
}
.review-actions {
margin-top: 8px;
}
.review-like-btn, .review-dislike-btn, .review-reply-btn {
padding: 5px 9px;
font-size: 12px;
}
.review-like-btn svg, .review-dislike-btn svg, .review-reply-btn svg {
width: 15px;
height: 15px;
}
.review-replies {
padding-left: 24px;
margin-top: 10px;
}
.review-reply {
padding: 10px 12px;
margin-bottom: 8px;
}
.reply-badge {
font-size: 9px;
}
.reply-author {
font-size: 12px;
}
.reply-date {
font-size: 10px;
}
.no-reviews {
padding: 32px 16px;
}
.no-reviews-icon {
font-size: 44px;
}
.no-reviews-text {
font-size: 16px;
}
.no-reviews-subtext {
font-size: 13px;
}
#review-modal > div:nth-child(2) {
max-height: 95vh !important;
width: 95% !important;
margin: 0 !important;
border-radius: 16px !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
}
#review-thanks-modal > div:nth-child(2) {
width: 90% !important;
padding: 24px 20px !important;
}
#review-form {
padding: 16px !important;
}
#review-form .space-y-4 > * {
margin-bottom: 12px !important;
}
#review-modal h3 {
font-size: 18px !important;
}
#review-form button[type="submit"] {
padding: 12px !important;
font-size: 14px !important;
}
#review-form input, #review-form textarea {
font-size: 14px !important;
padding: 10px 12px !important;
}
.reply-form {
padding: 12px !important;
margin-top: 8px !important;
}
.reply-form textarea {
min-height: 60px !important;
font-size: 13px !important;
}
.reply-form-actions button {
padding: 6px 12px !important;
font-size: 12px !important;
}
.mt-6.text-center button, .review-submit-btn, button[onclick="openReviewModal()"] {
width: auto !important;
max-width: 220px !important;
padding: 10px 16px !important;
font-size: 14px !important;
margin: 0 auto !important;
}
}
@media (max-width: 480px) {
#review-modal > div:nth-child(2) {
max-height: 98vh !important;
width: 98% !important;
}
#review-form {
padding: 12px !important;
}
#review-modal h3 {
font-size: 16px !important;
}
}

/* ===== RATING STARS ===== */
.rating-star {
cursor: pointer;
user-select: none;
transition: transform 0.15s;
}
.rating-star:hover {
transform: scale(1.2);
}

/* ===== МОБИЛЬНАЯ ВЕРСИЯ ОТЗЫВОВ КАК НА ДЕСКТОПЕ ===== */
@media (max-width: 640px) {
.reviews-summary {
flex-direction: row !important;
align-items: center !important;
gap: 12px !important;
padding: 12px !important;
}
.reviews-rating {
min-width: auto !important;
flex-shrink: 0 !important;
}
.reviews-rating-value {
font-size: 36px !important;
line-height: 1 !important;
}
.reviews-rating-stars svg {
width: 16px !important;
height: 16px !important;
}
.reviews-rating-count {
font-size: 11px !important;
}
.reviews-bars {
flex: 1 !important;
min-width: 0 !important;
}
.review-bar-item {
margin-bottom: 4px !important;
gap: 6px !important;
}
.review-bar-label {
font-size: 11px !important;
min-width: 16px !important;
}
.review-bar-progress {
height: 6px !important;
}
.review-bar-count {
font-size: 11px !important;
min-width: 16px !important;
}
}