/**
 * Księgarnia Smaków — Mobile Styles (MAX 980px)
 * ------------------------------------------------------------
 * Ten plik jest ładowany osobno na urządzeniach mobilnych/tabletach:
 *   media="only screen and (max-width: 980px)"
 *
 * Zasada:
 * - theme.css oraz woocommerce.css zawierają bazę.
 * - tutaj wrzucamy WYŁĄCZNIE poprawki/override pod mobile.
 */

:root{
  /* Slightly increase padding and gaps on mobile for an airier, more premium feel */
  --ks-mobile-pad: 18px;
  --ks-mobile-gap: 16px;
  /* Align mobile radius with our global radius for consistency */
  --ks-mobile-radius: var(--radius-base);
  /* Use the same dark card background on mobile as desktop */
  --ks-mobile-card: var(--color-card);
  /* Use a subtle gold‑tinted border colour on mobile. This now aligns with our
     updated premium gold tone for improved harmony. */
  --ks-mobile-border: rgba(213,184,117,0.22);
  --ks-mobile-title: clamp(2rem, 7vw, 2.5rem);
  --ks-mobile-h2: clamp(1.7rem, 6vw, 2.15rem);
  --ks-mobile-h3: clamp(1.35rem, 5vw, 1.7rem);
  --ks-mobile-body: 14px;
  --ks-mobile-body-lg: 15px;
  --ks-mobile-section-space: 34px;
}

/* ✅ REVEAL ANIMATION – FALLBACK MOBILNY
   Na urządzeniach mobilnych animacja .reveal może nie wyzwolić się przez
   IntersectionObserver (zbyt krótki viewport, szybki scroll, momentum iOS).
   Sekcje są zawsze widoczne – animacja jest opcjonalnym ulepszeniem desktopowym.
   Jeśli JS doda klasę .in, transition zadziała normalnie.
   Jeśli nie – element jest widoczny bez animacji (poprawne zachowanie mobilne). */
.reveal {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: none !important;
}

/* ✅ Menu tygodnia (dynamiczne) */
.ks-weekMenu{padding:18px}
.ks-weekMenu__inner{padding:18px;border-radius:22px}
.ks-weekMenu__head{gap:12px}
.ks-weekMenu__subtitle{font-size:16px}
.ks-weekMenu__mark{width:64px;height:64px}
.ks-weekMenu__logo{font-size:28px}
.ks-weekMenu__layout{grid-template-columns:1fr}
.ks-weekMenu__media{min-height:240px;order:-1}

/* ✅ Menu tygodnia — split (film + menu) */
.ks-weekMenu__split{ grid-template-columns: 1fr; }
.ks-weekMenu__col--video{ order: -1; }

html{ scroll-padding-top: 78px; }
body{ -webkit-text-size-adjust: 100%; }

.wrap{
  padding-left: var(--ks-mobile-pad) !important;
  padding-right: var(--ks-mobile-pad) !important;
}

html, body{
  overflow-x: clip;
}

body *{
  max-width: 100%;
}

.section{ padding: 46px 0 !important; }

/* ------------------------------------------------------------
   HOMEPAGE SYSTEM
------------------------------------------------------------ */

