/* ============================================================
   Poster page in code (templates/product-page/page.php).

   Layout values are the ones the Elementor layout carried
   (post-80.css): widths, gaps, the sand panels, sticky offsets
   and the 1024/767px breakpoints. Typography and components
   still come from WoodMart and style.css.
   ============================================================ */

/* Libre Caslon Text italic, for the heading's description line. WoodMart
   loads only the upright 400; without this the browser slants it itself. */
@font-face {
    font-family: 'Libre Caslon Text';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/libre-caslon-text-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Libre Caslon Text';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/libre-caslon-text-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.pb-pdp {
    --pb-pdp-sand: var(--color-surface-warm);
    /* The site's grid: WoodMart's container (1700px, 15px gutters), the same
       edges as the header and footer. .pb-pdp already sits inside it, so
       the sections only need to fill it. */
    --pb-pdp-wide: var(--wd-container-w, 1700px);
}

.pb-pdp__crumbs .wd-breadcrumbs {
    font-size: 12px;
}

.pb-pdp__crumbs {
    margin-bottom: -20px;
    /* 15px below the header, as on the live page. */
    padding: 20px 0 10px;
}

/* ---- Gallery + buying column ------------------------------ */

.pb-pdp__hero {
    display: flex;
    /* The design's proportions (51:49, 56px gap) across the site's grid. */
    gap: 20px 56px;
    align-items: flex-start;
    padding: 10px 0;
    box-sizing: border-box;
}

.pb-pdp__gallery {
    flex: 1 1 50%;
    min-width: 0;
    box-sizing: border-box;
    position: sticky;
    top: 110px;
    /* The panel is as tall as the poster (5:7) needs to fill its width, but
       never taller than the screen below the sticky header. A fixed cap left
       wide screens with a small poster between broad bands of sand. */
    container-type: inline-size;
    --pb-gal-pad: 20px;
    --pb-gal-side: 120px; /* thumbnail column + gap */
    --pb-gal-fit: calc((100cqw - var(--pb-gal-side) - 2 * var(--pb-gal-pad)) * 1075 / 768 + 2 * var(--pb-gal-pad));
    /* 900px: the poster files are 857×1200, larger than ~860px tall they
       turn soft. */
    --pb-gal-h: min(var(--pb-gal-fit), calc(100vh - 140px), 900px);
}

.pb-pdp__gallery .woocommerce-product-gallery {
    --wd-gallery-gap: 16px;
}

/* Only the photo sits on the sand; the thumbnails stand beside it. */
.pb-pdp__gallery .wd-gallery-images {
    height: var(--pb-gal-h);
    background: var(--color-surface-warm);
    border-radius: 12px;
    overflow: hidden;
}

.pb-pdp__gallery .wd-gallery-images :is(.wd-carousel-inner, .wd-carousel, .wd-carousel-wrap, .wd-carousel-item, .woocommerce-product-gallery__image) {
    height: 100%;
}

/* The slide link is a shrink-to-fit flex item: without a definite size the
   image measured 0×0 until it loaded and the page below jumped. A definite
   height lets the width/height attributes size it from the first paint. */
.pb-pdp__gallery .woocommerce-product-gallery__image > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* The poster itself: margin all round and a soft shadow, as if on the wall.
   drop-shadow follows the poster, not the letterboxed box. */
.pb-pdp .pb-pdp__gallery .wd-gallery-images .wd-carousel-item:first-child img {
    width: auto;
    height: calc(var(--pb-gal-h) - 2 * var(--pb-gal-pad));
    max-width: calc(100% - 2 * var(--pb-gal-pad));
    max-height: none; /* style.css caps gallery pictures at 100svh - 200px */
    object-fit: contain;
    filter: drop-shadow(0 20px 22px rgba(35, 35, 31, .22));
}

/* The room photos are shown whole, framed by the same margin of sand as the
   poster, never cropped. The panel is kept from getting much wider than
   4:5 so the margins around a 3:4 photo stay even. */
.pb-pdp .pb-pdp__gallery .wd-gallery-images {
    max-width: calc(var(--pb-gal-h) * .8);
}

.pb-pdp .pb-pdp__gallery .wd-gallery-images .wd-carousel-item:not(:first-child) img {
    width: auto;
    height: calc(var(--pb-gal-h) - 2 * var(--pb-gal-pad));
    max-width: calc(100% - 2 * var(--pb-gal-pad));
    max-height: none;
    object-fit: contain;
    border-radius: 6px;
}

/* Beats WoodMart's left-thumbnail rule, which gives each 25px below. */
.pb-pdp__gallery .woocommerce-product-gallery.thumbs-position-left .wd-gallery-thumb .wd-carousel-item {
    margin-bottom: 0;
}

.pb-pdp__gallery .wd-gallery-thumb .wd-carousel-item img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border: 1.5px solid #E5DED2;
    border-radius: 8px;
    box-sizing: border-box;
}

.pb-pdp__gallery .wd-gallery-thumb .wd-carousel-item.wd-thumb-active img {
    border: 2px solid #23231F;
}

/* Desktop: a column of 88×118 thumbnails left of the photo, 16px apart
   from it. WoodMart would stretch four of them over the photo's height. */
@media (min-width: 1025px) {
    .pb-pdp__gallery .thumbs-position-left {
        --wd-thumbs-width: 104px;
    }

    /* WoodMart lets the column grow: with the photo panel capped it pushed
       the photo away from its thumbnails. */
    .pb-pdp__gallery .thumbs-position-left .wd-gallery-thumb {
        flex: 0 0 var(--wd-thumbs-width);
    }

    .pb-pdp__gallery .thumbs-position-left .wd-gallery-thumb .wd-carousel-inner {
        padding: 0;
    }

    .pb-pdp__gallery .thumbs-position-left .wd-gallery-thumb .wd-carousel-item img {
        width: 88px;
        height: 118px;
    }
}

