/*
 Theme Name: Twenty Twenty-Five Child
 Theme URI: https://affectivefeudalism.com
 Author: Szymon
 Author URI: 
 Description: Custom child theme for Twenty Twenty-Five — typography, layout adjustments, and visual polish.
 Requires at least: 6.9
 Tested up to: 6.9
 Requires PHP: 5.7
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Template: twentytwentyfive
 Text Domain: twentytwentyfive-child
 Tags: 
*/

/* ===================================================================
   1. CORE — GLOBAL RESETS & UTILITIES
   =================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  font-feature-settings: "kern", "liga", "onum";
}

/* PAGE / HOME - Layout */
.wp-singular {
    margin-top: var(--wp--preset--spacing--70) !important;
}
.wp-singular:not(.home) main {
    margin-bottom: var(--wp--preset--spacing--70) !important;
}

@media (min-width: 1200px) {
    .wp-singular {
        margin-top: var(--wp--preset--spacing--80) !important;
    }
    .wp-singular:not(.home) main {
      margin-bottom: var(--wp--preset--spacing--90) !important;
    }
}

/* ===================================================================
   2. TYPOGRAPHY
   =================================================================== */

em {
  color: var(--wp--preset--color--accent);
  font-style: italic;
  font-weight: 300;
  font-family: var(--wp--preset--font-family--serif);
}

/* Ceny, liczby w UI - lining numerals (równe wysokości) */
.woocommerce-Price-amount,
.wp-block-woocommerce-product-price,
[data-block-name="woocommerce/product-price"],
.wc-block-components-product-price,
.wc-block-cart-item__total,
.wc-block-formatted-money-amount,
nav, header,
.theme-toggle-btn,
input[type="number"] {
    font-feature-settings: "kern", "liga", "lnum", "tnum";
}
/*  */
/* ===================================================================
   3. STICKY NAVIGATION — FIXED HEADER
   =================================================================== */

header.wp-block-template-part {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: hsla(0, 0%, 95%, 0.562);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--wp--preset--color--line);
}

header.wp-block-template-part .btn-custom {
  margin-left: 20px;
}

.btn-small.btn-custom a {
  padding: 9px 18px;
  font-size: 13px;
}

.wp-block-navigation.is-layout-flex {
  margin-right: 10px;
}

/* Site Tagline — visible on desktop only */
header.wp-block-template-part .wp-block-site-tagline {
  display: none;
  font-size: 15px;
}

@media (min-width: 1200px) {
  header.wp-block-template-part .wp-block-site-tagline {
    display: inline-block;
  }
}

/* ===================================================================
   4. NAVIGATION — MOBILE MODAL & RESPONSIVE
   =================================================================== */

#modal-1.has-modal-open.wp-block-navigation__responsive-container {
  height: 100vh !important;
  padding: var(--wp--preset--spacing--50) !important;
  background: var(--wp--preset--color--cream);
}

.wp-block-navigation .current-menu-item a {
    color: var(--wp--preset--color--accent) !important;
}

.af-logo { display:inline-flex; align-items:center; line-height:0; flex-shrink:0; }
.af-logo__img { display:block; width:44px; height:44px; }

/* light mode default */
.af-logo__img--dark  { display:none; }
.dark-mode .af-logo__img--light { display:none; }
.dark-mode .af-logo__img--dark  { display:block; }

.top_brand {
  gap: 0px !important
}
.top_brand .wp-block-site-tagline {
  margin-top: -4px;
}

/* ===================================================================
   5. PLUGINS — TRANSLATEPRESS (LANGUAGE SWITCHER)
   =================================================================== */

.trp-shortcode-switcher__wrapper {
  margin-left: 8px !important;
}

.trp-shortcode-switcher__wrapper p {
  margin: 0px !important;
}

.trp-shortcode-switcher__wrapper .trp-shortcode-switcher {
  padding-top: 5px !important;
}

svg.trp-shortcode-arrow {
  display: none !important;
}

