/* Page — single-product.php Custom gallery + summary, restyled WooCommerce core tabs/attributes table/add-to-cart (their own classes kept intact… */

/* .container's own base rule (main.css) sets padding: 0 var(--container-padding) — a normal-specificity shorthand that a :where()-scoped override can… */
.product-section { padding: var(--section-gap) 0; }

/* ── Gallery + summary layout ─────────────────────────────────────────── */
.product-page {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-8);
    margin-bottom: var(--section-gap);
}

.product-page__gallery { flex: 0 0 44%; min-width: 0; }
.product-page__main-image {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
}
.product-page__slide { display: none; width: 100%; height: 100%; }
.product-page__slide.is-active { display: block; }
.product-page__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

.product-page__thumbs { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.product-page__thumb {
    flex: none;
    width: 64px;
    height: 64px;
    padding: 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 2px solid transparent;
    background: var(--color-bg-alt);
    cursor: pointer;
    transition: border-color var(--transition);
}
.product-page__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-page__thumb:hover { border-color: var(--color-border-strong); }
.product-page__thumb.is-active { border-color: var(--color-primary); }

/* ── Summary ───────────────────────────────────────────────────────────── */
.product-page__summary { flex: 1 1 auto; min-width: 0; }
.product-page__title { margin: 0 0 var(--sp-4); }

.product-page__price {
    font-size: var(--fs-h2);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--sp-3);
}
.product-page__price ins { text-decoration: none; }
.product-page__price del { font-size: var(--fs-lead); color: var(--color-muted); font-weight: 400; margin-right: var(--sp-3); }

.product-page__stock {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.product-page__stock.is-instock { color: var(--color-success); }
.product-page__stock.is-outofstock { color: var(--color-text-light); }

.product-page__excerpt { max-width: 640px; margin-bottom: var(--sp-6); color: var(--color-text-light); }
.product-page__excerpt.prose > * + * { margin-top: var(--sp-3); }

/* ── Add to cart (WooCommerce core markup, classes kept for cart AJAX) ──── */
.product-page__cart { margin-bottom: var(--sp-6); }
.product-page__cart .cart { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
/* .quantity/.qty/.quantity__btn (the bordered group + injected +/- steps)
   are shared, unscoped rules in main.css — also used by the cart page's
   per-row quantity inputs. */
/* WooCommerce's own .woocommerce button.button.alt rule (woocommerce-general
   css) outweighs a plain two-class selector here — !important on just the
   two color properties is the standard, narrowly-scoped way past it. */
.product-page__cart .single_add_to_cart_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-height);
    padding: 0 var(--sp-6);
    background: var(--color-accent) !important;
    color: var(--color-on-accent) !important;
    border: none;
    border-radius: var(--radius);
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition);
}
.product-page__cart .single_add_to_cart_button:hover { background: var(--color-accent-hover) !important; }
.product-page__cart .single_add_to_cart_button.disabled,
.product-page__cart .single_add_to_cart_button.is-loading { opacity: .5; pointer-events: none; }

.product-page__meta {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--color-border);
    font-size: var(--fs-sm);
    color: var(--color-text-light);
}
.product-page__meta a { color: var(--color-primary); }

/* ── Tabs (WooCommerce core: ul.tabs / .woocommerce-Tabs-panel) ─────────── */
.woocommerce-tabs-wrap { margin-bottom: var(--section-gap); }
.woocommerce-tabs ul.tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    list-style: none;
    margin: 0 0 var(--sp-7);
    padding: 0;
    border-bottom: 1px solid var(--color-border);
}
.woocommerce-tabs ul.tabs li {
    margin: 0;
}
.woocommerce-tabs ul.tabs li a {
    display: inline-flex;
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: -1px;
    font-size: var(--fs-lead);
    font-weight: 600;
    color: var(--color-text-light);
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: 2px solid transparent;
    transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}
.woocommerce-tabs ul.tabs li a:hover { color: var(--color-primary); background: var(--color-bg-alt); }
.woocommerce-tabs ul.tabs li.active a { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-bg-alt); }

.woocommerce-tabs .woocommerce-Tabs-panel > * + * { margin-top: var(--sp-4); }
.woocommerce-tabs .woocommerce-Tabs-panel h2 { margin-bottom: var(--sp-4); }

