/*
 * KIN theme bridge.
 *
 * market.css carries the design-system components; this file maps the
 * WordPress and WooCommerce markup that the static demo never had onto
 * the same tokens. No component is redefined here.
 */

/* ── Small helpers ─────────────────────────────────────────── */
.kin-theme-toggle { border: 0; background: none; cursor: pointer; }
.kin-placeholder { display: grid; place-items: center; width: 72%; height: 72%; color: var(--text2); }
.kin-placeholder svg { width: 100%; height: 100%; }
.price-request { font-size: var(--fs-small); color: var(--muted); font-weight: 600; }
.rating-link:hover { text-decoration: none; }

.screen-reader-text,
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Catalog: basic list view ──────────────────────────────── */
.p-grid[data-view="list"] { display: flex; flex-direction: column; gap: var(--sp-3); }
.p-grid[data-view="list"] .p-card {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) 200px;
    grid-template-areas:
        "media title buy"
        "media price buy"
        "media rating buy"
        "media stock buy";
    gap: var(--sp-1) var(--sp-5);
    padding: var(--sp-3);
    border-radius: var(--r-lg);
    background: var(--surface);
}
.p-grid[data-view="list"] .p-media { grid-area: media; aspect-ratio: 1; }
.p-grid[data-view="list"] .p-title { grid-area: title; -webkit-line-clamp: 2; min-height: 0; font-size: var(--fs-body); }
.p-grid[data-view="list"] .price-row { grid-area: price; }
.p-grid[data-view="list"] .p-meta-rating { grid-area: rating; }
.p-grid[data-view="list"] .p-meta-stock { grid-area: stock; }
.p-grid[data-view="list"] .p-buy { grid-area: buy; align-self: center; justify-self: end; width: 100%; max-width: 200px; }
.p-grid[data-view="list"] .fav { top: 4px; right: 4px; width: 32px; height: 32px; }
.p-grid[data-view="list"] .p-title::after { inset: 0; }
@media (max-width: 720px) {
    .p-grid[data-view="list"] .p-card { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "media title" "media price" "media rating" "media stock"; }
    .p-grid[data-view="list"] .p-buy { grid-column: 2; grid-area: auto; max-width: none; }
}