.pb-pdp__gallery .wd-gallery-images {
    position: relative;
}

.pb-gal-count,
.pb-gal-zoom {
    position: absolute;
    z-index: 3;
    background: #fff;
    border: 1px solid #E5DED2;
    border-radius: 999px;
    color: var(--color-heading);
    font-size: 12px;
    line-height: 1;
}

.pb-gal-count {
    top: 12px;
    left: 12px;
    padding: 7px 12px;
    font-weight: 600;
    letter-spacing: .04em;
    pointer-events: none;
}

.pb-gal-zoom {
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
    text-transform: none;
    cursor: pointer;
}

.pb-gal-zoom:hover {
    border-color: #9C9484;
}

@media (max-width: 1024px) {
    /* An icon on touch screens, where the label crowded the photo. */
    .pb-gal-zoom {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
    }

    .pb-gal-zoom span {
        display: none;
    }
}

.pb-pdp__buy {
    flex: 0 0 47.06%;
    /* Wide screens: the buying column stops growing and the gallery takes
       the rest, so tiles and lines keep their measure. */
    max-width: 680px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 110px;
}

.pb-pdp__card {
    /* The name lines up with the top of the gallery, as designed. */
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

/* The Elementor title widget set 36px at every width; WoodMart's own size
   shrinks to 20px on phones. */
.pb-pdp .pb-pdp__title .product_title {
    font-size: 36px;
    line-height: 1.2;
}

/* The approved heading ("Tytuł — warianty"): name over an italic line in
   the same serif, 44/21px (34/18 tablet, 33/18 phone). The text of the <h1>
   is the product name as ever; the dash between the two parts is only
   hidden from view. */
.pb-pdp .pb-pdp__title .product_title {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    color: var(--color-heading);
}

.pb-pdp .pb-title__name {
    display: block;
    font-family: var(--font-heading);
    font-size: 44px;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.005em;
    text-wrap: balance;
}

.pb-title__sep {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pb-pdp .pb-title__desc {
    /* Block, so ::first-letter applies. */
    display: block;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.35;
    color: #6B6A62;
    text-wrap: pretty;
}

/* Stored lowercase ("delikatne polne kwiaty"); the capital is painted only,
   so what search and screen readers get is the text as written. */
.pb-title__desc::first-letter {
    text-transform: uppercase;
}

@media (max-width: 1024px) {
    .pb-pdp .pb-pdp__title .product_title {
        gap: 5px;
    }

    .pb-pdp .pb-title__name {
        font-size: 34px;
        line-height: 1.1;
        letter-spacing: 0;
    }

    .pb-pdp .pb-title__desc {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .pb-pdp .pb-title__name {
        font-size: 33px;
    }
}

.pb-pdp__price {
    margin: 10px 0 20px;
}

/* The artist's credit under the name, like a signature: her photo, her
   name in the heading serif, the role underneath. */
.pb-pdp__byline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin: 4px 0 0;
    color: inherit;
    text-decoration: none;
}

.pb-pdp__byline-photo {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.pb-pdp__byline-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.pb-pdp__byline-name {
    font-family: var(--font-heading);
    font-size: 16px;
    color: var(--color-heading);
}

.pb-pdp__byline-role {
    font-size: 12px;
    letter-spacing: .02em;
    color: #6B6A62;
}

.pb-pdp__byline:hover .pb-pdp__byline-name {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* WiserReview draws the stars once its (delayed) script runs; keep their room:
   one line. It appends an empty inline-block after the stars that adds a
   second line box (47px instead of 21px); that one is dropped. */
.pb-pdp__rating {
    min-height: 21px;
}

.pb-pdp__rating .wiser_review > div:empty {
    display: none;
}

/* The thumbnail strip keeps room for its arrows even when all photos fit and
   the arrows are locked; then the room goes. */
.pb-pdp__gallery .wd-thumb-nav:not(:has(.wd-btn-arrow:not(.wd-lock))) {
    display: none;
}

.pb-pdp .pb-pdp__price .price {
    font-size: 36px;
}

/* The widget asked for 80%, but style.css stretched it to the full column. */
.pb-pdp__atc {
    width: 100%;
}

.pb-pdp__atc form {
    flex-direction: column;
}

.pb-pdp .pb-pdp__atc .single_add_to_cart_button {
    font-size: 18px;
    font-weight: 700;
}

.pb-pdp .pb-pdp__atc .variations_form .woocommerce-variation-price .price {
    font-size: 46px;
}

/* Promotions (content/promos.yaml, Promo\ProductPromos), right above the
   "Razem" card. A code: a strip in the brand colour, the offer on the left,
   the code to copy on the right. A notice: the warning colours, a clock. */
.pb-promo {
    display: flex;
    align-items: center;
    gap: 12px 16px;
    margin: 4px 0 16px;
    padding: 14px 14px 14px 18px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.45;
}

.pb-promo p {
    margin: 0;
}

.pb-promo__body {
    flex: 1 1 auto;
    min-width: 0;
}

.pb-promo--code {
    background: var(--color-primary-dark);
    color: #fff;
}

.pb-promo--code .pb-promo__title {
    color: #c2c4b2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pb-promo--code .pb-promo__text {
    margin-top: 2px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.pb-promo__code {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 5px 0 14px;
    border: 1.5px dashed #23231f;
    border-radius: 8px;
    background: #fff;
    color: #23231f;
    cursor: pointer;
}

.pb-promo__code-value {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .08em;
}

.pb-promo__code-action {
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--color-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.pb-promo__code.is-copied .pb-promo__code-action {
    background: #23231f;
}

.pb-promo__code:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.pb-promo--notice {
    align-items: flex-start;
    background: #fff4e5;
    color: #8a5a2a;
}

.pb-promo__icon {
    flex: 0 0 20px;
    color: #6e4519;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.pb-promo--notice .pb-promo__title {
    color: #6e4519;
    font-weight: 700;
}

/* The message itself in the shop's body ink (11:1); brown stays for the
   title and the clock, so it still reads as a warning. */
.pb-promo--notice .pb-promo__text {
    color: #3a3a34;
}

.pb-promo--notice .pb-promo__text strong {
    color: inherit;
}

@media (max-width: 480px) {
    .pb-promo--code {
        flex-wrap: wrap;
    }
}

/* "Nie wiesz, jaki rozmiar wybrać?" — Kasia's contact. */
/* WooCommerce's notices slot: no room while there is nothing to say. It
   always holds an empty .woocommerce-notices-wrapper, and comes back as soon
   as a notice lands in it. */
.pb-pdp__notices:not(:has(.woocommerce-notices-wrapper > *)) {
    display: none;
}

.pb-pdp__ask {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    background: var(--color-surface-warm);
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.55;
    color: #3A3A34;
}

.pb-pdp__ask img {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
}

.pb-pdp__ask p {
    margin: 0;
}

.pb-pdp__ask b {
    color: var(--color-heading);
}

.pb-pdp__ask a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* One card, two places: with the buying column on phones, beside
   "Tworzone z pasją" wider up. */
.pb-pdp__ask--buy {
    display: none;
}

/* ---- Details: description, paper, delivery, framing ------- */

.pb-pdp__details {
    margin: 40px 0 0;
    padding: 10px 0 20px;
    box-sizing: border-box;
}

.pb-pdp__details-row {
    display: flex;
    align-items: flex-start;
    gap: 50px;
}

.pb-pdp__description {
    flex: 1 1 50%;
    min-width: 0;
}

.pb-pdp__made {
    flex: 0 0 48.233%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pb-pdp .pb-pdp__description .title {
    margin-bottom: 18px;
    font-size: 30px;
}

.pb-pdp__excerpt {
    font-family: "Hanken Grotesk", sans-serif;
}

.pb-pdp__excerpt p {
    margin: 0 0 10px;
}

/* Elementor spaced the widgets inside a container 20px apart. */
.pb-pdp__cyg {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pb-pdp__cyg > * {
    margin-bottom: 0;
}

.pb-made {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border: 1px solid #E5DED2;
    border-radius: 10px;
}

.pb-pdp .pb-made__title {
    margin: 0 0 2px;
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-heading);
}

.pb-made__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pb-made__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #3A3A34;
}

.pb-made__list svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-primary);
}

.pb-made__link {
    margin-top: 4px;
    font-size: 15px;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- Composition ideas + matching posters ----------------- */

.pb-pdp__ideas {
    margin-top: 40px;
    /* Full-bleed band, as the stretched Elementor section was. */
    margin-inline: calc(50% - 50vw);
    background: var(--pb-pdp-sand);
}

.pb-pdp__ideas-inner {
    /* The band is full-bleed; its content keeps to the site's grid. */
    max-width: var(--pb-pdp-wide);
    margin-inline: auto;
    padding: 40px 15px 20px;
    box-sizing: border-box;
}

.pb-pdp__ideas-title {
    padding-left: 0;
}

.pb-pdp .pb-pdp__ideas .title,
.pb-pdp .pb-pdp__more .title,
.pb-pdp .pb-pdp__recent .title {
    font-size: 28px;
}

.pb-pdp .pb-pdp__cyg .title {
    font-size: 22px;
}

.pb-pdp__ideas-row {
    display: flex;
    align-items: stretch;
}

.pb-pdp__ideas-gallery {
    flex: 0 0 75%;
    min-width: 0;
    /* Flush with the grid's left edge; 20px to the creator card. */
    padding: 20px 20px 20px 0;
    box-sizing: border-box;
}

.pb-pdp-compositions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: center;
}

.pb-pdp-compositions__item {
    display: block;
}

.pb-pdp-compositions__item img {
    display: block;
    width: 100%;
    height: auto;
}

.pb-pdp__cyg {
    flex: 0 0 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 20px 0;
    padding: 60px 20px 20px;
    border: 2px dashed #6D774A;
    border-radius: 8px;
    box-sizing: border-box;
}

/* No composition photos: the gallery-creator card on its own, centred. */
.pb-pdp__ideas--no-photos .pb-pdp__ideas-row {
    justify-content: center;
}

.pb-pdp__ideas--no-photos .pb-pdp__cyg {
    flex: 0 1 auto;
    width: 100%;
    max-width: 560px;
    margin: 0;
}

.pb-pdp__matching {
    padding: 60px 0 10px;
}

/* ---- Related + recently viewed ---------------------------- */

/* One grid for the three carousels, the site's: the same edges as the
   header and the sand band above. Before, one started at 38px, one at
   196px and the last was centred. */
.pb-pdp__more,
.pb-pdp__recent {
    padding: 0;
    box-sizing: border-box;
}

.pb-pdp__more {
    margin-top: 60px;
}

.pb-pdp__recent {
    margin-top: 60px;
    padding-bottom: 40px;
}

/* Empty until the browser finds other posters the visitor opened, and then
   only if there are any: no section over nothing (Display\ProductRow). */
.pb-pdp__recent:not(:has(.pb-row:not([hidden]))) {
    display: none;
}

/* WoodMart's lazy placeholder is a white SVG: on the sand it read as a hole. */
.pb-pdp img[src$="lazy.svg"] {
    background: var(--pb-pdp-sand);
}

/* ---- Size tiles, price heading, button states ------------- */

/* "69,00 zł  za rozmiar 30×40 cm" on one baseline, as designed. */
.pb-pdp__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
}

.pb-pdp__price .price {
    margin: 0;
}

.pb-pdp__price-note {
    margin: 0;
    font-size: 15px;
    color: #6B6A62;
}

.pb-label-note {
    font-weight: 400;
    color: #6B6A62;
}

/* The label is short here, so the size-guide link keeps to its line at
   every width (style.css stacks them on phones for the long label). */
.pb-pdp table.variations th.label label {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.pb-pdp .pb-sizeguide-link {
    margin: 0 0 0 auto;
    font-size: 14px;
    white-space: nowrap;
}

/* WoodMart gives every span in a variation label 5px of left margin. */
.pb-pdp table.variations th.label label :is(.pb-size-label, .pb-hide-md, .pb-hide-tab) {
    margin: 0;
}

/* The tiles read as one line of size and one of price, without a rule. */
.pb-pdp .wd-swatch-text .variation-price {
    margin-top: 2px;
    padding-top: 0;
    border-top: 0;
}

.pb-pdp [class*="wd-swatches"].wd-text-style-3 .wd-swatch.wd-text .wd-swatch-text {
    font-weight: 600;
}

.pb-pdp .wd-swatch-text .variation-price {
    font-weight: 400;
}

/* Room for the "most chosen" badge, which sits on a tile's top edge. */
.pb-pdp .wd-swatches-product {
    row-gap: 18px !important;
}

.pb-pdp .wd-swatches-product .wd-swatch.wd-text {
    position: relative;
    overflow: visible;
}

/* The chosen size has to read as chosen at a glance: dark 2px edge, warm
   ground and a tick, where it used to be a slightly darker grey line. */
.pb-pdp [class*="wd-swatches"].wd-text-style-3 .wd-swatch.wd-text.wd-active {
    --wd-swatch-brd-color: var(--color-heading) !important;
    background: var(--color-surface-warm);
}

.pb-pdp .wd-swatches-product .wd-swatch.wd-text.wd-active::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 7px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-heading) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.pb-swatch-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 3px 8px;
    border-radius: 999px;
    background: #23231F;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

.pb-pdp .single_add_to_cart_button[data-pb-added] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--color-primary-dark) !important;
}

/* No ring after a mouse click or tap (some browsers draw their own). */
.pb-pdp .single_add_to_cart_button:focus:not(:focus-visible),
.pb-sticky__cta:focus:not(:focus-visible),
.pb-sticky__size:focus:not(:focus-visible) {
    outline: none;
}

/* A visible ring for keyboard users on everything you buy with. */
.pb-pdp .single_add_to_cart_button:focus-visible,
.pb-pdp .wd-swatch:focus-visible,
.pb-gal-zoom:focus-visible,
.pb-sticky__cta:focus-visible,
.pb-sticky__size:focus-visible {
    outline: 3px solid var(--color-heading);
    outline-offset: 2px;
}

/* ---- Paper / delivery / framing, under the description ----- */

.pb-pdp__more-info {
    border-bottom: 1px solid #E8E1D5;
}

.pb-more-info {
    border-top: 1px solid #E8E1D5;
}

.pb-more-info > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    padding: 12px 0;
    list-style: none;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-heading);
    cursor: pointer;
}

