/*
Theme Name: Op 5.5 — Orzeł na Piersi
Template: scieg
Description: Prototyp Op 5.5 według projektu „Orzeł na Piersi” z Claude Design. Motyw potomny Ścieg.
Version: 1.0.0
Text Domain: op55
*/

:root { --white:#FBFAF8; --paper:#F1EBE8; --ink:#1A1412; --muted:#6B5F5A; --rule:#EDE7E4; --red:#C8102E; --red-deep:#8E0B20;
  --font-display:'Barlow Condensed',system-ui,sans-serif; --font-body:'Barlow',system-ui,sans-serif; --wrap:1320px; --r:4px; }
body { background:#FBFAF8; color:#1A1412; font-family:'Barlow',system-ui,sans-serif; -webkit-font-smoothing:antialiased; font-variant-numeric:normal; }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:800; }
.op55 a:hover { color:#8E0B20; }
button { font-family:inherit; cursor:pointer; }

@keyframes op-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes op-wave{0%,100%{transform:translateY(-9px) skewY(-2deg)}50%{transform:translateY(9px) skewY(2deg)}}
@keyframes op-shade{0%,100%{opacity:0}50%{opacity:.22}}
@keyframes op-pulse{0%{box-shadow:0 0 0 0 rgba(200,16,46,.55)}70%{box-shadow:0 0 0 14px rgba(200,16,46,0)}100%{box-shadow:0 0 0 0 rgba(200,16,46,0)}}
@keyframes op-blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes op-rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes op-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes op-sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.op-wrap { max-width:1320px; margin:0 auto; }
.op-marquee { background:#C8102E; color:#fff; overflow:hidden; white-space:nowrap; font-family:'Barlow Condensed'; font-weight:600; letter-spacing:.12em; font-size:14px; height:36px; display:flex; align-items:center; }
.op-marquee > div { display:flex; gap:48px; animation:op-marquee 32s linear infinite; padding-left:48px; }

.op-header { position:sticky; top:0; z-index:40; background:rgba(251,250,248,.92); backdrop-filter:blur(12px); border-bottom:1px solid #EDE7E4; }
.admin-bar .op-header { top:32px; }
.op-header__in { max-width:1320px; margin:0 auto; padding:0 24px; height:72px; display:flex; align-items:center; gap:32px; }
.op-brand { display:flex; align-items:center; gap:12px; color:#1A1412; }
.op-flag { width:34px; height:34px; display:flex; flex-direction:column; border:1.5px solid #1A1412; border-radius:3px; overflow:hidden; flex:none; }
.op-flag div, .op-flag-strip div { flex:1; background:#fff; } .op-flag div + div, .op-flag-strip div + div { background:#C8102E; }
.op-brand__name { font-family:'Barlow Condensed'; font-weight:800; font-size:24px; letter-spacing:.04em; line-height:1; white-space:nowrap; }
.op-nav { display:flex; gap:26px; flex:1; min-width:0; overflow-x:auto; white-space:nowrap; scrollbar-width:none; font-weight:600; font-size:15px; }
.op-nav a { color:#1A1412; } .op-nav a.is-red { color:#C8102E; }
.op-cartbtn { position:relative; display:flex; align-items:center; gap:10px; background:#1A1412; color:#fff !important; border:0; border-radius:999px; padding:11px 20px; font-weight:700; font-size:15px; flex:none; }
.cart-count-op { min-width:24px; height:24px; border-radius:12px; background:#C8102E; display:flex; align-items:center; justify-content:center; font-size:13px; padding:0 6px; }
@media (max-width:720px) { .op-header__in { gap:14px; padding:0 16px; } .op-brand__name { font-size:19px; } .op-nav { display:none; } .op-brand { flex:1; } }

.op-hero { max-width:1320px; margin:0 auto; padding:56px 24px 72px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr)); gap:56px; align-items:center; }
.op-rise { animation:op-rise .9s cubic-bezier(.2,.7,.2,1) both; }
.op-pill { display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid #EDE7E4; border-radius:999px; padding:7px 14px 7px 8px; font-size:14px; font-weight:600; white-space:nowrap; }
.op-dot { width:8px; height:8px; border-radius:50%; background:#C8102E; animation:op-blink 1.4s infinite; margin-left:6px; display:inline-block; }
.op-h1 { font-family:'Barlow Condensed'; font-weight:800; font-size:clamp(56px,8vw,112px); line-height:.9; letter-spacing:-.01em; margin:24px 0 0; text-transform:uppercase; }
.op-sweep { height:6px; width:180px; margin:26px 0; display:flex; transform-origin:left; animation:op-sweep 1.2s .4s cubic-bezier(.7,0,.2,1) both; }
.op-sweep div { flex:1; background:#1A1412; opacity:.12; } .op-sweep div + div { background:#C8102E; opacity:1; }
.op-lead { font-size:20px; line-height:1.5; max-width:520px; margin:0; color:#4A3F3B; text-wrap:pretty; }
.op-cta { background:#C8102E; color:#fff !important; padding:19px 34px; border-radius:4px; font-weight:700; font-size:17px; letter-spacing:.02em; }
.op-pulse { animation:op-pulse 2.4s infinite; }
.op-cta:hover { background:#A50D26; }
.op-cta-ghost { border:2px solid #1A1412; color:#1A1412; padding:17px 30px; border-radius:4px; font-weight:700; font-size:17px; }
.op-cta-ghost:hover { background:#1A1412; color:#fff !important; }
.op-hero__img { aspect-ratio:4/5; border-radius:6px; overflow:hidden; background:#F1EBE8; }
.op-hero__img img, .op-kolekcja__img img, .op-tile img { width:100%; height:100%; object-fit:cover; }
.op-float { position:absolute; border-radius:6px; padding:14px 18px; }
.op-float--l { top:28px; left:-18px; background:#fff; box-shadow:0 18px 40px rgba(26,20,18,.12); animation:op-floaty 5s ease-in-out infinite; }
.op-float--r { bottom:28px; right:-14px; background:#C8102E; color:#fff; box-shadow:0 18px 40px rgba(200,16,46,.3); animation:op-floaty 6s 1s ease-in-out infinite; }
@media (max-width:720px) { .op-float--l { left:8px; } .op-float--r { right:8px; } }

.op-wave { position:relative; height:220px; overflow:hidden; background:#1A1412; }
.op-wave__slices { position:absolute; inset:18px 0; display:flex; }
.op-wave__slices > div { flex:1; display:flex; flex-direction:column; position:relative; animation:op-wave 3.2s ease-in-out infinite; }
.op-wave__slices > div > div { flex:1; background:#FBFAF8; } .op-wave__slices > div > div + div { background:#C8102E; }
.op-wave__slices i { position:absolute; inset:0; background:#000; animation:op-shade 3.2s ease-in-out infinite; }
.op-wave__txt { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.op-wave__txt div { font-family:'Barlow Condensed'; font-weight:800; font-size:clamp(28px,5vw,64px); letter-spacing:.14em; color:#1A1412; mix-blend-mode:multiply; text-align:center; }

.op-trust { max-width:1320px; margin:0 auto; padding:28px 24px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; }
.op-trust__k { width:44px; height:44px; border-radius:50%; border:2px solid #C8102E; color:#C8102E; display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed'; font-weight:800; font-size:17px; flex:none; }

.op-eyebrow { color:#C8102E; font-weight:700; letter-spacing:.14em; font-size:14px; }
.op-h2 { font-family:'Barlow Condensed'; font-weight:800; font-size:clamp(40px,5vw,64px); line-height:.95; margin:10px 0 0; text-transform:uppercase; }

.op-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:28px 22px; }
.op-card { display:flex; flex-direction:column; transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.op-card:hover { transform:translateY(-6px); }
.op-card__img { position:relative; aspect-ratio:4/5; border-radius:6px; overflow:hidden; background:#F1EBE8; display:block; }
.op-card__img img { width:100%; height:100%; object-fit:cover; }
.op-badge { background:#C8102E; color:#fff; font-weight:700; font-size:12px; padding:5px 9px; border-radius:3px; letter-spacing:.04em; }
.op-badge--dark { background:#1A1412; }
.op-viewers { position:absolute; top:12px; right:12px; background:rgba(255,255,255,.94); font-size:12px; font-weight:600; color:#1A1412; padding:5px 9px; border-radius:3px; display:flex; align-items:center; gap:6px; }
.op-stock { height:4px; background:#F1EBE8; border-radius:2px; margin-top:6px; overflow:hidden; } .op-stock div { height:100%; background:#C8102E; }
.op-sizes { display:flex; gap:6px; flex-wrap:wrap; }
.op-sizes button { min-width:44px; height:36px; padding:0 10px; border-radius:3px; font-weight:700; font-size:13px; border:1.5px solid #D8CFCB; background:#fff; color:#1A1412; transition:all .15s; }
.op-sizes[data-group="haft"] button { height:30px; font-size:12px; font-weight:600; }
.op-sizes button[aria-pressed="true"] { background:#1A1412; color:#fff; border-color:#1A1412; }
.op-add { margin-top:12px; height:50px; border:0; border-radius:4px; background:#1A1412; color:#fff; font-weight:700; font-size:15px; letter-spacing:.03em; transition:background .2s; }
.op-add:hover, .op-add.is-busy { background:#C8102E; }

.op-kolekcja { max-width:1320px; margin:0 auto; background:#C8102E; color:#fff; border-radius:8px; overflow:hidden; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr)); }
.op-kolekcja__img { min-height:420px; background:#A50D26; }
.op-cd { background:#fff; color:#1A1412; border-radius:4px; width:84px; padding:12px 0; text-align:center; }
.op-cd div:first-child { font-family:'Barlow Condensed'; font-weight:800; font-size:40px; line-height:1; }
.op-cd div + div { font-size:12px; font-weight:700; color:#6B5F5A; letter-spacing:.08em; margin-top:2px; }
.op-sweepbar { transform-origin:left; animation:op-sweep 1.6s cubic-bezier(.7,0,.2,1) both; }
.op-cta-white { display:inline-block; margin-top:32px; background:#fff; color:#C8102E !important; padding:18px 32px; border-radius:4px; font-weight:800; font-size:17px; }
.op-cta-white:hover { background:#1A1412; color:#fff !important; }
.op-tile { border-radius:6px; overflow:hidden; background:#F1EBE8; aspect-ratio:1; }
.op-tile[style*="span 2"] { aspect-ratio:auto; }
.op-btn-red { border:0; border-radius:4px; background:#C8102E; color:#fff; font-weight:800; }
.op-btn-red:hover { background:#A50D26; }
.op-btn-dark { height:44px; padding:0 16px; border:0; border-radius:4px; background:#1A1412; color:#fff; font-weight:700; }
.op-review { background:#fff; border:1px solid #EDE7E4; border-radius:6px; padding:28px; display:flex; flex-direction:column; gap:14px; }
.op-news { max-width:1320px; margin:0 auto; border:2px solid #1A1412; border-radius:8px; padding:clamp(32px,5vw,56px); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:32px; align-items:center; }
.op-input { flex:1; min-width:220px; height:58px; border:1.5px solid #D8CFCB; border-radius:4px; padding:0 18px; font-size:16px; background:#fff; }

.op-footer { background:#C8102E; color:#fff; margin-top:auto; padding-bottom:64px; }
.op-footer__cols { max-width:1320px; margin:0 auto; padding:56px 24px 32px; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:32px; }
.op-footer__brand { font-family:'Barlow Condensed'; font-weight:800; font-size:28px; letter-spacing:.04em; }
.op-footer__col { display:flex; flex-direction:column; gap:8px; font-size:15px; }
.op-footer a { color:#fff; } .op-footer a:hover { color:#fff; text-decoration:underline; }
.op-pay { display:flex; gap:6px; flex-wrap:wrap; } .op-pay span { border:1px solid rgba(255,255,255,.5); border-radius:3px; padding:4px 8px; font-size:13px; font-weight:700; }
.op-footer__legal { max-width:1320px; margin:0 auto; padding:18px 24px; border-top:1px solid rgba(255,255,255,.25); font-size:13px; opacity:.85; }

.op-toast { position:fixed; left:20px; bottom:20px; z-index:50; background:#fff; border-radius:6px; box-shadow:0 20px 50px rgba(26,20,18,.18); padding:12px 16px 12px 12px; display:flex; gap:12px; align-items:center; max-width:340px; transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s; transform:translateY(140%); opacity:0; pointer-events:none; }
.op-toast.on { transform:none; opacity:1; }
.op-toast__img { width:48px; height:48px; border-radius:4px; flex:none; background:#F1EBE8 center/cover; }
@media (max-width:720px) { .op-toast { bottom:70px; } }

.op-overlay { position:fixed; inset:0; z-index:60; background:rgba(26,20,18,.45); transition:opacity .3s; opacity:0; pointer-events:none; }
.op-drawer { position:fixed; top:0; right:0; bottom:0; z-index:61; width:min(440px,100%); background:#FBFAF8; display:flex; flex-direction:column; transition:transform .45s cubic-bezier(.2,.8,.2,1); transform:translateX(105%); }
.cart-open .op-overlay { opacity:1; pointer-events:auto; } .cart-open .op-drawer { transform:none; }
.op-drawer__head { display:flex; justify-content:space-between; align-items:center; padding:22px 24px; border-bottom:1px solid #EDE7E4; }
.op-drawer__title { font-family:'Barlow Condensed'; font-weight:800; font-size:28px; }
.op-x { border:0; background:none; font-size:28px; line-height:1; width:44px; height:44px; }
.op-drawer__ship { padding:18px 24px; background:#fff; border-bottom:1px solid #EDE7E4; }
.op-bar { height:8px; background:#F1EBE8; border-radius:4px; margin-top:10px; overflow:hidden; } .op-bar div { height:100%; background:#C8102E; transition:width .6s cubic-bezier(.2,.8,.2,1); }
.op-drawer__body { flex:1; overflow:auto; padding:12px 24px; }
.op-empty { padding:48px 0; text-align:center; color:#6B5F5A; }
.op-item { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid #EDE7E4; }
.op-item img { width:72px; height:88px; border-radius:4px; flex:none; object-fit:cover; background:#F1EBE8; }
.op-qty { display:flex; align-items:center; border:1px solid #D8CFCB; border-radius:3px; }
.op-qty button { width:34px; height:34px; border:0; background:none; font-size:18px; }
.op-qty span { min-width:24px; text-align:center; font-weight:700; }
.op-upsell { margin-top:18px; border:1.5px dashed #C8102E; border-radius:6px; padding:14px; display:flex; gap:12px; align-items:center; }
.op-upsell[hidden] { display:none; }
.op-drawer__foot { padding:20px 24px; border-top:1px solid #EDE7E4; background:#fff; }
.op-checkout { margin-top:16px; width:100%; height:58px; border-radius:4px; background:#C8102E; color:#fff !important; font-weight:800; font-size:17px; display:flex; align-items:center; justify-content:center; }
.op-checkout:hover { background:#A50D26; }

.op-exit { position:fixed; inset:0; z-index:70; background:rgba(26,20,18,.6); display:flex; align-items:center; justify-content:center; padding:20px; }
.op-exit[hidden] { display:none; }
.op-exit__box { background:#FBFAF8; border-radius:8px; max-width:480px; width:100%; overflow:hidden; animation:op-rise .45s cubic-bezier(.2,.8,.2,1) both; }
.op-flag-strip { height:10px; display:flex; flex-direction:column; }
.op-code { margin-top:18px; border:2px dashed #C8102E; border-radius:6px; padding:12px; font-family:'Barlow Condensed'; font-weight:800; font-size:34px; letter-spacing:.14em; color:#C8102E; }

/* Przełącznik prototypów, jak na /propozycje/ */
.kswitch { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:55; display:flex; align-items:center; gap:2px; padding:3px; border-radius:14px; background:#1b1b1a; color:#fff; font:600 12px/1 system-ui,sans-serif; box-shadow:0 8px 24px -8px rgba(0,0,0,.5); }
.kswitch > span { padding:0 8px 0 10px; opacity:.6; font-weight:500; }
.kswitch a { display:flex; align-items:center; gap:5px; height:30px; padding:0 10px; border-radius:10px; color:#fff !important; white-space:nowrap; }
.kswitch a b { font-weight:800; }
.kswitch a[aria-current] { background:#fff; color:#1b1b1a !important; }
@media (max-width:520px) { .kswitch > span { display:none; } .kswitch a { padding:0 7px; } }

/* Strony WooCommerce z motywu nadrzędnego w kolorach Op 5.5 */
.op55 .page-plain > h1, .op55 .shop-head h1, .op55 .summary .product_title { text-transform:uppercase; font-size:clamp(40px,5vw,64px); line-height:.95; }
.op55 .eyebrow { color:#C8102E; font-weight:700; letter-spacing:.14em; }
.op55 .chips button[aria-pressed="true"] { background:#1A1412; border-color:#1A1412; }
.op55 .summary .single_add_to_cart_button { height:58px; font-weight:800; font-size:17px; }

@media (prefers-reduced-motion: reduce) {
  .op-marquee > div, .op-wave__slices > div, .op-wave__slices i, .op-pulse, .op-dot, .op-float, .op-rise, .op-sweep, .op-sweepbar { animation:none !important; }
}