.shadowbox-configurator { width: 100%; margin-top: 2rem; background: linear-gradient(180deg, rgba(18, 18, 18, 0.94) 0%, rgba(10, 10, 10, 0.97) 100%); border-radius: 8px; border: 1px solid rgba(201, 170, 106, 0.14); padding: 1.75rem 2rem; color: #efe7d6; font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; } /* Ogólne tło i layout strony Shadow box, zbliżone do referencji. * Uwaga: ten plik CSS jest ładowany TYLKO na produkcie Shadow box, * więc możemy bezpiecznie stylować globalny . */ body { background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.025), transparent 28%), linear-gradient(90deg, #161616 0%, #0d0d0d 42%, #080808 100%) !important; color: #efe7d6; } body .site-main { padding-top: 3rem; padding-bottom: 4rem; } body .product { color: #f5f5f5; } body .product .summary, body .product .images { background: transparent; } /* * Dwukolumnowy układ tylko przy klasycznej strukturze WooCommerce: * .product > .images + .summary (bezpośrednie dzieci). * Jeden wrapper (np. Elementor) + grid na .product = druga kolumna pusta (pusty „summary”). */ body.single-product .product.type-product:has(> .summary.entry-summary):has(> .images) { display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(560px, 0.75fr) !important; gap: 3rem !important; align-items: start !important; } body.single-product .product.type-product:has(> .summary.entry-summary):has(> .images) .images, body.single-product .product.type-product:has(> .summary.entry-summary):has(> .images) .summary { float: none !important; width: auto !important; margin: 0 !important; } body.single-product .product.type-product:has(> .summary.entry-summary):has(> .images) .images { position: sticky !important; top: 80px !important; align-self: start !important; } body.single-product .product.type-product:has(> .summary.entry-summary):has(> .images) .summary { max-width: none !important; } .shadowbox-configurator__layout { display: block; } .shadowbox-configurator__visual { display: flex; align-items: stretch; } .shadowbox-preview { background: radial-gradient(circle at 20% 0, rgba(255, 255, 255, 0.06), transparent 55%), #050608; border-radius: 8px; padding: 1.75rem 1.5rem; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; } .shadowbox-preview__image { max-width: 100%; height: auto; display: block; border-radius: 6px; transition: opacity 0.2s ease-out, transform 0.2s ease-out; } .shadowbox-preview__image.is-fading { opacity: 0.65; transform: scale(0.99); } .shadowbox-configurator__form { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; max-width: none; } .shadowbox-configurator__header { margin-bottom: 0.5rem; } .shadowbox-configurator__title { margin: 0 0 0.35rem; font-size: 1.2rem; letter-spacing: 0.1em; text-transform: uppercase; color: #f7f2e7; } .shadowbox-configurator__lead { margin: 0; font-size: 0.88rem; line-height: 1.6; color: rgba(245, 245, 245, 0.82); } .shadowbox-section { border-radius: 6px; background: linear-gradient(180deg, rgba(20, 20, 20, 0.92) 0%, rgba(12, 12, 12, 0.96) 100%); padding: 1rem 1.1rem 1.1rem; border: 1px solid rgba(201, 170, 106, 0.12); } .shadowbox-configurator__title, .shadowbox-section__title { color: #f3ead8; } .shadowbox-configurator__lead, .shadowbox-info-text, .shadowbox-field__notice, .shadowbox-upload__label, .shadowbox-upload__file-name { color: rgba(239, 231, 214, 0.82); } .shadowbox-section--inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .shadowbox-section__title { margin: 0 0 0.6rem; font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; color: #f2f2f2; } .shadowbox-options { display: flex; flex-wrap: wrap; gap: 0.5rem; } .shadowbox-option { min-width: 3.5rem; padding: 0.55rem 0.85rem; border-radius: 999px; border: 1px solid rgba(205, 165, 87, 0.24); background: transparent; color: #f5f5f5; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .shadowbox-option:hover, .shadowbox-option:focus-visible { border-color: rgba(205, 165, 87, 0.6); transform: translateY(-1px); outline: none; } .shadowbox-option.is-active { background: radial-gradient(circle at 30% 0, rgba(255, 255, 255, 0.08), transparent 55%), #c9aa6a; border-color: #c9aa6a; color: #0b0d13; } .shadowbox-option.is-disabled { opacity: 0.35; cursor: default; } .shadowbox-options--swatches .shadowbox-option { min-width: 2.2rem; padding: 0.15rem; border-radius: 999px; } .shadowbox-swatch { width: 1.9rem; height: 1.9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7); } .shadowbox-swatch--black { background: #050608; } .shadowbox-swatch--silver { background: linear-gradient(135deg, #f5f5f5 0%, #b8bcc2 45%, #7e858f 100%); } .shadowbox-swatch--white { background: #f7f7f7; } .shadowbox-field__notice { margin: 0.4rem 0 0; font-size: 0.75rem; color: rgba(255, 255, 255, 0.72); } .shadowbox-upload { display: flex; flex-direction: column; gap: 0.35rem; } .shadowbox-upload__box { display: flex; justify-content: space-between; align-items: center; padding: 0.65rem 0.8rem; border-radius: 6px; background: #050608; border: 1px dashed rgba(205, 165, 87, 0.35); } .shadowbox-upload__label { margin: 0; font-size: 0.8rem; color: rgba(245, 245, 245, 0.75); } .shadowbox-upload__button { padding: 0.5rem 0.95rem; border-radius: 999px; border: 1px solid rgba(201, 170, 106, 0.8); background: #c9aa6a; color: #0b0d13; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .shadowbox-upload__button:hover, .shadowbox-upload__button:focus-visible { background: #e6d2a3; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4); transform: translateY(-1px); outline: none; } .shadowbox-upload__input { position: absolute; opacity: 0; pointer-events: none; } .shadowbox-upload__file-name { margin: 0; font-size: 0.78rem; color: rgba(245, 245, 245, 0.82); } .shadowbox-upload__error { margin: 0; font-size: 0.78rem; color: #ff9c9c; } .shadowbox-section--bib-upload.is-hidden { display: none; } .shadowbox-info-text { margin: 0; font-size: 0.8rem; color: rgba(245, 245, 245, 0.82); } .shadowbox-variation-select-wrap--size { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Awaryjnie ukryj natywny wybór pa_rozmiar Woo poza konfiguratorem Shadowbox. */ body.single-product form.variations_form .variations select[name="attribute_pa_rozmiar"] { display: none !important; } body.single-product form.variations_form .variations tr:has(select[name="attribute_pa_rozmiar"]) { display: none !important; } body.single-product form.variations_form select[name="attribute_pa_rozmiar"]:not(.shadowbox-variation-select--size) { display: none !important; } body.single-product .shadowbox-native-size-hidden { display: none !important; } .shadowbox-section--size { position: relative; } .shadowbox-textarea { width: 100%; min-height: 6rem; box-sizing: border-box; padding: 0.65rem 0.75rem; border-radius: 6px; border: 1px solid rgba(201, 170, 106, 0.2); background: rgba(5, 5, 5, 0.85); color: rgba(239, 231, 214, 0.92); font-family: inherit; font-size: 0.85rem; line-height: 1.5; resize: vertical; } .shadowbox-section--cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 1rem; background: transparent; border-style: dashed; border-color: rgba(205, 165, 87, 0.28); } .shadowbox-section--cta .single_add_to_cart_button { width: 100%; padding: 0.9rem 1.4rem; border-radius: 999px; background: #c9aa6a; border: 1px solid rgba(201, 170, 106, 0.9); color: #0b0d13; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.9rem; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55); transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .shadowbox-section--cta .single_add_to_cart_button:hover, .shadowbox-section--cta .single_add_to_cart_button:focus-visible { background: #e6d2a3; transform: translateY(-1px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65); outline: none; } .shadowbox-disabled { cursor: not-allowed !important; opacity: 0.6; } /* ============================================================ Wyrównanie podglądu ramki – stały kontener niezależny od orientacji obrazu (pozioma vs pionowa tej samej wielkości). ============================================================ */ /* Kontener galerii WooCommerce – stały format zbliżony do A4 */ body.single-product.shadowbox-page .woocommerce-product-gallery__wrapper, body.single-product.shadowbox-page .woocommerce-product-gallery .flex-viewport { aspect-ratio: 3 / 4 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; background: radial-gradient(circle at 20% 0, rgba(255,255,255,0.04), transparent 55%), #070709 !important; border-radius: 8px !important; } body.single-product.shadowbox-page .woocommerce-product-gallery__image { width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } body.single-product.shadowbox-page .woocommerce-product-gallery__image a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; } /* Kluczowe: obraz dopasowuje się do kontenera bez rozciągania */ body.single-product.shadowbox-page .woocommerce-product-gallery__image img { max-width: 90% !important; max-height: 90% !important; width: auto !important; height: auto !important; object-fit: contain !important; display: block !important; border-radius: 4px !important; transition: opacity 0.2s ease-out !important; } body.single-product.shadowbox-page .woocommerce-product-gallery__image img.is-fading { opacity: 0.5 !important; } @media (max-width: 900px) { .shadowbox-configurator__layout { grid-template-columns: minmax(0, 1fr); } .shadowbox-configurator__visual { order: -1; } } @media (max-width: 600px) { .shadowbox-configurator { padding: 1.25rem 1.25rem 1.5rem; } .shadowbox-section--inline { grid-template-columns: minmax(0, 1fr); } }