/* =============== VIARTEM / Storefront Premium CSS (migrated from Additional CSS) =============== */
/* Source snapshot: _wp-state/customizer-additional-css.css */

/* ===================== TOKENS ===================== */
:root{
  /* Core palette (from your system) */
  --color-cream-50: rgba(252,252,249,1);
  --color-cream-100: rgba(255,255,253,1);

  --color-slate-500: rgba(98,108,113,1);
  --color-slate-900: rgba(19,52,59,1);

  --color-brown-600: rgba(94,82,64,1);

  --color-teal-500: rgba(33,128,141,1);
  --color-teal-600: rgba(29,116,128,1);
  --color-teal-700: rgba(26,104,115,1);

  --color-orange-500: rgba(168,75,47,1);

  /* RGB helpers */
  --color-brown-600-rgb: 94,82,64;
  --color-teal-500-rgb: 33,128,141;
  --color-slate-900-rgb: 19,52,59;
  --color-orange-500-rgb: 168,75,47;

  /* Semantic */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);

  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);

  --color-secondary: rgba(var(--color-brown-600-rgb), 0.10);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.16);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.22);

  --color-border: rgba(var(--color-brown-600-rgb), 0.18);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);

  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.28);

  /* Type: Perplexity-ish (no external font-face) */
  --font-family-base: "Geist","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;

  /* Layout */
  --container: 1180px;
  --gutter: 24px;

  /* Geometry */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 18px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.03);
  --shadow-sm: 0 10px 26px rgba(0,0,0,.06);
  --shadow-md: 0 18px 55px rgba(0,0,0,.10);

  /* Motion */
  --dur-fast: 140ms;
  --dur: 240ms;
  --ease: cubic-bezier(0.16,1,0.3,1);

  /* Accent line gradient (Perplexity vibe) */
  --accent-line: linear-gradient(90deg, var(--color-primary), rgba(var(--color-orange-500-rgb), .95), transparent);
}

/* Minimal dark-mode support (safe) */
@media (prefers-color-scheme: dark){
  :root{
    --color-background: rgba(31,33,33,1);
    --color-surface: rgba(38,40,40,1);
    --color-text: rgba(245,245,245,1);
    --color-text-secondary: rgba(167,169,169,.75);

    --color-border: rgba(167,169,169,.20);
    --color-card-border: rgba(167,169,169,.16);

    --color-secondary: rgba(167,169,169,.10);
    --color-secondary-hover: rgba(167,169,169,.16);
    --color-secondary-active: rgba(167,169,169,.22);

    --color-focus-ring: rgba(50,184,198,.22);
  }
}

/* ===================== BASE ===================== */
html{
  font-family: var(--font-family-base);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body{
  margin: 0;
  color: var(--color-text);
  background:
    radial-gradient(1100px 620px at 18% 0%, rgba(var(--color-teal-500-rgb), .10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,0) 40%),
    var(--color-background) !important;
}

p, li{ line-height: 1.65; color: var(--color-text-secondary); }
a{
  color: var(--color-primary);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease);
  font-weight: 650;
}
a:hover{ color: var(--color-primary-hover); text-decoration: underline; }

:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 4px var(--color-focus-ring) !important;
  border-radius: 10px;
}

/* Width / gutter */
.col-full{
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
@media (max-width: 600px){
  :root{ --gutter: 16px; }
}

/* Content rhythm */
.site-main,
.site-content{
  padding-top: 28px;
  padding-bottom: 44px;
  background: transparent !important;
}

/* ===================== PREMIUM PANEL + ACCENT LINE ===================== */
.woocommerce-page .site-main > .col-full,
.page .site-main > .col-full,
.single-product .site-main > .col-full{
  position: relative;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 55px rgba(0,0,0,.06);
  padding: 22px;
  overflow: hidden;
}

/* The 2–3px Perplexity accent line at the top */
.woocommerce-page .site-main > .col-full::before,
.page .site-main > .col-full::before,
.single-product .site-main > .col-full::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent-line);
  pointer-events: none;
  opacity: .95;
}

@media (prefers-color-scheme: dark){
  .woocommerce-page .site-main > .col-full,
  .page .site-main > .col-full,
  .single-product .site-main > .col-full{
    background: rgba(38,40,40,.88);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 18px 55px rgba(0,0,0,.28);
  }
}

@media (max-width: 600px){
  .woocommerce-page .site-main > .col-full,
  .page .site-main > .col-full,
  .single-product .site-main > .col-full{
    padding: 16px;
    border-radius: 16px;
  }
}

