/**
 * Single product page — layout and purchase panel.
 *
 * Loaded only on is_product() (inc/product-single.php). Everything is
 * scoped under body.lp-pdp. Uses the shared --lp-* tokens from
 * design-system-lab.css. !important is only used where it has to beat
 * WooCommerce's float layout and the legacy Anima rules.
 */

/* ==========================================================================
   1. Two-column layout: gallery | purchase panel
   ========================================================================== */

body.lp-pdp .woocommerce div.product,
body.lp-pdp div.product {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 56px);
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(16px, 3vw, 32px) clamp(16px, 4vw, 32px) 0;
    /* clip, not hidden: still trims the sale ribbon but does not make
       div.product a scroll container, which would break the sticky
       add-to-cart bar below. */
    overflow: clip !important;
}

body.lp-pdp div.product::before,
body.lp-pdp div.product::after {
    display: none !important;
}

body.lp-pdp div.product > * {
    grid-column: 1 / -1;
    min-width: 0;
}

body.lp-pdp div.product > .woocommerce-product-gallery,
body.lp-pdp div.product > div.images {
    grid-column: 1;
    grid-row: 1;
    float: none !important;
    width: 100% !important;
    margin: 0 0 24px !important;
}

body.lp-pdp div.product > .summary {
    grid-column: 2;
    grid-row: 1;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

/* ==========================================================================
   2. Gallery
   ========================================================================== */

body.lp-pdp .woocommerce-product-gallery__image img,
body.lp-pdp .woocommerce-product-gallery .flex-viewport {
    border-radius: var(--lp-radius-lg);
}

body.lp-pdp .woocommerce-product-gallery__image img {
    border: 1px solid var(--lp-color-border);
    background: var(--lp-color-surface);
}

body.lp-pdp .flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0 0 !important;
    padding: 0;
    list-style: none;
}