.trp-shortcode-switcher {
  padding: 0 !important;
}

.trp-language-switcher.is-open .trp-switcher-dropdown-list {
  max-height: 100px !important;	
}

.trp-shortcode-switcher .trp-switcher-dropdown-list {
  flex-direction: inherit !important;
}

.trp-shortcode-switcher__wrapper .trp-language-item {
  /* padding: 7px 0px !important; */
  gap: 0px !important;
}

.trp-language-item-name {
  margin-left: 7px;
  /* 
     Przypisujemy kolor tekstu z Twojego motywu. 
     Używamy !important, ponieważ wtyczki językowe często wymuszają swoje własne kolory w DOM 
  */
  color: var(--wp--preset--color--ink-2) !important; 
}

/* Remove Flag USA / PL */
.trp-shortcode-switcher__wrapper .trp-flag-image {
  display: none !important
}
/* 2. Schowaj oryginalny tekst (English/Polish), zostaw element żywy dla ::after */
.trp-shortcode-switcher__wrapper .trp-language-item-name {
  font-size: 0;
  line-height: 0;
  margin: 0px;
}
.trp-shortcode-switcher__wrapper .trp-language-item-name::after {
  font-size: 13px;
  line-height: normal;
}

/* 3. Rozpoznaj język po adresie flagi i wstaw własny skrót */
.trp-shortcode-switcher__wrapper img[src*="en_US"] ~ .trp-language-item-name::after {
  content: "EN";
}
.trp-shortcode-switcher__wrapper img[src*="pl_PL"] ~ .trp-language-item-name::after {
  content: "PL";
}

/* 4. Styl przycisku aktualnego języka — outline, bez tła, zaokrąglony */
.trp-shortcode-switcher__wrapper .trp-language-item__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border: 1px solid var(--text, #143852) !important;
  border-radius: 20px !important;
  background: transparent !important;
  color: var(--text, #143852);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-duration, .2s), color var(--transition-duration, .2s);
}

.trp-shortcode-switcher__wrapper .trp-language-item__current:hover {
  background: rgba(20, 56, 82, 0.08) !important;
}

/* 5. Mniejsza strzałka, dopasowana do małego przycisku */
.trp-shortcode-switcher__wrapper .trp-shortcode-arrow {
  width: 14px;
  height: 14px;
  margin-left: 4px;
}

/* ===================================================================
   6. WOOCOMMERCE — ICONS & ACCOUNT
   =================================================================== */

:where(.wp-block-woocommerce-customer-account .wc-block-customer-account__link) .wc-block-customer-account__account-icon,
.wc-block-mini-cart__button .wc-block-mini-cart__icon {
  height: 1.75em;
  width: 1.75em;
}

/* ======================================
Woocommerce - Block Mini Card and Cart BTN
======================================== */
.wc-block-mini-cart__button .wc-block-mini-cart__badge {  
  background-color: var(--wp--preset--color--paper) !important;
  color: var(--wp--preset--color--ink-2) !important
}

/* ===================================================================
   7. PLUGINS — MULTI-CURRENCY (WC Multi-Currency)
   =================================================================== */

.woo-multi-currency,
.wmc-switcher-container {
  display: none !important;
}

/* ===================================================================
   8. HERO SECTION — PARALLAX + LEAF BACKGROUND
   =================================================================== */

@media screen and (max-width: 810px) {
    .is-style-af-hero .wp-block-columns {
      display: flex;
       flex-direction: column;
    }
  .is-style-af-hero .wp-block-columns .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;  
  }
 .is-style-af-hero .wp-block-columns .col-img > .wp-block-group {
    height: 50vh;
  }
}

.is-style-af-hero {
  position: relative;
  overflow: hidden;
}

@media(min-width: 712px) and (max-width: 1023px) {
  .is-style-af-hero .wp-block-columns {
    text-align: center !important;
  }
  .is-style-af-hero .wp-block-columns .wp-block-buttons {
    display: flex;
    justify-content: center;
  }
}