/* ===================== TYPOGRAPHY (Perplexity-ish) ===================== */
h1, .page-title, .entry-title, .woocommerce-products-header__title{
  font-weight: 900 !important;
  letter-spacing: -0.85px !important;
  line-height: 1.06 !important;
  margin: 0 0 14px 0 !important;
  color: var(--color-text) !important;
}

h2{
  font-weight: 850 !important;
  letter-spacing: -0.65px !important;
  line-height: 1.15 !important;
  margin: 26px 0 12px 0 !important;
}

h3{
  font-weight: 800 !important;
  letter-spacing: -0.35px !important;
}

/* ===================== HEADER / NAV (underline vibe) ===================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 9999;

  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

@media (prefers-color-scheme: dark){
  .site-header{
    background: rgba(38,40,40,.84);
    border-bottom: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 10px 28px rgba(0,0,0,.28);
  }
}

.site-header .col-full{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding-top: 12px;
  padding-bottom: 12px;
}

.site-branding{ padding: 6px 0; }
.site-branding .site-title{
  margin: 0 !important;
  font-weight: 900;
  letter-spacing: -0.6px;
  font-size: 20px;
}
.site-branding .site-title a{
  color: var(--color-text) !important;
  text-decoration: none;
}
.site-branding .site-description{
  color: var(--color-text-secondary);
  margin-top: 2px;
  font-weight: 500;
}

/* Navigation container */
.storefront-primary-navigation{
  background: transparent !important;
  border: 0 !important;
}

/* Menu list */
.main-navigation ul.menu{
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Menu link + underline */
.main-navigation ul.menu > li > a{
  position: relative;
  display: inline-flex !important;
  align-items: center !important;

  padding: 10px 14px;
  border-radius: 10px;

  font-size: 14px;
  font-weight: 650;

  color: var(--color-text-secondary) !important;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

/* Underline */
.main-navigation ul.menu > li > a::after{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

/* Hover */
.main-navigation ul.menu > li > a:hover{
  color: var(--color-primary) !important;
  background: var(--color-secondary-hover);
  text-decoration: none;
}
.main-navigation ul.menu > li > a:hover::after{
  opacity: .55;
}

/* Active */
.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.menu > li.current_page_item > a{
  color: var(--color-primary) !important;
  background: var(--color-secondary);
  font-weight: 800;
}
.main-navigation ul.menu > li.current-menu-item > a::after,
.main-navigation ul.menu > li.current_page_item > a::after{
  opacity: 1;
}

/* Cart (minimal, premium) */
.site-header-cart{
  display: flex !important;
  align-items: center !important;
}
.site-header-cart .cart-contents{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1 !important;

  padding: 10px 12px !important;
  border-radius: 10px !important;

  background: rgba(var(--color-teal-500-rgb), .10) !important;
  border: 1px solid rgba(var(--color-teal-500-rgb), .18) !important;

  font-weight: 800 !important;
  color: var(--color-text) !important;

  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.site-header-cart .cart-contents:hover{
  transform: translateY(-1px);
  background: rgba(var(--color-teal-500-rgb), .14) !important;
}

/* Mini-cart dropdown polish */
.site-header-cart .widget_shopping_cart{
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.12) !important;
}

/* ===================== BREADCRUMB ===================== */
.storefront-breadcrumb{ margin: 0 0 18px 0; }
.storefront-breadcrumb .woocommerce-breadcrumb{
  color: var(--color-text-secondary);
  font-size: .95em;
}

/* ===================== PRODUCT CARDS (Storefront-safe, Perplexity feel) ===================== */
ul.products{ margin-top: 10px; }

/* Card styling without touching Storefront sizing */
ul.products li.product{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: var(--radius-lg);
  overflow: hidden;

  padding: 14px;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  position: relative;
}

/* Subtle gradient accent on hover (top edge only) */
ul.products li.product::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), rgba(var(--color-orange-500-rgb), .95));
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

@media (prefers-color-scheme: dark){
  ul.products li.product{
    background: rgba(38,40,40,.92);
    border-color: rgba(255,255,255,.10);
  }
}

ul.products li.product:hover{
  transform: translateY(-5px);
  box-shadow: var(--shadow-sm);
  border-color: rgba(var(--color-teal-500-rgb), .32);
}
ul.products li.product:hover::before{ opacity: 1; }

ul.products li.product img{
  border-radius: 12px;
  transition: transform var(--dur) var(--ease);
}
ul.products li.product:hover img{ transform: scale(1.04); }

ul.products li.product .woocommerce-loop-product__title{
  font-size: 16px;
  font-weight: 800;
  line-height: 1.22;
  color: var(--color-text) !important;
  margin-top: 12px;
}

ul.products li.product .price{
  font-weight: 900;
  margin-top: 6px;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--color-primary) !important;
}