.pb-more-info > summary::-webkit-details-marker {
    display: none;
}

.pb-more-info > summary::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform .2s ease;
}

.pb-more-info[open] > summary::after {
    transform: translateY(2px) rotate(-135deg);
}

.pb-more-info > summary:focus-visible {
    outline: 3px solid var(--color-heading);
    outline-offset: 2px;
}

.pb-more-info__body {
    padding: 0 0 16px;
    font-size: 15px;
    line-height: 1.6;
    color: #3A3A34;
}

.pb-more-info__body p {
    margin: 0 0 10px;
}

.pb-more-info__body p:last-child {
    margin-bottom: 0;
}

.pb-more-info__body a {
    font-weight: 600;
}

/* ---- Facts by the button + free-shipping line --------------- */

.pb-facts {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 6px;
}

.pb-facts__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pb-facts__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    color: #3A3A34;
}

.pb-facts__list svg {
    flex-shrink: 0;
    color: var(--color-primary);
}

.pb-facts__list a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pb-ship {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 14px 18px;
    border: 1px solid #E8E1D5;
    border-radius: 10px;
}

.pb-ship__msg {
    margin: 0;
    font-size: 14px;
    color: #3A3A34;
}

.pb-ship__msg b {
    color: var(--color-heading);
}

.pb-ship__track {
    height: 8px;
    border-radius: 999px;
    background: #EDE7DC;
    overflow: hidden;
}

