/* Nagłówek, mega menu, szuflada mobilna, stopka, nagłówek/stopka kasy, popup, powiadomienia.
   Wartości 1:1 z SiteHeader.dc.html / SiteFooter.dc.html / Checkout.dc.html / Home-v1 (popup). */

/* ---------- Nagłówek ---------- */
.ss-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--ss-border); color: var(--ss-ink); }
.admin-bar .ss-header { top: 32px; }
.ss-topbar { background: var(--ss-grad); color: var(--ss-ink); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }
.ss-topbar__in { max-width: calc(var(--ss-container) + 2 * var(--ss-gutter)); margin: 0 auto; padding: 8px 24px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ss-topbar__l, .ss-topbar__r { white-space: nowrap; }
.ss-topbar__m { color: var(--ss-body); white-space: nowrap; flex: 1; text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ss-theme .ss-topbar__r { color: var(--ss-ink); }
.ss-theme .ss-topbar__g { color: var(--ss-ink); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.ss-theme .ss-topbar__g:hover { text-decoration: underline; }

.ss-bar { max-width: calc(var(--ss-container) + 2 * var(--ss-gutter)); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 20px; min-height: 96px; flex-wrap: wrap; }
.ss-logo { display: flex; align-items: center; gap: 10px; flex: none; white-space: nowrap; }
.ss-bar .ss-logo { order: 1; }
.ss-logo__mark { width: 36px; height: 36px; border-radius: 8px; object-fit: contain; flex: none; }
.ss-logo__mark--txt { display: inline-flex; align-items: center; justify-content: center; background: var(--ss-ink); color: #fff; font-family: var(--ss-font-display); font-weight: 800; font-size: 13px; letter-spacing: .04em; }
.ss-logo__txt { font-family: var(--ss-font-display); font-weight: 800; font-size: 17px; letter-spacing: .06em; color: var(--ss-ink); }
.ss-theme a.ss-logo:hover .ss-logo__txt { color: var(--ss-ink); }

.ss-nav { display: flex; gap: 2px; flex: 1 1 auto; justify-content: center; flex-wrap: wrap; order: 2; min-width: 0; }
.ss-nav__a { position: relative; padding: 8px 10px; font-size: 14px; font-weight: 600; color: var(--ss-ink); border-radius: 6px; white-space: nowrap; }
.ss-theme .ss-nav__a:hover { background: var(--ss-bg-soft-2); color: var(--ss-accent); }
.ss-nav__a.is-cur::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--ss-accent); border-radius: 2px; }

.ss-tools { display: flex; align-items: center; gap: 6px; flex: none; order: 3; margin-left: auto; }
.ss-search { display: flex; align-items: center; gap: 8px; background: var(--ss-bg-soft-2); border-radius: 8px; padding: 0 12px; height: 40px; width: clamp(120px, 14vw, 200px); }
.ss-search .ss-ico { color: var(--ss-body-2); flex: none; }
.ss-search input[type=search] { border: 0; background: transparent; outline: none; font-size: 13.5px; width: 100%; color: var(--ss-ink); padding: 0; min-width: 0; -webkit-appearance: none; appearance: none; }
.ss-search input::-webkit-search-cancel-button { display: none; }
.ss-tool { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 8px; position: relative; color: var(--ss-ink); }
.ss-theme .ss-tool:hover { background: var(--ss-bg-soft-2); color: var(--ss-ink); }
.ss-tool__count { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--ss-accent); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; }
.ss-tool__count--ink { background: var(--ss-ink); }
.ss-tool__count.is-bump { animation: ssBump .4s ease; }
@keyframes ssBump { 40% { transform: scale(1.35); } }
.ss-burger { display: none; width: 40px; height: 40px; border: 0; background: none; border-radius: 8px; align-items: center; justify-content: center; color: var(--ss-ink); padding: 0; }

/* ---------- Mega menu ---------- */
@keyframes ssMega { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ss-mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--ss-border); border-bottom: 1px solid var(--ss-border); box-shadow: 0 24px 48px rgba(42,46,69,.10); animation: ssMega .18s ease; }
.ss-mega__in { max-width: calc(var(--ss-container) + 2 * var(--ss-gutter)); margin: 0 auto; padding: 36px 24px 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.5fr); gap: 24px; }
.ss-mega__col { display: flex; flex-direction: column; gap: 14px; }
.ss-mega__head { font-family: var(--ss-font-display); font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--ss-ink); white-space: nowrap; }
.ss-mega__links { display: flex; flex-direction: column; gap: 9px; }
.ss-mega__links a { font-size: 14px; color: var(--ss-body-2); }
.ss-mega__tile { position: relative; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; display: block; background: #EEF1F6; }
.ss-mega__tile img, .ss-mega__tile .ss-slot { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-mega__tile > span:not(.ss-slot) { position: absolute; left: 16px; bottom: 16px; font-family: var(--ss-font-display); font-size: 20px; font-weight: 700; color: #fff; background: rgba(42,46,69,.92); padding: 8px 14px; border-radius: 8px; pointer-events: none; }

/* ---------- Szuflada (mobile) ---------- */
.ss-drawer { position: fixed; inset: 0; z-index: 120; background: rgba(42,46,69,.45); }
.ss-drawer__panel { position: absolute; top: 0; left: 0; bottom: 0; width: min(360px, 88vw); background: #fff; overflow-y: auto; padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 16px; animation: ssDrawer .22s ease; }
@keyframes ssDrawer { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ss-drawer__top { display: flex; align-items: center; justify-content: space-between; }
.ss-drawer__close { width: 40px; height: 40px; border: 0; background: var(--ss-bg-soft-2); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--ss-ink); padding: 0; }
.ss-drawer__panel > * { flex-shrink: 0; }
.ss-search--drawer { width: 100%; height: 46px; padding: 0 14px; }
.ss-search--drawer input[type=search] { font-size: 16px; }
.ss-drawer__nav { display: flex; flex-direction: column; border-top: 1px solid var(--ss-border); }
.ss-drawer__nav .ss-nav__a { padding: 14px 4px; border-bottom: 1px solid var(--ss-border); border-radius: 0; font-size: 16px; }
.ss-drawer__nav .ss-nav__a.is-cur::after { display: none; }
.ss-drawer__nav .ss-nav__a.is-cur { color: var(--ss-accent); }
.ss-drawer__group summary { list-style: none; cursor: pointer; font-family: var(--ss-font-display); font-weight: 700; font-size: 16px; padding: 6px 0; display: flex; justify-content: space-between; }
.ss-drawer__group summary::after { content: "+"; color: var(--ss-muted); }
.ss-drawer__group[open] summary::after { content: "−"; }
.ss-drawer__group summary::-webkit-details-marker { display: none; }
.ss-drawer__group div { display: flex; flex-direction: column; gap: 10px; padding: 6px 0 10px 2px; }
.ss-drawer__group a { font-size: 14.5px; color: var(--ss-body-2); }
.ss-drawer__phone { margin-top: auto; background: var(--ss-grad); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.ss-drawer__phone span { font-size: 12.5px; color: var(--ss-body-on-grad); }
.ss-drawer__phone strong { font-family: var(--ss-font-display); font-size: 22px; }

/* ---------- Stopka ---------- */
.ss-footer { font-family: var(--ss-font-text); background: #fff; border-top: 1px solid var(--ss-border); color: var(--ss-body-2); font-size: 14px; }
.ss-footer__top { max-width: calc(var(--ss-container) + 2 * var(--ss-gutter)); margin: 0 auto; padding: 64px 24px 32px; display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
.ss-footer__brand { display: flex; flex-direction: column; gap: 16px; max-width: 360px; }
.ss-footer__brand p { line-height: 1.6; color: var(--ss-body-2); }
.ss-footer__note { font-size: 12px; color: var(--ss-muted); }
.ss-footer__col { display: flex; flex-direction: column; gap: 10px; }
.ss-footer__head { color: var(--ss-ink); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.ss-theme .ss-footer__phone { color: var(--ss-ink); font-weight: 600; font-size: 16px; }
.ss-footer__hours { color: var(--ss-muted); font-size: 13px; }
.ss-footer__addr { line-height: 1.5; }
.ss-footer__social { display: flex; gap: 8px; margin-top: 6px; }
.ss-footer__social a { display: inline-flex; width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--ss-border); align-items: center; justify-content: center; color: var(--ss-ink); }
.ss-theme .ss-footer__social a:hover { border-color: var(--ss-ink); color: var(--ss-ink); }
.ss-footer__bottom { border-top: 1px solid var(--ss-border); }
.ss-footer__bin { max-width: calc(var(--ss-container) + 2 * var(--ss-gutter)); margin: 0 auto; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ss-muted); }
.ss-paytags { display: flex; gap: 6px; flex-wrap: wrap; }
.ss-paytag { border: 1px solid var(--ss-border); border-radius: 4px; padding: 3px 8px; color: var(--ss-body-2); white-space: nowrap; }

/* Newsletter w stopce */
.ss-nl { display: flex; gap: 8px; position: relative; flex-wrap: wrap; }
.ss-nl input[type=email] { flex: 1; min-width: 0; outline: none; }
.ss-nl button { border: 0; cursor: pointer; font-weight: 700; }
.ss-nl__msg { flex-basis: 100%; font-size: 12.5px; font-weight: 600; }
.ss-nl__msg:empty { display: none; }
.ss-nl.is-ok .ss-nl__msg { color: var(--ss-ok); }
.ss-nl.is-err .ss-nl__msg { color: var(--ss-sale); }
.ss-nl--footer { margin-top: 8px; }
.ss-nl--footer input[type=email] { height: 46px; border: 1px solid var(--ss-border-strong); background: var(--ss-bg-soft); color: var(--ss-ink); padding: 0 14px; border-radius: 8px; font-size: 14px; }
.ss-nl--footer button { height: 44px; padding: 0 18px; border-radius: 8px; background: var(--ss-accent); color: #fff; font-size: 14px; }
.ss-nl--footer button:hover { background: var(--ss-accent-hover); }

/* ---------- Kasa: nagłówek i stopka ---------- */
.ss-cohead { background: #fff; border-bottom: 1px solid var(--ss-border); }
.ss-cohead__in { max-width: 1228px; margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ss-steps { margin: 0; padding: 0; list-style: none; display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; }
.ss-steps li { display: flex; align-items: center; gap: 8px; color: var(--ss-muted); }
.ss-steps li a { display: inline-flex; align-items: center; gap: 8px; }
.ss-steps li.is-cur { color: var(--ss-ink); }
.ss-steps__n { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--ss-border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.ss-steps li.is-done .ss-steps__n { background: var(--ss-ok); border-color: var(--ss-ok); color: #fff; }
.ss-steps li.is-cur .ss-steps__n { background: var(--ss-ink); border-color: var(--ss-ink); color: #fff; }
.ss-steps__sep { color: var(--ss-body); }
.ss-cohead__safe { font-size: 12.5px; color: var(--ss-body-2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ss-cohead__safe .ss-ico { color: var(--ss-ok); }
.ss-cofoot { margin-top: auto; border-top: 1px solid var(--ss-border); background: #fff; }
.ss-cofoot__in { max-width: 1228px; margin: 0 auto; padding: 18px 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ss-muted); }
.ss-cofoot nav { display: flex; gap: 18px; }
body.ss-checkout-page { display: flex; flex-direction: column; min-height: 100vh; }
body.ss-checkout-page .ss-main { flex: 1; }

/* ---------- Popup newslettera ---------- */
@keyframes ssPop { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.ss-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ss-modal__overlay { position: absolute; inset: 0; background: rgba(42,46,69,.55); }
.ss-modal__box { position: relative; width: min(880px, 100%); background: #fff; border-radius: 20px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); animation: ssPop .35s ease; box-shadow: var(--ss-shadow-modal); }
.ss-modal__img { min-height: 440px; background: var(--ss-bg-soft-2); position: relative; }
.ss-modal__img img, .ss-modal__img .ss-slot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss-modal__copy { padding: 44px 40px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.ss-modal__kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ss-accent); }
.ss-theme .ss-modal__copy h3 { font-size: 34px; line-height: 1.05; letter-spacing: -.03em; }
.ss-modal__copy p { font-size: 15px; line-height: 1.55; color: var(--ss-body-2); }
.ss-nl--popup { flex-direction: column; gap: 10px; margin-top: 4px; }
.ss-nl--popup input[type=email] { height: 50px; border: 1px solid var(--ss-border-strong); border-radius: 10px; padding: 0 16px; font-size: 15px; flex: none; }
.ss-nl--popup input[type=email]:focus { border-color: var(--ss-ink); }
.ss-nl--popup button { height: 50px; border-radius: 10px; background: var(--ss-accent); color: #fff; font-size: 15px; }
.ss-nl--popup button:hover { background: var(--ss-accent-hover); }
.ss-modal__no { background: none; border: 0; padding: 0; font-size: 13px; color: var(--ss-muted); cursor: pointer; text-align: left; }
.ss-modal__note { font-size: 11.5px; color: var(--ss-muted); line-height: 1.5; }
.ss-modal__x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; color: var(--ss-ink); font-size: 18px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.15); padding: 0; }

/* ---------- Powiadomienie „Dodano do koszyka” (ProductCard.dc.html) ---------- */
@keyframes ssToast { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ss-toasts { position: fixed; right: 24px; bottom: 24px; z-index: 200; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.ss-toast { pointer-events: auto; width: 360px; max-width: calc(100vw - 48px); background: #fff; border: 1px solid var(--ss-border); border-radius: 14px; box-shadow: 0 20px 50px rgba(42,46,69,.18); padding: 14px 16px; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; animation: ssToast .25s ease; }
.ss-toast.is-out { opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s; }
.ss-toast__img { width: 56px; height: 56px; border-radius: 8px; background: var(--ss-bg-soft) center / 84% no-repeat; }
.ss-toast__c { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ss-toast__ok { font-size: 12px; font-weight: 700; color: var(--ss-ok); display: inline-flex; align-items: center; gap: 6px; }
.ss-toast__ok i { width: 16px; height: 16px; border-radius: 50%; background: var(--ss-ok); color: #fff; font-size: 10px; font-style: normal; display: inline-flex; align-items: center; justify-content: center; }
.ss-toast__name { font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-toast__sum { font-size: 12.5px; color: var(--ss-muted); }
.ss-toast__acts { display: flex; flex-direction: column; gap: 6px; }
.ss-toast__go { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 12px; background: var(--ss-accent); border-radius: 8px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.ss-theme .ss-toast__go, .ss-theme .ss-toast__go:hover { color: #fff; }
.ss-toast__go:hover { background: var(--ss-accent-hover); }
.ss-toast__cont { height: 30px; border: 0; background: none; font-size: 12px; color: var(--ss-muted); cursor: pointer; text-decoration: underline; padding: 0; }
.ss-toast--err { grid-template-columns: minmax(0, 1fr) auto; }
.ss-toast--err .ss-toast__ok { color: var(--ss-sale); }

/* ---------- Potwierdzenie „Dodano do koszyka” (okno na środku) ---------- */
html.ss-noscroll, html.ss-noscroll body { overflow: hidden; }
@keyframes ssCartOkIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ssCartOkBg { from { opacity: 0; } to { opacity: 1; } }
.ss-cartok { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ss-cartok.is-out { opacity: 0; transition: opacity .2s; }
.ss-cartok__bg { position: absolute; inset: 0; background: rgba(26, 29, 45, .55); backdrop-filter: blur(2px); animation: ssCartOkBg .2s ease; }
.ss-cartok__box { position: relative; width: min(460px, 100%); background: #fff; border-radius: var(--ss-r-2xl); box-shadow: var(--ss-shadow-modal); padding: 32px 32px 28px; display: flex; flex-direction: column; gap: 18px; animation: ssCartOkIn .26s cubic-bezier(.2, .8, .2, 1); }
.ss-cartok__x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--ss-bg-soft); color: var(--ss-ink); font-size: 20px; line-height: 1; cursor: pointer; padding: 0; }
.ss-cartok__x:hover { background: var(--ss-bg-soft-2); }
.ss-cartok__ok { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--ss-ok-ink); }
.ss-cartok__ok i { width: 28px; height: 28px; border-radius: 50%; background: var(--ss-ok); color: #fff; font-size: 14px; font-style: normal; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ss-cartok__prod { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--ss-bg-soft); border-radius: var(--ss-r-lg); }
.ss-cartok__img { width: 64px; height: 64px; border-radius: 10px; background: #fff center / 84% no-repeat; flex: none; }
.ss-cartok__c { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ss-cartok__c strong { font-size: 15px; font-weight: 700; line-height: 1.3; }
.ss-cartok__c span { font-size: 13px; color: var(--ss-body-2); }
.ss-cartok__acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ss-cartok__go, .ss-cartok__cont { display: inline-flex; align-items: center; justify-content: center; height: 50px; border-radius: var(--ss-r-md); font-size: 15px; font-weight: 700; cursor: pointer; text-align: center; }
.ss-cartok__go { background: var(--ss-accent); border: 1px solid var(--ss-accent); }
.ss-theme .ss-cartok__go, .ss-theme .ss-cartok__go:hover { color: #fff; }
.ss-cartok__go:hover { background: var(--ss-accent-hover); border-color: var(--ss-accent-hover); }
.ss-cartok__cont { background: #fff; border: 1px solid var(--ss-border-strong); color: var(--ss-ink); }
.ss-cartok__cont:hover { border-color: var(--ss-ink); }
@media (max-width: 560px) {
	.ss-cartok { padding: 16px; align-items: flex-end; }
	.ss-cartok__box { padding: 26px 20px 20px; }
	.ss-cartok__acts { grid-template-columns: 1fr; }
}

/* ---------- Animacja startowa (rekin) ---------- */
.ss-intro { display: none; }
.ss-intro-run .ss-intro { display: flex; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; background: var(--ss-grad); animation: ssIntroOut .55s cubic-bezier(.7, 0, .3, 1) 1.75s forwards; pointer-events: none; }
.ss-intro__stage { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ss-intro__shark { display: block; width: min(34vw, 190px); aspect-ratio: 1; background-color: #fff; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; animation: ssSwim 1s cubic-bezier(.2, .8, .2, 1) both, ssInk .5s ease .95s forwards; filter: drop-shadow(0 12px 30px rgba(42, 46, 69, .18)); }
.ss-intro__name { font-family: var(--ss-font-display); font-weight: 800; font-size: clamp(18px, 3vw, 24px); letter-spacing: .12em; color: var(--ss-ink); opacity: 0; transform: translateY(8px); animation: ssName .45s ease 1.15s forwards; }
@keyframes ssSwim {
	0% { transform: translate(-38vw, 26vh) rotate(-18deg) scale(.7); opacity: 0; }
	25% { opacity: 1; }
	60% { transform: translate(-6vw, 3vh) rotate(4deg) scale(.95); }
	80% { transform: translate(2vw, -1vh) rotate(-2deg) scale(1.02); }
	100% { transform: none; opacity: 1; }
}
@keyframes ssInk { from { background-color: #fff; } to { background-color: var(--ss-ink); } }
@keyframes ssName { to { opacity: 1; transform: none; } }
@keyframes ssIntroOut { to { opacity: 0; visibility: hidden; transform: translateY(-3%); } }
@media (prefers-reduced-motion: reduce) { .ss-intro-run .ss-intro { display: none; } }