/*
 * Product page — product.json (PLAN §6.4). Buy box (gallery + content), VYNO KELIAS 3-card
 * grid, vineyard photo band + callout, related carousel, SEO block (shared with catalog.css
 * conceptually but this file owns the product-specific rules).
 */
.pv-buy-box {
    display: grid;
    /* Figma: content column is 558px (x876→1434); the gallery takes the remaining ~516px. */
    grid-template-columns: minmax(0, 1fr) 558px;
    gap: 66px;
    /* Figma 2623:5743: the buy-box row starts at y=161, 14px under the breadcrumb block. */
    padding-block: 14px var(--space-6);
    /* start (not the default stretch): expanding an accordion grows the content column; a
       stretched gallery would grow with it and drag the bottom-anchored photo deco down. */
    align-items: start;
}

.pv-buy-box__gallery {
    position: relative;
    display: flex;
    /* Figma 2623:5743: the pair is flush-LEFT in the 516px gallery column (which starts at
       x=294) — thumbs at x=295, bottle at x=448, i.e. an 87px gutter. Centring it pushed the
       thumbs to 381.5 and the bottle to 472.5. */
    justify-content: flex-start;
    gap: 87px;
    /* flex-start: keep .pv-buy-box__photo sized by the bottle (549px), never row height, so the
       deco's % anchors inside it are stable regardless of what the right column does. */
    align-items: flex-start;
}

.pv-buy-box__thumbs {
    display: flex;
    flex-direction: column;
    /* Figma "Group 5160" (2623:5945): 67x32 award medallions, 16px apart, no frame around them. */
    gap: var(--space-3);
}

.pv-buy-box__thumb {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.pv-buy-box__thumb img,
.pv-buy-box__medallion {
    width: 67px;
    height: 32px;
    object-fit: cover;
}

.pv-buy-box__photo {
    position: relative;
}

/* Figma 2623:5764 "pirmo-vino-png-4-copy 13": the bottle plate is 155x549 at x=448, not 250x600. */
.pv-buy-box__photo img {
    position: relative;
    z-index: 1;
    width: 155px;
    height: 549px;
    object-fit: contain;
}

/* Light-beige brand-mark behind the bottle (Figma 2365:5293) — masked deco-shapes tinted
   --neutrali-pilka so the exact token colour shows through the monogram's negative space. */
.pv-buy-box__photo-deco {
    position: absolute;
    /* Figma "Mask group" 2623:5756: 460x397 at x=295, its bottom edge (y=710) flush with the
       bottle's, horizontally centred on the bottle (deco centre 525, bottle centre 525.5). */
    left: 50%;
    bottom: 0;
    z-index: 0;
    width: 460px;
    height: 397px;
    transform: translateX(-50%);
    background-color: var(--neutrali-pilka);
    -webkit-mask: url("../../images/figma/deco-shapes-6a1414-749x653-gyM92_K.svg") center / contain no-repeat;
    mask: url("../../images/figma/deco-shapes-6a1414-749x653-gyM92_K.svg") center / contain no-repeat;
}

/* Vivino score pill — Figma "Group 4386" (2623:5783): 86x40, r32, white on a 1px --sub outline,
   mark + score in #aa1329 18px/23 700. Sits at x=669 of the 294→810 gallery column, hence
   right:55px; the gallery is the positioning context so it does not ride the bottle photo. */
.pv-vivino {
    position: absolute;
    top: 0;
    right: 55px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 86px;
    height: 40px;
    padding-inline: var(--space-3);
    border: 1px solid var(--sub);
    border-radius: 32px;
    background: var(--balta);
    color: #aa1329;
    font-size: 18px;
    line-height: 23px;
    font-weight: 700;
    letter-spacing: .9px;
}

/* Explicit per-element margins below (Figma pitch is uneven, a single gap cannot express it). */
.pv-buy-box__content {
    display: flex;
    flex-direction: column;
}

.pv-buy-box__badge {
    color: var(--ryski-raudona-shade);
    font-style: italic;
    font-weight: 600;
}

/* Figma 2623:5743 — name 20/35 ls 1, hairline 24px below its ink, price ink 16px under it. */
.pv-buy-box__name {
    font-size: 20px;
    line-height: 35px;
    letter-spacing: 1px;
    font-weight: 300;
    text-transform: uppercase;
}

.pv-buy-box__wine-name {
    font-weight: 700;
    font-style: italic;
}

.pv-buy-box__hairline {
    margin-block: 14px 5px;
    border: none;
    border-top: 1px solid var(--sub);
}

/* Figma meta is 16/22 #969696; kept on the a11y shade of that grey (tokens.css --sub-pilka-shade). */
.pv-buy-box__meta {
    color: var(--sub-pilka-shade);
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
}

/* Low-stock note (V9), matching the product card's treatment. #616161 rather than
   --sub-pilka-shade for the same AA reason recorded on .pv-product-card__low-stock: small muted
   text on the light ground needs 4.5:1, and #727272 only reaches 4.06:1. */
.pv-buy-box__low-stock {
    margin-bottom: var(--space-2);
    font-size: 13px;
    color: #616161;
}

.pv-buy-box__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: 18px;
    line-height: 35px;
    font-weight: 600;
}

