/* ==========================================================
   MICEY GLOBAL OVERRIDES — konkretne selektory z Twojego HTML
   Wklej na sam koniec global.css
   ========================================================== */

:root{
  --micey-clay:#FCB868;   /* pomarańcz */
  --micey-ice:#8EB8E5;    /* jasny niebieski */
  --micey-teal:#7FC6A4;   /* zielony/teal */
  --micey-dusk:#465775;
  --micey-neon:#F92A82;

 --micey-font-display:"Shantell Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* H1 */
  --micey-font-heading:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --micey-font-body:"Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --micey-font-hand:"Patrick Hand";
  --micey-font-fun: "Gloria Hallelujah"; 

  --micey-w-regular: 400;
  --micey-w-medium: 500;
  --micey-w-semibold: 600;
}

/* ===== TYPOGRAFIA (global) ===== */
body{
  font-family: var(--micey-font-body);
  font-weight: 400;
}
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
  font-family: var(--micey-font-heading);
  font-weight: 600;
}

/* ==========================================================
   1) BADGE "Nowy" / product flags
   HTML: <ul class="product-flags"><li class="badge new">Nowy</li></ul>
   ========================================================== */
ul.product-flags li.badge{
  font-family: var(--micey-font-display);
  font-weight: 400;
  letter-spacing: .6px;
  text-transform: uppercase;

  border: 2px solid rgba(0,0,0,.60);
  border-radius: 999px 860px 980px 820px;
  box-shadow: 0 2px 0 rgba(0,0,0,.12);

  padding: .35rem .65rem;
  line-height: 1.05;
}
ul.product-flags li.badge.new{
  background: var(--micey-ice); /* jasny niebieski */
  color: #111;
}

/* ==========================================================
   2) Tytuł miniatury produktu
   HTML: <p class="product-miniature__title">...</p> w <a>
   ========================================================== */
.product-miniature__infos__top a{
  text-decoration: none !important;
}
.product-miniature__infos__top a:hover{
  text-decoration: none !important;
}
.product-miniature__infos__top .product-miniature__title{
  font-family: var(--micey-font-display);
  font-weight: 400;
  color: #111;
  text-decoration: none !important;
  margin: 0;
}
@media (hover:hover){
  .product-miniature__infos__top a:hover .product-miniature__title{
    color: var(--micey-clay);
  }
}

/* ==========================================================
   3) Przycisk ADD TO CART (listing + gdziekolwiek jest ten markup)
   HTML: <button data-button-action="add-to-cart" class="btn btn-primary ...">
   - tło pomarańcz
   ========================================================== */
