/* ============================================= BOBOLUBI — DESIGN SYSTEM PrestaShop 9 Theme ============================================= */ /* ── RESET ── WAŻNE: bez margin/padding:0 na "*". Prawdziwy theme.css Hummingbirda (Bootstrap) trzyma WSZYSTKIE swoje reguły (.container, .row, itd.) w @layer bs-base — a w CSS Cascade Layers reguła SPOZA warstwy zawsze wygrywa z regułą W warstwie, niezależnie od specyficzności selektora. Zweryfikowane bezpośrednio w żywym CSS (śledzenie zagnieżdżenia @layer): .container{margin-left:auto;margin-right:auto} siedzi w @layer bs-base, więc nasz uniwersalny "* { margin:0 }" (poza warstwą) go nadpisywał — .container dostawał margin:0 zamiast auto = przyklejony do lewej krawędzi zamiast wyśrodkowany, na KAŻDEJ stronie poza główną (jedyną, która nie używa realnego .container). Bootstrapowy reboot i tak zeruje margin/padding na body/nagłówkach/listach we własnym zakresie (potwierdzone: body{margin:0} jest w jego CSS) — nawet w warstwie bije domyślny styl przeglądarki, więc nic nie wraca do brzydkich domyślnych odstępów bez tego "*". */ *, *::before, *::after { box-sizing: border-box; } img, svg { display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } /* ── DESIGN TOKENS ── */ :root { --bg: #FAF7F4; --bg2: #F0E9E0; --nude: #C4A882; --coff: #8B6E52; --dark: #3D2B1F; --txt: #2C1F16; --mid: #7A6558; --dim: #B0998C; --crm: #FEFCFA; --sale: #A84040; --ok: #3A7A4A; --sf: 'Cormorant', Georgia, serif; --ss: 'DM Sans', system-ui, sans-serif; --ease: cubic-bezier(.25, 0, 0, 1); } html { font-family: var(--ss); background: var(--bg); color: var(--txt); overflow-x: hidden; scroll-behavior: smooth; } /* Bootstrap (theme.css) ustawia body{background-color:var(--bs-body-bg)} (białe), co zasłania tło ustawione na niezależnie od kolejności ładowania CSS — trzeba nadpisać wprost na body, nie tylko na html. */ body { background: var(--bg); color: var(--txt); font-family: var(--ss); } /* ── PROMO BAR ── */ .bb-promobar { background: var(--dark); color: var(--nude); text-align: center; padding: 10px 20px; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; font-weight: 300; } /* ── HEADER ── POPRAWKA: wcześniej błędnie założyłem, że jest tu jakiś zewnętrzny #header z prawdziwego Hummingbirda i przeniosłem tam position:sticky. Sprawdzone bezpośrednio w templates/layouts/layout-full-width.tpl (TEN motyw ma WŁASNY, w pełni ręcznie budowany layout) — nie ma żadnego zewnętrznego

, #bb-header to JEDYNY, prawdziwy nagłówek na stronie. position:sticky wraca tutaj. */ #bb-header { position: sticky; top: 0; z-index: 300; background: rgba(250, 247, 244, .95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: box-shadow .35s; } #bb-header.scrolled { box-shadow: 0 1px 28px rgba(61,43,31,.09); } .bb-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 52px; height: 70px; max-width: 1560px; margin: 0 auto; } /* ── LOGO ── */ .bb-logo { font-family: var(--sf); font-size: 26px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--dark); text-decoration: none; display: flex; align-items: center; gap: 12px; } .bb-logo-img { max-height: 42px; width: auto; display: block; } .bb-logo-txt { display: block; } /* ── NAV ── */ .bb-nav { display: flex; gap: 34px; align-items: center; } .bb-nav a { font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--mid); transition: color .2s; } .bb-nav a:hover { color: var(--dark); } /* ── HEADER RIGHT ICONS ── */ .bb-header-r { display: flex; align-items: center; gap: 18px; justify-content: flex-end; } .bb-ico { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--txt); transition: color .2s; position: relative; } .bb-ico:hover { color: var(--coff); } .bb-cart-badge { position: absolute; top: -4px; right: -5px; width: 13px; height: 13px; background: var(--coff); color: var(--crm); border-radius: 50%; font-size: 7.5px; display: flex; align-items: center; justify-content: center; font-weight: 600; } /* ── SUBNAV ── */ /* border-top usunięty — .bb-subnav (prawdziwe menu ps_mainmenu) renderuje się wewnątrz .bb-nav w tym samym rzędzie co logo (header.tpl: .bb-nav | logo | .bb-header-r), nie jako osobny pełnoszerokościowy pasek pod nagłówkiem. Border-top wisiał więc jako krótka, przypadkowa kreska nad linkami menu w środku rzędu nagłówka. Wersja mobilna już miała `.bb-mobile-menu .bb-subnav { border-top: none }` — ten sam powód. */ .bb-subnav { display: flex; justify-content: center; } .bb-subnav a { padding: 11px 22px; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--mid); position: relative; transition: color .2s; } .bb-subnav a::after { content: ''; position: absolute; bottom: 0; left: 50%; right: 50%; height: 1.5px; background: var(--dark); transition: left .25s, right .25s; } .bb-subnav a:hover, .bb-subnav a.current { color: var(--dark); } .bb-subnav a:hover::after, .bb-subnav a.current::after { left: 14px; right: 14px; } .bb-subnav a.sale { color: var(--sale); } .bb-subnav a.sale::after { background: var(--sale); } /* ── MARQUEE ── */ .bb-marquee-wrap { overflow: hidden; border-top: 1px solid rgba(61,43,31,.08); border-bottom: 1px solid rgba(61,43,31,.08); padding: 13px 0; background: var(--bg); } .bb-marquee { display: flex; width: max-content; animation: bbmq 30s linear infinite; } .bb-marquee span { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--dim); padding: 0 36px; white-space: nowrap; } @keyframes bbmq { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── SECTION LABELS ── */ .bb-eyebrow { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--coff); font-weight: 500; margin-bottom: 10px; } .bb-title { font-family: var(--sf); font-size: clamp(28px, 2.9vw, 46px); font-weight: 700; color: var(--dark); line-height: 1.1; } .bb-title em { font-style: italic; font-weight: 400; } /* ── HERO ── */ .bb-hero { height: 100vh; min-height: 640px; max-height: 960px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* Cel przycisku "Odkryj kolekcję" (index.tpl, scrollIntoView do .ps-featuredproducts) — offset o wysokość sticky nagłówka, tym samym mechanizmem co reszta strony (--scroll-padding-top ustawiane przez prawdziwy JS rdzenia PS na ). */ .ps-featuredproducts { scroll-margin-top: var(--scroll-padding-top, 100px); } /* Pasek światła przesuwający się po hero — czysto dekoracyjny, nad tłem/ overlayem (z-index:1), ale pod tekstem (.bb-hero-content ma z-index:2). .bb-hero ma overflow:hidden, więc pasek jest naturalnie przycięty do granic sekcji. */ .bb-hero::after { content: ''; position: absolute; top: 0; left: -60%; width: 35%; height: 100%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); z-index: 1; pointer-events: none; animation: bb-hero-shine 8s ease-in-out 2.2s infinite; } @keyframes bb-hero-shine { 0% { left: -60%; } 25% { left: 130%; } 100% { left: 130%; } } @media (prefers-reduced-motion: reduce) { .bb-hero::after { animation: none; display: none; } } .bb-hero-bg { position: absolute; inset: -20% 0; will-change: transform; /* Domyślne ciepłe tło (z oryginalnego designu) — widoczne dopóki hook displayHomeTab nie dostanie prawdziwego zdjęcia/slidera z PS Admin. */ background: repeating-linear-gradient(118deg, #E4D8C6 0 26px, #DBD0BD 26px 52px), linear-gradient(135deg, #E8DDCC 0%, #D4BFA4 60%, #B8956E 100%); background-blend-mode: overlay; } .bb-hero-bg img { width: 100%; height: 100%; object-fit: cover; } .bb-hero-overlay { position: absolute; inset: 0; background: linear-gradient(158deg, rgba(61,43,31,.04) 0%, rgba(61,43,31,.40) 100%); } .bb-hero-content { position: relative; z-index: 2; text-align: center; color: var(--crm); padding: 0 24px; max-width: 780px; } .bb-hero-ey { font-size: 10px; letter-spacing: .4em; text-transform: uppercase; color: var(--nude); font-weight: 400; margin-bottom: 22px; opacity: 0; transform: translateY(14px); animation: bbup .9s .45s var(--ease) forwards; } .bb-hero-h1 { font-family: var(--sf); font-size: clamp(52px, 7vw, 92px); font-weight: 700; line-height: 1.05; margin-bottom: 28px; opacity: 0; transform: translateY(22px); animation: bbup 1s .68s var(--ease) forwards; } .bb-hero-h1 span { display: block; font-style: italic; font-weight: 400; } .bb-hero-desc { font-size: 14px; font-weight: 300; letter-spacing: .07em; color: rgba(254,252,250,.78); margin-bottom: 44px; opacity: 0; transform: translateY(12px); animation: bbup .85s .92s var(--ease) forwards; } .bb-hero-acts { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; opacity: 0; animation: bbup .85s 1.12s var(--ease) forwards; } @keyframes bbup { to { opacity: 1; transform: translateY(0); } } /* ── BUTTONS ── */ .bb-btn-solid { display: inline-flex; align-items: center; gap: 8px; padding: 14px 38px; background: var(--crm); color: var(--dark); font-family: var(--ss); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; border: none; transition: background .3s; cursor: pointer; } .bb-btn-solid:hover { background: var(--nude); } .bb-btn-dark { display: inline-flex; align-items: center; gap: 12px; padding: 15px 40px; background: var(--dark); color: var(--nude); font-family: var(--ss); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; border: none; transition: background .3s, color .3s; cursor: pointer; } .bb-btn-dark:hover { background: var(--coff); color: var(--crm); } .bb-btn-out { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 40px; background: none; border: 1px solid rgba(61,43,31,.25); color: var(--mid); font-family: var(--ss); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; transition: border-color .2s, color .2s; cursor: pointer; } .bb-btn-out:hover { border-color: var(--dark); color: var(--dark); } .bb-btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 13px 38px; border: 1px solid rgba(254,252,250,.45); color: var(--crm); font-family: var(--ss); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; background: none; transition: background .3s, border-color .3s; cursor: pointer; } .bb-btn-ghost:hover { background: rgba(254,252,250,.12); border-color: rgba(254,252,250,.8); } /* ── PRODUCT CARD (miniature) ── */ .bb-pc { cursor: pointer; } .bb-pimg { aspect-ratio: 3/4; position: relative; overflow: hidden; background: var(--bg2); margin-bottom: 14px; padding: 26px; } /* Kolorowe ukośne paski jako ramka wokół zdjęcia produktu — znak firmowy designu. DOKŁADNIE odtworzone z prawdziwych wzorów kart produktów w Bobolubi-HTML/Kategoria.html:378-435 (SVG ) — to jest bezpośredni wzorzec tego samego komponentu (karta produktu w listingu), nie kafelki kategorii ze strony głównej. Kolory, kąty i szerokości pasa (= pattern width / 2) 1:1 ze źródła — w tym p4/c4 z realnym kątem UJEMNYM (-20°, w lewo), więc "lewo" faktycznie jest w źródle, tylko we właściwym miejscu. */ .bb-pimg-c1 { background: repeating-linear-gradient(45deg, #EDE4D8 0 11px, #E4D9C8 11px 22px); } .bb-pimg-c2 { background: repeating-linear-gradient(20deg, #E8CCCE 0 14px, #DFBFC2 14px 28px); } .bb-pimg-c3 { background: repeating-linear-gradient(55deg, #F0E8DC 0 9px, #E8DFCE 9px 18px); } .bb-pimg-c4 { background: repeating-linear-gradient(-20deg, #E6DDD0 0 15px, #DDD4C4 15px 30px); } .bb-pimg-c5 { background: repeating-linear-gradient(35deg, #D8E0E8 0 12px, #CDD6E0 12px 24px); } .bb-pimg-c6 { background: repeating-linear-gradient(10deg, #E8E0D4 0 10px, #DFD6C8 10px 20px); } /* c7-c11: te same kolory/szerokości co c1,c2,c3,c5,c6, odbite w lewo (ujemny kąt) — na wyraźną prośbę o więcej kombinacji kąt+szerokość+ kolor. c4 już ma realny lewy kąt ze źródła, więc tu dodajemy resztę kolorów w wersji lewoskrętnej dla pełnej różnorodności (6 w prawo/lewo łącznie z c4, prawie równa mieszanka kierunków). */ .bb-pimg-c7 { background: repeating-linear-gradient(-45deg, #EDE4D8 0 11px, #E4D9C8 11px 22px); } .bb-pimg-c8 { background: repeating-linear-gradient(-20deg, #E8CCCE 0 14px, #DFBFC2 14px 28px); } .bb-pimg-c9 { background: repeating-linear-gradient(-55deg, #F0E8DC 0 9px, #E8DFCE 9px 18px); } .bb-pimg-c10 { background: repeating-linear-gradient(-35deg, #D8E0E8 0 12px, #CDD6E0 12px 24px); } .bb-pimg-c11 { background: repeating-linear-gradient(-10deg, #E8E0D4 0 10px, #DFD6C8 10px 20px); } /* c12-c18: NOWE kolory dodane obok istniejących (nie nadpisujące) — paleta Ivory/Peach/Latte/Stone/Lavender/Mint/Pearl Grey, na wyraźną prośbę o rozszerzenie puli, nie podmianę. */ .bb-pimg-c12 { background: repeating-linear-gradient(25deg, #FAF7F4 0 13px, #F1ECE6 13px 26px); } .bb-pimg-c13 { background: repeating-linear-gradient(-15deg, #EAF4F0 0 11px, #DCEBE4 11px 22px); } .bb-pimg-c14 { background: repeating-linear-gradient(40deg, #F7E7DE 0 10px, #EDD7CC 10px 20px); } .bb-pimg-c15 { background: repeating-linear-gradient(-30deg, #EADFD2 0 14px, #DDD0C1 14px 28px); } .bb-pimg-c16 { background: repeating-linear-gradient(15deg, #EEEAF6 0 12px, #E1DCF0 12px 24px); } .bb-pimg-c17 { background: repeating-linear-gradient(-40deg, #F1F1F1 0 9px, #E6E6E6 9px 18px); } .bb-pimg-c18 { background: repeating-linear-gradient(30deg, #ECE8E4 0 15px, #DFD9D2 15px 30px); } .bb-pimg img, .bb-pimg .bb-pimg-placeholder { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .bb-pc:hover .bb-pimg img { transform: scale(1.045); } .bb-pbadge { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--dark); color: var(--nude); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; } .bb-pbadge.sale { background: var(--sale); } .bb-pwish { position: absolute; top: 10px; right: 12px; z-index: 2; width: 30px; height: 30px; background: rgba(254,252,250,.88); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s; } .bb-pc:hover .bb-pwish { opacity: 1; } .bb-pqck { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; background: rgba(61,43,31,.88); color: var(--nude); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; text-align: center; padding: 12px; transform: translateY(100%); transition: transform .3s var(--ease); border: none; width: 100%; cursor: pointer; } .bb-pc:hover .bb-pqck { transform: translateY(0); } .bb-pname { font-size: 13px; font-weight: 400; margin-bottom: 3px; } .bb-pmeta { font-size: 11px; color: var(--dim); font-weight: 300; margin-bottom: 5px; } .bb-pprice { font-size: 14px; font-weight: 500; color: var(--dark); } .bb-pprice s { font-size: 12px; font-weight: 300; color: var(--dim); margin-left: 5px; } .bb-omnibus { font-size: 10px; color: var(--dim); margin-top: 2px; } /* ── PRODUCT GRID ── */ .bb-pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } /* ── CATEGORIES GRID ── */ .bb-cgrid { display: grid; grid-template-columns: 1.45fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: 600px; } .bb-cc { position: relative; overflow: hidden; cursor: pointer; } .bb-cc:first-child { grid-row: 1/3; } .bb-cc-bg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .8s var(--ease); } .bb-cc-bg img { width: 100%; height: 100%; object-fit: cover; } .bb-cc:hover .bb-cc-bg { transform: scale(1.055); } .bb-ccov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(30,16,8,.7) 0%, transparent 55%); } .bb-ccinfo { position: absolute; bottom: 0; left: 0; right: 0; padding: 22px 26px; color: var(--crm); } .bb-cce { font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: var(--nude); margin-bottom: 4px; } .bb-ccn { font-family: var(--sf); font-size: 22px; font-weight: 700; margin-bottom: 10px; line-height: 1.1; } .bb-cc:first-child .bb-ccn { font-size: 32px; } .bb-cca { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(254,252,250,.6); display: flex; align-items: center; gap: 6px; transition: gap .25s, color .25s; } .bb-cc:hover .bb-cca { gap: 12px; color: var(--crm); } /* ── SCROLL REVEAL ── */ .bb-sr { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .bb-sr.bb-in { opacity: 1; transform: none; } .bb-d1 { transition-delay: .08s; } .bb-d2 { transition-delay: .16s; } .bb-d3 { transition-delay: .24s; } .bb-d4 { transition-delay: .32s; } /* Moduły produktowe strony głównej (ps_featuredproducts/ps_newproducts/ ps_bestsellers) — bazowy Hummingbird nie ma dla nich ŻADNEGO marginesu/ paddingu góra-dół (sprawdzone w theme.css: .module-products__buttons ma tylko margin-block-start:2rem NAD przyciskiem, zero miejsca POD nim), więc sekcje stykały się bezpośrednio z sąsiednimi — zgłoszone jako "brak oddechu" między "Wszystkie bestsellery" a kolejną sekcją. */ .ps-featuredproducts, .ps-newproducts, .ps-bestsellers { padding-block: 70px; } /* ── KATEGORIE (bb_categoryshowcase) — realne kategorie z PS, ze zdjęciem ── */ .bb-catshow { padding: 70px 52px; text-align: center; } .bb-catshow .bb-eyebrow, .bb-catshow .bb-title { text-align: center; } .bb-catshow .bb-eyebrow { display: block; } /* Liczba kolumn sterowana z panelu modułu (--bb-catshow-cols, inline style w szablonie) — na telefonie zawsze 1, niezależnie od ustawienia. */ .bb-catshow-grid { --bb-catshow-cols: 3; display: grid; grid-template-columns: repeat(var(--bb-catshow-cols), 1fr); gap: 24px; max-width: 1100px; margin: 40px auto 0; } .bb-catshow-item { display: flex; flex-direction: column; gap: 16px; } .bb-catshow-img { aspect-ratio: 3/4; border-radius: 4px; overflow: hidden; background-size: cover; background-position: center; background-color: var(--bg2); transition: transform .5s var(--ease); } .bb-catshow-item:hover .bb-catshow-img { transform: scale(1.03); } .bb-catshow-name { color: var(--dark); font-family: var(--sf); font-size: 18px; font-weight: 700; text-align: center; } @media (max-width: 640px) { .bb-catshow { padding: 50px 24px; } .bb-catshow-grid { grid-template-columns: 1fr; max-width: 360px; } } /* ── ABOUT SECTION ── */ .bb-about { padding: 116px 52px; background: var(--bg2); } .bb-about-in { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center; max-width: 1240px; margin: 0 auto; } .bb-aimg { aspect-ratio: 4/5; overflow: hidden; } .bb-aimg img { width: 100%; height: 100%; object-fit: cover; } .bb-acopy { font-size: 16px; line-height: 1.8; color: var(--mid); font-weight: 300; margin: 22px 0 38px; text-wrap: pretty; } /* ── FOOTER ── */ /* padding-top wyzerowany — .bb-newsletter ma teraz to samo ciemne tło co stopka (patrz .bb-newsletter), więc oba paddingi się sumowały (72px+30px = 102px pustki nad tekstem newslettera). Boczny/dolny padding zostaje dla .bb-footer-grid poniżej newslettera. */ .bb-footer { background: var(--dark); padding: 0 52px 36px; } .bb-footer-grid { display: grid; /* 5 bloków realnie w tym gridzie: kolumna logo/tagline (nasza, w footer.tpl) + 4 z hooka displayFooter — ps_linklist SAM renderuje 2 bloki (Produkty, Nasza firma) z jednego wywołania (foreach $linkBlocks), plus ps_customeraccountlinks (Twoje konto) i ps_contactinfo (Informacja o sklepie) = 4. Przy 4 kolumnach 5. blok spadał do nowego wiersza (auto-flow) — stąd "Informacja o sklepie" niżej niż reszta. */ grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 48px; margin-top: 34px; margin-bottom: 24px; max-width: 1560px; margin-left: auto; margin-right: auto; } .bb-flogo { font-family: var(--sf); font-size: 19px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--nude); display: block; margin-bottom: 18px; } .bb-ftag { font-size: 13px; font-weight: 300; line-height: 1.72; max-width: 240px; color: rgba(254,252,250,.38); } .bb-fct { font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--nude); font-weight: 500; margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; } /* Przywrócony natywny akordeon Bootstrapa (data-bs-toggle="collapse") na mobile — usunięty wcześniej przy przepisywaniu na .bb-fct/.bb-ful, przez co stopka na telefonie była zawsze w pełni rozwinięta. Baza .collapse/ .d-md-none/.stretched-link jest już w theme.css (Bootstrap), więc JS nie jest w ogóle potrzebny — tylko przywrócone klasy + ten override na desktop (Bootstrap chowa .collapse wszędzie, na desktopie trzeba wymusić z powrotem display, tak jak oryginał robi to dla .footer-block__content). */ .bb-fct-toggle { background: none; border: none; padding: 0; margin: 0; color: inherit; cursor: pointer; line-height: 1; flex-shrink: 0; } .bb-fct-toggle .material-icons { font-size: 16px; transition: transform .25s var(--ease); } .bb-fct-toggle[aria-expanded="true"] .material-icons { transform: rotate(180deg); } @media (min-width: 768px) { .bb-ful.collapse { display: flex; } } .bb-ful { list-style: none; display: flex; flex-direction: column; gap: 6px; } .bb-ful a { font-size: 13px; font-weight: 300; color: rgba(254,252,250,.42); transition: color .2s; } .bb-ful a:hover { color: var(--nude); } .bb-ful-address { font-style: normal; font-size: 13px; font-weight: 300; line-height: 1.6; color: rgba(254,252,250,.42); } .bb-fbot { border-top: 1px solid rgba(254,252,250,.09); padding-top: 16px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 300; letter-spacing: .07em; color: rgba(254,252,250,.32); max-width: 1560px; margin: 0 auto; } /* ── BREADCRUMB ── */ .bb-bc { padding: 18px 52px; font-size: 11px; color: var(--dim); letter-spacing: .07em; max-width: 1560px; margin: 0 auto; display: flex; gap: 8px; align-items: center; } .bb-bc a { color: var(--dim); transition: color .2s; } .bb-bc a:hover { color: var(--dark); } /* ── FORMS ── */ .bb-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; } .bb-field label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--mid); } .bb-field input, .bb-field select, .bb-field textarea { border: 1px solid rgba(61,43,31,.2); background: var(--crm); padding: 11px 14px; font-size: 13px; font-family: var(--ss); color: var(--txt); outline: none; transition: border-color .2s; } .bb-field input:focus, .bb-field select:focus, .bb-field textarea:focus { border-color: var(--dark); } /* ── PAGINATION ── */ .bb-pagi { display: flex; gap: 6px; justify-content: center; margin-top: 52px; } .bb-pagi a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(61,43,31,.2); font-size: 12px; color: var(--mid); transition: all .2s; } .bb-pagi a.current, .bb-pagi a:hover { background: var(--dark); color: var(--crm); border-color: var(--dark); } /* ── ALERTS / MESSAGES ── */ .bb-alert { padding: 14px 18px; margin-bottom: 18px; font-size: 13px; } .bb-alert-success { background: rgba(58,122,74,.1); color: var(--ok); border-left: 3px solid var(--ok); } .bb-alert-error { background: rgba(168,64,64,.1); color: var(--sale); border-left: 3px solid var(--sale); } .bb-alert-info { background: var(--bg2); color: var(--mid); border-left: 3px solid var(--nude); } /* ── CATEGORY PAGE ── */ .bb-cat-wrap { display: grid; grid-template-columns: 220px 1fr; max-width: 1560px; margin: 0 auto; padding: 0 52px 80px; } .bb-filters { padding: 32px 32px 0 0; border-right: 1px solid rgba(61,43,31,.08); } .bb-filter-sec { margin-bottom: 32px; } .bb-filter-lbl { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--dark); font-weight: 500; margin-bottom: 14px; } .bb-pgrid-wrap { padding: 32px 0 0 32px; } /* ── PRODUCT PAGE ── */ .bb-pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 1560px; margin: 0 auto; padding: 0 52px 80px; } .bb-gal { padding-right: 40px; } /* Paski (.bb-pimg-cN) zamiast płaskiego tła (--bg2) — te same co ramka kart produktów w listingu. Zdjęcie POZYCJONOWANE position:absolute (inline style w product.tpl, inset:26px) — DOKŁADNIE ten sam wzorzec co w miniaturze produktu, bo padding-na-rodzicu + width/height:100% na zwykłym blokowym (poprzednia wersja) nie liczyło się poprawnie z aspect-ratio na żywym serwerze — zostawiało dużą białą przestrzeń zamiast wypełniać ramkę. position:relative tutaj jest punktem odniesienia dla position:absolute zdjęcia. */ .bb-gal-main { aspect-ratio: 4/5; overflow: hidden; position: relative; margin-bottom: 10px; } /* Strzałki galerii — okrągłe, szklane (blur), niewidoczne dopóki nie najedziesz na zdjęcie (nowoczesny, dyskretny styl zamiast stałych ikonek), z płynnym przejściem. */ .bb-gal-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(254,252,250,.75); backdrop-filter: blur(6px); color: var(--dark); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .25s, background .2s, transform .2s; } .bb-gal-main:hover .bb-gal-arrow { opacity: 1; } .bb-gal-arrow:hover { background: var(--dark); color: var(--crm); } .bb-gal-prev { left: 14px; } .bb-gal-next { right: 14px; } @media (hover: none) { /* Na dotyku nie ma hover — strzałki muszą być zawsze widoczne, inaczej nikt by ich nigdy nie zobaczył na telefonie. */ .bb-gal-arrow { opacity: 1; } } .bb-gal-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .bb-thumb { aspect-ratio: 3/4; overflow: hidden; position: relative; cursor: pointer; opacity: .6; transition: opacity .2s; border: 1px solid transparent; } .bb-thumb.selected, .bb-thumb:hover { opacity: 1; border-color: var(--dark); } /* Sizes */ .bb-sz-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; } .bb-sz-btn { border: 1px solid rgba(61,43,31,.2); background: none; padding: 9px 14px; font-size: 11px; color: var(--mid); transition: all .2s; cursor: pointer; min-width: 52px; text-align: center; } .bb-sz-btn:hover, .bb-sz-btn.selected { background: var(--dark); color: var(--crm); border-color: var(--dark); } .bb-sz-btn.out-of-stock { opacity: .35; cursor: not-allowed; text-decoration: line-through; } /* Color swatches */ .bb-colors { display: flex; gap: 8px; margin-bottom: 20px; } .bb-swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: border-color .2s; } .bb-swatch.selected, .bb-swatch:hover { border-color: var(--dark); outline: 2px solid var(--bg); outline-offset: 2px; } /* Accordion */ .bb-acc-item { border-top: 1px solid rgba(61,43,31,.09); } .bb-acc-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; cursor: pointer; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--mid); background: none; border: none; width: 100%; text-align: left; } .bb-acc-head:hover { color: var(--dark); } .bb-acc-body { font-size: 13px; color: var(--mid); line-height: 1.8; padding-bottom: 16px; font-weight: 300; display: none; } .bb-acc-body.open { display: block; } /* ── CART PAGE ── */ .bb-cart-wrap { display: grid; grid-template-columns: 1fr 380px; gap: 48px; max-width: 1200px; margin: 0 auto; padding: 48px 52px 80px; } .bb-del-bar { background: var(--bg2); padding: 14px 18px; margin-bottom: 24px; } .bb-del-bar-prog { height: 3px; background: rgba(61,43,31,.12); border-radius: 2px; overflow: hidden; margin: 8px 0 6px; } .bb-del-bar-fill { height: 100%; background: var(--coff); border-radius: 2px; } .bb-order-summary { background: var(--crm); border: 1px solid rgba(61,43,31,.1); padding: 28px; position: sticky; top: 90px; } /* ── CHECKOUT ── */ .bb-chk-wrap { display: grid; grid-template-columns: 1fr 420px; gap: 48px; max-width: 1200px; margin: 0 auto; padding: 40px 52px 80px; } .bb-steps { display: flex; justify-content: center; align-items: center; padding: 20px 52px; border-bottom: 1px solid rgba(61,43,31,.08); } .bb-step { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); } .bb-step.current { color: var(--dark); } .bb-step.done { color: var(--ok); } .bb-step-num { width: 24px; height: 24px; border-radius: 50%; border: 1px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 500; } .bb-step.current .bb-step-num { background: var(--dark); border-color: var(--dark); color: var(--crm); } .bb-ssl-badge { display: flex; align-items: center; gap: 6px; justify-content: center; font-size: 11px; color: var(--dim); padding: 10px 52px 0; } .bb-step.done .bb-step-num { background: var(--ok); border-color: var(--ok); color: #fff; } .bb-step-div { width: 60px; height: 1px; background: rgba(61,43,31,.15); margin: 0 12px; } /* ── CMS / CONTACT ── */ .bb-cms-wrap { max-width: 860px; margin: 0 auto; padding: 60px 52px 100px; } .bb-cms-body { font-size: 15px; line-height: 1.9; color: var(--mid); font-weight: 300; } .bb-cms-body h2 { font-family: var(--sf); font-size: 28px; font-weight: 700; color: var(--dark); margin: 40px 0 16px; } .bb-cms-body h3 { font-family: var(--sf); font-size: 22px; font-weight: 700; color: var(--dark); margin: 28px 0 12px; } .bb-cms-body p { margin-bottom: 18px; } .bb-cms-body a { color: var(--coff); border-bottom: 1px solid currentColor; } .bb-cms-body ul { padding-left: 20px; margin-bottom: 18px; } .bb-cms-body li { margin-bottom: 6px; } /* ── ACCOUNT ── */ .bb-acc-wrap { display: grid; grid-template-columns: 240px 1fr; max-width: 1100px; margin: 0 auto; padding: 48px 52px 80px; } .bb-sidebar { border-right: 1px solid rgba(61,43,31,.08); padding-right: 32px; } /* ── customer/page.tpl (prawdziwy wrapper konta — dołącza account-menu.tpl i nagłówek strony automatycznie, sam nienadpisany, tylko kolory/fonty) ── */ .page-header { padding: 40px 24px 0; } .page-header h1 { font-family: var(--sf); font-size: clamp(28px,3.5vw,40px); color: var(--dark); } .page-content--customer { padding: 24px; font-family: var(--ss); color: var(--txt); } .account-menu__back { color: var(--coff); border-color: rgba(61,43,31,.2); } /* ── Historia zamówień (customer/history.tpl) — karty w stylu Konto.html ── */ .bb-ord-list { display: flex; flex-direction: column; gap: 16px; padding: 24px; } .bb-ord-card { border: 1px solid rgba(61,43,31,.1); padding: 20px 24px; background: var(--crm); } .bb-ord-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; } .bb-ord-no { font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--dark); } .bb-ord-date { font-size: 11px; color: var(--dim); margin-top: 2px; } .bb-ord-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; padding: 4px 10px; white-space: nowrap; } .bb-ord-card-bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(61,43,31,.08); } .bb-ord-total { font-size: 13px; color: var(--mid); } .bb-ord-total strong { color: var(--dark); font-size: 15px; } .bb-ord-actions { display: flex; gap: 8px; flex-wrap: wrap; } .bb-btn-sm { padding: 8px 16px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; border: none; cursor: pointer; transition: all .2s; } .bb-btn-dk-sm { background: var(--dark); color: var(--nude); } .bb-btn-dk-sm:hover { background: var(--coff); } .bb-btn-out-sm { background: none; border: 1px solid rgba(61,43,31,.2); color: var(--mid); } .bb-btn-out-sm:hover { border-color: var(--dark); color: var(--dark); } .bb-ord-empty { text-align: center; padding: 60px 24px; color: var(--mid); } .bb-ord-empty p { margin-bottom: 20px; } /* ── Formularz profilu (customer/_partials/customer-form.tpl) — realny komponent PS, tylko kolory/fonty jak przy formularzu logowania. ── */ #customer-form .btn-primary { background: var(--dark); border-color: var(--dark); color: var(--nude); } #customer-form .btn-primary:hover { background: var(--coff); border-color: var(--coff); } #customer-form label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--mid); } #customer-form .form-control { border: 1px solid rgba(61,43,31,.2); background: var(--crm); font-family: var(--ss); color: var(--txt); } #customer-form .form-control:focus { border-color: var(--dark); } /* ── Ulubione (blockwishlist) — tylko nagłówek, lista renderowana przez moduł (Vue/AJAX) zostaje nietknięta. ── */ .bb-wish-hero { max-width: 1200px; margin: 0 auto; padding: 40px 24px 0; } .bb-wish-hero .bb-title em { font-style: italic; } .bb-main { padding-left: 40px; } /* ── MENU MOBILNE (brakowało — renderowało się widoczne na starcie) ── */ .bb-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; } .bb-burger span { display: block; width: 22px; height: 1.5px; background: var(--dark); } .bb-mobile-menu { display: none; position: fixed; inset: 0; background: var(--crm); z-index: 500; flex-direction: column; padding: 0 28px 40px; overflow-y: auto; } .bb-mobile-menu.open { display: flex; } .bb-mobile-menu a { display: block; font-family: var(--sf); font-size: 24px; font-weight: 700; color: var(--dark); padding: 12px 0; border-bottom: 1px solid rgba(61,43,31,.07); } /* Pasek górny szuflady — branding (nazwa sklepu) + przycisk zamknięcia w normalnym przepływie dokumentu (nie position:absolute w rogu — wcześniej samo "✕" wisiało samotnie w pustym górnym pasku, bez żadnego kontekstu). */ .bb-mm-top { display: flex; align-items: center; justify-content: space-between; padding: 22px 0 18px; margin-bottom: 6px; } .bb-mm-logo { font-family: var(--sf); font-size: 18px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--dark); } .bb-mm-close { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--bg2); border: none; border-radius: 50%; font-size: 16px; color: var(--dark); cursor: pointer; transition: background .2s; } .bb-mm-close:hover { background: var(--nude); color: var(--crm); } /* "Strona główna" na tle ukośnych pasków (ten sam wzór co .bb-hero-bg) — wyższy pasek z tekstem na wierzchu, zamiast cienkiej linii-dekoracji nad zwykłym linkiem. Ciemny tekst dobrze czyta się na tym jasnym, ciepłym wzorze (te same barwy co .bb-pimg-c1 na kartach produktów). */ .bb-mm-home { height: 64px; margin-bottom: 22px; padding: 0 18px !important; display: flex !important; align-items: center; background: repeating-linear-gradient(118deg, #E4D8C6 0 10px, #DBD0BD 10px 20px); border-bottom: none !important; color: var(--dark) !important; position: relative; overflow: hidden; } /* Ten sam efekt błysku co na hero (.bb-hero::after) — mniejsza wersja dopasowana do wysokości tego paska. */ .bb-mm-home::after { content: ''; position: absolute; top: 0; left: -60%; width: 35%; height: 100%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); pointer-events: none; animation: bb-hero-shine 8s ease-in-out 1.2s infinite; } @media (prefers-reduced-motion: reduce) { .bb-mm-home::after { animation: none; display: none; } } /* Sekcja "Konto" — wizualnie odseparowana od nawigacji sklepu (etykieta + mniejsze linki z ikonami, spójne z ikonami w nagłówku), zamiast wcześniej wtopionych w tę samą listę co kategorie, tym samym stylem 28px co "Dziewczynka"/"Chłopiec" — myliło się z nawigacją sklepu. */ .bb-mm-label { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); margin: 20px 0 4px; font-family: var(--ss); font-weight: 500; } .bb-mm-account { display: flex; flex-direction: column; } .bb-mm-account a { font-family: var(--ss); font-size: 15px; font-weight: 400; color: var(--txt); display: flex; align-items: center; gap: 10px; padding: 13px 0; } .bb-mm-account a svg { color: var(--coff); flex-shrink: 0; } /* ── Menu (ps_mainmenu) w szufladzie mobilnej — ten sam widget co desktop, ale przestylowany pod pionową listę. POPRAWKA: wcześniej podkategorie miały wymuszone display:block!important niezależnie od kliknięcia — JS (.bb-menu-toggle -> .bb-menu-item.open) już istniał i przełączał klasę .open poprawnie, ale ten !important i tak trzymał wszystko rozwinięte na stałe. Teraz zwinięte domyślnie, prawdziwy accordion: rozwija się TYLKO po kliknięciu w daną kategorię (.bb-menu-item.open), z obracającą się strzałką (.bb-menu-chevron) jako wskazówką że jest rozwijalne. ── */ .bb-mobile-menu .bb-subnav { display: block; border-top: none; } .bb-mobile-menu .bb-menu-item { display: block; position: static; } .bb-mobile-menu .bb-menu-toggle { display: flex; align-items: center; justify-content: space-between; } .bb-menu-chevron { display: none; flex-shrink: 0; transition: transform .25s var(--ease); } .bb-mobile-menu .bb-menu-chevron { display: block; color: var(--dim); } .bb-mobile-menu .bb-menu-item.open .bb-menu-chevron { transform: rotate(180deg); } .bb-mobile-menu .bb-dropdown { display: none; position: static; background: none; border: none; box-shadow: none; padding: 0 0 8px 18px; min-width: 0; } .bb-mobile-menu .bb-menu-item.open .bb-dropdown { display: block; } .bb-mobile-menu .bb-dropdown a { font-family: var(--ss); font-size: 15px; font-weight: 300; color: var(--mid); padding: 8px 0; border-bottom: none; letter-spacing: .06em; text-transform: uppercase; } .bb-mobile-menu .bb-subnav a::after { display: none; } /* ── RESPONSIVE (mobile first additions) ── */ @media (max-width: 1024px) { /* .bb-nav (lewa kolumna gridu) jest ukryta na mobile, ale grid "1fr auto 1fr" nadal rezerwował dla niej pełne 1fr pustego miejsca — kolumna z ikonami (prawe 1fr) miała przez to o połowę mniej szerokości niż realnie dostępna, więc 6 sztywnych 20px ikon (szukaj/kontakt/ ulubione/konto/koszyk/hamburger) w jednym rzędzie nie mieściło się i hamburger (ostatni w kolejności) wypychał się poza ekran, ucięty przez overflow-x:hidden na html. Fix: na mobile logo+ikony dostają całą szerokość zamiast dzielić ją z niewidoczną kolumną nawigacji. */ .bb-header-inner { grid-template-columns: auto 1fr; padding: 0 24px; } .bb-nav { display: none; } .bb-burger { display: flex; } /* Poprzedni fix (wyżej) rozwiązał połowę problemu, ale hamburger nadal dotykał krawędzi ekranu na wąskich telefonach (zweryfikowane: 0px odstępu przy 390px). Prawdziwa przyczyna: .bb-logo nigdy nie miał mniejszego rozmiaru na mobile (zostawał na pełnych 26px + letter- spacing .32em z desktopu) — sam zajmował ~193px, a 6 ikon (szukaj/ mail/ulubione/konto/koszyk/hamburger) potrzebuje ~220px, razem 413px przy dostępnych tylko 342px (390px ekranu minus 2×24px paddingu) — 71px za mało, więc kolumna ikon wychodziła poza wyznaczony obszar. */ .bb-logo { font-size: 17px; letter-spacing: .16em; gap: 8px; } .bb-logo-img { max-height: 32px; } /* Na wyraźną prośbę: logo/tekst zostają nietknięte, zamiast tego cały rząd ikon (.bb-header-r) dosunięty w lewo — mniejszy odstęp między ikonami (18px -> 10px) daje im więcej miejsca bez ruszania loga. */ .bb-header-r { gap: 10px; } .bb-pgrid { grid-template-columns: repeat(2, 1fr); } .bb-cgrid { grid-template-columns: 1fr 1fr; height: auto; } .bb-cgrid .bb-cc:first-child { grid-row: auto; grid-column: 1/-1; height: 300px; } .bb-about-in { grid-template-columns: 1fr; gap: 40px; } .bb-pdp { grid-template-columns: 1fr; } .bb-gal { padding-right: 0; } .bb-cart-wrap { grid-template-columns: 1fr; } .bb-chk-wrap { grid-template-columns: 1fr; } .bb-cat-wrap { grid-template-columns: 1fr; } .bb-footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .bb-pgrid { grid-template-columns: 1fr; gap: 12px; } .bb-hero-h1 { font-size: clamp(36px, 10vw, 56px); } .bb-footer-grid { grid-template-columns: 1fr; } /* Na desktopie .bb-hero ma height:100vh + min-height:640px — na telefonie to wymusza sekcję wyższą niż widoczny ekran (min-height wygrywa nawet gdy 100vh jest mniejsze). Skracamy na mobile, żeby hero nie zajmowało prawie całego ekranu. */ .bb-hero { height: 80vh; min-height: 480px; max-height: 680px; } /* Siatka produktów na stronie głównej (bestsellery/nowości/polecane — bazowa klasa .products z Hummingbirda, nie nasza .bb-pgrid) przechodzi na 2 kolumny już od @media(min-width:360px) w bazowym theme.css — czyli praktycznie na KAŻDYM telefonie. Wymuszamy z powrotem 1 kolumnę na wąskich ekranach (ten sam selektor co oryginał, żeby wygrać specyficznością bez !important — nasz plik ładuje się po theme.css). */ .layout-full-width .products { grid-template-columns: repeat(1, minmax(0, 1fr)); } } /* ── DOPASOWANIE MOBILNE (uzupełnienie) — kilka sekcji miało stały padding "0 52px" wpisany bezpośrednio w szablonach (inline style, catalog/product.tpl, checkout/cart.tpl) albo w CSS bez odpowiednika na wąskich ekranach, co przy niewielkich telefonach (< 480px) ściska/przepełnia treść. Nadpisujemy uniwersalnie na węższych ekranach — inline style w HTML zwykle wygrywa ze zwykłym CSS, ale TU wygrywamy dzięki !important (jedyne bezpieczne miejsce na jego użycie: nadpisanie przez media query WŁASNYCH inline stylów, nie cudzego kodu). */ @media (max-width: 640px) { section[style*="52px"], div[style*="52px"] { padding-left: 16px !important; padding-right: 16px !important; } .bb-steps { flex-wrap: wrap; gap: 10px 16px; padding: 16px 20px; } .bb-step span:last-child { display: none; } .bb-step-div { width: 16px; } .bb-acc-tiles { grid-template-columns: repeat(2, 1fr); padding: 0 16px; } .bb-ord-list { padding: 16px; } .bb-wish-hero { padding: 24px 16px 0; } } /* ═══════════════════════════════════════════ BOBOLUBI — MODULE OVERRIDES ps_customtext, ps_banner, ps_imageslider, ps_featuredproducts ═══════════════════════════════════════════ */ /* ── ps_customtext ── */ .bb-customtext { max-width: 860px; margin: 0 auto; padding: 72px 52px; text-align: center; } .bb-customtext-body { font-size: 15px; line-height: 1.9; color: var(--mid); font-weight: 300; } .bb-customtext-body h2, .bb-customtext-body h3 { font-family: var(--sf); font-size: clamp(24px, 2.5vw, 38px); font-weight: 700; color: var(--dark); margin-bottom: 16px; } .bb-customtext-body p { margin-bottom: 14px; } .bb-customtext-body a { color: var(--coff); border-bottom: 1px solid currentColor; } .bb-customtext-body strong { color: var(--dark); font-weight: 500; } /* ── ps_banner ── */ .bb-banner { position: relative; overflow: hidden; max-width: 1560px; margin: 0 auto; } .bb-banner a { display: block; } .bb-banner img { width: 100%; height: auto; display: block; transition: transform .7s var(--ease); } .bb-banner:hover img { transform: scale(1.02); } .bb-banner-label { position: absolute; bottom: 32px; left: 52px; background: var(--dark); color: var(--nude); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; padding: 12px 28px; } /* ── ps_imageslider ── */ /* Slajdy mają być dokładnie 1180×500px (ustalony format grafik). Kontener trzymał wcześniej płynną szerokość + sztywną wysokość (np. height:302px), więc proporcje boxa nigdy nie zgadzały się z proporcją zdjęcia — a object-fit:cover na .bb-slide img zawsze docina do proporcji kontenera, niezależnie od realnego rozmiaru pliku. Fix: aspect-ratio 1180/500 na kontenerze, zamiast osobnej wysokości — proporcje stałe przy każdej szerokości ekranu, zero ucinania dla grafiki w tym formacie. max-width: 1560px — tyle co .bb-banner i inne sekcje strony głównej (zweryfikowane w tym pliku), żeby slider nie był węższy niż reszta strony. */ .bb-slider { position: relative; width: 100%; max-width: 1560px; aspect-ratio: 1180 / 500; overflow: hidden; background: var(--bg2); margin: 34px auto 0; } /* Telefon: NIE wymuszać osobnej wysokości tutaj — aspect-ratio 1180/500 zostaje jak na desktopie, więc zdjęcie nigdy się nie docina (policzone: przy 280px sztywnej wysokości cover ucinał ~43% szerokości zdjęcia, bo 280px to dużo więcej niż naturalne ~159px wynikające z proporcji 2.36:1 przy 375px szerokości ekranu — im wyższy box względem szerokiego zdjęcia, tym więcej cover ucina po bokach). Mniejszy font tytułu/marginesy poniżej wystarczają, żeby tekst zmieścił się w tych ~159px bez zmiany wysokości. */ @media (max-width: 640px) { .bb-slide-title { font-size: 28px; margin-bottom: 10px; } .bb-slide-desc { margin-bottom: 16px; } } /* Wariant "zoom + fade" (wybrany spośród 4 podglądów) — bez ruchu w bok, nowy slajd rozjaśnia się (opacity) i jednocześnie zdjęcie ściąga się z lekkiego przybliżenia (scale 1.1→1). Zwykły toggle klasy .active w JS wystarcza — transition na klasie sam animuje się od nowa przy każdym przełączeniu, bez potrzeby ręcznego restartu jak przy animacji @keyframes. */ .bb-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); } .bb-slide.active { opacity: 1; } .bb-slide img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.1); transition: transform .9s var(--ease); } .bb-slide.active img { transform: scale(1); } .bb-slide-caption { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(158deg, rgba(61,43,31,.04) 0%, rgba(61,43,31,.40) 100%); color: var(--crm); text-align: center; padding: 0 24px; } .bb-slide-title { font-family: var(--sf); font-size: clamp(48px, 7vw, 88px); font-weight: 700; line-height: 1.05; margin-bottom: 20px; } .bb-slide-desc { font-size: 14px; font-weight: 300; letter-spacing: .07em; color: rgba(254,252,250,.78); margin-bottom: 36px; max-width: 600px; } .bb-slide-prev, .bb-slide-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(254,252,250,.15); border: 1px solid rgba(254,252,250,.3); color: var(--crm); width: 48px; height: 48px; font-size: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; } .bb-slide-prev { left: 24px; } .bb-slide-next { right: 24px; } .bb-slide-prev:hover, .bb-slide-next:hover { background: rgba(254,252,250,.3); } @media (max-width: 640px) { .bb-slide-prev, .bb-slide-next { width: 32px; height: 32px; font-size: 16px; background: rgba(254,252,250,.1); border-color: rgba(254,252,250,.22); } .bb-slide-prev { left: 12px; } .bb-slide-next { right: 12px; } } /* ── Ukrycie domyślnych stylów PS dla tych modułów ── */ .block-category-list, .featured-products .products, #custom-text { all: unset; } /* ── ps_mainmenu dropdown ── */ #bb-mainmenu { position: relative; } /* Każda pozycja menu we własnym position:relative wrapperze — patrz komentarz w ps_mainmenu.tpl. Bez tego .bb-dropdown pozycjonowałby się względem CAŁEGO #bb-mainmenu (jedyny position:relative przodek wcześniej), więc zawsze pojawiałby się w tym samym miejscu, pod pierwszą pozycją menu. */ .bb-menu-item { position: relative; display: flex; align-items: center; } .bb-dropdown { display: none; position: absolute; top: 100%; left: 0; background: var(--crm); border: 1px solid rgba(61,43,31,.1); padding: 12px 0; min-width: 180px; z-index: 200; box-shadow: 0 8px 32px rgba(61,43,31,.1); } /* Odsłanianie na :hover TYLKO na urządzeniach z prawdziwym hoverem (mysz/ trackpad) — @media(hover:hover), NIE na dotyku. Bez tego drugi tap w kategorię na telefonie poprawnie usuwał klasę .open (JS), ale dropdown zostawał WIDOCZNY, bo dotyk potrafi zostawić element w "utkniętym" stanie :hover (znany efekt na telefonach) — dopiero trzeci tap gdzie indziej to ukrywał, wyglądało jakby drugi tap "nie chował" kategorii. */ @media (hover: hover) { .bb-subnav a:hover + .bb-dropdown, .bb-dropdown:hover { display: flex; flex-direction: column; } } .bb-menu-item.open .bb-dropdown { display: flex; flex-direction: column; } .bb-menu-toggle { cursor: pointer; } /* Zagnieżdżony dropdown (kategoria 3+ poziomu) wysuwa się w bok zamiast pod spód — inaczej nachodziłby na panel rodzica. .bb-menu-item wewnątrz dropdownu ma to samo position:relative co na najwyższym poziomie (ogólna reguła wyżej), więc pozycjonuje się względem WŁASNEGO wiersza, nie całego panelu rodzica. */ .bb-dropdown .bb-dropdown { top: -13px; left: 100%; margin-left: 1px; } .bb-dropdown a { padding: 9px 20px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); transition: color .2s, background .2s; } .bb-dropdown a:hover { color: var(--dark); background: var(--bg2); } /* ═══════════════════════════════════════════ DOPISANE — klasy używane w szablonach, którym brakowało stylu (audyt po zgłoszeniu "wszystko szare") ═══════════════════════════════════════════ */ /* pasek promocyjny nad headerem */ .pbar { background: var(--dark); color: var(--nude); text-align: center; padding: 10px 20px; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; font-weight: 300; } /* wyszukiwarka w headerze (rozwijane pole tworzone przez JS) */ /* z-index na samym .bb-search-wrap (nie tylko na dropdownie w środku) — inaczej ruchomy pasek .bb-marquee-wrap (bez własnego z-index, ale renderowany PO .bb-header-inner w tym samym

) potrafił nachodzić na podpowiedzi, mimo że dropdown sam w sobie miał wyższy z-index — promujemy całą gałąź, nie tylko liść. */ .bb-search-wrap { position: relative; display: flex; align-items: center; z-index: 320; } .bb-search-box { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); width: 0; overflow: hidden; transition: width .35s var(--ease); background: var(--crm); border-bottom: 1px solid rgba(61,43,31,.3); } /* overflow:visible dopiero PO rozwinięciu — inaczej .bb-search-dropdown (podpowiedzi, position:absolute top:100%) byłby ucięty przez overflow:hidden z etapu zwiniętego pola (potrzebnego, żeby ukryć input o width:0). */ /* width:220px TYLKO na desktopie (≥1025px) — mobile ma własną, mniejszą i ograniczoną szerokość (poniżej, @media max-width:1024px). */ @media (min-width: 1025px) { .bb-search-box.open { width: 220px; overflow: visible; } } .bb-search-box.open { overflow: visible; } @media (max-width: 1024px) { /* POPRAWKA (kilka podejść wcześniej próbowało position:fixed z liczonym/ zgadywanym "top" względem całego nagłówka — zawodne, bo nagłówek ma w środku zmienną liczbę elementów (promobar nad nim nie jest sticky, marquee w środku), więc dokładna wysokość "do przewidzenia" jest ruchoma i zależna od stanu przewinięcia. Ma być koło ikonki — więc zamiast zgadywać/mierzyć wysokość czegokolwiek, zostajemy przy position:absolute, ale NIE względem samej małej .bb-search-wrap (lupa nie jest jedyną/ostatnią ikonką w rzędzie — po niej są jeszcze kontakt/ ulubione/konto/koszyk), bo pole rosnące w lewo OD SAMEJ IKONKI i tak wychodziło poza lewą krawędź ekranu (ograniczenie szerokości nie wystarczyło, skoro punkt startowy nie był blisko krawędzi). Kotwiczymy więc do CAŁEGO rzędu ikon (.bb-header-r, sięga blisko prawej krawędzi ekranu) — .bb-search-wrap traci tu status "positioned ancestor" (position:static), więc position:absolute "przeskakuje" wyżej, do .bb-header-r. Zero liczenia/zgadywania, czysty CSS. */ .bb-header-r { position: relative; } .bb-search-wrap { position: static; } /* Rozwijanie z ŚRODKA na obie strony (scaleX), nie wzrostem szerokości — pole ma od razu docelową, bezpieczną szerokość/pozycję (zakotwiczoną do .bb-header-r, więc na pewno mieści się w ekranie), transform tylko wizualnie je "ściska" do zera gdy zwinięte. transform nie wpływa na layout (position:absolute i tak jest poza normalnym przepływem), więc zero ryzyka przesunięcia czegokolwiek obok. */ .bb-search-box { right: 0; left: auto; top: 100%; margin-top: 10px; width: min(240px, calc(100vw - 32px)); overflow: visible; transform: scaleX(0); transform-origin: center; transition: transform .3s var(--ease); box-shadow: 0 8px 24px rgba(61,43,31,.12); } .bb-search-box.open { transform: scaleX(1); } .bb-search-box input { padding: 12px 16px; font-size: 14px; } .bb-search-dropdown { width: auto; left: 0; right: 0; } } .bb-search-box input { width: 100%; padding: 6px 10px; border: none; background: transparent; font-size: 13px; font-family: var(--ss); color: var(--txt); outline: none; } .bb-search-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--dim); cursor: pointer; font-size: 11px; line-height: 1; padding: 6px; } /* Podpowiedzi (renderowane natywnym JS z bottom-*.js — klonuje #ps_searchbar_result do środka .js-search-results). Szerszy niż samo pole (które ma tylko 220px) — zakotwiczony do prawej krawędzi, rozciąga się bardziej w lewo, więcej miejsca na zdjęcie+nazwę. Bardzo wysoki z-index + nieprzezroczyste tło (--crm to pełny, kryjący kolor, nie rgba) — inaczej ruchomy pasek pod nagłówkiem (.bb-marquee-wrap) nachodził na podpowiedzi. */ .bb-search-dropdown { position: absolute; top: 100%; right: 0; left: auto; width: 340px; margin-top: 6px; background: var(--crm); border: 1px solid rgba(61,43,31,.1); box-shadow: 0 8px 32px rgba(61,43,31,.12); z-index: 9999; max-height: 360px; overflow-y: auto; } .bb-search-results { display: flex; flex-direction: column; } .bb-search-result-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: var(--txt); transition: background .15s; } .bb-search-result-link:hover, .bb-search-result-link:focus, .bb-search-result-link[aria-selected="true"] { background: var(--bg2); outline: none; } .bb-search-result-image { width: 40px; height: 52px; object-fit: cover; flex-shrink: 0; } .bb-search-result-name { font-size: 12.5px; color: var(--dark); margin: 0; } /* czwarty wariant alertu (był error/success/info, brakowało warning) */ .bb-alert-warning { background: rgba(196,168,130,.15); color: var(--coff); border-left: 3px solid var(--nude); } /* ikonka +/- w akordeonie opisu produktu */ .bb-acc-icon { font-size: 16px; color: var(--dim); line-height: 1; } /* moduł linków w stopce (ps_linklist) */ .bb-linklist-block { min-width: 0; } /* mini-koszyk w headerze (ps_shoppingcart) */ .bb-minicart { position: relative; } .bb-minicart-ico { position: relative; } .bb-minicart-drop { display: none; position: absolute; top: calc(100% + 14px); right: 0; width: 340px; background: var(--crm); border: 1px solid rgba(61,43,31,.1); box-shadow: 0 8px 32px rgba(61,43,31,.12); z-index: 400; } .bb-minicart-drop.open { display: block; } .bb-minicart-items { max-height: 320px; overflow-y: auto; padding: 20px 24px 4px; } .bb-minicart-item { display: flex; gap: 14px; margin-bottom: 16px; } .bb-minicart-footer { padding: 20px 24px; border-top: 1px solid rgba(61,43,31,.08); } /* newsletter w stopce (ps_emailsubscription) */ /* Tło zmienione z jasnego --bg2 na --dark (identyczne jak .bb-footer) — wcześniej jasny kremowy prostokąt wciśnięty w środek ciemnej stopki mocno gryzł się kolorystycznie ("na siłę wciśnięty"). Teraz wtapia się w resztę stopki bez szwu, kolory tekstu odwrócone na jasne (jak reszta linków stopki: rgba(254,252,250,.XX)/--nude). Padding pionowy też zmniejszony (60px -> 40px), żeby blok nie był tak rozdęty. */ .bb-newsletter { background: var(--dark); padding: 30px 52px; text-align: center; } .bb-newsletter-inner { max-width: 560px; margin: 0 auto; } .bb-newsletter-inner .bb-eyebrow { color: var(--nude); } /* Ten sam styl co "Nowe kolekcje" (.bb-title) — tylko kolor pod ciemne tło stopki nadpisany, bo .bb-title domyślnie ma color:var(--dark). */ .bb-newsletter-ttl { color: var(--crm); margin: 6px 0 8px; } .bb-newsletter-ttl em { color: var(--nude); } .bb-newsletter-sub { font-size: 12.5px; color: rgba(254,252,250,.5); margin-bottom: 18px; } .bb-newsletter-form { } .bb-newsletter-row { display: flex; gap: 10px; } .bb-newsletter-inp { flex: 1; padding: 13px 18px; border: 1px solid rgba(254,252,250,.15); background: var(--crm); font-family: var(--ss); font-size: 13px; color: var(--txt); outline: none; } .bb-newsletter-inp:focus { border-color: var(--nude); } .bb-newsletter-btn { padding: 13px 28px; background: var(--nude); color: var(--dark); border: none; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .2s; } .bb-newsletter-btn:hover { background: var(--crm); } .bb-newsletter-msg { margin-top: 12px; font-size: 12px; color: var(--ok); } .bb-newsletter-msg.error { color: var(--sale); } .bb-newsletter-legal { margin-top: 14px; font-size: 10.5px; color: rgba(254,252,250,.32); line-height: 1.6; } /* Hero (.bb-hero) jest teraz w index.tpl renderowany PRZED div.container (nadpisany blok 'content_columns'), więc jest naturalnie pełnej szerokości #wrapper — nie potrzeba już CSS-owego "wyłamywania" z kontenera (100vw + ujemne marginesy). Ten hak został usunięty, bo zależał od tego, czy jakiś rodzic ma overflow/scrollbar — strukturalne rozwiązanie w Smarty jest odporne na to z definicji. */ /* ── Checkout (proces zamówienia — adresy/dostawa/płatność) i strona produktu-domyślne elementy PS — CELOWO bez nadpisania struktury (zbyt ryzykowne: AJAX, integracje płatności), tylko kolory/fonty Bootstrapa przemalowane pod paletę marki, żeby nie wyglądało jak domyślny niebieski motyw. Zero zmian w logice/JS realnego checkout.tpl. ── */ .checkout-grid .btn-primary, .cart-summary .btn-primary { background: var(--dark); border-color: var(--dark); color: var(--nude); } .checkout-grid .btn-primary:hover, .cart-summary .btn-primary:hover { background: var(--coff); border-color: var(--coff); } .checkout-grid a { color: var(--coff); } .checkout-grid h1, .checkout-grid h2, .checkout-grid h3 { font-family: var(--sf); color: var(--dark); } .checkout-grid { font-family: var(--ss); color: var(--txt); } /* ── Podsumowanie koszyka w checkoutcie — dopasowanie do Bobolubi-HTML/Checkout.html, w 100% przez CSS (::before/::after, pozycjonowanie, ukrywanie duplikatów) — ZERO zmian w prawdziwych plikach Smarty (AJAX koszyka, kupony, przeliczanie cen zostają nietknięte). Real nagłówek "Order summary" jest w źródle CELOWO ukryty na desktopie (_checkout.scss: media-breakpoint-up(lg) { &__summary-accordion-header { display:none } }), więc własny nagłówek dokładamy czysto wizualnie. */ /* Karta panelu — 1:1 z Checkout.html .ord-sum, którego dotąd brakowało (żywy render pokazywał gołe elementy na tle strony, bez tła/ramki/paddingu). */ .cart-summary { background: var(--crm); border: 1px solid rgba(61,43,31,.1); padding: 24px; } #js-checkout-summary::before { content: "Twoje zamówienie"; display: block; font-family: var(--sf); font-size: 20px; font-weight: 700; color: var(--dark); margin-bottom: 18px; } .cart-summary__products-accordion .accordion-header { display: none !important; } #cart-summary-product-list.collapse { display: block !important; } .cart-summary__products-number { display: none !important; } .cart-summary-product { position: relative; display: flex; gap: 12px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(61,43,31,.08); } .cart-summary-product__image { width: 56px; height: 74px; flex-shrink: 0; background: var(--bg2); overflow: hidden; } .cart-summary-product__img { width: 100%; height: 100%; object-fit: cover; } .cart-summary-product__content { display: flex; flex: 1; justify-content: space-between; gap: 10px; } .cart-summary-product__link { font-size: 13px; font-weight: 500; color: var(--txt); margin-bottom: 2px; } .cart-summary-product__attributes { font-size: 11px; color: var(--dim); line-height: 1.6; } .cart-summary-product__attribute { display: inline; } .cart-summary-product__attribute .label { display: none; } .cart-summary-product__attribute .value::after { content: " / "; } .cart-summary-product__attribute:last-child .value::after { content: ""; } .cart-summary-product__price, .cart-summary-product__unit-price { display: none; } /* Znaczek ilości — 1:1 z Checkout.html .ord-img-cnt (kółko na rogu zdjęcia). Element nie jest w realnym DOM dzieckiem .cart-summary-product__image (jest siostrzany, w content-left), więc pozycja liczona względem .cart-summary-product (position:relative) na podstawie realnych wymiarów zdjęcia (56x74, top:0 — wiersz nie ma już paddingu górnego), żeby wylądować dokładnie na rogu zdjęcia jak w mockupie (.ord-img-cnt: top:-5px;right:-5px względem 56px-szerokiego .ord-img). */ .cart-summary-product__quantity { position: absolute; top: -5px; left: 43px; width: 18px; height: 18px; border-radius: 50%; background: var(--dark); color: var(--crm); font-size: 9px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; } .cart-summary-product__quantity .label { display: none; } .cart-summary-product__total { font-size: 14px; font-weight: 500; color: var(--dark); white-space: nowrap; } .cart-summary__line { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; color: var(--mid); } .cart-summary__line--bold { font-family: var(--sf); font-size: 20px; font-weight: 700; color: var(--dark); border-top: 1px solid rgba(61,43,31,.12); margin-top: 12px; padding-top: 12px; } /* Pola formularzy (adresy/dane osobowe/kontakt itd.) — realny renderer PS9 _partials/form-fields.tpl używa GENERYCZNYCH klas Bootstrapa (.form-control, .form-select, .form-label) wszędzie (checkout, konto, kontakt), więc styl tutaj (nie #login-form-scoped) naprawia je globalnie za jednym zamachem. Wzorzec 1:1 z Bobolubi-HTML/Checkout.html:36-37 (.field input,.field select). */ .form-control, .form-select { border: 1px solid rgba(61,43,31,.2); background: var(--crm); padding: 11px 14px; font-size: 13px; font-family: var(--ss); color: var(--txt); border-radius: 0; box-shadow: none; } .form-control:focus, .form-select:focus { border-color: var(--dark); box-shadow: none; } .form-label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); font-weight: 500; margin-bottom: 6px; } input[type="radio"], input[type="checkbox"] { accent-color: var(--dark); } /* displayReassurance w checkout aside — sprawdzone w Bobolubi-HTML/Checkout.html: tego panelu (3 ikony polityka/dostawa/zwrot) W OGÓLE NIE MA w projekcie. Zamiast go przestylowywać, ukrywamy — projekt ma zamiast tego dyskretną plakietkę .bb-ssl-badge (checkout.tpl) i tag zwrotu w podsumowaniu koszyka. POPRAWKA (zweryfikowane w realnym zapisanym HTML checkoutu od użytkownika): na checkoucie ten blok faktycznie renderuje się przez displayBlockProduct.tpl z modyfikatorem "--checkout" (page_name-based), NIE "--light" z displayBlock.tpl jak wcześniej założone z samego reference-theme — dlatego poprzednia reguła nigdy nie trafiała w żaden realny element. */ .blockreassurance--checkout { display: none !important; } /* Reassurance na stronie produktu (blockreassurance--product) zostaje — ikony ładowane jako i przez JS modułu zamieniane na inline ) używany na stronach zwrotów/zamówień (customer/order-follow.tpl, order-return.tpl, _partials/order-detail-return.tpl) — nietknięta logika, tylko dopasowanie kolorów/fontów do reszty motywu. */ .grid-table__header { color: var(--mid); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; border-color: rgba(61,43,31,.1) !important; } .grid-table__row { border-color: rgba(61,43,31,.08) !important; } /* ── Sidebar "Moje konto" (components/account-menu.tpl) — 1:1 z Profil.html .sidebar/.user-card/.sb-nav/.sb-lnk. Realny kontener to Bootstrapowe .col-lg-3/.col-lg-9 z customer/page.tpl (nietknięte) — tu tylko wygląd samego menu w lewej kolumnie. */ .bb-acc-user { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid rgba(61,43,31,.08); } .bb-acc-user__av { width: 52px; height: 52px; background: var(--bg2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--sf); font-size: 22px; font-weight: 700; color: var(--coff); margin-bottom: 10px; } .bb-acc-user__name { font-family: var(--sf); font-size: 18px; font-weight: 700; color: var(--dark); } .bb-acc-user__email { font-size: 11px; color: var(--dim); margin-top: 2px; } .bb-acc-nav { display: flex; flex-direction: column; gap: 2px; } .bb-acc-nav a { display: block; padding: 10px 12px; font-size: 12.5px; color: var(--mid); transition: all .2s; } .bb-acc-nav a:hover, .bb-acc-nav a[aria-current="page"] { color: var(--dark); background: var(--bg2); } .bb-acc-nav__logout { color: var(--sale) !important; margin-top: 8px; border-top: 1px solid rgba(61,43,31,.08); padding-top: 16px !important; } .bb-acc-nav__logout:hover { background: rgba(168,64,64,.08) !important; color: var(--sale) !important; } /* ── Pasek zakładek profilu (identity.tpl) — 1:1 z Profil.html .prof-tabs/ .prof-tab. To PRAWDZIWE linki (nie panele JS): "Adresy" prowadzi na realną stronę adresów PrestaShop, "Hasło" przewija do pola hasła na TEJ SAMEJ stronie (formularz identity ma pole zmiany hasła wbudowane — sprawdzone w customer-form.tpl). Świadomie bez zakładki "Ustawienia" — w prawdziwym PrestaShop nie ma strony z przełącznikami powiadomień ani usuwaniem konta, więc nie robimy atrapy, która nic by nie zapisywała. */ .bb-prof-tabs { display: flex; gap: 0; border-bottom: 1px solid rgba(61,43,31,.09); margin-bottom: 32px; flex-wrap: wrap; } .bb-prof-tab { padding: 12px 24px; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); border: none; background: none; cursor: pointer; position: relative; transition: color .2s; text-decoration: none; } .bb-prof-tab:hover { color: var(--dark); } .bb-prof-tab.on { color: var(--dark); } .bb-prof-tab.on::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--dark); } .grid-table__cell { font-family: var(--ss); color: var(--txt); } .order-product__name { color: var(--dark); font-weight: 500; } .order-merchandise-return h3, .order-return-reminder h3 { font-family: var(--sf); color: var(--dark); }