/* branike-woo — frontend styles */ /* * ══ TMAVÝ REŽIM ═══════════════════════════════════════════════════════════ * * 🔴🔴 PRAVIDLO: v tomto súbore nesmie byť HOLÝ hex vo farebnej deklarácii. * Farba ide VŽDY cez `var( --wp--preset--color--…, #fallback )`. * * Prečo: tmavý režim témy prepisuje `--wp--preset--color--*` na `` * (branike-theme/assets/css/palettes.css). Čokoľvek, čo má farbu natvrdo, * v noci ostane v dennej hodnote — kým text okolo sa prefarbí. Presne to * bolo namerané na it2 28. 7.: nadpis `#FAFAF9` na dialógu `#fff` = 1,04. * Dialóg mal pozadie natvrdo, text ho mal z palety. Dve vrstvy sa rozišli. * * Fallback za čiarkou tu NIE JE preto, že by sme farbu určovali my — je * preto, aby modul fungoval aj mimo Branike témy, kde tie premenné nie sú. * * 🔴 MÄKKÉ POZADIA (hlášky, odznaky) sa POČÍTAJU, nie zapisujú: * color-mix( in srgb, var( --…--success ) 12%, var( --…--base ) ) * V dni sa zelená zmieša do bielej, v noci do tmavej — pomer sa drží sám. * Keď prehliadač `color-mix()` nevie, deklarácia vypadne a ostane pozadie * stránky — text aj rámik ďalej platia, takže sa nič nestratí. * * 🔴 TEXT V TÝCH HLÁŠKACH JE `--contrast`, NIE semantická farba. ODMERANÉ * cez všetkých 28 denných a 20 nočných paliet: semantická farba na vlastnom * 12 % nádychu padne až na 4,01 (paleta fitness) — pod AA. `--contrast` drží * najhorší pár 11,58. Význam nesie RÁMIK, čitateľnosť nesie text. * * Stráži to `_devtest/harness/harness-dark-mode-css.php`. * ═════════════════════════════════════════════════════════════════════════ */ /* Omnibus notice */ .bwoo-omnibus-notice { display: block; font-size: 0.8em; color: var( --wp--preset--color--contrast-three, #6B7280 ); margin-top: 4px; } /* Withdrawal form */ .bwoo-withdrawal-wrap { max-width: 640px; } .bwoo-withdrawal-intro { background: color-mix( in srgb, var( --wp--preset--color--info, #0277AB ) 12%, var( --wp--preset--color--base, #fff ) ); /* 🔴 Pozadie a text VŽDY v páre — inak tmavý na tmavom. */ color: var( --wp--preset--color--contrast, #1F2937 ); border-left: 4px solid var( --wp--preset--color--info, #0277AB ); padding: 12px 16px; margin-bottom: 24px; border-radius: 0 4px 4px 0; } .bwoo-withdrawal-form p { margin-bottom: 16px; } .bwoo-withdrawal-form label { display: block; font-weight: 600; margin-bottom: 4px; } .bwoo-withdrawal-form input[type="text"], .bwoo-withdrawal-form input[type="number"], .bwoo-withdrawal-form input[type="email"], .bwoo-withdrawal-form textarea { width: 100%; max-width: 100%; box-sizing: border-box; } .bwoo-wd-consent label { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; } .bwoo-wd-consent input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; } .bwoo-wd-submit:disabled { opacity: 0.6; cursor: not-allowed; } .bwoo-notice { padding: 12px 16px; border-radius: 4px; margin-bottom: 16px; } .bwoo-notice-success { background: color-mix( in srgb, var( --wp--preset--color--success, #00845A ) 12%, var( --wp--preset--color--base, #fff ) ); border: 1px solid var( --wp--preset--color--success, #00845A ); color: var( --wp--preset--color--contrast, #1F2937 ); } .bwoo-wd-error { padding: 12px 16px; background: color-mix( in srgb, var( --wp--preset--color--error, #D10020 ) 12%, var( --wp--preset--color--base, #fff ) ); border: 1px solid var( --wp--preset--color--error, #D10020 ); color: var( --wp--preset--color--contrast, #1F2937 ); border-radius: 4px; margin-bottom: 16px; } /* Status badges (admin withdrawal list) */ .bwoo-status-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.85em; font-weight: 600; } /* * 🔴 Odznak je malé písmo (0,85em), teda AA = 4,5:1 bez úľavy pre veľký text. * Preto nesie význam POZADIE a rámik, a čitateľnosť `--contrast`. */ .bwoo-status-pending { background: color-mix( in srgb, var( --wp--preset--color--warning, #996104 ) 15%, var( --wp--preset--color--base, #fff ) ); color: var( --wp--preset--color--contrast, #1F2937 ); } .bwoo-status-resolved { background: color-mix( in srgb, var( --wp--preset--color--success, #00845A ) 15%, var( --wp--preset--color--base, #fff ) ); color: var( --wp--preset--color--contrast, #1F2937 ); } .bwoo-status-in_progress { background: color-mix( in srgb, var( --wp--preset--color--info, #0277AB ) 15%, var( --wp--preset--color--base, #fff ) ); color: var( --wp--preset--color--contrast, #1F2937 ); } .bwoo-status-rejected { background: color-mix( in srgb, var( --wp--preset--color--error, #D10020 ) 15%, var( --wp--preset--color--base, #fff ) ); color: var( --wp--preset--color--contrast, #1F2937 ); } /* Delivery time */ .bwoo-delivery-time { font-size: 0.9em; color: var( --wp--preset--color--contrast-two, #4B5563 ); margin: 6px 0; } .bwoo-dt-icon { margin-right: 4px; } /* Unit price */ .bwoo-unit-price { font-size: 0.85em; color: var( --wp--preset--color--contrast-three, #6B7280 ); margin: 2px 0 8px; } /* ══ BWOO SUMMARY ROW — ikony na úrovni hviezdičiek ▼ ═══════════════════════ * Brani 28. 7.: „ikony srdiečko a porovnanie daj v rovine ako sú hviezdičky, * z prava zarovnanie" — a tým sa všetko pod nimi posunie vyššie. * * Obal skladá PHP cez `render_block` nad blokom hodnotenia. Dva samostatné * súrodenci vo zvislom toku by sa do jedného riadka žiadnym CSS nedostali. */ .bwoo-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .bwoo-summary-actions { display: flex; align-items: center; gap: 0.25rem; /* 🔴 `margin-inline-start: auto` drží ikony vpravo aj vtedy, keď hodnotenie chýba a v riadku ostane len ony. */ margin-inline-start: auto; } /* V riadku sú ikony bez okrúhleho pozadia — to patrí na kartu, kde ležia na fotke. */ .bwoo-summary-actions .bwoo-wishlist-btn, .bwoo-summary-actions .bwoo-compare-btn { background: none; box-shadow: none; } /* ══ BWOO SUMMARY ROW ▲ ════════════════════════════════════════════════════ */ /* Product inquiry button */ .bwoo-inquiry-wrap { margin: 16px 0; } /* * 🔴 Brani 28. 7.: „tlačidlo Mám otázku k produktu sprav krásne a dajme * predvolenú farbu, nech je to výrazné." * * Farba ide z palety témy (`--wp--preset--color--accent`) s fallbackom, takže * sa mení s paletou klienta aj v noci. Fallback je tu preto, že modul má * fungovať aj mimo Branike témy — nie preto, že by sme farbu určovali my. */ .bwoo-inquiry-btn { display: inline-flex; align-items: center; gap: 0.5rem; /* 44 px dotykový cieľ. */ min-block-size: 44px; padding: 0.6rem 1.3rem; border: 1px solid transparent; border-radius: 10px; background-color: var( --wp--preset--color--accent, #7C3AED ); /* 🔴 Pozadie a text VŽDY v páre — inak tmavý na tmavom. */ color: var( --wp--preset--color--base, #fff ); font-weight: 600; line-height: 1.2; cursor: pointer; transition: background-color 0.15s ease, transform 0.05s ease; } .bwoo-inquiry-btn:hover { background-color: var( --wp--preset--color--accent-strong, #5B21B6 ); color: var( --wp--preset--color--base, #fff ); } .bwoo-inquiry-btn:active { transform: translateY( 1px ); } .bwoo-inquiry-btn:focus-visible { outline: 2px solid var( --wp--preset--color--accent-strong, #5B21B6 ); outline-offset: 2px; } /* Otáznik pred textom — dekorácia, odčítačka číta popisok tlačidla. */ .bwoo-inquiry-btn::before { content: ""; inline-size: 18px; block-size: 18px; flex: 0 0 auto; background-color: currentColor; -webkit-mask: var( --bwoo-ask ) center / contain no-repeat; mask: var( --bwoo-ask ) center / contain no-repeat; --bwoo-ask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.7'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E" ); } /* Modal */ .bwoo-modal { position: fixed; inset: 0; z-index: 99999; } .bwoo-modal[hidden] { display: none; } .bwoo-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); } /* * 🔴🔴 TOTO BOL TEN NÁLEZ (it2, 28. 7.): dialóg mal `background: #fff` natvrdo, * kým nadpis v ňom prefarbovala téma z palety. V noci vyšlo `#FAFAF9` na bielej * = kontrast 1,04, teda neviditeľný nadpis. Pozadie a text musia ísť z toho * ISTÉHO zdroja, inak sa raz rozídu. */ .bwoo-modal-dialog { position: relative; background: var( --wp--preset--color--base, #fff ); color: var( --wp--preset--color--contrast, #1F2937 ); border-radius: 6px; padding: 32px; max-width: 500px; width: 90%; margin: 60px auto 0; box-shadow: 0 8px 32px rgba(0,0,0,.2); } /* * 🔴 Nadpis dedí farbu z dialógu. Téma dáva nadpisom vlastnú farbu z palety, * ale keby ju nedala, bez tohto by nadpis ostal v čiernej po prehliadači. */ .bwoo-modal-dialog > h2, .bwoo-modal-dialog > h3 { color: var( --wp--preset--color--contrast, #1F2937 ); } .bwoo-modal-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var( --wp--preset--color--contrast-three, #6B7280 ); line-height: 1; } .bwoo-modal-close:hover { color: var( --wp--preset--color--contrast, #1F2937 ); } .bwoo-modal-product-name { font-weight: 600; color: var( --wp--preset--color--contrast-two, #4B5563 ); margin-bottom: 20px; } .bwoo-form-row { margin-bottom: 14px; } .bwoo-form-row label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 0.9em; } /* * 🔴 Pole má POZADIE ZO `surface`, nie z `base`. V noci je `base` aj dialóg * `#111827` — pole s pozadím `base` by v dialógu zmizlo. `surface` je o stupeň * vedľa v OBOCH režimoch (deň #F9FAFB na bielej, noc #1F2937 na #111827). * V Branike téme toto pravidlo aj tak prehrá s vlastným poľom témy * (`--bt-field-bg`/`--bt-field-text`, ktoré sú spárované) — je tu pre beh * mimo témy, aby pole nebolo nikdy tmavé na tmavom. */ .bwoo-input { width: 100%; box-sizing: border-box; padding: 8px 10px; background-color: var( --wp--preset--color--surface, #F9FAFB ); color: var( --wp--preset--color--contrast, #1F2937 ); border: 1px solid var( --wp--preset--color--contrast-three, #E5E7EB ); border-radius: 4px; font-size: 0.95em; } .bwoo-input:focus { outline: 2px solid var( --wp--preset--color--accent, #7C3AED ); border-color: transparent; } .bwoo-form-submit { display: flex; align-items: center; gap: 12px; } .bwoo-inq-status { font-size: 0.9em; } /* * Tlačidlo „Odoslať dopyt" — Brani 28. 7.: „tiež daj pekne s predvolenou farbou * a pred to ikonku odoslať." * * 🔴 Rovnaký vzhľad ako tlačidlo, ktoré okno otvorilo — človek má vidieť, že * to je tá istá akcia dotiahnutá do konca. Farba z palety, ikona ako maska * s `currentColor`, 44 px. */ .bwoo-inq-submit { display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 44px; padding: 0.6rem 1.3rem; border: 1px solid transparent; border-radius: 10px; background-color: var( --wp--preset--color--accent, #7C3AED ); color: var( --wp--preset--color--base, #fff ); font-weight: 600; line-height: 1.2; cursor: pointer; transition: background-color 0.15s ease, transform 0.05s ease; } .bwoo-inq-submit:hover:not( :disabled ) { background-color: var( --wp--preset--color--accent-strong, #5B21B6 ); color: var( --wp--preset--color--base, #fff ); } .bwoo-inq-submit:active:not( :disabled ) { transform: translateY( 1px ); } .bwoo-inq-submit:focus-visible { outline: 2px solid var( --wp--preset--color--accent-strong, #5B21B6 ); outline-offset: 2px; } /* 🔴 Odosielanie musí byť vidieť aj bez textu — inak človek klikne druhýkrát. */ .bwoo-inq-submit:disabled { opacity: 0.6; cursor: progress; } .bwoo-inq-submit::before { content: ""; inline-size: 18px; block-size: 18px; flex: 0 0 auto; background-color: currentColor; -webkit-mask: var( --bwoo-send ) center / contain no-repeat; mask: var( --bwoo-send ) center / contain no-repeat; --bwoo-send: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L3 10.5l7 3 3 7z'/%3E%3Cpath d='M10 13.5L21 3'/%3E%3C/svg%3E" ); } /* ── Legal shortcodes: withdrawal button, ARS/RSO, complaints procedure ── */ .bwoo-withdrawal-button { display: inline-flex; align-items: center; gap: 6px; /* 44 px dotykový cieľ — rovnaké ako ostatné naše tlačidlá. */ min-block-size: 44px; padding: 10px 18px; background: var( --wp--preset--color--accent, #7C3AED ); color: var( --wp--preset--color--base, #fff ); font-weight: 700; text-decoration: none; border-radius: 6px; border: 1px solid var( --wp--preset--color--accent, #7C3AED ); transition: background .15s ease; } .bwoo-withdrawal-button:hover, .bwoo-withdrawal-button:focus { background: var( --wp--preset--color--accent-strong, #5B21B6 ); color: var( --wp--preset--color--base, #fff ); border-color: var( --wp--preset--color--accent-strong, #5B21B6 ); } .bwoo-withdrawal-button:focus-visible { outline: 2px solid var( --wp--preset--color--accent-strong, #5B21B6 ); outline-offset: 2px; } .bwoo-legal-hint { color: var( --wp--preset--color--contrast-two, #4B5563 ); font-style: italic; } .bwoo-ars-info { margin-top: 20px; padding: 14px 18px; background: var( --wp--preset--color--surface, #F9FAFB ); color: var( --wp--preset--color--contrast, #1F2937 ); border: 1px solid var( --wp--preset--color--contrast-three, #E5E7EB ); border-left: 4px solid var( --wp--preset--color--accent, #7C3AED ); border-radius: 6px; } .bwoo-ars-info h4 { margin: 0 0 8px; } .bwoo-ars-info p { margin: 6px 0; } .bwoo-complaint-policy { max-width: 760px; } .bwoo-complaint-policy h2 { margin-top: 0; } .bwoo-complaint-policy h3 { margin: 18px 0 6px; } .bwoo-complaint-policy ul { margin: 6px 0 6px 20px; } /* Predzmluvný info blok (opraviteľnosť / záruka) na produkte */ /* * 🔴 `rgba( 0, 0, 0, .1 )` je ten istý problém ako holý hex, len prezlečený: * čierna s priehľadnosťou je na tmavom pozadí neviditeľná. Rámik z palety * sa v noci zosvetlí s ňou. */ .bwoo-preinfo { margin: 16px 0; padding: 12px 16px; border: 1px solid var( --wp--preset--color--contrast-three, #E5E7EB ); border-radius: 8px; } .bwoo-preinfo__title { margin: 0 0 8px; font-size: 1rem; } .bwoo-preinfo__list { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; } .bwoo-preinfo__list dt { margin: 0; font-weight: 600; } .bwoo-preinfo__list dd { margin: 0; } /* M19 Digitálne produkty — Moja knižnica */ .bwoo-library { display: grid; gap: 14px; } .bwoo-lib-product { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border: 1px solid var( --wp--preset--color--contrast-three, #E5E7EB ); border-radius: 8px; } .bwoo-lib-cover img, img.bwoo-lib-thumb { width: 64px; height: auto; border-radius: 4px; display: block; } .bwoo-lib-body { flex: 1; min-width: 0; } .bwoo-lib-title { margin: 0 0 8px; font-size: 1.05rem; } .bwoo-lib-files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .bwoo-lib-files li { display: inline-flex; gap: 6px; align-items: center; } /* 🔴 `rgba( 0, 0, 0, .55 )` v noci = čierny text na tmavom. */ .bwoo-lib-left { font-size: .85em; color: var( --wp--preset--color--contrast-three, #6B7280 ); } /* ══ BWOO WISHLIST ▼ ═══════════════════════════════════════════════════════ * Obľúbené — srdce na karte, na detaile a v zozname. * Farby idú z palety témy s fallbackom, aby modul fungoval aj mimo Branike témy. */ .bwoo-wishlist-card { position: relative; } .bwoo-wishlist-btn { display: inline-flex; align-items: center; justify-content: center; /* 🔴 44 px = dotykový cieľ (WCAG 2.5.5). Srdce je malé, plocha nesmie byť. */ min-inline-size: 44px; min-block-size: 44px; padding: 0; background: none; border: 0; cursor: pointer; color: var( --wp--preset--color--contrast-three, #6B7280 ); transition: color 0.15s ease, transform 0.15s ease; } .bwoo-wishlist-btn:hover { color: var( --wp--preset--color--accent, #7C3AED ); } .bwoo-wishlist-btn:focus-visible { outline: 2px solid var( --wp--preset--color--accent, #7C3AED ); outline-offset: 2px; border-radius: 8px; } .bwoo-wishlist-btn.is-active { color: var( --wp--preset--color--error, #D10020 ); } .bwoo-wishlist-btn[aria-busy="true"] { opacity: 0.55; cursor: progress; } /* * Srdce ako maska, nie ako obrázok s farbou v sebe — farbu dedí od `color`, * takže aktívny stav aj noc fungujú bez druhej ikony. */ .bwoo-wishlist-btn__icon { inline-size: 22px; block-size: 22px; background-color: currentColor; -webkit-mask: var( --bwoo-heart ) center / contain no-repeat; mask: var( --bwoo-heart ) center / contain no-repeat; } .bwoo-wishlist-btn { --bwoo-heart: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E" ); } .bwoo-wishlist-btn.is-active { --bwoo-heart: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E" ); } /* Na karte sedí srdce v rohu obrázka. */ .bwoo-wishlist-btn--card { position: absolute; inset-block-start: 4px; inset-inline-start: 4px; z-index: 2; background: var( --wp--preset--color--base, #fff ); /* 🔴 Pilulka a ikona v nej patria k sebe — pár patrí do jedného pravidla, inak sa pri prvej úprave rozídu. Ikona kreslí `currentColor`. */ color: var( --wp--preset--color--contrast-three, #6B7280 ); border-radius: 999px; box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.18 ); } .bwoo-wishlist-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; } /* * 🔴 Namerané na it2 28. 7.: pri flexe sa riadky nezarovnali — produkt bez * obrázka posunul názov aj cenu doľava a riadky vyzerali ako dva rôzne zoznamy. * Mriežka drží stĺpce rovnako pre všetky riadky bez ohľadu na obsah. */ .bwoo-wishlist-item { display: grid; /* * 🔴 Prvý stĺpec má SPODNÚ hranicu. S `minmax( 0, … )` sa po pridaní do * košíka (Woo dopíše odkaz „Zobraziť košík") stĺpec stlačil na nulu a názov * produktu prekryl cenu — namerané na it2 28. 7. * * 🔴 A hranica je NÍZKA (8rem) zámerne: pri 16rem už nezvýšilo miesto na * nákupný stĺpec a ten sa zalomil na dva riadky (tiež namerané na it2). * Názov sa smie zalomiť, tlačidlo do košíka nie. */ grid-template-columns: minmax( 8rem, 1fr ) auto auto; align-items: center; gap: 1rem; padding-block-end: 1rem; border-block-end: 1px solid var( --wp--preset--color--contrast-three, #E5E7EB ); } .bwoo-wishlist-item__link { display: flex; align-items: center; gap: 1rem; min-inline-size: 0; text-decoration: none; color: inherit; } .bwoo-wishlist-item img { /* 🔴 Pevná šírka AJ výška: obrázok na výšku a na šírku by inak posunul riadok. */ inline-size: 72px; block-size: 72px; object-fit: cover; flex: 0 0 auto; border-radius: 10px; } .bwoo-wishlist-item__price { white-space: nowrap; } /* ══ BWOO WISHLIST ▲ ═══════════════════════════════════════════════════════ */ /* ══ BWOO COMPARE ▼ ════════════════════════════════════════════════════════ * Porovnanie produktov — ikona a tabuľka. */ .bwoo-compare-btn { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 44px; /* dotykový cieľ, WCAG 2.5.5 */ min-block-size: 44px; padding: 0; background: none; border: 0; cursor: pointer; color: var( --wp--preset--color--contrast-three, #6B7280 ); transition: color 0.15s ease; } .bwoo-compare-btn:hover { color: var( --wp--preset--color--accent, #7C3AED ); } .bwoo-compare-btn:focus-visible { outline: 2px solid var( --wp--preset--color--accent, #7C3AED ); outline-offset: 2px; border-radius: 8px; } .bwoo-compare-btn.is-active { color: var( --wp--preset--color--accent, #7C3AED ); } .bwoo-compare-btn[aria-busy="true"] { opacity: 0.55; cursor: progress; } /* Ikona ako maska → farbu dedí od `color`, takže aktívny stav aj noc fungujú. */ .bwoo-compare-btn__icon { inline-size: 22px; block-size: 22px; background-color: currentColor; -webkit-mask: var( --bwoo-scales ) center / contain no-repeat; mask: var( --bwoo-scales ) center / contain no-repeat; /* * 🔴 Ikona podľa PREDLOHY, ktorú poslal Brani (lieciva­silaprirody.sk): * dve krížiace sa šípky, nie váhy. V e-shopoch je to zaužívaný tvar * pre porovnanie a zákazník ho pozná. */ --bwoo-scales: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 4l3 3l-3 3'/%3E%3Cpath d='M18 20l3-3l-3-3'/%3E%3Cpath d='M3 7h3a5 5 0 0 1 5 5a5 5 0 0 0 5 5h5'/%3E%3Cpath d='M3 17h3a5 5 0 0 0 5-5a5 5 0 0 1 5-5h5'/%3E%3C/svg%3E" ); } /* 🔴 Na karte sedí vedľa srdca, nie na ňom — obľúbené sú vľavo hore. */ .bwoo-compare-btn--card { position: absolute; inset-block-start: 4px; inset-inline-start: 52px; z-index: 2; background: var( --wp--preset--color--base, #fff ); /* 🔴 Pilulka a ikona v nej patria k sebe — pár patrí do jedného pravidla, inak sa pri prvej úprave rozídu. Ikona kreslí `currentColor`. */ color: var( --wp--preset--color--contrast-three, #6B7280 ); border-radius: 999px; box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.18 ); } /* * 🔴 Tabuľka sa na mobile NEZALAMUJE, roluje sa vodorovne. Zalomená tabuľka * porovnanie zničí — stĺpce prestanú byť vedľa seba, a to je celý jej zmysel. */ .bwoo-compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .bwoo-compare-table { inline-size: 100%; border-collapse: collapse; min-inline-size: 32rem; } .bwoo-compare-table th, .bwoo-compare-table td { padding: 0.7rem 0.9rem; text-align: start; vertical-align: top; border-block-end: 1px solid var( --wp--preset--color--contrast-three, #E5E7EB ); } .bwoo-compare-table thead th { vertical-align: bottom; } /* * 🔴 ĽAVÝ STĹPEC S NÁZVAMI RIADKOV JE PRILEPENÝ. Pri štyroch produktoch sa * tabuľka roluje vodorovne a bez prilepeného stĺpca človek po druhom posune * nevie, na čo sa vlastne pozerá. Toto je podmienka toho, aby tabuľka mohla * byť aj v modálnom okne (Brani 28. 7., predloha). */ .bwoo-compare-table tbody th[scope="row"] { position: sticky; inset-inline-start: 0; z-index: 1; inline-size: 9.5rem; min-inline-size: 9.5rem; background: var( --wp--preset--color--base, #fff ); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var( --wp--preset--color--contrast-two, #4B5563 ); } .bwoo-compare-media { position: relative; display: inline-block; } .bwoo-compare-table img { inline-size: 150px; block-size: auto; border-radius: 10px; display: block; } .bwoo-compare-media .bwoo-wishlist-btn { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; background: var( --wp--preset--color--base, #fff ); /* 🔴 Pilulka a ikona v nej patria k sebe — pár patrí do jedného pravidla, inak sa pri prvej úprave rozídu. Ikona kreslí `currentColor`. */ color: var( --wp--preset--color--contrast-three, #6B7280 ); border-radius: 999px; box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.18 ); } .bwoo-compare-name { display: block; font-weight: 700; text-decoration: none; color: inherit; } .bwoo-compare-name:hover { text-decoration: underline; } .bwoo-compare-row--cart .button, .bwoo-compare-row--cart .add_to_cart_button { inline-size: 100%; text-align: center; } .bwoo-compare-row--excerpt td { max-inline-size: 22rem; } /* Odobratie stĺpca — text, nie holý krížik (krížik nepovie, čo zmizne). */ .bwoo-compare-btn--remove { display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: 44px; padding: 0 0.25rem; border: 0; background: none; cursor: pointer; color: var( --wp--preset--color--contrast-two, #4B5563 ); font-size: 0.9rem; } .bwoo-compare-btn--remove:hover { color: var( --wp--preset--color--error, #D10020 ); } .bwoo-compare-btn__x { font-size: 1.2rem; line-height: 1; } /* * Riadok, kde majú všetky produkty to isté, sa stlmí — rozdiel je to, prečo * zákazník porovnáva. Stlmenie je JEMNÉ a nikdy nejde pod čitateľnosť. */ .bwoo-compare-row--same th, .bwoo-compare-row--same td { color: var( --wp--preset--color--contrast-two, #374151 ); } .bwoo-compare-row--differs th { font-weight: 600; } .bwoo-compare-dash { color: var( --wp--preset--color--contrast-three, #6B7280 ); } /* ══ BWOO COMPARE ▲ ════════════════════════════════════════════════════════ */ /* ══ BWOO QUICKVIEW ▼ ══════════════════════════════════════════════════════ * Rýchly náhľad — oko na karte a modál. */ .bwoo-quickview-btn { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 44px; /* dotykový cieľ, WCAG 2.5.5 */ min-block-size: 44px; padding: 0; background: none; border: 0; cursor: pointer; color: var( --wp--preset--color--contrast-three, #6B7280 ); transition: color 0.15s ease; } .bwoo-quickview-btn:hover { color: var( --wp--preset--color--accent, #7C3AED ); } .bwoo-quickview-btn:focus-visible { outline: 2px solid var( --wp--preset--color--accent, #7C3AED ); outline-offset: 2px; border-radius: 8px; } .bwoo-quickview-btn__icon { inline-size: 22px; block-size: 22px; background-color: currentColor; -webkit-mask: var( --bwoo-eye ) center / contain no-repeat; mask: var( --bwoo-eye ) center / contain no-repeat; --bwoo-eye: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5c-5 0-9 4.5-9 7s4 7 9 7 9-4.5 9-7-4-7-9-7z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E" ); } /* 🔴 Tretia ikona v rade — srdce 4 px, porovnanie 52 px, oko 100 px. */ .bwoo-quickview-btn--card { position: absolute; inset-block-start: 4px; inset-inline-start: 100px; z-index: 2; background: var( --wp--preset--color--base, #fff ); /* 🔴 Pilulka a ikona v nej patria k sebe — pár patrí do jedného pravidla, inak sa pri prvej úprave rozídu. Ikona kreslí `currentColor`. */ color: var( --wp--preset--color--contrast-three, #6B7280 ); border-radius: 999px; box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.18 ); } /* ── Modál ─────────────────────────────────────────────────────────────── */ .bwoo-quickview { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 1rem; } .bwoo-quickview[hidden] { display: none; } .bwoo-quickview__overlay { position: absolute; inset: 0; background: rgba( 0, 0, 0, 0.55 ); } .bwoo-quickview__dialog { position: relative; inline-size: min( 900px, 100% ); max-block-size: 90vh; overflow: auto; display: grid; gap: 1.5rem; grid-template-columns: 1fr; padding: 1.5rem; border-radius: 14px; background: var( --wp--preset--color--base, #fff ); color: var( --wp--preset--color--contrast, #1F2937 ); } @media ( min-width: 782px ) { .bwoo-quickview__dialog { grid-template-columns: 1fr 1fr; } } .bwoo-quickview__close { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; min-inline-size: 44px; min-block-size: 44px; font-size: 1.5rem; line-height: 1; background: none; border: 0; cursor: pointer; color: inherit; border-radius: 999px; } .bwoo-quickview__close:focus-visible { outline: 2px solid var( --wp--preset--color--accent, #7C3AED ); outline-offset: 2px; } .bwoo-quickview__body { display: contents; /* deti idú priamo do gridu dialógu */ } .bwoo-quickview__media img { inline-size: 100%; block-size: auto; border-radius: 10px; display: block; } .bwoo-quickview__title { margin-block: 0 0.5rem; } .bwoo-quickview__price { font-size: 1.25rem; font-weight: 600; margin-block-end: 0.75rem; } /* * 🔴 Množstvo · Pridať do košíka · srdce · porovnanie — VŠETKO V JEDNOM RADE. * Brani 28. 7.: „ak je množstvo výber, vedľa bude pridať do košíka a vedľa * toho ikony srdiečko a porovnanie." * * `flex-wrap: wrap` je poistka, nie ozdoba: na úzkom mobile sa rad zalomí * namiesto toho, aby pretiekol z okna. Zvislé zarovnanie na `center`, lebo * pole množstva a tlačidlo majú rôznu výšku. */ .bwoo-quickview__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-start: 1rem; } .bwoo-quickview__actions { display: flex; align-items: center; gap: 0.25rem; } /* * Woo formulár do košíka sa v rade správa ako riadok. * 🔴 `:not(.variations_form)` je povinné — variabilný produkt renderuje * TABUĽKU variantov a tú by flex rozhodil na jeden nečitateľný pás. */ .bwoo-quickview__cart form.cart:not( .variations_form ) { display: flex; align-items: center; gap: 0.5rem; margin: 0; } .bwoo-quickview__cart .quantity { margin: 0; } .bwoo-quickview__cart form.cart.variations_form { margin: 0; } .bwoo-quickview__more { margin-block-start: 1rem; } .bwoo-quickview__loading { grid-column: 1 / -1; } /* Pozadie sa pri otvorenom okne neroluje — inak sa pod modálom „stratí" stránka. */ html.bwoo-quickview-open { overflow: hidden; } /* ══ BWOO QUICKVIEW ▲ ══════════════════════════════════════════════════════ */ /* ══ BWOO WISHLIST — nákupný riadok v zozname ▼ ═════════════════════════════ */ .bwoo-wishlist-item__buy { display: flex; align-items: center; gap: 0.5rem; /* * 🔴 Zalamovanie JE zapnuté, ale riadi ho `order` nižšie: srdce ostáva * vedľa tlačidla (order 0) a na druhý riadok ide len odkaz „Zobraziť * košík", ktorý Woo dopíše po pridaní. Bez toho spadlo srdce pod tlačidlo * (namerané na it2 28. 7.). */ flex-wrap: wrap; justify-content: flex-end; } .bwoo-wishlist-item__buy .added_to_cart { flex-basis: 100%; order: 10; text-align: end; font-size: 0.9em; } .bwoo-wishlist-item__title { /* * 🔴 `break-word`, NIE `anywhere`. Pri `anywhere` je najmenšia možná šírka * jeden znak, mriežka stĺpec stlačí a názov sa láme po písmenách („Faucib * us Interdu m" — namerané na it2). `break-word` láme až dlhé slovo. */ overflow-wrap: break-word; } .bwoo-wishlist-qty { display: inline-flex; align-items: center; border: 1px solid var( --wp--preset--color--contrast-three, #E5E7EB ); border-radius: 10px; overflow: hidden; } .bwoo-qty-btn { /* 🔴 44 px dotykový cieľ aj tu — mínus a plus sú malé znaky, plocha nie. */ min-inline-size: 44px; min-block-size: 44px; border: 0; background: none; cursor: pointer; font-size: 1.1rem; line-height: 1; color: inherit; } .bwoo-qty-btn:focus-visible { outline: 2px solid var( --wp--preset--color--accent, #7C3AED ); outline-offset: -2px; } .bwoo-qty-input { inline-size: 3rem; min-block-size: 44px; text-align: center; border: 0; background: none; /* 🔴 Šípky natívneho `number` v úzkom poli prekryjú číslo. */ -moz-appearance: textfield; appearance: textfield; } .bwoo-qty-input::-webkit-outer-spin-button, .bwoo-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .bwoo-wishlist-item__buy .add_to_cart_button, .bwoo-wishlist-item__buy .button { margin: 0; } @media ( max-width: 600px ) { /* Na mobile pod seba: názov s obrázkom, cena, potom nákupný riadok cez šírku. */ .bwoo-wishlist-item { grid-template-columns: 1fr; } .bwoo-wishlist-item__buy { inline-size: 100%; flex-wrap: wrap; } } /* ══ BWOO COMPARE — modál z hlavičky ▼ ══════════════════════════════════════ * Brani 28. 7.: ikona v hlavičke nemá odviesť preč z obchodu. * * 🔴 Zmena oproti prvej verzii: v okne je CELÁ tabuľka, nie rozcestník. Bál som * sa, že štyri stĺpce v okne sa nedajú čítať — Brani poslal predlohu a mal * pravdu. Čitateľnosť drží prilepený ľavý stĺpec s názvami riadkov, vodorovné * rolovanie a strop 4 produktov. */ .bwoo-compare-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: flex-start; justify-content: center; padding: 4rem 1rem 1rem; } .bwoo-compare-modal[hidden] { display: none; } .bwoo-compare-modal__overlay { position: absolute; inset: 0; background: rgba( 0, 0, 0, 0.55 ); } .bwoo-compare-modal__dialog { position: relative; /* 🔴 Tabuľka pre 4 produkty potrebuje šírku; na užšom okne sa roluje vodorovne. */ inline-size: min( 1160px, 100% ); max-block-size: 85vh; overflow: auto; border-radius: 14px; background: var( --wp--preset--color--base, #fff ); color: var( --wp--preset--color--contrast, #1F2937 ); } .bwoo-compare-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-block-end: 1px solid var( --wp--preset--color--contrast-three, #E5E7EB ); } .bwoo-compare-modal__title { margin: 0; font-size: 1.15rem; } .bwoo-compare-modal__close { min-inline-size: 44px; min-block-size: 44px; border: 0; background: none; cursor: pointer; font-size: 1.5rem; line-height: 1; color: inherit; border-radius: 999px; } .bwoo-compare-modal__close:focus-visible { outline: 2px solid var( --wp--preset--color--accent, #7C3AED ); outline-offset: 2px; } .bwoo-compare-modal__body { padding: 1.25rem; } .bwoo-compare-modal__empty { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem; border-radius: 10px; background: var( --wp--preset--color--surface, #F9FAFB ); color: var( --wp--preset--color--contrast, #1F2937 ); } .bwoo-compare-modal__empty p { margin: 0; } .bwoo-compare-modal__list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.75rem; } .bwoo-compare-modal__item { display: flex; align-items: center; gap: 0.75rem; padding-block-end: 0.75rem; border-block-end: 1px solid var( --wp--preset--color--contrast-three, #E5E7EB ); } .bwoo-compare-modal__item a { display: flex; align-items: center; gap: 0.75rem; flex: 1 1 auto; min-inline-size: 0; text-decoration: none; color: inherit; } .bwoo-compare-modal__item img { inline-size: 56px; block-size: auto; border-radius: 8px; } .bwoo-compare-modal__price { white-space: nowrap; } html.bwoo-compare-open { overflow: hidden; } /* ══ BWOO COMPARE modál ▲ ══════════════════════════════════════════════════ */ /* ══ BWOO SHARE ▼ ══════════════════════════════════════════════════════════ * Zdieľanie produktu. Modul je PREDVOLENE VYPNUTÝ (Brani 28. 7.: „nech to nie * je povinné"). * * 🔴 Ikony sú masky s `currentColor` — farbu dedia od textu, takže tmavý režim * aj hover fungujú samy a nepotrebujeme druhú sadu obrázkov. Značkové farby * sietí zámerne NEPOUŽÍVAME: osem farebných škvŕn pod produktom kričí viac než * tlačidlo Do košíka. */ .bwoo-share { margin-block: 1.5rem; } .bwoo-share__title { margin: 0 0 0.6rem; font-size: 1rem; font-weight: 700; } .bwoo-share__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; } .bwoo-share__link { display: inline-flex; align-items: center; justify-content: center; /* 🔴 44 px dotykový cieľ — ikona je malá, plocha nesmie byť. */ min-inline-size: 44px; min-block-size: 44px; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: none; color: var( --wp--preset--color--contrast-two, #4B5563 ); border-radius: 10px; transition: color 0.15s ease, background-color 0.15s ease; } .bwoo-share__link:hover { color: var( --wp--preset--color--accent-strong, #5B21B6 ); background-color: var( --wp--preset--color--surface, #F3F4F6 ); } .bwoo-share__link:focus-visible { outline: 2px solid var( --wp--preset--color--accent, #7C3AED ); outline-offset: 2px; } .bwoo-share__icon { inline-size: 22px; block-size: 22px; background-color: currentColor; -webkit-mask: var( --bwoo-share-ico ) center / contain no-repeat; mask: var( --bwoo-share-ico ) center / contain no-repeat; } /* Potvrdenie po skopírovaní — bez neho tlačidlo „nič neurobilo". */ .bwoo-share__done { margin-inline-start: 0.4rem; font-size: 0.85rem; } .bwoo-share__link--copy.is-copied { color: var( --wp--preset--color--success, #15803D ); } .bwoo-share__link--facebook .bwoo-share__icon { --bwoo-share-ico: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E" ); } .bwoo-share__link--x .bwoo-share__icon { --bwoo-share-ico: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l16 16M20 4L4 20'/%3E%3C/svg%3E" ); } .bwoo-share__link--pinterest .bwoo-share__icon { --bwoo-share-ico: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8c-2 0-3 1.3-3 3 0 .9.4 1.6 1 2l-.8 3.4'/%3E%3Cpath d='M12 8c2 0 3 1.2 3 3 0 2.2-1.3 3.6-2.8 3.6-.7 0-1.3-.4-1.5-.9'/%3E%3C/svg%3E" ); } .bwoo-share__link--linkedin .bwoo-share__icon { --bwoo-share-ico: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M8 11v5M8 8h.01M12 16v-3a2 2 0 0 1 4 0v3'/%3E%3C/svg%3E" ); } .bwoo-share__link--telegram .bwoo-share__icon { --bwoo-share-ico: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4L3 11l6 2 2 6z'/%3E%3Cpath d='M9 13l12-9'/%3E%3C/svg%3E" ); } .bwoo-share__link--whatsapp .bwoo-share__icon { --bwoo-share-ico: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 1-13.3 7.9L3 21l1.2-4.6A9 9 0 1 1 21 12z'/%3E%3Cpath d='M9 9c0 3 3 6 6 6 .8 0 1.5-.7 1.5-1.5L15 12l-1.5 1c-1-.4-2-1.4-2.5-2.5L12 9l-1.5-1.5C9.7 7.5 9 8.2 9 9z'/%3E%3C/svg%3E" ); } .bwoo-share__link--email .bwoo-share__icon { --bwoo-share-ico: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E" ); } .bwoo-share__link--copy .bwoo-share__icon { --bwoo-share-ico: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E" ); } /* ══ BWOO SHARE ▲ ══════════════════════════════════════════════════════════ */