button[data-button-action="add-to-cart"].btn.btn-primary{
  background: var(--micey-clay);
  border-color: rgba(0,0,0,.65);
  color: #111;
  font-family: var(--micey-font-hand);
  letter-spacing: .6px;
  text-transform: uppercase;

  border-width: 2px;
  border-radius: 999px 860px 980px 820px;
  transform: rotate(-0.6deg);
  box-shadow: 0 3px 0 rgba(0,0,0,.22), 0 10px 16px rgba(0,0,0,.10);

  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
button[data-button-action="add-to-cart"].btn.btn-primary i.material-icons{
  color: inherit;
}
@media (hover:hover){
  button[data-button-action="add-to-cart"].btn.btn-primary:hover{
    transform: rotate(0deg) translateY(-1px);
    background: #FFD28A;
    box-shadow: 0 4px 0 rgba(0,0,0,.22), 0 14px 20px rgba(0,0,0,.12);
  }
}
button[data-button-action="add-to-cart"].btn.btn-primary:focus-visible{
  outline: 2px solid rgba(252,184,104,.55);
  outline-offset: 4px;
}

/* ==========================================================
   4) QTY (twoja struktura: .quantity-button .input-group ... )
   Ujednolicamy wygląd jak w Twoim wzorcu
   ========================================================== */
.quantity-button .input-group{
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid rgba(0,0,0,.35);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 0 rgba(0,0,0,.10);
}

.quantity-button .input-group input.form-control{
  width: 72px;
  text-align: center;
  border: 0;
  outline: 0;
  font-family: var(--micey-font-heading);
  font-weight: 700;
  font-size: 18px;
  color: #111;
  background: transparent;
  line-height: 1;
  padding: .4rem .25rem;
}

.quantity-button .input-group .btn{
  border: 0;
  background: transparent;
  min-width: 44px;
  padding: 0 12px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: rgba(0,0,0,.55);
  font-size: 22px;
  line-height: 1;
}
.quantity-button .input-group .btn:focus-visible{
  outline: 2px solid rgba(252,184,104,.55);
  outline-offset: 3px;
}

/* ==========================================================
   5) Link-button "Wszystkie nowe produkty"
   HTML: <a class="all-product-link btn btn-outline-primary" ...>
   - border + tekst pomarańcz
   ========================================================== */
a.all-product-link.btn.btn-outline-primary{
  border-color: var(--micey-clay);
  color: var(--micey-clay);
  background: transparent;
  font-family: var(--micey-font-heading);
  font-weight: 600;
}


.material-icons.rtl-flip {
    border-color: var(--micey-clay);
  color: var(--micey-clay);
  background: transparent;
}


@media (hover:hover){
  a.all-product-link.btn.btn-outline-primary:hover{
    background: rgba(252,184,104,.12);
    border-color: var(--micey-clay);
    color: #111;
  }
}
a.all-product-link.btn.btn-outline-primary:focus-visible{
  outline: 2px solid rgba(252,184,104,.55);
  outline-offset: 3px;
}

/* ==========================================================
   6) MODAL po dodaniu do koszyka
   - typografia: nagłówki Inter 600, treść Source Sans 3
   - przyciski:
     * "Przejdź do realizacji" -> zielony (filled)
     * "Kontynuuj zakupy" -> zielony (outline)
   ========================================================== */

/* nagłówki w modalu */
.modal-content h1,
.modal-content h2,
.modal-content h3,
.modal-content .modal-title{
  font-family: var(--micey-font-heading);
  font-weight: 600;
}

/* treść */
.modal-content,
.modal-content p,
.modal-content .modal-body{
  font-family: var(--micey-font-body);
  font-weight: 400;
}

/* Uwaga: targetujemy po href "/zamówienie" — dokładnie to co wkleiłaś */
a.btn.btn-primary[href*="/zamówienie"]{
  background: var(--micey-teal);
  color: #111;
  border: 2px solid rgba(0,0,0,.65);

  font-family: var(--micey-font-hand);
  letter-spacing: .6px;
  text-transform: uppercase;

  border-radius: 999px 860px 980px 820px;
  transform: rotate(-0.6deg);
  box-shadow: 0 3px 0 rgba(0,0,0,.22), 0 12px 18px rgba(0,0,0,.10);

  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
@media (hover:hover){
  a.btn.btn-primary[href*="/zamówienie"]:hover{
    transform: rotate(0deg) translateY(-1px);
    background: #A7E2C8; /* jaśniejszy teal */
    box-shadow: 0 4px 0 rgba(0,0,0,.22), 0 16px 22px rgba(0,0,0,.12);
  }
}

/* Kontynuuj zakupy — zielony outline (często btn-outline-primary lub btn-secondary; robimy bezpieczne scope w modalu) */
.modal-content a.btn.btn-outline-primary,
.modal-content a.btn.btn-outline-secondary,
.modal-content button.btn.btn-outline-primary,
.modal-content button.btn.btn-outline-secondary{
  border-color: var(--micey-teal);
  color: var(--micey-teal);
  background: transparent;

  font-family: var(--micey-font-heading);
  font-weight: 600;
}
@media (hover:hover){
  .modal-content a.btn.btn-outline-primary:hover,
  .modal-content a.btn.btn-outline-secondary:hover,
  .modal-content button.btn.btn-outline-primary:hover,
  .modal-content button.btn.btn-outline-secondary:hover{
    background: rgba(127,198,164,.14);
    color: #111;
  }
}


/* MODAL / CTA — "Przejdź do realizacji zamówienia" (koszyk?action=show) */
a.btn.btn-primary[href*="/koszyk"][href*="action=show"]{
  background: var(--micey-teal);
  color: #111;
  border: 2px solid rgba(0,0,0,.65);

  font-family: var(--micey-font-hand);
  letter-spacing: .6px;
  text-transform: uppercase;

  border-radius: 999px 860px 980px 820px;
  transform: rotate(-0.6deg);
  box-shadow: 0 3px 0 rgba(0,0,0,.22), 0 12px 18px rgba(0,0,0,.10);

  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}

@media (hover:hover){
  a.btn.btn-primary[href*="/koszyk"][href*="action=show"]:hover{
    transform: rotate(0deg) translateY(-1px);
    background: #A7E2C8; /* jaśniejszy teal */
    box-shadow: 0 4px 0 rgba(0,0,0,.22), 0 16px 22px rgba(0,0,0,.12);
  }
}

a.btn.btn-primary[href*="/koszyk"][href*="action=show"]:focus-visible{
  outline: 2px solid rgba(127,198,164,.55);
  outline-offset: 5px;
}



/* ==========================================================
   CART / MODAL — "Kontynuuj zakupy" (zielony outline)
   HTML: <a class="btn btn-outline-primary btn-with-icon" href="https://.../">
   ========================================================== */
a.btn.btn-outline-primary.btn-with-icon,
a.btn.btn-outline-primary.btn-with-icon{
  border-color: var(--micey-teal);
  color: var(--micey-teal);
  background: transparent;

  font-family: var(--micey-font-heading);
  font-weight: 600;
}

@media (hover:hover){
  a.btn.btn-outline-primary.btn-with-icon:hover,
  a.btn.btn-outline-primary.btn-with-icon:hover{
    background: rgba(127,198,164,.14);
    border-color: var(--micey-teal);
    color: #111;
    text-decoration: none;
  }
}

a.btn.btn-outline-primary.btn-with-icon:focus-visible,
a.btn.btn-outline-primary.btn-with-icon:focus-visible{
  outline: 2px solid rgba(127,198,164,.55);
  outline-offset: 4px;
}

/* ==========================================================
   CART — "Usuń" (różowy + underline)
   HTML: <a class="remove-from-cart" ... data-link-action="delete-from-cart">Usuń</a>
   ========================================================== */
a.remove-from-cart[data-link-action="delete-from-cart"]{
  color: var(--micey-neon);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(249, 42, 130, .55);
}

@media (hover:hover){
  a.remove-from-cart[data-link-action="delete-from-cart"]:hover{
    color: #111;
    text-decoration-color: rgba(0,0,0,.45);
  }
}

a.remove-from-cart[data-link-action="delete-from-cart"]:focus-visible{
  outline: 2px solid rgba(249, 42, 130, .35);
  outline-offset: 3px;
  border-radius: 6px;
}


/* ==========================================================
   CHECKOUT — TABS (Zamówienie jako gość / Zaloguj itp.)
   ========================================================== */

/* kontener zakładek (jeśli jest nav-tabs) */
.nav-tabs{
  border-bottom-color: rgba(0,0,0,.15);
}

/* tab nieaktywny */
.nav-tabs .nav-link{
  color: var(--micey-clay);
  border-color: rgba(252,184,104,.55);
  background: transparent;
}

/* hover tab */
@media (hover:hover){
  .nav-tabs .nav-link:hover{
    color: #111;
    background: rgba(252,184,104,.16);
    border-color: var(--micey-clay);
  }
}

/* tab aktywny */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link{
  color: #111;
  background: var(--micey-clay);
  border-color: var(--micey-clay);
}

/* focus */
.nav-tabs .nav-link:focus-visible{
  outline: 2px solid rgba(252,184,104,.55);
  outline-offset: 3px;
}

/* ==========================================================
   CHECKOUT — SHOW PASSWORD button (visibility)
   HTML: button.btn.btn-primary[data-action="show-password"]
   ========================================================== */
button.btn.btn-primary[data-action="show-password"]{
  background: var(--micey-clay);
  border-color: rgba(0,0,0,.65);
  color: #111;
}

@media (hover:hover){
  button.btn.btn-primary[data-action="show-password"]:hover{
    background: #FFD28A;
    border-color: rgba(0,0,0,.65);
    color: #111;
  }
}

button.btn.btn-primary[data-action="show-password"]:focus-visible{
  outline: 2px solid rgba(252,184,104,.55);
  outline-offset: 3px;
}

/* ==========================================================
   CART SUMMARY — "Pokaż szczegóły"
   HTML: a.cart-summary__show.js-show-details
   ========================================================== */


a.cart-summary__show.js-show-details{
  color: var(--micey-neon);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(249,42,130,.55);
}

@media (hover:hover){
  a.cart-summary__show.js-show-details:hover{
    color: var(--micey-clay);
    text-decoration-color: rgba(252,184,104,.75);
  }
}

a.cart-summary__show.js-show-details:focus-visible{
  outline: 2px solid rgba(249,42,130,.35);
  outline-offset: 3px;
  border-radius: 6px;
}


/* ==========================================================
   CART SUMMARY — ikonka przy "Pokaż szczegóły" ma mieć ten sam kolor co link
   ========================================================== */
a.cart-summary__show.js-show-details,
a.cart-summary__show.js-show-details span,
a.cart-summary__show.js-show-details i.material-icons{
  color: var(--micey-neon) !important; /* domyślnie róż */
}

@media (hover:hover){
  a.cart-summary__show.js-show-details:hover,
  a.cart-summary__show.js-show-details:hover span,
  a.cart-summary__show.js-show-details:hover i.material-icons{
    color: var(--micey-clay) !important; /* hover pomarańcz */
  }
}

/* (opcjonalnie) underline tylko na tekście, nie na ikonie */
a.cart-summary__show.js-show-details{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(249,42,130,.55);
}
@media (hover:hover){
  a.cart-summary__show.js-show-details:hover{
    text-decoration-color: rgba(252,184,104,.75);
  }
}

/* ==========================================================
   CHECKOUT — "Dalej" (button.continue btn btn-primary)
   duży + styl Micey brush
   ========================================================== */
button.continue.btn.btn-primary{
  position: relative;
  min-height: 58px;
  padding: 14px 22px;

  width: 100%;               /* duży (pełna szerokość w formach) */
  max-width: 520px;          /* żeby nie był komicznie szeroki na desktopie */

  font-family: var(--micey-font-display);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: .6px;
  text-transform: uppercase;

  background: var(--micey-clay);
  color: #111;

  border: 2px solid rgba(0,0,0,.65);
  border-radius: 999px 860px 980px 820px;
  transform: rotate(-0.6deg);

  box-shadow: 0 3px 0 rgba(0,0,0,.22), 0 12px 18px rgba(0,0,0,.10);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  white-space: nowrap;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}

button.continue.btn.btn-primary::after{
  content:"";
  position:absolute;
  inset:-4px;
  border: 2px solid rgba(0,0,0,.25);
  border-radius: 980px 920px 860px 1000px;
  transform: rotate(1.2deg);
  pointer-events:none;
}

@media (hover:hover){
  button.continue.btn.btn-primary:hover{
    transform: rotate(0deg) translateY(-1px);
    background: #FFD28A;
    box-shadow: 0 4px 0 rgba(0,0,0,.22), 0 16px 22px rgba(0,0,0,.12);
  }
}

button.continue.btn.btn-primary:focus-visible{
  outline: 2px solid rgba(252,184,104,.55);
  outline-offset: 5px;
}

button.continue.btn.btn-primary:disabled{
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}


.wishlist-button-add {
    display: none; 
}

/* Checkout "Powrót..." */
#content-wrapper .checkout .js-back.btn.btn-outline-primary.btn-with-icon{
  font-family: "Shantell Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 700;
}

/* Ikona*/
#content-wrapper .checkout .js-back.btn.btn-outline-primary.btn-with-icon i.material-icons{
  color: currentColor !important;
}