body.lp-pdp .flex-control-thumbs li {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

body.lp-pdp .flex-control-thumbs img {
    display: block;
    width: 100%;
    border: 1px solid var(--lp-color-border);
    border-radius: var(--lp-radius-md);
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

body.lp-pdp .flex-control-thumbs img:hover,
body.lp-pdp .flex-control-thumbs img.flex-active {
    opacity: 1;
    border-color: var(--lp-color-primary-500);
}

/* ==========================================================================
   3. Title, price, short description
   ========================================================================== */

body.lp-pdp .summary .product_title {
    margin: 0 0 12px;
    text-align: left;
    color: var(--lp-color-ink);
    font-family: var(--lp-font-heading);
    font-size: clamp(26px, 3vw, var(--lp-text-3xl));
    font-weight: 600;
    line-height: var(--lp-line-heading);
    letter-spacing: -0.02em;
}

/* Beats WooCommerce's colour/size on p.price and the legacy grey. */
body.lp-pdp .summary .price,
body.lp-pdp .summary .price .amount,
body.lp-pdp .summary .price bdi {
    color: var(--lp-color-primary-700) !important;
    font-family: var(--lp-font-heading) !important;
    font-size: var(--lp-text-2xl) !important;
    font-weight: 700 !important;
    line-height: 1.2;
}

body.lp-pdp .summary .price {
    margin: 0 0 18px;
}

body.lp-pdp .summary .price del,
body.lp-pdp .summary .price del .amount,
body.lp-pdp .summary .price del bdi {
    color: var(--lp-color-muted) !important;
    font-size: var(--lp-text-lg) !important;
    font-weight: 500 !important;
}

body.lp-pdp .summary .price ins {
    background: none;
    text-decoration: none;
}

body.lp-pdp .woocommerce-product-details__short-description {
    margin: 0 0 22px;
    color: var(--lp-color-ink);
    font-family: var(--lp-font-body);
    font-size: var(--lp-text-base);
    line-height: var(--lp-line-body);
}

body.lp-pdp .woocommerce-product-details__short-description p {
    margin: 0 0 0.8em;
}

body.lp-pdp .woocommerce-product-details__short-description a {
    color: var(--lp-color-primary-700);
}

/* ==========================================================================
   4. Add to cart
   ========================================================================== */

body.lp-pdp form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    margin: 0 0 16px;
}

/* Variable products: the variations table sits above the button row. */
body.lp-pdp form.variations_form {
    display: block;
}

body.lp-pdp form.cart .quantity {
    margin: 0;
}

body.lp-pdp form.cart .quantity .qty {
    width: 76px;
    height: 100%;
    min-height: 52px;
    border: 1px solid var(--lp-color-border);
    border-radius: var(--lp-radius-sm);
    background: var(--lp-color-surface);
    color: var(--lp-color-ink);
    font-family: var(--lp-font-body);
    font-size: var(--lp-text-base);
    text-align: center;
}

/* A PDF is bought once: no quantity field. The input stays in the DOM
   (value 1) so the form still posts a valid quantity. */
body.lp-pdp--digital form.cart .quantity {
    display: none !important;
}

body.lp-pdp form.cart .single_add_to_cart_button {
    flex: 1 1 200px;
    min-height: 52px;
    margin: 0 !important;
    padding: 0 28px !important;
    font-size: var(--lp-text-lg) !important;
    line-height: 1.2;
    box-shadow: var(--lp-shadow-sm);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

body.lp-pdp form.cart .single_add_to_cart_button:hover {
    box-shadow: var(--lp-shadow-md);
}

body.lp-pdp form.cart .single_add_to_cart_button:focus-visible {
    outline: none;
    box-shadow: var(--lp-shadow-focus);
}

/* Reassurance list */
body.lp-pdp .lp-pdp-trust {
    display: grid;
    gap: 8px;
    margin: 0 0 24px;
    padding: 16px 18px;
    border: 1px solid var(--lp-color-border);
    border-radius: var(--lp-radius-md);
    background: var(--lp-color-surface-warm);
    list-style: none;
    color: var(--lp-color-muted);
    font-size: var(--lp-text-sm);
    line-height: 1.5;
}

body.lp-pdp .lp-pdp-trust li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    padding: 0;
}

body.lp-pdp .lp-pdp-trust li::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 0.4em;
    border-radius: 50%;
    background: var(--lp-color-primary-500);
}

body.lp-pdp .lp-pdp-trust a {
    color: var(--lp-color-primary-700);
    font-weight: 700;
}

/* Category/tag block: just calmer for now (tags are reworked later). */
body.lp-pdp .product_meta {
    padding-top: 16px;
    border-top: 1px solid var(--lp-color-border);
    color: var(--lp-color-muted);
    font-size: var(--lp-text-sm);
    line-height: 1.6;
}

body.lp-pdp .product_meta > span {
    display: block;
    margin-bottom: 6px;
}

body.lp-pdp .product_meta a {
    color: var(--lp-color-primary-700);
}

/* ==========================================================================
   5. Below the fold keeps the full width
   ========================================================================== */

body.lp-pdp div.product .woocommerce-tabs,
body.lp-pdp div.product .related,
body.lp-pdp div.product .upsells {
    margin-top: clamp(24px, 4vw, 48px);
}

/* ==========================================================================
   6. Tablet and phone
   ========================================================================== */

@media screen and (max-width: 860px) {
    body.lp-pdp div.product {
        grid-template-columns: minmax(0, 1fr);
    }

    body.lp-pdp div.product > .woocommerce-product-gallery,
    body.lp-pdp div.product > div.images,
    body.lp-pdp div.product > .summary {
        grid-column: 1;
        grid-row: auto;
    }
}

/* Phone: the simple-product add-to-cart row sticks to the bottom of the
   screen while the purchase panel is on screen, so the button is always
   reachable. Variable products keep the normal flow (their options must
   be visible). */
