/* =========================================================
STYL PANELI ATRYBUTÓW / ZAKŁADEK / IDENTYFIKATORÓW TOWARU
Klasy: .productDetails-attributes, .productDetails-detailsButtons,
.productDetails-content--row (Identyfikatory towaru)
Spójny wizualnie z product-description.css (te same akcenty,
zaokrąglenia, cienie, przejścia).
========================================================= */
:root {
--pd-accent: #3d5a75;
--pd-accent-dark: #2c4258;
--pd-accent-soft: #e4ebf1;
--pd-border: #d3d9de;
--pd-bg-soft: #f4f6f8;
--pd-badge-bg: #e3e7eb;
--pd-text: #1a1a1a;
--pd-radius: 8px;
--pd-cta: #e20000;
}
/* ---------- ZAKŁADKI (Opis towaru / Części zamienne / Identyfikatory / Opinie) ----------
Komputer: zakładki to przyciski-pigułki (tło, ramka, uniesienie po najechaniu),
aktywna jest wypełniona kolorem. Pigułki ładnie się zawijają w wąskiej kolumnie.
Telefon (<= 768px): lista wierszy ze strzałką (layout-m0.css) - wyraźniejszy tekst.
Zakładka katalogu Husqvarna ma dodatkowe wyróżnienie w /usr/xepc-schemat-*.js. */
.productDetails-detailsButtons {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 1.2em;
border-bottom: 1px solid var(--pd-border);
}
.productDetails-detailsButtons--button {
position: relative;
cursor: pointer;
color: #444444;
font-weight: 500;
transition: color 0.15s ease, background-color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.productDetails-detailsButtons--button:focus-visible {
outline: 2px solid var(--pd-accent);
outline-offset: 2px;
}
@media (min-width: 769px) {
.productDetails-detailsButtons {
height: auto;
overflow: visible;
align-items: center;
gap: 10px;
padding: 6px 0 14px;
}
.productDetails-detailsButtons--button {
display: inline-flex;
align-items: center;
gap: 8px;
height: auto;
line-height: 1.25;
padding: 11px 18px;
background: var(--pd-bg-soft);
border: 1px solid var(--pd-border) !important;
border-radius: 999px !important;
color: var(--pd-accent);
font-weight: 600;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.productDetails-detailsButtons--button:hover {
background: var(--pd-accent-soft);
border-color: var(--pd-accent) !important;
color: var(--pd-accent-dark);
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}
.productDetails-detailsButtons--button.activeButton,
.productDetails-detailsButtons--button.activeButton:hover {
background: var(--pd-accent);
border-color: var(--pd-accent) !important;
color: #ffffff;
transform: none;
box-shadow: 0 2px 6px rgba(61, 90, 117, 0.35);
cursor: default;
}
/* layout2.css zaokrągla aktywną zakładkę tylko u góry (!important) */
.productDetails .productDetails-detailsButtons .productDetails-detailsButtons--button.activeButton {
border-radius: 999px !important;
}
}
@media (max-width: 768px) {
.productDetails-detailsButtons--button {
box-sizing: border-box;
height: auto;
min-height: 60px;
line-height: 1.3;
padding: 20px 48px 20px 12px;
color: var(--pd-accent);
font-weight: 600;
}
.productDetails-detailsButtons--button:active {
background: var(--pd-bg-soft);
}
}
/* ---------- GRUPY ATRYBUTÓW (Szerokość rowka, Podziałka itd.) ----------
Siatka 2 kolumn wymuszona przez flex-wrap + flex-row na elemencie
nadrzędnym (z !important - nadpisuje jakikolwiek inny layout). */
.productDetails-attributes {
display: flex !important;
flex-flow: row wrap !important;
gap: 16px !important;
margin: 1em 0 !important;
}
.productDetails-attributes .input-group.poly-container {
max-width: 48% ;
@media(max-width: 480px )
{
max-width: 100% !important;
}
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
padding: 14px 16px !important;
border: 1px solid var(--pd-border) !important;
border-radius: var(--pd-radius) !important;
background: var(--pd-bg-soft) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
.productDetails-attributes .attribute-name {
display: block !important;
font-weight: 700 !important;
color: var(--pd-text) !important;
font-size: 14px !important;
margin-bottom: 0 !important;
flex: 1 1 auto !important;
width:100%;
}
/* ---------- PRZYCISKI-OPCJE (warianty atrybutu) ----------
W kontekście karty atrybutu to "znaczek" wartości po prawej,
nie rząd klikalnych przycisków - stąd flex: 0 0 auto zamiast
zawijania na pełną szerokość. */
.button-option.attributes-select {
display: flex !important;
flex-flow: row wrap !important;
flex: 0 0 auto !important;
gap: 8px !important;
justify-content: flex-start !important;
}
.button-option.attributes-select span.button-option {
display: inline-flex;
align-items: center;
padding: 8px 14px;
border: 1px solid #c9d1d8;
border-radius: 6px;
background: var(--pd-badge-bg);
color: var(--pd-text);
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease,
color 0.15s ease;
}
.button-option.attributes-select span.button-option:hover {
border-color: var(--pd-accent);
background: #d8dee4;
}
.button-option.attributes-select span.button-option.active,
.button-option.attributes-select span.button-option[data-selected="true"] {
background: var(--pd-accent-soft);
border-color: var(--pd-accent);
color: var(--pd-accent-dark);
}
/* ---------- IDENTYFIKATORY TOWARU (nazwa / wartość) ----------
Ten sam wzorzec "etykieta-wartość" co spec-lista w opisie,
tylko oparty o rzeczywiste klasy .name / .value zamiast <span>. */
.productDetails-content--row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 12px;
padding: 10px 4px;
border-bottom: 1px solid var(--pd-border);
border-radius: 6px;
transition: background-color 0.15s ease;
}
.productDetails-content--row:hover {
background: var(--pd-bg-soft);
}
.productDetails-content--row:last-child {
border-bottom: none;
}
.productDetails-content--row > .name {
flex: 0 0 35%;
font-weight: 700;
color: var(--pd-text);
}
.productDetails-content--row > .value {
flex: 1 1 60%;
color: #333333;
}
@media (max-width: 480px) {
.productDetails-content--row {
flex-direction: column;
row-gap: 2px;
max-width: 80% !important
}
.productDetails-content--row > .name,
.productDetails-content--row > .value {
flex: 1 1 100%;
}
}
/* ---------- SELEKTOR ILOŚCI ---------- */
.productDetails-attributes--quantity__title {
font-weight: 700 !important;
color: var(--pd-text) !important;
margin-bottom: 8px !important;
display: block !important;
}
/* Box nie rozciąga się na całą dostępną szerokość (stąd pusta
przestrzeń po prawej na screenie) - trzyma się rozmiaru treści,
niezależnie od tego, jak szeroki jest kontener nadrzędny. */
.productDetails-attributes--quantity__box {
display: inline-flex !important;
width: fit-content !important;
max-width: 100% !important;
align-items: stretch !important;
border: 1px solid #c9d1d8 !important;
border-radius: var(--pd-radius) !important;
overflow: hidden !important;
background: #ffffff !important;
}
.button-minus-add-product,
.button-plus-add-product {
background: #ffffff !important;
border: none !important;
padding: 10px 16px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background-color 0.15s ease !important;
}
.button-minus-add-product:hover,
.button-plus-add-product:hover {
background: #f2f4f6 !important;
}
.quantity-field {
border: none !important;
border-left: 1px solid var(--pd-border) !important;
border-right: 1px solid var(--pd-border) !important;
text-align: center !important;
width: 48px !important;
padding: 8px 4px !important;
color: #1a6cff !important;
font-weight: 600 !important;
}
/* ---------- JEDNOSTKA (np. "szt") ----------
Wymuszony spójny kolor/font na polu jednostki - readonly <input>
potrafi renderować się częściowo w innym kolorze (np. przez
spellcheck przeglądarki podkreślający "nieznane słowo"). */
.unitName.unitId {
border: none !important;
background: transparent !important;
color: #222222 !important;
font: inherit !important;
font-weight: 500 !important;
text-decoration: none !important;
-webkit-text-fill-color: #222222 !important;
}
/* =========================================================
MOBILE (<= 600px)
========================================================= */
@media (max-width: 600px) {
/* Grupy atrybutów - 1 kolumna zamiast 2 (za mało miejsca na telefonie) */
.productDetails-attributes .input-group.poly-container {
flex: 1 1 100% !important;
padding: 10px 12px;
}
.productDetails-attributes {
gap: 12px;
margin: 0.8em 0;
}
.productDetails-attributes .attribute-name {
font-size: 13px;
margin-bottom: 6px;
}
/* Przyciski-warianty - min. 40px wysokości = wygodny cel dotykowy */
.button-option.attributes-select {
gap: 6px;
}
.button-option.attributes-select span.button-option {
padding: 8px 12px;
min-height: 40px;
font-size: 13px;
}
/* Identyfikatory towaru - mniejszy padding wiersza na wąskim ekranie */
.productDetails-content--row {
padding: 8px 2px;
}
/* Selektor ilości - na całą szerokość, większe przyciski +/- do
wygodnego dotknięcia kciukiem */
.productDetails-attributes--quantity__box {
width: 100% !important;
justify-content: space-between !important;
}
.button-minus-add-product,
.button-plus-add-product {
padding: 10px 18px;
min-width: 44px;
min-height: 44px;
}
.quantity-field {
flex: 1 1 auto;
width: auto;
}
}
/* 2026-10-02: parametr „KATEGORIA SPRZEDAŻY” ukryty na karcie produktu (atrybut data-bs-ukryty z product-details-4.html);
pole z wartością zostaje w formularzu, więc dodawanie do koszyka działa bez zmian */
html body .productDetails-attributes div.input-group.poly-container[data-bs-ukryty],
html body div.input-group.poly-container[data-bs-ukryty] { display: none !important; }