/* ============================================================
   FOOTER 
   ============================================================ */
.footer__block__title,
.footer__block__toggle .footer__block__title{
  font-family: var(--micey-font-display);
  font-weight: 500;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.2;
  letter-spacing: .2px;
}

.footer__block__content-list a,
.footer__block__content-contact,
.footer__block__content-contact a,
.footer__block__content-contact .contact__infos,
.footer__block__content-contact .contact__email a,
p.copyright,
p.copyright .copyright,
p.copyright a{
  font-family: var(--micey-font-body);
  font-weight: 400;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.55;
}



/* =========================================================
   CART / CHECKOUT (content-wrapper) — Typography + link styles
   - Headings: Shantell Sans
   - Product + meta + prices + "Usuń": Inter
   - "Usuń": neon pink, no underline, no blue hover
   - "Kontynuuj zakupy": Shantell + icon inherits green
   - "Przejdź do realizacji": Shantell (color stays)
   - "Popularne produkty" heading: Shantell
   ========================================================= */

/* 0) Safety: keep Material Icons font intact even if parent font changes */
#content-wrapper i.material-icons,
#content-wrapper .material-icons {
  font-family: "Material Icons" !important;
  font-weight: normal;
  font-style: normal;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1;
}

/* 1) Headings in cart */
#content-wrapper .cart-grid__body > h1.h4,
#content-wrapper .cart-grid__right > h2.h4,
#content-wrapper .featured-products .section-title {
  font-family: "Shantell Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 700;
}