.pb-ship__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--wd-primary-color);
    transition: width .35s ease;
}

.pb-facts__pay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    color: #6B6A62;
}

.pb-facts__badge {
    padding: 5px 10px;
    border: 1px solid #E5DED2;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #3A3A34;
}

.pb-ship__msg b {
    font-weight: 700;
}

/* ---- Sticky add-to-cart bar --------------------------------- */

.pb-sticky {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 390; /* under WoodMart's side panels and popups (400+) */
    background: #fff;
    border-top: 1px solid #E5DED2;
    box-shadow: 0 -6px 20px rgba(35, 35, 31, .08);
    animation: pb-sticky-in .25s ease;
}

/* They sit directly in .entry-content, whose children WoodMart gives 20px
   of bottom margin: on a fixed element that lifted it off the screen edge. */
.pb-pdp > :is(.pb-sticky, .pb-added, .pb-sr-only) {
    margin: 0;
}

.pb-sticky[hidden] {
    display: none;
}

@keyframes pb-sticky-in {
    from { transform: translateY(100%); }
    to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pb-sticky {
        animation: none;
    }
}

.pb-sticky__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: var(--wd-container-w, 1700px);
    margin-inline: auto;
    padding: 10px 15px;
    box-sizing: border-box;
}

.pb-sticky__thumb {
    flex: 0 0 auto;
    width: 42px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
}

