/* ============================================================
   angielski-przedszkole.pl — SKLEP (WooCommerce)
   Opiera się na tokenach z ap.css (:root). Dokłada tokeny paneli sklepu.
   Prefiks .aps-* / .ac-* — zero kolizji z resztą motywu.
   ============================================================ */
:root{
  --panel:#102747; --panel2:#0B1E39;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.16);
  --field:#0a1830;
}

/* ---- przyciski drugorzędne (btn-cta jest w ap.css) ---- */
.btn-ghost{display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:.9rem 1.4rem; border-radius:var(--radius); border:1px solid var(--line-2); background:transparent; color:var(--ink); font:600 1rem/1 var(--font-body); text-decoration:none; cursor:pointer; transition:background .2s ease,border-color .2s ease}
.btn-ghost:hover{background:rgba(255,255,255,.05); border-color:rgba(255,179,107,.4)}
.btn-cta.full,.btn-ghost.full{width:100%}

/* nav chrome (.nav-right / .aps-cart-link / .aps-cart-count) — w ap.css (ogolnostronicowo) */

/* ============ ARCHIWUM / LISTA ============ */
.aps-hero{position:relative; padding:clamp(3rem,7vw,5rem) 0 1.8rem; overflow-x:clip; text-align:center}
.aps-hl{position:absolute; inset:0; pointer-events:none; background:radial-gradient(680px 460px at 30% 24%,rgba(var(--key),.4) 0%,rgba(var(--key),0) 70%),radial-gradient(360px 280px at 80% 64%,rgba(var(--warm),.10) 0%,rgba(var(--warm),0) 72%)}
.aps-hero-in{position:relative; max-width:48rem; margin-left:auto; margin-right:auto}
.aps-hero h1{font-family:var(--font-display); font-weight:900; color:var(--ink); font-size:clamp(2.2rem,4.6vw,3.3rem); line-height:1.05; letter-spacing:-.03em; margin:0 0 1rem; text-wrap:balance}
.aps-hero h1 .accent{color:var(--face)}
.aps-hero p{max-width:42rem; color:var(--ink-2); margin:0 auto; font-size:1.05rem}

.aps-feature{position:relative; display:grid; grid-template-columns:minmax(0,330px) minmax(0,1fr); gap:clamp(1.6rem,3.2vw,3rem); align-items:center;
  background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.3rem,2.6vw,2rem); box-shadow:0 26px 56px -26px rgba(0,0,0,.6); margin:1.8rem 0 3.2rem; text-decoration:none; overflow:hidden}
.aps-feature::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.aps-feature .ft-cover{aspect-ratio:1/1; border-radius:var(--radius); overflow:hidden; background:var(--field); box-shadow:0 18px 38px rgba(0,0,0,.4)}
.aps-feature .ft-cover img{width:100%; height:100%; object-fit:cover; display:block}
.aps-feature .ft-tag{display:inline-block; font:700 .74rem/1 var(--font-display); letter-spacing:.12em; text-transform:uppercase; color:var(--face); margin:0 0 .8rem}
.aps-feature h2{font-family:var(--font-display); font-weight:800; color:var(--ink); font-size:clamp(1.5rem,2.8vw,2.1rem); line-height:1.1; letter-spacing:-.02em; margin:0 0 .7rem}
.aps-feature .ft-desc{color:var(--ink-2); max-width:34rem; margin:0 0 1.4rem}
.aps-feature .ft-row{display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap}
.aps-feature .ft-price{font-family:var(--font-display); font-weight:800; font-size:1.6rem; color:var(--ink)}
@media(max-width:680px){.aps-feature{grid-template-columns:1fr; margin-top:1rem}.aps-feature .ft-cover{max-width:240px}}