/* 2) Cart product titles + meta + prices + summary content (Inter) */
#content-wrapper .cart-grid .product-line__title,
#content-wrapper .cart-grid .product-line__info,
#content-wrapper .cart-grid .product-line__prices,
#content-wrapper .cart-grid .price,
#content-wrapper .cart-grid .quantity-button,
#content-wrapper .cart-grid .product-line__actions,
#content-wrapper .cart-grid .product-line__content {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  max-width: 260px;
}

/* 3) Product title links */
#content-wrapper .cart-grid a.product-line__title,
#content-wrapper .cart-grid a.product-line__title:visited {
  color: inherit !important;
  text-decoration: none !important;
}
#content-wrapper .cart-grid a.product-line__title:hover,
#content-wrapper .cart-grid a.product-line__title:focus {
  color: inherit !important;
  text-decoration: none !important;
  opacity: 0.9;
}


#content-wrapper .cart-grid a.remove-from-cart,
#content-wrapper .cart-grid a.remove-from-cart:visited {
  color: #F92A82 !important; /* Neon Pink */
  text-decoration: none !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 600;
}
#content-wrapper .cart-grid a.remove-from-cart:hover,
#content-wrapper .cart-grid a.remove-from-cart:focus {
  color: #F92A82 !important;
  text-decoration: none !important;
  opacity: 0.85;
}

/* =========================================================
   CART — CTA buttons (Nowy checkout + Kontynuuj zakupy)
   Wymagania:
   - mco-cart-continue-mobile: TYLKO mobile
   - standardowy .btn-with-icon (w cart.tpl): TYLKO desktop
   - oba "Kontynuuj zakupy" w tej samej stylistyce: zielony filled + font display + ikona w tym samym kolorze
   - "Nowy checkout" (.mco-cartbtn): zielony filled, kwadratowy, biały tekst, pełna szerokość w card summary
   ========================================================= */

/* 1) VISIBILITY: desktop vs mobile */
#content-wrapper .cart-detailed__actions a.mco-cart-continue-mobile{
  display: none !important; /* domyślnie ukryte na desktopie */
}

@media (max-width: 767.98px){
  /* ukryj desktopowy przycisk z lewej kolumny na mobile */
  #content-wrapper .cart-grid__body .cart-container > a.btn.btn-outline-primary.btn-with-icon{
    display: none !important;
  }

  /* pokaż mobilny przycisk w podsumowaniu */
  #content-wrapper .cart-detailed__actions a.mco-cart-continue-mobile{
    display: inline-flex !important;
  }
}

/* 2) SHARED STYLE: "Kontynuuj zakupy" (desktop + mobile) */
#content-wrapper .cart-grid__body .cart-container > a.btn.btn-outline-primary.btn-with-icon,
#content-wrapper .cart-detailed__actions a.btn.btn-outline-primary.btn-with-icon.mco-cart-continue-mobile{
  background: var(--micey-dusk) !important;
  color: #fff !important;
  border: 2px solid rgba(0,0,0,.65) !important;

  font-family: var(--micey-font-display) !important;
  font-weight: 800 !important;

  border-radius: 8px !important; /* kwadratowy (bez piguły) */
  text-decoration: none !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#content-wrapper .cart-grid__body .cart-container > a.btn.btn-outline-primary.btn-with-icon i.material-icons,
#content-wrapper .cart-detailed__actions a.mco-cart-continue-mobile i.material-icons{
  color: currentColor !important; /* ikona "<" w tym samym kolorze co tekst */
}

@media (hover:hover){
  #content-wrapper .cart-grid__body .cart-container > a.btn.btn-outline-primary.btn-with-icon:hover,
  #content-wrapper .cart-detailed__actions a.mco-cart-continue-mobile:hover{
    background: #7e93b8  !important; /* jaśniejszy teal */
    color: #fff !important;
  }
}