.is-style-af-hero .wp-block-columns {
  gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

@media (min-width: 600px) {
  .is-style-af-hero::before {
    content: "";
    position: absolute;
    top: 0;
    right: -5%;
    width: 70%;
    height: 100%;
    background-image: url("./assets/leaf.webp");
    background-size: cover;
    background-position: center;
    -webkit-mask-image: radial-gradient(ellipse at 70% 50%, black 0%, transparent 70%);
    mask-image: radial-gradient(ellipse at 70% 50%, black 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.12;
    filter: invert(1);
    mix-blend-mode: multiply;
  }
}

.is-style-af-hero > * {
  position: relative;
  z-index: 1;
}

/* .is-style-af-hero > .wp-block-columns {  margin-top: 1vh; } */

.is-style-af-hero .col-img {
  min-height: 350px;
}
@media (min-width:  712px) and (max-width: 1024px) {
  .is-style-af-hero .col-img {
    min-height: 550px;
  }
}

@media (min-width: 1200px) {
  .is-style-af-hero {
    padding-top: 13.7vh !important;
  }
}

/* ===================================================================
   9. HERO — COVER STACK (SLIGHTLY TILTED IMAGE CARDS)
   =================================================================== */

.is-style-af-cover-stack {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.is-style-af-cover-stack figure {
  max-width: 280px;
  position: absolute;
}

.is-style-af-cover-stack .wp-block-image:nth-child(1) {
  transform: rotate(-8deg) translateX(-20px);
  transition: transform 0.5s cubic-bezier(.2, .9, .3, 1);
}

.is-style-af-cover-stack .wp-block-image:nth-child(2) {
  z-index: 2;
}

.is-style-af-cover-stack .wp-block-image:nth-child(3) {
  transform: rotate(9deg) translateX(20px);
  transition: transform 0.5s cubic-bezier(.2, .9, .3, 1);
  z-index: 3;
}

.is-style-af-cover-stack:hover .wp-block-image:nth-child(1) {
  transform: rotate(-13deg) translateX(-28px) translateY(-4px);
}

.is-style-af-cover-stack:hover .wp-block-image:nth-child(3) {
  transform: rotate(14deg) translateX(28px) translateY(4px);
}

.is-style-af-cover-stack .wp-block-image img {
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 10px 30px rgba(80, 60, 30, 0.12),
    0 30px 60px rgba(80, 60, 30, 0.15);
}

@media (min-width: 712px) and (max-width: 1024px) { 
  .is-style-af-cover-stack figure {
    max-width: 280px !important;
  }
}

@media (min-width: 1360px) {
  .is-style-af-cover-stack figure {
    max-width: 300px;
  }
}

@media (min-width: 1920px) {
  .is-style-af-cover-stack figure {
    max-width: 340px;
  }
}

/* ===================================================================
   10. SECTION LABELS — DOT + TEXT BADGE
   =================================================================== */

.is-style-af-section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--wp--preset--color--accent);
  letter-spacing: 0.01em;
}

.is-style-af-section-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent);
}

/* ===================================================================
   11. UI HELPERS — POSITION & BADGE
   =================================================================== */

.p-relative {
  position: relative;
}

.badge-small > * {
  padding: 0.9em 1.575em;
}

/* ===================================================================
   12. SECTION LAYOUT — FULL-WIDTH BACKGROUNDS (MOBILE FIX)
   =================================================================== */