.pb-sticky__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pb-sticky__name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--font-heading);
    font-size: 16px;
    color: var(--color-heading);
}

.pb-sticky__config {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    color: #6B6A62;
}

.pb-sticky__sizes {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
}

.pb-sticky__size {
    min-height: 40px;
    padding: 0 12px;
    /* Same 2px edge in every state, so choosing a size moves nothing. */
    border: 2px solid #DFD8CB;
    border-radius: 8px;
    background: #fff;
    color: #3A3A34;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
}

.pb-sticky__size:hover {
    border-color: #9C9484;
    background: #FBF9F5;
}

.pb-sticky__size[aria-pressed="true"] {
    border-color: var(--color-heading);
    background: var(--color-surface-warm);
}

.pb-sticky__size:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.pb-sticky__price--inline {
    display: none;
}

.pb-sticky__price {
    flex: 0 0 auto;
    /* Room for the widest amount ("od 49,00 zł", a 70×100 in a frame), so a
       new price does not push the size buttons along. */
    min-width: 7.5em;
    text-align: right;
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-heading);
    white-space: nowrap;
}

.pb-sticky__cta {
    flex: 0 0 auto;
    /* As wide for "Wybierz rozmiar" as for "Dodaj do koszyka". */
    min-width: 190px;
    min-height: 48px;
    padding: 0 26px;
    border: 0;
    border-radius: var(--btn-accented-brd-radius, 10px);
    background: var(--btn-accented-bgcolor, var(--wd-primary-color));
    color: var(--btn-accented-color, #fff);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    white-space: nowrap;
}

.pb-sticky__cta:hover {
    background: var(--btn-accented-bgcolor-hover, var(--wd-primary-color));
    filter: brightness(.92);
}

/* Until a size is picked the button only takes you to the sizes. */
.pb-sticky__cta.is-choose {
    background: #fff;
    color: var(--color-heading);
    box-shadow: inset 0 0 0 1.5px var(--color-heading);
}

.pb-show-sm {
    display: none;
}

/* Keep the end of the page reachable while the bar is up. */
body.pb-has-sticky {
    padding-bottom: 76px;
}

body.pb-has-sticky .scrollToTop {
    bottom: 92px;
}

@media (max-width: 1024px) {
    .pb-sticky__sizes,
    .pb-sticky__name {
        display: none;
    }

    .pb-sticky__inner {
        gap: 12px;
        padding: 9px 16px;
    }

    .pb-sticky__price {
        display: none;
    }

    .pb-sticky__price--inline {
        display: block;
        min-width: 0;
        text-align: left;
        font-size: 16px;
    }

    .pb-sticky__cta {
        min-width: 148px;
        padding: 0 14px;
        font-size: 15px;
    }
}

/* The "W koszyku" panel and .pb-sr-only: css/pb-added.css. */

/* ---- Size guide (native dialog) -------------------------- */

.pb-guide {
    /* 1 cm of poster in pixels: the whole scene is drawn to this scale. */
    --cm: 1.75px;
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: #fff;
    color: var(--color-text);
    box-shadow: 0 24px 60px rgba(35, 35, 31, .25);
    overflow: auto;
    overscroll-behavior: contain;
}

.pb-guide::backdrop {
    background: rgba(35, 35, 31, .45);
}

.pb-guide[open] {
    animation: pb-guide-in .2s ease;
}

@keyframes pb-guide-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pb-guide[open] {
        animation: none;
    }
}

.pb-guide__inner {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px 32px 32px;
}

.pb-guide__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.pb-pdp .pb-guide__title,
.pb-guide__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.15;
    text-transform: none;
    color: var(--color-heading);
}

.pb-guide__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: -4px -8px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-heading);
    cursor: pointer;
}

.pb-guide__close:hover {
    background: var(--color-surface-warm);
}

.pb-guide__lead {
    margin: -8px 0 0;
    font-size: 15px;
    color: #6B6A62;
}

/* The wall: four posters to scale, 22 cm above a 160 cm sideboard. */
.pb-guide__scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 16px 0;
    background: var(--color-surface-warm);
    border-radius: 12px;
    overflow: hidden;
}

.pb-guide__wall {
    display: flex;
    align-items: flex-end;
    gap: calc(12 * var(--cm));
    padding-bottom: calc(22 * var(--cm));
}

.pb-guide__poster {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: calc(var(--w) * var(--cm));
    height: calc(var(--h) * var(--cm));
    background: #fff center / cover no-repeat;
    border: 1.5px solid #DFD8CB;
    box-shadow: 0 6px 14px rgba(35, 35, 31, .10);
    transition: border-color .15s ease, transform .15s ease;
}

.pb-guide__poster-label {
    margin-bottom: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    font-size: 11px;
    font-weight: 600;
    color: #6B6A62;
    white-space: nowrap;
}

.pb-guide__poster.is-active {
    border-color: var(--color-heading);
    transform: translateY(-3px);
}

.pb-guide__poster.is-active .pb-guide__poster-label {
    color: var(--color-heading);
}

.pb-guide__sideboard {
    display: block;
    width: calc(160 * var(--cm));
    height: calc(80 * var(--cm));
    margin-bottom: calc(-40 * var(--cm)); /* the lower half is out of frame */
    fill: #D8CDBD;
    stroke: #C2B5A1;
    stroke-width: .6;
}