#content-wrapper .cart-grid__body .cart-container > a.btn.btn-outline-primary.btn-with-icon:focus-visible,
#content-wrapper .cart-detailed__actions a.mco-cart-continue-mobile:focus-visible{
  outline: 2px solid rgba(127,198,164,.55) !important;
  outline-offset: 4px !important;
}

/* desktop button — kompaktowy */
#content-wrapper .cart-grid__body .cart-container > a.btn.btn-outline-primary.btn-with-icon{
  padding: 10px 14px;
}

/* mobile button (w card summary) — pełna szerokość + mały margines */
#content-wrapper .cart-detailed__actions a.mco-cart-continue-mobile{
  width: calc(100% - 12px);
  margin: 0 6px;
  padding: 10px 12px;
}

/* 3) STYLE: "Nowy checkout" (anchor z hooka) */
#content-wrapper .cart-detailed__actions .mco-cart-action{
  padding: 0 6px; /* mały margines od krawędzi card summary */
}

#content-wrapper .cart-detailed__actions a.btn.btn-outline-primary.mco-cartbtn{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--micey-teal) !important;
  color: #000 !important;
  border: 2px solid rgba(0,0,0,.65) !important;

  font-family: var(--micey-font-display) !important;
  font-weight: 900 !important;
  letter-spacing: .2px;

  border-radius: 8px !important; /* kwadratowy */
  text-decoration: none !important;

  padding: 14px 14px;
}

@media (hover:hover){
  #content-wrapper .cart-detailed__actions a.btn.btn-outline-primary.mco-cartbtn:hover{
    background: #A7E2C8 !important;
    color: #fff !important;
  }
}

#content-wrapper .cart-detailed__actions a.btn.btn-outline-primary.mco-cartbtn:focus-visible{
  outline: 2px solid rgba(127,198,164,.55) !important;
  outline-offset: 5px !important;
}


/* Preserve existing font rule for native checkout button (if theme shows it) */
#content-wrapper .cart-detailed__actions a.btn.btn-primary{
  font-family: "Shantell Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 700;
}

/* (Optional but useful) Also apply to the “All products” outline button in Featured Products footer */
#content-wrapper .featured-products-footer a.btn.btn-outline-primary.btn-with-icon {
  font-family: "Shantell Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 700;
}
#content-wrapper .featured-products-footer a.btn.btn-outline-primary.btn-with-icon i.material-icons {
  color: currentColor !important;
}

/* 7) CHECKOUT — steps bar (desktop + mobile) */
.checkout__steps{
  font-family: var(--micey-font-heading);
}

/* Domyślnie (nieaktywne) — szare */
.checkout__steps .checkout__steps__item{
  color: rgba(17,17,17,.38);
}

/* Aktywny krok — zielony */
.checkout__steps .checkout__steps__item.checkout__steps--current{
  color: var(--micey-teal);
}

/* Kółko z numerem (punkt) */
.checkout__steps .checkout__steps__number{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: clamp(28px, 3vw, 34px);
  height: clamp(28px, 3vw, 34px);

  border-radius: 999px;
  border: 2px solid currentColor;
  font-family: inherit;
  font-weight: var(--micey-w-medium);
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1;
}

/* Tekst kroku — Inter, bez linkowego stylu */
.checkout__steps .checkout__steps__text{
  font-family: inherit !important;
  font-weight: var(--micey-w-medium);
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.15;

  color: inherit !important;
  text-decoration: none !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Disabled nadal ma zostać szary i "nieklikalny" */
.checkout__steps .checkout__steps__text[disabled]{
  cursor: not-allowed;
  opacity: 1; /* bootstrap potrafi przygasić — chcemy kontrolować kolorem rodzica */
}

/* MOBILE (ring + tytuły) — Inter */
.checkout__steps .checkout__steps__mobile,
.checkout__steps .checkout__steps__mobile p{
  font-family: var(--micey-font-heading);
}

.checkout__steps .checkout__steps__mobile .progress-ring text{
  font-family: var(--micey-font-heading);
  font-weight: var(--micey-w-medium);
  fill: currentColor;
}


/* ==========================================================
   CHECKOUT – Steps bar (Inter + gray inactive + green active)
   + Back buttons (green outline)
   + Shipping radio buttons (green)
   + CTA "Przejdź do płatności" = Art Brush (jak Add to cart)
   ========================================================== */

/* --- Steps bar (desktop + mobile) --- */
.checkout__steps,
.checkout__steps *{
  font-family: var(--micey-font-title), Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.checkout__steps__text{
  font-family: var(--micey-font-title), Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #6c757d !important;
}

.checkout__steps__text.nav-link.active{
  color: #111 !important;
  background: transparent !important;
}

.checkout__steps__number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid #dee2e6;
  background: #f1f3f5;
  color: #6c757d;
  font-weight: 700;
  line-height: 1;
}

/* current */
.checkout__steps__item.checkout__steps--current .checkout__steps__number{
  background: var(--micey-teal);
  border-color: var(--micey-teal);
  color: #111;
}
.checkout__steps__item.checkout__steps--current .checkout__steps__text{
  color: #111 !important;
}

/* done/reachable (fallback: if theme adds a class) */
.checkout__steps__item.checkout__steps--complete .checkout__steps__number,
.checkout__steps__item.checkout__steps--done .checkout__steps__number,
.checkout__steps__item.checkout__steps--reachable .checkout__steps__number{
  background: var(--micey-teal);
  border-color: var(--micey-teal);
  color: #111;
}
.checkout__steps__item.checkout__steps--complete .checkout__steps__text,
.checkout__steps__item.checkout__steps--done .checkout__steps__text,
.checkout__steps__item.checkout__steps--reachable .checkout__steps__text{
  color: #111 !important;
}

/* done vs disabled (works in modern browsers; safe fallback above) */
.checkout__steps__item:has(> .checkout__steps__text:not([disabled])) .checkout__steps__number{
  background: var(--micey-teal);
  border-color: var(--micey-teal);
  color: #111;
}
.checkout__steps__item:has(> .checkout__steps__text:not([disabled])) .checkout__steps__text{
  color: #111 !important;
}
.checkout__steps__item:has(> .checkout__steps__text[disabled]) .checkout__steps__number{
  background: #f1f3f5;
  border-color: #dee2e6;
  color: #adb5bd;
}
.checkout__steps__item:has(> .checkout__steps__text[disabled]) .checkout__steps__text{
  color: #adb5bd !important;
}

/* --- Back buttons in checkout: --- */
body#checkout button.js-back.btn.btn-outline-primary{
  border-color: var(--micey-teal) !important;
  color: var(--micey-teal) !important;
  background: transparent !important;
}
@media (hover:hover){
  body#checkout button.js-back.btn.btn-outline-primary:hover{
    background: rgba(127,198,164,.18) !important;
    border-color: var(--micey-teal) !important;
    color: #111 !important;
  }
}
body#checkout button.js-back.btn.btn-outline-primary .material-icons{
  color: currentColor !important;
}