/* Keep button stable */
ul.products li.product .button{ margin-top: 10px; }

/* ===================== SINGLE PRODUCT ===================== */
.single-product div.product{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: var(--radius-xl);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}

@media (prefers-color-scheme: dark){
  .single-product div.product{
    background: rgba(38,40,40,.92);
    border-color: rgba(255,255,255,.10);
  }
}

.single-product div.product .product_title{
  font-weight: 900;
  letter-spacing: -0.7px;
}

.single-product div.product .price{
  font-weight: 900;
  font-size: 26px;
  color: var(--color-primary) !important;
}

/* Tabs */
.woocommerce-tabs{
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  .woocommerce-tabs{ border-top-color: rgba(255,255,255,.10); }
}

.woocommerce-tabs ul.tabs{
  border-bottom: 1px solid rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  .woocommerce-tabs ul.tabs{ border-bottom-color: rgba(255,255,255,.10); }
}
.woocommerce-tabs ul.tabs li{
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.woocommerce-tabs ul.tabs li a{
  padding: 10px 16px;
  font-weight: 750;
}

/* ===================== BUTTONS (Perplexity motion + focus) ===================== */
button,
input[type="button"],
input[type="submit"],
.button,
.added_to_cart,
.wc-forward{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px !important;
  font-weight: 800 !important;

  padding: 12px 16px !important;

  border: 1px solid rgba(0,0,0,.10) !important;
  background: var(--color-secondary) !important;
  color: var(--color-text) !important;

  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  position: relative;
  overflow: hidden;
}

/* Gentle sheen */
button::before,
input[type="button"]::before,
input[type="submit"]::before,
.button::before,
.added_to_cart::before,
.wc-forward::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12), transparent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover,
.added_to_cart:hover,
.wc-forward:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  background: var(--color-secondary-hover) !important;
  border-color: rgba(var(--color-teal-500-rgb), .22) !important;
}
button:hover::before,
.button:hover::before{ opacity: 1; }

button:active,
input[type="submit"]:active,
.button:active{
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

/* Primary CTA */
.button.alt,
.single_add_to_cart_button,
.checkout-button,
#place_order{
  background: var(--color-primary) !important;
  border-color: rgba(var(--color-teal-500-rgb), .60) !important;
  color: rgba(255,255,255,1) !important;
  font-weight: 900 !important;
}
.button.alt:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
#place_order:hover{
  background: var(--color-primary-hover) !important;
  border-color: rgba(var(--color-teal-500-rgb), .80) !important;
}

/* Focus ring on controls */
button:focus-visible,
input:focus-visible,
.button:focus-visible,
a:focus-visible{
  box-shadow: 0 0 0 4px var(--color-focus-ring) !important;
}

/* ===================== FORMS ===================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select{
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  padding: 12px 12px !important;

  background: rgba(255,255,255,.92) !important;
  color: var(--color-text) !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

@media (prefers-color-scheme: dark){
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  textarea,
  select{
    background: rgba(38,40,40,.92) !important;
    border-color: rgba(255,255,255,.14) !important;
  }
}

input:focus,
textarea:focus,
select:focus{
  outline: none !important;
  border-color: rgba(var(--color-teal-500-rgb), .55) !important;
  box-shadow: 0 0 0 4px var(--color-focus-ring) !important;
}

/* ===================== NOTICES ===================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: var(--shadow-xs);
}

/* ===================== CART / CHECKOUT (safe panel wrapper) ===================== */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.woocommerce-cart .entry-content > .woocommerce,
.woocommerce-checkout .entry-content > .woocommerce,
.woocommerce-account .entry-content > .woocommerce{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  border-radius: var(--radius-xl) !important;
  padding: 18px !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  position: relative;
}

/* Accent line on cart/checkout panels too */
.woocommerce-cart .entry-content > .woocommerce::before,
.woocommerce-checkout .entry-content > .woocommerce::before,
.woocommerce-account .entry-content > .woocommerce::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:3px;
  background: var(--accent-line);
  opacity:.9;
  pointer-events:none;
}

