/** Shopify CDN: Minification failed

Line 1079:21 Expected ")" to end URL token
Line 1314:0 Expected "}" to go with "{"

**/
/* ==========================
   HEADER HEIGHT – IMPULSE THEME
   ========================== */

/* Desktop (duże ekrany) */
@media screen and (min-width: 1200px) {
  .header-wrapper {
    min-height: 76px !important;
  }
  .site-header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 76px !important;
  }
  .header__heading,
  .header__menu,
  .header__icons {
    min-height: 76px !important;
    line-height: 76px !important;
  }
  .header__heading img {
    max-height: 60px; /* Logo nie rozciąga headera */
  }
}

/* Laptopy / mniejsze ekrany */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .header-wrapper {
    min-height: 64px !important;
  }
  .site-header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 64px !important;
  }
  .header__heading,
  .header__menu,
  .header__icons {
    min-height: 64px !important;
    line-height: 64px !important;
  }
  .header__heading img {
    max-height: 52px; /* proporcjonalne logo */
  }
}
/* ==========================
   TEXT LOGO – IMPULSE THEME
   ========================== */

@media screen and (min-width: 768px) {
  .site-header__logo {
    margin-left: 24px !important;   /* odstęp od lewej krawędzi */
    display: flex !important;
    align-items: center !important; /* pionowe wyśrodkowanie */
  }

  .site-header__logo a {
    width: auto !important;        /* wyłączamy sztuczne szerokości 70/100px */
    font-size: 28px !important;    /* ~32–36px wysokości wizualnej */
    line-height: 1 !important;
    font-weight: 600 !important;   /* pogrubienie – czytelność */
    text-decoration: none !important;
    color: #000 !important;        /* czarny tekst (możesz zmienić np. #111111) */
  }
}
/* ==========================
   MAIN MENU – CENTER STYLE
   ========================== */