.pv-buy-box__description {
    margin-top: 15px;
    font-size: 14px;
    line-height: 22px;
}

/* Figma 2365:5293: 100px segmented card — two 50px rows split by a hairline (not a padded stack). */
.pv-purchase-type {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-5);
    border: 1px solid var(--sub);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.pv-purchase-type .pv-radio {
    height: 50px;
    padding-inline: var(--space-4);
}

.pv-purchase-type .pv-radio + .pv-radio {
    border-top: 1px solid var(--sub);
}

.pv-radio {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 14px;
    font-weight: 600;
    accent-color: var(--juoda);
}

.pv-radio__note {
    margin-left: auto;
    color: var(--sub-pilka-shade);
    font-weight: 400;
}

/* Native radios (black selection per Figma). Re-assert visibility because the shared .pv-radio
   class collides with checkout's custom-dot pattern, whose global `.pv-radio input`
   (opacity:0; width:0; height:0) would otherwise hide these buy-box radios. */
.pv-purchase-type .pv-radio input[type='radio'] {
    position: static;
    width: auto;
    height: auto;
    opacity: 1;
    accent-color: var(--juoda);
}

.pv-buy-box__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.pv-qty-stepper {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 114px;
    height: 44px;
    justify-content: center;
    border: 1px solid var(--sub);
    border-radius: var(--radius-pill);
}

.pv-qty-stepper button {
    border: none;
    background: none;
    font-size: 18px;
    cursor: pointer;
}

/* Figma "Group 4394": bag+plus icon and label sit CENTRED as one 16px-gapped pair, not
   pushed to the two edges — the .btn defaults already do that, so no justify override here. */
.pv-buy-box__cta {
    flex: 1;
    width: 100%;
    /* Figma CTA is 44px (the .btn default is 48). */
    height: 44px;
}

.pv-buy-box__cta[disabled] {
    cursor: not-allowed;
}

.pv-accordion {
    margin-top: var(--space-5);
    border-top: 1px solid var(--sub);
}

.pv-accordion__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    /* Figma accordion pitch is 40px (header text row + divider), not the 56px a 16px pad gives. */
    padding-block: var(--space-2);
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .7px;
    cursor: pointer;
}

/* chevron sits at the far right; the leading book/calendar icon keeps its natural place */
.pv-accordion__chevron {
    margin-left: auto;
    transition: transform .3s ease;
}

.pv-accordion--expanded .pv-accordion__chevron {
    transform: rotate(180deg);
}

/* Smooth expand/collapse: animate the grid track 0fr→1fr (works with auto-height content —
   no JS measuring). The inner wrapper clips during the tween; visibility keeps the collapsed
   content out of the tab order / a11y tree, delayed on collapse so it hides AFTER the shrink. */
.pv-accordion__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s ease;
}

.pv-accordion--expanded .pv-accordion__body {
    grid-template-rows: 1fr;
}

.pv-accordion__body-inner {
    overflow: hidden;
    min-height: 0;
    visibility: hidden;
    transition: visibility 0s .35s;
}

.pv-accordion--expanded .pv-accordion__body-inner {
    visibility: visible;
    transition: visibility 0s;
}

.pv-attribute-table {
    padding-block: var(--space-2);
}

.pv-attribute-row {
    display: grid;
    grid-template-columns: 18px 90px 1fr;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--sub);
}

