/* Product personalizer — see personalizer.js for the layout it builds. */

.dn-pz-layout { margin-bottom: 0; }

/* Rows 2-3: one light grey band (same tone as the homepage "Szukasz pomysłu?" strip, .nav-tips-section) from the heading to the buttons,
   edge to edge of the window. The spread shadow paints the colour sideways without widening the layout
   (a shadow is not scrollable overflow, so no horizontal scrollbar), clip-path keeps it from bleeding
   up and down. The template container clips its overflow (Bootstrap .overflow-hidden), so on these pages it must not. */
.dn-pz-product #container-content-single-product { overflow: visible !important; } /* beats Bootstrap .overflow-hidden (!important) */
.dn-pz-band {
    background: #f5f6f8;
    box-shadow: 0 0 0 100vmax #f5f6f8;
    clip-path: inset(0 -100vmax);
    margin: 1.5rem 0 1rem;
    padding: 2rem 0 1.75rem;
}
.dn-pz {
    max-width: 680px;
    margin: 0 auto 1rem;
    text-align: center;
}
.dn-pz__heading { font-size: 1.5rem; margin: 0 0 1rem; }
.dn-pz__stage { box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.dn-pz__stage {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background: #f4f4f2;
}
.dn-pz__canvas { display: block; width: 100%; height: auto; }

/* Loading: spinner + text over the stage (first load: over the empty box; variation switch: over the old picture). */
.dn-pz__loading {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
    background: rgba(244, 244, 242, .55);
    color: #5b5b55; font-size: .9rem;
    opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s;
}
.dn-pz__stage.is-loading .dn-pz__loading { opacity: 1; visibility: visible; transition-delay: .15s, 0s; }
.dn-pz__spinner {
    width: 2.4rem; height: 2.4rem; border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, .12); border-top-color: #6b7c5c;
    animation: dn-pz-spin .8s linear infinite;
}
@keyframes dn-pz-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dn-pz__spinner { animation-duration: 2.4s; } }