/* One card per size: picks it in the form. */
.pb-guide__sizes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding-top: 8px;
}

.pb-guide__size {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 16px 8px 14px;
    border: 2px solid #E5DED2;
    border-radius: 10px;
    background: #fff;
    color: var(--color-heading);
    font: inherit;
    text-transform: none;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.pb-guide__size:hover {
    border-color: #9C9484;
    background: #FBF9F5;
}

.pb-guide__size[aria-pressed="true"] {
    border-color: var(--color-heading);
    background: var(--color-surface-warm);
}

.pb-guide__size:focus-visible,
.pb-guide__close:focus-visible {
    outline: 3px solid var(--color-heading);
    outline-offset: 2px;
}

.pb-guide__size-label {
    font-size: 16px;
    font-weight: 700;
}

.pb-guide__size-name {
    font-size: 13px;
    color: #6B6A62;
}

.pb-guide__size-price,
.pb-guide__size-price .amount {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-heading);
}

.pb-guide__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 3px 8px;
    border-radius: 999px;
    background: #23231F;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pb-guide__tip {
    margin: 0;
    padding: 16px 18px;
    border-radius: 10px;
    background: var(--color-surface-warm);
    font-size: 15px;
    line-height: 1.6;
    color: #3A3A34;
}

.pb-guide__tip b {
    color: var(--color-heading);
}

/* Phones: a sheet rising from the bottom, two cards a row. */
@media (max-width: 767px) {
    .pb-guide {
        --cm: 1.3px;
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        margin: auto 0 0;
        border-radius: 16px 16px 0 0;
    }

    .pb-guide[open] {
        animation-name: pb-guide-up;
    }

    @keyframes pb-guide-up {
        from { transform: translateY(100%); }
        to { transform: none; }
    }

    .pb-guide__inner {
        gap: 16px;
        padding: 20px 16px 24px;
    }

    .pb-pdp .pb-guide__title,
    .pb-guide__title {
        font-size: 24px;
    }

    .pb-guide__poster-label {
        display: none;
    }

    .pb-guide__sizes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 16px;
    }
}

/* ---- Tablet ------------------------------------------------ */

