/*
Theme Name: Hello Commerce Child
Template: hello-commerce
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Sell smart from the start with Hello Commerce. Hello Commerce is a free WordPress ecommerce theme designed to help you launch your online store quickly and professionally. Built for WooCommerce and powered by the flexibility of Elementor, it offers a lightweight, responsive foundation that’s perfect for beginners and growing businesses alike. Whether you're selling products or services, the Hello Commerce theme gives you the freedom to build your store your way, launch fast, and scale with confidence. Start strong with a guided setup, ready-made shop templates, and intuitive styling controls. Customize your storefront’s style and layout, including product grids, cart, and checkout pages, with intuitive controls, directly within the Elementor ecosystem without code. Manage your site efficiently using the dedicated Home screen that brings key tools and actions together. Why Hello Commerce? - Seamless integration with Elementor and WooCommerce - Fast, flexible, and performance-optimized - Beginner-friendly, no code or technical skills required - Complete site template kits to launch your store quickly. Report security bugs through the Patchstack Vulnerability Disclosure Program. The Patchstack team validates, triages, and handles vulnerabilities. Report here https://patchstack.com/database.
Tags: flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready,style-variations
Version: 1.0.2.1788166536
Updated: 2026-08-31 10:55:36

*/



/* ==========================================================================
   TOOWELL — Ręcznik RITUAL — CSS pod projekt Adobe XD
   Wklej ten plik w Elementor > Site Settings > Custom CSS,
   albo w Wygląd > Dostosuj > Dodatkowy CSS.
   ========================================================================== */

:root {
  --tw-bg: #FBEACB;         /* kremowe tło */
  --tw-grid-line: #F0C089;  /* linie siatki w tle */
  --tw-orange: #E8542C;     /* główny pomarańcz (CTA, nagłówki sekcji) */
  --tw-orange-dark: #C7431F;
  --tw-ink: #2B1B10;        /* prawie-czarny brąz na tekst */
  --tw-white: #FFFFFF;
  --tw-font: 'Futura', sans-serif; /* już wgrany przez elementor-pro-custom-fonts-inline-css */
}

/* --------------------------------------------------------------------
   1. TŁO — siatka w kratkę na całej stronie produktu
   -------------------------------------------------------------------- */
body.single-product {
  background-color: var(--tw-bg);
  background-image:
    linear-gradient(var(--tw-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--tw-grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  font-family: var(--tw-font);
  color: var(--tw-ink);
}

/* --------------------------------------------------------------------
   2. NAGŁÓWEK — logo + hamburger
   -------------------------------------------------------------------- */
.elementor-1053.elementor-location-header {
  background: transparent;
  padding: 24px 32px;
}

.elementor-element-0ac1db3.logo img {
  max-width: 220px;
  height: auto;
}

.elementor-element-0f66ede .elementor-icon svg {
  width: 32px;
  height: 32px;
  fill: var(--tw-ink);
}

/* --------------------------------------------------------------------
   3. GALERIA PRODUKTU
   -------------------------------------------------------------------- */
/* UWAGA: border na tym boxie jest już ustawiony w Elementorze
   (Style > Border na kontenerze 149dcd9) — NIE dokładamy tu drugiego.
   Jeśli chcesz zmienić grubość/kolor, zrób to w Elementorze, nie tutaj. */
.elementor-element-78f9bbe {
  background: transparent;
}

.woocommerce-product-gallery {
  padding: 8px;
  background: var(--tw-white);
}

.woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* miniaturki w gridzie 2x2 pod głównym zdjęciem, tak jak w projekcie */
.flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
  list-style: none;
  padding: 0;
}

.flex-control-thumbs li img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--tw-orange);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.flex-control-thumbs li img.flex-active,
.flex-control-thumbs li img:hover {
  opacity: 1;
  border-color: var(--tw-orange-dark);
}

.woocommerce-product-gallery__trigger {
  background: var(--tw-white);
  border: 1px solid var(--tw-orange);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------
   4. TYTUŁ / PODTYTUŁ PRODUKTU
   -------------------------------------------------------------------- */
/* Elementor generuje dla tytułu selektor z 4 klasami (bardzo mocny),
   więc żeby na pewno wygrać, kopiujemy dokładnie ten sam wzorzec selektora
   + !important tam gdzie to konieczne. */
.elementor-1575 .elementor-element.elementor-element-f8f11b4 .elementor-heading-title {
  font-size: clamp(28px, 4vw, 42px) !important;
  margin: 0 0 4px;
  line-height: 1.1;
}

.elementor-1575 .elementor-element.elementor-element-f22d4e1 .elementor-heading-title {
  font-size: 15px !important;
  margin: 0 0 20px;
}

/* --------------------------------------------------------------------
   5. BLOK CENY / ZAKUPU (eeaf0a9)
   -------------------------------------------------------------------- */
/* UWAGA: border 5px i tło tego boxu są już ustawione w Elementorze
   (kontener eeaf0a9) — zostawiamy tylko padding, nie dublujemy border/bg. */
.elementor-element-eeaf0a9 {
  padding: 20px;
}

.elementor-element-0d32826 .price {
  font-family: var(--tw-font);
  font-weight: 900;
  font-size: 32px;
  color: var(--tw-ink);
  margin: 0;
}

.elementor-element-0d32826 .price ins {
  text-decoration: none;
  color: var(--tw-orange);
}

.elementor-element-0d32826 .price del {
  color: #9c8b78;
  font-size: 0.6em;
  margin-right: 8px;
}

/* dostępność / wysyłka 24h - kropka + tekst */
.custom-czas-wysylki {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 12px 0;
}

.custom-czas-wysylki-kropka {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4CAF50;
  display: inline-block;
  flex-shrink: 0;
}

/* pasek 4 mikro-atutów: 100% bawełna / Produkcja UE / Darmowa dostawa / 30 dni na zwrot */
.elementor-element-2dfe232 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--tw-orange);
}