@media screen and (max-width: 640px) {
    body.lp-pdp form.cart:not(.variations_form) {
        position: sticky;
        bottom: 0;
        z-index: 20;
        flex-wrap: nowrap;
        margin: 0 -16px 16px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--lp-color-border);
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 -6px 18px rgba(31, 39, 38, 0.08);
    }

    body.lp-pdp form.cart:not(.variations_form) .single_add_to_cart_button {
        flex: 1 1 auto;
        padding: 0 16px !important;
    }
}

/* ==========================================================================
   Sale ribbon ("Promocja!") on the gallery
   ========================================================================== */

/* The generic corner ribbon (woocommerce/custom-woocommerce.css, section 9)
 * is positioned from div.product's own top-left and clipped by that box.
 * On this layout div.product has no background and is inset from the
 * gallery by its padding, so the clip edge floats in the page: the ribbon's
 * top end was sliced by a horizontal line and its lower end hung in mid-air,
 * so it looked too short.
 *
 * Here the ribbon is anchored to the GALLERY's top-left corner (the same
 * padding offsets div.product uses) and cut with clip-path so both ends
 * stop exactly on the image's top and left edges, like a corner ribbon
 * wrapped around the picture - it reads as running on past the frame.
 *
 * Geometry (all in px): the band is W wide, H tall, rotated -45deg about
 * its centre, which sits C px from the corner along each edge (so the
 * centre line is x + y = 2C). K = C * sqrt(2). The two edges x = 0 and
 * y = 0 cut the rotated band's ends at 45deg; in the band's own
 * (unrotated) coordinates that is the trapezoid below. W >= 2K + H keeps the
 * band's own box from cutting anything first.
 *   C = 56, H = 34, K = 79.2, W = 194
 */
body.lp-pdp div.product > span.onsale {
    /* div.product is a grid and "> * { grid-column: 1 / -1 }" above would
       make this absolutely-positioned child measure from the grid area
       (inside the padding) instead of the padding edge the offsets below
       assume - which shifted the ribbon right by the side padding. */
    grid-column: auto;
    grid-row: auto;
    --lp-ribbon-pad-x: clamp(16px, 4vw, 32px);
    --lp-ribbon-pad-y: clamp(16px, 3vw, 32px);
    /* band centre = gallery corner + (56, 56) */
    top: calc(var(--lp-ribbon-pad-y) + 56px - 17px) !important;
    left: calc(var(--lp-ribbon-pad-x) + 56px - 97px) !important;
    width: 194px !important;
    height: 34px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    box-shadow: none !important;
    pointer-events: none;
    clip-path: polygon(
        calc(97px - 79.2px + 17px) 0,
        calc(97px + 79.2px - 17px) 0,
        calc(97px + 79.2px + 17px) 34px,
        calc(97px - 79.2px - 17px) 34px
    );
}

/* ==========================================================================
   7. Product copy: typography and lists
   ========================================================================== */

/* Applies to the short description (next to the price) and the "Opis" tab.
 * Both are rich text pasted from elsewhere (Facebook/Word), so they arrive
 * with inline fonts, stray headings and bare browser-default lists. This
 * section puts them on the site's own type scale and gives lists the same
 * brand treatment as the rest of the page. Selectors are scoped under
 * body.lp-pdp so nothing outside a product page changes.
 *
 * Markup cleanup that CSS can't do (blank spacer paragraphs, extra <h1>s,
 * "product_title" classes on list items) lives in
 * anima_child_tidy_product_copy() in inc/product-single.php. */

/* "Opis" tab as a readable card with a centred text column. */
body.lp-pdp .woocommerce-Tabs-panel--description,
body.lp-pdp .woocommerce-Tabs-panel--additional_information {
    padding: clamp(20px, 4vw, 40px);
    border: 1px solid var(--lp-color-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-color-surface);
}