@media (prefers-color-scheme: dark){
  .woocommerce-cart .entry-content > .woocommerce,
  .woocommerce-checkout .entry-content > .woocommerce,
  .woocommerce-account .entry-content > .woocommerce{
    background: rgba(38,40,40,.92) !important;
    border-color: rgba(255,255,255,.10) !important;
  }
}

@media (min-width: 768px){
  .woocommerce-cart .entry-content > .woocommerce{
    display: flex;
    gap: 22px;
    align-items: flex-start;
  }
  .woocommerce-cart .woocommerce-cart-form{
    float: none;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
  }
  .woocommerce-cart .cart-collaterals{
    float: none;
    flex: 0 0 360px;
    margin: 0;
  }
}

/* ===================== FOOTER ===================== */
.site-footer{
  border-top: 1px solid rgba(0,0,0,.08);
  background: transparent;
}
.site-info{ display: none !important; }

/* ===================== MOBILE TOGGLE (stable) ===================== */
@media (max-width: 900px){
  .site-header{ padding: 10px 0 !important; }
  .site-header .col-full{ position: relative !important; }

  /* Keep cart away from toggle */
  .site-header-cart{
    margin-left: 0 !important;
    margin-right: 58px !important;
  }

  #site-navigation-menu-toggle.menu-toggle{
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    min-height: 44px !important;
    padding: 10px 12px !important;

    border-radius: 12px !important;
    background: var(--color-secondary) !important;
    border: 1px solid rgba(var(--color-teal-500-rgb), .28) !important;
    box-shadow: var(--shadow-xs) !important;
  }

  #site-navigation-menu-toggle.menu-toggle span{
    display: inline-block !important;
    margin-left: 10px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    color: var(--color-text) !important;
  }

  .site-main,
  .site-content{
    padding-top: 18px;
    padding-bottom: 34px;
  }
}

/* =============== End =============== */
/* ===================== MOBILE: hide header cart ===================== */
@media (max-width: 900px){
  .site-header-cart{
    display: none !important;
  }

  /* if you left any mobile spacing for the cart, remove it */
  .site-header .col-full{
    gap: 12px !important;
  }
}

/* ===================== MOBILE: more space between hamburger icon and "Menu" ===================== */
@media (max-width: 900px){

  /* zwiększa odstęp IKONA ↔ TEKST */
  #site-navigation-menu-toggle.menu-toggle span{
    margin-left: 16px !important;   /* było ~8–10px */
  }

  /* opcjonalnie: lekko powiększ sam przycisk dla „oddechu” */
  #site-navigation-menu-toggle.menu-toggle{
    padding-left: 14px !important;
    padding-right: 16px !important;
  }
}
@media (max-width: 900px){
  #site-navigation-menu-toggle.menu-toggle{
    top: 50% !important;
    transform: translateY(calc(-50% - 20px)) !important; /* podnosi o 6px */
  }
}
/* ===== Remove the OUTER frame around the [-][qty][+] group (cart) ===== */
/* ===================== WC Blocks: remove outer frame around [- qty +] ===================== */
.wc-block-components-quantity-selector{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: 0 !important;
}

/* If the frame is drawn by a pseudo-element */
.wc-block-components-quantity-selector::before,
.wc-block-components-quantity-selector::after{
  content: none !important;
  display: none !important;
}
/* ===================== DESKTOP: widen header cart pill ===================== */
@media (min-width: 901px){

  .site-header-cart .cart-contents{
    min-width: 190px !important;   /* ← zwiększaj: 180 / 200 / 220 */
    justify-content: center !important;
    white-space: nowrap !important;
  }

  /* upewnij się, że amount też się nie łamie */
  .site-header-cart .cart-contents .amount{
    white-space: nowrap !important;
  }
}

/* ===================== DESKTOP: align cart icon vertically ===================== */
/* ===================== CART CONTENTS: vertical alignment ===================== */
/* ===================== DESKTOP: perfect vertical alignment in cart-contents ===================== */
@media (min-width: 901px){

  /* 1) wymuś jeden wiersz i centrowanie pionowe całej zawartości */
  a.cart-contents{
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* 2) wyrównaj dzieci */
  a.cart-contents .amount,
  a.cart-contents .count{
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
  }

  /* 3) JEŚLI ikonka jest pseudo-elementem (:before/:after) – podnieś ją */
  a.cart-contents::before,
  a.cart-contents:before,
  a.cart-contents::after,
  a.cart-contents:after{
    display: inline-block !important;
    vertical-align: middle !important;
    transform: translateY(-4px) !important; /* reguluj: -1px / -2px */
  }

  /* 4) JEŚLI ikonka jest tłem (background-image) – podnieś tło */
  a.cart-contents{
    background-position-y: calc(50% - 1px) !important; /* reguluj: -1px / -2px */
  }
}