@media screen and (max-width: 1460px) {
  .alignfull.has-background > .wp-block-group,
  .alignfull.has-background > .wp-block-columns {
    padding-left: var(--wp--preset--spacing--50) !important;
    padding-right: var(--wp--preset--spacing--50) !important;
  }

  .alignfull.has-background .wp-block-columns.alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

main {
  margin-block-start: 0rem !important;
  margin-block-end: 0rem !important;
}

/* ===================================================================
   13. NEW — FEATURED SECTION (PRODUCT SHOWCASE)
   =================================================================== */
.section-new .badge-white {
  position: absolute;
  z-index: 5;
  top: -15px;
  left: 20px;
}

.section-new figure {
  z-index: 4;
  position: relative;
}

.section-new figure img {
  padding: 0px 5px;
}

.section-new .featured-visual {
  background: var(--wp--preset--color--tan); /* Zmienione z #d4c4a4 na zmienną --wp--preset--color--tan */
  color: #7a5f5f; 
  padding: 20px;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(80, 60, 30, 0.08), 0 30px 60px rgba(80, 60, 30, 0.12);
}

@media (min-width: 600px) {
  .section-new .featured-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("./assets/leaf.webp");
    background-size: cover;
    background-position: center;
    opacity: 0.27;
    filter: invert(1);
    mix-blend-mode: overlay;
  }
}

@media (min-width: 712px) {
  .section-new .featured-visual {
      max-width: 55%;
  }
  .section-new figure img {
    padding: 0px 20px;
  }
}
@media (min-width: 810px) {
   .section-new  .featured-first-col {
      flex-grow: 0 !important;
      flex-basis: 40% !important;
  }
  .section-new .featured-visual {
      max-width: 90%;
  }
}

@media (min-width: 1024px) {
   .section-new .featured-first-col  {    
      flex-basis: 40% !important;
     }

    .section-new > .wp-block-group > .wp-block-columns {
      gap: 50px
    }
}

@media (min-width: 1360px) {
   .section-new .featured-first-col {
    flex-basis:  34% !important;  
  }

  .section-new figure img {
    max-width: 360px;
  }
  .section-new .badge-white {
    top: 0px;
    left: 30px;
  }

  .section-new .new-info-data {
    max-width: 80% !important;
  }
}
 @media (min-width: 1536px) and (max-width: 1919px) {
   .section-new .featured-first-col {
    flex-basis:  28% !important;
  }
  .section-new figure img {
    max-width: 310px;
  }
  .section-new .badge-white {
    top: -15px;
    left: 20px;
  }
 }

/* 14 - remove */

/* ===================================================================
   15. TAGS & BADGES — PILL STYLING
   =================================================================== */

.is-style-af-tag {
  display: inline-block;
  background: var(--wp--preset--color--tan-soft);
  color: var(--wp--preset--color--ink-2);
  padding: 4px 11px;
  border-radius: 999px;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 11px;
  font-weight: 500;
  margin: 0 4px 4px 0;
}

.is-style-af-blog-category {
  display: inline-block;
  background: var(--wp--preset--color--accent-soft);
  color: var(--wp--preset--color--accent);
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 12px;
  font-weight: 500;
}

/* ===================================================================
   16. OFFER ROW — BOOKING LIST HOVER
   =================================================================== */

.is-style-af-offer-row {
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.is-style-af-offer-row:hover {
  transform: translateX(4px);
  border-color: var(--wp--preset--color--line-2) !important;
}

/* ===================================================================
   17. BUTTONS — PILL (ANTHROPIC STYLE)
   =================================================================== */

.wp-block-button.is-style-af-pill .wp-block-button__link {
  border-radius: 999px;
  padding: 14px 24px;
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 500;
  font-size: 14px;
  transition: all 0.2s ease;
}


/* AF Pill — hover text color */
.wp-block-button.is-style-af-pill .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:hover span, /* woocommerce btn */
.wp-block-button.is-style-af-pill.is-style-outline .wp-block-button__link:hover,
.wc-block-mini-cart__footer-checkout:hover, /*  mini card btn checkout */
.add_to_cart_button:hover,
.wp-block-woocommerce-filled-mini-cart-contents-block .wc-block-mini-cart__footer-cart:hover { /* mini card btn */
    background: var(--wp--preset--color--accent) !important;
    color: var(--wp--preset--color--cream-2) !important;
}

/* ===================================================================
   18. EDITORIAL QUOTE BLOCK
   =================================================================== */

.wp-block-quote.is-style-af-editorial {
  border-left: 3px solid var(--wp--preset--color--accent);
  padding: 12px 0 12px 28px;
  margin: 30px 0;
  font-family: var(--wp--preset--font-family--serif);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--wp--preset--color--ink);
  background: transparent;
}