@media (max-width: 1024px) {
    /* Two columns down to 768px: stacked, a tablet put the buy button some
       4,000px down the page under the full-width photos. */
    /* Tablet board: ~52:48 with a 24px gap, on the site's grid. */
    .pb-pdp__hero {
        gap: 20px 24px;
    }

    .pb-pdp__buy {
        flex-basis: 46.06%;
    }

    .pb-hide-md,
    .pb-facts__long,
    .pb-facts__pay-label {
        display: none;
    }

    .pb-facts__list li {
        font-size: 14px;
    }

    .pb-pdp .pb-made__title {
        font-size: 22px;
    }

    .pb-facts__badge {
        padding: 5px 8px;
        font-size: 10px;
    }

    /* The size tiles take the whole column (style.css only does this on phones). */
    .pb-pdp table.variations td.value {
        display: block;
        width: 100% !important;
    }

    .pb-pdp .pb-pdp__description .title {
        display: none;
    }

    /* The sections run full width; the two cards sit side by side under them. */
    .pb-pdp__details-row {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .pb-pdp__made {
        flex-basis: auto;
        flex-direction: row;
        align-items: stretch;
    }

    .pb-pdp__made > * {
        flex: 1 1 0;
    }

    /* Four tiles across a 46% column broke "21x30 cm" over two lines. */
    .pb-pdp .wd-swatches-product {
        grid-template-columns: repeat(2, 1fr);
    }

    .pb-swatch-badge {
        padding: 2px 6px;
        font-size: 9px;
        letter-spacing: 0;
    }

    /* Thumbnails go under the photo: the panel has the full width, and the
       screen also has to hold the thumbnail row. */
    .pb-pdp__gallery {
        --pb-gal-side: 0px;
        --pb-gal-h: min(var(--pb-gal-fit), calc(100vh - 280px));
    }

    .pb-pdp__gallery .woocommerce-product-gallery {
        --wd-gallery-gap: 10px;
    }

    /* Thumbnails under the photo, a row of fixed-size tiles. */
    .pb-pdp__gallery .wd-gallery-thumb {
        max-width: 330px;
    }

    .pb-pdp__atc {
        width: 100%;
    }

    .pb-pdp__ideas-row {
        flex-direction: column;
        align-items: center;
    }

    .pb-pdp__ideas-gallery,
    .pb-pdp__cyg {
        flex-basis: auto;
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .pb-hide-tab,
    .pb-frame__noun {
        display: none;
    }

    /* Four frame tiles share a ~350px column here. */
    .pb-pdp .pb-frame__label {
        font-size: 14px;
    }
}

/* ---- Phone ------------------------------------------------- */

@media (max-width: 767px) {
    /* Shorter on phones, so each fact keeps to one line. */
    .pb-show-sm {
        display: inline;
    }

    .pb-hide-sm,
    .pb-facts__long,
    .pb-facts__pay-label {
        display: none;
    }

    .pb-facts__list li {
        font-size: 14px;
    }

    .pb-facts__badge {
        padding: 5px 8px;
        font-size: 10px;
    }

    .pb-swatch-badge {
        padding: 3px 8px;
        font-size: 10px;
        letter-spacing: .06em;
    }

    .pb-pdp__hero {
        flex-direction: column;
        align-items: stretch;
    }

    .pb-pdp__gallery,
    .pb-pdp__buy {
        flex-basis: auto;
        width: 100%;
        position: static;
    }

    .pb-pdp__gallery {
        --pb-gal-h: min(var(--pb-gal-fit), calc(100svh - 240px));
        --pb-gal-pad: 20px;
    }

    /* Full width once stacked. The 4:5 cap is for the side-by-side layout;
       here the height follows the visible screen (svh), which Safari's bars
       shorten, and the capped panel stopped short of the right edge. */
    .pb-pdp .pb-pdp__gallery .wd-gallery-images {
        max-width: none;
    }

    /* The page's negative top margin (style.css) slid them under the header. */
    .pb-pdp__crumbs {
        padding: 14px 0 0;
    }

    .pb-pdp__hero {
        margin-top: 30px;
        padding: 0;
    }

    .pb-pdp__ask--buy {
        display: flex;
    }

    .pb-pdp__ask--details {
        display: none;
    }

    .pb-pdp__ask {
        align-items: flex-start;
        padding: 18px;
    }

    .pb-pdp__details {
        padding: 0;
    }

    .pb-pdp__made {
        flex-direction: column;
    }

    .pb-made {
        padding: 20px;
    }

    /* Closer together, as the phone board has them. */
    .pb-pdp__hero {
        row-gap: 12px;
    }

    .pb-pdp__buy {
        margin-top: 0;
    }

    .pb-pdp__card {
        margin-top: 4px;
    }

    .pb-pdp__price {
        margin: 12px 0;
    }

    /* The same 16px side margins as the rest of the page. */
    .pb-pdp__ideas-inner {
        padding: 28px 16px 0;
    }

    .pb-pdp__ideas-title {
        padding-left: 0;
    }

    /* Composition photos as a row you swipe, the next one peeking in, instead
       of three full-width photos stacked (~1,200px of scrolling). Native
       scrolling with snap points: no script, and the photos still open. */
    .pb-pdp__ideas-gallery {
        align-self: stretch;
        width: auto;
        margin-inline: -16px;
        padding: 12px 0 4px;
    }

    .pb-pdp-compositions {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        gap: 12px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 16px;
        padding-inline: 16px;
        scrollbar-width: none;
    }

    .pb-pdp-compositions::-webkit-scrollbar {
        display: none;
    }

    .pb-pdp-compositions__item {
        scroll-snap-align: start;
    }

    .pb-pdp-compositions__item img {
        border-radius: 8px;
    }

    .pb-pdp__cyg {
        margin: 24px 0 0;
        padding: 20px;
    }

    .pb-pdp__matching {
        padding: 36px 0 10px;
    }

    .pb-pdp__more,
    .pb-pdp__recent {
        padding-inline: 0;
    }

    .pb-pdp__more {
        margin-top: 40px;
    }

    /* The heading sat right against the designer card. */
    .pb-pdp__details {
        margin-top: 32px;
    }

    .pb-pdp .pb-pdp__description .title {
        display: none;
    }
}

/* ---- Komplet: ways into a set (PosterBazaar\Komplet\PdpEntry) ------------ */

.pb-set-entry {
    /* The same rhythm as "Oprawa" above: 25px before the label (the frame
       field already ends with 20px), 10px under it, and 20px to the total,
       as from the total to the button. */
    margin: 5px 0 20px;
}

.pb-set-entry__label {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    color: #2a2a2a;
}

.pb-set-entry__label span {
    font-weight: 400;
    color: #6b6a62;
}

.pb-set-entry__link,
.pb-added__set {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    box-sizing: border-box;
    padding: 8px 14px;
    border: 2px solid rgba(0, 0, 0, 0.075);
    border-radius: 8px;
    background: var(--color-surface-warm);
    color: #2a2a2a;
    text-decoration: none;
}

.pb-set-entry__link:hover,
.pb-added__set:hover {
    border-color: rgba(0, 0, 0, 0.25);
    color: #2a2a2a;
}

.pb-set-entry__art,
.pb-added__set-art {
    display: flex;
    flex-shrink: 0;
    gap: 4px;
}

.pb-set-entry__art img,
.pb-added__set-art img {
    width: 30px;
    height: 42px;
    object-fit: cover;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
}

.pb-added__set-art img {
    width: 24px;
    height: 34px;
}

.pb-set-entry__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.pb-set-entry__title {
    font-size: 15px;
    font-weight: 600;
}

.pb-set-entry__tiers {
    font-size: 13px;
    color: var(--color-primary, #5e6a46);
    font-weight: 600;
}

.pb-added__set {
    grid-area: set;
    margin-top: 4px;
    min-height: 48px;
    font-size: 14px;
    line-height: 1.35;
}

.pb-added__set > span:nth-child(2) {
    flex: 1;
}

.pb-added__set[hidden] {
    display: none;
}

/* Top tier reached: a confirmation, not a way to the set page. */
.pb-added__set--done {
    pointer-events: none;
}

.pb-added__set--done .pb-added__set-art,
.pb-added__set--done svg {
    display: none;
}

/* ---- "Zobacz na swojej ścianie" (PosterBazaar\ProductPage\ArPreview) ----- */

/* Printed hidden; pb-ar.js shows the ways in only on phones with an AR viewer. */
.pb-ar-entry[hidden],
.pb-ar-link[hidden] {
    display: none !important;
}

/* The row under the gallery: the "Komplet" row's pattern. */
.pb-ar-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    box-sizing: border-box;
    margin-top: 12px;
    padding: 8px 14px;
    border: 2px solid rgba(0, 0, 0, 0.075);
    border-radius: 8px;
    background: var(--color-surface-warm);
    color: #2a2a2a;
    font-family: inherit;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.pb-ar-entry:hover,
.pb-ar-entry:focus-visible {
    border-color: rgba(0, 0, 0, 0.25);
    background: var(--color-surface-warm);
    color: #2a2a2a;
}

.pb-ar-entry__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    box-sizing: border-box;
    border: 1px solid #e5ded2;
    border-radius: 50%;
    background: #fff;
    color: var(--color-primary, #5e6a46);
}

.pb-ar-entry__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.pb-ar-entry__title {
    font-size: 15px;
    font-weight: 600;
}

.pb-ar-entry__sub {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary, #5e6a46);
}

/* The link under the size tiles; on its own line, to the left, whatever
   alignment the form around it has. */
.pb-ar-link {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    min-height: 44px;
    margin: 4px auto 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary, #5e6a46);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.pb-ar-link:hover,
.pb-ar-link:focus-visible {
    background: none;
    color: #3f4830;
}

.pb-ar-link svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.pb-ar-link span {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The sheet: the size guide's bottom sheet. */
.pb-ar {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    margin: auto 0 0;
    padding: 0;
    border: 0;
    border-radius: 16px 16px 0 0;
    background: #fff;
    color: var(--color-text);
    box-shadow: 0 -12px 40px rgba(35, 35, 31, .25);
    overflow: auto;
    overscroll-behavior: contain;
}

.pb-ar::backdrop {
    background: rgba(35, 35, 31, .45);
}

.pb-ar[open] {
    animation: pb-ar-up .2s ease;
}

@keyframes pb-ar-up {
    from { transform: translateY(100%); }
    to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pb-ar[open] {
        animation: none;
    }
}

.pb-ar__inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 16px 24px;
}

.pb-ar__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.pb-pdp .pb-ar__title,
.pb-ar__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.15;
    color: #2a2a2a;
}

.pb-ar__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 0;
    margin: -8px -10px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #2a2a2a;
}

.pb-ar__close:hover {
    background: var(--color-surface-warm);
    color: #2a2a2a;
}

.pb-ar__lead {
    margin: -8px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: #6b6a62;
}

.pb-ar__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pb-ar__group[hidden] {
    display: none;
}

.pb-ar__label {
    font-size: 15px;
    font-weight: 700;
    color: #2a2a2a;
}

.pb-ar__label span {
    font-weight: 400;
    color: #6b6a62;
}

.pb-ar__choices {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.pb-ar__choice {
    min-height: 44px;
    padding: 0 4px;
    border: 2px solid rgba(0, 0, 0, 0.075);
    border-radius: 8px;
    background: #fff;
    color: #2a2a2a;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.pb-ar__choice:hover {
    background: #fff;
    color: #2a2a2a;
    border-color: rgba(0, 0, 0, 0.25);
}

.pb-ar__choice[aria-pressed="true"] {
    border-color: #23231f;
    background: var(--color-surface-warm);
}

.pb-ar__choice--frame {
    padding: 0 2px;
    font-size: 13px;
}

.pb-ar__choice--frame[aria-pressed="true"] {
    border-color: var(--color-primary, #5e6a46);
    background: #fff;
}

.pb-ar__choice:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.pb-ar__steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 14px;
    list-style: none;
    border-radius: 10px;
    background: var(--color-surface-warm);
}

.pb-ar__steps li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #3a3a34;
}

.pb-ar__steps li > span {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #23231f;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.pb-ar__go {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pb-ar__camera {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 5px;
    background: var(--color-primary, #5e6a46);
    color: #fff;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.pb-ar__camera:hover,
.pb-ar__camera.is-busy {
    background: #3f4830;
    color: #fff;
}

.pb-ar__camera-icon {
    display: flex;
}

.pb-ar__spinner {
    display: none;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 2.4px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pb-ar-spin .8s linear infinite;
}

.pb-ar__camera.is-busy .pb-ar__camera-icon {
    display: none;
}

.pb-ar__camera.is-busy .pb-ar__spinner {
    display: block;
}

@keyframes pb-ar-spin {
    to { transform: rotate(360deg); }
}

.pb-ar__error {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #b91c1c;
}

.pb-ar__summary {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6b6a62;
    text-align: center;
}

/* Parts the script takes out: a phone that came from the code but has no viewer. */
.pb-ar [hidden] {
    display: none !important;
}

.pb-ar__unsupported {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #3a3a34;
}

.pb-ar__guide {
    display: inline;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary, #5e6a46);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

/* ---- Desktop: "Zobacz na swojej ścianie" through a QR code ---------------- */

/* On the photo, paired with "Powiększ" (.pb-gal-zoom) in the other corner. */
.pb-gal-ar {
    position: absolute;
    z-index: 3;
    left: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid #E5DED2;
    border-radius: 999px;
    background: #fff;
    color: var(--color-heading);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
}

.pb-gal-ar svg {
    flex-shrink: 0;
    color: var(--color-primary, #5e6a46);
}

.pb-gal-ar:hover {
    border-color: #9C9484;
    background: #fff;
    color: var(--color-heading);
}

.pb-gal-ar[hidden] {
    display: none;
}

/* The window: the size guide's (.pb-guide), code on the left, choices on the right. */
.pb-ar-qr__body {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.pb-ar-qr__side {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pb-ar-qr__side .pb-ar__steps {
    padding: 16px 18px;
}

.pb-ar-qr__side .pb-ar__steps li {
    font-size: 15px;
}

.pb-ar-qr__code {
    flex: 0 0 232px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.pb-ar-qr__box {
    width: 232px;
    height: 232px;
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid #e8e1d5;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    color: #6b6a62;
}

.pb-ar-qr__box svg {
    display: block;
    width: 100%;
    height: 100%;
}

.pb-ar-qr__caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    line-height: 1.35;
    text-align: center;
}

.pb-ar-qr__scan {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-heading);
}

.pb-ar-qr__config {
    font-size: 13px;
    color: #6b6a62;
}

.pb-ar-qr__copy {
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    background: none;
    color: var(--color-heading);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.pb-ar-qr__copy:hover {
    background: none;
    color: var(--color-primary, #5e6a46);
}