/* ===================== HEADER: site identity typography ===================== */

/* DESKTOP */
@media (min-width: 901px){

  /* Nazwa witryny */
  .site-header .site-branding .site-title{
    font-size: 26px !important;     /* było ~18–20 */
    font-weight: 900 !important;
    letter-spacing: -0.6px !important;
    line-height: 1.1 !important;
  }

  /* Link w tytule (bez zmian kolorystycznych) */
  .site-header .site-branding .site-title a{
    font-size: inherit !important;
  }

  /* Slogan */
  .site-header .site-branding .site-description{
    font-size: 16px !important;     /* było ~11–12 */
    font-weight: 500 !important;
    letter-spacing: -0.1px !important;
    margin-top: 3px !important;
  }
}

/* ===================== HEADER: site title = active menu color ===================== */

/* Desktop + mobile */
.site-header .site-branding .site-title a{
  color: var(--color-primary) !important;
}

/* Zachowaj spójność na hover (bez migania) */
.site-header .site-branding .site-title a:hover{
  color: var(--color-primary) !important;
}


/* ===================== SHOP: align result count with sorting ===================== */

/* Wrapper dla sortowania + licznika */
.woocommerce-ordering,
.woocommerce-result-count{
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

/* Kontener, który je trzyma (Storefront / WooCommerce) */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{
  margin: 0 !important;
}

/* Jeśli są obok siebie */
.woocommerce .woocommerce-ordering{
  margin-left: auto !important;
}

/* Dopasowanie tekstu */
.woocommerce-result-count{
  font-size: 12px !important;
  color: var(--muted, rgba(0,0,0,.6)) !important;
  padding-top: 17px !important; 
	padding-left: 10px !important; 
	/* mikro-korekta osi */
}



/* ===================== FORCE LIGHT THEME (ignore system dark mode) ===================== */
@media (prefers-color-scheme: dark){
  :root{
    --color-background: var(--color-cream-50) !important;
    --color-surface: var(--color-cream-100) !important;
    --color-text: var(--color-slate-900) !important;
    --color-text-secondary: var(--color-slate-500) !important;

    --color-border: rgba(var(--color-brown-600-rgb), 0.18) !important;
    --color-card-border: rgba(var(--color-brown-600-rgb), 0.12) !important;

    --color-secondary: rgba(var(--color-brown-600-rgb), 0.10) !important;
    --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.16) !important;
    --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.22) !important;

    --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.28) !important;
  }

  body{
    background:
      radial-gradient(1100px 620px at 18% 0%, rgba(var(--color-teal-500-rgb), .10), transparent 60%),
      linear-gradient(180deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,0) 40%),
      var(--color-background) !important;
    color: var(--color-text) !important;
  }
}

/* ===================== FORCE LIGHT LOOK for ALL elements (even if phone is in dark mode) ===================== */
@media (prefers-color-scheme: dark){

  /* Header */
  .site-header{
    background: rgba(255,255,255,.92) !important;
    border-bottom: 1px solid rgba(var(--color-brown-600-rgb), 0.18) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.04) !important;
  }

  /* Main panel containers */
  .woocommerce-page .site-main > .col-full,
  .page .site-main > .col-full,
  .single-product .site-main > .col-full,
  .woocommerce-cart .entry-content > .woocommerce,
  .woocommerce-checkout .entry-content > .woocommerce,
  .woocommerce-account .entry-content > .woocommerce{
    background: rgba(255,255,255,.90) !important;
    border-color: rgba(0,0,0,.06) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.06) !important;
  }

  /* Product cards + single product */
  ul.products li.product,
  .single-product div.product{
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(0,0,0,.07) !important;
  }

  /* Tabs borders back to light */
  .woocommerce-tabs{
    border-top-color: rgba(0,0,0,.08) !important;
  }
  .woocommerce-tabs ul.tabs{
    border-bottom-color: rgba(0,0,0,.08) !important;
  }

  /* Inputs */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  textarea,
  select{
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(0,0,0,.14) !important;
    color: var(--color-slate-900) !important;
  }

  /* Buttons (neutral + primary) */
  button,
  input[type="button"],
  input[type="submit"],
  .button,
  .added_to_cart,
  .wc-forward{
    background: rgba(var(--color-brown-600-rgb), 0.10) !important;
    border-color: rgba(0,0,0,.10) !important;
    color: var(--color-slate-900) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.03) !important;
  }

  .button.alt,
  .single_add_to_cart_button,
  .checkout-button,
  #place_order{
    background: var(--color-teal-500) !important;
    border-color: rgba(var(--color-teal-500-rgb), .60) !important;
    color: rgba(255,255,255,1) !important;
  }

  /* Cart pill */
  a.cart-contents{
    background: rgba(var(--color-teal-500-rgb), .10) !important;
    border-color: rgba(var(--color-teal-500-rgb), .18) !important;
    color: var(--color-slate-900) !important;
  }
}