/* ===================================================================
   19. SOFT BOX — NOTICE / UPCOMING CALLOUT
   =================================================================== */

.is-style-af-soft-box {
  background: var(--wp--preset--color--tan-soft);
  border-radius: 8px;
  padding: 18px 22px;
  font-family: var(--wp--preset--font-family--serif);
  font-size: 0.98rem;
  line-height: 1.55;
}

/* ===================================================================
   20. CONTACT FORM — CF7 / WPForms Compatible
   =================================================================== */

.is-style-af-form input[type="text"],
.is-style-af-form input[type="email"],
.is-style-af-form input[type="url"],
.is-style-af-form select,
.is-style-af-form textarea {
  width: 100%;
  background: var(--wp--preset--color--cream);
  border: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--serif);
  font-size: 15px;
  padding: 12px 16px;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s, background-color 0.2s;
}

.is-style-af-form input:focus,
.is-style-af-form select:focus,
.is-style-af-form textarea:focus {
  border-color: var(--wp--preset--color--accent);
  background: var(--wp--preset--color--paper);
}

.is-style-af-form textarea {
  min-height: 100px;
  resize: vertical;
}

.is-style-af-form button[type="submit"],
.is-style-af-form .wpcf7-submit {
  width: 100%;
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--cream);
  font-family: var(--wp--preset--font-family--sans);
  font-size: 14px;
  font-weight: 500;
  padding: 14px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.is-style-af-form button[type="submit"]:hover,
.is-style-af-form .wpcf7-submit:hover {
  background: var(--wp--preset--color--accent);
}

/* ===================================================================
   21. META CARD — FLOATING OVER PROFILE IMAGE
   =================================================================== */

.is-style-af-meta-card {
  z-index: 10;
  position: absolute;
  right: 100px;
  background: var(--wp--preset--color--paper);
  padding: 20px 24px;
  border-radius: 4px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 10px 30px rgba(80, 60, 30, 0.12);
}
@media (min-width: 712px)  {
  .is-style-af-meta-card {
    right: 37vw;
  }
}
@media (min-width: 810px) {
  .is-style-af-meta-card {
    right: 20px;
  }
}

@media (min-width: 1360px) {
  .is-style-af-meta-card {
     right: 2vw;
  }
}

/* ===================================================================
   22. SEPARATOR — WOODPRESS DEFAULT OVERRIDES
   =================================================================== */

.wp-block-separator.wp-block-separator {
  color: var(--wp--preset--color--line-2) !important;
}

/* ===================================================================
   23. RESPONSIVE — MOBILE COVERS & HERO
   =================================================================== */

@media (max-width: 782px) {
  .is-style-af-cover-stack .wp-block-image {
    max-width: 200px;
  }

  .is-style-af-hero::before {
    width: 100%;
    opacity: 0.05;
    height: 100%;
    max-height: 100vh;
  }
}

/* ===================================================================
   24. LAYOUT — ABOUT / PRODUCTS SECTIONS
   =================================================================== */
@media screen and (max-width: 1023px) { 
  #about  .about-second  {
    margin-top: 50px;
  }
}

#about  .about-second  .wp-block-column {
  padding-top: 0px !important;
}

@media (min-width: 712px) and (max-width:809px) {
  /* tree items */
  #about  .about-second .wp-block-columns .wp-block-column {
    flex-basis: 25% !important;
  }
  /* IMG autor */
  #about .wp-block-image img {
      max-width: 55% !important;
  }
}