.aps-toolbar{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.6rem 0 1.5rem; flex-wrap:wrap}
.aps-toolbar h2{font-family:var(--font-display); font-weight:800; color:var(--ink); font-size:clamp(1.2rem,2vw,1.45rem); margin:0}
.aps-sort{display:flex; align-items:center; gap:.5rem}
.aps-count{color:var(--ink-3); font-size:.92rem; font-weight:500}
.aps-sort form{margin:0}
.aps-sort select{font:600 .9rem/1 var(--font-body); color:var(--ink); background:var(--field); border:1px solid var(--line-2); border-radius:var(--radius); padding:.7rem 2.2rem .7rem 1rem; cursor:pointer; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238FA0BC' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .7rem center}

.aps-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:clamp(16px,2vw,24px); padding-bottom:2rem}
.aps-card{position:relative; display:flex; flex-direction:column; background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.6); transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s ease,box-shadow .3s ease}
.aps-card:hover{transform:translateY(-5px); border-color:rgba(255,179,107,.38); box-shadow:0 30px 60px -26px rgba(0,0,0,.7)}
.aps-card-link{position:absolute; inset:0; z-index:1}
.aps-card figure{position:relative; margin:0; aspect-ratio:1/1; overflow:hidden; background:var(--field)}
.aps-card figure::after{content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); background:linear-gradient(180deg,transparent 70%,rgba(5,13,30,.18))}
.aps-card figure img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.22,1,.36,1)}
.aps-card:hover figure img{transform:scale(1.04)}
.ac-body{padding:1rem; display:flex; flex-direction:column; gap:.5rem; flex:1}
.ac-title{font-family:var(--font-display); font-weight:800; font-size:1.02rem; line-height:1.2; color:var(--ink)}
.ac-foot{margin-top:auto; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding-top:.75rem}
.ac-price{flex:0 0 auto; font-family:var(--font-display); font-weight:800; color:var(--ink); font-size:1.2rem; letter-spacing:-.01em}
.aps-add{position:relative; z-index:2; flex:1 1 auto; min-width:118px; height:44px; padding:0 1rem; border-radius:var(--radius); border:1px solid var(--line-2); background:rgba(255,255,255,.04); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; gap:.45em; font:600 .86rem/1 var(--font-body); cursor:pointer; transition:background .2s ease,color .2s ease,border-color .2s ease,transform .15s ease}
.aps-add:hover{background:var(--face); border-color:var(--face); color:var(--face-ink)}
.aps-add:active{transform:scale(.97)}
.aps-add[disabled]{opacity:.5; cursor:not-allowed}
.aps-add.is-added{background:var(--face); border-color:var(--face); color:var(--face-ink)}
.aps-add svg{width:17px; height:17px}
@media(max-width:520px){
  .aps-grid{grid-template-columns:repeat(2,1fr); gap:12px}
  .ac-body{padding:.65rem .7rem .8rem; gap:.4rem}
  .ac-title{font-size:.92rem; line-height:1.18}
  .ac-price{font-size:1rem}
  .aps-add{min-width:100%; height:42px; font-size:.82rem}
}

/* ============ STRONA PRODUKTU ============ */
.aps-pdp-wrap{padding-top:1.5rem}
.crumb{font-size:.85rem; color:var(--ink-3); margin:0 0 1.2rem}
.crumb a{color:var(--ink-3); text-decoration:none} .crumb a:hover{color:var(--ink)}
.aps-pdp{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(1.6rem,4vw,3.2rem); padding:0 0 1rem; align-items:start}
.aps-gallery{display:grid; grid-template-columns:84px 1fr; gap:1rem; align-items:start}
.aps-thumbs{display:flex; flex-direction:column; gap:.6rem}
.aps-thumb{width:84px; height:84px; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--field); cursor:pointer; padding:0; flex:0 0 auto}
.aps-thumb.active{border-color:var(--face); box-shadow:0 0 0 2px rgba(255,179,107,.35)}
.aps-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.aps-stage{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); background:var(--field); aspect-ratio:1/1; box-shadow:0 26px 56px -26px rgba(0,0,0,.6)}
.aps-stage img{width:100%; height:100%; object-fit:cover; display:block}
.aps-sum h1{font-family:var(--font-display); font-weight:900; color:var(--ink); font-size:clamp(1.8rem,3.4vw,2.5rem); line-height:1.08; letter-spacing:-.02em; margin:0 0 1rem; text-wrap:balance}
.aps-sum .price{font-family:var(--font-display); font-weight:800; font-size:1.9rem; color:var(--ink); margin:0 0 1.2rem}
.aps-sum .desc{color:var(--ink-2); margin:0 0 1.6rem; max-width:34rem}
.aps-sum .btn-cta{margin:0 0 1.6rem}
.aps-meta{list-style:none; margin:0; padding:1.3rem 0 0; border-top:1px solid var(--line); display:grid; gap:.7rem}
.aps-meta li{display:flex; gap:.7rem; align-items:flex-start; color:var(--ink-2); font-size:.96rem}
.aps-meta svg{flex:0 0 auto; width:18px; height:18px; color:var(--face); margin-top:.18rem}
@media(max-width:768px){
  .aps-pdp{grid-template-columns:1fr; gap:1.6rem}
  .aps-gallery{grid-template-columns:1fr; gap:.7rem}
  .aps-stage{order:1}
  .aps-thumbs{order:2; flex-direction:row; overflow-x:auto; padding-bottom:.3rem}
}
.aps-related{padding:2.6rem 0 3rem}
.aps-related h2{font-family:var(--font-display); font-weight:800; color:var(--ink); font-size:1.4rem; margin:0 0 1.2rem}