@media screen and (min-width: 768px) {
  /* wrapper menu */
  .site-nav {
    text-align: center !important;
  }

  /* linki */
  .site-nav__link {
    font-family: 'Inter', sans-serif !important;
    font-size: 15.5px !important;   /* pomiędzy 15–16px */
    font-weight: 500 !important;    /* medium */
    letter-spacing: 0.01em !important; /* +1% */
    margin: 0 12px !important;      /* razem daje odstęp 32px */
    color: #000 !important;         /* bazowy kolor menu */
    text-decoration: none !important;
    transition: all 0.25s ease-in-out !important;
  }
/* ==========================
   HEADER ICONS – FINAL FIX (Impulse)
   ========================== */

@media screen and (min-width: 768px) {
  /* wrapper ikon */
  .site-nav--icons {
    margin-right: 24px !important;  /* odstęp od prawej krawędzi */
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;           /* odstęp między ikonami */
  }

  /* same ikony (SVG) */
  .site-nav__link--icon .icon {
    width: 22px !important;
    height: 22px !important;
  }

  /* cart dot (badge koszyka) */
  .cart-link__bubble {
    background-color: #EFB7B7 !important; /* róż brandowy */
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    border-radius: 50% !important;
    top: -4px !important;
    right: -4px !important;
  }
}
/* ==========================
   DIAMARTA — FINAL MOBILE HEADER
   ========================== */
@media (max-width: 767px) {
  /* Pasek headera */
  .header-layout.header-layout--left-center {
    position: relative !important;
    height: 56px !important;
  }
  .header-layout.header-layout--left-center .header-item {
    min-height: 56px !important;
  }

  /* Logo na środku */
  .header-layout.header-layout--left-center .site-header__logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    margin: 0 !important;
  }
  .header-layout.header-layout--left-center .site-header__logo a {
    display: inline-block !important;
    width: auto !important;
    max-width: 120px !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }

  /* Hamburger po lewej */
  .header-layout.header-layout--left-center .site-nav__link--icon.js-drawer-open-nav {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  /* Koszyk po prawej */
  .header-layout.header-layout--left-center .site-nav__link--icon.js-drawer-open-cart {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  /* Search między nimi (opcjonalne) */
  .header-layout.header-layout--left-center .site-nav__link--icon.js-search-header {
    position: absolute !important;
    right: 52px !important; /* obok koszyka */
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  /* Ikony */
  .header-layout.header-layout--left-center .site-nav__link--icon .icon {
    width: 22px !important;
    height: 22px !important;
  }

  /* Badge koszyka */
  .header-layout.header-layout--left-center .cart-link__bubble {
    background: #EFB7B7 !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    top: -4px !important;
    right: -4px !important;
  }

  /* Drawer fullscreen */
  #NavDrawer.drawer {
    background: #fff !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #NavDrawer .mobile-nav__item a {
    font-size: 18px !important;
    line-height: 40px !important;
    padding: 12px 0 !important;
    color: #000 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
  }
  #NavDrawer .mobile-nav__item a:hover {
    color: #EFB7B7 !important;
  }
}




/* DIAMARTA — pionowe wyśrodkowanie ikon w headerze */
@media (min-width: 768px) {
  .header-item--icons {
    display: flex !important;
    align-items: center !important;   /* pionowe wyśrodkowanie */
    height: 72px !important;          /* tyle samo co header */
  }

  .header-item--icons .site-nav__icons {
    display: flex !important;
    align-items: center !important;   /* wyśrodkowanie dzieci */
    gap: 20px !important;             /* równe odstępy */
    height: 100% !important;
  }

  .header-item--icons .site-nav__link--icon {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;          /* ikona w środku */
  }

  .header-item--icons .icon {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
  }
}

/* DIAMARTA — wycentrowany pastel underline, zgaszenie czarnego */
@media (min-width: 768px) {
  /* 1) Zgaś underline z motywu (a::after / a::before) */
  .header-item--navigation .site-nav__item > a.site-nav__link.site-nav__link--underline::after,
  .header-item--navigation .site-nav__item > a.site-nav__link.site-nav__link--underline::before {
    opacity: 0 !important;
    background: transparent !important;
    height: 0 !important;
    content: "" !important;            /* pseudo-element istnieje, ale niewidoczny */
  }

  /* 2) Nasz underline na TEKŚCIE (span) – już masz centrowanie przez span */
  .header-item--navigation .site-nav__item > a.site-nav__link.site-nav__link--underline > span {
    position: relative !important;
    display: inline-block !important;   /* szerokość = szerokość tekstu */
  }

  .header-item--navigation .site-nav__item > a.site-nav__link.site-nav__link--underline > span::after {
    content: "" !important;
    position: absolute !important;
    left: 50%;
    bottom: -6px;
    width: 100%;
    height: 2px;                        /* 1–2 px */
    background-color: #EFB7B7;          /* pastel róż */
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    opacity: 0;
    transition: transform .2s ease, opacity .2s ease;  /* miękki fade-in */
  }

  .header-item--navigation .site-nav__item > a.site-nav__link.site-nav__link--underline:hover > span::after,
  .header-item--navigation .site-nav__item > a.site-nav__link.site-nav__link--underline:focus > span::after {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
  }

  /* 3) Tekst też w pastel róż przy hover */
  .header-item--navigation .site-nav__item > a.site-nav__link.site-nav__link--underline:hover,
  .header-item--navigation .site-nav__item > a.site-nav__link.site-nav__link--underline:focus {
    color: #EFB7B7 !important;
  }
}
/* 1) Zgaś underline z motywu (czarny pasek) */
@media (min-width: 768px) {
  .header-item--navigation .site-nav__item > a.site-nav__link.site-nav__link--underline::before,
  .header-item--navigation .site-nav__item > a.site-nav__link.site-nav__link--underline::after {
    content: none !important;
    background: transparent !important;
    height: 0 !important;
  }
}

/* 2) Nasz underline – pastel róż, 2px, wycentrowany, z animacją */
@media (min-width: 768px) {
  .header-item--navigation .site-nav__item > a.site-nav__link.site-nav__link--underline {
    position: relative !important;
    text-decoration: none !important;

    /* linia jako tło */
    background-image: linear-gradient(#EFB7B7, #EFB7B7);
    background-repeat: no-repeat;
    background-position: 50% 100%;   /* wycentrowane, na dole */
    background-size: 0 2px;          /* start: niewidoczna linia (2px grubości) */
    transition: background-size .2s ease-in-out;
  }

  .header-item--navigation .site-nav__item > a.site-nav__link.site-nav__link--underline:hover,
  .header-item--navigation .site-nav__item > a.site-nav__link.site-nav__link--underline:focus {
    background-size: 100% 2px;       /* animacja: od środka do pełnej szerokości */
  }
}





/* DIAMARTA — ukrycie hamburgera na desktopie */
@media (min-width: 768px) {
  .site-nav__link--icon.js-drawer-open-nav {
    display: none !important;
  }
}

/* DIAMARTA — spacing menu: 24px */
@media (min-width: 768px) {
  .header-item--navigation .site-nav__item {
    margin: 0 12px !important;  /* razem daje 24px odstępu między linkami */
  }

  /* żeby nie było dodatkowych dziwnych paddingów */
  .header-item--navigation .site-nav__link {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* DIAMARTA — menu z ALL CAPS na Normal Case */
.header-item--navigation .site-nav__link {
  text-transform: none !important;   /* wyłącza uppercase */
  letter-spacing: 0 !important;      /* usuwa rozstrzelanie liter */
}
/* DIAMARTA — Cart dot róż + większy rozmiar */
.cart-link__bubble {
  background-color: #EFB7B7 !important; /* pastel róż */
  width: 10px !important;               /* powiększone */
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  border-radius: 50% !important;        /* idealne kółko */

  /* pozycjonowanie względem ikonki */
  top: -4px !important;
  right: -4px !important;
}
/* Odstępy między linkami w menu headera */
.site-nav__item {
  margin: 0 22px !important;
}

/* Zmniejszenie całej karty produktu w sekcji Featured collection */
.grid-product {
  max-width: 260px !important;  /* szerokość karty */
  margin: 0 auto !important;    /* wyśrodkowanie */
}
/* Fallback: ustaw flex i dociągnij na prawo niezależnie od klas */
.featured-collection .page-width > div {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end !important;
}
/* TYLKO TA SEKCJA – karty po prawej */
:root .grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important; /* docisk w prawo */
  gap: 12px; /* estetyczny odstęp między kartami */
}

/* Nadpisujemy domyślne ~33% szerokości na stałą szerokość karty */
:root .grid__item {
  flex: 0 0 280px !important;   /* szerokość pojedynczej karty */
  max-width: 280px !important;
}
/* ===== DIAMARTA — HARD RESET MEDIÓW W KARTACH ===== */

/* Zawsze pokazuj obraz główny (niezależnie od lazyload/animacji) */
.grid-product img,
.grid-product picture img,
.grid-product .rimage__image,
.grid__item-image-wrapper img,
.grid-product__image,
.grid-product__image--primary,
.product-card img,
.product-item img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

/* Wyłącz „drugie zdjęcie na hover” całkowicie */
.grid-product__image--secondary,
.product-item__image--secondary {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Kontenery obrazów niech nie ukrywają zawartości */
.grid__item-image-wrapper,
.grid-product__image-mask,
.grid-product__link {
  position: relative !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  background: transparent !important;
}

/* Usuń wszelkie overlaye, które mogą zasłaniać obraz */
.grid-product__link::before,
.grid-product__link::after {
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* Nie wczytuj obrazka „po animacji” – pokazuj od razu */
img.lazyload, img.lazyloading, .aos-init img, .aos-animate img {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* ===== KARTA PRODUKTU – RAMKA + STAŁE CTA ===== */

:root{
  --dm-border:#F2EAE6;
  --dm-accent:#F4C7CF;
  --dm-accent-hover:#E9B2BC;
  --dm-gold:#D9C08E;
  --dm-text:#2A2A2A;
  --dm-muted:#444;
}

/* Karta */
.grid-product{
  background:#fff;
  border:1px solid var(--dm-border);
  border-radius:16px;
  padding:14px 14px 16px;
  transition:box-shadow .25s ease, transform .18s ease, border-color .25s ease;
}
.grid-product:hover {
  box-shadow: 
    0 10px 22px rgba(201, 164, 77, 0.25),  /* większe, rozmyte złoto */
    0 0 18px rgba(201, 164, 77, 0.15);    /* delikatna aureola */
  transition: box-shadow 0.4s ease;
}

/* Obraz – bez zmiany proporcji layoutu */
.grid-product__image-mask{
  /* Jeśli chcesz sztywną wysokość, odkomentuj i dobierz:
  height: 300px !important; display:flex; align-items:center; justify-content:center;
  */
  overflow:hidden; border-radius:12px;
}
.grid-product__image-mask img{
  width:100% !important; height:auto !important;
  object-fit:cover;                /* zmień na contain jeśli wolisz całe zdjęcie */
  transition: transform .25s ease, filter .25s ease;
}
.grid-product:hover .grid-product__image-mask img{
  transform: scale(1.03); filter: brightness(1.02);
}

/* Tytuł i cena */
.grid-product__title{
  color:var(--dm-text) !important; text-align:center;
  font-size:15px !important; line-height:1.35 !important;
  margin-top:12px !important; min-height:44px;
}
.grid-product__price{
  margin-top:6px !important; text-align:center;
  font-size:14px !important; color:var(--dm-muted) !important;
}

/* CTA – zawsze widoczne POD zdjęciem (nie overlay) */
.grid-product .quick-add,
.grid-product .product-card__actions,
.grid-product .grid-product__quick-add,
.grid-product .view-details {
  position: static !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  margin-top: 12px !important;
  display: flex !important;
  justify-content: center;
}

.grid-product .quick-add button,
.grid-product .quick-add a,
.grid-product .product-card__quick-add,
.grid-product .view-details a,
.grid-product [data-quick-add]{
  display:inline-block !important;
  background:var(--dm-accent) !important; color:#fff !important;
  border-radius:999px !important; padding:9px 22px !important;
  font-size:13px !important; letter-spacing:.4px;
  border:1px solid transparent;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.grid-product .quick-add button:hover,
.grid-product .quick-add a:hover,
.grid-product .product-card__quick-add:hover,
.grid-product .view-details a:hover,
.grid-product [data-quick-add]:hover{
  background:var(--dm-accent-hover) !important;
  border-color:var(--dm-gold) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
/* ===== PREMIUM VIBE: BACKGROUND & SEPARATORS ===== */

/* Sekcja kolekcji - pastelowy gradient */
.shopify-section[id*="featured-collection"] {
  background: linear-gradient(180deg, #FFF9F6 0%, #FFFFFF 50%, #FFF9F6 100%);
  padding-top: 60px !important;
  padding-bottom: 70px !important;
  position: relative;
}


/* Nagłówek sekcji – luksusowy touch */
.shopify-section[id*="featured-collection"] h2,
.shopify-section[id*="featured-collection"] .section-header__title {
  font-size: 28px !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px;
  text-align: center;
  margin-bottom: 35px !important;
  color: #2A2A2A;
}
/* Tło gradientowe sekcji kolekcji */
#shopify-section-template--18573826588716__featured-collection {
  background: linear-gradient(180deg, #FFF9F6 0%, #FFF0F3 100%);
  padding: 80px 0; /* więcej oddechu */
}
/* Usunięcie białej przerwy między sekcjami */
.shopify-section {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Dopasowanie paddingu w sekcji kolekcji */
#shopify-section-template--18573826588716__featured-collection {
  margin-top: 0 !important;
  padding-top: 40px;  /* możesz zmniejszyć lub zwiększyć */
}
/* Zmniejszenie przerw pomiędzy sekcjami globalnie */
.shopify-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Cena w kapsule z pastelowym różem i złotą obwódką */
.grid-product__price {
  display: inline-block;
  background: #FDECEF;        /* jasny pastelowy róż */
  color: #444;
  font-size: 14px !important;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid #c9a44d;  /* subtelna złota ramka */
  margin-top: 6px !important;
}

/* === Premium tytuł sekcji (Find Your Calm Collection) === */
:root{
  --gold:#c9a44d;            /* matowe złoto */
  --title:#2b2b2b;           /* bardzo ciemny szary */
}

/* Celujemy dokładnie w tytuł w sekcji Featured Collection */
.shopify-section[id*="__featured-collection"] .section-header__title,
.collection-grid .section-header__title{
  font-weight: 400 !important;
  letter-spacing: 1.2px !important;
  color: var(--title) !important;
  text-align: center !important;
  display: inline-block !important;
  position: relative !important;
  padding-bottom: 14px !important;
  margin-bottom: 28px !important;
  /* jeżeli chcesz bardziej „editorial” vibe: */
  /* text-transform: none !important; font-style: normal !important; */
}

/* Subtelna złota kreska pod tytułem (gradient, premium) */
.shopify-section[id*="__featured-collection"] .section-header__title::after,
.collection-grid .section-header__title::after{
  content: "";
  display: block;
  width: 86px;               /* 60–120px w zależności od gustu */
  height: 2px;
  margin: 12px auto 0;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
  border-radius: 2px;
  opacity: .85;
}
/* ================================
   DIAMARTA — Hierarchia karty
   Nazwa (premium) > Cena (kapsuła)
   ================================ */

/* 1) NAZWA PRODUKTU – większa, smukła, luksusowa */
.grid-product__title {
  font-size: 22px !important;       /* możesz zmienić na 17px jeśli za duże */
  font-weight: 500 !important;      /* mocne pogrubienie (bold) */
  color: #2E1F1F !important;        /* trochę ciemniejszy niż wcześniej */
  letter-spacing: 0.5px !important;
  text-align: center !important;
  margin-top: 12px !important;
  margin-bottom: 10px !important;
}

/* mobile tuning */
@media (max-width: 749px){
  .grid-product__title{
    font-size: 16px !important;
    margin-bottom: 10px !important;
    letter-spacing: 0.35px !important;
  }
}

/* 2) CENA – kapsuła „biżuteryjna”, subtelniejsza niż nazwa */
.grid-product__price{
  display: inline-block;
  padding: 6px 18px;                        /* oddech */
  border-radius: 22px;
  font-size: 15px !important;               /* desktop */
  font-weight: 500 !important;              /* 500–600, bez krzyku */
  font-variant-numeric: tabular-nums;       /* równe cyfry = butik */
  line-height: 1.35;
  color: #5C4E4E !important;                /* subtelniejszy niż tytuł */
  background: linear-gradient(180deg, #FCEDEE 0%, #F9DCDC 100%);
  border: 1px solid rgba(201,164,77,0.35);  /* matowe złoto */
  text-align: center;
  margin: 10px auto 4px !important;         /* 10–14px pod tytułem */
}

@media (max-width: 749px){
  .grid-product__price{
    font-size: 14px !important;
    padding: 5px 14px;
    margin: 8px auto 4px !important;
  }
}

/* 3) Dopisek pod ceną – lekki, niech nie konkuruje */
.grid-product__price::after{
  content: "Kit includes all you need";
  display: block;
  font-size: 11px;
  font-weight: 300;
  color: #8A7E7E;
  margin-top: 4px;
}

/* 4) Drobny soft glow na hover całej karty (delikatny) */
.grid-product{
  transition: box-shadow .35s ease, transform .2s ease;
}
.grid-product:hover{
  box-shadow: 0 10px 22px rgba(201,164,77,.12), 0 0 14px rgba(201,164,77,.10);
  transform: translateY(-1px);
}
/* === Diamarta — First Fold (CSS-only) === */
:root{
  --dm-bg:#FFF9F6; --dm-accent1:#ffdbe9; --dm-accent2:#ffcfe2;
  --dm-text:#1f1f1f; --dm-muted:rgba(0,0,0,.65); --dm-bd:rgba(0,0,0,.08);
}

/* Karta info (prawa kolumna) */
.product-single__meta{
  background:var(--dm-bg);
  border-radius:16px;
  padding:12px;
}

/* Tytuł — większy i z oddechem nad ceną */
h1.product-single__title{
  font-weight:600; letter-spacing:.2px; line-height:1.15;
  font-size:28px; margin:6px 0 10px !important; color:var(--dm-text);
}

/* Cena + PODPIS POD ceną (bez HTML) */
.product__price{ margin:2px 0 8px !important; }
.product__price::after{
  content:"Find Your Calm Diamond Painting kit";
  display:block; font-size:12px; margin-top:4px; color:var(--dm-muted);
}

/* CTA — gradient premium (Add to cart) */
.product-form__submit{
  border-radius:999px !important; padding:12px 16px !important; font-weight:600;
  border:1px solid transparent !important; color:#1f1f1f !important;
  background:linear-gradient(180deg,var(--dm-accent1),var(--dm-accent2)) !important;
}
.product-form__submit[disabled]{ opacity:.55; cursor:not-allowed; }

/* „Buy now” jako ghost */
.shopify-payment-button .shopify-payment-button__button--unbranded{
  background:#fff !important; border:1px solid var(--dm-bd) !important; border-radius:999px !important;
}

/* Warianty — kapsułki */
.product-form__input .form__label{ font-size:12px; opacity:.8; margin:12px 0 6px; }
.product-form__input .product-form__input--pill input[type=radio] + label{
  border:1px solid var(--dm-bd); border-radius:999px; background:#fff; padding:8px 12px; font-size:13px;
}
.product-form__input .product-form__input--pill input[type=radio]:checked + label{
  border-color:rgba(255,105,180,.35); box-shadow:0 0 0 3px rgba(255,105,180,.12);
}

/* Ilość — kapsułka */
.quantity, .product-form__quantity{
  border:1px solid var(--dm-bd); border-radius:999px; background:#fff; padding:2px 6px;
}
.quantity__button, .quantity__input{ min-width:28px; height:32px; }

/* Dystanse między blokami (lekko ciaśniej i równo) */
.product-single__meta .product__block{ margin-bottom:10px; }

/* Mobile: 2 kolumny dla przycisków (Add to cart / Buy now) */
@media (min-width:360px){
  .product-form__buttons{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
}

/* Desktop: większa typografia i paddingi */
@media (min-width:992px){
  .product-single__meta{ padding:20px; border-radius:20px; }
  h1.product-single__title{ font-size:34px; }
  .product__price .price-item{ font-size:24px; }
  .product-single__meta .product__block{ margin-bottom:12px; }
}
/* === Centering & width constraints (desktop) === */

/* Ustaw rozsądną szerokość roboczą i wyśrodkuj całość */
.template-product .page-width,
.template-product .product,
.template-product .product-section,
.template-product .product__container{
  max-width: 1180px;      /* możesz zmienić na 1100–1240 */
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;     /* „oddech” przy krawędziach */
  padding-right: 16px;
}

/* Zwiększ odstęp między kolumnami (media ↔ info) */
@media (min-width: 992px){
  .template-product .grid,
  .template-product .grid--product,
  .template-product .product__grid{
    column-gap: 48px;     /* jeśli motyw nie używa CSS Grid, to poniższe: */
  }
  /* Fallback dla układu opartego na float/flex (klasy „grid__item”) */
  .template-product .grid__item.medium-up--two-fifths{ padding-left: 24px; }
  .template-product .grid__item.medium-up--three-fifths{ padding-right: 24px; }
}
/* Karta info — stała, elegancka szerokość i centrowanie w kolumnie */
@media (min-width: 992px){
  .template-product .product-single__meta,
  .template-product .product__info-wrapper{
    max-width: 420px;     /* 400–460px wygląda premium */
    margin-left: auto;
    margin-right: auto;
  }
}
/* === Diamarta • centrowanie i szerokości strony produktu (Impulse) === */

/* 1) Zawęź i wycentruj całą stronę produktu */
@media (min-width: 992px){
  .template-product .page-width{
    max-width: 1150px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 2) Ustaw prawdziwe dwie kolumny i wyrównaj do środka
   — pokrywamy różne warianty wrapperów z Impulse */
@media (min-width: 992px){
  /* główny grid w Impulse przy produkcie */
  .template-product .page-width > .grid.grid--product-images,
  .template-product .page-width > .grid.grid--product-images--partial,
  .template-product .product__grid,
  .template-product .product-single .grid.grid--product-images,
  .template-product .product-single .grid.grid--product-images--partial{
    display: grid !important;
    grid-template-columns: 58% 42% !important; /* możesz zmienić na 60/40 */
    column-gap: 40px !important;
    align-items: start !important;
    justify-content: center !important;
  }

  /* reset szerokości narzuconych przez motyw */
  .template-product .product-single__photos,
  .template-product .product-single__meta,
  .template-product .product__media-wrapper,
  .template-product .product__media{
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
    flex: initial !important;
  }
}

/* 3) Lekko większa typografia buyboxa tylko na desktopie */
@media (min-width: 992px){
  .template-product h1.product-single__title{ font-size: 34px !important; }
  .template-product .product__price .price-item{ font-size: 24px !important; }
}

/* 4) Bezpiecznik — usuń ewentualne maksymalne szerokości zdjęć,
      które blokują layout */
@media (min-width: 992px){
  .template-product .product__main-photos,
  .template-product .product__media-item{
    max-width: 100% !important;
  }
}
/* === Diamarta • Wyśrodkowanie i proporcje 2 kolumn (desktop) === */

/* 0) Szerokość całej strony produktu + wyśrodkowanie */
@media (min-width: 992px){
  .template-product .page-width{
    max-width: 1200px !important;   /* możesz zmienić na 1150–1240 */
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 1) Główny grid przy produkcie – dwie kolumny na środku */
@media (min-width: 992px){
  .template-product .page-width > .grid.grid--product-images,
  .template-product .page-width > .grid.grid--product-images--partial{
    display: grid !important;
    grid-template-columns:
      minmax(520px, 58%)   /* kolumna ze zdjęciami */
      minmax(380px, 42%);  /* buy box – nigdy poniżej ~380px */
    column-gap: 48px !important;
    justify-content: center !important; /* trzyma całość na środku */
    align-items: start !important;
  }

  /* reset narzuconych szerokości z motywu */
  .template-product .product-single__photos,
  .template-product .product-single__meta{
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
    flex: initial !important;
  }
}

/* 2) Rozmiar głównego zdjęcia + miniatury */
@media (min-width: 992px){
  /* niech główne zdjęcie spokojnie zajmie szerokość swojej kolumny */
  .template-product .product__media,
  .template-product .product__main-photos{
    max-width: 100% !important;
  }

  /* miniatury: większe i z oddechem */
  .template-product .product__thumb-item,
  .template-product .product__thumb{
    width: 84px !important;
    height: 84px !important;
  }
  .template-product .product-single__photos .grid--product-images{
    row-gap: 12px !important;
    column-gap: 12px !important;
  }
}

/* 3) Czytelniejsza typografia buy boxa na desktopie */
@media (min-width: 992px){
  h1.product-single__title{ font-size: 36px !important; }
  .product__price .price-item{ font-size: 24px !important; }
}

/* 4) Bardzo szerokie ekrany – delikatnie większy płótno i proporcje 60/40 */
@media (min-width: 1400px){
  .template-product .page-width{ max-width: 1280px !important; }
  .template-product .page-width > .grid.grid--product-images,
  .template-product .page-width > .grid.grid--product-images--partial{
    grid-template-columns: 60% 40% !important;
    column-gap: 56px !important;
  }
}
/* === HOTFIX • Product grid: wymuś 2 kolumny i wyśrodkuj (nadpisuje flex) === */

/* Szerokość płótna + centrowanie strony produktu */
@media (min-width: 992px){
  .template-product .page-width{
    max-width: 1200px !important;
    margin: 0 auto !important;
  }
}

/* Nadpisujemy display:flex z wcześniejszych stylów (także 768px) */
@media (min-width: 768px){
  .template-product .page-width > .grid.grid--product-images,
  .template-product .page-width > .grid.grid--product-images--partial{
    display: grid !important;
    grid-template-columns: minmax(520px,58%) minmax(380px,42%) !important;
    column-gap: 48px !important;
    justify-content: center !important;
    align-items: start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* wyczyść szerokości/flex na dzieciach grida */
  .template-product .page-width > .grid.grid--product-images > .grid__item,
  .template-product .page-width > .grid.grid--product-images--partial > .grid__item{
    width: auto !important;
    max-width: 100% !important;
    flex: initial !important;
  }
}

/* Czytelniejsza typografia buy boxa na desktopie (opcjonalnie) */
@media (min-width: 992px){
  h1.product-single__title{ font-size: 36px !important; }
  .product__price .price-item{ font-size: 24px !important; }
}
/* ——— Micro-polish: wyrównania i oddechy ——— */

/* 1) Delikatny cień karty buybox (premium, bardzo subtelny) */
@media (min-width: 992px){
  .product-single__meta{
    box-shadow: 0 6px 24px rgba(0,0,0,.04);
  }
}

/* 2) Wyrównaj top obu kolumn (gdy zdjęcie ma duży margines u góry) */
@media (min-width: 992px){
  .grid--product-images--partial > .grid__item:first-child,
  .grid--product-images > .grid__item:first-child{
    align-self: start !important;
  }
}

/* 3) Spójne odstępy pod tytułem/ceną i nad CTA */
h1.product-single__title{ margin-bottom: 10px !important; }
.product__price{ margin-bottom: 12px !important; }
.product__block:has(.product-form__buttons){ margin-top: 8px !important; }

/* 4) Miniatury: trochę większe i z hoverem (lepszy UX) */
@media (min-width: 992px){
  .product__thumb, .product__thumb-item{
    width: 88px !important; height: 88px !important;
  }
  .product__thumb img{ transition: transform .15s ease; }
  .product__thumb:hover img{ transform: scale(1.03); }
}

/* 5) Drobny lifting akordeonów (Description/Shipping) */
.collapsible-trigger{
  border-radius: 12px !important;
}
.collapsible-content{
  border-radius: 0 0 12px 12px !important;
}

/* 6) Bardzo szerokie ekrany – trochę więcej płótna i 60/40 */
@media (min-width: 1440px){
  .template-product .page-width{ max-width: 1280px !important; }
  .template-product .page-width > .grid.grid--product-images,
  .template-product .page-width > .grid.grid--product-images--partial{
    grid-template-columns: 60% 40% !important;
    column-gap: 56px !important;
  }
}
/* Ogranicz maksymalną szerokość zdjęcia produktu na desktopie */
@media (min-width: 992px){
  .template-product .product__media,
  .template-product .product__main-photos{
    max-width: 500px !important; /* możesz testować 480–520px */
    margin-left: auto;
    margin-right: auto;
  }
}
/* Zwiększ szerokość prawej kolumny buy boxa */
@media (min-width: 992px){
  .template-product .page-width > .grid.grid--product-images,
  .template-product .page-width > .grid.grid--product-images--partial{
    grid-template-columns: 55% 45% !important; /* wcześniej było 58/42 */
  }
}
/* Breadcrumbs: minimalistyczne, szare, mniej miejsca */
.product-single__meta nav.breadcrumb{
  font-size:12px; color:rgba(0,0,0,.45);
  margin:0 0 6px;
}
.product-single__meta nav.breadcrumb a{
  color:rgba(0,0,0,.55); text-decoration:none;
}
/* Tytuł jako hero (desktop) */
@media (min-width:992px){
  h1.product-single__title{ font-size:40px !important; line-height:1.1; margin-bottom:10px !important; }
}
/* Emocjonalny tagline pod ceną */
.product__price::after{
  content:"Find Your Calm — complete Diamond Painting kit";
  display:block; font-size:12px; margin-top:6px; color:rgba(0,0,0,.65);
}
/* Linia zaufania pod przyciskami */
.product-form__buttons::after{
  content:"✔ Secure checkout • 30-day returns";
  display:block; text-align:center; margin-top:10px;
  font-size:12px; color:rgba(0,0,0,.6);
}
/* hide promo grid titles under products */
.promo-grid__title,
.promo-grid .heading,
.promo-grid .overlay-content { 
  display: none !important;
}
/* HOW IT WORKS — więcej luzu nad stopką (działa nawet, gdy sekcje mają padding:0) */
body.page-how-it-works .shopify-section + .shopify-section-group-footer-group{
  margin-top: clamp(56px, 7vw, 120px) !important; /* doda odstęp nad footerem */
}

/* Dodatkowy bezpiecznik: dołóż padding do ostatniej sekcji z krokami */
body.page-how-it-works .shopify-section[id*="__text_columns"]:last-of-type{
  padding-bottom: clamp(48px, 6vw, 96px) !important;
}

/* Gdyby ostatnie dziecko miało margines „zjadający się” z rodzicem */
body.page-how-it-works .index-section:last-child{
  margin-bottom: 0 !important;
}
#shopify-section-template--18778063405100__text_columns_e3nRmi{
  margin-bottom: 120px !important;
}
/* HOW IT WORKS – przesunięcie pierwszego kafla w prawo */
@media (min-width: 992px) {
  .text-column__grid > .text-center:nth-child(1) {
    margin-left: 100px; /* możesz zmienić na 30px / 60px według potrzeb */
  }
}
/* HOW IT WORKS – przesunięcie drugiego kafla w lewo */
@media (min-width: 992px) {
  .text-column__grid > .text-center:nth-child(2) {
    margin-left: -70px; /* wartość ujemna przesuwa w lewo */
  }
}
/* === FALA ŁĄCZĄCA KROKI – DESKTOP === */
.shopify-section[id*="text-columns"] .text-column__grid {
  position: relative;                 /* kotwica dla pseudo-elementu */
  z-index: 1;                         /* treść ponad falą */
}

.shopify-section[id*="text-columns"] .text-column__grid::before {
  content: "";
  position: absolute;
  inset: 0;                           /* top:0; right:0; bottom:0; left:0 */
  background: url({{ 'ChatGPT_Image_30_wrz_2025_16_14_45.png' | file_url }})
              no-repeat center 48%;   /* dopasuj pion: 40–60% */
  background-size: 1200px auto;       /* szerokość fali – dopasuj */
  opacity: .9;                        /* delikatnie */
  z-index: 0;                         /* fala pod treścią */
  pointer-events: none;               /* kliknięcia nie łapią tła */
  filter: drop-shadow(0 0 0 rgba(0,0,0,0)); /* brak wpływu na ostrość */
}

/* Mały oddech nad/ pod, żeby fala miała przestrzeń */
.shopify-section[id*="text-columns"] {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* === MOBILE: zwykle lepiej falę wyłączyć albo uprościć === */
@media (max-width: 749px) {
  .shopify-section[id*="text-columns"] .text-column__grid::before {
    background-position: center 55%;
    background-size: 800px auto;      /* mniejsza fala */
    opacity: .7;
  }
}

/* Jeśli na mobile przecina treści – można całkiem ukryć */
@media (max-width: 480px) {
  .shopify-section[id*="text-columns"] .text-column__grid::before {
    display: none;
  }
}
 


/* HOW IT WORKS — hover tylko na ikonie (nie na całym kafelku) */
.shopify-section[id*="text_columns"] .text-center image-element > img,
.shopify-section[id*="text_columns"] .text-center img.image-element,
.shopify-section[id*="text-columns"] .text-center img {
  display: block;
  transform-origin: center center;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), filter .35s ease;
}

/* Hover: powiększ TYLKO obrazek + delikatny „gold” cień */
.shopify-section[id*="text_columns"] .text-center:hover image-element > img,
.shopify-section[id*="text_columns"] .text-center:hover img.image-element,
.shopify-section[id*="text-columns"] .text-center:hover img {
  transform: scale(1.08) !important;


/* Upewnij się, że kafelek sam nie dodaje tła/cienia na hover */
.shopify-section[id*="text_columns"] .text-center {
  background: transparent !important;
  box-shadow: none !important;
}

/* (opcjonalnie) wyłącz hover na urządzeniach dotykowych */
@media (hover: none) {
  .shopify-section[id*="text_columns"] .text-center image-element > img,
  .shopify-section[id*="text_columns"] .text-center img.image-element {
    transition: none;
  }
}

 /* HOW IT WORKS — efekt złotej poświaty dookoła obrazka */
.shopify-section[id*="text_columns"] .image-element {
  transition: transform .35s ease, box-shadow .35s ease;
  border-radius: 12px; /* lekko zaokrąglone rogi jak w kolekcji */
}

.shopify-section[id*="text_columns"] .image-element:hover {
  transform: scale(1.05); /* lekkie powiększenie */
  box-shadow: 0 0 20px rgba(201, 164, 77, 0.4), 
              0 0 40px rgba(201, 164, 77, 0.2); /* złota poświata */
}

/* Złote gwiazdki w sekcji opinii */
.testimonial-stars {
  color: #C9A44D !important;   /* złoty kolor */
}

.testimonial-stars::before,
.testimonial-stars::after {
  color: #C9A44D !important;   /* na wszelki wypadek jeśli gwiazdki są generowane */
}

.testimonial-stars svg {
  fill: #C9A44D !important;    /* jeśli to SVG */
  color: #C9A44D !important;
}


/* --- SAFETY: przeniesione style quick facts i trust badges --- */
.dm-qf,
.dm-qf-list .dm-qf{
  display:flex; align-items:center; gap:10px;
  margin:8px 0; padding:10px 14px;
  border:1px solid rgba(0,0,0,.05);
  border-radius:12px; background:#fff9f6;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
  font-size:14px; font-weight:500; color:#333;
}
.dm-qf__icon{
  width:20px; height:20px; flex:0 0 20px;
  background-size:contain; background-position:center; background-repeat:no-repeat;
}

/* Trust badges nad/przy CTA */
.dm-badges{
  display:grid; grid-template-columns:1fr; gap:8px;
  margin:12px 0 14px;
}
.dm-badge{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  background:#fff9f6; border:1px solid rgba(0,0,0,.06);
  border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.04);
  font-size:14px; color:#333; font-weight:500;
}
.dm-badge img{ width:20px; height:20px; object-fit:contain; flex:0 0 20px; }
@media (min-width:640px){
  .dm-badges{ grid-template-columns:repeat(3,1fr); gap:10px; }
}

/* Diamarta cross-sell area inside cart drawer */
#cart-drawer-upsell {
  margin-top: 20px;
  padding: 16px;
  border-top: 1px solid #f1e8ea;
  background: #fff;
}

#cart-drawer-upsell h3 {
  font-size: 15px;
  color: #4a3b3f;
  font-weight: 500;
  margin-bottom: 6px;
}

#cart-drawer-upsell p {
  font-size: 13px;
  color: #8a7c80;
  line-height: 1.4;
  margin-bottom: 10px;
}

#cart-drawer-upsell button,
#cart-drawer-upsell .btn {
  background-color: #f8e4e7;
  color: #4a3b3f;
  border-radius: 999px;
  font-size: 13px;
  padding: 10px 20px;
  transition: all 0.2s ease;
}

#cart-drawer-upsell button:hover {
  background-color: #f2d5da;
}

.cart__terms{margin-top:10px;}
.cart__terms label{font-size:12px;color:#8a7c80;}


/* Hide qty selector ONLY inside the cross-sell widget (drawer) */
#cart-drawer-upsell [class*="quantity"],
#cart-drawer-upsell [class*="qty"],
#cart-drawer-upsell label[for*="quantity"],
#cart-drawer-upsell input[type="number"],
#cart-drawer-upsell button[aria-label*="quantity"],
#cart-drawer-upsell .reconvert-quantity,
#cart-drawer-upsell .rc-qty-wrapper,
#cart-drawer-upsell .rc-qty,
#cart-drawer-upsell .quantity, 
#cart-drawer-upsell .quantity-selector {
  display: none !important;
}

/* Hide quantity row ONLY inside the cross-sell widget in the drawer */
#CartDrawer #cart-drawer-upsell .rc-qty-wrapper,
#CartDrawer #cart-drawer-upsell .rc-qty,
#CartDrawer #cart-drawer-upsell .reconvert-quantity,
#CartDrawer #cart-drawer-upsell .quantity,
#CartDrawer #cart-drawer-upsell .quantity-selector,
#CartDrawer #cart-drawer-upsell [class*="qty"],
#CartDrawer #cart-drawer-upsell input[type="number"],
#CartDrawer #cart-drawer-upsell button[aria-label*="quantity"],
#CartDrawer #cart-drawer-upsell button[aria-label*="increase"],
#CartDrawer #cart-drawer-upsell button[aria-label*="decrease"]{
  display:none !important;
}