.elementor-element-2dfe232 .elementor-heading-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--tw-ink);
  position: relative;
  padding-left: 14px;
  margin: 0;
}

.elementor-element-2dfe232 .elementor-heading-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--tw-orange);
  border-radius: 50%;
}

/* --------------------------------------------------------------------
   6. AKORDEON — Opis produktu / Skład / Dostawa
   -------------------------------------------------------------------- */
.elementor-element-eb96044 {
  margin-top: 16px;
}

.e-n-accordion {
  border-top: 2px solid var(--tw-orange);
}

.e-n-accordion-item {
  border-bottom: 2px solid var(--tw-orange);
}

.e-n-accordion-item-title {
  padding: 16px 4px;
  cursor: pointer;
  list-style: none;
}

.e-n-accordion-item-title::-webkit-details-marker {
  display: none;
}

.e-n-accordion-item-title-text {
  font-family: var(--tw-font);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--tw-ink);
}

.e-n-accordion-item-title-icon svg {
  width: 14px;
  height: 14px;
  fill: var(--tw-orange);
}

.e-n-accordion-item[open] .e-n-accordion-item-title-text {
  color: var(--tw-orange);
}

.elementor-element-692af9b p,
.elementor-widget-text-editor {
  font-size: 13px;
  line-height: 1.6;
  color: var(--tw-ink);
  padding: 0 8px 16px;
  text-align: center;
}

/* --------------------------------------------------------------------
   7. PASEK PARAMETRÓW — 550g/m² | 100% | OEKO-TEX | UE
   -------------------------------------------------------------------- */
.elementor-element-6675a62 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 2px solid var(--tw-orange);
  margin: 32px 0;
  text-align: center;
}

.elementor-element-6675a62 > .e-con {
  padding: 20px 8px;
  border-right: 2px solid var(--tw-orange);
}

.elementor-element-6675a62 > .e-con:last-child {
  border-right: none;
}

.elementor-element-6675a62 .elementor-heading-title {
  font-family: var(--tw-font);
  font-weight: 900;
  font-size: 15px;
  color: var(--tw-ink);
  text-transform: uppercase;
  line-height: 1.3;
}

/* pierwszy kafelek (550g/m²) na pomarańczowo, tak jak w projekcie */
.elementor-element-98ed9ba .elementor-heading-title {
  color: var(--tw-orange);
  font-size: 20px;
}

/* na mobile robimy 2x2 zamiast 1x4 */
@media (max-width: 767px) {
  .elementor-element-6675a62 {
    grid-template-columns: repeat(2, 1fr);
  }
  .elementor-element-6675a62 > .e-con:nth-child(2) {
    border-right: none;
  }
  .elementor-element-6675a62 > .e-con:nth-child(1),
  .elementor-element-6675a62 > .e-con:nth-child(2) {
    border-bottom: 2px solid var(--tw-orange);
  }
}

/* --------------------------------------------------------------------
   8. BANER "ŁAZIENKA JAKO GALERIA"
   -------------------------------------------------------------------- */
.elementor-element-6feee0d {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  padding: 40px 32px;
  background-size: cover;
  background-position: center;
}

.elementor-element-6feee0d::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20,12,8,0.55) 0%, rgba(20,12,8,0.15) 60%, transparent 100%);
  z-index: 0;
}

.elementor-element-6feee0d > .e-con {
  position: relative;
  z-index: 1;
}

.elementor-element-04e5773 .elementor-heading-title {
  font-family: var(--tw-font);
  font-weight: 900;
  font-size: clamp(22px, 3.5vw, 30px);
  text-transform: uppercase;
  color: var(--tw-white);
  margin: 0 0 8px;
}

.elementor-element-5f7991c {
  color: var(--tw-white);
  font-size: 13px;
  line-height: 1.6;
  max-width: 320px;
  margin-bottom: 20px;
}

