/* MebloLove Konfigurator — styl zgodny z product.html (etykieta ROZMIAR/TKANINA + pigułki) */ .mlk { --ink:#2A2722; --mut:#6B6557; --soft:#8A8270; --label:#A39C8C; --line:#E3DDD1; --bg:#F6F2EA; --accent:#201E1A; --gold:#C19A72; margin-top:1.4rem; font-family:inherit; color:var(--ink); } .mlk-notice { background:#FBEFD0; border:1px solid #E8D28A; padding:.5rem .75rem; border-radius:6px; font-size:.85rem; } .mlk-step { padding:1.15rem 0; border-bottom:1px solid var(--line); } /* nagłówek kroku = etykieta jak w designie: uppercase, wygaszona, mały numer po lewej */ .mlk-step-head { font-family:'Jost',sans-serif; font-weight:400; font-size:11.5px; letter-spacing:2px; text-transform:uppercase; color:var(--label); margin-bottom:.85rem; display:flex; align-items:center; gap:.6rem; } /* wybrana wartość po prawej stronie nagłówka kroku (wzór .opt-head z product.html) */ .mlk-step-val { margin-left:auto; font-weight:400; font-size:13px; letter-spacing:.3px; text-transform:none; color:var(--ink); } .mlk-num { display:inline-flex; width:18px; height:18px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--soft); align-items:center; justify-content:center; font-size:10px; flex:0 0 auto; } .mlk-options { display:flex; flex-wrap:wrap; gap:.5rem; } .mlk-opt, .mlk-opt:focus, .mlk-opt:active, .mlk-opt:focus-visible { /* PRAWDZIWE ZRODLO calej serii bugow z kolorem/rozmiarem/uklandem: motyw hello-elementor ma we WLASNYM reset.css regule [type=button],[type=submit],button { display:inline-block; font-size:1rem; padding:.5rem 1rem; border:1px solid #c36; color:#c36; ... } Selektor atrybutu [type=button] ma DOKLADNIE taka sama specificity jak klasa .mlk-opt (0,1,0) -- naszymi przyciski maja type="button", wiec to REMIS w specificity, rozstrzygany kolejnoscia zaladowania w (kto ostatni, ten wygrywa). Dlatego KAZDA wlasciwosc, ktora nachodzi na te regule resetu, musi miec !important -- samo "poprawianie" pojedynczej wlasciwosci (np. tylko border-color) zostawia inne (display, font-size, padding) dalej podatne na ten sam remis, stad przyciski migaly/zmienialy uklad na 2-liniowy/1-liniowy w zaleznosci od tego kto akurat wygral. */ position:relative; border:1px solid rgba(42,39,34,.14) !important; background-color:var(--bg) !important; color:var(--ink) !important; padding:11px 18px !important; border-radius:2px !important; cursor:pointer; font-family:'Jost',sans-serif !important; font-weight:400 !important; font-size:13.5px !important; line-height:1.1 !important; text-align:center; white-space:nowrap; display:flex !important; flex-direction:column; align-items:center; gap:.15rem; transition:border-color .25s, background-color .25s, color .25s; min-width:54px; outline:none; } .mlk-opt:hover { border-color:var(--ink) !important; } .mlk-opt:focus-visible { box-shadow:0 0 0 3px var(--gold); } .mlk-opt.is-active, .mlk-opt.is-active:focus, .mlk-opt.is-active:active { border-color:var(--accent) !important; background-color:var(--accent) !important; color:#fff !important; } /* swatche ze zdjęciem: aktywny stan NIE dostaje tła var(--accent) z reguły wyżej — zdjęcie ma zostać widoczne, wyróżnienie idzie przez ring (box-shadow) niżej */ .mlk-swatch .mlk-opt[data-image].is-active { background-color:transparent !important; } .mlk-opt-sur { font-size:.72rem; opacity:.75; } /* swatche tkanin (ze zdjęciem) */ .mlk-swatch .mlk-opt[data-image] { width:72px; height:72px; padding:0; background-size:cover; background-position:center; border-radius:8px; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease; } .mlk-swatch .mlk-opt[data-image]:hover { transform:translateY(-3px); } /* aktywny swatch: podwójny ring (tło strony + ink) — wzór .fab.active z product.html */ .mlk-swatch .mlk-opt[data-image].is-active, .mlk-swatch .mlk-opt[data-image].is-active:focus, .mlk-swatch .mlk-opt[data-image].is-active:active { box-shadow:0 0 0 2px #ECE7DE, 0 0 0 4px var(--ink); border-color:transparent !important; } .mlk-swatch .mlk-opt[data-image] .mlk-opt-label { position:absolute; bottom:0; left:0; right:0; font-size:.7rem; background:rgba(0,0,0,.45); color:#fff; padding:3px 0; } /* swatche bez zdjęcia — czytelna pigułka zamiast pustego kwadratu */ .mlk-swatch .mlk-opt:not([data-image]) { width:auto; height:auto; padding:.45rem .7rem; border-radius:999px; background:var(--bg); } .mlk-swatch .mlk-opt:not([data-image]) .mlk-opt-label { position:static; background:none; color:inherit; font-size:.78rem; padding:0; } /* kolor wywiedziony z nazwy (ustawiany inline przez PHP) — kropka przed etykietą */ .mlk-swatch .mlk-opt:not([data-image]) .mlk-dot { width:14px; height:14px; border-radius:50%; display:inline-block; box-shadow:inset 0 0 0 1px rgba(42,39,34,.18); margin-right:2px; } .mlk-swatch .mlk-opt:not([data-image]) { flex-direction:row; align-items:center; gap:.4rem; } .mlk-swatch .mlk-opt:not([data-image]).is-active { outline:3px solid var(--accent); outline-offset:1px; } .mlk-summary { margin-top:1.5rem; } .mlk-price-row { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; padding-bottom:1rem; margin-bottom:1rem; border-bottom:1px solid var(--line); } .mlk-price-row > span { font-family:'Jost',sans-serif; font-size:11.5px; letter-spacing:2px; text-transform:uppercase; color:var(--label); } .mlk-total { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:500; color:var(--ink); } .mlk-add { width:100%; padding:1rem 1.2rem !important; font-size:12.5px !important; letter-spacing:2.4px !important; text-transform:uppercase; border-radius:2px !important; } .mlk-add:disabled { opacity:.45; cursor:not-allowed; } .mlk-hint { font-size:.8rem; color:var(--mut); margin-top:.6rem; } .mlk-step--hidden { display: none; } /* Pod-krok zagniezdzony w karcie kroku (np. 'Pokrowiec na dodatkowy materac' w podpunkcie 'Pokrowiec na materac') -- caly rodzic zawsze widoczny, sam pod-krok moze sie pojawiac/znikac (.mlk-step--hidden) w zaleznosci od innego wyboru. */ .mlk-substep { margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--line); } .mlk-substep-label { font-family:'Jost',sans-serif; font-weight:400; font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--label); margin-bottom:.6rem; } .mlk-fabric-prompt { font-size: .82rem; color: var(--mut); margin: .6rem 0 0; } .mlk-fabric-prompt a { color: var(--gold); text-decoration: underline; } .mlk-opt--hidden { display: none !important; } /* stepper +/- przy opcjach z iloscia (np. "Poduszka w kolorze lozka") */ .mlk-qty { display: inline-flex; align-items: center; gap: 2px; margin-left: -4px; align-self: center; } .mlk-qty--hidden { display: none !important; } .mlk-qty-btn { width: 30px !important; height: 30px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid var(--ml-line, #E4DBC9) !important; background: #fff !important; color: var(--ml-ink, #2A2722) !important; border-radius: 6px !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1 !important; cursor: pointer; font-family: inherit !important; } .mlk-qty-btn:hover { background: var(--ml-bg, #F2ECE0) !important; } .mlk-qty-val { min-width: 26px; text-align: center; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ml-ink, #2A2722); } /* etykieta przy stepperze -- zeby bylo jasne CZEGO dotyczy zmieniana ilosc */ .mlk-qty { flex-basis: 100%; margin-left: 0; margin-top: 6px; } .mlk-qty-for { font-size: 13px; color: var(--ml-mut, #7C7264); margin-right: 4px; } .mlk-qty-unit { font-size: 13px; color: var(--ml-mut, #7C7264); margin-left: 2px; } /* ---------- KACIK Z PARAMETRAMI TKANINY (pod krokiem "Tkanina") ---------- * Domyslnie zwiniety -- parametry techniczne interesuja czesc klientow, a nie moga * odciagac uwagi od samego wyboru koloru. */ .mlk-fabric-specs { margin: 14px 0 0; border: 1px solid var(--ml-line, #E4DBC9); border-radius: 10px; background: var(--ml-bg, #F6F2EA); overflow: hidden; } .mlk-fabric-specs > summary { cursor: pointer; list-style: none; padding: 11px 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-family: var(--ml-sans); font-size: 13.5px; color: var(--ml-ink, #2A2722); } .mlk-fabric-specs > summary::-webkit-details-marker { display: none; } .mlk-fabric-specs > summary::after { content: '+'; margin-left: auto; font-size: 15px; line-height: 1; color: var(--ml-mut, #7C7264); } .mlk-fabric-specs[open] > summary::after { content: '–'; } .mlk-fabric-specs__name { font-weight: 500; } .mlk-fabric-specs__hint { font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ml-mut, #7C7264); } .mlk-fabric-specs__body { padding: 0 14px 14px; } .mlk-fabric-specs__grid { margin: 0 0 10px; display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 13.5px; } .mlk-fabric-specs__grid dt { color: var(--ml-mut, #7C7264); } .mlk-fabric-specs__grid dd { margin: 0; color: var(--ml-ink, #2A2722); font-variant-numeric: tabular-nums; } .mlk-fabric-specs__list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; } .mlk-fabric-specs__list li { font-size: 12px; line-height: 1.35; padding: 4px 9px; border-radius: 100px; background: #fff; border: 1px solid var(--ml-line, #E4DBC9); color: var(--ml-ink, #2A2722); } .mlk-dep--hidden { display: none !important; } /* krok "Kolor" przy wyborze dwustopniowym -- duzo probek, wiec siatka zamiast rzedu */ .mlk-step[data-key="fabric_color"] .mlk-options { flex-wrap: wrap; gap: 8px; }