.pv-attribute-row__icon {
    justify-self: center;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.pv-attribute-row dt {
    color: var(--sub-pilka);
    font-size: 14px;
}

.pv-attribute-row dd {
    margin: 0;
    font-size: 14px;
}

.pv-bullet-list {
    padding-left: 1.2em;
    padding-block: var(--space-2);
}

.pv-vyno-kelias {
    padding-block: var(--space-7);
    text-align: center;
}

/* Heading left-aligned, flush with the cards below (Figma x=294); the cards keep centred content. */
.pv-vyno-kelias__heading {
    text-align: left;
}

.pv-vyno-kelias__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
}

/* Figma "Group 5179" (2623:5900-02): 364x550 SQUARE panels — no corner radius — with the
   illustration 64px from the top and the copy sitting at the bottom in --sodri-raudona. */
/* Client note #8 (interim, pending the #23 redesign): the copy used to be pushed to the card's
   bottom edge (space-between), so a one-line step and a five-line step started at different heights
   and the illustration-less step lost its top offset. Fixed rows keep the illustration slot and the
   copy's first line on the same baseline in every card. */
.pv-vyno-kelias__card {
    display: grid;
    grid-template-rows: 240px auto;
    align-content: start;
    min-height: 550px;
    padding: 64px 40px 60px;
    background: var(--neutrali-pilka);
}

.pv-vyno-kelias__card img {
    grid-row: 1;
    align-self: center;
    margin: 0 auto;
}

.pv-vyno-kelias__card p {
    grid-row: 2;
    margin-top: var(--space-5);
    color: var(--sodri-raudona);
    font-size: 20px;
    line-height: 25.6px;
    font-weight: 300;
}

.pv-vineyard-band {
    position: relative;
    overflow: hidden;
}

/* Figma "Rectangle 2954" (2623:5745): the band is 748px tall full-bleed, not 400. */
.pv-vineyard-band__photo {
    width: 100%;
    height: 748px;
    object-fit: cover;
}

/* White brand-mark overlaid center-right on the photo (Figma 2197:3381) —
   deco-shapes recolored white via the catalog.css filter idiom. */
.pv-vineyard-band__mark {
    position: absolute;
    /* Figma "Mask group" 502x433 at x=935 y=+275 of the 1728x748 band. */
    top: 36.8%;
    left: 54.1%;
    height: 57.9%;
    width: auto;
    filter: brightness(0) invert(1);
}

.pv-vineyards-callout {
    display: grid;
    grid-template-columns: 461px 1fr;
    gap: var(--space-6);
    align-items: center;
    padding-block: var(--space-7);
}

.pv-vineyards-callout__photo img {
    width: 100%;
    height: 398px;
    object-fit: cover;
    border-radius: var(--radius-card);
}

.pv-vineyards-callout__text h2 {
    color: var(--ryski-raudona);
    font-size: 40px;
    font-weight: 300;
    letter-spacing: 2px;
}

.pv-vineyards-callout__text p {
    margin-top: var(--space-3);
}

.pv-vineyards-callout__text .btn {
    margin-top: var(--space-4);
}

.pv-related {
    padding-block: var(--space-7);
}

.pv-related__track {
    display: grid;
    grid-auto-flow: column;
    /* Figma "Group 4407": THREE 364px cards across the 1140 container with 24px gutters. */
    grid-auto-columns: calc((100% - 2 * var(--space-4)) / 3);
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-top: var(--space-5);
}

.pv-related__track > * {
    scroll-snap-align: start;
}

/* Nav sits top-right, aligned with the "PANAŠŪS VYNAI" heading (Figma 2365:5293). */
.pv-related__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pv-related__nav {
    display: flex;
    gap: var(--space-3);
}

.pv-related__prev,
.pv-related__next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--ryski-raudona);
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

/* Figma draws the two circles in DIFFERENT reds: "Group 4309" (2623:5846/5847) — the PREV
   button — is #6a1414 outline + chevron; only "Group 4308" (2623:5843/5844), NEXT, is #ee2737. */
.pv-related__prev {
    border-color: var(--sodri-raudona);
}

/* Figma 2623:5844 "Icon feather-chevron-down" rotated -90deg: a 7.2x14.4 CHEVRON on a 1px
   stroke — not a long arrow. The SVG export is the stroke box (9x16 viewBox), so an 8.5x15.11
   element puts the chevron's centreline back on exactly 7.2x14.4. Masked so one export can be
   tinted per button. */