body.lp-pdp .woocommerce-Tabs-panel--description > *:not(img):not(figure):not(table) {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

body.lp-pdp .woocommerce-Tabs-panel--description > h2:first-child {
    /* the tab repeats its own "Opis" heading right under the tab label */
    display: none;
}

/* --- Base text ----------------------------------------------------------- */

body.lp-pdp :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel--description) {
    color: var(--lp-color-ink);
    font-family: var(--lp-font-body);
    font-size: var(--lp-text-base);
    line-height: var(--lp-line-body);
}

/* Pasted inline fonts must not win over the site fonts. */
body.lp-pdp :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel--description) [style*="font-family"] {
    font-family: inherit !important;
}

body.lp-pdp :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel--description) :is(p, div, span, li, td, th) {
    font-family: var(--lp-font-body);
}

body.lp-pdp :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel--description) p {
    margin: 0 0 1em;
}

body.lp-pdp :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel--description) strong,
body.lp-pdp :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel--description) b {
    font-weight: 700;
}

body.lp-pdp :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel--description) a {
    color: var(--lp-color-primary-700);
    text-decoration: underline;
    text-decoration-color: var(--lp-color-primary-100);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: text-decoration-color 160ms ease, color 160ms ease;
}

body.lp-pdp :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel--description) a:hover,
body.lp-pdp :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel--description) a:focus-visible {
    color: var(--lp-color-primary-900);
    text-decoration-color: currentColor;
}

/* --- Headings ------------------------------------------------------------ */

body.lp-pdp .woocommerce-Tabs-panel--description :is(h1, h2, h3, h4, h5, h6) {
    margin: 1.8em 0 0.6em;
    color: var(--lp-color-ink);
    font-family: var(--lp-font-heading);
    font-weight: 600;
    line-height: var(--lp-line-heading);
    letter-spacing: -0.01em;
}

body.lp-pdp .woocommerce-Tabs-panel--description :is(h1, h2) {
    font-size: var(--lp-text-2xl);
}

body.lp-pdp .woocommerce-Tabs-panel--description h3 {
    font-size: var(--lp-text-xl);
}

body.lp-pdp .woocommerce-Tabs-panel--description h4 {
    font-size: var(--lp-text-lg);
}

/* h5/h6 are used as small lead-ins ("Co znajdziesz w pakiecie:") - shown
   as a quiet eyebrow label rather than another big heading. */
body.lp-pdp .woocommerce-Tabs-panel--description :is(h5, h6) {
    color: var(--lp-color-primary-700);
    font-family: var(--lp-font-body);
    font-size: var(--lp-text-sm);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.lp-pdp .woocommerce-Tabs-panel--description > :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

/* --- Lists --------------------------------------------------------------- */

body.lp-pdp :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel--description) :is(ul, ol) {
    margin: 0 0 1.2em;
    padding: 0;
    list-style: none;
}

body.lp-pdp :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel--description) :is(ul, ol) :is(ul, ol) {
    margin: 0.55em 0 0.2em;
}

body.lp-pdp :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel--description) li {
    position: relative;
    margin: 0 0 0.6em;
    padding-left: 30px;
    line-height: var(--lp-line-body);
}

body.lp-pdp :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel--description) li:last-child {
    margin-bottom: 0;
}

/* Unordered: a brand-green dot in a soft ring. */
body.lp-pdp :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel--description) ul > li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lp-color-primary-500);
    box-shadow: 0 0 0 4px var(--lp-color-primary-100);
}

/* Nested unordered: smaller hollow dot, so depth is readable. */
body.lp-pdp :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel--description) ul ul > li::before {
    top: 0.68em;
    left: 7px;
    width: 6px;
    height: 6px;
    background: var(--lp-color-surface);
    border: 2px solid var(--lp-color-primary-500);
    box-shadow: none;
}

/* Ordered: numbered brand-green circles. */
body.lp-pdp :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel--description) ol {
    counter-reset: lp-step;
}