@media (min-width: 810px) {
    #about .about-first {
      flex-grow: 0 !important;
      flex-basis: 40% !important;
  }
   #about .wp-block-image img  {
      max-width: 90%;
  }
}
@media(min-width: 1024px) {
    #about > .wp-block-columns {
      gap: 50px
    } 
    #about .about-first {
      flex-basis: 40% !important;
    }       
 }

 @media (min-width: 1360px) {
  #about .wp-block-image img  {
      max-width: 90%;
  }
   #about .about-first {
    flex-basis:  34% !important;
  }
}

 @media (min-width: 1536px) and (max-width: 1919px) {
   #about .about-first {
    flex-basis:  28% !important;
  }
 }

/* ===================================================================
   25. HERO WRAPPER — FULL-SCREEN HOME HERO (2.0)
   =================================================================== */

/* ===================================================================
   26. HOME PRODUCTS — WOODPRESS SINGLE PRODUCT GRID
   =================================================================== */

#home-products > div {
  row-gap: var(--wp--preset--spacing--50) !important;
}

#home-products .wp-block-woocommerce-single-product {
   border-color: var(--wp--preset--color--line-2) !important;
  border: 1px solid;
  border-radius: 8px;
  padding-top: 28px;
  padding-right: 10px;
  padding-left: 10px;
   /* border-color: #b8b8b8 !important; */ 
  display: grid;
  grid-template-columns: 1fr auto;
}

/* Effects for Card Home Products */
#home-products .wp-block-woocommerce-single-product {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

#home-products .wp-block-image img {
  border-radius: 3px;
}

@media (min-width: 1360px) {
  #home-products .wp-block-woocommerce-single-product {
    padding-right: 24px;
    padding-left: 24px;
  }
}

#home-products .wp-block-woocommerce-single-product > .wp-block-columns {
  position: relative;
  margin-bottom: 0em !important;
  padding-bottom: 10px;
}

#home-products .wp-block-woocommerce-single-product > .wp-block-columns .wp-block-column:nth-child(2) {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title   title"
    "summary summary"
    "meta    meta"
    "price   button";
  align-items: end;
}

#home-products .wp-block-column:nth-child(2) h3 {
  grid-area: title;
}

#home-products .wp-block-column:nth-child(2) [data-block-name="woocommerce/product-summary"] {
  grid-area: summary;
  margin-block-start: 0rem !important;
}

#home-products .wp-block-column:nth-child(2) [data-block-name="woocommerce/product-meta"] {
  grid-area: meta;
}

#home-products .wp-block-column:nth-child(2) [data-block-name="woocommerce/product-price"] {
  grid-area: price;
  height: 40px;
}

#home-products .wp-block-column:nth-child(2) [data-block-name="woocommerce/add-to-cart-with-options"] {
  grid-area: button;
  justify-self: end;
}

#home-products .taxonomy-product_cat {
  max-width: 99%;
  display: inline-flex;
  flex-wrap: wrap;
}

#home-products .taxonomy-product_cat a {
  margin-bottom: 10px;
  max-height: 20px;
  line-height: 20px;
}

@media (min-width: 1360px) {
  #home-products .wp-block-column:first-of-type {
    flex-basis: 34% !important;
  }
}

#home-products .wp-block-woocommerce-single-product .wp-block-post-terms__prefix {
  display: none;
}

#home-products .wp-block-post-terms__separator {
  display: none !important;
}
#home-products .taxonomy-product_cat a {
  margin-right: 7px;
}