/* --- Checkout radios: blue -> green (teal) --- */
body#checkout .form-check-input:checked{
  background-color: var(--micey-teal) !important;
  border-color: var(--micey-teal) !important;
}
body#checkout .form-check-input:focus{
  border-color: var(--micey-teal) !important;
  box-shadow: 0 0 0 .2rem rgba(127,198,164,.25) !important;
}

/* Prestashop custom radio (delivery options) */
body#checkout .custom-radio input.form-check-input:checked + i.form-check-round{
  border-color: var(--micey-teal) !important;
}
body#checkout .custom-radio input.form-check-input:checked + i.form-check-round::before,
body#checkout .custom-radio input.form-check-input:checked + i.form-check-round::after,
body#checkout .custom-radio input.form-check-input:checked + i.form-check-round:before,
body#checkout .custom-radio input.form-check-input:checked + i.form-check-round:after{
  background-color: var(--micey-teal) !important;
}

/* --- CTA: "Przejdź do płatności" => Art Brush (jak Add to cart) --- */
body#checkout button[name="confirmDeliveryOption"].btn.btn-primary{
  font-family: var(--micey-font-hand) !important;
  letter-spacing: .6px;
  text-transform: uppercase;
  border: 2px solid rgba(0,0,0,.60);
  border-radius: 999px 860px 980px 820px;
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
  position: relative;
  overflow: hidden;
  background: transparent !important;
  background-color: transparent !important;
  color: #111 !important;
  z-index: 1;
}
body#checkout button[name="confirmDeliveryOption"].btn.btn-primary::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius: inherit;
  background: linear-gradient(135deg, #FCB868 0%, #FFD28A 45%, #FCB868 100%);
  transform: rotate(-2deg);
  z-index: -1;
}
@media (hover:hover){
  body#checkout button[name="confirmDeliveryOption"].btn.btn-primary:hover{
    transform: rotate(.5deg) translateY(-1px);
    box-shadow: 0 4px 0 rgba(0,0,0,.20), 0 14px 18px rgba(0,0,0,.10);
  }
  body#checkout button[name="confirmDeliveryOption"].btn.btn-primary:hover::before{
    transform: rotate(-1deg) scale(1.02);
  }
}
body#checkout button[name="confirmDeliveryOption"].btn.btn-primary:focus-visible{
  outline: 2px solid rgba(252,184,104,.55);
  outline-offset: 5px;
}
body#checkout button[name="confirmDeliveryOption"].btn.btn-primary .material-icons{
  color: currentColor !important;
}

/* ==========================================================
   CHECKOUT – Payment: "Złóż zamówienie" (Art Brush)
   ========================================================== */

body#checkout .payment__actions > button.btn.btn-primary,
body#checkout #payment-confirmation button.btn.btn-primary[type="submit"],
body#checkout #payment-confirmation button.btn.btn-primary{
  font-family: var(--micey-font-hand) !important;
  letter-spacing: .6px;
  text-transform: uppercase;
  border: 2px solid rgba(0,0,0,.60) !important;
  border-radius: 999px 860px 980px 820px !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.12) !important;
  position: relative;
  overflow: hidden;
  background: transparent !important;
  background-color: transparent !important;
  color: #111 !important;
  z-index: 1;
}

body#checkout .payment__actions > button.btn.btn-primary::before,
body#checkout #payment-confirmation button.btn.btn-primary::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius: inherit;
  background: linear-gradient(135deg, #FCB868 0%, #FFD28A 45%, #FCB868 100%);
  transform: rotate(-2deg);
  z-index: -1;
}