body.lp-pdp :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel--description) ol > li {
    counter-increment: lp-step;
    padding-left: 38px;
}

body.lp-pdp :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel--description) ol > li::before {
    content: counter(lp-step);
    position: absolute;
    top: 0.12em;
    left: 0;
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lp-color-primary-100);
    color: var(--lp-color-primary-900);
    font-size: var(--lp-text-sm);
    font-weight: 800;
    line-height: 1;
}

/* A list item that is only a bold line (the bundle names in the short
   description) reads as a small card-like row instead of a bare bullet. */
body.lp-pdp .woocommerce-product-details__short-description li > strong:only-child {
    font-size: var(--lp-text-md);
    line-height: 1.4;
}

/* --- Quotes, rules, media ------------------------------------------------ */

body.lp-pdp :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel--description) blockquote {
    margin: 1.4em 0;
    padding: 14px 18px;
    border-left: 4px solid var(--lp-color-accent-500);
    border-radius: 0 var(--lp-radius-md) var(--lp-radius-md) 0;
    background: var(--lp-color-surface-warm);
    color: var(--lp-color-ink);
}

body.lp-pdp :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel--description) blockquote p:last-child {
    margin-bottom: 0;
}

body.lp-pdp :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel--description) hr {
    height: 1px;
    margin: 1.8em 0;
    border: 0;
    background: var(--lp-color-border);
}

body.lp-pdp .woocommerce-Tabs-panel--description img:not(.emoji) {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.4em auto;
    border: 1px solid var(--lp-color-border);
    border-radius: var(--lp-radius-lg);
}

body.lp-pdp :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel--description) img.emoji {
    display: inline;
    width: 1.1em;
    height: 1.1em;
    margin: 0 0.1em;
    border: 0;
    vertical-align: -0.15em;
}

@media screen and (max-width: 640px) {
    body.lp-pdp .woocommerce-Tabs-panel--description {
        padding: 18px 16px;
    }
}

/* ==========================================================================
   8. Category chips and "Powiązane tematy"
   ========================================================================== */

body.lp-pdp .lp-pdp-meta__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

body.lp-pdp .lp-pdp-meta__label {
    color: var(--lp-color-muted);
    font-size: var(--lp-text-sm);
    font-weight: 700;
}

body.lp-pdp .lp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.lp-pdp .lp-chips li {
    margin: 0;
    padding: 0;
}

body.lp-pdp .lp-chips li::before {
    display: none;
}

body.lp-pdp a.lp-chip {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--lp-color-border);
    border-radius: var(--lp-radius-full);
    background: var(--lp-color-surface-warm);
    color: var(--lp-color-primary-900);
    font-size: var(--lp-text-sm);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

body.lp-pdp a.lp-chip:hover,
body.lp-pdp a.lp-chip:focus-visible {
    border-color: var(--lp-color-primary-500);
    background: var(--lp-color-primary-50);
    color: var(--lp-color-primary-700);
}

body.lp-pdp .lp-pdp-topics {
    margin-top: clamp(24px, 4vw, 40px);
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid var(--lp-color-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-color-surface);
}

body.lp-pdp .lp-pdp-topics h2 {
    margin: 0 0 14px;
    color: var(--lp-color-ink);
    font-family: var(--lp-font-heading);
    font-size: var(--lp-text-xl);
    font-weight: 600;
}

body.lp-pdp .lp-pdp-topics__more {
    margin-top: 14px;
}

body.lp-pdp .lp-pdp-topics__more summary {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--lp-color-primary-700);
    font-size: var(--lp-text-sm);
    font-weight: 700;
    cursor: pointer;
}

body.lp-pdp .lp-pdp-topics__more summary:hover {
    color: var(--lp-color-primary-900);
}

body.lp-pdp .lp-pdp-topics__more[open] summary {
    margin-bottom: 12px;
}