@media (max-width: 980px){
  .pill,
  .stat,
  .heroCard,
  .contactCard,
  .newsletter,
  .drawerPanel,
  .ks-ageGate__backdrop,
  .ks-ageGate__modal,
  .ks-videoModal__bg,
  .ks-videoModal__panel{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .noise{
    display: none !important;
  }

  .slide img,
  .storyMedia img,
  .colCard img,
  .ks-videoFeatured img,
  .ks-videoTile__thumb img{
    filter: none !important;
    transform: none !important;
  }

  #bestsellery,
  #historia,
  #prezenty,
  #kolekcje,
  #kontakt,
  #kontakt2,
  .ks-premium-story,
  .ks-premium-collections,
  .ks-catering,
  .ks-videoPanel{
    content-visibility: auto;
    contain-intrinsic-size: 1px 780px;
  }

  main.hero > .wrap,
  #kontakt2 > .wrap{
    padding-left: var(--ks-mobile-pad) !important;
    padding-right: var(--ks-mobile-pad) !important;
  }

  main.hero > .wrap{
    display: grid;
    gap: var(--ks-mobile-section-space);
  }

  .heroCard,
  .panel,
  .contactCard,
  .newsletter,
  .ks-premium__container,
  .ks-home-products__mobileToolbar,
  .ks-home-products.woocommerce ul.products li.product.ks-product-card{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  section,
  .hero,
  #kontakt2{
    margin-top: var(--ks-mobile-section-space) !important;
  }

  .hero h1,
  h1{
    font-size: var(--ks-mobile-title) !important;
    line-height: 1.06 !important;
    letter-spacing: -.03em !important;
  }

  .sectionHead h2,
  .ks-premium-story h2,
  .ks-premium-collections h2,
  #kontakt2 .sectionHead h2,
  h2{
    font-size: var(--ks-mobile-h2) !important;
    line-height: 1.12 !important;
    letter-spacing: -.03em !important;
  }

  .storyCopy h3,
  .contactTitle,
  .newsText h3,
  .ks-premium__title,
  h3{
    letter-spacing: -.02em;
  }

  .storyCopy h3,
  .contactTitle,
  .newsText h3,
  h3{
    font-size: var(--ks-mobile-h3) !important;
    line-height: 1.2 !important;
  }

  p,
  .lead,
  .sectionHead p,
  .storyCopy p,
  .contactSub,
  .newsText p,
  .ks-home-products__mobileCopy,
  .ks-premium__desc{
    font-size: var(--ks-mobile-body) !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .btn,
  .btn.gold,
  .btn.ghost,
  .ks-premium__btn,
  .heroCtas .btn,
  .ks-flexWrap .btn,
  .sectionHead > a.btn{
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .ks-flexWrap,
  .ks-flexWrapEnd,
  .sectionHead .ks-flexWrapEnd{
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
    gap: 10px !important;
  }

  .sectionHead{
    gap: 16px !important;
    margin-bottom: 24px !important;
    text-align: left !important;
    align-items: stretch !important;
  }

  .sectionHead > div{
    width: 100%;
    min-width: 0;
  }
}

/* większe cele dotykowe */
button,
input[type="submit"],
a.btn,
.iconBtn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  min-height: 44px;
}

/* ------------------------------------------------------------
   TOPBAR
------------------------------------------------------------ */

.topbar{ padding: 10px 0 !important; }

.topbar .wrap.row{
  gap: 10px !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
}

.topbarNav,
.ks-topbarFallback{
  width: 100% !important;
  display: flex;
  justify-content: center;
}

.topbarMenu,
.ks-topbarFallback{
  gap: 10px;
  flex-wrap: wrap;
}

.topbar .pill{
  padding: 8px 12px !important;
  border-radius: 999px !important;
}

/* ------------------------------------------------------------
   HEADER
------------------------------------------------------------ */

.site-header{ position: sticky; top: 0; z-index: 10020; }

.site-header .wrap.nav{
  gap: 12px !important;
}

/* chowamy desktopowe linki – menu idzie w drawer */
.site-header .links{
  display: none !important;
}

.site-header .brand{
  gap: 10px !important;
  min-width: 0;
}

.site-header .brandText span{
  display: none !important;
}

.site-header .logoMark img{
  height: 100%;
  width: auto !important;
}

.site-header .actions{
  gap: 8px !important;
}

.site-header .actions .iconBtn,
#burger{
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
}

#cartBtn{ position: relative; }
#cartBtn .cartCount{
  transform: translate(20%, -20%);
}

/* wysuwane panele w headerze (search + konto)
   ✅ na mobile zawsze trzymamy je w kadrze, pod sticky headerem */
.headerSearch.is-open .searchPanel,
.headerAccount.is-open .accountMenu{
  position: fixed !important;
  top: calc(var(--ks-header-stack, var(--ks-header-h, 72px)) + 10px) !important;
  left: var(--ks-mobile-pad) !important;
  right: var(--ks-mobile-pad) !important;
  width: auto !important;
  max-width: none !important;
  max-height: calc(100dvh - (var(--ks-header-stack, var(--ks-header-h, 72px)) + 28px)) !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* (fallback) jeśli ktoś doda własne style – nie pozwalamy wyjść poza ekran */
.headerSearch .searchPanel,
.headerAccount .accountMenu{
  max-width: calc(100vw - (var(--ks-mobile-pad) * 2)) !important;
}

.headerAccount .accountMenu a{
  padding: 12px 14px !important;
  border-radius: 14px !important;
}

/* ------------------------------------------------------------
   DRAWER MENU
------------------------------------------------------------ */

#drawer .drawerPanel{
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
}

#drawer .drawerHead{
  padding: 16px var(--ks-mobile-pad) !important;
  margin: 0 auto !important;
}

#drawer .drawerLinks{
  padding: 0 var(--ks-mobile-pad) 18px !important;
}

#drawer .drawerMenu > li > a{
  padding: 14px 12px !important;
  border-radius: 16px !important;
  font-size: 16px !important;
  color: rgba(244,239,231,.97) !important;
  background: rgba(7,28,21,.55) !important;
  border-color: rgba(201,171,99,.25) !important;
  font-weight: 850 !important;
}

/* lepsza czytelność submenu */
#drawer .drawerMenu .sub-menu a{
  color: rgba(244,239,231,.92) !important;
  background: rgba(0,0,0,.18) !important;
  border-color: rgba(255,255,255,.12) !important;
}

#drawer .drawerSubToggle{
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
}

.ks-mobileCtaFull{
  width: 100% !important;
}

/* ------------------------------------------------------------
   HERO
------------------------------------------------------------ */

.heroGrid{
  grid-template-columns: 1fr !important;
  min-height: unset !important;
}

.hero{
  padding-top: 16px !important;
}