/** Add-to-Cart Button — mobile styling (theme.json fallback) */
#home-products .wp-element-button,
.wp-block-button__link {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

/* ===================================================================
   27. RESET — GUTENBERG DEFAULT SECTION MARGINS and PADDINGS
   =================================================================== */

section {
  margin-top: 0 !important;
}

@media screen and (max-width: 1460px) {
  section > .alignwide.wp-block-group {
    padding-left: var(--wp--preset--spacing--50) !important;
    padding-right: var(--wp--preset--spacing--50) !important;
  }
}

/* ===================================================================
  28 FOOTER
  ==================================================================== */
  footer {
    margin-block-start: 0em !important;
    margin-top: -24px !important;
  }
.site-footer-custom {
  margin-top: 0px !important;
  position: relative;
  overflow: hidden;
  background-color: var(--wp--preset--color--cream-2); 
}

.site-footer-custom > * {
  position: relative;
  z-index: 1;
}

/* Tło tylko od 600px w górę */
@media (min-width: 600px) {
  .site-footer-custom::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("./assets/images/horizonta-bg.png");
    background-size: cover;
    background-position: center;
    opacity: 0.05;
    filter: invert(1);
    z-index: 0;
    pointer-events: none;
  }
}


/* ===================================================================
   29. TRYB CIEMNY (DARK MODE) — NADPISANIE ZMIENNYCH PALETY
  =================================================================== */
.dark-mode {
  /* Podstawowe nadpisanie tła i głównego koloru tekstu */
  background-color: #0c0c0c !important;
  color: #eee8dc !important;

  /* Nadpisujemy zmienne wygenerowane przez theme.json */
  --wp--preset--color--cream: #0c0c0c;          /* Nowe tło strony */
  --wp--preset--color--cream-2: #161615;        /* Ciemniejszy element/kod */
  --wp--preset--color--paper: #121211;          /* Tło kart i paneli */
  --wp--preset--color--tan: #4a4741;            
  --wp--preset--color--tan-soft: #232220;       
  
  --wp--preset--color--ink: #f7f4ee;            /* Główny kolor nagłówków */
  --wp--preset--color--ink-2: #eee8dc;          /* Główny kolor tekstu */
  --wp--preset--color--ink-3: #a8a193;          /* Tekst muted */
  --wp--preset--color--ink-4: #78736a;          
  
  --wp--preset--color--line: rgba(255, 255, 255, 0.08);   /* Linie pomocnicze */
  --wp--preset--color--line-2: rgba(255, 255, 255, 0.12);

  /* DOPISZ TUTAJ: Ciemna terakota jako soft accent w trybie Dark Mode */
  --wp--preset--color--accent-soft: #0c0c0c /* #31160c; */
}

/* ===================================================================
   30. TRYB CIEMNY — DOPASOWANIA SZTYWNYCH WARTOŚCI W CSS
   =================================================================== */

/* Poprawka dla przyklejonego nagłówka (sekcja 3 w Twoim CSS) */
.dark-mode header.wp-block-template-part {
  background: rgba(12, 12, 12, 0.82);
  border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Dostosowanie sekcji WooCommerce (sekcja 26 w Twoim CSS) */
.dark-mode #home-products .wp-block-woocommerce-single-product { 
  border: 1px solid var(--wp--preset--color--line);
}

/* Poprawka dla maski w sekcji Hero (sekcja 8 w Twoim CSS) */
.dark-mode .is-style-af-hero::before {
  opacity: 0.08;
  /* Odwracamy maskę, aby dopasować ją do ciemnego tła */
  filter: invert(1); 
  mix-blend-mode: screen;
}

/* AF Pill — hover text color */
.dark-mode .wp-block-button.is-style-af-pill .wp-block-button__link:hover,
.dark-mode .wp-block-button .wp-block-button__link:hover span, /* woocommerce btn */
.dark-mode .wp-block-button.is-style-af-pill.is-style-outline .wp-block-button__link:hover {
    background: var(--wp--preset--color--accent) !important;
    color: var(--wp--preset--color--ink-2) !important;
}

/* navigation */
.dark-mode .wp-block-navigation .current-menu-item a {
    color: var(--wp--preset--color--accent) !important;
}

.dark-mode .wp-block-navigation .wp-block-navigation-link a {
    color: var(--wp--preset--color--ink-2);
}

.dark-mode .wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--ink-2);
}


