/**
 * Frame picker — product page.
 *
 * One chip per frame colour, always visible (also before a poster size has been
 * chosen). Mirrors the look of the WoodMart size swatches above it.
 */

.pb-frames {
    width: 100%;
}

.pb-frames__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
    gap: 10px;
}

.pb-frame {
    position: relative;
}

.pb-frame label {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.pb-frame input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Selectors are deliberately specific: the theme ships a broad `img` sizing
   rule that would otherwise win. */
.pb-frames .pb-frame .pb-frame__visual {
    display: block;
    border: 2px solid rgba(0, 0, 0, 0.075);
    border-radius: 8px;
    padding: 10px;
    background: #fff;
    box-sizing: border-box;
    /* Clips the crop where it runs off the tile — see .pb-frame__mount. */
    overflow: hidden;
    transition: border-color 0.15s ease;
}

/* A whole poster is portrait, so shown whole it is tiny and the tile is tall.
   Each chip instead shows the top-left corner of the framed poster in a
   landscape crop: the moulding is what the chip is actually about, and it gets
   most of the pixels. */
.pb-frames .pb-frame .pb-frame__visual img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: left top;
}

/* The moulding is drawn here rather than photographed: the frame products' own
   images are corner crops and cannot stand in for a full frame. Each colour is
   a background plus hairlines for depth. */
.pb-frames .pb-frame__mount {
    display: block;
    box-sizing: border-box;
    /* Overshoots the tile's padding on the right and bottom, where the tile
       clips it. The gap survives only on the two edges the crop actually has a
       corner on, so the poster visibly runs off the tile instead of ending
       neatly inside it — that is the "this is a detail" cue. The negative
       bottom margin is what pulls the tile's own padding out of the way; extra
       height alone would just make the tile taller. */
    width: auto;
    height: 96px;
    margin: 0 -10px -10px 0;
    overflow: hidden;
    /* Moulding on the two edges the crop actually contains. */
    padding: 10px 0 0 10px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

/* "Sam plakat" shows the whole poster rather than a corner: the other three
   chips are about the moulding, this one is about its absence, and a crop of
   bare artwork said nothing. It keeps the tile, drops the bleed. */
.pb-frames .pb-frame .pb-frame__mount--bare {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* No bleed here, so the tile keeps the height the bled mounts give it. */
    height: 86px;
    margin: 0;
    padding: 0;
    background: transparent;
    overflow: visible;
    box-shadow: none;
}

.pb-frames .pb-frame .pb-frame__mount--bare img {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    border: 1px solid rgba(0, 0, 0, 0.09);
    box-shadow: 2px 3px 9px rgba(0, 0, 0, 0.16);
}

.pb-frames .pb-frame__mount[data-frame-colour="biala"] {
    background: #fbfbf9;
    /* No hard ring: a white frame on a white tile has to be separated by
       depth, not by an outline. */
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.05),
        0 2px 10px rgba(0, 0, 0, 0.16);
}

.pb-frames .pb-frame__mount[data-frame-colour="czarna"] {
    background: linear-gradient(135deg, #2c2c2c 0%, #151515 55%, #232323 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.10),
        0 2px 9px rgba(0, 0, 0, 0.20);
}

.pb-frames .pb-frame__mount[data-frame-colour="debowa"] {
    background: linear-gradient(135deg, #e0b884 0%, #c99a5f 45%, #d9ac73 70%, #bc8b52 100%);
    box-shadow:
        inset 0 0 0 1px rgba(90, 58, 24, 0.18),
        0 2px 9px rgba(0, 0, 0, 0.16);
}

.pb-frames .wapf-no-frame-visual {
    width: 100%;
    height: 100%;
    background: var(--pb-surface, #f7f7f7);
}

.pb-frame__label {
    display: block;
    margin-top: 6px;
    font-size: var(--text-base);
    line-height: 1.3;
    text-align: center;
    color: var(--color-heading);
}

.pb-frame__price {
    display: block;
    min-height: 1.2em;
    font-size: var(--text-sm, 12px);
    line-height: 1.3;
    text-align: center;
    color: rgba(42, 42, 42, 0.7);
}

.pb-frame:hover .pb-frame__visual,
.pb-frame.is-checked .pb-frame__visual {
    border-color: var(--color-swatch-active);
}

.pb-frame.is-unavailable {
    opacity: 0.4;
    cursor: not-allowed;
}

.pb-frame.is-unavailable label {
    cursor: not-allowed;
}

/* WooCommerce marks the button disabled until a variation is chosen, but the
   theme renders it at full opacity — so it looks clickable and does nothing.
   A faded brand button still reads as a button, so the disabled state drops the
   brand colour entirely: warm grey. The label stays "Dodaj do koszyka" — it
   names what the button does — and the reason lives in the "Razem" card above,
   which reads "Wybierz rozmiar" until a size is picked and which the button
   references with aria-describedby. */
.single_add_to_cart_button.wc-variation-selection-needed,
.single_add_to_cart_button.wc-variation-selection-needed:hover,
.single_add_to_cart_button.wc-variation-selection-needed:focus {
    /* Woodmart paints the button from theme settings with high specificity. */
    background-color: #e7e4dc !important;
    border-color: #e7e4dc !important;
    /* 5.37:1 on that ground — a disabled control still has to be readable. */
    color: #5c5b54 !important;
    opacity: 1;
    cursor: not-allowed;
    box-shadow: none;
}

/* The click is intercepted rather than blocked, so the button stays focusable
   and keyboard users get the same explanation — which means it also needs a
   focus ring that is visible against the grey. */
.single_add_to_cart_button:focus-visible {
    outline: 2px solid var(--color-primary-dark, #3f4830);
    outline-offset: 2px;
}

@media only screen and (max-width: 767px) {
    .pb-frames__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pb-frames .pb-frame__mount {
        height: 86px;
        padding: 8px 0 0 8px;
    }

    .pb-frames .pb-frame .pb-frame__mount--bare {
        height: 76px;
    }
}

/* Clicking the disabled button points here rather than explaining itself: the
   size swatches are what is actually missing. A ring, held for a beat by
   pb-frame-picker.js — no motion, so nothing to suppress for reduced-motion
   users. */
.wd-swatches-product {
    border-radius: 10px;
    box-shadow: 0 0 0 0 rgba(94, 106, 70, 0);
    transition: box-shadow 0.2s ease;
}

.wd-swatches-product.pb-wants-attention {
    box-shadow: 0 0 0 3px rgba(94, 106, 70, 0.45);
}

/* Woodmart's loading state covers the whole button with a full-bleed ::before
   and centres an 18px spinner on top of it, so the label disappears at the one
   moment the shopper most wants to be told what is happening. Keep the spinner,
   drop the cover, and put the two side by side — pb-frame-picker.js swaps the
   label to "Dodawanie do koszyka" for the duration. */
.single_add_to_cart_button.loading {
    /* The button is already a centred flex row; widen its gap for the spinner. */
    gap: 10px;
}

.single_add_to_cart_button.loading:before {
    opacity: 0;
}

.single_add_to_cart_button.loading:after {
    /* Out of the absolute centre and into the flex row, ahead of the label.
       `order` works here because ::after is a flex item of the button. */
    position: static;
    order: -1;
    flex: 0 0 auto;
}