.heroCard{
  min-width: 0 !important;
  border-radius: 26px !important;
}

.heroCopy{
  padding: 22px 18px 20px !important;
  gap: 14px !important;
}

.kicker{
  flex-wrap: wrap;
  font-size: 11px !important;
  letter-spacing: .14em !important;
}

.kicker .line{
  width: 28px !important;
}

.lead{
  font-size: var(--ks-mobile-body-lg) !important;
  line-height: 1.7 !important;
}

.miniStats{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.miniStats .stat{
  width: 100%;
  min-width: 0;
  justify-content: flex-start !important;
}

.heroCtas{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.heroCtas .btn{
  width: 100% !important;
  justify-content: center !important;
}

.heroMedia{
  min-height: 360px !important;
  border-left: 0 !important;
  border-top: 1px solid rgba(201,171,99,.12) !important;
}

.slide img{
  object-position: center center !important;
}

.carouselUi{
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  gap: 10px !important;
  align-items: end !important;
}

.dots{
  gap: 6px !important;
  flex-wrap: wrap;
}

.dots button{
  width: 22px !important;
}

.arrow{
  display: flex;
  gap: 8px;
}

/* ------------------------------------------------------------
   PRODUKTY (GRID)
------------------------------------------------------------ */

.woocommerce ul.products{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--ks-mobile-gap) !important;
}

.woocommerce ul.products li.product{
  margin: 0 !important;
}

.ks-product-card{
  border-radius: var(--ks-mobile-radius) !important;
}

.ks-product-card__body{
  padding: 12px 12px 10px !important;
}

.ks-product-card__title{
  font-size: 15px !important;
  line-height: 1.2 !important;
}

.ks-product-card__actions{
  padding: 0 12px 12px !important;
}

.ks-product-card__actions .button,
.ks-product-card__actions a.button{
  width: 100% !important;
  text-align: center !important;
}

.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button.add_to_cart_button{
  min-width: 0 !important;
  white-space: normal !important;
}

/* ------------------------------------------------------------
   SINGLE PRODUCT
------------------------------------------------------------ */

.ks-single__grid{
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

.ks-single__summaryInner{
  padding: 14px !important;
  border-radius: var(--ks-mobile-radius) !important;
}

.woocommerce div.product form.cart{
  display: grid !important;
  gap: 10px !important;
}

.woocommerce div.product form.cart .quantity{
  width: 100% !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button{
  width: 100% !important;
}

.ks-single__trust{
  gap: 10px !important;
}

.ks-trust{
  padding: 12px !important;
  border-radius: 18px !important;
}

/* ------------------------------------------------------------
   MINI CART DRAWER
------------------------------------------------------------ */

.ks-cartDrawer{
  width: 100vw !important;
  max-width: 100vw !important;
  /* drawer nie powinien przykrywać sticky headera (UX jak hamburger) */
  top: calc(var(--ks-header-stack, var(--ks-header-h, 72px))) !important;
  height: calc(100dvh - (var(--ks-header-stack, var(--ks-header-h, 72px)))) !important;
}

.ks-cartDrawer__head,
.ks-cartDrawer__body,
.ks-cartDrawer__foot{
  padding-left: var(--ks-mobile-pad) !important;
  padding-right: var(--ks-mobile-pad) !important;
}

/* mini cart: kompakt na mobile */
.ks-cartDrawer{ --ks-mini-thumb: 64px; }
.ks-cartDrawer .woocommerce-mini-cart-item img{ border-radius: 14px !important; }
.ks-cartDrawer .woocommerce-mini-cart-item a.remove{
  width:28px !important;
  height:28px !important;
  border-radius: 12px !important;
  top: 10px !important;
  right: 10px !important;
}

/* Woo mini-cart przyciski na 100% */
.woocommerce-mini-cart__buttons a,
.widget_shopping_cart_content .button{
  width: 100% !important;
  text-align: center !important;
}

/* ------------------------------------------------------------
   SKLEP: FILTRY
------------------------------------------------------------ */

@media (max-width: 980px) {
  .ks-shopHead__inner{
    padding-left: var(--ks-mobile-pad) !important;
    padding-right: var(--ks-mobile-pad) !important;
  }

  .ksFiltersBtn{
    width: 100% !important;
    justify-content: center !important;
  }

  .ksShopLayout{ gap: 14px !important; }

  .ksShopSidebar{
    width: min(420px, 92vw) !important;
    max-width: 92vw !important;
  }

  .ksFiltersClose{
    width: 44px !important;
    height: 44px !important;
  }
}

/* ------------------------------------------------------------
   KOSZYK (CART)
------------------------------------------------------------ */

.woocommerce-cart table.shop_table{
  display: block !important;
}

.woocommerce-cart table.shop_table thead{ display: none !important; }

.woocommerce-cart table.shop_table tbody,
.woocommerce-cart table.shop_table tr,
.woocommerce-cart table.shop_table td{
  display: block !important;
  width: 100% !important;
}

.woocommerce-cart table.shop_table tr{
  position: relative !important;
  margin-bottom: 14px !important;
  padding: 14px !important;
  border-radius: var(--ks-mobile-radius) !important;
  background: var(--ks-mobile-card) !important;
  border: 1px solid var(--ks-mobile-border) !important;
}

.woocommerce-cart table.shop_table td{
  padding: 8px 0 !important;
  border: 0 !important;
}

.woocommerce-cart .product-thumbnail{ display: none !important; }

/* Nazwa produktu = nagłówek karty (miejsce z prawej na przycisk „usuń”). */
.woocommerce-cart table.shop_table td.product-name{
  padding-right: 40px !important;
  font-weight: 700 !important;
  font-size: var(--ks-mobile-body-lg) !important;
}

/* Przycisk „usuń” przypięty w rogu karty zamiast osobnego, osieroconego wiersza. */
.woocommerce-cart table.shop_table td.product-remove{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: auto !important;
  padding: 0 !important;
}

/* Cena / ilość / suma: WooCommerce zapisuje etykietę kolumny w atrybucie
   data-title — bez tej reguły znika ona na mobile i zostają same wartości
   (klient nie widzi, co jest ceną jednostkową, a co sumą za pozycję). */
.woocommerce-cart table.shop_table td.product-price,
.woocommerce-cart table.shop_table td.product-quantity,
.woocommerce-cart table.shop_table td.product-subtotal{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.woocommerce-cart table.shop_table td.product-price::before,
.woocommerce-cart table.shop_table td.product-quantity::before,
.woocommerce-cart table.shop_table td.product-subtotal::before{
  content: attr(data-title);
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.woocommerce-cart table.shop_table td.product-subtotal{
  margin-top: 4px !important;
  padding-top: 12px !important;
  border-top: 1px dashed var(--ks-mobile-border) !important;
  font-weight: 800 !important;
}

.woocommerce-cart .actions{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.woocommerce-cart .actions .coupon{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.woocommerce-cart .actions button,
.woocommerce-cart .actions input{
  width: 100% !important;
}

/* ------------------------------------------------------------
   CHECKOUT
------------------------------------------------------------ */

.woocommerce-checkout form.checkout{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

.woocommerce-checkout #place_order{
  width: 100% !important;
}

/* ------------------------------------------------------------
   MY ACCOUNT
------------------------------------------------------------ */

.woocommerce-account .woocommerce-MyAccount-navigation{
  float: none !important;
  width: 100% !important;
  margin-bottom: 14px !important;
}

.woocommerce-account .woocommerce-MyAccount-content{
  float: none !important;
  width: 100% !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul{
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
  padding-bottom: 8px !important;
  -webkit-overflow-scrolling: touch;
}

.woocommerce-account .woocommerce-MyAccount-navigation li{
  flex: 0 0 auto !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation a{
  white-space: nowrap !important;
  padding: 10px 12px !important;
  border-radius: 999px !important;
}

/* ------------------------------------------------------------
   FOOTER
------------------------------------------------------------ */

.site-footer .grid,
.footer .grid{
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

/* ------------------------------------------------------------
   HOMEPAGE SECTIONS — STRUCTURE
------------------------------------------------------------ */

@media (max-width: 980px){
  #bestsellery > .wrap,
  #historia > .wrap,
  #kontakt2 > .wrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .ks-premium-bestsellers .sectionHead,
  #historia .sectionHead,
  #kolekcje .sectionHead,
  #prezenty .sectionHead,
  #kontakt .sectionHead,
  #kontakt2 .sectionHead{
    padding-inline: 0 !important;
  }

  #historia .panel,
  #prezenty .panel,
  #kontakt .panel,
  #kontakt2 .panel{
    border-radius: 24px !important;
  }

  .story{
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .storyMedia{
    width: 100% !important;
    min-width: 0 !important;
    height: 240px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(201,171,99,.12) !important;
  }

  .storyCopy{
    padding: 20px 18px 22px !important;
    gap: 12px !important;
  }

  .storyCopy p{
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .bulletRow{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 4px !important;
  }

  .bullet{
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .bullet b,
  .kv b{
    font-size: 12px !important;
  }

  .bullet span,
  .kv span{
    font-size: 12px !important;
    line-height: 1.55 !important;
    word-break: break-word;
  }

  .ks-premium{
    padding: 0 !important;
  }

  .ks-premium__container{
    padding: 18px 16px 22px !important;
    border-radius: 24px !important;
    gap: 18px !important;
  }

  .ks-premium__content,
  .ks-premium__media{
    min-width: 0 !important;
  }

  .ks-premium__label{
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  .ks-premium__label-line{
    width: 30px !important;
  }

  .ks-premium__label-text{
    font-size: 10px !important;
    letter-spacing: .18em !important;
  }

  .ks-premium__content{
    text-align: center !important;
  }

  .ks-premium__title{
    margin-bottom: 10px !important;
  }

  .ks-premium__title-light{
    font-size: clamp(1.7rem, 6vw, 2rem) !important;
  }

  .ks-premium__title-bold{
    font-size: clamp(2rem, 7vw, 2.5rem) !important;
  }

  .ks-premium__stats{
    gap: 10px !important;
    margin-bottom: 18px !important;
  }

  .ks-premium__stat{
    max-width: none !important;
    padding: 10px 0 !important;
  }

  .ks-premium__stat-number{
    font-size: 1.45rem !important;
  }

  .ks-premium__stat-label{
    font-size: 10px !important;
    letter-spacing: .12em !important;
  }

  .ks-premium__media{
    margin-top: 0 !important;
    gap: 14px !important;
  }

  .ks-premium__media-main{
    max-width: 100% !important;
  }

  .ks-premium .ks-premium__cards{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .ks-premium .ks-premium__cards .ks-premium__card{
    padding: 14px 12px !important;
  }

  .ks-premium__location{
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 13px !important;
  }

  .ks-premium-collections{
    padding: 0 !important;
  }

  .ks-premium-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    max-width: 100% !important;
  }

  .ks-premium-card{
    min-height: unset !important;
  }

  .ks-premium-content{
    padding: 18px !important;
  }

  .ks-premium-title{
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  .newsletter{
    display: grid !important;
    gap: 16px !important;
    padding: 18px !important;
  }

  .form,
  .newsForm{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100%;
  }

  .input{
    width: 100% !important;
  }

  .contactWrap{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .contactCard .inner{
    padding: 18px !important;
  }

  .formGrid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .field,
  .field.full,
  #ksWholesaleFields .field{
    grid-column: auto !important;
  }

  .checkRow{
    display: grid !important;
    gap: 10px !important;
  }

  .formActions{
    display: grid !important;
    gap: 10px !important;
  }

  .helper{
    text-align: left !important;
  }

  .mapTop{
    display: grid !important;
    gap: 10px !important;
  }

  .mapFrame{
    min-height: 280px !important;
  }

  .kvRow{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .kv{
    padding: 12px !important;
    border-radius: 16px !important;
  }
}

/* ------------------------------------------------------------
   EXTRA SMALL (<=560px)
------------------------------------------------------------ */

@media (max-width: 560px){
  :root{ --ks-mobile-pad: 14px; }

  .woocommerce ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .topbar .pill{
    width: 100% !important;
    justify-content: center !important;
  }

  .site-header .brandText strong{
    font-size: 13px;
  }

  .heroCopy{
    padding: 18px 16px 18px !important;
  }

  .storyMedia{
    height: 220px !important;
  }

  .storyCopy,
  .contactCard .inner,
  .newsletter,
  .ks-premium-content{
    padding: 16px !important;
  }

  /* Sticky ATC: uwzględnij bezpieczny inset na iOS */
  .ksStickyATC{
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* ✅ MOBILE HEADER FIX: ikony w 1 rzędzie, bez "wieży" */
@media (max-width: 980px){

  .site-header .wrap{
    display:grid !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    height: 135px !important;
  }

  /* brand nie może wypychać ikonek */
  .site-header .brand{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width: calc(100% - 0px) !important; /* zostaw miejsce na ikony */
  }

  .site-header .brandText{
    min-width:0 !important;
  }
  .site-header .brandText strong{
    display:none !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .site-header .brandText small{
    display:none !important; /* ukryj tagline na telefonie (możesz zostawić jeśli chcesz) */
  }

  /* kontener przycisków po prawej */
  .site-header .actions,
  .site-header .headerActions,
  .site-header .rightActions{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-around !important;
    gap:10px !important;
    flex-wrap:nowrap !important;
    width:auto !important;
    position:relative !important;
  }

  /* wymuś aby buttony NIE miały fixed/absolute */
  #ksSearchBtn,
  #ksAccountBtn,
  #cartBtn,
  #burger{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
  }

  /* rozmiar i klikalność */
  .site-header .iconBtn{
    width:42px !important;
    height:42px !important;
    border-radius:14px !important;
  }
}
/* ===========================================================
/* Responsive */
@media (max-width: 1200px) {
  .ks-premium-grid {
    gap: 20px;
  }
  
  .ks-premium-card {
    min-height: 380px;
  }
  
  .ks-premium-content {
    padding: 24px;
  }
  
  .ks-premium-title {
    font-size: 22px;
  }
}

@media (max-width: 980px) {
  .ks-premium-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .ks-premium-collections h2 {
    font-size: 36px;
  }
  
  .ks-premium-collections .btn {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    margin-top: 24px;
    display: inline-block;
  }
}

@media (max-width: 768px) {
  .ks-premium-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
  }
  
  .ks-premium-card {
    min-height: 350px;
  }
  
  .ks-premium-collections h2 {
    font-size: 32px;
  }
  
  .ks-premium-collections {
    padding: 40px 0;
  }
}

/* Responsive */
@media (max-width: 1200px) {
  .ks-premium-story .story {
    min-height: 500px;
  }
  
  .ks-premium-story .storyCopy {
    padding: 5px;
    max-width: 320px;
  }
  
  .ks-premium-story h3 {
    font-size: 30px;
  }
}

@media (max-width: 992px) {
  .ks-premium-story .story {
    grid-template-columns: 1fr;
  }
  
  .ks-premium-story .storyMedia {
    min-height: 240px;
  }
  
  .ks-premium-story .bulletRow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .ks-premium-story {
    padding: 0;
  }
  
  .ks-premium-story h2 {
    font-size: var(--ks-mobile-h2);
  }
  
  .ks-premium-story .ks-flexWrap {
    flex-direction: column;
  }
  
  .ks-premium-story .btn {
    width: 100%;
    justify-content: center;
  }
  .contactWrap {
    display: grid;
  }
  .kvRow {
    display: grid;
  }
}
/* Weekly Menu tiles responsive */
@media (max-width: 980px){
  .ks-weekMenu{ padding: 18px; }
  .ks-weekMenu__tiles{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 520px){
  .ks-weekMenu__tiles{ grid-template-columns: 1fr; }
  .ks-weekMenu__mark{ display:none; }
}

/*
 * Additional refinements for very small screens (<480px).
 * These tweaks ensure that cards and grids collapse into a single column,
 * and that copy remains comfortably readable on compact devices. Without
 * overriding higher breakpoints the existing two‑column layout can feel
 * cramped on devices like older iPhones.
 */
@media (max-width: 480px){
  /* Product listing: use a single column on very narrow screens */
  .woocommerce ul.products{
    grid-template-columns: 1fr !important;
  }
  /* Week menu tiles: already handled above but reinforce for safety */
  .ks-weekMenu__tiles{
    grid-template-columns: 1fr !important;
  }
  /* Ensure hero images maintain aspect ratio and fill width */
  .heroMedia{
    min-height: 300px !important;
  }
  /* Increase vertical spacing for call to action buttons to avoid accidental taps */
  .heroCtas{
    gap: 14px !important;
  }
  .heroCtas .btn{
    padding: 14px 20px !important;
    font-size: 16px !important;
  }
  /* Slightly reduce headline sizes for better fit */
  h1{
    font-size: clamp(1.9rem, 8vw, 2.2rem) !important;
  }
  h2{
    font-size: clamp(1.55rem, 6.5vw, 1.9rem) !important;
  }
}

/* ✅ Menu tygodnia — split: eleganckie ułożenie na mobile */
@media (max-width: 980px){
  .ks-weekMenu--split .ks-weekMenu__tiles{
    display:grid;
    flex-direction: column;
    gap: 10px;
  }
  .ks-weekMenu--split .ks-weekMenu__tile{
    flex: 1 1 auto;
  }
  .ks-weekMenu--split .ks-weekMenuVideo__frame{
    height: 240px;
    max-height: 240px;
  }
  .ks-weekMenu--split .ks-weekMenu__split{
    grid-template-columns: 1fr !important;
  }
}

/*
 * Responsive adjustments for the premium split section on mobile.
 * At narrower viewports the media and card stack vertically, padding is
 * reduced and icons shrink for a better balance. These rules live at
 * the end of the file to override earlier defaults.
 */
@media (max-width: 980px){
  .ks-split{
    grid-template-columns: 1fr !important;
  }
  .ks-split__media img{
    min-height: 320px !important;
  }
  .ks-split__card{
    padding: var(--ks-mobile-gap) var(--ks-mobile-pad) !important;
    margin-top: var(--ks-mobile-gap) !important;
  }
  .ks-features{
    gap: 22px !important;
  }
  .ks-feature{
    gap: 14px !important;
  }
  .ks-ico{
    width: 48px !important;
    height: 48px !important;
  }
  .ks-ico svg{
    width: 22px !important;
    height: 22px !important;
  }
  .ks-feature h3{
    font-size: 20px !important;
  }
  .ks-feature p{
    font-size: 16px !important;
  }
}


/* =========================================================
   KS LIGHTBOX-FIRST (ETAP 3 FIX) — mobile polish
   ========================================================= */
@media (max-width: 980px){
  .woocommerce div.product.ks-single .ks-single__gallery{
    padding: 16px;
  }
  .woocommerce div.product.ks-single .ks-single__summaryInner{
    padding: 18px 18px 16px;
  }
}

/* =========================================================
   HOME FILTER — MOBILE BOTTOM SHEET
   Zastępuje siatkę chipów na mobile bardziej eleganckim
   przyciiskiem + wysuwanym panelem od dołu ekranu.
   ========================================================= */

@media (max-width: 980px) {
  .ks-home-products {
    position: relative;
  }

  .ks-home-products .ks-shop-filters {
    display: block !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .ks-home-products .ks-shop-filters::before,
  .ks-home-products .ks-shop-filters__intro,
  .ks-home-products .ks-shop-filters__main {
    display: none !important;
  }

  .ks-home-products .ks-shop-filters__chips--hidden {
    display: none !important;
  }

  .ks-home-products__mobileToolbar {
    position: sticky;
    top: calc(var(--ks-header-h, 74px) + 10px);
    z-index: 12;
    display: grid;
    gap: 12px;
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid rgba(201, 171, 99, .16);
    border-radius: 24px;
    background:
      linear-gradient(180deg, rgba(10, 34, 25, .96), rgba(7, 28, 21, .88)),
      radial-gradient(circle at top left, rgba(201, 171, 99, .16), transparent 44%);
    box-shadow:
      0 18px 40px rgba(0, 0, 0, .28),
      inset 0 1px 0 rgba(255, 255, 255, .04);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .ks-home-products__mobileIntro {
    display: grid;
    gap: 6px;
  }

  .ks-home-products__mobileEyebrow {
    display: inline-flex;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(201, 171, 99, .22);
    background: rgba(201, 171, 99, .08);
    color: rgba(232, 205, 140, .88);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
  }

  .ks-home-products__mobileCopy {
    margin: 0;
    color: rgba(244, 239, 231, .7);
    font-size: 13px;
    line-height: 1.55;
  }

  /* Dwie kolumny zamiast jednej ogromnej karty na cały ekran — mniej scrollowania
     na telefonie/tablecie. (Wcześniej ta reguła nadpisywała `!important` z
     woocommerce.css i wymuszała 1 kolumnę aż do 980px, przez co na stronie
     głównej trzeba było przewijać znacznie więcej niż w samym sklepie, gdzie
     ten sam próg poprawnie dawał 2 kolumny). */
  .ks-home-products.woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .ks-home-products.woocommerce ul.products li.product.ks-product-card {
    padding: 10px !important;
    border-radius: 18px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02)),
      rgba(8, 28, 21, .92) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22) !important;
  }

  .ks-home-products.woocommerce ul.products li.product.ks-product-card .ks-product-card__media {
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 14px !important;
  }

  .ks-home-products.woocommerce ul.products li.product.ks-product-card .ks-product-card__body {
    padding: 10px 3px 2px !important;
  }

  .ks-home-products.woocommerce ul.products li.product.ks-product-card .ks-product-card__details {
    min-height: 0 !important;
  }

  /* Pełna nazwa produktu musi być widoczna — przy 2 liniach dłuższe tytuły
     (a takich jest tu sporo, np. "Bonne Maman Haselnuss & Kakao 30 g – mini
     krem orzechowo-czekoladowy premium") ucinały się w połowie słowa, bez
     wielokropka. Karta jest elastyczna (flex, patrz .ks-product-card__details
     w woocommerce.css), więc różne wysokości tytułów w tym samym rzędzie
     siatki nie psują wyrównania przycisku — nie trzeba przycinać tekstu. */
  .ks-home-products.woocommerce ul.products li.product.ks-product-card .ks-product-card__title {
    margin: 4px 0 6px !important;
    font-size: 14.5px !important;
    line-height: 1.35 !important;
  }

  /* Opis/atrybuty (wino: kraj, region, producent, pojemność…) na wąskiej karcie
     tylko rozpychają layout — na liście z 2 kolumnami liczy się tytuł + cena + CTA,
     a szczegóły klient i tak zobaczy po wejściu w produkt. */
  .ks-home-products.woocommerce ul.products li.product.ks-product-card .ks-product-card__excerpt,
  .ks-home-products.woocommerce ul.products li.product.ks-product-card .ks-wineCard__spec,
  .ks-home-products.woocommerce ul.products li.product.ks-product-card .ks-wineCard__producer,
  .ks-home-products.woocommerce ul.products li.product.ks-product-card .ks-wineCard__appellation,
  .ks-home-products.woocommerce ul.products li.product.ks-product-card .ks-wineCard__badges,
  .ks-home-products.woocommerce ul.products li.product.ks-product-card .ks-product-card__origin {
    display: none !important;
  }

  .ks-home-products.woocommerce ul.products li.product.ks-product-card .price {
    font-size: 17px !important;
  }

  .ks-home-products.woocommerce ul.products li.product.ks-product-card .ks-product-card__actions {
    padding-top: 8px !important;
  }

  .ks-home-products.woocommerce ul.products li.product.ks-product-card .ks-product-card__actions .button,
  .ks-home-products.woocommerce ul.products li.product.ks-product-card .ks-product-card__actions a.added_to_cart {
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 12.5px !important;
  }
}

/* Na bardzo wąskich ekranach 2 kolumny zaczynają dusić dłuższe tytuły —
   wracamy do 1 kolumny, ale karta zostaje kompaktowa (nie jak dawniej). */
@media (max-width: 380px) {
  .ks-home-products.woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Przycisk wyzwalający ---- */
.ks-mob-filter-btn {
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)),
    rgba(7, 28, 21, .72);
  border: 1px solid rgba(213, 184, 117, .24);
  border-radius: 20px;
  color: rgba(244, 239, 231, .94);
  font-family: inherit;
  cursor: pointer;
  transition: transform .2s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.ks-mob-filter-btn:active {
  transform: scale(.995);
  background: rgba(201, 171, 90, .10);
  border-color: rgba(201, 171, 90, .42);
}
.ks-mob-filter-btn__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ks-mob-filter-btn__eyebrow {
  color: rgba(232, 205, 140, .82);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ks-mob-filter-btn__status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(201, 171, 90, .12);
  color: rgba(244, 239, 231, .82);
  font-size: 11px;
  font-weight: 700;
}
.ks-mob-filter-btn__body {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
}
.ks-mob-filter-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  color: rgba(244, 239, 231, .82);
  flex-shrink: 0;
}
.ks-mob-filter-btn__content {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.ks-mob-filter-btn__label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ks-mob-filter-btn__hint {
  display: block;
  color: rgba(244, 239, 231, .62);
  font-size: 12px;
  line-height: 1.35;
}
.ks-mob-filter-btn__arrow {
  opacity: .65;
  flex-shrink: 0;
  transition: transform .25s ease;
}
.ks-mob-filter-btn[aria-expanded="true"] .ks-mob-filter-btn__arrow {
  transform: rotate(180deg);
}
.ks-mob-filter-btn__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(201, 171, 90, .92);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(201, 171, 90, .14);
  display: none;
}
.ks-mob-filter-btn__dot.is-visible { display: block; }

/* ---- Overlay ---- */
.ks-mob-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10060;
}
.ks-mob-sheet.is-open  { display: block; }

/* Ciemne tło */
.ks-mob-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: ksMobBdIn .22s ease forwards;
}
.ks-mob-sheet.is-closing .ks-mob-sheet__backdrop {
  animation: ksMobBdOut .22s ease forwards;
}
@keyframes ksMobBdIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes ksMobBdOut { from { opacity: 1 } to { opacity: 0 } }

/* Panel ---- */
.ks-mob-sheet__panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 82vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(180deg, rgba(10, 34, 25, .98), rgba(6, 24, 19, .98)),
    radial-gradient(circle at top left, rgba(201, 171, 99, .18), transparent 38%);
  border: 1px solid rgba(213, 184, 117, .18);
  border-bottom: none;
  border-radius: 28px 28px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -28px 60px rgba(0, 0, 0, .42);
  animation: ksMobPanelIn .3s cubic-bezier(.32,.72,0,1) forwards;
}
.ks-mob-sheet.is-closing .ks-mob-sheet__panel {
  animation: ksMobPanelOut .22s ease forwards;
}
@keyframes ksMobPanelIn  { from { transform: translateY(100%) } to { transform: translateY(0) } }
@keyframes ksMobPanelOut { from { transform: translateY(0) } to { transform: translateY(100%) } }

/* Uchwyt */
.ks-mob-sheet__handle {
  width: 36px;
  height: 4px;
  background: rgba(255, 255, 255, .18);
  border-radius: 2px;
  margin: 12px auto 0;
}

/* Nagłówek panelu */
.ks-mob-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px 10px;
}

.ks-mob-sheet__eyebrow {
  color: rgba(232, 205, 140, .72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.ks-mob-sheet__title {
  margin-top: 6px;
  color: rgba(244, 239, 231, .96);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.ks-mob-sheet__copy {
  margin: 8px 0 0;
  color: rgba(244, 239, 231, .64);
  font-size: 13px;
  line-height: 1.5;
}

.ks-mob-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  color: rgba(244, 239, 231, .88);
  flex-shrink: 0;
}

/* Lista kategorii */
.ks-mob-sheet__list {
  list-style: none;
  margin: 0;
  padding: 6px 12px 20px;
}
.ks-mob-sheet__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  width: 100%;
  padding: 16px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .05);
  color: rgba(244, 239, 231, .85);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
  -webkit-tap-highlight-color: transparent;
  margin-bottom: 10px;
}
.ks-mob-sheet__item:active {
  transform: scale(.995);
  background: rgba(201, 171, 90, .10);
}
.ks-mob-sheet__item.is-active {
  color: rgba(213, 184, 117, 1);
  background:
    linear-gradient(180deg, rgba(201, 171, 90, .16), rgba(201, 171, 90, .08)),
    rgba(255, 255, 255, .02);
  border-color: rgba(201, 171, 90, .28);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .18);
}
.ks-mob-sheet__itemText {
  grid-column: 1 / 2;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.ks-mob-sheet__itemMeta {
  grid-column: 1 / 2;
  color: rgba(244, 239, 231, .54);
  font-size: 12px;
  line-height: 1.4;
}
/* Ptaszek przy aktywnej */
.ks-mob-sheet__item .ks-mob-check {
  display: none;
  grid-column: 2 / 3;
  grid-row: 1 / span 2;
  align-self: center;
  flex-shrink: 0;
  color: rgba(213, 184, 117, .9);
}
.ks-mob-sheet__item.is-active .ks-mob-check { display: block; }