/* ============ DRAWER ============ */
.aps-overlay{position:fixed; inset:0; background:rgba(3,8,20,.62); z-index:80; opacity:0; visibility:hidden; transition:opacity .3s ease,visibility .3s ease}
.aps-overlay.open{opacity:1; visibility:visible}
.aps-drawer{position:fixed; top:0; right:0; height:100%; width:min(420px,92vw); z-index:81; transform:translateX(100%); transition:transform .38s cubic-bezier(.22,1,.36,1); display:flex; flex-direction:column;
  background:linear-gradient(180deg,#13294a,#0b1d36); border-left:1px solid var(--line-2); box-shadow:-30px 0 70px rgba(0,0,0,.55)}
.aps-drawer.open{transform:none}
.aps-dhead{display:flex; align-items:center; justify-content:space-between; padding:1.2rem 1.3rem; border-bottom:1px solid var(--line)}
.aps-dhead h3{font-family:var(--font-display); font-weight:800; font-size:1.15rem; color:var(--ink); margin:0}
.aps-dclose{background:none; border:0; color:var(--ink-2); cursor:pointer; padding:.4rem; margin:-.4rem; border-radius:8px}
.aps-dclose:hover{color:var(--ink)}
.aps-dbody{flex:1; overflow-y:auto; padding:.8rem 1.3rem}
.aps-dempty{color:var(--ink-3); text-align:center; padding:2.5rem 1rem}
.aps-di{display:grid; grid-template-columns:58px 1fr auto; gap:.8rem; align-items:center; padding:.8rem 0; border-bottom:1px solid var(--line)}
.aps-di img{width:58px; height:58px; border-radius:10px; object-fit:cover; display:block; background:var(--field)}
.aps-di-name{font-weight:600; color:var(--ink); font-size:.92rem; line-height:1.25}
.aps-di-price{color:var(--ink-3); font-size:.86rem; margin-top:.2rem}
.aps-di-rm{background:none; border:0; color:var(--ink-3); cursor:pointer; font-size:.8rem; text-decoration:underline; padding:.3rem}
.aps-di-rm:hover{color:var(--face)}
.aps-dfoot{padding:1.1rem 1.3rem 1.3rem; border-top:1px solid var(--line-2); background:rgba(0,0,0,.16)}
.aps-dtotal{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1rem}
.aps-dtotal span{color:var(--ink-2)}
.aps-dtotal b{font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--ink)}
.aps-dfoot .btn-cta{margin-bottom:.6rem}
.aps-dnote{font-size:.8rem; color:var(--ink-3); text-align:center; margin:.7rem 0 0}

/* ============ KOSZYK / KASA ============ */
.aps-page-h{padding:2.4rem 0 1.6rem}
.aps-page-h h1{font-family:var(--font-display); font-weight:900; color:var(--ink); font-size:clamp(1.9rem,3.6vw,2.6rem); letter-spacing:-.02em; margin:0}
.aps-cart{display:grid; grid-template-columns:1fr 340px; gap:2.2rem; padding-bottom:3rem; align-items:start}
.aps-citems{display:flex; flex-direction:column; gap:.4rem}
.aps-citem{display:grid; grid-template-columns:84px 1fr auto; gap:1.1rem; align-items:center; padding:1.1rem 0; border-bottom:1px solid var(--line)}
.aps-citem img{width:84px; height:84px; border-radius:12px; object-fit:cover; background:var(--field)}
.aps-citem .ci-name{font-family:var(--font-display); font-weight:800; color:var(--ink); font-size:1.02rem}
.aps-citem .ci-tag{color:var(--ink-3); font-size:.85rem; margin-top:.2rem}
.aps-citem .ci-price{font-family:var(--font-display); font-weight:800; color:var(--ink); min-width:80px; text-align:right}
.aps-rm{display:inline-flex; align-items:center; justify-content:flex-end; min-height:44px; margin-top:.2rem; margin-left:auto; background:none; border:0; color:var(--ink-3); font-size:.82rem; text-decoration:underline; cursor:pointer}
.aps-rm:hover{color:var(--face)}
.aps-empty{padding:2rem 0 3rem; color:var(--ink-2)}
.aps-empty .btn-cta{margin-top:1.2rem}
.aps-summary{background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.5rem; box-shadow:0 18px 40px -22px rgba(0,0,0,.6)}
.aps-summary h3{font-family:var(--font-display); font-weight:800; color:var(--ink); font-size:1.1rem; margin:0 0 1.1rem}
.aps-srow{display:flex; justify-content:space-between; padding:.5rem 0; color:var(--ink-2); font-size:.96rem; gap:1rem}
.aps-srow.total{border-top:1px solid var(--line); margin-top:.6rem; padding-top:1rem; color:var(--ink)}
.aps-srow.total b{font-family:var(--font-display); font-size:1.4rem}
.aps-coupon{display:flex; gap:.5rem; margin:0}
.aps-coupon input{flex:1; min-width:0; background:rgba(255,255,255,.05); border:1px solid var(--line-2); border-radius:12px; color:var(--ink); padding:0 1rem; height:48px; font:500 .95rem var(--font-body)}
.aps-coupon-d{margin:1rem 0 1.3rem}
.aps-coupon-d summary{cursor:pointer; font-size:.88rem; color:var(--ink-3); list-style:none; padding:.4rem 0}
.aps-coupon-d summary::-webkit-details-marker{display:none}
.aps-coupon-d summary:hover{color:var(--ink)}
.aps-coupon-d .aps-coupon{margin:.6rem 0 0}
.aps-summary .btn-cta{margin-top:.3rem}
.pay-logos{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid var(--line)}
.pay-logos span.lbl{font-size:.78rem; color:var(--ink-3); width:100%}
.pay-chip{font:700 .68rem/1 var(--font-display); letter-spacing:.04em; color:var(--ink-2); background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:7px; padding:.4rem .55rem}
@media(max-width:820px){.aps-cart{grid-template-columns:1fr}}

.aps-checkout{display:grid; grid-template-columns:1fr 380px; gap:2.2rem; padding-bottom:3rem; align-items:start}
.aps-fieldset{background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.6rem; margin-bottom:1.4rem}
.aps-fieldset h3{font-family:var(--font-display); font-weight:800; color:var(--ink); font-size:1.1rem; margin:0 0 1.2rem}
.aps-pay{border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,.03); padding:1.1rem 1.2rem; display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1.2rem}
.aps-pay .dot{flex:0 0 auto; width:18px; height:18px; border-radius:50%; border:5px solid var(--ink-3); margin-top:.2rem}
.aps-pay .pay-t{font-weight:700; color:var(--ink)}
.aps-pay .pay-d{font-size:.9rem; color:var(--ink-2); margin-top:.2rem}
.pay-note{font-size:.82rem; color:var(--ink-3); margin:.7rem 0 0; text-align:center}
.aps-trust{display:flex; gap:1.4rem; flex-wrap:wrap; margin:0 0 1.4rem; padding:0; list-style:none}
.aps-trust li{display:flex; gap:.5rem; align-items:center; font-size:.86rem; color:var(--ink-3)}
.aps-trust svg{width:16px; height:16px; color:var(--face)}
@media(max-width:820px){.aps-checkout{grid-template-columns:1fr}}