.woocommerce-product-attributes {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.woocommerce-product-attributes-item th,
.woocommerce-product-attributes-item td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}
.woocommerce-product-attributes-item th { width: 40%; font-weight: 600; color: var(--color-text); }
.woocommerce-product-attributes-item td { color: var(--color-text-light); }
.woocommerce-product-attributes-item:nth-child(odd) { background: var(--color-bg-alt); }

/* "Марка стали" values are longer, comma-separated option lists ("09Г2С,
   1-3 пс/сп, и др. по запросу") — bump just this row back up to base size
   so they don't read as fine print next to the shorter one-value rows. */
.woocommerce-product-attributes-item--attribute_pa_marka-stali { font-size: var(--fs-base); }

/* ── Reviews (WooCommerce core: #reviews .woocommerce-Reviews) ────────── Same spacing rhythm and avatar/meta/text layout as single.css's blog comment… */
.woocommerce-Reviews { width: 100%; }
.woocommerce-Reviews-title { margin-bottom: var(--sp-6); }

.commentlist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    margin-bottom: var(--sp-7);
    width: 100%;
}
.commentlist .comment_container { display: flex; gap: var(--sp-3); }
.commentlist img.avatar { width: 40px; height: 40px; border-radius: var(--radius-pill); flex: none; }
.commentlist .comment-text { flex: 1 1 auto; min-width: 0; }

.star-rating { color: var(--color-accent); font-size: var(--fs-sm); }
.star-rating span { color: var(--color-accent); }

.commentlist .meta { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--color-muted); }
.woocommerce-review__author { font-weight: 700; color: var(--color-primary); font-style: normal; }
.woocommerce-review__dash { margin: 0 var(--sp-1); }
.woocommerce-review__published-date { color: inherit; }

.commentlist .description { margin-top: var(--sp-2); color: var(--color-text-light); }
.commentlist .description p + p { margin-top: var(--sp-3); }

#review_form_wrapper { max-width: 520px; }
#review_form .comment-reply-title { margin-bottom: var(--sp-5); }
.comment-form-rating { margin-bottom: var(--sp-4); }
.comment-form-rating label { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); }
.comment-form-rating select {
    min-height: var(--control-height-sm);
    padding: 0 var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
}

.comment-form p:not(.form-submit):not(.comment-form-rating) { margin-bottom: var(--sp-4); }
.comment-form label { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-base);
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form textarea:focus,
.comment-form-rating select:focus { border-color: var(--color-primary); box-shadow: var(--focus-ring); outline: none; }
.comment-form textarea { resize: vertical; min-height: 120px; }

.comment-notes { margin-bottom: var(--sp-5); font-size: var(--fs-sm); color: var(--color-text-light); }
.form-submit { margin-top: var(--sp-2); }
.comment-form .submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-height);
    padding: 0 var(--sp-6);
    background: var(--color-accent);
    color: var(--color-on-accent);
    border: none;
    border-radius: var(--radius);
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition);
}
.comment-form .submit:hover { background: var(--color-accent-hover); }

/* ── Related products (infinite slider — see main.css .slider__track) ──── */
.product-page__related { background: var(--color-bg-alt); padding: var(--section-gap) 0; }
.product-page__related .shop__grid.slider__track { margin-bottom: 0; }
.product-page__related .product-card { width: 260px; background: var(--color-bg); }

@media (max-width: 767px) {
    .product-page { flex-direction: column; gap: var(--sp-5); }
    .product-page__gallery { flex: none; width: 100%; }
    .product-page__price { font-size: var(--fs-h3); }
    .product-page__cart .cart { width: 100%; }
    .product-page__cart .single_add_to_cart_button { flex: 1 1 auto; }
}

/* ── "Added to cart" popup ───────────────────────────────────────────── Replaces WooCommerce's own inline notice — the add-to-cart form is submitted… */
.woocommerce-notices-wrapper { display: none; }

.cart-popup {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-5);
    background: rgba(27, 37, 48, .6);
}
.cart-popup[hidden] { display: none; }

.cart-popup__card {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: var(--sp-7) var(--sp-6) var(--sp-6);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.cart-popup__close {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}
.cart-popup__close:hover { border-color: var(--color-primary); color: var(--color-primary); }

.cart-popup__title { margin: 0; font-size: var(--fs-h4); }
.cart-popup__summary { margin: 0; color: var(--color-text-light); }