.pv-related__arrow {
    width: 8.5px;
    height: 15.11px;
    background-color: var(--ryski-raudona);
    -webkit-mask: url("../../images/figma/product/icon-chevron-right-ee2737-9x16-6GAJ24J.svg") center / contain no-repeat;
    mask: url("../../images/figma/product/icon-chevron-right-ee2737-9x16-6GAJ24J.svg") center / contain no-repeat;
}

.pv-related__prev .pv-related__arrow {
    background-color: var(--sodri-raudona);
    transform: rotate(180deg);
}

/* SEO band — the product page dropped it (client note #12); the catalog list still renders one
   from the shop page's own copy, so the layout rules stay here. */
.pv-seo-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.pv-seo-block__deco {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ryski-raudona);
    min-height: 320px;
    overflow: hidden;
}

.pv-seo-block__motif {
    width: auto;
    height: 70%;
    object-fit: contain;
}

/* Figma "Group 4377": the copy is a 461px column whose RIGHT edge lands on the page container's
   right edge (x=1434 of 1728) — 109px in from the band's half, gutter-width out on the right. */
.pv-seo-block__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-7) 0 var(--space-7) 109px;
    padding-right: max(var(--container-pad), calc(50vw - var(--container-max) / 2));
    background: var(--neutrali-pilka);
    font-size: 14px;
    line-height: 24px;
}

@media (max-width: 768px) {
    .pv-buy-box,
    .pv-vineyards-callout,
    .pv-seo-block {
        grid-template-columns: 1fr;
    }

    .pv-vyno-kelias__grid {
        grid-template-columns: 1fr;
    }

    .pv-buy-box__photo {
        overflow: hidden;
    }

    /* The desktop 87px gutter is a two-column layout; at 360px the medallions leave the flex row
       (absolute, top-left of the gallery) so the bottle centres in the column as the design has it. */
    .pv-buy-box__gallery {
        justify-content: center;
        gap: 0;
    }

    .pv-buy-box__thumbs {
        position: absolute;
        top: 0;
        left: 0;
    }

    .pv-buy-box__thumb {
        min-height: 44px;
    }

    /* Meta above the price, each chip unbroken (design frame 2623:11307). */
    .pv-buy-box__price {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: var(--space-1);
    }

    .pv-buy-box__meta span {
        white-space: nowrap;
    }

    .pv-buy-box__meta-sep {
        display: none;
    }

    .pv-buy-box__actions {
        gap: var(--space-2);
    }

    /* The label is one line at 360px only if the icon gap and the side padding shrink with the button. */
    .pv-buy-box__cta {
        gap: var(--space-2);
        padding-inline: var(--space-3);
        white-space: nowrap;
    }

    /* 44px touch targets inside the unchanged 114px pill — the −/+ cells take the whole height. */
    .pv-qty-stepper {
        gap: 0;
        justify-content: space-between;
    }

    /* The mini-cart variant is a 35px pill with 12px glyph buttons of its own — left alone. */
    .pv-qty-stepper:not(.pv-mini-cart-stepper) button {
        display: grid;
        place-items: center;
        min-width: 44px;
        min-height: 44px;
    }

    /* The desktop offsets are percentages of a 1728px band — at 360px they push the mark off-screen.
       Anchored with right/left, never transform: the element carries data-fx="shape", so the effects
       controller writes its own inline transform and any translate-based centring here is discarded. */
    .pv-vineyard-band__mark {
        left: auto;
        right: var(--space-3);
        width: 150px;
        height: auto;
    }

    /* 40px with the inherited 24px line-height overlaps once the heading wraps. */
    .pv-vineyards-callout__text h2 {
        font-size: 28px;
        line-height: 34px;
    }

    /* Nav circles centred under the track (design frame 2623:11307): the head dissolves so its
       children join the section's flex column and can be ordered around the track. */
    .pv-related {
        display: flex;
        flex-direction: column;
    }

    .pv-related__head {
        display: contents;
    }

    .pv-related__head h2 {
        order: 1;
    }

    .pv-related__track {
        grid-auto-columns: 88%;
        order: 2;
    }

    .pv-related__nav {
        order: 3;
        justify-content: center;
        margin-top: var(--space-5);
    }

    .pv-buy-box__description {
        display: none;
    }

    .pv-seo-block__text {
        padding: var(--space-6) var(--container-pad);
    }
}