/* ── Product page ──────────────────────────────────────────── */
.kin-qty-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.kin-qty-row label { font-size: var(--fs-small); color: var(--muted); }
.buybox .cart,
.kin-woo-form form.cart { display: flex; flex-direction: column; gap: var(--sp-3); }
.buybox .quantity,
.kin-woo-form .quantity { display: flex; align-items: center; }
.buybox .quantity input,
.kin-woo-form .quantity input {
    width: 76px;
    height: 44px;
    padding: 0 var(--sp-3);
    border: 1.5px solid var(--line2);
    border-radius: var(--r-md);
    background: var(--surface);
    font: inherit;
    text-align: center;
}
.buybox .actions { align-items: stretch; }
.buybox .actions .fav { width: 52px; height: 52px; border-radius: var(--r-lg); position: static; }
.buybox .btn-block { width: 100%; }
.kin-woo-form .variations { width: 100%; }
.kin-woo-form .variations th,
.kin-woo-form .variations td { padding: 4px 0; text-align: left; vertical-align: middle; }
.kin-woo-form .variations label { font-size: var(--fs-small); color: var(--muted); }
.kin-woo-form select {
    width: 100%;
    height: 42px;
    padding: 0 var(--sp-3);
    border: 1.5px solid var(--line2);
    border-radius: var(--r-md);
    background: var(--surface);
}
.kin-woo-form .woocommerce-variation-price { margin: var(--sp-2) 0; }
.kin-woo-form .reset_variations { font-size: var(--fs-small); }
.woocommerce-variation-add-to-cart { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ── Tabs, reviews form, account, cart, checkout ──────────── */
.tab[aria-selected="true"] { background: none; }
.woocommerce-Reviews { margin-top: var(--sp-2); }
.woocommerce-Reviews .woocommerce-Reviews-title { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.woocommerce-Reviews ol.commentlist { list-style: none; padding: 0; margin: 0; }
.woocommerce-Reviews .comment_container { display: flex; gap: var(--sp-3); padding: var(--sp-5) 0; border-bottom: 1px solid var(--line); }
.woocommerce-Reviews .comment_container img.avatar { width: 40px; height: 40px; border-radius: 50%; }
.woocommerce-Reviews .comment-text { flex: 1; min-width: 0; }
.woocommerce-Reviews .comment-text .meta { margin: 0 0 var(--sp-1); font-size: var(--fs-small); color: var(--muted); }
.woocommerce-Reviews .comment-text .description p { margin-top: var(--sp-2); color: var(--text2); }
.woocommerce-Reviews .comment-reply-title { font-size: var(--fs-h3); }
.woocommerce-Reviews #review_form_wrapper { margin-top: var(--sp-6); }
.woocommerce-Reviews .comment-form { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Woo star rating -> design stars. */
.woocommerce .star-rating {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 14px;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    vertical-align: middle;
}
.woocommerce .star-rating::before,
.woocommerce .star-rating span::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--line2);
    -webkit-mask: var(--kin-star-mask) 0 0/16px 14px repeat-x;
    mask: var(--kin-star-mask) 0 0/16px 14px repeat-x;
}
.woocommerce .star-rating span { position: absolute; inset: 0 auto 0 0; height: 14px; overflow: hidden; }
.woocommerce .star-rating span::before { background: var(--rating); }
:root { --kin-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M7 0l2.1 4.3 4.7.7-3.4 3.3.8 4.7L7 10.8 2.8 13l.8-4.7L.2 5l4.7-.7z'/%3E%3C/svg%3E"); }

/* ── WordPress / Woo forms ─────────────────────────────────── */
.entry-content,
.prose { max-width: 78ch; color: var(--text2); }
.entry-content > * + *,
.prose > * + * { margin-top: var(--sp-4); }
.entry-content h2,
.entry-content h3,
.prose h2,
.prose h3 { margin-top: var(--sp-8); color: var(--text); }
.entry-content ul,
.entry-content ol,
.prose ul,
.prose ol { padding-left: 1.35em; }
.entry-content img,
.prose img { height: auto; border-radius: var(--r-md); }
.entry-content a,
.prose a { color: var(--accent-ink); }
.entry-content table,
.prose table { width: 100%; border-collapse: collapse; }
.entry-content th,
.entry-content td,
.prose th,
.prose td { padding: var(--sp-2); border-bottom: 1px solid var(--line); text-align: left; }

.woocommerce form .form-row { padding: 0; margin: 0 0 var(--sp-4); }
.woocommerce form .form-row label { display: block; margin-bottom: 6px; font-size: var(--fs-small); color: var(--text2); }
.woocommerce form .form-row .required { color: var(--sale); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.woocommerce .select2-container .select2-selection--multiple {
    width: 100%;
    min-height: 44px;
    padding: 10px var(--sp-3);
    border: 1.5px solid var(--line2);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    line-height: 1.4;
}
.woocommerce form .form-row textarea { min-height: 110px; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select { border-color: var(--danger); }
.woocommerce form .form-row.woocommerce-invalid label { color: var(--danger); }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 22px; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
.woocommerce .select2-dropdown { border-color: var(--line2); border-radius: var(--r-md); background: var(--surface); color: var(--text); }

.woocommerce .button:not(.btn),
.woocommerce a.button:not(.btn),
.woocommerce button.button:not(.btn),
.woocommerce input.button:not(.btn),
.woocommerce #respond input#submit:not(.btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 var(--sp-4);
    border: 0;
    border-radius: var(--r-md);
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.woocommerce .button:not(.btn):hover,
.woocommerce a.button:not(.btn):hover,
.woocommerce button.button:not(.btn):hover { background: var(--accent-hover); }
.woocommerce .button:disabled { opacity: .45; cursor: not-allowed; }

/* ── Woo notices ───────────────────────────────────────────── */
.woocommerce-notices-wrapper { margin-bottom: var(--sp-4); }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-4);
    margin: 0 0 var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    background: var(--badge-new-soft);
    color: var(--text);
    list-style: none;
}
.woocommerce-message { background: var(--accent-soft); }
.woocommerce-error { background: var(--sale-soft); }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }
.woocommerce-error li { margin: 0; }

/* ── Cart / checkout / account ─────────────────────────────── */
.woocommerce table.shop_table {
    width: 100%;
    margin-bottom: var(--sp-6);
    border-collapse: collapse;
    border-radius: var(--r-lg);
    background: var(--surface);
    overflow: hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.woocommerce table.shop_table th { font-size: var(--fs-small); color: var(--muted); font-weight: 600; }
.woocommerce table.shop_table td.product-name a { color: var(--text); }
.woocommerce table.shop_table td.product-thumbnail img { width: 64px; height: 64px; object-fit: contain; border-radius: var(--r-sm); background: var(--surface2); }
.woocommerce table.shop_table .quantity { display: inline-flex; }
.woocommerce table.shop_table .quantity input { width: 68px; height: 38px; padding: 0 var(--sp-2); border: 1.5px solid var(--line2); border-radius: var(--r-sm); background: var(--surface); text-align: center; }
.woocommerce table.shop_table .product-remove a { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--muted); text-decoration: none; }
.woocommerce table.shop_table .product-remove a:hover { background: var(--sale-soft); color: var(--sale); }

.woocommerce-cart .cart-collaterals,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-checkout #customer_details { background: var(--surface); border-radius: var(--r-xl); padding: var(--sp-6); }
.woocommerce-cart .cart-collaterals { max-width: 420px; margin-left: auto; }
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout #order_review_heading { font-size: var(--fs-h3); }
.woocommerce-cart .cart_totals table { margin-bottom: var(--sp-4); }
.woocommerce-cart .cart_totals .checkout-button { width: 100%; }

.woocommerce-checkout #customer_details { margin-bottom: var(--sp-6); }
.woocommerce-checkout .woocommerce-checkout-review-order { margin-top: var(--sp-4); }
.woocommerce-checkout #payment { background: transparent; }
.woocommerce-checkout #payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
.woocommerce-checkout #payment ul.payment_methods li { margin-bottom: var(--sp-2); }
.woocommerce-checkout #payment div.payment_box { margin-top: var(--sp-1); padding: var(--sp-3); border-radius: var(--r-sm); background: var(--surface2); font-size: var(--fs-small); }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #place_order { width: 100%; min-height: 52px; font-size: 16px; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--sp-3); font-size: var(--fs-small); }

body.logged-in.woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.woocommerce-account:not(.logged-in) .woocommerce { max-width: 560px; }
.woocommerce-account .woocommerce-MyAccount-navigation { background: var(--surface); border-radius: var(--r-xl); padding: var(--sp-3); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation a { display: block; padding: var(--sp-3); border-radius: var(--r-md); color: var(--text2); }
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--fill); color: var(--text); text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--accent-soft); color: var(--on-soft); font-weight: 600; }
.woocommerce-account .woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-account .woocommerce-MyAccount-content form { max-width: 560px; }
.woocommerce-account .woocommerce-Addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.woocommerce-account .woocommerce-Address { padding: var(--sp-4); background: var(--surface); border-radius: var(--r-lg); }
.woocommerce-account .woocommerce-orders-table { margin-top: var(--sp-4); }
.woocommerce-account .woocommerce-orders-table td, .woocommerce-account .woocommerce-orders-table th { padding: var(--sp-3); }