/* ===================== MOBILE MENU: fix clipped purple focus ring ===================== */
@media (max-width: 900px){

  /* 1) allow focus ring to be visible (stop clipping) */
  .site-header,
  .site-header .col-full,
  .storefront-primary-navigation,
  .main-navigation,
  .main-navigation ul,
  .main-navigation ul li{
    overflow: visible !important;
  }

  /* 2) replace default purple outline with our theme ring */
  .main-navigation a:focus,
  .main-navigation a:focus-visible,
  .handheld-navigation a:focus,
  .handheld-navigation a:focus-visible{
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(var(--color-teal-500-rgb), .28) !important;
    border-radius: 10px !important;
  }

  /* 3) on tap, iOS sometimes keeps focus highlight – make it consistent */
  .main-navigation a,
  .handheld-navigation a{
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  }
}
@media (max-width: 900px){
  #site-navigation,
  #site-navigation .menu{
    overflow: visible !important;
  }
}

/* ===================== MOBILE MENU: focus ring INSIDE (no clipping possible) ===================== */
@media (max-width: 900px){

  .main-navigation a:focus,
  .main-navigation a:focus-visible,
  .handheld-navigation a:focus,
  .handheld-navigation a:focus-visible{
    outline: none !important;

    /* ring inside element (cannot be clipped by parent overflow) */
    box-shadow: inset 0 0 0 3px rgba(var(--color-teal-500-rgb), .45) !important;

    border-radius: 10px !important;
  }

  /* optional: tiny background so it feels premium on tap */
  .main-navigation a:focus-visible,
  .handheld-navigation a:focus-visible{
    background: rgba(var(--color-teal-500-rgb), .10) !important;
  }

  /* iOS tap highlight off (already OK, but keep it here) */
  .main-navigation a,
  .handheld-navigation a{
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  }
}


/* Ukryj header i menu tylko na landing page */
.page-id-17 header.site-header {
    display: none;
}

/* Ukryj header i menu tylko na /kal.. page */
.page-id-176 header.site-header {
    display: none;
}

.page-id-219 header.site-header {
    display: none;
}

.page-id-234 header.site-header {
    display: none;
}
/* Usuń górny odstęp po headerze */
.page-id-17 .site-content {
    padding-top: 0;
    margin-top: 0;
}

.page-id-176 .site-content {
    padding-top: 0;
    margin-top: 0;
}

.page-id-219 .site-content {
    padding-top: 0;
    margin-top: 0;
}

.page-id-234 .site-content {
    padding-top: 0;
    margin-top: 0;
}
/* Visually hide title but keep it for SEO/screen readers */
.page-id-176 .entry-title{
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

/* Visually hide title but keep it for SEO/screen readers */
.page-id-17 .entry-title{
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

.page-id-219 .entry-title{
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

.page-id-234 .entry-title{
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}
/* ===================== HOME: fix H1 overflow ===================== */

/* H1 nie może wychodzić poza kontener */
.home h1,
.home .entry-title,
.home .page-title{
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.home .alignfull h1,
.home .wp-block-cover.alignfull h1,
.home .wp-block-group.alignfull h1{
  padding-left: 24px !important;
  padding-right: 24px !important;
  max-width: 100% !important;
}

.page-id-17 .site-content,
.page-id-17 .site-main{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.page-id-219 .site-content,
.page-id-219 .site-main{
  padding-top: 0 !important;
  margin-top: 0 !important;
}


.page-id-234 .site-content,
.page-id-234 .site-main{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.page-id-176 .site-content,
.page-id-176 .site-main{
  padding-top: 0 !important;
  margin-top: 0 !important;
}