.elementor-element-eef9057 .elementor-button {
  background: transparent;
  border: 2px solid var(--tw-white);
  color: var(--tw-white);
  font-family: var(--tw-font);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.05em;
  padding: 12px 32px;
  border-radius: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

.elementor-element-eef9057 .elementor-button:hover {
  background: var(--tw-white);
  color: var(--tw-ink);
}

/* --------------------------------------------------------------------
   9. Ogólny reset drobiazgów Elementora, żeby nie psuły layoutu
   -------------------------------------------------------------------- */
.elementor-1575 .e-con {
  max-width: 100%;
}

.elementor-1575 h1,
.elementor-1575 h2,
.elementor-1575 p {
  margin: 0;
}
/* ==========================================================================
   TOOWELL — SILNIK SIATKI 16 x 9 (DESKTOP)
   Doklej ten blok NA KOŃCU pliku toowell-product-style.css
   (albo na końcu style.css motywu potomnego, pod poprzednim CSS-em)
   ========================================================================== */

/* --------------------------------------------------------------------
   1. ZMIENNE SIATKI — 16 kolumn x 9 wierszy, liczone z rozmiaru ekranu.
   Aktywne tylko od 1025px w górę (breakpoint "desktop" w Elementorze).
   Poniżej tego progu zostaje siatka mobilna z poprzedniego pliku.
   -------------------------------------------------------------------- */
@media (min-width: 1025px) {

  :root {
    --grid-cols: 16;
    --grid-rows: 9;
    --cell-w: calc(100vw / var(--grid-cols));
    --cell-h: calc(100vh / var(--grid-rows));
  }

  /* siatka w tle — JEDNA, ciągła, na całym body (nie per sekcja!) */
  body.single-product {
    background-image:
      linear-gradient(var(--tw-grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--tw-grid-line) 1px, transparent 1px);
    background-size: var(--cell-w) var(--cell-h);
    background-position: 0 0;
  }

  /* --------------------------------------------------------------------
     2. NAGŁÓWEK — logo + hamburger
     Szacunek: logo = 6 komórek szer. x 2 komórki wys.
     -------------------------------------------------------------------- */
  .elementor-1053.elementor-location-header {
    height: calc(var(--cell-h) * 2);
    padding: 0 calc(var(--cell-w) * 1);
    display: flex;
    align-items: center;
  }

  .elementor-element-0ac1db3.logo {
    width: calc(var(--cell-w) * 6);
  }

  .elementor-element-0ac1db3.logo img {
    max-width: 100%;
    height: auto;
  }

  .elementor-element-0f66ede {
    width: var(--cell-w);
    height: var(--cell-h);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
  }

  /* --------------------------------------------------------------------
     3. GŁÓWNY UKŁAD PRODUKTU — dwie kolumny obok siebie
     Lewa (galeria) = 6 komórek, prawa (info/cena) = 10 komórek = 16 razem
     -------------------------------------------------------------------- */
  .elementor-element-2418956 {
    display: flex;
    align-items: flex-start;
  }

  .elementor-element-149dcd9 {
    /* kolumna galerii */
    width: calc(var(--cell-w) * 6);
    flex: 0 0 calc(var(--cell-w) * 6);
  }

  .elementor-element-202a157 {
    /* kolumna z tytułem, ceną, opisem */
    width: calc(var(--cell-w) * 10);
    flex: 0 0 calc(var(--cell-w) * 10);
    padding-left: var(--cell-w);
  }

  /* Galeria zdjęć — box 6 x 6 komórek */
  .woocommerce-product-gallery {
    width: calc(var(--cell-w) * 6);
    height: calc(var(--cell-h) * 6);
  }

  .woocommerce-product-gallery__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* miniaturki pod głównym zdjęciem — każda 1 komórka x 1 komórka,
     4 w rzędzie (razem 4 komórki szerokości, mieszczą się w 6-komórkowej galerii) */
  .flex-control-thumbs {
    grid-template-columns: repeat(4, var(--cell-w));
    gap: 0;
    margin-top: 0;
  }

  .flex-control-thumbs li img {
    width: var(--cell-w);
    height: var(--cell-h);
    border-radius: 0;
  }

  /* --------------------------------------------------------------------
     4. PANEL CENY / ZAKUPU — box 10 x 5 komórek
     -------------------------------------------------------------------- */
  .elementor-element-eeaf0a9 {
    width: calc(var(--cell-w) * 10);
    min-height: calc(var(--cell-h) * 5);
    padding: var(--cell-h) var(--cell-w);
    box-sizing: border-box;
  }

  /* --------------------------------------------------------------------
     5. PASEK PARAMETRÓW — 550g/m² | 100% | OEKO-TEX | UE
     Pełna szerokość = 16 komórek, podzielona na 4 boxy po 4 komórki każdy,
     wysokość = 2 komórki
     -------------------------------------------------------------------- */
  .elementor-element-6675a62 {
    width: calc(var(--cell-w) * 16);
    height: calc(var(--cell-h) * 2);
    grid-template-columns: repeat(4, calc(var(--cell-w) * 4));
  }

  .elementor-element-6675a62 > .e-con {
    height: calc(var(--cell-h) * 2);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* --------------------------------------------------------------------
     6. BANER "ŁAZIENKA JAKO GALERIA" — pełna szerokość x 4 komórki wysokości
     -------------------------------------------------------------------- */
  .elementor-element-6feee0d {
    width: calc(var(--cell-w) * 16);
    height: calc(var(--cell-h) * 4);
    min-height: calc(var(--cell-h) * 4);
    padding: 0 calc(var(--cell-w) * 2);
  }

}