@media (hover:hover){
  body#checkout .payment__actions > button.btn.btn-primary:not(:disabled):not(.disabled):hover,
  body#checkout #payment-confirmation button.btn.btn-primary:not(:disabled):not(.disabled):hover{
    transform: rotate(.5deg) translateY(-1px);
    box-shadow: 0 4px 0 rgba(0,0,0,.20), 0 14px 18px rgba(0,0,0,.10) !important;
  }
  body#checkout .payment__actions > button.btn.btn-primary:not(:disabled):not(.disabled):hover::before,
  body#checkout #payment-confirmation button.btn.btn-primary:not(:disabled):not(.disabled):hover::before{
    transform: rotate(-1deg) scale(1.02);
  }
}

body#checkout .payment__actions > button.btn.btn-primary .material-icons,
body#checkout #payment-confirmation button.btn.btn-primary .material-icons{
  color: currentColor !important;
}

/* Disabled look – nadal "brush", ale przygaszony */
body#checkout .payment__actions > button.btn.btn-primary:disabled,
body#checkout .payment__actions > button.btn.btn-primary.disabled,
body#checkout #payment-confirmation button.btn.btn-primary:disabled,
body#checkout #payment-confirmation button.btn.btn-primary.disabled{
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}


.funfact {
  font-family: var(--micey-font-fun);
  font-weight: 400;
}


.page-title-section{
  font-family: var(--micey-font-display);
}

.product-miniature__quickview_button {

  color:#465775; 

}

.wishlist-button-add{

  display: none;
}




@media (max-width: 767px) {
.ps_categorytree {
  display: none; 
}

}


.installment-widget-max { 
  display: none; 
}

.js-przelewy24-installment-widget-max {
display: none; 

}


/* ==========================================================
   FIX: CART QTY 
   ========================================================== */
#content-wrapper .cart-grid .quantity-button{
  max-width: 100% !important;
}

#content-wrapper .cart-grid .quantity-button .input-group{
  display: inline-flex;
  width: fit-content;     
  max-width: 100%;        
  margin: 0 auto;         
}

#content-wrapper .cart-grid .quantity-button .input-group input.form-control{
  flex: 0 0 auto;
  width: 52px;            
  min-width: 44px;
  padding: .35rem .15rem;
}

#content-wrapper .cart-grid .quantity-button .input-group .btn{
  flex: 0 0 auto;
  min-width: 38px;        
  padding: 0 10px;      
}

@media (max-width: 480px){
  #content-wrapper .cart-grid .quantity-button .input-group input.form-control{
    width: 44px;
  }
  #content-wrapper .cart-grid .quantity-button .input-group .btn{
    min-width: 34px;
    padding: 0 8px;
  }
}


/* ==========================================================
   BLOCKCART MODAL 
   ========================================================== */

#blockcart-modal .cart-footer-actions .btn{
  border-radius: 8px !important;                 /* kwadratowo */
  border-width: 2px !important;
  border-style: solid !important;
  border-color: rgba(0,0,0,.65) !important;

  font-family: var(--micey-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: .2px;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  text-decoration: none !important;
}

/* Ikona "<" */
#blockcart-modal .cart-footer-actions i.material-icons{
  color: currentColor !important;
}

/* 1) Kontynuuj zakupy (button) */
#blockcart-modal .cart-footer-actions button.btn.btn-outline-primary.btn-with-icon{
  background: var(--micey-dusk) !important;
  color: #fff !important;
}

/* 2) Przejdź do realizacji */
#blockcart-modal .cart-footer-actions a.btn.btn-primary{
  background: var(--micey-teal) !important;
  color: #000 !important;
}

/* Hover*/
@media (hover:hover){
  #blockcart-modal .cart-footer-actions button.btn.btn-outline-primary.btn-with-icon:hover{
    background: #7e93b8 !important;
    color: #fff !important;
  }
  #blockcart-modal .cart-footer-actions a.btn.btn-primary:hover{
    background: #A7E2C8 !important;
    color: #fff !important; 
  }
}

/* Focus */
#blockcart-modal .cart-footer-actions .btn:focus-visible{
  outline: 2px solid rgba(127,198,164,.55) !important;
  outline-offset: 4px !important;
}


/*Etykietka od perso*/


	li.badge.personalized {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 8px 16px 9px;
  min-height: 34px;
  list-style: none;
  white-space: nowrap;

  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: inherit;
  color: #211914;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22);

  background: linear-gradient(180deg, #f8c46f 0%, #efb255 100%);
  border: 2px solid #2a211c;
  border-radius: 18px 22px 18px 20px / 16px 18px 16px 18px;

  box-shadow:
    0 3px 0 #2a211c,
    0 8px 14px rgba(0, 0, 0, 0.08);

  transform: rotate(-1.4deg);
  transform-origin: left center;
  isolation: isolate;
  overflow: visible;

  animation: personalizedBadgeFloat 3.2s ease-in-out infinite;
}

li.badge.personalized::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(42, 33, 28, 0.20);
  border-radius: 14px 18px 14px 16px / 14px 16px 14px 16px;
  pointer-events: none;
}

li.badge.personalized::after {
  content: "";
  position: absolute;
  inset: -6px -10px;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;

  background:
    radial-gradient(circle at 50% 50%,
      rgba(249, 42, 130, 0.12) 0%,
      rgba(252, 184, 104, 0.16) 38%,
      rgba(252, 184, 104, 0) 72%);

  filter: blur(6px);
  opacity: 0.55;

  animation: personalizedBadgeGlow 3.2s ease-in-out infinite;
}