.woocommerce-order .woocommerce-thankyou-order-received { font-size: var(--fs-h2); margin-bottom: var(--sp-4); }
.woocommerce-order ul.woocommerce-thankyou-order-details { display: flex; flex-wrap: wrap; gap: var(--sp-4); list-style: none; padding: 0; margin: 0 0 var(--sp-6); }
.woocommerce-order ul.woocommerce-thankyou-order-details li { min-width: 140px; padding: var(--sp-3); background: var(--surface); border-radius: var(--r-md); font-size: var(--fs-small); }

.woocommerce nav.woocommerce-pagination ul { display: flex; gap: var(--sp-1); list-style: none; justify-content: center; padding: 0; margin-top: var(--sp-10); }
.woocommerce nav.woocommerce-pagination a,
.woocommerce nav.woocommerce-pagination span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 var(--sp-2); border-radius: var(--r-md); color: var(--text2); }
.woocommerce nav.woocommerce-pagination a:hover { background: var(--fill); }
.woocommerce nav.woocommerce-pagination span.current { background: var(--text); color: var(--surface); }

.woocommerce-breadcrumb { display: none; }
.woocommerce-result-count { color: var(--muted); font-size: var(--fs-small); }
.woocommerce-ordering { margin-bottom: var(--sp-4); }

/* ── Responsive Woo account ────────────────────────────────── */
@media (max-width: 960px) {
    body.logged-in.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
    .woocommerce-cart .cart-collaterals { max-width: none; margin-left: 0; }
    .woocommerce table.shop_table_responsive tr td::before { font-weight: 600; }
}
@media (max-width: 720px) {
    .woocommerce table.shop_table { font-size: var(--fs-small); }
    .woocommerce table.shop_table th,
    .woocommerce table.shop_table td { padding: var(--sp-2) var(--sp-3); }
    .p-grid[data-view="list"] .p-card { padding: var(--sp-2); }
}

/* Woo pages use the full content width; only prose is capped. */
.kin-woo-page .entry-content { max-width: none; color: var(--text); }

/* A product without a gallery needs the full-width stage. */
.gallery-single { grid-template-columns: 1fr; }