/* ===================================================================
   31 THEME TOGGLE BUTTON
   =================================================================== */

.theme-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--ink-2);
  transition: color 0.2s ease, transform 0.2s ease;
  border-radius: 50%;
  margin-left: 8px;
  height: 34px;
  width: 34px;
}

.theme-toggle-btn:hover {
  color: var(--wp--preset--color--accent);
  transform: scale(1.08);
}

.theme-toggle-btn svg {
  width: 18px;
  height: 18px;
}

/* Domyślny stan przycisku (Tryb Jasny) */
.theme-toggle-btn .sun-icon {
  display: none; /* Ukryte słońce */
}

.theme-toggle-btn .moon-icon {
  display: block; /* Widoczny księżyc */
}

/* Stan przycisku w Trybie Ciemnym (klasa .dark-mode na html) */
.dark-mode .theme-toggle-btn .sun-icon {
  display: block; /* Widoczne słońce */
}

.dark-mode .theme-toggle-btn .moon-icon {
  display: none; /* Ukryty księżyc */
}

/* =====================================================================
32 BLOG - home
=========================================================================*/
.home .wp-block-query .wp-block-post-title {
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.3;
}
.home .wp-block-query .wp-block-post-excerpt__excerpt {
  font-size: var(--wp--preset--font-size--normal);
}

.home .wp-block-post-excerpt__more-text a {
  color: var(--wp--preset--color--accent) !important;
}

.home .wp-block-query li > .wp-block-group { 
  padding-left: 0px !important;
}

/* ======================================================================
BLOG
========================================================================= */
.single-post main,
.blog {
    margin-top: var(--wp--preset--spacing--70) !important;
    margin-bottom: var(--wp--preset--spacing--70) !important;
}

@media (min-width: 1200px) {
    .single-post main,
    .blog {
        margin-top: var(--wp--preset--spacing--90) !important;
        margin-bottom: var(--wp--preset--spacing--80) !important;
    }
}

.single-post .wp-block-post-date {
  margin-top: 0px;
}

.blog .wp-block-query {
   padding-left: var(--wp--preset--spacing--50) !important;
    padding-right: var(--wp--preset--spacing--50) !important;
}
.blog main .wp-block-group > p {
  max-width: 550px;
  margin: 0 auto;
  margin-top: 30px;
}

/* =============================================
MINICART block woocommerce
============================================== */
.dark-mode .wp-block-woocommerce-mini-cart-contents {
  background: var(--wp--preset--color--cream-2) !important;
}

.dark-mode .wc-block-mini-cart__drawer {
  border-left: 1px solid #4a4741 !important;
}

/* Wymuszony reset do trybu jasnego dla koszyka */
:root:not(.dark-mode) .wc-block-mini-cart__drawer,
body:not(.dark-mode) .wp-block-woocommerce-mini-cart-contents {
  background: var(--wp--preset--color--paper) !important;
}

:root:not(.dark-mode) .wc-block-mini-cart__drawer {
  border-left: 1px solid var(--wp--preset--color--line) !important;
}

.dark-mode .wc-block-mini-cart__footer-checkout:hover, /*  mini card btn checkout */
.dark-mode .wp-block-woocommerce-filled-mini-cart-contents-block .wc-block-mini-cart__footer-cart:hover { /* mini card btn */
    background: var(--wp--preset--color--accent) !important;
    color: var(--wp--preset--color--ink) !important;
}

.wc-block-mini-cart__items .wc-block-components-product-metadata {
   display: none;
}

/* ===============================================
ABOUTE Page / Other pages
=================================================*/

.page-id-33 main {
  margin-top: var(--wp--preset--spacing--70) !important;
  margin-bottom: var(--wp--preset--spacing--70) !important;
}

@media (min-width: 1200px) {
.page-id-33 main {
      margin-top: var(--wp--preset--spacing--90) !important;
      margin-bottom: var(--wp--preset--spacing--80) !important;
    }
}