@keyframes personalizedBadgeFloat {
  0%, 100% {
    transform: rotate(-1.4deg) translateY(0);
    box-shadow:
      0 3px 0 #2a211c,
      0 8px 14px rgba(0, 0, 0, 0.08);
  }
  50% {
    transform: rotate(-1.4deg) translateY(-2px);
    box-shadow:
      0 4px 0 #2a211c,
      0 12px 18px rgba(0, 0, 0, 0.11);
  }
}

@keyframes personalizedBadgeGlow {
  0%, 100% {
    opacity: 0.38;
    transform: scale(0.98);
  }
  50% {
    opacity: 0.72;
    transform: scale(1.04);
  }
}

.product-miniature:hover li.badge.personalized,
.thumbnail-container:hover li.badge.personalized,
.js-product-miniature:hover li.badge.personalized {
  animation-duration: 2.2s;
}

@media (prefers-reduced-motion: reduce) {
  li.badge.personalized,
  li.badge.personalized::after {
    animation: none;
  }
}


/*Pagincja */

.pagination.pagination--custom {
  --pg-ink: #2a211c;
  --pg-paper: #fffaf3;
  --pg-paper-2: #f8f1e7;
  --pg-accent: #efb255;
  --pg-accent-2: #f8c46f;
  --pg-shadow: rgba(42, 33, 28, 0.10);
  --pg-shadow-strong: rgba(42, 33, 28, 0.16);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 28px 0 10px;
  padding: 0;
  list-style: none;
}

.pagination.pagination--custom .page-item {
  margin: 0;
}

.pagination.pagination--custom .page-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-width: 46px;
  height: 46px;
  padding: 0 16px;

  border: 2px solid var(--pg-ink);
  border-radius: 16px 18px 16px 18px / 15px 17px 15px 17px;
  background: linear-gradient(180deg, var(--pg-paper) 0%, var(--pg-paper-2) 100%);
  color: var(--pg-ink);
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  box-shadow:
    0 3px 0 rgba(42, 33, 28, 0.75),
    0 8px 16px var(--pg-shadow);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.pagination.pagination--custom .page-link::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(42, 33, 28, 0.14);
  border-radius: 11px 13px 11px 13px / 11px 12px 11px 12px;
  pointer-events: none;
}

.pagination.pagination--custom .page-link:hover {
  transform: translateY(-2px) rotate(-0.4deg);
  background: linear-gradient(180deg, #fffdf9 0%, #f7ecdf 100%);
  box-shadow:
    0 4px 0 rgba(42, 33, 28, 0.75),
    0 12px 18px var(--pg-shadow-strong);
}

.pagination.pagination--custom .page-link:focus-visible {
  outline: none;
  box-shadow:
    0 3px 0 rgba(42, 33, 28, 0.75),
    0 0 0 4px rgba(249, 42, 130, 0.16),
    0 0 0 7px rgba(239, 178, 85, 0.22);
}

.pagination.pagination--custom .page-item.active .page-link,
.pagination.pagination--custom .page-item[aria-current="page"] .page-link {
  background: linear-gradient(180deg, var(--pg-accent-2) 0%, var(--pg-accent) 100%);
  color: #1f1712;
  border-color: var(--pg-ink);
  box-shadow:
    0 4px 0 rgba(42, 33, 28, 0.78),
    0 10px 18px rgba(239, 178, 85, 0.28);
  transform: translateY(-1px);
  cursor: default;
}

.pagination.pagination--custom .page-item.active .page-link::after,
.pagination.pagination--custom .page-item[aria-current="page"] .page-link::after {
  content: "";
  position: absolute;
  bottom: -7px;
  right: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f92a82;
  border: 2px solid #fffaf3;
  box-shadow: 0 0 0 1px var(--pg-ink);
}

.pagination.pagination--custom .page-item.disabled .page-link,
.pagination.pagination--custom .page-item.disabled span.page-link,
.pagination.pagination--custom .page-link.disabled {
  background: #f5efe7;
  color: rgba(42, 33, 28, 0.45);
  border-color: rgba(42, 33, 28, 0.35);
  box-shadow: none;
  transform: none;
  cursor: default;
  pointer-events: none;
}

.pagination.pagination--custom .page-item.disabled span.page-link {
  min-width: 46px;
  height: 46px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.pagination.pagination--custom .previous .material-icons,
.pagination.pagination--custom .next .material-icons {
  font-size: 20px;
  line-height: 1;
}

.pagination.pagination--custom .previous,
.pagination.pagination--custom .next {
  padding-left: 18px;
  padding-right: 18px;
  min-width: 54px;
}

.pagination.pagination--custom .previous .d-none.d-xl-flex,
.pagination.pagination--custom .next .d-none.d-xl-flex {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

@media (max-width: 767.98px) {
  .pagination.pagination--custom {
    gap: 8px;
    margin-top: 22px;
  }

  .pagination.pagination--custom .page-link,
  .pagination.pagination--custom .page-item.disabled span.page-link {
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    font-size: 14px;
    border-radius: 14px 16px 14px 16px / 14px 15px 14px 15px;
  }

  .pagination.pagination--custom .previous,
  .pagination.pagination--custom .next {
    padding-left: 14px;
    padding-right: 14px;
  }
}