/* Product-page rating: keep the score and review count separated. */
.rating-link { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; }
.rating-link:hover { text-decoration: none; }

/* Woo appends a "View cart" link after AJAX add-to-cart; the card has its own state. */
.p-buy .added_to_cart { display: none; }

/* Woo review form is plain comment markup, not .form-row. */
.woocommerce-Reviews #review_form_wrapper,
.woocommerce-Reviews #review_form { max-width: 680px; }
.woocommerce-Reviews .comment-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.woocommerce-Reviews .comment-form p { margin: 0; }
.woocommerce-Reviews .comment-form label { display: block; margin-bottom: 6px; font-size: var(--fs-small); color: var(--text2); }
.woocommerce-Reviews .comment-form input[type="text"],
.woocommerce-Reviews .comment-form input[type="email"],
.woocommerce-Reviews .comment-form input[type="url"],
.woocommerce-Reviews .comment-form textarea,
.woocommerce-Reviews .comment-form select {
    width: 100%;
    min-height: 44px;
    padding: 10px var(--sp-3);
    border: 1.5px solid var(--line2);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    line-height: 1.4;
}
.woocommerce-Reviews .comment-form textarea { min-height: 130px; resize: vertical; }
.woocommerce-Reviews .comment-form input:focus,
.woocommerce-Reviews .comment-form textarea:focus,
.woocommerce-Reviews .comment-form select:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.woocommerce-Reviews .comment-form .comment-form-cookies-consent { display: flex; align-items: center; gap: var(--sp-2); }
.woocommerce-Reviews .comment-form .comment-form-cookies-consent label { margin: 0; }
.woocommerce-Reviews .comment-form .form-submit { margin-top: var(--sp-2); }
.woocommerce-Reviews .comment-form .submit { min-height: 46px; padding: 0 var(--sp-6); border: 0; border-radius: var(--r-md); background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; }
.woocommerce-Reviews .comment-form .submit:hover { background: var(--accent-hover); }

/* Woo replaces the rating select with a text-heavy star widget once its CSS is
   gone. Keep the native select: it is compact, keyboard-accessible and works
   without Woo's icon font. */
.woocommerce-Reviews .comment-form-rating .stars { display: none !important; }
.woocommerce-Reviews .comment-form-rating select { display: block !important; width: auto; min-width: 180px; }

/* ── КП form (kin-core shortcode bitrix_kp_custom_form) ──────────────
   Both A/B arms use the design-system classes; only the pieces the
   system does not have (lookup dropdown, multi-select, form card) are
   defined here. Tokens only — no literal colours or sizes. */
.ki-form { width: 100%; max-width: 760px; margin: 0 auto; }
.ki-form-card { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.ki-form-arm { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; margin: 0; padding: 0; border: 0; }
.ki-form .req { color: var(--sale); }
.ki-form .field { position: relative; }
.ki-form .error:empty { display: none; }
.ki-form .alert { margin: 0; }

/* DaData lookup dropdown */
.ki-lookup { position: relative; }
.ki-suggest { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0; max-height: 320px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
.ki-suggest-item { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: var(--sp-3); border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.ki-suggest-item:last-child { border-bottom: 0; }
.ki-suggest-item:hover, .ki-suggest-item:focus-visible { background: var(--fill); outline: none; }
.ki-suggest-item .name { font-weight: 600; }
.ki-suggest-item .meta { font-size: var(--fs-micro); color: var(--muted); }
.ki-suggest-manual { border-top: 1px solid var(--line2); background: var(--surface2); }
.ki-suggest-manual .name { color: var(--accent-ink); }
.ki-suggest-note { padding: var(--sp-3); font-size: var(--fs-small); color: var(--muted); text-align: center; }

/* Criteria multi-select */
.ki-multi-wrap { position: relative; }
.ki-multi-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); text-align: left; cursor: pointer; }
.ki-multi-panel { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0; padding: var(--sp-2); background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
.ki-multi-panel .choice { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); }
.ki-multi-panel .choice:hover { background: var(--fill); }
.ki-multi-clear { margin-top: var(--sp-1); padding-top: var(--sp-2); border-top: 1px solid var(--line); text-align: center; }

/* Consent + hints */
.ki-agree { align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-micro); line-height: 1.5; color: var(--muted); }
.ki-agree a { color: var(--accent-ink); }
.ki-hint-warn { color: var(--warn); }
.ki-hint-ok { color: var(--stock-ok); }

@media (max-width: 560px) {
  .ki-form-card { padding: var(--sp-4); }
}

.buybox .quote-link { margin-top: var(--sp-2); }