.dn-pz__controls { margin: .9rem 0 0; text-align: left; }   /* as wide as the preview (owner 2026-10-31) */
.dn-pz__labelrow { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .35rem; }
.dn-pz__label { display: block; font-weight: 600; margin: 0; }
.dn-pz__inputrow { display: flex; gap: .5rem; align-items: stretch; }
.dn-pz__input { flex: 1 1 auto; min-width: 0; font-family: 'DN Pz Symbols', var(--bs-body-font-family, system-ui), sans-serif; }
.dn-pz.is-invalid .dn-pz__input { border-color: #b02a37; box-shadow: 0 0 0 .2rem rgba(176, 42, 55, .2); }

.dn-pz__align { display: inline-flex; border: 1px solid #ced4da; border-radius: .5rem; overflow: hidden; flex: 0 0 auto; }
.dn-pz__btn {
    border: 0; background: #fff; color: #444; width: 44px;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.dn-pz__btn + .dn-pz__btn { border-left: 1px solid #ced4da; }
.dn-pz__btn:hover { background: #f3efe9; }
.dn-pz__btn[aria-pressed="true"] { background: var(--bs-primary, #7a5230); color: #fff; }
.dn-pz__btn:focus-visible, .dn-pz__font:focus-visible { outline: 2px solid var(--bs-primary, #7a5230); outline-offset: 2px; }

.dn-pz__meta { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; color: #6c757d; min-height: 1.4em; margin-top: .45rem; }
.dn-pz__meta { align-items: flex-start; }
.dn-pz__count { margin-left: auto; white-space: nowrap; font-size: .85rem; color: #6c757d; }
.dn-pz__syms { display: inline-flex; flex-wrap: wrap; gap: .35rem; }   /* 10 symbols: wraps on phones */
.dn-pz__sym {
    border: 1px solid #ced4da; background: #fff; color: #222; border-radius: .4rem;
    height: 34px; min-width: 40px; padding: 0 .55rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.dn-pz__sym:hover { background: #f3efe9; border-color: var(--bs-primary, #7a5230); }
.dn-pz__sym:focus-visible { outline: 2px solid var(--bs-primary, #7a5230); outline-offset: 2px; }
.dn-pz__msg { display: block; font-size: .85rem; min-height: 1.3em; margin-top: .25rem; }
.dn-pz__msg.is-warn { color: #8a5a00; }
.dn-pz__msg.is-error { color: #b02a37; font-weight: 600; }

.dn-pz__fonts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.dn-pz__fonts[hidden] { display: none; }
.dn-pz__font { border: 1px solid #ced4da; background: #fff; border-radius: .5rem; padding: .35rem .8rem; font-size: 1.1rem; cursor: pointer; }
.dn-pz__font[aria-pressed="true"] { border-color: var(--bs-primary, #7a5230); box-shadow: inset 0 0 0 1px var(--bs-primary, #7a5230); }

/* Row 3: the buttons, centred under the preview. The form now holds rows 1-3, so it must not be the
   flex row the theme makes of a simple product's form; row 3 takes that role instead. */
.dn-pz-layout form.cart { display: block; }
.dn-pz-row3 { max-width: 560px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; }
.dn-pz-row3 > div { flex: 1 1 100%; }
.dn-pz-row3 .woocommerce-variation { text-align: center; }
.dn-pz-row3 .variations_button { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.dn-pz-row3 .quantity { display: flex; align-items: center; gap: .6rem; }
.dn-pz-qty-label { font-weight: 600; margin: 0; }
/* Price and quantity on one line, buttons below (owner 2026-11-01): the price sits in .single_variation and
   the quantity in .variations_button, so the button box steps aside (contents) and all of them share one row. */
.dn-pz-row3 .single_variation_wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem 1.5rem; }
.dn-pz-row3 .single_variation_wrap > .single_variation { flex: 0 0 auto; }
.dn-pz-row3 .single_variation_wrap > .variations_button { display: contents; }
.dn-pz-row3 .single_variation_wrap > .variations_button > .button,
.dn-pz-row3 .single_variation_wrap > .variations_button > .btn { flex: 1 1 100%; }
.dn-pz-layout .product-cta-helper { text-align: center; }

@media (max-width: 575.98px) {
    .dn-pz-band { margin: 1rem 0 .75rem; padding: 1.25rem 0; }
    .dn-pz__btn { width: 40px; }
}

/* Option cards (C.cards): variation attributes as big buttons instead of a dropdown row. */
.dn-pz-hidden-row { display: none !important; }
.dn-pz-cards { margin: 0 0 .75rem; }
.dn-pz-cards__group + .dn-pz-cards__group { margin-top: .85rem; }
.dn-pz-cards__head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .4rem; }
.dn-pz-cards__label { font-weight: 600; }
.dn-pz-cards__help { font-size: .85rem; }
.dn-pz-cards__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .5rem; }
.dn-pz-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; text-align: left;
    border: 1px solid #ced4da; border-radius: .5rem; background: #fff; color: #222;
    padding: .55rem .7rem; cursor: pointer; line-height: 1.25;
}
.dn-pz-card:hover { border-color: var(--bs-primary, #7a5230); }
.dn-pz-card[aria-checked="true"] { border-color: var(--bs-primary, #7a5230); box-shadow: inset 0 0 0 1px var(--bs-primary, #7a5230); background: #fbf8f4; }
.dn-pz-card:focus-visible { outline: 2px solid var(--bs-primary, #7a5230); outline-offset: 2px; }
.dn-pz-card__title { font-weight: 600; font-size: .95rem; }
.dn-pz-card__cap { font-size: .85rem; white-space: nowrap; }
.dn-pz-card__sub { font-size: .8rem; color: #6c757d; min-height: 1.2em; }
.dn-pz-card__sub:empty { display: none; }
/* Phone: three cards in a row, each exactly three lines (name / capacity / dimensions). */
@media (max-width: 575.98px) {
    .dn-pz-cards__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .4rem; }
    .dn-pz-card { padding: .45rem .5rem; gap: .1rem; }
    .dn-pz-card__title { font-size: .9rem; white-space: nowrap; }
    .dn-pz-card__cap { font-size: .78rem; }
    .dn-pz-card__sub { font-size: .7rem; white-space: nowrap; letter-spacing: -.01em; }
    /* Four options (Mini, Małe, Średnie, Duże since 2026-11-01): "37 × 20 × 13 cm" does not fit a quarter of
       a phone, so two by two. */
    .dn-pz-cards__row[data-n="4"] { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
    /* half a phone is wide enough for "Mini 2 × 0,37 l" on one line (owner 2026-11-01), dimensions below */
    .dn-pz-cards__row[data-n="4"] .dn-pz-card { flex-flow: row wrap; align-items: baseline; column-gap: .4rem; }
    .dn-pz-cards__row[data-n="4"] .dn-pz-card__sub { flex-basis: 100%; }
}
/* Desktop: four in one row rather than three and an orphan. */
@media (min-width: 576px) {
    .dn-pz-cards__row[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
    .dn-pz-cards__row[data-n="4"] .dn-pz-card { padding: .5rem .5rem; }
    .dn-pz-cards__row[data-n="4"] .dn-pz-card__sub { font-size: .72rem; white-space: nowrap; letter-spacing: -.02em; }
}

/* Swatch tooltips on touch screens: the hidden tooltip of a swatch at the right edge (271 px for
   "Stal malowana proszkowo – szałwiowa") widened the page, so a phone could scroll sideways onto a white
   strip (owner 2026-11-01, Galaxy S24 Ultra, 384 px). On touch they only stuck after a tap; the chosen
   colour's name is in the "Kolor:" label anyway. Desktop keeps them. */
@media (hover: none) {
    .dn-pz-layout .variable-items-wrapper [data-wvstooltip]::before,
    .dn-pz-layout .variable-items-wrapper [data-wvstooltip]::after { display: none !important; }
}

/* Very narrow phones (Galaxy Fold closed, 280 px): "Z podwyższeniem" / "miska 22 cm nad podłogą" do not fit
   half the screen on one line, so the card text may wrap there. */
@media (max-width: 340px) {
    .dn-pz-card__title, .dn-pz-card__sub { white-space: normal; }
}

/* "Zapytaj o inny wymiar" (shared LiveCanvas product template): a personalized product has its own size cards,
   so the link is hidden here (owner 2026-11-01). This file loads on personalized products only. */
.dn-pz-product .product-ask-dimension { display: none !important; }

/* hide_price (DN_PZ_Config): no price range under the title, the template's helper line takes its place, larger.
   The class is on <body> from PHP, so there is no flash of the price before the script runs. */
.dn-pz-no-price .product-price-block > .d-flex { display: none !important; }
.dn-pz-no-price .product-price-block .product-price-helper { font-size: clamp(1.15rem, 2.2vw, 1.35rem); font-weight: 600; line-height: 1.35; color: var(--bs-dark); margin: 0; }
.dn-pz__lines .dn-pz__inputrow + .dn-pz__labelrow { margin-top: .75rem; }