/* ============ WooCommerce notices (minimal, on-brand) ============ */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.wc-block-components-notice-banner{
  background:rgba(255,255,255,.04); border:1px solid var(--line-2); color:var(--ink-2);
  border-radius:var(--radius); padding:1rem 1.2rem; margin:0 0 1.2rem; list-style:none}
.woocommerce-error{border-color:rgba(255,120,120,.4)}
.woocommerce-message a,.woocommerce-info a,.woocommerce-error a{color:var(--face)}

/* ============ focus-visible (a11y) — koralowy ring na granacie ============ */
.aps-card-link:focus-visible,.aps-add:focus-visible,.aps-buy:focus-visible,.aps-thumb:focus-visible,
.aps-cart-link:focus-visible,.aps-rm:focus-visible,.aps-di-rm:focus-visible,.aps-dclose:focus-visible,
.btn-cta:focus-visible,.btn-ghost:focus-visible,.nav-links a:focus-visible,.nav-cta:focus-visible,.burger:focus-visible,
.aps-sort select:focus-visible,.aps-coupon input:focus-visible,
.aps-co a:focus-visible,.aps-co button:focus-visible,.aps-co input:focus-visible,.aps-co select:focus-visible,.aps-co textarea:focus-visible{
  outline:2px solid var(--face); outline-offset:2px}